/***************************************************************
--------------------Color Palette--------------------
***************************************************************/
/*Base Colors:
------------------
#e4e5f1 - Light Gray (Background)
#000000 - Navy Blue (Card Headers)
#C3C3C3 - Medium Gray (Card Bodies)
#FFFFFF - White
#0d6efd - Light Blue 

Course Module:
------------------
#405840 - Dark Green (Headers)
#1a2030 - Dark Blue (Headers 2)
#5E7F57 - Medium Green (Menu)
#436597 - Medium Blue (Menu 2)
#CFDDC7 - Light Green (Highlights)

Knowledge Module:
------------------
var(--hd-blue) - Medium Blue (Headers)
#002D74 - Dark Blue (KRA Headers)
#0033A1 - Royal Blue (Task Headers)
#FF8C1A - Vivid Orange (Headers)
#ffe6cc - Light Orange (Headers 2)
#CEE3F5 - Light Blue (Background)

Procedures Module:
------------------
#00B2E3 - Turquoise (Headers)
#62DCFA - Light Turquoise (Headers 2)
#2292AE - Medium Teal (Page Headers)
#B6ECFA - Very Light Blue (Highlights)

Groups Module:
------------------
#4B4747 - Dark Gray (Headers)
#C3C3C3 - Medium Gray (Headers 2)
#565656 - Medium Dark Gray (Headers 3)

Sales Module:
------------------
#C91B1B - Dark Red (Headers)
#F8E2E2 - Light Pink (Background)

List Module:
------------------
#C23504 - Burnt Orange (Headers)
#F99A79 - Light Orange (Background)

ExxTend Learning Module:
------------------
#0C4B33 - Dark Green (Headers)
#23895F - Medium Green (Headers 2)
#44B78B - Light Green (Button Border)
#C7EFDF - Very Light Green (Highlights)
#F8F8F8 - Off-White (Side Background)
var(--hd-lime) - Lime Green (Learning Headers)

User Module:
------------------
#93B9D9 - Medium Blue (Headers)
#A4C2F4 - Light Blue (Background)
#F2F2F2 - Very Light Gray (Hover)

Suite Module:
------------------
#76d7c4 - Turquoise (Headers)
#E6F8F4 - Very Light Turquoise (Background)
#939598 - Medium Gray (Modal Headers)
#CFD0D1 - Light Gray (Button Hover)

Dark Mode:
------------------
#212529 - Very Dark Gray (Background)
#2b3035 - Dark Gray (Text Header)
#303130 - Medium Dark Gray (Buttons)
#033457 - Dark Blue (Sidebar)
#444848 - Dark Slate (Suite Background)
#404140 - Medium Dark Gray (Hover)
#4b53571 - Medium Dark Gray (Card Body)
/* #endregion */

:root {
    
	--search-spacing: 41px;
    --navbar-spacing: 76px;
    --header-spacing: 50px;
    --footer-spacing: 0px;
	--scroll-spacing: calc(var(--navbar-spacing) + var(--header-spacing) + var(--footer-spacing));
    --half-scroll-spacing: calc(calc((100vh - var(--scroll-spacing))/2) - calc(var(--bs-card-spacer-y)*2) + calc(1.5em + .5rem + calc(var(--bs-border-width) * 2)));
}


/* #region */
.greybg{
	background-color:white;
}

.mybg2,
textarea#disabled,
.elbgmain,
.bg-white,
.bg-white-important {
	background-color: #ffffff;
}

.mybg2 input {
	cursor: text;
}.mybg2 href,
.documentation-fullscreen-toggle,
.learning-track-node-item .point,
.cursor-pointer,
.dur-label-cursor,
.widget-label-cursor {
	cursor: pointer;
}

.mybg3 {
	background-color: #999999;
}

.bg-light {
	background-color: #FFFFFF !important
}

[data-bs-theme=dark] .bg-light,
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] body,
[data-bs-theme=dark] .traffic-log-modal .modal-content,
[data-bs-theme=dark] .traffic-log-modal .modal-footer,
[data-bs-theme=dark] .traffic-log-modal .modal-header-filter[style],
[data-bs-theme=dark] .traffic-log-modal [style*="background-color: #f8f9fa"] {
	background-color: #212529 !important;
}

[data-bs-theme=dark] .mybg2,
[data-bs-theme=dark] .mydeptbox,
[data-bs-theme=dark] .userhvr,
[data-bs-theme=dark] .ekbg,
[data-bs-theme=dark] .card,
[data-bs-theme=dark] #user-signature-update {
	background-color: #212529;
}

.theme-inverse,
.text-dark-always,
.text-dark-hover:hover,
[data-bs-theme=dark] .icon-button-prochighlight:hover a,
[data-bs-theme=dark] .capsule div:hover a,
[data-bs-theme=dark] .capsule div:hover path,
.user-signature-mobile .theme-inverse {
	color: black !important;
}

[data-bs-theme=dark] .theme-inverse,
[data-bs-theme=dark] .icon-button-prochighlight,
[data-bs-theme=dark] .icon-button-prochighlight a,
.assigned-group .group-assignment-dropdown .dropdown-toggle::after {
	color: white !important;
}
	/* doesn't respond to theme */

[data-bs-theme=dark] .text-dark,
[data-bs-theme="dark"] .note-editor .note-btn,
[data-bs-theme="dark"] .note-editor .note-btn.btn,
[data-bs-theme="dark"] .note-editor .note-btn.btn-default,
[data-bs-theme="dark"] .note-editor .note-btn.btn-light {
	color: var(--hd-white-a80) !important;
}

[data-bs-theme=dark] .text_header,
[data-bs-theme=dark] .alt1 { 
	background-color: rgb(43, 48, 53);
}

[data-bs-theme=dark] .text_border { 
	border-color: rgb(73, 80, 87);
}

[data-bs-theme=dark] .mainfont,
[data-bs-theme=dark] a.mainfont:link,
[data-bs-theme=dark] a.mainfont:hover,
[data-bs-theme=dark] a.mainfont:active,
[data-bs-theme=dark] a.mainfont:visited,
[data-bs-theme=dark] .mainfontu,
[data-bs-theme=dark] .mainfontu:hover,
[data-bs-theme=dark] .dropdown-header {
	color: white;
}


[data-bs-theme=dark] .elhighlighto a.mainfont:link,
[data-bs-theme=dark] .elhighlighto a.mainfont:hover,
[data-bs-theme=dark] .elhighlighto a.mainfont:active,
[data-bs-theme=dark] .elhighlighto a.mainfont:visited,
.elhighlighto a.mainfont:link,
.elhighlighto a.mainfont:hover,
.elhighlighto a.mainfont:active,
.elhighlighto a.mainfont:visited,
.crshighlight .icon-button-white,
.crshighlight i {
	color: var(--hd-ink) !important;
}



.depthhvr{
	background-color:#E8E8E8;
	color:#000000;
}

.depthhvr:hover{
	background-color:#F0EEEE;
	color:#000000;
}

[data-bs-theme=dark] .depthhvr{
	background-color:#404140;
	color:#ffffff;
}

[data-bs-theme=dark] .depthhvr:hover{
	background-color:#555555;
	color:#e0e0e0;
}

.bg-vivid-orange {
	background-color: #ff8c1a !important;
}

.text-lavender {
	color: #55518a;
}

[data-bs-theme=dark] .ekhighlightw { 
	color: white !important;
	background-color: #404140;
}

[data-bs-theme=dark] .ekhighlightw:hover {
	color: #e0e0e0 !important;
	background-color: #555555;
	text-decoration: none !important;
}

[data-bs-theme=dark] .ekhighlightw:link,
[data-bs-theme=dark] .ekhighlightw:visited {
	color: white !important;
	text-decoration: none !important;
}

[data-bs-theme=dark] .ekhighlightw:active {
	color: #e0e0e0 !important;
	text-decoration: none !important;
}

[data-bs-theme=dark] .elhighlightw { 
	color: white;
	background-color: #212529;
}


[data-bs-theme=dark] .ektaskhdrbg,
.ekbtn:hover,
.ektaskhdrbg,
.ektaskbtn {
	background-color: #0033A1;
	color: #FFFFFF;
}

.tree_item_color-1 {
	background-color: #939598 !important;
}

.tree_item_color-2 {
	background-color: #002D74 !important;
}

.tree_item_color-3 {
	background-color: #0033A1 !important;
}

.tree_item_color-4,
.item_type-4 .tree_item_color-5 {
	background-color: var(--hd-blue) !important;
}

.tree_item_color-6,
.tree_item_color-7,
.item_type-7 .tree_item_color-5,
.tree_item_color-8,
.tree_item_color-9 {
	background-color: #00B2E3 !important;
}

.suite-color-1,
.suite-color-4 {
	background-color: #0C4B33;
}

.suite-color-2 {
	background-color: #002D74;
}

.suite-color-2-3 {
	background-color: #0033A1;
}

.suite-color-3 {
	background-color: #2292AE;
}


.suite-color-16 {
	background-color: #C23504;
}

.suite-color-17,
.suite-color-26,
.suite-color-27 {
	background-color: #939598;
}


.dark-progress-bar {
	color: #42414F;
	font-weight: bold;
}

[data-bs-theme=dark] .btn-light {
	color: white;
	background-color: #303130;
}

[data-bs-theme=dark] .sidebar {
	background-color: #033457;
    z-index: 1050;
    position: fixed;
}

[data-bs-theme=dark] .icon-button-white,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu > .dropdown-item,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu > a,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu > li > a,
.hd-panel-head .hd-bookmarks-toggle,
.hd-panel-head .hd-announce-panel-toggle,
.home-dash .hd-emp-hero .hd-dept-hero-sub,
.home-dash .hd-rt-hero .hd-btn.hd-btn-ghost .bi,
.home-dash .hd-gc-cluster-delete,
.chat-message-sent .chat-meta,
.home-dash .hd-qe-list-link.is-selected .hd-qe-list-type {
	color: var(--hd-white-a80);
}


[data-bs-theme=dark] .logoimg,
[data-bs-theme=light] #user-signature-img {
	filter: invert(1);
}


[data-bs-theme=dark] .alt1:hover:nth-of-type(odd),
[data-bs-theme=dark] .alt1:hover:nth-of-type(even),
[data-bs-theme=dark] .report-table tr:hover,
[data-bs-theme=dark] .report-item:hover {
	background-color: #404140;
}


/* No results message dark mode styling */
[data-bs-theme=dark] .no-results-message {
	background-color: #2b3035 !important;
	color: #e9ecef !important;
	border: 1px solid #495057 !important;
}

[data-bs-theme=dark] .prochighlight {
	background-color: #212529;
	color: #ffffff;
}


[data-bs-theme=dark] .borders {
	border: 1px solid #FFFFFF;
	border-radius: 3px !important;
}

[data-bs-theme=dark] .item_add {
	background-color: #152b0a;
}

[data-bs-theme=dark] .item_delete_remove {
	background-color: #ff2c2c;
}

#global_search_result_container,
.trow {
	background-color:rgb(255, 255, 255);
}

[data-bs-theme=dark] #global_search_result_container {
	background-color:rgba(40, 40, 40);
}

/*********   Calm Menu *************/
.calmhdr,
.calmbtn {
	background-color:#7A9192;
	color: #ffffff;
}

.calm_menu,
.calmbtn:hover {
	background-color:#E2DED4;
	color:#000000;
}

.calm_menu2{
	background-color:#F4F4EE;
	color:#000000;
}
/* #endregion */




/* Media lazy loading */
.media-lazy-load {
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

.media-lazy-load.loaded,
.drag-placeholder.active,
.matched-item .remove-match:hover,
.box-media:hover .middle-media,
.ticket-activity-item:hover .btn-group,
.search-container .list_item:hover .fa-circle-plus,
.hd-modal .hd-btn-primary:hover::after,
.hd-user-menu-trigger:hover::before,
.hd-user-menu-trigger:focus-visible::before,
.hd-user-menu-trigger[aria-expanded="true"]::before,
.home-dash .hd-contact-item:hover .hd-contact-item-extlink,
.hd-btn-primary:hover::after,
.hd-btn-primary:focus-visible::after,
.home-dash .hd-tile:hover::before,
.home-dash .hd-tile:focus-visible::before,
.home-dash .hd-jc-list-row:hover .hd-jc-list-delete,
.home-dash .hd-jc-list-delete:focus-visible,
.home-dash .hd-cert-list-row:hover .hd-cert-list-delete,
.home-dash .hd-cert-list-delete:focus-visible,
.home-dash .hd-gt .tree-row:hover .hd-gt-actions,
.home-dash .hd-gt .tree-row:focus-within .hd-gt-actions,
.home-dash .hd-agency-list-row:hover .hd-agency-list-delete,
.home-dash .hd-agency-list-delete:focus-visible,
.home-dash .hd-ind-list-row:hover .hd-ind-list-delete,
.home-dash .hd-ind-list-delete:focus-visible,
.home-dash .hd-mfg-list-item:hover .hd-mfg-list-delete,
.home-dash .hd-mfg-list-delete:focus-visible,
.home-dash .hd-perm-admin-item:hover .hd-perm-admin-remove,
.home-dash .hd-perm-admin-remove:focus-visible,
.home-dash .hd-eq-task-row:hover .hd-eq-task-remove,
.home-dash .hd-eq-task-remove:focus-visible,
.home-dash .hd-cat-tile-row:hover .hd-cat-action,
.home-dash .hd-cat-action:focus-visible,
.home-dash .hd-gb-related-row:hover .hd-gb-related-remove,
.home-dash .hd-gb-related-remove:focus-visible,
.home-dash .hd-gb-orphan-row:hover .hd-gb-orphan-add,
.home-dash .hd-gb-orphan-add:focus-visible,
.home-dash .hd-gb-unused-row:hover .hd-gb-unused-add,
.home-dash .hd-gb-unused-add:focus-visible,
.home-dash .hd-kb-acc-row:hover .hd-kb-acc-row-add,
.home-dash .hd-kb-acc-row-add:focus-visible,
.home-dash .hd-kb-list-row--remove:hover,
.home-dash .hd-kb-list-row:hover .hd-kb-list-action,
.home-dash .hd-kb-list-action:focus-visible,
.home-dash .hd-kb-note:hover .hd-kb-note-delete,
.home-dash .hd-kb-note-delete:focus-visible,
.home-dash .hd-iss-card--remove:hover,
.home-dash .hd-iss-trial-card--remove:hover,
.home-dash .hd-lst-list-row:hover .hd-lst-list-row-actions,
.home-dash .hd-lst-list-row-actions:focus-within,
.home-dash .hd-lst-response:hover .hd-lst-response-actions,
.home-dash .hd-lst-response-actions:focus-within {
	opacity: 1;
}

.media-loader {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	width: 100%;
}

.cursor-pointer {
	cursor: pointer !important;
}

.cursor-help,
.traffic-log-table .btn-sm[title] {
	cursor: help;
}

.cursor-default,
.alt3,
.home-dash .hd-dept-member-contact--phone,
.home-dash .hd-kb-acc-row--info,
.home-dash .hd-kb-acc-head--split,
.home-dash .hd-kb-list-link.hd-kb-list-link--static {
	cursor: default;
}

/***************************************************************
--------------------Body and Sizing--------------------
***************************************************************/
/* #region */
body {
	min-height: 100vh;
	min-height: -webkit-fill-available;
	font-family: 'Inter', 'Open Sans', system-ui, sans-serif;
	background-color: white;
}


html {
	min-height: 100vh;
	height: 100vh;
	height: -webkit-fill-available;
}

H1 {
	font-size: 2.25em;
	font-weight: bold;
}

H2 {
	font-size: 2.00em;
	font-weight: bold;
}

H3 {
	font-size: 1.75em;
	font-weight: bold;
}

H4 {
	font-size: 1.50em;
	font-weight: bold;
}

H5 {
	font-size: 1.25em;
	font-weight: bold;
}

H6 {
	font-size: 1em;
	font-weight: bold;
}.hide,
.hide-when-no-value[value=""],
#init-list-col,
.question-page::before,
.testContent,
#custom-date-inputs.hidden,
.chat-message-sent .chat-sender,
.documentation-fullscreen-collapse,
#documentation-modal:has(.documentation-fullscreen-checkbox:checked) .documentation-fullscreen-expand,
.employee-messages .message-center-scroll::-webkit-scrollbar,
.groups-group-select-group .expand-icon-container .expand-icon:not(:first-child),
.d-none-hidden,
.hd-panel-head .hd-btn.hd-btn-primary::after,
.suite-bookmark-items .hd-bm-card::before,
.suite-bookmark-items .hd-bm-chip::after,
.suite-bookmark-items .hd-bm-arrow,
.suite-bookmark-items .hd-bm-actions,
.hd-modal .hd-search-results:empty,
.hd-brand .hd-logo-dark,
[data-bs-theme="dark"] .hd-brand .hd-logo-light,
.hd-topnav-toggle.dropdown-toggle::after,
.hd-topnav-search-results:empty,
.home-dash .hd-dept-kra-chip.is-selected::before,
.home-dash .hd-dept-kra-chip.active::before,
.home-dash .hd-dept-faq-results:empty,
.home-dash .hd-inline-search-results:empty,
.home-dash .hd-task-tabnav::-webkit-scrollbar,
.home-dash .hd-field-error:empty,
.home-dash .hd-gt .tree-children.collapsed,
.home-dash .hd-cl-pager-long,
.home-dash .hd-cl-keyrow,
.home-dash .hd-kl-keyrow,
.home-dash .hd-tc-switch input[type="checkbox"]:checked + .hd-tc-switch-label .hd-tc-switch-off,
.home-dash .hd-tc-switch input[type="checkbox"]:not(:checked) + .hd-tc-switch-label .hd-tc-switch-on,
.hd-tc-toast.toast-error,
.home-dash .hd-fc-switch input[type="checkbox"]:checked + .hd-fc-switch-label .hd-fc-switch-off,
.home-dash .hd-fc-switch input[type="checkbox"]:not(:checked) + .hd-fc-switch-label .hd-fc-switch-on,
.home-dash .hd-cc-switch input[type="checkbox"]:checked + .hd-cc-switch-label .hd-cc-switch-off,
.home-dash .hd-cc-switch input[type="checkbox"]:not(:checked) + .hd-cc-switch-label .hd-cc-switch-on,
.home-dash .hd-cr-keyrow,
.home-dash .hd-grp-deptpick.dropdown-toggle::after,
.home-dash .hd-grp-search-results:empty,
.home-dash .hd-grp-search-results .search-container:empty,
.home-dash .hd-lang-list-keyrow,
.home-dash .hd-licmgr-search .hd-inline-search-results:empty,
.home-dash .hd-licmgr-table-keyrow,
.home-dash .hd-lic-list-keyrow,
.home-dash .hd-mfg-search-results:empty,
.home-dash .hd-mfg-search-results .search-container:empty,
.home-dash .hd-perm-search-results:empty,
.home-dash .hd-perm-search-results .search-container:empty,
.hd-modal.hd-empform-modal .hd-empform-children-list:empty,
.home-dash .hd-ugm-search .hd-inline-search-results:empty,
.home-dash .hd-ugm-list-keyrow,
.home-dash .hd-eq-maint .hd-eq-maint-yes,
.home-dash .hd-eq-maint .hd-eq-maint-no,
.home-dash .hd-applist-keyrow,
.home-dash .hd-news-keyrow,
.home-dash .hd-news-del-article-body img,
.home-dash .hd-cb-search-results:empty,
.home-dash .hd-cb-search-results .search-container:empty,
.home-dash .hd-cb-lic-keyrow,
.home-dash .hd-cb-applic-keyrow,
.home-dash .hd-kb-obs-result-container:empty,
.home-dash .hd-tb-experts-result-container:empty,
.home-dash .hd-fb-search-results:empty,
.home-dash .hd-pb-search-results:empty,
.home-dash .hd-fb-coaches-result-container:empty,
.home-dash .hd-qb-search-results:empty,
.home-dash .hd-mr-result-container:empty,
.home-dash .hd-pb-step-search-results:empty,
.home-dash .hd-stb-q-search-results:empty,
.home-dash .hd-stb-q-tf-hidden,
.home-dash .hd-orgchart-children[hidden],
.home-dash .hd-orgchart-children > .hd-orgchart-item:only-child::after,
.home-dash .hd-cat-toggle-wrap .hd-cat-default-toggle .bi-check-square-fill,
.home-dash .hd-cat-toggle-wrap:has(.hd-cat-toggle-input:checked) .hd-cat-default-toggle .bi-square,
.home-dash .hd-cat-toggle-wrap .hd-cat-default-radio .bi-record-circle-fill,
.home-dash .hd-cat-toggle-wrap:has(.hd-cat-toggle-input:checked) .hd-cat-default-radio .bi-circle {
	display: none;
}

.deleted {
	visibility: hidden;
	opacity: 0 !important;
	transition: visibility 0s .5s, opacity .5s linear !important;
}

.outline-none,
.note-editor .note-editable:focus,
.hd-user-menu-trigger:focus {
	outline: none;
}

.lh-20px {
	line-height: 6px;
}

.invisible-when-empty:not(:has(li)) .dropdown-toggle::after {
	content: none;
}

.hide-when-empty:not(:has(li)),
.modern-choice .course-form-check-input,
.note-editor .dropdown-toggle::after,
#documentation-parent:has(#documentation-edit-checkbox:checked) #documentation-present,
.show-hover-child,
.show-hover-child-2,
.show-hover-child-3,
.home-dash .hd-dept-tab-hidden,
.home-dash .hd-news-article img,
.home-dash .hd-news-article video,
.home-dash .hd-news-article iframe,
.home-dash .hd-news-article picture,
.home-dash .hd-news-article figure,
.home-dash .hd-news-article svg,
.home-dash .hd-news-article-editor .note-editor .note-statusbar .note-resizebar,
.home-dash .hd-news-article-editor .note-editor .note-statusbar .note-icon-arrows-alt,
.home-dash .hd-fd-nav-link.is-hidden,
.home-dash .hd-fd-nav-group.is-hidden {
	display: none !important;
}



@media (max-width:992px) {
	.visible-large-down {
		visibility: visible !important;
	}
}

@media only screen and (max-width:1000px) {
	.hideme2 {
		display: none;
	}

	.sm_login_bg {
		background-image: url("/static/team-work_002_overlay.jpg");
		background-color: #ACB8BC;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

}

.login_bg {
	background-image: url("/static/team-work.jpg");
	background-color: #ACB8BC;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
}


/***********************Height and Width***********************/
	/* #region */
	.mh-50px {
		min-height: 50px !important;
	}

	.vh-83 {
		height: 83vh
	}

	.vh-80 {
		height: 80vh !important;
	}

	.h-10px,
	.spacer10 {
		height: 10px;
	}

	.h-20px,
	.progress-20 {
		height: 20px;
	}

	.h-15px,
	.progress-15 {
		height: 15px;
	}

	.h-24px {
		height: 24px;
	}

	.h-25px {
		height: 25px;
	}

	.h-200px {
		height: 200px;
	}

	.h-220px {
		height: 220px;
	}

	.h-350px {
		height: 350px;
	}

	.h-380px {
		height: 380px;
	}

	.h-fit-content,
	.w-fit-content {
		height: fit-content;
	}

	.h-30px,
	.spacer20 {
		height: 30px
	}

	.h-40px {
		height: 40px;
	}

	.h-50px {
		height: 50px;
	}

	.h-60px {
		height: 60px;
	}

	.h-70px {
		height: 70px;
	}

	.h-80px {
		height: 80px;
	}


	.h-05rem {
		height: .5rem;
	}

	.vh-38 {
		height: 38vh;
	}

	.vh-48 {
		height: 48vh;
	}

	.vh-53 {
		height: 53vh;
	}

	.vh-83 {
		height: 83vh
	}

	.vh-80 {
		height: 80vh
	}
	.wh-50,
	.size-50 {
		width: 50px;
		height: 50px;
	}

	.wh-30 {
		width: 30px;
		height: 30px;
	}


	.mw-none {
		max-width:none;
	}

	.w-fit-content {
		width: fit-content;
	}

	.mw-400px,
	.dur-advanced-inputs-wrapper {
		max-width:400px;
	}

	.mw-1000px {
		max-width:1000px;
	}

	.w-0 {
		width: 0%;
	}

	.w-18 {
		width: 18%;
	}

	.w-33 {
		width: 33%
	}

	.w-40,
	.traffic-log-table .col-date {
		width: 40% !important;
	}

	.w-50px {
		width: 50px;
	}

	.w-170px {
		width: 170px
	}

	.h-170px {
		height: 170px
	}

	.w-190px {
		width: 190px;
	}

	.w-200px {
		width: 200px;
	}

	.w-230px {
		width: 230px;
	}

	.w-260px {
		width: 260px;
	}

	.w-300 {
		width: 300px;
	}

	.w-300 {
		width: 300px;
	}

	.w-350px {
		width: 350px;
	}

	.w-384px {
		width: 384px
	}
	.w-400px {
		width: 400px;
	}
	/* #endregion */

	.z-index-0 {
	z-index: 0 !important;
}


.z-2000 {
	z-index: 2000 !important;
}

.z-3000 {
	z-index: 3000 !important;
}
	/***********************Padding***********************/
	/* #region */
    .page-x-padding {
        padding: 0 calc(var(--bs-gutter-x) * .5);
    }
    
	.px-1px {
		padding: 0 1px;
	}

	.p-4px {
		padding: 4px;
	}

	.smallleft {
		float: left;
	}

	.px-3px {
		padding: 0 3px;
	}

	.p-5px {
		padding: 5px;
	}

	.pt-100 {
		padding-top: 100%;
	}
	.p-500px {
		padding: 500px;
	}
	/* #endregion */

/***********************Margins***********************/
	/* #region */
	.mt-4px {
		margin-top: 4px;
	}

	.mt-3px {
		margin-top: 3px;
	}

	.me-5px {
		margin-right: 5px;
	}

	.mb-10px {
		margin-bottom: 10px;
	}

	.start-80 {
		left: 80%
	}

	.resize-none,
	textarea {
		resize: none;
	}
	/* #endregion */

/* #endregion */



/***************************************************************
--------------------Type/Text styles--------------------
***************************************************************/
/* #region */

.mainfont,
a.mainfont:link,
a.mainfont:hover,
a.mainfont:active,
a.mainfont:visited {
	color: #000000;
	text-decoration: none;
	outline: none;
}

[data-bs-theme=dark] .dropdown-menu li:hover,
[data-bs-theme=dark]  .suitebg {
	background-color: #444848 !important;
}

.pagination .page-link {
	color: RGB(13, 110, 253);
	text-decoration: none;
	outline: none;
}

.pagination .page-link:hover {
	background-color: RGB(13, 110, 253);
	text-decoration: none;
	outline: none;
}



.mainfontu {
	color: #000000;
	text-decoration: underline;
}

.mainfontu:hover {
	color: #000000;
	text-decoration: none;
}

a.mainfontwhite,
a.mainfontwhite:hover {
	color: #ffffff;
	text-decoration: none;
}


.smredtxt {
	color: #C00000;
	font-size: 75%;
}
	/* #region Font Weights and Size */
	.font-xs {
		font-size: x-small;
	}

	.font-30 {
		font-size: 30%;
	}

	.fs-20px {
		font-size: 20px;
	}

	.fs-12px {
		font-size: 12px;
	}

	.fs-14px,
	.report-meta-label {
		font-size: 14px;
	}

	.fs-16px {
		font-size: 16px;
	}

	.fs-20px {
		font-size: 20px;
	}

	.fs-60px {
		font-size: 60px
	}

	.fs-15px {
		font-size: 15px;
	}

	.fs-16px {
		font-size: 16px;
	}
	.fw100 {
		font-weight: 100 !important;
	}

	.fw200 {
		font-weight: 200 !important;
	}

	.fw300 {
		font-weight: 300 !important;
	}

	.fw400 {
		font-weight: 400 !important;
	}

	.fw500 {
		font-weight: 500 !important;
	}

	.fw600 {
		font-weight: 600 !important;
	}

	.fw700 {
		font-weight: 700 !important;
	}

	.fw800 {
		font-weight: 800 !important;
	}

	.fw900 {
		font-weight: 900 !important;
	}

	.fw1000 {
		font-weight: 1000 !important;
	}
	/* #endregion */


.text_header {
	height: 27px;
	line-height: 10px;
	font-weight: normal;
	font-size: 11pt;
	background-color: #ffffff;
	padding-left: 8px;
}

.text_header2{
	height:27px;
	padding-left:8px;
	display:flex;
    align-items:center;
    overflow: hidden;
}

.text_header2 i {
    font-size: 14px; /* shrink icons */
    line-height: 1;
}

[data-bs-theme=dark] .text_header2{
	height:27px;
	padding-left:8px;
	display:flex;
    align-items:center;
    overflow: hidden;
	background-color:#2b3035;
}

.text_border {
	border-color: #CED4DA;
}



input[type="text"]:disabled,
.saleshighlightw,
.elhighlightw {
	background-color: #FFFFFF;
	color: #000000;
}

.form-select-font-size,
.list_item {
	font-size: 80%;
}

.active_item {
	font-size: 120%;
}

.fs875rem {
	font-size: .875rem;
}


.list_item_md,
.list_detail_lg {
	font-size: 85%
}

.list_item_lg {
	font-size: 90%;
}

.list_item_sm {
	font-size: 70%;
}

.list_detail {
	font-size: .900em;
}

.list_detail_sm {
	font-size: 65%;
}

.list_detail_md {
	font-size: 75%;
}


/* No results message styling */
.no-results-message {
	background-color: #f8f9fa !important;
	color: #495057 !important;
	border: 1px solid #e9ecef !important;
	font-style: italic;
	font-weight: 500;
}

.center-me {
	margin: 0 auto;
}

/* #endregion */



/***************************************************************
--------------------Card Styling--------------------
***************************************************************/
/* #region */



.card-body {
	background-color: white;
	border-radius: 0.5rem !important;
}

[data-bs-theme=dark] .card-body {
	background-color: #212529 !important;
	border-radius: 0.5rem !important;
}

.card-title{
	font-size: 1.15em;
	font-weight: bold;
}
.card-text {
	font-size: .925em;
}

.card-footer {
	background-color: #FFFFFF;
	border-top: none;
}

[data-bs-theme=dark] .card-footer {
	background-color:#4b5357;
}
/* #endregion */



/***************************************************************
----------Header Content Footer Layout Utilities----------
***************************************************************/
/* #region */

.wrapper{
		height:100vh;
		display:flex;
		flex-direction:column;
	}

.header, .footer{
	height:50px;
	background-color:green;
}

.textalign{
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.main{
	flex:1;
	overflow-y:auto;
	overflow-x:hidden;
}

[data-bs-theme=dark] .nav-link,
.fa-plus-circle,
.fa-plus-square,
.fa-exclamation-circle,
.fa-times-circle,
.fa-save,
.fa-arrow-circle-up,
.fa-arrow-alt-circle-up,
.fa-home,
.fa-circle-arrow-left {
	color:#FFFFFF;
}

[data-bs-theme=dark] .collapsed .fa-chevron-down {
	transform: rotate(90deg);
	color:white;
}


/* #endregion */



/***************************************************************
--------------------Buttons--------------------
***************************************************************/
/* #region */

.btn-small {
	border: 1px solid black;
	padding: 4px;
	height: 20px;
	width: 60px;
	float: right;
	margin-left: 5px;
	line-height: 10px;
	background-color: white;
	font-size: 70%;
}

.btn-small2 {
	border: 1px solid black;
	padding: 4px;
	height: 20px;
	margin-left: 5px;
	line-height: 10px;
	background-color: white;
	font-size: 70%;
}

.btn-small3{
	height:24px;
	line-height:10px;
	font-size:80%;
	color:#000000;
	border:1px solid #E0E0E0;
	border-radius:4px;
	background-color:#FFFFFF;
}

.btn-small3:hover{
	color:#000000;
	background-color:#686767;
}



.scrollToTopBtn {
	background-color: black;
	border: none;
	border-radius: 10px;
	color: white;
	cursor: pointer;
	font-size: 18px;
	line-height: 20px;
	width: 100px;

	/* place it at the bottom right corner */
	position: fixed;
	bottom: 20px;
	right: 20px;
	/* keep it at the top of everything else */
	z-index: 100;
	/* hide with opacity */
	opacity: 0;
	/* also add a translate effect */
	transform: translateY(100px);
	/* and a transition */
	transition: all 0.5s ease;
}

.showBtn {
	opacity: 1;
	transform: translateY(0);
}

.icon-button-white {
	border: none;
	border-radius: 50%;
	color: black;
	cursor: pointer;
	transition: background-color .25s;
}

.icon-button-white-sqr {
	border: none;
	border-radius: 20%;
	color: black;
	cursor: pointer;
	transition: background-color .25s;
}

.icon-button-white:hover,
.icon-button-white-sqr:hover {
	background-color: rgba(210, 210, 210, 0.6);
}


.large-button-white-sqr {
	border: none;
	border-radius: 5%;
	color: black;
	cursor: pointer;
	transition: background-color .25s;
}

.large-button-white-sqr:hover {
	background-color: rgba(210, 210, 210, 0.2);
}

.large-sqr-button-plus-padding {
	padding: 0.4em;
	transition: all .5s ease;
}

.large-sqr-button-plus-padding:hover {
	padding: 0.4em;
}

.mycreatebtn {
	border: 2px solid #C72929;
	background-color: #C72929;
	color: #FFFFFF;
	margin-right: 4px;
	text-decoration: none;
	min-width: 120px;
	text-align: center;
}

a.mycreatebtn:hover,
.mycreatebtn.hover,
.mycreatebtn.active,
.mycreatebtn.visited {
	min-width: 120px;
	border: 2px solid #A33D3D;
	background-color: #A33D3D;
	color: #FFFFFF;
	text-decoration: underline;
	outline: none;
}

/* #endregion */



/***************************************************************
--------------------ScrollBars--------------------
***************************************************************/
/* #region */

.navbar-fixed-height {
    height: var(--navbar-spacing)
}


.page-header {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: var(--bs-border-radius) !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    margin: 0%;
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
}

.builder-scroll-container {
    height: calc(100vh - var(--scroll-spacing));
    /* max-height: calc(100vh - var(--scroll-spacing)); */
}

.select-scroll {
    /* search bar */
    height: calc(100vh - var(--search-spacing) - var(--scroll-spacing) - calc(var(--bs-card-spacer-y)*5) - calc(1.5em + .5rem + calc(var(--bs-border-width) * 2)));
    overflow-y: auto;
    overflow-x: hidden;
}

.select-half-scroll {
    /* search bar */
    height: calc(var(--half-scroll-spacing)) - var(--search-spacing);
    overflow-y: auto;
}

.center-scroll {
    /* no search bar */
    height: calc(100vh - var(--scroll-spacing) - calc(var(--bs-card-spacer-y)*3) - calc(1.5em + .5rem + calc(var(--bs-border-width) * 2)));
    overflow-y: auto;
}

.no-header-scroll {
	height: calc(100vh - var(--scroll-spacing));
    overflow-y: auto;
}

.dropdown-half-scroll {
    /* search bar */
    height: calc(100vh - calc(var(--scroll-spacing)*2) - var(--search-spacing) - calc(var(--bs-card-spacer-y)*4) - calc(1.5em + .5rem + calc(var(--bs-border-width) * 4)));

    /* max-height: calc(100vh - var(--scroll-spacing) - var(--search-spacing) - calc(var(--bs-card-spacer-y)*2) + calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))); */
    overflow-y: auto;
} 


@media (max-width: 768px) {
	/* Disable fixed heights on mobile for builder containers */
	/* Corresponds to bootstrap col-md */
    .builder-scroll-container {
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
	}
}

.full {
	height: calc(100vh - 180px)
}

.half {
	height: calc((100vh - 200px) / 2);
}

.parent-scroll {
	height: inherit;
	overflow-y: hidden;
}

.scroll-behavior-smooth {
	scroll-behavior: smooth !important;
}

.scrollcard-r {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.fixed-card,
.scrollable-card-body {
  max-height: 40vh; /* Limit the height of the card */
  overflow-y: auto; /* Enable scroll when content exceeds max-height */
}

/* Scrollable Card */

.scrollcard2 {
	min-height: 190px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	overflow-x: hidden;
}

.scrollcard3 {
	min-height: 190px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard4 {
	min-height: 190px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard5 {
	min-height: 60px;
	max-height: 600px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard6 {
	height: 120px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard7 {
	min-height: 1000px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard8 {
	min-height: 40px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard9 {
	height: 160px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard10 {
	height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard11 {
	height: calc(100vh - 180px);
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard12 {
	min-height: 190px;
	max-height: 1000px;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollcard13 {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
}

@supports not selector(::-webkit-scrollbar) {
    .slim-scrollbar,
	.slim-scrollbar1,
	.slim-scrollbar2 {
		scrollbar-width: thin;
		scrollbar-color: #c8c8c8 #ffffff;
	}
}

.slim-scrollbar1::-webkit-scrollbar,
.slim-scrollbar2::-webkit-scrollbar,
.matching-prompts::-webkit-scrollbar,
.matching-question .question-text::-webkit-scrollbar,
.employee-list-container::-webkit-scrollbar {
	width: 8px;
}

.slim-scrollbar3::-webkit-scrollbar {
	width:10px;
}

.slim-scrollbar1::-webkit-scrollbar-track {
	background: #ffffff00;
	margin-right: 2px;
}

.slim-scrollbar2::-webkit-scrollbar-track {
	margin: 5px 0;
	background: #ffffff00;
}

.slim-scrollbar3::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
}

.slim-scrollbar1::-webkit-scrollbar-thumb,
.slim-scrollbar2::-webkit-scrollbar-thumb {
	background-color: #c8c8c8;
	border-radius: 15px;
	border: 1px none #ffffff;
}

.slim-scrollbar3::-webkit-scrollbar-thumb{
	background:#C0C0C0;
}

/* #endregion */



/***************************************************************
--------------------Small Devices--------------------
***************************************************************/
/* #region */
@media (max-width: 991px) {
	.dropdown-menu .dropdown-menu {
		margin-left: 0.7rem;
		margin-right: 0.7rem;
		margin-bottom: .5rem;
	}
}

#alert_messages {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	max-width: 1100px;
	z-index: 9999;
	pointer-events: none;
}

#alert_messages .alert {
	pointer-events: auto;
	margin-bottom: 12px;
	animation: slideInDown 0.4s ease-out;
}

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.maincellround {
	border-radius: 6px;
}

.sidebar {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #055086;
	color: #ffffff;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 0px;
	white-space: nowrap;
}

.sidebar {
    z-index: 1050;
    position: fixed;
}

.sidebar .inner {
	border-radius: 10px;
	width: 75%;
	margin-left: 32px;
	background-color: #044370;
}

.sidebar .inner a {
	padding-left: 16px;
}

.sidebar a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 15px;
	color: #ffffff;
	display: block;
	transition: 0.3s;
}


.sidebar a:hover {
	color: #818181;
}

.sidebar .closebtn {
	font-size: 48px;
}

.sidebar h1 {
	padding: 8px 8px 0px 32px;
	text-decoration: none;
	font-size: 16px;
	color: #ffffff;
	display: block;
	transition: 0.3s;
}

.sidebar .sidebarHeader {
	padding: 8px 8px 0px 32px;
}

/* sidebar currently selected group */
.active_group{
	background-color:#4097D4;
}

.openbtn {
	font-size: 20px;
	cursor: pointer;
	border: none;
	background-color: transparent;
}

.openbtn:hover {
	background-color: transparent;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
	.sidebar {
		padding-top: 15px;
	}

	.sidebar a {
		font-size: 18px;
	}
}

.subemployees {
	font-size: 4vw;
}

.employee-list-item {
	width: 97%;
	padding: 4px;
	margin: 2px;
}

@media (min-width: 992px) {
	.subemployees {
		font-size: 100%;
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0.1;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0.1;
	}

	to {
		opacity: 1;
	}
}

.fancyimage {
	float: left;
	margin: 5px;
}

.fancytext {
	text-align: justify;
}
/* #endregion */


/***************************************************************
--------------------Courses--------------------
***************************************************************/
/* #region */
/* .adding{
	color:#5E7F57;
} */

.faded{
	color: rgba(0, 0, 0, 0.25);
}

.course_background {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.todo_course_poster{
	height:146px;
}

.poster_shadow{
	box-shadow: 5px 5px 5px grey;
}

.search_shadow{
	box-shadow: 0 0 0.07em var(--hd-white-a12),
		0 0.2em 0.2em -0.15em rgba(0,0,0,0.5),
		0 0.25em 0.75em -0.05em rgba(0,0,0,0.5),
		inset 0 0 0.7em rgba(0,0,0,0.3),
		inset 0 0.05em 0.1em var(--hd-white-a12);
}

.crsheader,
.crsbtn {
	background-color: #405840;
	color: #ffffff;
}

.knowledge-header,
.crsmenu2btn {
	background-color: #1a2030;
	color: #ffffff;
}

.crsmenu,
.crsbtn:hover {
	background-color: #5E7F57;
	color: #ffffff;
}

.knowledge-menu,
.crsmenu2btn:hover {
	background-color: #436597;
	color: #ffffff;
}

.select-highlight {
	background-color: #CFDDC7;
	color: var(--hd-ink) !important;
}




/* [data-bs-theme=dark] .crshighlight .mainfont{
	color: #FFFFFF !important;
} */

.crsthumb {
	background-color: #CFDDC7;
}





.icon-button-crsqsthdr,
.icon-button-ekkrahdr,
.icon-button-ektaskhdr,
.icon-button-jobtaskhdr,
.icon-button-coursehdr,
.icon-button-ekfndhdr,
.icon-button-learningheader {
	border: none;
	border-radius: 3px;
	color: rgb(255, 255, 255);
	padding: 0.2rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	cursor: pointer;
	transition: 0.2s;
}

.icon-button-crsqsthdr:hover {
	background-color:#405840;
}

/* #endregion */


/***************************************************************
------------------Procedures------------------------------
***************************************************************/
/* #region */
/* Headers and Primary Styles */
.procheader {
	border: 1px solid #00B2E3;
	height: 46px;
	background-color: #00B2E3;
	color: #ffffff;
	padding-right: 0.5rem;
	border-radius: 4px;
}

.procheader2 {
	background-color:#62DCFA;
	color:#000000;
}

.procmdlheader {
	border: 1px solid #00B2E3;
	background-color: #00B2E3;
	color: #ffffff;
	padding-right: 0.5rem;
	border-radius: 4px;
}

.procpageheader {
	border: 1px solid #00B2E3;
	background-color: #00B2E3;
	color: #ffffff;
	padding: 0.75rem;
	border-radius: 4px;
}

.procpagehdr {
	background-color: #2292AE;
	color: #ffffff;
	padding: 0.75rem;
	border-radius: 4px;
}

.prochighlight {
	background-color: #B6ECFA;
	color: #000000;
	padding: 0.5rem;
	border-radius: 3px;
}

[data-bs-theme=dark] .prochighlight {
	background-color: #1a5f7a;
	color: #e0e0e0;
}

/* Procedure Cards - Control height within flex layout */
body#reloadPage .card {
	display: flex;
	flex-direction: column;
	height: fit-content;
	max-height: calc(100vh - 200px);
}

/* Procedure Card Body Spacing */
.procheader + .card-body,
.depthdr4 + .card-body {
	padding: 0.75rem;
}

.procheader + .scrollcard,
.depthdr4 + .scrollcard,
.procheader + .scrollcard12,
.depthdr4 + .scrollcard12 {
	padding: 0.75rem;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}


/* Foundation items within procedure - prevent nested clipping */
.procheader + .scrollcard12 .card,
.depthdr4 + .scrollcard12 .card {
	display: block;
	height: auto;
	max-height: none;
}

.procheader + .scrollcard12 .scrollcard8,
.depthdr4 + .scrollcard12 .scrollcard8 {
	max-height: 200px;
}

.procheader + .scrollcard12 .text_header2,
.depthdr4 + .scrollcard12 .text_header2 {
	height: auto;
	min-height: 27px;
	line-height: 1.4;
	padding: 0.4rem 0.5rem;
}

.proc-select,
.home-dash .hd-eq-filter-btn > span {
	text-overflow: ellipsis;
	overflow: hidden;
	min-width: 0;
}

/* Button Styles */
.proceditbtn {
	background-color: #00B2E3;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 0.375rem 0.75rem;
	border: 1px solid #00B2E3;
	cursor: pointer;
	transition: 0.2s;
}

.proceditbtn:hover {
	background-color: #ADE2EF;
	color: #000000;
	border-color: #00B2E3;
}

/* Icon Button Styles */
.icon-button-procheader {
	border: none;
	border-radius: 3px;
	color: rgb(255, 255, 255);
	padding: 0.2rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	cursor: pointer;
	transition: 0.2s;
	background-color: transparent;
}

.icon-button-procheader:hover {
	color: white;
	background-color: rgb(44, 209, 255);
	border-radius: 3px;
}

.icon-button-prochighlight {
	border: none;
	border-radius: 3px;
	color: black;
	padding: 3px 3px;
	cursor: pointer;
	transition: 0.2s;
	background-color: transparent;
}

.icon-button-prochighlight a {
	color: black;
}

.icon-button-prochighlight:hover {
	color: black;
	background-color: rgb(221, 248, 250);
	border-radius: 3px;
}


[data-bs-theme=dark] .icon-button-prochighlight:hover {
	color: black !important;
	background-color: rgb(80, 180, 200);
	border-radius: 3px;
}


/* Accordion/Issue Styles */
.proc-issue-acc {
	color: white;
	background-color: #00B2E3;
	padding: 0.5rem;
	border-radius: 3px;
	transition: 0.2s;
}

.proc-issue-acc:hover {
	color: white;
	background-color: #74DAF4;
	transition: 0.2s;
	border-radius: 3px;
}

/* Procedure Run Page Styles */
.proc-step-title {
	color: #369;
	font-weight: bold;
	font-size: 1rem;
}

.proc-step-inactive {
	cursor: not-allowed;
	user-select: none;
	color: rgb(185, 193, 201);
	font-weight: bold;
	opacity: 0.6;
}

.proc-issue-title {
	font-weight: normal;
	background-color: rgb(41, 181, 228);
	color: #000000;
	user-select: none;
	padding: 0.5rem;
	border-radius: 3px;
	cursor: pointer;
	transition: 0.2s;
}

.proc-issue-title:hover {
	color: #000000;
	background-color: rgb(133, 205, 228);
	cursor: pointer;
}

[data-bs-theme=dark] .proc-issue-title {
	background-color: rgb(25, 100, 130);
	color: #e0e0e0;
}

[data-bs-theme=dark] .proc-issue-title:hover {
	background-color: rgb(50, 130, 160);
	color: #ffffff;
}

.proc-trialerror-title {
	font-weight: normal;
	color: rgb(0, 0, 0);
	background-color: rgb(147, 211, 232);
	font-size: 13px;
	user-select: none;
	padding: 0.5rem;
	border-radius: 3px;
	cursor: pointer;
	transition: 0.2s;
}

.proc-trialerror-title:hover {
	font-weight: normal;
	color: rgb(0, 0, 0);
	background-color: rgb(153, 231, 255);
	font-size: 13px;
	cursor: pointer;
}

[data-bs-theme=dark] .proc-trialerror-title {
	background-color: rgb(60, 120, 150);
	color: #e0e0e0;
}

[data-bs-theme=dark] .proc-trialerror-title:hover {
	background-color: rgb(90, 150, 180);
	color: #ffffff;
}

.proc-result-worked,
.proc-result-notworked {
	font-weight: normal;
	color: rgb(0, 0, 0);
	font-size: 12px;
}

[data-bs-theme=dark] .proc-result-worked,
[data-bs-theme=dark] .proc-result-notworked,
[data-bs-theme=dark] .proc-purpose-detail {
	color: #d0d0d0;
}



.proc-purpose-detail {
	font-weight: normal;
	color: #000000;
	font-size: 0.9rem;
	padding: 0.5rem;
}


/* Chevron/Arrow Animation */
.fa-chevron-down,
.fa-circle-up {
	transition: .3s transform ease-in-out;
}

.collapsed .fa-chevron-down,
.home-dash .tree-toggle.open,
.home-dash .hd-gf-collapse-toggle.is-open .hd-gf-collapse-chevron,
.home-dash .hd-gf-collapse-toggle[aria-expanded="true"] .hd-gf-collapse-chevron,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-row[aria-expanded="true"] .hd-cb-alloc-caret {
	transform: rotate(90deg);
}

/* Disabled Button State */
.cannot_perform {
	color: grey;
	cursor: not-allowed;
}

/* Navigation Links */
.proc_nav-link {
	color: #ffffff;
	text-decoration: none;
	transition: 0.2s;
}

.proc_nav-link:hover {
	color: #ffffff;
	text-decoration: underline;
}

.proc_nav-link:active,
.fa-square,
.fa-check-square,
.fa-square-check,
.fa-trash-alt {
	color: #000000;
}

/* Utility Classes */
.transparent {
	color: rgba(0, 0, 0, 0);
}

/* Mobile-Friendly Styles */
@media (max-width: 991px) {
	.procheader {
		height: auto;
		padding: 0.5rem;
		font-size: 0.9rem;
	}

	.procpageheader,
	.procpagehdr {
		padding: 0.5rem;
		font-size: 0.9rem;
	}


	.prochighlight,
	.proc-issue-title {
		padding: 0.35rem;
		font-size: 0.9rem;
	}

	.proceditbtn {
		padding: 0.25rem 0.5rem;
		font-size: 0.8rem;
	}

	.proc-step-title {
		font-size: 0.9rem;
	}


	.proc-trialerror-title,
	.proc-purpose-detail {
		padding: 0.35rem;
		font-size: 0.85rem;
	}


	.proc-result-worked,
	.proc-result-notworked {
		font-size: 0.85rem;
	}

	.procheader + .card-body,
	.procheader + .scrollcard,
	.procheader + .scrollcard12,
	.depthdr4 + .card-body,
	.depthdr4 + .scrollcard,
	.depthdr4 + .scrollcard12 {
		padding: 0.5rem;
	}
	
	body#reloadPage .card {
		max-height: none;
	}
	
	body#reloadPage .procheader + .scrollcard12,
	body#reloadPage .depthdr4 + .scrollcard12 {
		max-height: 300px;
	}
}

@media (max-width: 768px) {
	.procheader {
		height: auto;
		padding: 0.4rem;
		font-size: 0.85rem;
	}

	.procpageheader,
	.procpagehdr {
		padding: 0.4rem;
		font-size: 0.85rem;
	}


	.prochighlight,
	.proc-issue-title {
		padding: 0.25rem;
		font-size: 0.85rem;
	}

	.proceditbtn {
		padding: 0.2rem 0.4rem;
		font-size: 0.75rem;
	}

	.proc-step-title,
	.mobile-col,
	.ticket-dashboard .col-2,
	.crm-contact-detail .activity-item .fw-semibold,
	.crm-contact-detail .deal-item .fw-semibold,
	#editprofile .linked-accounts-row {
		font-size: 0.85rem;
	}


	.proc-trialerror-title,
	.proc-purpose-detail {
		padding: 0.25rem;
		font-size: 0.8rem;
	}


	.proc-result-worked,
	.proc-result-notworked,
	.crm-dashboard-table,
	.crm-activity-list .table-responsive,
	.crm-contact-list .table-responsive,
	.crm-deal-list .table-responsive {
		font-size: 0.8rem;
	}

	.icon-button-procheader,
	.icon-button-prochighlight {
		padding: 2px 4px;
	}

	.procheader + .card-body,
	.procheader + .scrollcard,
	.procheader + .scrollcard12,
	.depthdr4 + .card-body,
	.depthdr4 + .scrollcard,
	.depthdr4 + .scrollcard12 {
		padding: 0.4rem;
	}
	
	body#reloadPage .card {
		max-height: none;
	}
	
	body#reloadPage .procheader + .scrollcard12,
	body#reloadPage .depthdr4 + .scrollcard12 {
		max-height: 250px;
	}
}

@media (max-width: 576px) {
	.procheader {
		height: auto;
		padding: 0.3rem;
		font-size: 0.8rem;
	}

	.procpageheader,
	.procpagehdr {
		padding: 0.3rem;
		font-size: 0.8rem;
	}


	.prochighlight,
	.proc-issue-title {
		padding: 0.2rem;
		font-size: 0.8rem;
	}

	.proceditbtn {
		padding: 0.15rem 0.3rem;
		font-size: 0.7rem;
	}

	.proc-step-title,
	.crm-contact-detail .activity-item .fw-semibold,
	.crm-contact-detail .deal-item .fw-semibold,
	.crm-contact-detail dl.row dt,
	.crm-contact-detail dl.row dd {
		font-size: 0.8rem;
	}


	.proc-trialerror-title,
	.proc-purpose-detail {
		padding: 0.2rem;
		font-size: 0.75rem;
	}


	.proc-result-worked,
	.proc-result-notworked,
	.crm-activity-list .table-responsive,
	.crm-contact-list .table-responsive,
	.crm-deal-list .table-responsive {
		font-size: 0.75rem;
	}

	.icon-button-procheader,
	.icon-button-prochighlight {
		padding: 1px 3px;
	}
	.procheader + .card-body,
	.procheader + .scrollcard,
	.procheader + .scrollcard12,
	.depthdr4 + .card-body,
	.depthdr4 + .scrollcard,
	.depthdr4 + .scrollcard12 {
		padding: 0.3rem;
	}
	
	body#reloadPage .card {
		max-height: none;
	}
	
	body#reloadPage .procheader + .scrollcard12,
	body#reloadPage .depthdr4 + .scrollcard12 {
		max-height: 200px;
	}
}

/* #endregion */


/***************************************************************
-----------------Knowledge-----------------------------------
***************************************************************/
/* #region */
.ekfndhdr {
	border: 1px solid var(--hd-blue);
	background-color: var(--hd-blue);
	color: #FFFFFF;
	height: 46px;
	padding-right: 0.5rem;
}

.ekfndhdr2,
.ekfndbtn {
	background-color: var(--hd-blue);
	color: #FFFFFF;
}


.ekfndbtn:hover {
	background-color: rgb(60, 156, 235);
	color: #FFFFFF;
}

.ekbg {
	background-color: #CEE3F5;
}

.ekbtn {
	background-color: #002D74;
	color: #FFFFFF;
}


.ekheader,
.ekhighlighto {
	background-color: #FF8C1A;
	color: #ffffff;
}

.ekheader2 {
	background-color: #ffe6cc;
	color: #000000;
}

.ekbody,
.salesbody {
	background-color: #ffffff;
	font-size: 90%;
	color: #000000;
}


.ekhighlightw {
	background-color: #FFFFFF;
	color: var(--hd-ink) !important;
	text-decoration: none !important;
}

.ekhighlightw:hover {
	background-color: #f8f9fa;
	color: #0066cc !important;
	text-decoration: none !important;
}

.ekhighlightw:link,
.ekhighlightw:visited {
	color: var(--hd-ink) !important;
	text-decoration: none !important;
}

.ekhighlightw:active {
	color: #0066cc !important;
	text-decoration: none !important;
}

.ekpagehdr {
	background-color: #000000;
	color: #FFFFFF;
}

.ekkrahdr {
	border: 1px solid #002D74;
	background-color: #002D74;
	color: #FFFFFF;
	height: 46px;
	padding-right: 0.5rem;
}

.ekkrapagehdr {
	border: 1px solid #002D74;
	background-color: #002D74;
	color: #FFFFFF;
}

.ektaskhdr {
	border: 1px solid #0033A1;
	background-color: #0033A1;
	color: #FFFFFF;
	height: 46px;
	padding-right: 0.5rem;
}



.ektaskbtn:hover {
	background-color: rgb(45, 95, 190);
	color: #FFFFFF;
}

.eknavbtn {
	border: 2px solid #FF8C1A;
	background-color: #FFFFFF;
	color: #000000;
	margin-right: 4px;
	text-decoration: none;
	min-width: 120px;
	text-align: center;
	min-height: 40px;
}

a.eknavbtn:hover,
.eknavbtn.hover,
.eknavbtn.active,
.eknavbtn.visited {
	min-width: 120px;
	border: 2px solid #FF8C1A;
	background-color: #FF8C1A;
	color: #FFFFFF;
	text-decoration: underline;
	outline: none;
}


.icon-button-ekkrahdr:hover {
	background-color: rgb(45, 75, 155);
}


.icon-button-ektaskhdr:hover {
	background-color: rgb(45, 95, 190);
}

.icon-button-jobtaskhdr:hover {
	background-color: rgb(219, 219, 219);
}

.icon-button-coursehdr:hover {
	background-color: rgb(173, 195, 169);
}

.icon-button-ekfndhdr:hover {
	background-color: rgb(60, 156, 235);
}

.taskdetailhdr {
	border: 1px solid #0033A1;
	background-color: #0033A1;
	color: #FFFFFF;
}

/* #endregion */


/***************************************************************
----------------------Groups----------------------------------
***************************************************************/
/* #region */
ul.dept_admin {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	cursor: pointer;
}

.depthdr {
	background-color:#4B4747;
	color:#FFFFFF;
}

.depthdr2 {
	background-color:#C3C3C3;
	color:#000000;
}

.depthdr3,
[data-bs-theme=dark] .depthdr3,
[data-bs-theme=dark] .traffic-log-header {
	background-color:#565656;
	color:#FFFFFF;
}

.depthdr4,
[data-bs-theme=dark] .depthdr4 {
	background-color:#848080;
	color:#FFFFFF;
}

[data-bs-theme=dark] .depthdr {
	background-color:#033457;
	color:#FFFFFF;
}

[data-bs-theme=dark] .depthdr2 {
	background-color:#2b3035;
	color:#FFFFFF;
}



.traffic-log-header {
	background-color:#88a1d8;
	color:#FFFFFF;
}


.icon-button-depthdr {
	border: none;
	border-radius: 3px;
	color: black;
	padding: 3px 7px;
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s;
	text-align: center;
}

.icon-button-depthdr:hover {
	background-color: rgba(177, 182, 187, 0.6);
}

.mydeptbox {
	height: 200px;
	overflow: auto;
	font-size: 90%;
	background-color: #ffffff;
}

/* #endregion */


/***************************************************************
-------------------Sales-------------------------------------
***************************************************************/
/* #region */
.salesbg {
	background-color: #F8E2E2;
}

.salesheader,
.salesheader2 {
	background-color: var(--hd-danger);
	color: #ffffff;
}



.saleshighlighto {
	background-color: var(--hd-danger);
	color: #ffffff;
	padding-top: 4px;
	padding-bottom: 4px;
}


/* #endregion */


/***************************************************************
---------------------Lists-------------------------------------
***************************************************************/
/* #region */
.listmainpagehdr {
	border: 1px solid #C23504;
	background-color: #C23504;
	color: #FFFFFF;
}

.listpagehdr {
	background-color: #C23504;
	color: #FFFFFF;
	padding-top: 7px;
	padding-bottom: 7px;
}

.listbtn {
	background-color: #C23504;
	color: #FFFFFF;
}

.listbtn:hover {
	border: 1px solid #C23504;
	background-color: #F99A79;
	color: #000000;
}

.listbtnwhite {
	border: 1px solid #FFFFFF;
	background-color: #C23504;
	color: #FFFFFF;
}

.listbtnwhite:hover {
	border: 1px solid #FFFFFF;
	background-color: #F99A79;
	color: #000000;
}

.listbtnwhite-outline {
	border: 1px solid #C23504;
	background-color: #fcefea;
	color: #FFFFFF;
	transition: background-color .5s;
}

.listbtnwhite-outline:hover {
	border: 1px solid #C23504;
	background-color: #F99A79;
	color: #000000;
	font-weight: bold;
}

.listbg {
	background-color: #F99A79;
}


.list-session-select-body {
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 50px;
	max-height: 200px;
}

.list-select-body {
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 50px;
	max-height: 300px;
}


/* NOTE: Pre-refactor "pill"-style rules for .category-list / .category-list li
   used to live here. They forced flex-row + wrap on the category-list
   and gave each <li> a 25px radius, fit-content height, and a
   1px solid #C23504 border — all !important. The suite redesign of
   list_grouping.html replaced that with full-width Task Builder rows
   in a flex-column container; the !important rules below were
   silently winning the cascade and re-painting items as orange pills.
   Deleted on 2026-05-08; replacement rules live near the bottom of
   this file under the "Grouping room: per-user group cards" comment. */

#init-list-col:has(.grouping-item),
.multi-select-dropdown .dropdown-menu.show,
.selected_instruction_thumb .instruction-overlay {
	display: block !important;
}


#response-card-body {
	min-height: 200px;
}

.icon-button-listpagehdr {
	border: none;
	border-radius: 3px;
	color: rgb(255, 255, 255);
	padding: 3px 3px;
	cursor: pointer;
	transition: 0.2s;
}

.icon-button-listpagehdr:hover {
	color: rgb(255, 255, 255);
	background-color: rgb(249 154 121);
}

/* #endregion */


/***************************************************************
------------ExxTend Learning---------------------------------
***************************************************************/
/* #region */
.elheader {
	background-color: #0C4B33;
	color: #ffffff;
}

.elheader2 {
	background-color: #23895F;
	color: #ffffff;
}

.elheader3 {
	background-color: #0C4B33;
	color: #ffffff;
	padding-top: 10px;
	padding-bottom: 10px;
}

.elbgside {
	background-color: #F8F8F8;
}


.elhighlighto {
	background-color: #C7EFDF;
	color: #000000;
}


.elbtn {
	border: 2px solid #44B78B;
	background-color: #0C4B33;
	color: #FFFFFF;
	margin-right: 4px;
	text-decoration: none;
	min-width: 120px;
	text-align: center;
}

.elbtn:hover {
	min-width: 120px;
	border: 2px solid #0C4B33;
	background-color: #44B78B;
	color: #FFFFFF;
	text-decoration: underline;
	outline: none;
}

.elbtn2 {
	border:0px;
	background-color: #23895F;
	color:#FFFFFF;
	text-decoration:none;
	text-align:center;
}

.elbtn2:hover {
	border:0px;
	background-color:#44B78B;
	color:#FFFFFF;
	text-decoration:underline;
	outline:none;
}

.learninghdr {
	background-color: var(--hd-lime);
	color: #000000;
}

.assigned {
	background-color: #00B2E3;
}


.group-assignment-dropdown:hover,
.hd-modal .hd-support-email:hover,
.home-dash .hd-gf-crumb-link:hover,
.home-dash .hd-cl-code-link:hover,
.home-dash .hd-cl-owner-link:hover,
.home-dash .hd-kl-id-link:hover,
.home-dash .hd-kl-owner-link:hover,
.home-dash .hd-cr-id-link:hover,
.hd-login-legal a:hover {
	text-decoration: underline;
}

.instruction-textarea-size {
	min-height: 200px;
	max-height: 300px;
}


.icon-button-learningheader:hover {
	/* color: white; */
	/* background-color: #5E7F57; */
	background-color: hsl(109.5, 18.69%, 30%);

}


/* Learning Track Node Styles */
.rounded-list,
.rounded-list-scratch,
.learning-track-node-item ol {
	counter-reset: li; /* Initiate a counter */
	list-style: none; /* Remove default numbering */
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0px 0px 0px 10px;
	margin-bottom: 4em;
	text-shadow: 0 1px 0 var(--hd-white-a50);
}

/* Dark mode adjustments for text shadow */
[data-bs-theme=dark] .rounded-list,
[data-bs-theme=dark] .rounded-list-scratch {
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.rounded-list ol,
.rounded-list-scratch ol,
.learning-track-node-item ol ol {
	margin: 0 0 0 2em; /* Add some left margin for inner lists */
}

.rounded-list a, .rounded-list-scratch a {
	position: relative;
	display: inline-block;
	padding: .4em .4em .4em 2em;
	margin: .5em 0;		
	color: #444;
	text-decoration: none;
	border-radius: .3em;
	transition: all .3s ease-out;
	background: transparent; /* No background in default state */
}

.rounded-list a:hover, .rounded-list-scratch a:hover {
	background: #f8f9fa; /* Light grey background on hover */
}

/* Remove hover effect when hovering over trash can icons */
.rounded-list a:hover .hide-counter,
.rounded-list-scratch a:hover .hide-counter,
.rounded-list a:has(.hide-counter:hover),
.rounded-list-scratch a:has(.hide-counter:hover),
[data-bs-theme=dark] .rounded-list a:has(.hide-counter:hover),
[data-bs-theme=dark] .rounded-list-scratch a:has(.hide-counter:hover),
.hide-counter:hover,
li:has(.hide-counter:hover) a,
li:has(.hide-counter:hover) a:hover,
[data-bs-theme=dark] .hide-counter,
[data-bs-theme=dark] .hide-counter:hover,
[data-bs-theme=dark] li:has(.hide-counter:hover) a,
[data-bs-theme=dark] li:has(.hide-counter:hover) a:hover,
.hd-nav-sub-item.active_group,
.hd-user-menu .active_group {
	background: transparent !important;
}

/* Prevent parent hover background when hovering trash icons */

.rounded-list a:hover:before,
.learning-track-node-item .rounded-list a:hover:before {
	background-color: #4B4747;
	color: #fff;
	transform: rotateY(360deg);
	font-weight: normal;
}

.rounded-list-scratch a:hover:before,
.learning-track-node-item .rounded-list-scratch a:hover:before {
	background-color: red;
	color: #fff;
	transform: rotateY(360deg);
	font-weight: normal;
}

/* Dark mode styles */
[data-bs-theme=dark] .rounded-list a,
[data-bs-theme=dark] .rounded-list-scratch a {
	background: transparent !important; /* No background in default dark mode state */
	color: #ffffff !important;
}

[data-bs-theme=dark] .rounded-list a:hover,
[data-bs-theme=dark] .rounded-list-scratch a:hover {
	background: var(--hd-white-a12) !important; /* Light grey hover in dark mode */
}

/* Dark mode - prevent hover effect when hovering over trash can icons */

[data-bs-theme=dark] .rounded-list a:before,
[data-bs-theme=dark] .learning-track-node-item .rounded-list a:before {
	background: #033457 !important;
	border-color: #212529 !important;
	color: #ffffff !important;
}

[data-bs-theme=dark] .rounded-list a:hover:before,
[data-bs-theme=dark] .learning-track-node-item .rounded-list a:hover:before {
	background-color: #444848 !important;
	color: #ffffff !important;
}

/* Dark mode styles for scratch list */


/* Dark mode - prevent hover effect when hovering over trash can icons for scratch list */

[data-bs-theme=dark] .rounded-list-scratch a:before {
	background: #A51E36 !important;
	border-color: #212529 !important;
	color: #ffffff !important;
}

[data-bs-theme=dark] .rounded-list-scratch a:hover:before {
	background-color: #dc3545 !important;
	color: #ffffff !important;
}

/* Dark mode border color for numbered circles */
[data-bs-theme=dark] .rounded-list a:before,
[data-bs-theme=dark] .rounded-list-scratch a:before {
	border-color: #212529 !important;
}

[data-bs-theme=dark] .not_used,
[data-bs-theme=dark] .learning-track-node-item .not_used {
	text-decoration-color: #ff6b6b !important;
}

.rounded-list a:before,
.rounded-list-scratch a:before,
.learning-track-node-item .rounded-list a:before,
.learning-track-node-item .rounded-list-scratch a:before {
	content: counter(li);
	counter-increment: li;
	position: absolute;
	left: -1.3em;
	top: 50%;
	margin-top: -1em;
	background: #87ceeb;
	height: 2em;
	width: 2em;
	line-height: 1.45em;
	border: .3em solid #fff;
	text-align: center;
	font-weight: bold;
	border-radius: 2em;
	transition: all .3s ease-out;
}

.rounded-list-scratch a:before,
.learning-track-node-item .rounded-list-scratch a:before {
	background: #A51E36;
	color: #ffffff;
}

.not_used,
.learning-track-node-item .not_used {
	text-decoration: line-through;
	text-decoration-color: red;
}

/* Override global tooltip styles for learning track tooltips */
.rounded-list .tooltip-inner,
.rounded-list-scratch .tooltip-inner,
.learning-track-node-item .tooltip-inner {
	min-width: 100px;
	max-width: 100%;
	text-align: left;
}

.hide-counter::before,
.learning-track-node-item .hide-counter::before { /* Hiding the counter for a specific list item */
	visibility: hidden;
	display: none;
}


.hide-counter {
	background: transparent !important;
	position: relative;
	z-index: 10; /* Ensure trash icons are on top */
	display: inline-block;
	min-width: 20px; /* Ensure consistent width for tooltip positioning */
	text-align: center;
	margin-left: 10px; /* Small space from the track text */
	vertical-align: baseline; /* Better alignment with text baseline */
	line-height: 1; /* Maintain consistent line height */
}





.nopoint,
.learning-track-node-item .nopoint {
	cursor: none;
}


/* Course Content and Question Styling */
.course-content-container {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.instruction-page {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    animation: fadeInUp 0.6s ease;
}

.instruction-page h1, 
.instruction-page h2, 
.instruction-page h3 {
    color: #000000;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 1.3;
}

.instruction-page h1 {
    font-size: 2.4rem;
    border-bottom: 3px solid #667eea;
    padding-bottom: 16px;
}

.instruction-page h2 {
    font-size: 1.9rem;
    color: #1a2030;
}

.instruction-page h3 {
    font-size: 1.6rem;
    color: #405840;
}

.instruction-page p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 18px;
}

.instruction-page ul, 
.instruction-page ol {
    margin-left: 0;
    padding-left: 0;
}

.instruction-page li {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 34px;
    position: relative;
}

.instruction-page ul {
    list-style-type: none;
    padding-left: 0;
}

.instruction-page ul li::before {
    content: '•';
    color: #667eea;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -2px;
}

.instruction-page ol li {
    counter-increment: list-counter;
}

.instruction-page ol {
    list-style-type: none;
    padding-left: 0;
    counter-reset: list-counter;
}

.instruction-page ol li::before {
    content: counter(list-counter) '.';
    color: #667eea;
    font-weight: 600;
    position: absolute;
    left: 0;
}

.instruction-page img {
    max-width: 100%;
    min-width: 250px;
    width: 65%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin: 24px auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Floated images (style="float:right" / "float:left" applied via the
   instruction editor) need different defaults — the .instruction-page img
   rule above forces width:65%+, display:block, and margin:auto, all of
   which fight float behaviour. When a float direction is set inline, swap
   to inline-block sizing capped at ~45% of the column so the surrounding
   text can wrap, and replace the auto margin with directional gutters. */
.instruction-page img[style*="float:right"],
.instruction-page img[style*="float: right"],
.instruction-page img[style*="float:left"],
.instruction-page img[style*="float: left"] {
    display: inline-block;
    width: auto;
    max-width: 45%;
    min-width: 0;
    margin: 0;
}
.instruction-page img[style*="float:right"],
.instruction-page img[style*="float: right"] {
    margin: 0 0 1rem 1rem;
}
.instruction-page img[style*="float:left"],
.instruction-page img[style*="float: left"] {
    margin: 0 1rem 1rem 0;
}

.instruction-page img:hover {
    transform: scale(1.02);
}

/* Responsive image sizing */
@media (min-width: 768px) {
    .instruction-page img {
        min-width: 350px;
        width: 70%;
    }
}

@media (min-width: 1200px) {
    .instruction-page img {
        min-width: 400px;
        width: 75%;
    }
}

.instruction-page blockquote {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left: 4px solid #667eea;
    padding: 24px;
    margin: 24px 0;
    border-radius: 0 12px 12px 0;
    font-style: italic;
}

.instruction-page code {
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    color: #e83e8c;
}

.instruction-page pre {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    overflow-x: auto;
    border: 1px solid #e9ecef;
}

.question-page {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafe 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: visible;
    margin: 16px;
}


.question-container {
    padding: 48px;
    max-width: 900px;
    margin: 0 auto;
}

.question-title {
    font-size: 1.75rem;
    color: #000000;
    font-weight: 700;
    margin-bottom: 32px;
    line-height: 1.3;
    position: relative;
    padding-left: 24px;
}

.question-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

.question-content {
    margin-bottom: 40px;
    background: #f8f9fa;
    padding: 24px;
    border-radius: 16px;
    border-left: 4px solid #667eea;
}

.question-content p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #2c3e50;
    margin-bottom: 16px;
    font-weight: 500;
}

.question-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    margin: 16px 0;
}

/* Image Target Question Specific Styling */
#question_img.vh100-100px {
    max-width: 90vw;
    max-height: 70vh;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Image grid layout for multiple images */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.image-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-grid img:hover {
    border-color: #007bff;
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2);
}

/* Responsive adjustments for image questions */
@media (max-width: 768px) {
    #question_img.vh100-100px {
        max-width: 95vw;
        max-height: 50vh;
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        padding: 15px;
    }
    
    .image-grid img {
        height: 150px;
    }
}

/* Ensure the image container uses available space properly */
.question-container,
.course-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* #endregion */


/***************************************************************
--------------------Duration Widget--------------------
***************************************************************/
/* #region */
/* 
 * Duration Widget Styles
 * Custom styles for the DurationWidget component
 * All classes prefixed with 'dur-' to avoid conflicts
 */

.dur-widget-container,
.box-media,
.canvas-wrapper,
.home-dash .hd-inline-search-wrap {
    position: relative;
    width: 100%;
}.dur-input,
.ticket-table,
.table-hover thead,
.w-100-form,
.home-dash .hd-qe-list-panel,
.home-dash .hd-qe-detail-panel,
.home-dash .hd-qed-list-panel,
.home-dash .hd-qed-display-panel,
.home-dash .hd-qed-json-panel,
.home-dash .hd-ke-tree-panel,
.home-dash .hd-ke-detail-panel,
.home-dash .hd-gt-empty-panel,
.home-dash .hd-gf,
.home-dash .hd-gm,
.home-dash .hd-gm-summary-panel,
.home-dash .hd-gmove,
.home-dash .hd-gmove-panel,
.home-dash .hd-gdel,
.home-dash .hd-cl,
.home-dash .hd-cl-results-panel,
.home-dash .hd-kl,
.home-dash .hd-kl-panel,
.home-dash .hd-kl-list-wrap,
.home-dash .hd-tc,
.home-dash .hd-tc-panel,
.home-dash .hd-fc,
.home-dash .hd-fc-panel,
.home-dash .hd-cc,
.home-dash .hd-cc-panel,
.home-dash .hd-cr-panel,
.home-dash .hd-cfg-toggle-row .hd-toggle,
.hd-modal.hd-emp-mgr-modal .hd-emp-mgr-bulk-userpick,
.home-dash .hd-grp-search,
.home-dash .hd-prog-groups-panel,
.home-dash .hd-prog-activity-panel,
.home-dash .hd-ugm-search,
.home-dash .hd-eq-tasks-search .hd-inline-search-control,
.home-dash .hd-news,
.home-dash .hd-news-panel,
.home-dash .hd-news-form-page,
.home-dash .hd-news-del,
.home-dash .hd-fd,
.home-dash .hd-fd-panel,
.home-dash .hd-cb-search,
.home-dash .hd-cb-search-results,
.home-dash .hd-gb,
.home-dash .hd-gb-groups-panel,
.home-dash .hd-gb-overview-panel,
.home-dash .hd-gb-update-panel,
.home-dash .hd-gb-kra-panel,
.home-dash .hd-gb-unused-panel,
.home-dash .hd-kb,
.home-dash .hd-kb-list-wrap,
.home-dash .hd-kb-update-panel,
.home-dash .hd-kb-overview-panel,
.home-dash .hd-kb-notes-panel,
.home-dash .hd-tb-update-panel,
.home-dash .hd-tb,
.home-dash .hd-fb-list-panel,
.home-dash .hd-pb-list-panel,
.home-dash .hd-fb-update-panel,
.home-dash .hd-qb-list-panel,
.home-dash .hd-mr-panel,
.home-dash .hd-su-panel,
.home-dash .hd-qb-overview-panel,
.home-dash .hd-qb-update-panel,
.home-dash .hd-qb-cu-panel,
.home-dash .hd-qb-detail-panel,
.home-dash .hd-qb-del-panel,
.home-dash .hd-qb-al-panel,
.home-dash .hd-pb-items-wrap,
.home-dash .hd-pb-initial,
.home-dash .hd-pb-overview-panel,
.home-dash .hd-pb-update-panel,
.home-dash .hd-pb-extras-panel,
.home-dash .hd-iss-detail-panel,
.home-dash .hd-iss-detail-comrades,
.home-dash .hd-stb-q-extras,
.home-dash .hd-stb-q-unused-panel,
.home-dash .hd-stb-q-survey-steps-panel,
.home-dash .hd-stb-q-img-saved input,
.home-dash .hd-stb-q-img-upload input,
.home-dash .hd-rt-page,
.home-dash .hd-lst-list-panel,
.home-dash .hd-lst-overview-panel,
.home-dash .hd-lst-plan-panel,
.home-dash .hd-lst-items-panel {
    width: 100%;
}

/* Advanced mode styles */
.dur-advanced-inputs,
.dur-single-input,
.sidebar .row {
    margin-bottom: 0.5rem;
}

.dur-advanced-input {
    text-align: center;
    font-weight: 600;
    color: #495057;
}

.dur-advanced-input:focus,
#date-range-preset:focus,
.date-preset:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.dur-advanced-inputs .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dur-advanced-inputs .col-4,
.dropdown-submenu,
.cr-search-container,
.crm-contact-activity-log .timeline-item,
.position-relative,
.search-container:not(.position-absolute),
.search-input-wrapper,
.hd-topnav-submenu,
.hd-topnav-submenu-toggle,
.hd-user-menu,
.home-dash .hd-dept-refs-panels,
.home-dash .hd-dept-faq-search-wrap,
.home-dash .hd-kl-pick-menu > li,
.home-dash .hd-grp-deptpick,
.home-dash .hd-stb-q-panel-menu-list > li,
.home-dash .hd-stb-q-survey-hero-inner,
.home-dash .hd-lst-naming-dropdown,
.hd-login-password-wrap {
    position: relative;
}

/* Unit selector styles */
.dur-unit-selector {
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.dur-unit-selector .btn-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dur-unit-selector .btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.dur-unit-selector .form-select-sm {
    min-width: 120px;
}

/* Duration input wrapper */
.dur-input-wrapper {
    position: relative;
    min-height: 40px;
}

/* Single unit input */

.dur-single-input input[type="number"] {
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.dur-single-input input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
    text-align: center;
    font-weight: 600;
}

.dur-single-input .form-check,
.course-form-check-label-basic,
.info-item:last-child,
.hd-doc-content p:last-child,
.crm-company-detail .stat-item h3,
#home-bookmarks .hd-bm-card:last-child,
.hd-modal .hd-field:last-child,
.home-dash .hd-dept-kra-item:last-child .hd-dept-kra-chip,
.home-dash .hd-dept-member:last-child,
.home-dash .hd-dept-task:last-child,
.hd-modal .hd-field-check:last-child,
.hd-field:last-child,
.hd-field-check:last-child,
.home-dash .hd-wsch-section:last-child,
.home-dash .hd-emp-id-form-fields .hd-field,
.home-dash .hd-emp-position-text p:last-child,
.home-dash .hd-emp-task-desc p:last-child,
.home-dash .hd-kra-section,
.home-dash .hd-kra-description p:last-child,
.home-dash .hd-foundation-answer-text p:last-child,
.home-dash .hd-ke-detail-section:last-of-type,
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-section:last-of-type,
.hd-modal.hd-cl-preview-modal .hd-cl-preview-section:last-of-type,
.hd-modal.hd-cl-preview-modal .hd-cl-preview-prose p:last-child,
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-item:last-child,
.home-dash .hd-app-overview-field:last-child,
.home-dash .hd-app-overview-value--prose p:last-child,
.home-dash .hd-app-form-body .hd-field,
.hd-modal.hd-lic-modal .hd-lic-modal-section:last-of-type,
.home-dash .hd-eq-section:last-of-type,
.hd-login-help-body :where(p):last-child,
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-body-quote p:last-child,
.hd-modal.hd-msg-create-modal .hd-msg-create-body .hd-field,
.hd-cs-section :where(p, ul, ol):last-child,
.home-dash .hd-news-article p:last-child,
.home-dash .hd-news-del-article-body p:last-child,
.home-dash .hd-fd-block:last-child,
.home-dash .hd-fd-block-body p:last-child,
.home-dash .hd-kb-acc-row:last-child,
.home-dash .hd-kb-overview-prose p:last-child,
.home-dash .hd-mr-edit-body .hd-field,
.home-dash .hd-qb-levels-list > li:last-child,
.hd-modal .hd-stb-q-imgmodal-help p:last-child,
.home-dash .hd-stb-q-overview-card:last-child,
.home-dash .hd-stb-q-update-grid > .hd-field,
.home-dash .hd-stb-q-survey-update-grid > .hd-field,
.hd-modal.hd-rb-course-delete-modal .hd-rb-course-delete-section:last-child,
.hd-modal .hd-ob-km-list > li:last-child {
    margin-bottom: 0;
}

.dur-single-input .form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Transition effects */
.dur-widget-container [id$="_single_container"],
.dur-widget-container [id$="_all_container"] {
    transition: opacity 0.2s ease-in-out;
}

/* Bootstrap Icons support (if available) */
.dur-widget-container .btn i.bi {
    margin-right: 0.25rem;
}

.dur-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.dur-preset-btn {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.dur-preset-btn:hover {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.dur-preset-btn:active {
    transform: scale(0.95);
}

.dur-calculator {
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
}

.dur-calculator small {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dur-widget-container [id$="_end_time"] {
    color: #198754;
    font-weight: 600;
}

.dur-calculator .text-success {
    color: #198754 !important;
}

/* Error state */
.dur-input.is-invalid {
    border-color: #dc3545;
}

.dur-input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Success state when valid */
.dur-input.is-valid {
    border-color: #198754;
}

.dur-input.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .dur-presets {
        flex-direction: row;
    }
    
    .dur-preset-btn {
        flex: 0 0 auto;
        min-width: 50px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .dur-calculator {
        background-color: #343a40;
        color: #f8f9fa;
    }
    
    .dur-preset-btn {
        background-color: #495057;
        color: #f8f9fa;
        border-color: #6c757d;
    }
    
    .dur-preset-btn:hover {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }
}

/* #endregion */

/* Better positioning for image target questions */
.course-position-relative {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
} 

/* Basic Form Check Styling (Reverted) */
.course-form-check-basic {
    position: relative;
    display: block;
    padding-left: 1.25rem;
    margin-bottom: 0.125rem;
}

.course-form-check-input-basic {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}


/* Course-specific enhanced form styling */
.course-form-check {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.course-form-check:hover {
    background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.course-form-check-input:checked + .course-form-check-label {
    color: #000000;
    font-weight: 600;
}

.course-form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.2);
}

.course-form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 0;
    margin-right: 0;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
    flex-shrink: 0;
    order: -1;
}

.course-form-check-input:hover {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.course-form-check-label {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #2c3e50;
    cursor: pointer;
    margin-left: 0;
    margin-bottom: 0;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1;
}

/* Special styling for checked course form items */
.course-form-check:has(.course-form-check-input:checked) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    border-left-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.course-form-check:has(.course-form-check-input:checked) .course-form-check-label,
.home-dash .hd-maint-eq-row.is-selected .hd-maint-eq-row-title,
.home-dash .hd-ob-q-answerkey-label,
.home-dash .hd-ob-q-answer-term {
    font-weight: 600;
}

/* Course checkbox-specific styling for survey templates */
.modern-checkbox-choice {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid var(--hd-line) !important;
    border-radius: var(--hd-radius-sm) !important;
    margin: 8px 0 !important;
    padding: 15px 15px 15px 25px !important;
    background: var(--hd-surface) !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

.modern-checkbox-choice:hover {
    border-color: var(--hd-blue) !important;
    background: var(--hd-surface-2) !important;
}

.modern-checkbox-choice.checked,
.modern-checkbox-choice:has(.hd-cat-toggle-input:checked) {
    border-color: var(--hd-blue) !important;
    background: var(--hd-blue-a06) !important;
    box-shadow: 0 2px 8px var(--hd-blue-a18) !important;
}

.modern-checkbox-choice .course-form-check-input,
body.learning-course-test-run .modern-checkbox-choice .course-form-check-input,
body.learning-course-test-run .modern-tf-choice .course-form-check-input,
body.learning-course-test-run .modern-choice .course-form-check-input {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

.modern-checkbox-choice .course-form-check-label {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #2c3e50 !important;
}

.modern-checkbox-choice.checked .course-form-check-label {
    color: #2c3e50 !important;
}

.checkbox-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--hd-line) !important;
    border-radius: 4px !important;
    margin-right: 12px !important;
    background: var(--hd-surface) !important;
    transition: border-color .15s ease, background .15s ease !important;
    flex-shrink: 0 !important;
}

.modern-checkbox-choice.checked .checkbox-custom {
    background: var(--hd-blue) !important;
    border: none !important;
    color: #fff !important;
}

.checkbox-custom i,
body.learning-course-test-run .checkbox-custom i {
    font-size: 12px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.modern-checkbox-choice.checked .checkbox-custom i,
.modern-choice.selected .choice-custom .selected-icon,
body.learning-course-test-run .modern-checkbox-choice.checked .checkbox-custom i,
body.learning-course-test-run .modern-choice.selected .choice-custom .selected-icon {
    opacity: 1 !important;
}

.modern-checkbox-choice .checkbox-content {
    flex: 1 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #2c3e50 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modern-checkbox-choice.checked .checkbox-content,
.modern-checkbox-choice:hover .checkbox-content {
    color: #2c3e50 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}




/* Course multiple choice styling for survey templates */
.modern-choice {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid var(--hd-line) !important;
    border-radius: var(--hd-radius-sm) !important;
    padding: 12px 16px 12px 20px !important;
    margin: 8px 0 !important;
    transition: border-color .15s ease, background .15s ease !important;
    cursor: pointer !important;
    background: var(--hd-surface) !important;
}

.modern-choice:hover,
.questions-multiple-choice-survey .modern-choice:hover {
    border-color: var(--hd-blue) !important;
    background-color: var(--hd-surface-2) !important;
}

.modern-choice.selected,
.questions-multiple-choice-survey .modern-choice.selected {
    border-color: var(--hd-blue) !important;
    background-color: var(--hd-blue-a06) !important;
}


.modern-choice .course-form-check-label,
body.learning-course-test-run .modern-choice .course-form-check-label {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.modern-choice .choice-custom {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--hd-line) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    position: relative !important;
    transition: border-color .15s ease, background .15s ease !important;
    background: var(--hd-surface) !important;
    flex-shrink: 0 !important;
}

.modern-choice.selected .choice-custom,
.questions-multiple-choice-survey .modern-choice.selected .choice-custom {
    background-color: var(--hd-blue) !important;
    border-color: var(--hd-blue) !important;
}

.modern-choice .choice-custom i {
    font-size: 12px !important;
    color: white !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}


.choice-content {
    flex: 1 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #2c3e50 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Question Type Indicators */
.question-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.question-type-badge.multiple-choice {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.question-type-badge.single-choice {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
}

.question-type-badge.true-false {
    background: linear-gradient(135deg, #fd7e14 0%, #e83e8c 100%);
}

/* Modern Choice Styling for Surveys */
.question-form {
    margin-top: 32px;
}

/* Question Instructions */
.question-instructions {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 24px;
    font-size: 1rem;
    color: #1565c0;
    font-weight: 500;
}

.question-instructions i {
    margin-right: 8px;
    font-size: 1.1rem;
}

/* Modern Alert Banner Styling */
.alert {
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: currentColor;
}

.alert .btn-close {
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}

.alert .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Success Alert */
.alert-success {
    background: rgba(40, 167, 69, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #0d5c2b;
    border: 1px solid rgba(40, 167, 69, 0.4);
    border-left: 4px solid #28a745;
}

.alert-success::before {
    background: #28a745;
}

/* Info Alert */
.alert-info {
    background: rgba(23, 162, 184, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #0a4d5c;
    border: 1px solid rgba(23, 162, 184, 0.3);
    border-left: 4px solid #17a2b8;
}

.alert-info::before {
    background: #17a2b8;
}

/* Warning Alert */
.alert-warning {
    background: rgba(255, 193, 7, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-left: 4px solid #ffc107;
}

.alert-warning::before {
    background: #ffc107;
}

/* Error/Danger Alert */
.alert-danger,
.alert-error {
    background: rgba(220, 53, 69, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #721c24;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-left: 4px solid #dc3545;
}

.alert-danger::before,
.alert-error::before {
    background: #dc3545;
}

/* Dark Mode Support */
[data-bs-theme="dark"] .alert {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .alert-success {
    background: rgba(40, 167, 69, 0.2);
    color: #7fda89;
    border: 1px solid rgba(40, 167, 69, 0.4);
}

[data-bs-theme="dark"] .alert-info {
    background: rgba(23, 162, 184, 0.2);
    color: #7dd3e0;
    border: 1px solid rgba(23, 162, 184, 0.4);
}

[data-bs-theme="dark"] .alert-warning {
    background: rgba(255, 193, 7, 0.2);
    color: #ffe69c;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

[data-bs-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-error {
    background: rgba(220, 53, 69, 0.2);
    color: #f8b9c0;
    border: 1px solid rgba(220, 53, 69, 0.4);
}

/* Fade out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.alert.fade-out {
    animation: fadeOut 0.3s ease-in forwards;
}

/* Feedback Styling */
.feedback-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    text-align: center;
    max-width: 500px;
    width: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    animation: bounceIn 0.6s ease;
}

.feedback-correct {
    border-top: 4px solid #28a745;
}

.feedback-incorrect {
    border-top: 4px solid #dc3545;
}

.feedback-icon {
    font-size: 4rem;
    margin-bottom: 24px;
}

.feedback-correct .feedback-icon,
.feedback-correct .feedback-title,
.course-legacy-import .complete,
.home-dash .hd-lst-plan-row.is-done > .hd-lst-plan-cleanup {
    color: #28a745;
}

.feedback-incorrect .feedback-icon,
.feedback-incorrect .feedback-title,
.course-legacy-import .error,
.home-dash .hd-grp-newgroup-error .bi {
    color: #dc3545;
}

.feedback-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
}



.feedback-message {
    font-size: 1.1rem;
    color: #6c757d;
    line-height: 1.6;
}

.feedback-action {
    text-align: center;
    font-style: italic;
    animation: fadeInUp 0.5s ease 0.3s both;
}

.feedback-action i {
    opacity: 0.7;
}

/* Ranking Question Styles */
.ranking-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.ranking-instructions {
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 15px;
    border-radius: 8px;
}

.ranking-list {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    background: white;
    cursor: grab;
    transition: all 0.3s ease;
    user-select: none;
}

.ranking-item:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ranking-item:active,
.question-sortable-item:active,
.home-dash .hd-teb-q:active,
.home-dash .hd-teb-q.ui-sortable-helper,
.home-dash .hd-jc-list-item.sortable_list_item:active,
.home-dash .hd-gb-list-grip:active,
.home-dash .hd-kb-list-grip:active,
.home-dash .hd-stb-q-mc-grip:active,
.home-dash .hd-stb-q-img-row-grip:active,
.home-dash .hd-gc-item.ui-sortable-helper .hd-gc-grip,
.home-dash .hd-bs-draggable .hd-bs-grip:active {
    cursor: grabbing;
}

.ranking-item.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.ranking-item.drag-over {
    border-top: 3px solid #007bff;
    background: #e3f2fd;
}

.ranking-item:last-child,
.lesson-item:last-child,
.cr-search-item:last-child,
.hd-modal .hd-iss-confirm-using-table tbody tr:last-child td,
.home-dash .hd-iss-detail-comrades-table tbody tr:last-child td {
    border-bottom: none;
}

.ranking-handle {
    color: #6c757d;
    margin-right: 15px;
    font-size: 1.2rem;
}

.ranking-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 15px;
    font-size: 0.9rem;
}

.ranking-content {
    flex: 1;
    font-size: 1rem;
    line-height: 1.4;
}

.ranking-content p,
.note-modal .note-modal-body label:has(> kbd) > kbd,
.form-margin-0,
.search-container .row,
.hd-nav,
.hd-search-snippet p,
.home-dash .hd-groupinfo-cert-delete-form,
.home-dash .hd-jd-edit,
.home-dash .hd-wsch-inline-form,
.home-dash .hd-wsch-edit-form,
.home-dash .hd-kei-form,
.home-dash .hd-perm-form,
.home-dash .hd-kra-task-head,
.home-dash .hd-proc-issue-accordion .accordion-header,
.home-dash .hd-field-error li,
.hd-modal.hd-jc-delete-modal .hd-jc-delete-form .modal-footer,
.home-dash .hd-gdel-form,
.home-dash .hd-cl-filter-form,
.home-dash .hd-kl-pending-row,
.home-dash .hd-grp-search-form,
.home-dash .hd-grp-member-supervisor .hd-check,
.home-dash .hd-app-overview-form,
.home-dash .hd-app-update-form,
.home-dash .hd-feat-row-delete-form,
.home-dash .hd-lang-panel,
.home-dash .hd-licmgr-form,
.home-dash .hd-lic-panel,
.hd-modal.hd-lic-modal .hd-lic-modal-form,
.home-dash .hd-mfg-update-form,
.home-dash .hd-perm-search-form,
.home-dash .hd-perm-grid-panel,
.home-dash .hd-empform-form,
.home-dash .hd-ugm-search-form,
.home-dash .hd-ugm-panel,
.home-dash .hd-ugm-form,
.hd-login-help-body,
.home-dash .hd-applist-panel,
.home-dash .hd-dept-add-btn--icon-only .hd-dept-add-btn-icon,
.home-dash .hd-emp-msg-empty p,
.home-dash .hd-news-del-form,
.home-dash .hd-cat-panel,
.home-dash .hd-cb-info-form,
.home-dash .hd-gb-list-form,
.home-dash .hd-gb-form,
.home-dash .hd-gb-field,
.hd-modal .hd-gb-del-form,
.home-dash .hd-kb-search,
.home-dash .hd-kb-update-field,
.hd-modal.hd-kb-newkra-modal .hd-kb-newkra-field,
.home-dash .hd-tb-list-form,
.hd-modal.hd-tb-tocustom-modal .hd-tb-tocustom-body p,
.home-dash .hd-kb-acc-chevron-btn .hd-kb-acc-chevron,
.home-dash .hd-pb-step-search .hd-inline-search-form,
.home-dash .hd-pb-dim-filter-form,
.home-dash .hd-pb-step-detail-line,
.home-dash .hd-stb-q-survey-update-toggle .hd-field-label,
.home-dash .hd-lb-list-form,
.home-dash .hd-rb-course-reason--editable,
.hd-modal .hd-ob-levels-list,
.hd-modal .hd-ob-km-list {
	margin: 0;
}

/* Step-question Active / Randomize Choices labels — render the same
   sentence-case bold-ink appearance as kra_builder's .hd-kb-toggle-label
   spans. Because the template uses <label class="hd-field-label">, we
   also reset the eyebrow text-transform / letter-spacing that the base
   .hd-field-label rule applies. (The chain above already supplies
   margin: 0 for these selectors.) */
.home-dash .hd-stb-q-survey-update-toggle .hd-field-label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .87rem;
	font-weight: 600;
	color: var(--hd-ink);
	text-transform: none;
	letter-spacing: normal;
}

/* Drag and drop visual feedback */
.drag-placeholder {
    height: 4px;
    background: #007bff;
    border-radius: 2px;
    margin: 2px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}


/* Matching Question Styles */
.matching-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.matching-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

.matching-prompts {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 400px; /* Set reasonable max height */
    overflow-y: auto; /* Add scrollbar when needed */
    scrollbar-width: thin;
    scrollbar-color: #007bff #f1f1f1;
}

/* Webkit scrollbar styling for matching prompts */

.matching-prompts::-webkit-scrollbar-track,
.employee-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.matching-prompts::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
}

.matching-prompts::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

.matching-prompt-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid transparent;
}

.prompt-label {
    flex: 0 0 120px;
    font-weight: 600;
    color: #495057;
    margin-right: 15px;
}

.match-area {
    flex: 1;
    min-height: 50px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.3s ease;
    position: relative;
}

.match-area.drag-over {
    border-color: #007bff;
    background: #e3f2fd;
}

.match-area.has-match {
    border-color: #28a745;
    background: #d4edda;
    border-style: solid;
}

.drop-hint {
    color: #6c757d;
    font-size: 0.9rem;
    font-style: italic;
}

.matching-answers {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 500px;
    overflow-y: auto;
}

.answers-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.answers-header h6 {
    margin: 0;
    color: #495057;
    font-weight: 600;
}

.matching-answer-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    cursor: grab;
    transition: all 0.3s ease;
    user-select: none;
}

.matching-answer-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.matching-answer-item:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.matching-answer-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.drag-handle {
    margin-right: 10px;
    color: var(--hd-white-a80);
}

.answer-content {
    flex: 1;
    font-weight: 500;
}

.matched-item {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 8px 12px;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
}

.matched-item .remove-match {
    cursor: pointer;
    margin-left: 10px;
    opacity: 0.8;
}


/* Responsive Design */
@media (max-width: 768px) {
    .course-content-container,
    .instruction-page,
    .question-container {
        padding: 32px 20px;
    }
    
    .question-page {
        margin: 8px;
        border-radius: 16px;
    }
    
    .question-title {
        font-size: 1.5rem;
        padding-left: 20px;
    }
    
    .question-content {
        padding: 20px;
        margin-bottom: 32px;
    }
    
    .question-content p {
        font-size: 1.1rem;
    }
    
    .instruction-page h1 {
        font-size: 2rem;
    }
    
    .instruction-page h2,
    .header-title,
    .crm-contact-detail h2,
    .crm-contact-detail .text-center h4,
    #owly-chat-modal .modal-header .fs-3,
    .crm-activity-list h2,
    .crm-contact-list h2,
    .crm-deal-list h2 {
        font-size: 1.5rem;
    }
    
    .instruction-page h3 {
        font-size: 1.25rem;
    }
    
    .course-form-check {
        padding: 16px 18px;
        margin-bottom: 12px;
    }
    
    .course-form-check-label {
        font-size: 1.05rem;
        margin-left: 12px;
    }
    
    .course-form-check-input {
        width: 20px;
        height: 20px;
    }
    
    .question-form {
        padding: 20px;
        margin-top: 24px;
    }
    
    .question-instructions {
        padding: 14px 16px;
        font-size: 0.95rem;
    }
    
    .modern-choice {
        padding: 16px 20px;
    }
    
    .choice-letter {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        margin-right: 12px;
    }
    
    .choice-content,
    .launch-subtitle,
    .lesson-title,
    .suite-app-list .page-header-title {
        font-size: 1rem;
    }
    
    .ranking-container,
    .matching-container,
    .course-main {
        padding: 15px;
    }
    
    .ranking-item {
        padding: 12px;
    }
    
    .ranking-number {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .ranking-handle {
        font-size: 1rem;
        margin-right: 10px;
    }
    
    .matching-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    
    .matching-prompt-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .prompt-label {
        flex: none;
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
    70% {
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* SCORM Course Launch Styling */
.scorm-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    margin: 0;
}

.course-container {
    background: var(--hd-white-a92);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    min-height: calc(100vh - 40px);
	height: 100vh;
    display: flex;
    flex-direction: column;
	max-width: 1200px;
    margin: 0 auto;
}


.course-content-area {
    background: #fff;
    border-radius: 12px;
    border: 2px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-height: calc(100vh - 200px);
    position: relative;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hd-white-a92);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 1000;
}

.spinner-border-custom {
    width: 3rem;
    height: 3rem;
    color: #000000;
}

#content {
    border: none;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 200px);
}

.btn-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.course-controls {
    border-radius: 0 0 12px 12px;
    padding: 16px;
    border-top: 1px solid #e9ecef;
    display: none; /* Hidden by default, can be shown if needed */
}

/* Course Launch Styling */
.launch-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
}

.launch-container {
    background: var(--hd-white-a92);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 48px;
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.launch-container.aicc {
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
}

.launch-header,
.lessons-section {
    margin-bottom: 32px;
}

.launch-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #000000 0%, #1a2030 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.launch-icon i {
    font-size: 2.5rem;
    color: white;
}

.launch-title {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
    line-height: 1.2;
}

.launch-subtitle {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 32px;
    line-height: 1.6;
}

.launch-info {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    text-align: left;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 1rem;
    color: #495057;
}


.info-item i {
    width: 24px;
    color: #667eea;
    margin-right: 12px;
    font-size: 1.1rem;
}

.launch-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-launch-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-launch-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.4);
    color: white;
    text-decoration: none;
}

.btn-launch-secondary {
    background: transparent;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-launch-secondary:hover {
    border-color: #667eea;
    background: #667eea;
    color: white;
    text-decoration: none;
}

.launch-footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
    font-size: 0.9rem;
    color: #6c757d;
}

@media (max-width: 768px) {
    .launch-container {
        padding: 32px 24px;
        margin: 0 16px;
    }
    
    .launch-title {
        font-size: 1.75rem;
    }
    
    
    .launch-actions {
        gap: 12px;
    }
    
    .btn-launch-primary {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .btn-launch-secondary {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* Course Lesson Delivery Styling */
:root {
    --primary-blue: #000000;
    --secondary-blue: #1a2030;
    --accent-color: #667eea;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-bg: #f8f9fa;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --header-height: 70px;
    --footer-height: 70px;
}

.course-lesson-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

.course-header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
	border-radius: 12px 12px 0 0;
	padding: 20px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1000;
}

.course-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-to-course {
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-to-course:hover {
    color: white;
    background: var(--hd-white-a12);
    transform: translateX(-2px);
}

.progress-info {
    background: var(--hd-white-a12);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.course-content {
    flex: 1;
    overflow: hidden;
    background: white;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    position: relative;
    display: flex;
    flex-direction: column;
}

.question-screens {
    padding: clamp(8px, 2vw, 24px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
}

/* Auto-scaling content container */
.question-screens > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;
}

/* Dynamic scaling based on viewport size */
@media (max-height: 700px) {
    .question-screens {
        font-size: clamp(0.75rem, 1.3vw, 0.95rem);
        padding: clamp(6px, 1.5vw, 20px);
    }
}

@media (max-height: 600px) {
    .question-screens {
        font-size: clamp(0.7rem, 1.2vw, 0.9rem);
        padding: clamp(4px, 1.2vw, 16px);
    }
}

@media (max-height: 500px) {
    .question-screens {
        font-size: clamp(0.65rem, 1vw, 0.8rem);
        padding: clamp(4px, 1vw, 12px);
    }
}

@media (max-height: 400px) {
    .question-screens {
        font-size: clamp(0.6rem, 0.9vw, 0.75rem);
        padding: clamp(2px, 0.8vw, 8px);
    }
}

/* Scale images and content elements */
.question-screens img,
.question-screens .question-image,
.question-screens .course-image {
    max-width: 100%;
    max-height: clamp(200px, 45vh, 400px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Smaller screens need more aggressive image scaling */
@media (max-height: 600px) {
    .question-screens img,
    .question-screens .question-image,
    .question-screens .course-image {
        max-height: clamp(150px, 35vh, 300px);
    }
}

@media (max-height: 500px) {
    .question-screens img,
    .question-screens .question-image,
    .question-screens .course-image {
        max-height: clamp(120px, 30vh, 200px);
    }
}

.question-screens .question-content,
.question-screens .lesson-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.question-text{
    background: var(--primary-blue)  !important;
    color: white;
    padding: 16px 24px;
    border-radius: 16px 16px 0 0px ;
}

/* Text content auto-scaling */
.question-screens p,
.question-screens .question-text,
.question-screens .lesson-text {
    font-size: clamp(0.8rem, 1.8vw, 1.1rem);
    line-height: clamp(1.3, 1.5vw, 1.6);
    margin: clamp(0.2em, 0.5vw, 0.5em) 0;
}

.question-screens h1,
.question-screens h2,
.question-screens h3 {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: clamp(1.2, 1.3vw, 1.4);
    margin: clamp(0.3em, 0.6vw, 0.5em) 0;
}

.question-screens ul,
.question-screens ol {
    font-size: inherit;
    line-height: inherit;
    margin: clamp(0.5em, 1vw, 1em) 0;
    padding-left: clamp(1em, 2vw, 2em);
}

.question-screens li {
    margin: clamp(0.2em, 0.4vw, 0.4em) 0;
    font-size: inherit;
}

/* Container for auto-fit content */
.auto-fit-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.course-footer {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 44px;
    margin: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.course-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-course {
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    font-size: 0.95rem !important;
    /* Remove default background - let specific button classes handle this */
}

.btn-course:hover {
    transform: translateY(-2px) !important;
    /* Let specific button classes handle background, border, and color */
}

.btn-course:disabled {
    background: var(--hd-white-a06) !important;
    border-color: var(--hd-white-a12) !important;
    color: var(--hd-white-a50) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.course-btn-primary,
#continue-button,
#continue-button:hover,
#continue-button:focus,
#continue-button:active,
#continue-button.course-btn-primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #764ba2 100%) !important;
    border: 2px solid transparent !important;
    color: white !important;
}

.course-btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
    color: white !important;
}

.course-btn-primary:focus,
.course-btn-primary:active {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: white !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* Specific selector for continue button to override all Bootstrap styles */

#continue-button:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* Override any Bootstrap button classes */
a.course-btn-primary,
a#continue-button.btn-course,
.btn.course-btn-primary,
button.course-btn-primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #764ba2 100%) !important;
    background-color: transparent !important;
    border: 2px solid transparent !important;
    color: white !important;
}

/* Course secondary button styles */
.course-btn-secondary {
    background: var(--light-bg) !important;
    border: 2px solid #dee2e6 !important;
    color: #495057 !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.course-btn-secondary:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
    transform: translateY(-1px) !important;
}

/* Course warning button styles */
.course-btn-warning {
    background: linear-gradient(135deg, #ff9500 0%, #ff7b00 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    font-size: 0.875rem !important;
}

.course-btn-warning:hover,
body.learning-course-test-run .course-btn-warning:hover {
    background: linear-gradient(135deg, #ff7b00 0%, #ff6500 100%) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(255, 149, 0, 0.3) !important;
}

/* Course small button styles */
.course-btn-sm,
body.learning-course-test-run .elheader .course-btn-sm {
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

/* Loading States */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hd-white-a92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 16px;
}

.spinner-custom {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design for Course Lessons */
@media (max-width: 768px) {
    .course-header,
    .course-footer {
        height: 60px;
    }
    
    .course-content {
        margin: 10px;
        margin-bottom: 0;
    }
    
    .course-footer {
        margin: 0 10px;
    }
    
    .question-screens,
    .course-card-body {
        padding: 16px;
    }
    
    .btn-course {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
    
    .course-controls {
        flex-direction: column;
        gap: 8px;
    }
}

/* Course Overview and Lessons Styling */
.course-lessons-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.course-lessons-header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    padding: 20px 0;
    margin-bottom: 20px;
}

.course-lessons-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 20px;
    padding: 24px;
    min-height: calc(100vh - 120px);
}


.lessons-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px 0;
    border-bottom: 2px solid #e9ecef;
}

.lessons-icon {
    font-size: 1.5rem;
    color: var(--primary-blue);
}

.lessons-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0;
}

.lessons-progress {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    color: #6c757d;
    margin-left: auto;
}

.lesson-list,
.lessons-list,
.hd-nav-list,
.home-dash .hd-field-error ul,
.home-dash .tree-root {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lesson-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}


.lesson-item:hover {
    background: #f8f9fa;
    border-radius: 12px;
    margin: 0 -12px;
    padding-left: 28px;
    padding-right: 28px;
}

.lesson-number {
    background: linear-gradient(135deg, var(--accent-color) 0%, #764ba2 100%);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 16px;
    flex-shrink: 0;
}

.lesson-content {
    flex: 1;
}

.lesson-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--primary-blue);
    text-decoration: none;
    margin: 0 0 4px 0;
    transition: color 0.3s ease;
}

.lesson-title:hover,
.breadcrumb-modern a {
    color: var(--accent-color);
    text-decoration: none;
}

.lesson-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-top: 4px;
}

.status-completed,
.lesson-item.completed .lesson-icon,
.status-completed-icon {
    color: var(--success-color);
}

.status-not-started,
.breadcrumb-modern .breadcrumb-item + .breadcrumb-item::before,
.status-not-started-icon,
.report-stat-label,
.color-gray,
.text-muted-dash {
    color: #6c757d;
}

.status-in-progress {
    color: var(--warning-color);
}

.status-icon,
.home-dash .hd-actions-trigger .bi,
.home-dash .hd-inline-search-clear .bi,
.home-dash .hd-emp-search-clear .bi,
.home-dash .hd-gb-kebab .bi,
.home-dash .hd-gb-orphan-add .bi,
.home-dash .hd-gb-unused-add .bi,
.home-dash .hd-kb-iconbtn .bi,
.home-dash .hd-kb-acc-row-add .bi,
.home-dash .hd-kb-acc-row-locked .bi,
.home-dash .hd-fb-secured .bi,
.home-dash .hd-iss-trial-add .bi,
.hd-login-password-toggle .bi {
    font-size: 1rem;
}

.lesson-type {
    background: #e9ecef;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 12px;
}

.lesson-type.course-test,
.lesson-type-badge.test {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    color: #2d3436;
}

.lesson-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.lesson-info-btn {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.1rem;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.lesson-info-btn:hover {
    background: #e9ecef;
    color: var(--primary-blue);
}

/* Breadcrumb Styling */
.breadcrumb-modern {
    background: transparent;
    padding: 0;
    margin-bottom: 16px;
}

.breadcrumb-modern .breadcrumb-item {
    font-size: 0.9rem;
}



.breadcrumb-modern a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .course-lessons-content {
        margin: 10px;
        padding: 16px;
    }
    
    .lessons-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .lessons-progress {
        margin-left: 0;
    }
    
    .lesson-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .lesson-number {
        align-self: flex-start;
    }
    
    .lesson-actions {
        margin-left: 0;
        align-self: flex-end;
    }
}

/* Course Run Template Styling */
.course-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.course-wrapper .course-header {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    padding: 20px 0;
    flex-shrink: 0;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.back-button {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: var(--hd-white-a12);
}

.back-button:hover {
    color: white;
    background: var(--hd-white-a18);
    transform: translateX(-2px);
    text-decoration: none;
}

.header-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.course-main {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    align-items: center;
}



.course-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.course-card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    flex-shrink: 0;
}

.lessons-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0;
    display: flex;
    align-items: center;
}

.progress-badge {
    background: linear-gradient(135deg, var(--success-color) 0%, #20c997 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.course-card-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}


.lesson-item {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}


.lesson-item:hover {
    background: #f8f9fa;
    border-radius: 12px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
}

.lesson-link {
    display: flex;
    align-items: center;
    padding: 16px 0;
    text-decoration: none;
    color: inherit;
    width: 100%;
}.lesson-link:hover,
.no-style,
.no-style:hover,
.suite-bookmark-items .hd-bm-main:hover {
    text-decoration: none;
    color: inherit;
}

.lesson-number {
    background: linear-gradient(135deg, var(--accent-color) 0%, #764ba2 100%);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    margin-right: 16px;
    flex-shrink: 0;
}

.lesson-content {
    flex: 1;
    min-width: 0;
}

.lesson-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-blue);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.lesson-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

.lesson-icon {
    font-size: 1.2rem;
    color: #6c757d;
    margin-left: 12px;
}


.lesson-item.test-item {
    border-top: 2px solid #e9ecef;
    margin-top: 16px;
    padding-top: 16px;
}

.lesson-item.test-item .lesson-number {
    background: linear-gradient(135deg, var(--warning-color) 0%, #fd79a8 100%);
}

.lesson-item.test-item .lesson-title {
    color: #e17055;
}



.lesson-type-badge {
    background: #e9ecef;
    color: #6c757d;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: auto;
}


.course-wrapper .course-footer {
    flex-shrink: 0;
    min-height: 20px;
}

/* Empty state */
.empty-state, .empty-lessons {
    text-align: center;
    padding: 48px 24px;
    color: #6c757d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.empty-icon, .empty-lessons i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3, .empty-lessons h4 {
    color: #495057;
    margin-bottom: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .course-wrapper .course-header {
        padding: 15px 0;
    }
    
    .header-content {
        padding: 0 16px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    

    .course-card-header {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    
    .lesson-link {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    
    .lesson-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
}

/* #endregion */


/***************************************************************
--------------------Users------------------------------------
***************************************************************/
/* #region */

.userbg {
	background-color: #A4C2F4;
}

.userheader {
	background-image: url("/static/homepage/small_blue_bg.gif");
	background-position: center;
	background-repeat: repeat;
	background-color: #93B9D9;
	color: #000000;
	font-weight: bold;
	font-size: 1em;
	font-family: Arial;
}

.usermenu {
	background-color: #A4C2F4;
	color: #FFFFFF;
}

.userprofile-icon {
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.userprofile-icon_rect {
	border-radius: 3%;
	object-fit: cover;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.userhvr,
.alt1:hover:nth-of-type(odd),
.alt1:hover:nth-of-type(even) {
	background-color: #F2F2F2;
}

.user-li:not(:has(li)) .user-collapse-toggle {
	visibility: hidden !important;
}

/* Notifications CSS */
#notif_modal {
	padding: 15pt 5pt;
}



#avatar_button:hover {
	cursor: pointer;
	transition: .15s;
	background-color: #c2c5c8;
}

[data-bs-theme=dark] #avatar_text{
	background-color: #4b5357 !important;
	color: #FFFFFF;
}

#avatar_text{
	background-color: white;
	border: none;
	color: Black;
}

[data-bs-theme=light] #signature-canvas{
	background-color: #C3C3C3;
	touch-action: none;
	cursor: crosshair;
}

[data-bs-theme=dark] #signature-canvas{
	background-color: #2b2b2b;
	touch-action: none;
	cursor: crosshair;
}

/* Allow drawing through the signature line overlay */
#signature-section .position-absolute {
	pointer-events: none;
	user-select: none;
}

#id_pref_name_title,
[data-bs-theme=dark] #id_pref_name_title {
	border-radius: 4px 0 0 4px;
	font-weight: normal;
	font-size: 85%;
	padding: 8px 12px;
	text-align: center;
}


/* #endregion */


/***************************************************************
-------------------Suite--------------------------------------
***************************************************************/
/* #region */

.suitebg {
	background-color: #E6F8F4;
}


.suitebgheight {
	min-height: 534px;
}

.suiteheader {
	border: 1px solid #76d7c4;
	background-color: #76d7c4;
	color: #FFFFFF;
}

.cfheader {
	background-image: url("/static/homepage/small_blue_bg.gif");
	background-color: #000000;
	background-position: center;
	background-repeat: repeat;
	color: #000000;
}

.bgModalSuite {
	background-color: #76d7c4;
}

.suitemodalhdr {
	border: 1px solid #939598;
	background-color: #939598;
	color: #FFFFFF;
	height: 46px;
}

.suitebtn {
	background-color: #939598;
	color: #FFFFFF;
	text-decoration: none;
}

.suitebtn:hover {
	background-color: #CFD0D1;
	color: #000000;
	text-decoration: none;
}


/* #endregion */


/***************************************************************
------------------FA Font Overides-----------------------------
***************************************************************/
/* #region */











.fa-triangle-exclamation {
	color: #DC3545;
}



.collapsed .fa-chevron-down.chevron-collapsed-right {
	transform: rotate(-90deg) !important;
}

.collapsed .fa-chevron-down.chevron-collapsed-right {
	transform: rotate(-90deg) !important;
}



.collapsed .fa-circle-up,
.hd-nav-toggle:not(.collapsed) .hd-nav-chevron,
.hd-topnav-toggle[aria-expanded="true"] .hd-topnav-caret,
.home-dash .hd-dept-member-name--toggle:not(.collapsed) .hd-dept-member-name-chev,
.home-dash .hd-cb-advanced-link[aria-expanded="true"] .hd-cb-advanced-caret,
.home-dash .hd-orgchart-toggle[aria-expanded="true"] .bi {
	transform: rotate(180deg);
}

.fa-trash-alt.on-blue {
	color: whitesmoke;
}

/* #endregion */


/***************************************************************
--------------Loading Screen--------------------------------
***************************************************************/
/* #region */
#content-container.loading,
.loading_screen.loading,
body:has(.note-editor.fullscreen) {
	overflow: hidden;
}

#content-container.loading > .overlay,
.loading_screen.loading > .overlay,
#content-container.loading > .backdrop,
.loading_screen.loading > .backdrop,
.dropdown-submenu .dropdown-menu.show,
.table-hover thead,
.table-hover tbody,
.table-hover tr,
.table-hover td,
.table-hover th,
.hd-topbar .hd-brand img,
.hd-topnav-brand img,
.hd-topnav-submenu > .dropdown-menu.show,
.hd-user-menu .hd-topnav-submenu:hover > .dropdown-menu,
.hd-user-menu .hd-topnav-submenu:focus-within > .dropdown-menu,
.hd-user-avatar,
.home-dash .hd-dept-refs-panel.is-active,
.home-dash .hd-qe-list-item,
.home-dash .hd-qed-list-item,
.home-dash .hd-kl-pick-menu > li:hover > .hd-kl-pick-submenu,
.home-dash .hd-kl-pick-menu > li:focus-within > .hd-kl-pick-submenu,
.home-dash .hd-kl-pick-menu > li > .hd-kl-pick-submenu.show,
.home-dash .hd-cfg-toggle-row,
.home-dash .hd-cfg-branding .hd-field-help,
.home-dash .hd-stb-q-update-form,
.home-dash .hd-stb-q-survey-form {
	display: block;
}


.overlay {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	background: url("/static/ExxTend_People_Circle.png") center no-repeat;
	-webkit-animation: spin 2s linear infinite;
	/* Safari */
	animation: spin 2s linear infinite;
}

.backdrop {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 998;
	background: var(--hd-white-a25) center no-repeat;
}

a.nav-link.list_item {
	position: relative;
	z-index: 300;
}
	/* #endregion */

/***************************************************************
-----------------Procedure Checklist---------------------------
***************************************************************/
/* #region */
.sticky {
	position: fixed;
	z-index: 2;
	top: 0;
	width: 98.5%;
}

.sticky+.content {
	padding-top: 102px;
}

.dropdown-menu-center {
	left: 50% !important;
	right: auto !important;
	text-align: center !important;
	transform: translate(-50%, 0) !important;
}

.custom-radio-list,
#sortable-included-questions,
#sortable-excluded-questions {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.chkheader {
	background: #aeafb0;
	color: whitesmoke;
}

@media print {
	.pagebreak {
		page-break-before: always;
	}
}


.input_check.disabled_row {
	cursor: not-allowed;
}

tr.disabled_row,
tr.disabled_row:hover {
	background-color: rgb(233, 233, 233);
	color: rgb(163, 163, 163);
	cursor: not-allowed;
}

tr.disabled_row input,
tr.disabled_row i,
tr.disabled_row a,
.pointer-events-none,
.home-dash .hd-cat-default-toggle .bi,
.home-dash .hd-cat-default-radio .bi {
	pointer-events: none;
}

tr.disabled_row input[type=checkbox] {
	opacity: .5;
}


.trow:hover {
	background-color: rgb(240, 240, 240);
}

.trowalt {
	background-color: rgb(245, 245, 245);
}

.trowalt:hover {
	background-color: rgb(230, 230, 230);
}

.text-disabled,
.text-disabled:hover {
	color: rgb(163, 163, 163);
	text-decoration-line: line-through;
	cursor: not-allowed;
	pointer-events: none;
}

.lidisabled {
	pointer-events: none !important;
	opacity: 0.6 !important;
}


.alt3:hover:nth-of-type(odd),
.alt3:hover:nth-of-type(even) {
	background-color: #F2F2F2;
	font-weight: bold;
}


/* #endregion */


/***************************************************************
-------------------NavBar----------------------------------
***************************************************************/
/* #region */
.welcome-name, 
#documentation-page-icon, 
.notification-inbox-icon, 
#bookmark-page-icon, 
#notification-inbox-icon, 
#owly-chat, 
#user-profile 
{
margin-left: 10px;
}

.navbar-brand,
.openbtn 
{
    margin-right: 10px;
}

.tab .nav-tabs {
	border: none;
	border-bottom: 0px solid #ff8c1a;
	margin: 0px;
	height: 25px;
}

.tab .nav-tabs li a {
	padding: 5px 20px;
	margin: 0px 7px -1px 0px;
	font-size: 72%;
	font-weight: 600;
	color: #293241;
	text-transform: uppercase;
	border: 2px solid #ff8c1a;
	border-radius: 5px 5px 0 0;
	z-index: 1;
	position: relative;
	background-color: #ffffff;
}

.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a {
	background-color: #ff8c1a;
	color: black;
	border: 2px solid #ff8c1a;
	border-bottom: 0px solid transparent;
}

.tab .nav-tabs li a:before {
	content: "";
	display: block;
	height: 2px;
	background: #ff8c1a;
	position: absolute;
	bottom: -2px;
	left: 0px;
	right: 0px;
	transform: scaleX(0);
	transition: all 0.3s ease-in-out 0s;
}

.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before,
.home-dash .hd-tile:hover::after,
.home-dash .hd-tile:focus-visible::after {
	transform: scaleX(1);
}

.tab .tab-content {
	padding: 10px;
	font-size: 120%;
	color: #6f6f6f;
	line-height: 30px;
	letter-spacing: 1px;
	position: relative;
}

@media only screen and (max-width: 479px) {
	.tab .nav-tabs {
		border: none;
	}

	.tab .nav-tabs li {
		width: 100%;
		text-align: center;
		margin-bottom: 15px;
	}

	.tab .nav-tabs li a {
		margin: 0;
		border-bottom: 0px solid transparent;
	}

	.tab .nav-tabs li a:before {
		content: "";
		width: 100%;
		height: 2px;
		background: #079fc9;
		position: absolute;
		bottom: -2px;
		left: 0px;
	}
}

.row .no-gutter [class*='col-']:not(:first-child),
.row .no-gutter [class*='col-']:not(:last-child) {
	padding-right: 0;
	padding-left: 0;
}

.row .no-gutter,
.home-dash .hd-gf-row {
	margin-left: 0;
	margin-right: 0;
}

.defaultbox {
	overflow: auto;
	font-size: 90%;
}


.card-spacing {
    margin-bottom: 15px;
}


.mynavbtn {
	border: 2px solid #76d7c4;
	background-color: #ffffff;
	color: #000000;
	margin-right: 4px;
	text-decoration: none;
	min-width: 120px;
	text-align: center;
}

a.mynavbtn:hover,
.mynavbtn.hover,
.mynavbtn.active,
.mynavbtn.visited {
	min-width: 120px;
	border: 2px solid #76d7c4;
	background-color: #76d7c4;
	color: #000000;
	text-decoration: underline;
	outline: none;
}

.navbar-light .navbar-toggler {
	background-color: #93B9D9;
}


@media (max-width: 499px) {
    .hide-on-mobile-menu  {
        display: none !important;
    }

    .show-on-mobile-menu  {
        display: block !important;
    }
}

@media (min-width: 500px) {

  .show-on-mobile-menu {
    display: none !important;
  }

}

@media (max-width: 1299px) {
    .hide-at-1300 {
        display: none !important;
    }

    .show-at-1300 {
        display: block !important;
    }
}

@media (min-width: 1300px) {
    .show-at-1300 {
        display: none !important;
    }

    
}


/* Question text container responsive fixes */
.question-text-container {
    margin-bottom: 2rem;
    max-width: 100%;
    overflow: visible;
}

/* Question type badge — printed above the question so the learner knows
   how to answer (single choice, all that apply, etc.). */
.question-type {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .65rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--hd-blue-a06);
    color: var(--hd-blue);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.question-text-container .question-text {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-height: none;
    padding: 16px 24px;
    display: block;
}

/* Specific fixes for matching questions */
.matching-question .question-text {
    min-height: auto;
    max-height: 200px; /* Reasonable height for longer questions */
    overflow-y: auto; /* Show scrollbar only when needed */
    scrollbar-width: thin;
    scrollbar-color: var(--hd-white-a80) var(--hd-white-a18);
}


.matching-question .question-text::-webkit-scrollbar-track {
    background: var(--hd-white-a12);
    border-radius: 4px;
}

.matching-question .question-text::-webkit-scrollbar-thumb {
    background: var(--hd-white-a50);
    border-radius: 4px;
    border: 1px solid var(--hd-white-a18);
}

.matching-question .question-text::-webkit-scrollbar-thumb:hover {
    background: var(--hd-white-a65);
}

/* Question instruction text */
.question-instruction {
    padding: 8px 24px 16px;
    font-style: italic;
    opacity: 0.9;
}

/* Ensure drag and drop functionality works properly */
.matching-container *,
.pointer-events-auto {
    pointer-events: auto;
}

.matching-answer-item {
    cursor: grab !important;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
    position: relative;
    z-index: 10;
}

.matching-answer-item:hover {
    cursor: grab !important;
}

.matching-answer-item:active {
    cursor: grabbing !important;
}

.matching-answer-item[draggable="true"] {
    -webkit-user-drag: element;
    -khtml-user-drag: element;
    -moz-user-drag: element;
    -o-user-drag: element;
    cursor: grab !important;
}

.match-area {
    pointer-events: auto !important;
    min-height: 60px;
    transition: all 0.2s ease;
    position: relative;
}

.match-area.drag-over {
    background-color: rgba(102, 126, 234, 0.1) !important;
    border-color: #667eea !important;
    transform: scale(1.02);
}

/* Fix any potential overlay issues */
.matching-layout,
.matching-prompts,
.crm-contact-activity-log .timeline-content,
.hd-hero > *,
.hd-cs-body > * {
    position: relative;
    z-index: 1;
}

.matching-answers {
    position: relative;
    z-index: 2;
}


/* Fix sidebar layout issues */
.sidebar #UserMenu {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.sidebar .position-relative,
.home-dash .hd-field-toggle .hd-check,
.home-dash .hd-wsch-procedure-item .hd-check,
.home-dash .hd-kei-employee-switcher,
.home-dash .hd-kei-resource-item .hd-check,
.home-dash .hd-perm-item-check,
.home-dash .hd-task-tabnav .nav-item {
  flex-shrink: 0;
}

.sidebar .sidebarHeader {
  padding: 8px 16px 8px 32px !important;
  line-height: 1.4;
  word-wrap: break-word;
  clear: both;
  margin-top: 0.5rem;
}

.sidebar .sidebarHeader p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* Fix dropdown positioning in sidebar */
.sidebar .dropdown.float-end {
  position: relative;
  margin-bottom: 1rem;
}

/* Ensure proper spacing between sidebar elements */

.sidebar .spacer10 {
  margin-bottom: 1rem !important;
}

/* Fix avatar container in sidebar */
.sidebar .dropdown.dropstart a {
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


#user-signature .card-body {
    justify-content: start;
    height: 50px;
    padding-top: 2px;
    padding-bottom: 2px;
}



#user-signature .card-body img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}



/* #endregion */


/***************************************************************
----------MyDepartment Kra Lists--------------------------
***************************************************************/
/* #region */

.capsule div,
.capsule button {
	background-color: inherit;
	border-radius: 8px;
	border: none;
	padding: 0px 10px 0px 10px;
	cursor: pointer;
	text-align: left;
}


.capsule div.active {
	background-color: rgb(160, 160, 160);
}

.capsule div:hover,
.innerContent:hover {
	background-color: rgb(202, 202, 202);
}



.innerContent {
	border-radius: 8px;
	padding: 0px 10px 0px 10px;
}


.accordion-button {
	background: none;
	font-weight: bold;
}

.accordion-item,
.border-none {
	border: none;
}

.accordion-button:focus,
.home-dash .hd-pb-extras-body .hd-kb-acc,
.home-dash .hd-lp-accordion-toggle:focus {
	box-shadow: none;
}

.accordion-button:not(.collapsed) {
	color: rgb(0, 0, 0);
	background: none;
	/* background-color:rgb(255, 255, 255); */
	/* box-shadow:0 0 0 0.25rem rgba(73, 73, 73, 0.25); */
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
	background-image: none;
}


.coordinates-size {
	width: 300px;
	height: 200px;
}

.highlight {
	border: 1px solid #00B2E3;
	font-weight: bold;
	font-size: 45px;
	background-color: #00B2E3;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Safari */
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}
/* #endregion */


/***************************************************************
--------------------Report Styling--------------------
***************************************************************/
/* #region */

/* Screen Styles */
@media screen {
    .report-page-container {
        max-width: 8.5in;
        margin: 0 auto;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .report-download-section {
        background-color: #fff;
        padding: 15px 20px;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .report-download-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .report-print-info {
        font-size: 13px;
        color: #6c757d;
        display: flex;
        align-items: center;
        gap: 6px;
    }
}

@media print {
    .report-page-container {
        max-width: none;
        box-shadow: none;
        border-radius: 0;
    }
    .report-download-section {
        display: none;
    }
}

/* Common Report Styles */
.report-content {
    padding: 30px;
}

.report-header { 
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #000000;
}

[data-bs-theme=dark] .report-header {
    border-bottom-color: #76d7c4;
}

.report-title { 
    margin: 0 0 8px 0; 
    font-size: 28px;
    font-weight: 600;
    color: #000000;
}

[data-bs-theme=dark] .report-title,
[data-bs-theme=dark] .report-meta-value,
[data-bs-theme=dark] .report-no-data i,
[data-bs-theme=dark] .report-stat-value {
    color: #76d7c4;
}

.report-description { 
    margin: 0;
    font-size: 16px;
    color: #6c757d;
    font-style: italic;
}

.report-meta {
    background-color: #e4e5f1;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    border-left: 4px solid #000000;
}

[data-bs-theme=dark] .report-meta {
    background-color: #2b3035;
    border-left-color: #76d7c4;
}

.report-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.report-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.report-meta-label {
    font-weight: 600;
    color: #000000;
    min-width: 70px;
    font-size: 12px;
}

[data-bs-theme=dark] .report-meta-label {
    color: #ffffff;
}

.report-meta-value {
    color: var(--hd-blue);
    font-weight: 500;
    font-size: 12px;
}


/* Report Table Styles */
.report-table-container {
    margin-bottom: 20px;
}

.report-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 0;
    font-size: 14px;
}

.report-table th, 
.report-table td { 
    border: 1px solid #dee2e6; 
    padding: 12px 8px; 
    text-align: left; 
    vertical-align: top;
}

[data-bs-theme=dark] .report-table th,
[data-bs-theme=dark] .report-table td {
    border-color: #404140;
}

.report-table th { 
    background-color: #000000;
    font-weight: 600;
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

[data-bs-theme=dark] .report-table th {
    background-color: #033457;
}

.report-table tr:nth-child(even),
.crm-contact-detail .activity-item:hover,
.crm-contact-detail .deal-item:hover,
.crm-deal-detail .activity-item:hover,
.ticket-history-report .timeline-item:hover,
.bg-light-gray { 
    background-color: #f8f9fa; 
}

[data-bs-theme=dark] .report-table tr:nth-child(even),
[data-bs-theme=dark] .report-summary-stats {
    background-color: #2b3035;
}

.report-table tr:hover {
    background-color: #e9ecef;
}


/* Data formatting */
.report-table td[data-type="number"] {
    text-align: right;
    font-family: 'Courier New', monospace;
}

.report-table td[data-type="percentage"] {
    text-align: right;
    font-weight: 500;
}

.report-table td[data-type="date"],
.crm-company-detail .btn-group-sm,
.crm-customer-management .card-header.depthdr .btn {
    white-space: nowrap;
}

.report-no-data {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.report-no-data i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
    color: var(--hd-blue);
}


.report-summary-stats {
    margin-top: 20px;
    padding: 15px;
    background-color: #e4e5f1;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}


.report-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}


.report-stat-value,
.hd-user-menu-identity-company,
.home-dash .hd-kei-row.is-selected .hd-kei-task-link,
.hd-modal.hd-cl-preview-modal .hd-cl-preview-course-name {
    font-weight: 600;
    color: var(--hd-blue);
}


/* Mobile responsiveness for report sections */
@media (max-width: 768px) {
    .report-page-container {
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }
    
    .report-download-section {
        padding: 12px 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .report-print-info {
        width: 100%;
        font-size: 12px;
    }
    
    .report-download-buttons {
        width: 100%;
        justify-content: flex-start;
    }
    
    .report-download-buttons .btn {
        flex: 1;
        min-width: 70px;
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .report-content {
        padding: 20px 15px;
    }
    
    .report-meta-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .report-summary-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .report-table-container {
        overflow-x: auto;
    }
    
    .report-table {
        font-size: 12px;
    }
    
    .report-table th,
    .report-table td {
        padding: 8px 6px;
    }
}

@media (max-width: 576px) {
    .report-download-buttons,
    .report-search-container .input-group,
    .crm-activity-list .btn-group {
        flex-direction: column;
    }
    
    .report-download-buttons .btn {
        width: 100%;
    }
    
    .report-content {
        padding: 15px 10px;
    }
    
    .report-table {
        font-size: 11px;
    }
    
    .report-table th,
    .report-table td {
        padding: 6px 4px;
    }
}

/* Print specific page breaks */
@page {
    size: letter;
    margin: 0.75in;
}

@media print {
    .report-header,
    .report-table tr {
        page-break-inside: avoid;
    }
    
    .report-table {
        page-break-inside: auto;
    }
    
    
    .report-table thead {
        display: table-header-group;
    }
}

/* #endregion */

/* Report Builder Specific Styles - Extending main.css */
.report-item {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease-in-out;
}

.report-item:hover {
    background-color: #f8f9fa;
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.report-item.active {
    background-color: #007bff;
    color: white;
    border-left: 4px solid #0056b3;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.report-item.active small,
[data-bs-theme=dark] .traffic-log-table td .mainfont,
[data-bs-theme=dark] .traffic-log-table td,
[data-bs-theme=dark] .crm-activity-form .select2-container--bootstrap-5 .select2-selection__rendered,
.crm-contact-form-new .select2-container--bootstrap-5 .select2-results__option--highlighted .create-new-user-option {
    color: #ffffff !important;
}

.report-item.active .badge {
    background-color: #ffffff !important;
    color: #007bff !important;
}

.report-search-container {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

[data-bs-theme=dark] .report-search-container {
    border-bottom-color: #495057;
}

.filter-buttons .btn-sm,
.assignment-dashboard small,
.fs-075rem {
    font-size: 0.75rem;
}

.date-preset-container .form-select-sm,
.fs-0875rem {
    font-size: 0.875rem;
}

#report-form-container {
    min-height: 300px;
    position: relative;
    z-index: 2;
}


.no-results-found {
    transition: opacity 0.3s ease;
}

#scheduled-reports-list .card {
    border: 1px solid #e9ecef;
    transition: box-shadow 0.15s ease-in-out;
}

#scheduled-reports-list .card:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

[data-bs-theme=dark] #scheduled-reports-list .card {
    border-color: #495057;
}

#report-search {
    border-radius: 0.375rem 0 0 0.375rem;
}

#clear-search {
    border-radius: 0 0.375rem 0.375rem 0;
    border-left: none;
}

#app-filter {
    min-width: 150px;
}

.search-filter-container,
.date-range-container {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}


.date-preset-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

#date-range-preset, .date-preset {
    background-color: white;
    border: 1px solid #ced4da;
    transition: all 0.15s ease-in-out;
}


#custom-date-inputs {
    transition: all 0.3s ease-in-out;
}

#clear-filters {
    transition: all 0.15s ease-in-out;
}

#clear-filters:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

#no-results-message {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 2rem;
    border: 2px dashed #dee2e6;
}

/* Mobile responsiveness for report builder */
@media (max-width: 768px) {
    /* Fix alignment - ensure middle column matches left column padding on mobile */
    .col-md-3.ps-0 + .col-sm-6 {
        padding-left: 0 !important;
    }
    
    /* Remove right column padding as well for consistency */
    .col-md-3.ps-0 {
        padding-right: 0 !important;
    }
}

@media (max-width: 576px) {
    /* Additional mobile adjustments for very small screens */
    #report-form-container {
        min-height: 200px;
    }
    
    
    .report-download-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .report-download-buttons .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Ensure configuration box also has no left padding */
    .col-sm-6 .card {
        margin-left: 0;
    }
}

/* #endregion */

/***************************************************************
--------------------Multi-Select Dropdowns--------------------
***************************************************************/
/* #region */
/* Custom styles for multi-select dropdowns */

/* Enhance checkbox visibility */
.multi-select-dropdown input[type="checkbox"] {
    opacity: 1;
    position: static;
    margin-right: 8px;
    min-width: 16px;
    min-height: 16px;
    pointer-events: auto;
    cursor: pointer;
}

/* Make the checkboxes more noticeable when checked */
.multi-select-dropdown input[type="checkbox"]:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Keep dropdown open when interacting with its contents */

/* Style for the "Select All" item */
.multi-select-dropdown .select-all-item {
    border-bottom: 1px solid #dee2e6;
    font-weight: bold;
}

/* Style for the done button */
.multi-select-dropdown .dropdown-item-done button {
    color: #0d6efd;
    font-weight: bold;
    border-top: 1px solid #dee2e6;
    padding-top: 0.5rem;
    width: 100%;
    text-align: center;
}

/* Improve hover state */
.multi-select-dropdown .dropdown-item:hover {
    background-color: #6c757d;
    color: #000;
}

/* Highlight selected items */
.multi-select-dropdown .dropdown-item:has(input[type="checkbox"]:checked),
.multi-select-dropdown .badge {
    background-color: #0d6efd;
    color: white;
}

.multi-select-dropdown .dropdown-item:has(input[type="checkbox"]:checked):hover {
    background-color: #0b5ed7;
    color: white;
}

/* Badge styling */

/* Selected items display */
.selected-items {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
/* #endregion */


/***************************************************************
--------------------Ticket Management Styles--------------------
***************************************************************/
/* #region */

/* Theme-aware ticket status and priority colors */
:root {
    --ticket-status-open: #dc3545;
    --ticket-status-active: #fd7e14;
    --ticket-status-completed: #28a745;
    --ticket-status-hold: #6c757d;
    --ticket-priority-fast-track: #6f42c1;
    --ticket-priority-immediate: #dc3545;
    --ticket-priority-high: #fd7e14;
    --ticket-priority-medium: #007bff;
    --ticket-priority-low: #28a745;
    --ticket-priority-unknown: #6c757d;
}

[data-bs-theme="dark"] {
    --ticket-status-open: #ff6b7a;
    --ticket-status-active: #ffa726;
    --ticket-status-completed: #66bb6a;
    --ticket-status-hold: #90a4ae;
    --ticket-priority-fast-track: #ab47bc;
    --ticket-priority-immediate: #ef5350;
    --ticket-priority-high: #ff9800;
    --ticket-priority-medium: #42a5f5;
    --ticket-priority-low: #66bb6a;
    --ticket-priority-unknown: #90a4ae;
}

.ticket-status-open { color: var(--ticket-status-open); }
.ticket-status-active { color: var(--ticket-status-active); }
.ticket-status-completed { color: var(--ticket-status-completed); }
.ticket-status-hold { color: var(--ticket-status-hold); }

.ticket-priority-fast-track { color: var(--ticket-priority-fast-track); font-weight: bold; }
.ticket-priority-immediate { color: var(--ticket-priority-immediate); font-weight: bold; }
.ticket-priority-high { color: var(--ticket-priority-high); }
.ticket-priority-medium { color: var(--ticket-priority-medium); }
.ticket-priority-low { color: var(--ticket-priority-low); }
.ticket-priority-unknown { color: var(--ticket-priority-unknown); }

/* Ticket page header gradient */
.ticket-page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
}

[data-bs-theme="dark"] .ticket-page-header {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    border: 1px solid var(--bs-border-color);
}

/* Ticket row hover effects */
.ticket-row:hover {
    background-color: var(--bs-light-bg-subtle) !important;
    transition: background-color 0.15s ease-in-out;
}

[data-bs-theme="dark"] .ticket-row:hover {
    background-color: var(--bs-dark-bg-subtle) !important;
    transition: background-color 0.15s ease-in-out;
}

/* Ticket table text styling - only apply specific overrides where needed */
[data-bs-theme="dark"] .ticket-table tbody td a,
[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody td a {
    color: var(--bs-link-color) !important;
    text-decoration: none;
}

[data-bs-theme="dark"] .ticket-table tbody td a:hover,
[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody td a:hover {
    color: var(--bs-link-hover-color) !important;
    text-decoration: underline;
}

.ticket-table tbody td small.text-muted {
    opacity: 0.75;
}

/* Ticket table improvements - Fix table display issues */
.ticket-page-header ~ .card .table-hover,
.ticket-page-header ~ .card .table-hover thead,
.ticket-page-header ~ .card .table-hover tbody,
.ticket-page-header ~ .card .table-hover tr,
.ticket-page-header ~ .card .table-hover td,
.ticket-page-header ~ .card .table-hover th {
    display: revert !important;
}

.ticket-page-header ~ .card .table-hover tbody {
    height: auto !important;
    overflow-y: visible !important;
}

.ticket-page-header ~ .card .table-hover tbody td,
.ticket-page-header ~ .card .table-hover thead > tr > th,
.home-dash .hd-news-article .note-float-left,
.home-dash .hd-news-article .note-float-right,
.home-dash .hd-news-article [class*="float-"],
.home-dash .hd-news-article [style*="float"] {
    float: none !important;
}


/* Light theme table headers */
.ticket-page-header ~ .card .table thead th,
.ticket-table thead th {
    border-bottom: 2px solid var(--bs-border-color);
    font-weight: 600;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    text-align: left;
    background-color: var(--bs-gray-100);
    color: var(--bs-body-color);
}

/* Dark theme table headers - override Bootstrap table-light class */
[data-bs-theme="dark"] .ticket-page-header ~ .card .table thead th,
[data-bs-theme="dark"] .ticket-page-header ~ .card .table thead.table-light th,
[data-bs-theme="dark"] .ticket-table thead th {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* Table body cells */
.ticket-page-header ~ .card .table tbody td,
.ticket-table tbody td {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody td,
[data-bs-theme="dark"] .ticket-table tbody td,
.text-bs-body {
    color: var(--bs-body-color);
}

/* Dark mode table hover effects */
[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody tr:hover,
[data-bs-theme="dark"] .ticket-table tbody tr:hover {
    background-color: var(--bs-dark-bg-subtle) !important;
}

[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody tr:hover td,
[data-bs-theme="dark"] .ticket-table tbody tr:hover td,
.traffic-log-table.table-hover tbody tr:nth-of-type(odd),
.traffic-log-table.table-hover tbody tr:nth-of-type(even),
.traffic-log-table tbody,
.traffic-log-table tbody tr,
.traffic-log-table tbody tr td,
.traffic-log-table.alt1 tr:nth-child(odd),
.traffic-log-table.alt1 tr:nth-child(even),
.traffic-log-table .alt1:nth-of-type(odd),
.traffic-log-table .alt1:nth-of-type(even),
[data-bs-theme=dark] .traffic-log-modal .p-2,
[data-bs-theme=dark] .traffic-log-modal .g-2,
[data-bs-theme=dark] .traffic-log-modal .filter-controls,
[data-bs-theme=dark] .traffic-log-modal .filter-controls .row,
[data-bs-theme=dark] .traffic-log-modal .filter-controls .col-md-3,
[data-bs-theme=dark] .traffic-log-modal .filter-controls .col-md-2,
[data-bs-theme=dark] .traffic-log-modal .filter-controls .col-md-4 {
    background-color: transparent !important;
}

/* Dark mode table striped rows */
[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody tr:nth-child(odd),
[data-bs-theme="dark"] .ticket-table tbody tr:nth-child(odd),
[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody tr:nth-child(even),
[data-bs-theme="dark"] .ticket-table tbody tr:nth-child(even) {
    background-color: var(--hd-white-a06);
}


/* Dark mode link colors in table */


/* Dark mode small text styling */
[data-bs-theme="dark"] .ticket-page-header ~ .card .table tbody td small.text-muted,
[data-bs-theme="dark"] .ticket-table tbody td small.text-muted {
    color: var(--bs-secondary-color) !important;
    opacity: 0.85;
}

/* Dark mode badge styling in tables */
[data-bs-theme="dark"] .ticket-page-header ~ .card .table .badge,
[data-bs-theme="dark"] .ticket-table .badge {
    border: 1px solid var(--hd-white-a12);
}

/* Light mode badge styling fixes - ensure proper text contrast */
  .badge.bg-warning.text-dark,
  .badge.text-bg-warning.text-dark,
  [data-bs-theme="dark"] .badge.bg-warning.text-dark,
  [data-bs-theme="dark"] .badge.text-bg-warning.text-dark {
    color: #000 !important;
    background-color: #ffc107 !important;
}

/* Ensure all warning badges with text-dark class have proper contrast in light mode */
  .badge.bg-warning.text-dark,
  .badge.text-bg-warning.text-dark {
    color: #212529 !important;
    background-color: #ffc107 !important;
}

  .ticket-page-header ~ .card .table .badge.bg-warning.text-dark,
  .ticket-table .badge.bg-warning.text-dark {
    color: #000 !important;
    background-color: #ffc107 !important;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

/* Dark mode badge styling - ensure "In Development" has black text */

[data-bs-theme="dark"] .ticket-page-header ~ .card .table .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .ticket-table .badge.bg-warning.text-dark {
    color: #000 !important;
    background-color: #ffc107 !important;
    border: 1px solid var(--hd-white-a12);
}

/* Ticket filter card styling */
.ticket-filter-card {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .ticket-filter-card {
    box-shadow: 0 2px 4px var(--hd-white-a12);
}

/* Ticket action buttons */
.ticket-action-buttons .btn {
    margin-left: 0.5rem;
    border-radius: 6px;
    font-weight: 500;
}

/* Ticket note closed message */
.ticket-note-closed-message {
    background-color: var(--bs-light);
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary);
    font-size: 0.875rem;
    text-align: center;
    padding: 0.75rem 1rem;
}

[data-bs-theme="dark"] .ticket-note-closed-message {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

/* Bootstrap-based ticket table styling */
.hover-bg:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
}

[data-bs-theme="dark"] .hover-bg:hover {
    background-color: var(--hd-white-a12) !important;
}

.ticket-row {
    min-height: 45px;
}

/* Mobile responsiveness for ticket tables */
@media (max-width: 768px) {
    .d-md-block,
    .ticket-dashboard .row.border-bottom.text-dark.fw600,
    .ticket-dashboard .row > .col-2:nth-child(5),
    .ticket-dashboard .row > .col-1:nth-child(6) {
        display: none !important;
    }
    /* Dashboard specific mobile styles */
    .ticket-dashboard .col-6,
    .contractor-industry-builder .industry-list-item,
    .crm-activity-list h6,
    .crm-activity-list .h6,
    .crm-contact-list h6,
    .crm-contact-list .h6,
    #editprofile .card-header {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .d-sm-block,
    .ticket-dashboard .row > .col-2:nth-child(4),
    .ticket-dashboard .row > .col-2:last-child {
        display: none !important;
    }
}

/* #endregion */


/* Enhanced dropdown submenu support */

.dropdown-submenu .dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1000;
}


/* Ensure proper positioning for different screen sizes */
@media (min-width: 768px) {
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: 0;
        transform: translateY(0);
    }
    
    .dropdown-submenu.dropstart .dropdown-menu {
        top: 0;
        right: 100%;
        left: auto;
        margin-top: 0;
        margin-right: 2px;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .dropdown-submenu .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
        padding-left: 20px;
    }
}

/* Improve submenu arrow visibility */
.dropdown-submenu > .dropdown-item::after {
    border-left-color: #6c757d;
}

.dropdown-submenu > .dropdown-item:hover::after {
    border-left-color: #495057;
}

.dropdown-submenu.dropstart > .dropdown-item::after {
    border-right-color: #6c757d;
}

.dropdown-submenu.dropstart > .dropdown-item:hover::after {
    border-right-color: #495057;
}

/* suite-color-{app}-{item_type} */

.small_button {
	padding: .25rem;
	font-size: .75rem;
}

.rounded-collapsed:has(.collapsed) {
	border-radius: calc(.375rem - 1px) !important;
}

#page-container {
	position: relative;
	min-height: 100vh;
}

.list-group .active {
	color: #000000;
	background-color: #00fcc5;
	border: 1px solid #DFDFDF;
}

.myrow {
	background-color: #6C757D;
}

a.link,
a.link:visited,
a.link:active {
	color: #212529;
}

a.link:hover {
	color: #212529;
	text-decoration: underline;
}

a:hover,
a:focus {
	text-decoration: none;
}

.label {
	color: #ffffff;
	padding: 8px;
	font-family: Arial;
	display: inline-block;
}

#u_id {
	list-style: none;
	width: 100%;
}

.truncate {
	width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate2 {
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate3 {
	width: 500px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate4,
.crm-dashboard-table th,
.crm-dashboard-table td,
.home-dash .hd-lic-app-link span,
.hd-cs-header-title span,
.home-dash .hd-kb-obs-pill-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.truncate:hover {
	overflow: visible;
	white-space: normal;
	height: auto;
	cursor: pointer;
}

.truncate3:active,
.home-dash .hd-kei-panel,
.home-dash .hd-cl-toolbar-panel .hd-panel-head,
.home-dash .hd-cl-toolbar-panel .hd-panel-body,
.home-dash:has(.hd-grp) .hd-hero,
.home-dash .hd-eq-tasks-panel .hd-panel-body,
.home-dash .hd-news-form-panel .hd-panel-body,
.home-dash .hd-news-article-field,
.home-dash .hd-gb-related-panel .hd-panel-body,
.home-dash .hd-kb-list-panel .hd-panel-body,
.home-dash .hd-kb-obs-panel .hd-panel-body,
.home-dash .hd-tb-list-panel .hd-panel-body,
.home-dash .hd-kb-acc--experts,
.home-dash .hd-kb-acc--coaches,
.home-dash .hd-pb-step-list-panel .hd-panel-body,
.home-dash .hd-ob-panel--questions {
	overflow: visible;
}

.overflow-ellipsis {
	text-overflow: ellipsis !important;
	white-space: nowrap;
	overflow: hidden;
}



.spacer30 {
	height: 38px;
}



.badge-light {
	background-color: #E8E8E8;
}

[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

.loginhdr {
	color: #8B8C8E;
}


.accountheader1 {
	background-color: #F6F448;
	color: #000000;
}

.accountheader2 {
	background-color: #A33D3D;
	color: #FFFFFF;
	font-weight: bold;
}

.accountbody {
	background-color: #C0C0C0;
	font-size: 90%;
	color: #000000;
	padding-top: 10px;
}

.createbg {
	background-image: url("../course_on_laptop.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.alt1 {
	background-color: #FFFFFF;
	cursor: default;
}



.alt2:hover {
	background-color: #eaedf3;
}


.table-hover tbody {
	height: 330px;
	overflow-y: auto;
	width: 100%;
}


.table-hover tbody td,
.table-hover thead>tr>th {
	float: left;
	border-bottom-width: 0;
}

.tsksrcbg {
	background-color: #D8E5F8;
}

.mynavbtn3 {
	border: 2px solid var(--hd-danger);
	background-color: #FFFFFF;
	color: #000000;
	margin-right: 4px;
	text-decoration: none;
	min-width: 120px;
	text-align: center;
}

a.mynavbtn3:hover,
.mynavbtn3.hover,
.mynavbtn3.active,
.mynavbtn3.visited {
	min-width: 120px;
	border: 2px solid var(--hd-danger);
	background-color: var(--hd-danger);
	color: #FFFFFF;
	text-decoration: underline;
	outline: none;
}

.productsearchheader {
	background-color: #F87E7E;
	color: #000000;
}

.productsrcbg {
	background-color: #F8B8B8;
	color: #FFFFFF;
}

.tskreadonly {
	border: 1px solid #CED4DA;
	background-color: #FFFFFF;
	border-radius: 0px 2px 2px 0px;
}

.tskdscreadonly {
	border: 1px solid #CED4DA;
	background-color: #FFFFFF;
	border-radius: 0px 0px 2px 2px;
	min-height: 140px;
}

.tskeditbtn {
	padding: 0px;
	margin: 0px;
	border: 2px solid #E16F09;
	background-color: #FFE6CC;
	color: #000000;
	text-decoration: none;
	text-align: center;
	min-width: 60px;
	height: 24px;
	font-size: 90%;
}

.tskeditbtn:hover {
	padding: 0px;
	margin: 0px;
	border: 2px solid #E16F09;
	background-color: #A33D3D;
	color: #FFFFFF;
	text-decoration: underline;
	text-align: center;
	min-width: 60px;
	height: 24px;
	font-size: 90%;
}


.font-homepage {
	color: white;
	text-shadow: 0.2px 0.3px 0.3px black;
}

.results,
.raise_element {
	position: absolute;
	z-index: 1000;
}

.docheader {
	background-color: #42B4E6;
	color: #FFFFFF;
}

.docmidbar {
	background-color: #E8EFF2;
	color: #000000;
}

[data-bs-theme=dark] .docmidbar {
	background-color: #939393;
	color: #000000;
}

.cellbg {
	background-color: #E9ECEF;
}

.labelbtn {
	min-width: 68px;
}

.minitxt {
	font-size: .80em;
	font-weight: normal;
	color: #6C757D;
}

.curr_header {
	background-color: #E3ECF6;
	font-weight: bold;
}

.warning {
	color: #C00000;
}



@media all and (min-width: 992px) {
	.dropdown-menu li {
		position: relative;
	}

	.nav-item .submenu {
		display: none;
		position: absolute;
		left: 100%;
		top: -7px;
	}

	.nav-item .submenu-left {
		right: 100%;
		left: auto;
	}

	.dropdown-menu>li:hover {
		background-color: #f1f1f1
	}

	.dropdown-menu>li:hover>.submenu {
		display: block;
	}

	.dropdown-menu>li:hover>.submenu2 {
		display: block;
		position: absolute;
		top: 0px;
		left: 145px;
	}


}

@media all and (min-height: 992px) {
	.maincard2 {
		height: 300px;
	}

	#dept-members {
		height: 600px;
	}

}

/* ============ desktop view .end// ============ */

.item_add, .edit_type-10, .edit_type-12{
	background-color:#008000;
}

.item_delete_remove {
	font-style: italic;
	background-color: #f44336;
}

.item_delete_remove_no_line {
	border-color: #f44336;
}

.strikethrough,
.home-dash .hd-kb-list-row--remove .hd-kb-list-name {
	text-decoration: line-through;
}

.item_move,
.edit_type-14 {
	font-style: italic;
	border-color: #F5E5B5;
}

.item_pending {
	font-style: italic;
	border-color: #FFFF40;
}

.dimactivelink {
	color: #93BDFD;
}


.borders {
	border: 1px solid #000000;
	border-radius: 3px !important;
}

.modal-preview {
	width: 570px;
}

.icon-rotate-padding {
	padding: 0.20em;
}

.icon-trash-padding,
.icon-plus-square-padding {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-right: 0.3em;
	padding-left: 0.3em;
}


.icon-plus-circle-padding,
.icon-edit-padding {
	padding: 0.25em;
}

.clickable:hover {
	text-decoration: underline;
	background-color: rgba(123, 202, 255, 0.729);
	border-radius: 3px;
	cursor: pointer;
	transition: 0.2s;
}

.transform_inner {
	position: absolute;
	top: 50%;
	left: 14px;
}

.transform_me {
	font-weight: normal;
	transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

.select-toggle:not(:has(input:checked)) .radio-grey-out {
	opacity: .75;
}

.site-search-modal-body {
	overflow-y: auto;
	max-height: 70vh;
	min-height: 400px;
}

#suite-search-modal .modal-dialog {
	max-height: 85vh;
}

#suite-search-modal .modal-content {
	height: auto;
	min-height: 500px;
}

#suite-search-modal .search-container {
	position: static !important;
	max-height: none !important;
	display: block !important;
}

.overflow-y-initial {
	overflow-y: initial;
}

/* .imageTarget {
	position: absolute;
	top: 20px;
	right: 90px;
} */

/* .imgage-target-tools {
	float: left;
	margin-left: 20px;
	margin-bottom: 120px;
} */

.search_header {
	background-color: #055086;
	height: 40px;
}

.submenu-dropleft {
	top: 0% !important;
	left: auto !important;
	right: 100% !important;
}

.wrapper-media {
	height: 120px;
	width: 100%;
	display: flex;
	gap: 20px;
}

.box-media img {
	width: 120px;
	height: 100%;
	object-fit: cover;
	transition: all .2s ease;
	vertical-align: middle;
}

.lang-fonts {
	font-family: Arial, Helvetica, sans-serif;
}

.media-content {
	height: 100%;
	width: 100%;
	object-fit: contain;
	max-width: 100vh;
	max-height: 80vh;
}


.img-container,
.reports-scheduled-report-form #user-selection-dropdown {
    max-width: 100%;
}

.img-container img,
.object-fit-cover {
    object-fit: cover;
}

.img-thumbnail {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .5s ease;
	backface-visibility: hidden;
}

.middle-media {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}

.box-media:hover .img-thumbnail {
	opacity: 0.15;
	background-color: white;
}



.instruction_thumb:hover {
	border: thin solid #405840;
	transition: ease-in-out .1s;
}

.selected_instruction_thumb {
	border-color: #405840;
}



/* for anything using sticky, so that side nav bar goes over it */
.sticky-z-index,
#jPolygon {
	z-index: 0;
}
/* #endregion */


/***************************************************************
-----------------------Summernote Styles-----------------------
***************************************************************/

/* Frame — sits inside whatever wrapper the form provides. Matches the
   suite's field chrome: 1px line border, sm-radius, no shadow.
   IMPORTANT: overflow MUST be visible so dropdown menus can escape
   the frame's bounds. */
.note-editor.note-frame,
.note-editor.note-airframe {
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface, #fff);
	box-shadow: none;
	overflow: visible;
}
.note-editor.note-frame:focus-within {
	border-color: var(--hd-blue);
	box-shadow: 0 0 0 3px var(--hd-blue-a12);
}

/* Fullscreen mode — Summernote adds .fullscreen to .note-editor and
   covers the viewport. We need a solid background and a high z-index
   so the rest of the page doesn't show through. */
.note-editor.note-frame.fullscreen,
.note-editor.fullscreen {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 1040;
	background: var(--hd-surface, #fff) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: column !important;
}
.note-editor.fullscreen .note-editing-area {
	background: var(--hd-surface, #fff) !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}
.note-editor.fullscreen .note-editable {
	background: var(--hd-surface, #fff) !important;
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
}
/* Prevent body scroll when in fullscreen so dual-scrollbars don't appear */

/* Toolbar — tinted strip with a single bottom border, matches .hd-panel-head.
   Round the top corners so the frame's border-radius isn't hidden by the
   tinted background. Even spacing: each button has its own margin so the
   visual gaps are consistent regardless of group boundaries. */
.note-editor .note-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	padding: 6px 8px;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
	border-top-left-radius: calc(var(--hd-radius-sm, 8px) - 1px);
	border-top-right-radius: calc(var(--hd-radius-sm, 8px) - 1px);
}

/* Button groups — each is a pill of buttons. We get even spacing with
   a single small gap between buttons (3px) and a slightly larger gap
   between groups (handled via the divider's margin). */
.note-editor .note-btn-group {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0;
	margin: 0 4px;
	position: relative;
}
.note-editor .note-btn-group:first-child { margin-left: 0; }
.note-editor .note-btn-group:last-child { margin-right: 0; }
.note-editor .note-btn-group + .note-btn-group {
	margin-left: 10px;
	padding-left: 10px;
}
.note-editor .note-btn-group + .note-btn-group::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--hd-line, #e8e8ec);
}

/* Buttons — flat 30x30 icons with subtle hover, blue active state.
   IMPORTANT: We exclude .note-color-btn (color swatches) and the modal
   primary buttons (.note-btn-primary, .note-link-btn, .note-image-btn,
   .note-video-btn) from these rules because they have their own styling. */
.note-editor .note-btn:not(.note-color-btn):not(.note-btn-primary),
.note-editor .note-btn.btn:not(.note-color-btn):not(.note-btn-primary),
.note-editor .note-btn.btn-default:not(.note-color-btn):not(.note-btn-primary),
.note-editor .note-btn.btn-light:not(.note-color-btn):not(.note-btn-primary) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 30px;
	height: 30px;
	padding: 0 8px !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	color: var(--hd-muted) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	box-shadow: none !important;
	background-image: none !important;
}
.note-editor .note-btn:not(.note-color-btn):not(.note-btn-primary):hover,
.note-editor .note-btn:not(.note-color-btn):not(.note-btn-primary):focus-visible,
.note-editor .note-btn.btn:not(.note-color-btn):not(.note-btn-primary):hover,
.note-editor .note-btn.btn-default:not(.note-color-btn):not(.note-btn-primary):hover,
.note-editor .note-btn.btn-light:not(.note-color-btn):not(.note-btn-primary):hover {
	background: var(--hd-surface, #fff) !important;
	border-color: var(--hd-line) !important;
	color: var(--hd-ink) !important;
	outline: none;
}
.note-editor .note-btn:not(.note-color-btn):not(.note-btn-primary).active,
.note-editor .note-btn:not(.note-color-btn):not(.note-btn-primary):active,
.note-editor .note-btn.btn:not(.note-color-btn):not(.note-btn-primary).active {
	background: var(--hd-blue-a12) !important;
	border-color: var(--hd-blue-a25) !important;
	color: var(--hd-blue) !important;
}
.note-editor .note-btn[disabled]:not(.note-color-btn):not(.note-btn-primary),
.note-editor .note-btn.disabled:not(.note-color-btn):not(.note-btn-primary) {
	opacity: .4;
	pointer-events: none;
}

/* Hide Bootstrap's pseudo-element caret (Summernote provides its own
   .note-icon-caret span, which we keep). */

/* Summernote's caret: muted color, fixed size so it doesn't overpower. */
.note-editor .note-btn .note-icon-caret {
	font-size: 9px;
	color: var(--hd-muted);
	margin-left: 1px;
}
.note-editor .note-btn:hover .note-icon-caret,
.note-editor .note-btn.active .note-icon-caret,
.suite-bookmark-items .hd-bm-card:hover .hd-bm-name,
.home-dash .hd-gt .tree-row.active .tree-toggle,
.hd-cs .hd-cs-action.hd-btn-ghost .bi,
.home-dash .hd-kb-list-link.hd-kb-list-link--static:hover,
.home-dash .hd-kb-list-link.hd-kb-list-link--static:focus-visible {
	color: inherit;
}

/* Color picker — cover all three swatch DOM patterns Summernote uses.
   Some configs use .note-color-row, others use .note-palette-rows with
   inline buttons, others use .note-color-palette directly. The CRITICAL
   thing is to NOT override the inline background-color Summernote sets
   on each swatch button (each <button style="background-color: #xxxx">). */
/* Recent color button — contains a single <i class="note-icon-font
   note-recent-color"> element which renders the "A" character via a
   font icon, with the current color shown as the icon's background-color
   (set via inline style by Summernote). Center the icon vertically to
   match the alignment of other toolbar icons. */
.note-editor .note-current-color-button .note-recent-color {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 2px;
	border: 0;
	border-radius: 2px;
	font-size: 14px;
	line-height: 1;
	vertical-align: middle;
}
.note-editor .note-color-palette {
	padding: 6px;
	display: block;
}
.note-editor .note-color-palette .note-color-row,
.note-editor .note-color-row {
	display: flex !important;
	gap: 1px;
	margin: 0;
}
/* Each swatch — IMPORTANT: only set width/height/border, never override
   background. The inline style="background-color: #xxxxxx" Summernote
   adds to each button needs to win. */
.note-editor .note-color-palette .note-color-btn,
.note-editor .note-color-palette button.note-color-btn,
.note-editor .note-color-row .note-color-btn,
.note-editor .note-color-row button.note-color-btn {
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(0, 0, 0, .12) !important;
	border-radius: 2px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	cursor: pointer;
	background-image: none;
	box-shadow: none !important;
}
.note-editor .note-color-palette .note-color-btn:hover,
.note-editor .note-color-palette button.note-color-btn:hover,
.note-editor .note-color-row .note-color-btn:hover {
	border-color: var(--hd-blue) !important;
	border-width: 2px !important;
	transform: scale(1.15);
	z-index: 1;
	position: relative;
}
/* Palette title strip — keep on a single line */
.note-editor .note-palette-title {
	display: block;
	padding: 6px 10px 4px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	margin: 0 0 6px;
	white-space: nowrap;
	min-width: 180px;
}
/* The whole color dropdown container — make it wide enough so the
   "Background Color" / "Text Color" titles don't wrap. */
.note-editor .note-color .note-dropdown-menu {
	min-width: 200px;
}

/* Editor area — clean white surface, no inset borders or shadows */
.note-editor .note-editing-area {
	background: var(--hd-surface, #fff);
}
.note-editor .note-editable {
	padding: 14px 16px;
	background: var(--hd-surface, #fff);
	color: var(--hd-ink);
	font-size: 14px;
	line-height: 1.6;
	box-shadow: none;
	border: 0;
	min-height: 160px;
}
.note-editor .note-placeholder {
	padding: 14px 16px;
	color: var(--hd-muted);
	font-style: normal;
}

/* Statusbar (resize handle strip) — flatten and tint to match the toolbar */
.note-editor .note-statusbar {
	background: var(--hd-surface-2);
	border-top: 1px solid var(--hd-line);
	border-bottom-left-radius: calc(var(--hd-radius-sm, 8px) - 1px);
	border-bottom-right-radius: calc(var(--hd-radius-sm, 8px) - 1px);
	padding: 0;
}
.note-editor .note-statusbar .note-resizebar {
	height: 8px;
	border-top: 0;
	background: transparent;
	cursor: ns-resize;
}

/* Dropdowns / popovers / modals from Summernote.
   Critical: position: absolute + z-index high enough to escape the toolbar. */
.note-editor .note-dropdown-menu {
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-md, 0 8px 24px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05));
	color: var(--hd-ink);
	padding: 4px;
	min-width: 160px;
	z-index: 1050;
}
.note-popover .popover-content,
.note-modal-content {
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-sm, 0 2px 6px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04));
	color: var(--hd-ink);
}

/* Generic dropdown items */
.note-editor .note-dropdown-menu > .dropdown-item,
.note-editor .note-dropdown-menu > a,
.note-editor .note-dropdown-menu > li > a {
	display: block;
	padding: 6px 10px;
	color: var(--hd-ink);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.note-editor .note-dropdown-menu > .dropdown-item:hover,
.note-editor .note-dropdown-menu > a:hover,
.note-editor .note-dropdown-menu > li > a:hover,
.home-dash .hd-kl-pick-item:hover,
.home-dash .hd-kl-pick-item:focus-visible,
.home-dash .hd-kl-pick-subitem:hover,
.home-dash .hd-kl-pick-subitem:focus-visible,
.hd-login-password-toggle:hover,
.hd-login-password-toggle:focus-visible {
	background: var(--hd-surface-2);
	color: var(--hd-blue);
}
.note-editor .note-dropdown-menu > .dropdown-item.active,
.note-editor .note-dropdown-menu > a.active {
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	font-weight: 600;
}

/* Style dropdown — preserve heading sizes for preview but tighten line-height */
.note-editor .note-dropdown-menu .note-style-h1,
.note-editor .note-dropdown-menu h1 {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.note-editor .note-dropdown-menu .note-style-h2,
.note-editor .note-dropdown-menu h2 {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.note-editor .note-dropdown-menu .note-style-h3,
.note-editor .note-dropdown-menu h3 {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}
.note-editor .note-dropdown-menu .note-style-h4,
.note-editor .note-dropdown-menu h4,
.note-editor .note-dropdown-menu .note-style-h5,
.note-editor .note-dropdown-menu h5,
.note-editor .note-dropdown-menu .note-style-h6,
.note-editor .note-dropdown-menu h6 {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

/* Color reset / select buttons */
.note-editor .note-dropdown-menu .note-color-reset,
.note-editor .note-dropdown-menu .note-color-select,
.note-editor .note-dropdown-menu .note-color-select-btn {
	display: block;
	width: 100%;
	padding: 5px 8px !important;
	margin: 4px 0 !important;
	background: var(--hd-surface-2) !important;
	border: 1px solid var(--hd-line) !important;
	border-radius: 4px !important;
	color: var(--hd-ink) !important;
	font-size: 12px !important;
	text-align: center !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.note-editor .note-dropdown-menu .note-color-reset:hover,
.note-editor .note-dropdown-menu .note-color-select:hover,
.note-editor .note-dropdown-menu .note-color-select-btn:hover {
	background: var(--hd-surface, #fff) !important;
	color: var(--hd-blue) !important;
	border-color: var(--hd-blue-soft, #c2d2e3) !important;
}

/* Table picker dropdown — restore the highlighted-cells appearance.
   Summernote stacks two layers via CSS positioning:
     - .note-dimension-picker-unhighlighted (the faded grid, full size)
     - .note-dimension-picker-highlighted (the blue overlay, sized
       dynamically by JS as user moves their mouse — it's NOT full-size)
   Both layers must share the same coordinate origin so the highlight
   aligns with the grid cells underneath. */
.note-editor .note-dimension-picker {
	padding: 6px;
	position: relative;
}
.note-editor .note-dimension-picker-mousecatcher {
	width: 100px !important;
	height: 100px !important;
	cursor: pointer;
	z-index: 3;
}
.note-editor .note-dimension-picker-unhighlighted {
	width: 100px !important;
	height: 100px !important;
	z-index: 1;
	background-color: var(--hd-surface, #fff);
	background-image: linear-gradient(to right, var(--hd-line, #e8e8ec) 1px, transparent 1px),
		linear-gradient(to bottom, var(--hd-line, #e8e8ec) 1px, transparent 1px);
	background-size: 20px 20px;
	background-repeat: repeat;
}
.note-editor .note-dimension-picker-highlighted {
	/* Width/height set by JS per mouseover. Position inherits from the
	   parent's coordinate system — Summernote's JS positions this layer
	   correctly on its own, we just style its appearance. */
	z-index: 2;
	background-color: var(--hd-blue-a25);
	background-image: linear-gradient(to right, var(--hd-blue-a50) 1px, transparent 1px),
		linear-gradient(to bottom, var(--hd-blue-a50) 1px, transparent 1px);
	background-size: 20px 20px;
	background-repeat: repeat;
}
.note-editor .note-dimension-display {
	display: block;
	padding-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--hd-muted);
	text-align: center;
}

/* Modals (link dialog, image dialog, etc.) — full hd-modal treatment.
   Summernote modals use Bootstrap modal classes plus a .note-modal
   wrapper. The .note-modal IS the .modal so we need to suppress any
   double-border between .note-modal and .modal-content. */
.note-modal.modal {
	background: rgba(0, 0, 0, .35);
}
.note-modal .modal-dialog {
	max-width: 540px;
	margin: 1.75rem auto;
}
.note-modal .modal-content,
.note-modal-content {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hd-line) !important;
	border-radius: var(--hd-radius, 12px) !important;
	box-shadow: var(--hd-shadow-md, 0 10px 28px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05)) !important;
	background: var(--hd-surface, #fff) !important;
	overflow: visible;
	max-height: calc(100vh - 3.5rem);
}
/* The first child of .modal-content (header) needs its top corners
   rounded to match the parent, since we no longer clip with overflow.
   Same for the last child (footer or body, depending on Summernote
   markup variant) at the bottom. */
.note-modal .modal-content > *:first-child,
.note-modal-content > *:first-child {
	border-top-left-radius: calc(var(--hd-radius, 12px) - 1px);
	border-top-right-radius: calc(var(--hd-radius, 12px) - 1px);
}
.note-modal .modal-content > *:last-child,
.note-modal-content > *:last-child {
	border-bottom-left-radius: calc(var(--hd-radius, 12px) - 1px);
	border-bottom-right-radius: calc(var(--hd-radius, 12px) - 1px);
}
.note-modal .modal-header,
.note-modal-header,
.note-modal .note-modal-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	border-bottom: 1px solid var(--hd-line) !important;
	background: var(--hd-surface-2) !important;
	padding: .85rem 1.15rem !important;
	border-top-left-radius: calc(var(--hd-radius, 12px) - 1px);
	border-top-right-radius: calc(var(--hd-radius, 12px) - 1px);
}
.note-modal .modal-header .modal-title,
.note-modal .modal-header .note-modal-title,
.note-modal-header .note-modal-title {
	order: 1;
	flex: 1 1 auto;
	text-align: left;
}
.note-modal .modal-header .close,
.note-modal .modal-header .btn-close,
.note-modal-header .close,
.note-modal-header .btn-close,
.note-modal .note-modal-header .close {
	order: 2;
	flex: 0 0 auto;
}
.note-modal .modal-title,
.note-modal-title,
.note-modal .modal-header .modal-title,
.note-modal-header .modal-title,
.note-modal-header .note-modal-title,
.note-modal .note-modal-header .note-modal-title,
h4.note-modal-title {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--hd-ink) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-family: inherit !important;
}
.note-modal .modal-body,
.note-modal-body {
	padding: 1.25rem !important;
	background: var(--hd-surface, #fff) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	flex: 1 1 auto;
	min-height: 0;
}
/* Help modal — the JS-injected Close button (see scripts/summernote.js)
   removes Summernote's promotional links from the footer entirely and
   replaces them with a Close button. The fallback CSS rules below
   defensively hide the links in case the JS hasn't run yet. */
/* .note-modal-footer a[href*="summernote"],
.note-modal .note-modal-footer a[href*="summernote"] {
	display: none !important;
} */
/* Help / shortcut layout body — keyboard-shortcut list. Use a clean
   two-column layout so the wide table doesn't overflow horizontally. */
.note-modal .note-shortcut-layout,
.note-modal .note-help-list {
	width: 100%;
	border-collapse: collapse;
}
.note-modal .note-shortcut-layout td,
.note-modal .note-help-list td {
	padding: .25rem .35rem;
	font-size: .82rem;
	white-space: normal;
	word-break: break-word;
}
/* Summernote uses .note-modal-footer (NOT .modal-footer) for the
   modal's bottom action area. Style it as a proper footer strip. */
.note-modal .modal-footer,
.note-modal-footer,
.note-modal .note-modal-footer {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	border-top: 1px solid var(--hd-line) !important;
	padding: .85rem 1.15rem !important;
	background: var(--hd-surface-2) !important;
	border-bottom-left-radius: calc(var(--hd-radius, 12px) - 1px);
	border-bottom-right-radius: calc(var(--hd-radius, 12px) - 1px);
	min-height: 60px;
}
.note-modal .modal-footer,
.note-modal-footer {
	border-top: 1px solid var(--hd-line) !important;
	padding: .85rem 1.15rem !important;
	background: transparent !important;
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
}

/* Modal form fields styled like the rest of the suite */
.note-modal .form-control,
.note-modal .note-input,
.note-modal input[type="text"],
.note-modal input[type="url"],
.note-modal input[type="file"],
.note-modal .form-control-file {
	display: block !important;
	width: 100% !important;
	background: var(--hd-surface, #fff) !important;
	border: 1px solid var(--hd-line) !important;
	border-radius: var(--hd-radius-sm, 8px) !important;
	color: var(--hd-ink) !important;
	font-size: .9rem !important;
	padding: .55rem .75rem !important;
	height: auto !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.note-modal .form-control:focus,
.note-modal .note-input:focus,
.note-modal input[type="text"]:focus,
.note-modal input[type="url"]:focus,
.note-modal input[type="file"]:focus,
.home-dash .hd-news-article-editor > textarea:focus {
	border-color: var(--hd-blue) !important;
	box-shadow: 0 0 0 3px var(--hd-blue-a12) !important;
	outline: none !important;
}
/* File input — style the native "Choose files" button via the
   ::file-selector-button pseudo-element (Chrome/Edge/Firefox 82+) and
   ::-webkit-file-upload-button (older Safari fallback). The wrapper is
   styled by the rule above; this targets the native button inside. */
.note-modal input[type="file"] {
	padding: .35rem !important;
	cursor: pointer;
	font-family: inherit;
}
.note-modal input[type="file"]::file-selector-button {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0 .65rem 0 0;
	padding: .4rem .85rem;
	background: linear-gradient(135deg, #000000 0%, var(--hd-blue) 100%);
	border: 0;
	border-radius: var(--hd-radius-sm, 8px);
	color: #fff;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease;
}
.note-modal input[type="file"]::file-selector-button:hover,
.note-modal input[type="file"]::-webkit-file-upload-button:hover {
	filter: brightness(1.08);
}
.note-modal input[type="file"]::-webkit-file-upload-button {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0 .65rem 0 0;
	padding: .4rem .85rem;
	background: linear-gradient(135deg, #000000 0%, var(--hd-blue) 100%);
	border: 0;
	border-radius: var(--hd-radius-sm, 8px);
	color: #fff;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
}
.note-modal .form-label,
.note-modal label,
.note-modal .form-group label,
.note-modal .note-form-label {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	font-size: .72rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--hd-muted) !important;
	margin-bottom: .35rem !important;
}
/* Helper / hint text inside a label (e.g. supported services list on
   the Insert Video modal) should drop to its own line below the main
   label and render in normal sentence-case at smaller weight. */
.note-modal .form-label small,
.note-modal label small,
.note-modal .note-form-label small {
	display: block;
	margin-top: .15rem;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hd-muted);
}
.note-modal .form-group,
.home-dash .hd-dept-hero,
.home-dash .hd-app-overview-field,
.home-dash .hd-emp-hero,
.home-dash .hd-fd-hero,
.home-dash .hd-cb-info-panel,
.home-dash .hd-cb-licenses-panel,
.home-dash .hd-cb-applic-panel,
.home-dash .hd-lb-hero,
.home-dash .hd-rb-hero,
.home-dash .hd-crb-hero,
.home-dash .hd-ob-hero,
.home-dash .hd-teb-hero,
.home-dash .hd-lsb-hero,
.home-dash .hd-inb-hero,
.home-dash .hd-cpv-hero {
	margin-bottom: 1rem;
}
.note-modal .checkbox label,
.note-modal .form-check label {
	font-size: .85rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--hd-ink) !important;
	margin-left: .35rem !important;
	margin-bottom: 0 !important;
}
.note-modal .checkbox input[type="checkbox"],
.note-modal .form-check input[type="checkbox"] {
	margin-right: .35rem;
	accent-color: var(--hd-blue);
}
/* Summernote's Insert Link modal (and similar) uses a bare
   <label><input type="checkbox">text</label> with no wrapper class.
   The .note-modal label rule above forces flex-direction: column +
   uppercase eyebrow styling onto every label, which stacks the box
   above the text. Override here for the checkbox variant: row layout,
   normal sentence case, box left of text. */
.note-modal .note-modal-body label:has(> input[type="checkbox"]) {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: .5rem;
	margin: 0 0 .4rem !important;
	padding: 0 !important;
	font-size: .85rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	color: var(--hd-ink) !important;
	cursor: pointer;
}
.note-modal .note-modal-body label:has(> input[type="checkbox"]) > input[type="checkbox"] {
	margin: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--hd-blue);
}
.note-modal .note-modal-body label:has(> input[type="checkbox"]) + label:has(> input[type="checkbox"]) {
	margin-top: .15rem !important;
}
/* Help modal — Summernote's actual DOM is a flat list of:
     <div class="help-list-item"></div>  (empty, acts as row break)
     <label style="width:180px"><kbd>KEY</kbd></label>
     <span>description</span>
   The .note-modal label rule forces display: flex + column on every
   label, which makes the kbd label fill the row and push the span
   below. Override to inline-block so the inline width:180px is honored
   and label + span sit side-by-side, with help-list-item as the break. */
.note-modal .note-modal-body label:has(> kbd) {
	display: inline-block !important;
	flex-direction: initial !important;
	align-items: initial !important;
	width: 180px;
	margin: 0 .6rem .15rem 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: inherit !important;
	vertical-align: middle;
}
.note-modal .note-modal-body label:has(> kbd) + span {
	display: inline;
	font-size: .85rem;
	color: var(--hd-ink);
	vertical-align: middle;
}
.note-modal .note-modal-body .help-list-item {
	display: block;
	margin-top: .35rem;
}
.note-modal .note-modal-body .help-list-item:first-child,
.hd-jd-offcanvas-body .hd-panel:first-child,
.home-dash .hd-kl-tab-content,
.home-dash .hd-emp-mgr-filter-option .form-check-input.hd-check,
.home-dash .hd-emp-mgr-roster,
.home-dash .hd-grp-tab-panel,
.home-dash .hd-empform-toggle .hd-toggle-track,
.home-dash .hd-lst-overview-prose .hd-field-label:first-child,
.hd-modal .hd-ob-levels-list dt:first-child {
	margin-top: 0;
}

.note-modal .note-btn-primary,
.note-modal .btn-primary,
.note-modal .note-btn.note-btn-primary,
.note-modal button.note-btn-primary,
.note-modal input.note-btn-primary,
.note-modal input[type="button"].note-btn-primary,
.note-modal .note-link-btn,
.note-modal .note-image-btn,
.note-modal .note-video-btn,
.note-modal .note-help-close-btn,
.note-modal-footer .btn-primary,
.note-modal-footer .note-btn-primary,
.note-modal-footer input[type="button"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	background: linear-gradient(135deg, #000000 0%, var(--hd-blue) 100%) !important;
	background-image: linear-gradient(135deg, #000000 0%, var(--hd-blue) 100%) !important;
	border: 0 !important;
	color: #fff !important;
	border-radius: var(--hd-radius-sm, 8px) !important;
	padding: .55rem 1.1rem !important;
	font-weight: 600 !important;
	font-size: .85rem !important;
	line-height: 1.2 !important;
	box-shadow: 0 4px 12px var(--hd-blue-a25) !important;
	min-width: 90px;
	min-height: 36px;
	cursor: pointer;
	float: none !important;
	position: static !important;
	margin: 0 !important;
	transition: filter .15s ease, opacity .15s ease;
}
.note-modal .note-btn-primary:hover,
.note-modal .btn-primary:hover,
.note-modal .note-link-btn:hover,
.note-modal .note-image-btn:hover,
.note-modal .note-video-btn:hover,
.note-modal-footer input[type="button"]:hover {
	filter: brightness(1.08);
	color: #fff !important;
}
.note-modal .note-btn-primary:disabled,
.note-modal .btn-primary:disabled,
.note-modal .note-btn-primary.disabled,
.note-modal .btn-primary.disabled,
.note-modal .note-link-btn:disabled,
.note-modal .note-link-btn.disabled,
.note-modal .note-image-btn:disabled,
.note-modal .note-image-btn.disabled,
.note-modal .note-video-btn:disabled,
.note-modal .note-video-btn.disabled,
.note-modal-footer input[type="button"]:disabled,
.note-modal-footer input[type="button"].disabled {
	opacity: .7 !important;
	background: linear-gradient(135deg, #000000 0%, var(--hd-blue) 100%) !important;
	background-image: linear-gradient(135deg, #000000 0%, var(--hd-blue) 100%) !important;
	color: #fff !important;
	box-shadow: none !important;
	cursor: not-allowed;
}

/* Close button in modal header — match suite's hd-modal-close */
.note-modal .close,
.note-modal .btn-close,
.note-modal-header .close,
.note-modal-header .btn-close {
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--hd-muted);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.note-modal .close:hover,
.note-modal .btn-close:hover,
.note-modal-header .close:hover {
	background: var(--hd-surface-2);
	color: var(--hd-ink);
}
.note-modal .close .note-icon-close {
	font-size: 1rem;
	font-style: normal;
}

/* DARK MODE */
[data-bs-theme="dark"] .note-editor.note-frame,
[data-bs-theme="dark"] .note-editor.note-airframe {
	background: #1a1d22;
	border-color: var(--hd-white-a12);
}
[data-bs-theme="dark"] .note-editor .note-toolbar {
	background: #22262c;
	border-bottom-color: var(--hd-white-a12);
}
[data-bs-theme="dark"] .note-editor .note-btn-group + .note-btn-group::before {
	background: var(--hd-white-a12);
}
[data-bs-theme="dark"] .note-editor .note-btn:hover,
[data-bs-theme="dark"] .note-editor .note-btn:focus-visible {
	background: var(--hd-white-a06) !important;
	border-color: var(--hd-white-a18) !important;
	color: #fff !important;
}
[data-bs-theme="dark"] .note-editor .note-btn.active,
[data-bs-theme="dark"] .note-editor .note-btn:active {
	background: rgba(127, 177, 230, .18) !important;
	border-color: rgba(127, 177, 230, .45) !important;
	color: #7fb1e6 !important;
}
[data-bs-theme="dark"] .note-editor .note-btn .note-icon-caret {
	color: var(--hd-white-a50);
}

/* Editor area in dark mode — keep editable surface light for readability
   (typing on near-black is harsh) */
[data-bs-theme="dark"] .note-editor .note-editable {
	background: #f1f3f5;
	color: #212529;
}
[data-bs-theme="dark"] .note-editor .note-editable * {
	color: #212529 !important;
}
[data-bs-theme="dark"] .note-editor .note-placeholder,
.home-dash .hd-contact-item-title,
.home-dash .hd-perm-item.is-disabled .hd-perm-item-title,
.home-dash .hd-kra-foundation-empty .bi,
.home-dash .hd-licmgr-alloc-empty,
.home-dash .hd-emp-card.is-inactive .hd-emp-card-name,
.home-dash .hd-cb-lic-empty,
.home-dash .hd-tb-experts-search .hd-inline-search-input::placeholder,
.home-dash .hd-fb-search .hd-inline-search-input::placeholder,
.home-dash .hd-pb-search .hd-inline-search-input::placeholder,
.home-dash .hd-fb-coaches-search .hd-inline-search-input::placeholder,
.home-dash .hd-qb-search .hd-inline-search-input::placeholder,
.home-dash .hd-cl-muted,
.home-dash .hd-cr-muted,
.home-dash .hd-iss-search-input::placeholder,
.home-dash .hd-lst-plan-row.is-empty .hd-lst-plan-row-title .bi {
	color: var(--hd-muted);
}
[data-bs-theme="dark"] .note-editor .note-statusbar {
	background: #22262c;
	border-top-color: var(--hd-white-a12);
}

[data-bs-theme="dark"] .note-editor .note-dropdown-menu,
[data-bs-theme="dark"] .note-popover .popover-content,
[data-bs-theme="dark"] .note-modal-content {
	background: #22262c;
	border-color: var(--hd-white-a12);
	color: #f8f9fa;
}
[data-bs-theme="dark"] .note-editor .note-dropdown-menu > .dropdown-item:hover,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu > a:hover,
[data-bs-theme="dark"] .note-editor .note-dropdown-menu > li > a:hover {
	background: var(--hd-white-a06);
	color: #7fb1e6;
}
/* #endregion */




/***************************************************************
----------------------Documentation Styles----------------------
***************************************************************/

/* The documentation modal can be triggered from any page; rules here
   are scoped under #documentation-modal or .hd-doc-* so they can never
   leak to other modals or pages in the suite.
   Trigger anchor — the small info-circle icon button that opens the
   modal. */
.hd-doc-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hd-muted);
	cursor: pointer;
	transition: color .15s ease, background .15s ease;
	padding: .25rem;
	border-radius: var(--hd-radius-sm, 8px);
	text-decoration: none;
}
.hd-doc-trigger:hover,
.hd-doc-trigger:focus-visible {
	color: var(--hd-blue);
	background: var(--hd-blue-a06);
	outline: none;
	text-decoration: none;
}
.hd-doc-trigger .bi,
.hd-kl-delete-outcome-headline .bi,
.home-dash .hd-iss-orphan-action .bi { font-size: 1.05rem; }

/* Header action cluster — fullscreen toggle + close button, sit as
   flex-end children of .hd-modal-header. The buttons inherit the
   suite .hd-modal-close treatment (white-tint borders on the dark
   gradient header). */
.hd-doc-header-actions {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-left: auto;
	flex-shrink: 0;
}

/* Fullscreen-toggle button — same chrome as .hd-modal-close but
   distinguished by the icon. Both icons live inside the button; JS
   toggles d-none between them as the dialog flips between windowed
   and fullscreen. */
.hd-doc-fullscreen-toggle .bi,
.documentation-edit .edit-checkbox-icon,
.hd-modal .hd-linked-unlink .bi,
.home-dash .hd-ke-detail-source-link .bi,
.home-dash .hd-mfg-select-back .bi,
.hd-login-reset .bi,
.home-dash .hd-gb-related-remove .bi,
.home-dash .hd-kb-list-action .bi,
.home-dash .hd-su-section-title .bi,
.home-dash .hd-qb-detail-answer-label .bi { font-size: .9rem; }

/* Edit-toggle row — sits at the top of the body, holds the styled
   checkbox label. Reserves layout space (the row remains in the flow
   even in fullscreen so the toggle stays clickable beneath the header
   action cluster). */
.hd-doc-edit-row {
	display: flex;
	justify-content: flex-end;
	flex: 0 0 auto;
	overflow: visible;
	padding: .85rem 1.15rem 0;
	border-bottom: 0;
}

/* Edit-toggle wrapper — hidden checkbox + clickable label. Replaces
   the legacy bg-light/bs-primary hack. */
.documentation-edit {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.documentation-edit label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--hd-radius-sm, 8px);
	padding: .35rem .7rem;
	background: var(--hd-surface-2);
	color: var(--hd-blue);
	border: 1px solid var(--hd-line);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	user-select: none;
}
.documentation-edit label:hover,
.home-dash .hd-field-toggle:hover,
.home-dash .hd-wsch-procedure-item:hover,
.hd-modal.hd-grp-managers-modal .hd-grp-managers-option:hover,
.hd-modal.hd-grp-managers-modal .hd-grp-managers-option:has(.hd-check:checked),
.home-dash .hd-cpv-lesson-row.is-active {
	background: var(--hd-blue-a06);
	border-color: var(--hd-blue);
}.documentation-edit input[type="checkbox"]:checked + label,
.home-dash .hd-gmove-pos-option:has(input:checked) .hd-gmove-pos-check,
.home-dash .hd-jc-list-item.is-selected .hd-jc-list-num,
.home-dash .hd-kl-tabs .hd-kl-tab.nav-link.active {
	background: var(--hd-blue);
	color: #fff;
	border-color: var(--hd-blue);
}
.documentation-edit input[type="checkbox"]:focus-visible + label,
#home-bookmarks .hd-bm-action:focus-visible,
.hd-dept-add-btn:focus-visible,
.home-dash .hd-groupinfo-type input[type="checkbox"]:focus-visible + .hd-groupinfo-type-face,
.hd-btn:focus-visible,
.home-dash .hd-wsch-procedure-tile:has(.hd-wsch-procedure-check:focus-visible),
.hd-modal .hd-btn:focus-visible,
.hd-modal .hd-radio input[type="radio"]:focus-visible + .hd-radio-face {
	outline: 2px solid var(--hd-blue);
	outline-offset: 2px;
}

/* Legacy compatibility — preserve the exact bare-input zero-out the
   original template relied on so any third-party theme overrides
   keying on this id continue to behave predictably. */
#documentation-edit-checkbox {
	box-shadow: none;
	border: none;
	background: none;
	vertical-align: middle;
}

/* Presentation view — the rendered title + content. Claims the
   remaining flex space inside .modal-content so it can scroll
   internally without forcing a second scrollbar from a sibling. */
.hd-doc-present {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 1rem 1.25rem 1.25rem;
}
.hd-doc-title {
	margin: 0 0 .85rem;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--hd-ink);
}
.hd-doc-content,
.hd-modal .hd-faq-answer {
	color: var(--hd-ink);
	font-size: .95rem;
	line-height: 1.55;
}
.hd-doc-content p { margin: 0 0 .75rem; }
.hd-doc-content ul,
.hd-doc-content ol { margin: 0 0 .75rem; padding-left: 1.5rem; }
.hd-doc-content code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .88em;
	background: var(--hd-surface-2);
	padding: .1em .35em;
	border-radius: 4px;
}

/* Edit form — Summernote renders its own chrome inside .hd-doc-form-body
   so we only need spacing around the field block. The form itself
   is a flex column so the body region can scroll while the footer
   stays pinned to the bottom of the dialog. */
.hd-doc-form,
.home-dash .hd-groupinfo-desc .hd-panel-body,
.home-dash .hd-news-article-field,
.hd-lst-brainstorm-page #response-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.hd-doc-form-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hd-doc-form-actions {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .85rem 1.25rem 1rem;
	border-top: 1px solid var(--hd-line);
}

/* Empty state — non-admin user, no doc exists for this slug. */
.hd-doc-empty,
.home-dash .hd-feat-empty,
.home-dash .hd-licmgr-mgr-empty,
.home-dash .hd-empty.hd-licmgr-alloc-empty,
.home-dash .hd-prog-empty,
.home-dash .hd-eq-tasks-empty { padding: 2rem 1.25rem; }

/* Fullscreen mode — when the dialog has .modal-fullscreen toggled on
   by documentation.js, the suite-wide .hd-modal .modal-content
   max-height cap (calc(100vh - 3.5rem) !important) prevents the
   dialog from actually filling the viewport. Override here with
   matching specificity + !important so Bootstrap's
   .modal-fullscreen sizing wins. Also force white backgrounds at
   every layer so the dark backdrop never bleeds through. Migrated
   from the inline <style> block in the template. */
#documentation-modal .modal-dialog.modal-fullscreen,
.traffic-log-modal-fullscreen-lg-down {
	max-width: none;
	width: 100vw;
	height: 100vh;
	margin: 0;
}
#documentation-modal .modal-fullscreen .modal-content {
	max-height: none !important;
	height: 100% !important;
	border-radius: 0;
}
#documentation-modal .modal-fullscreen .modal-content,
#documentation-modal .modal-fullscreen .modal-body,
#documentation-modal .modal-fullscreen #documentation-form,
#documentation-modal .modal-fullscreen #documentation-present,
body.reports-report-view .table,
.home-dash .hd-prog-stat:hover {
	background: #fff;
}

/* Dark theme — the existing legacy theme overrides used .documentation-edit *
   with !important, which overreached into every descendant. The new
   rules above already use suite tokens that respect the theme via
   their CSS variables, so no descendant-* rule is needed here. */
[data-bs-theme=dark] .hd-doc-trigger { color: var(--hd-muted, #9aa4b2); }
[data-bs-theme=dark] .hd-doc-trigger:hover,
[data-bs-theme=dark] .hd-doc-trigger:focus-visible {
	color: #e7ecf3;
	background: var(--hd-white-a06);
}
[data-bs-theme=dark] .documentation-edit label {
	background: #2b3035;
	color: #cbd5e1;
	border-color: #3a4250;
}
[data-bs-theme=dark] .documentation-edit input[type="checkbox"]:checked + label {
	background: #4a5568;
	color: #fff;
	border-color: #4a5568;
}
[data-bs-theme=dark] .hd-doc-title,
[data-bs-theme=dark] .hd-doc-content,
[data-bs-theme=dark] .hd-topbar .hd-hamburger,
[data-bs-theme=dark] .hd-topnav-menu-item,
[data-bs-theme=dark] .hd-search-link,
[data-bs-theme=dark] .hd-search-empty-title,
[data-bs-theme=dark] .hd-user-menu-identity-name,
[data-bs-theme=dark] .hd-user-menu-logout { color: #e7ecf3; }


/***************************************************************
--------------------Owly AI Chatbot Styles--------------------
***************************************************************/

/* Owly Chat Modal */
#owly-chat-modal .modal-content {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#owly-chat-modal .modal-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0056d3 100%);
    border-bottom: none;
    padding: 1rem 1.5rem;
}

[data-bs-theme=dark] #owly-chat-modal .modal-header {
    background: rgb(43, 48, 53) !important;
    border-bottom: 1px solid #495057;
}

#owly-chat-modal .modal-title {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Chat Messages Container */
#owly-chat-messages {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
	color: #000000;
}

/* Chat Mode Selection */
#owly-chat-modal .chat-mode-section {
    padding-top: 12px;
}

/* User Messages */
.owly-user-message {
    background-color: #183153;
    color: #fff;
    max-width: 60% !important;
    margin-left: auto;
    margin-right: 0;
    word-break: break-word;
}

/* AI Messages */
.owly-ai-message {
    background-color: #0d6efd;
    color: #fff !important;
    max-width: 60% !important;
    margin-right: auto;
    margin-left: 0;
    word-break: break-word;
}

/* Message Timestamps */
.owly-message-time {
    display: block;
    font-size: 0.75em;
    opacity: 0.6;
    margin-top: 2px;
}

/* Chat Input Area */
#owly-chat-modal .modal-body .border-top {
    border-color: #dee2e6 !important;
}

#owly-question-input {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#owly-question-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

#owly-send-btn {
    background: linear-gradient(135deg, #0d6efd 0%, #0056d3 100%);
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.15s ease-in-out;
}

#owly-send-btn:hover {
    background: linear-gradient(135deg, #0056d3 0%, #004bb5 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

#owly-send-btn:disabled {
    background: #6c757d;
    transform: none;
    box-shadow: none;
}

/* Typing Indicator */
#owly-typing-indicator {
    color: #6c757d;
    font-style: italic;
}

/* Chat Button in Navbar */
.owly-chat-button {
    border-radius: 50%;
	object-fit: cover;
	width: 100%;
	aspect-ratio: 1 / 1;
}


/* Owl Icon Styling */
.owly-icon {
    width: 50px !important;
    height: 50px !important;
    object-fit: Cover;
}

.owly-icon-header {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
}


[data-bs-theme=dark] .owly-icon {
    filter: brightness(1.1) contrast(1.1);
}

/***************************************************************
--------------------Dark Mode Owly Styles--------------------
***************************************************************/

[data-bs-theme=dark] #owly-chat-messages {
    background: linear-gradient(135deg, #2b3035 0%, #212529 100%);
	color: #FFFFFF;
}

[data-bs-theme=dark] .owly-ai-message {
    background-color: #303130 !important;
    border: 1px solid #444848 !important;
    color: #f8f9fa !important;
}

[data-bs-theme=dark] .owly-user-message {
    background: linear-gradient(135deg, #0d6efd 0%, #0056d3 100%) !important;
    color: white !important;
}

[data-bs-theme=dark] #owly-question-input {
    background-color: #343a40 !important;
    border: 1px solid #495057 !important;
    color: #f8f9fa !important;
}

[data-bs-theme=dark] #owly-question-input:focus {
    background-color: #343a40 !important;
    border-color: #0d6efd;
    color: #f8f9fa;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme=dark] #owly-question-input::placeholder,
[data-bs-theme=dark] #owly-typing-indicator,
[data-bs-theme=dark] .owly-message-time {
    color: #adb5bd;
}

[data-bs-theme=dark] #owly-chat-modal .modal-content {
    background-color: #212529;
    border: 1px solid #444848;
}

[data-bs-theme=dark] #owly-chat-modal .modal-body .border-top {
    border-color: #495057 !important;
    background-color: #212529;
}




/* AI Disclaimer Styles */
.owly-disclaimer {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
    font-weight: 600;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    line-height: 1.3;
}

[data-bs-theme=dark] .owly-disclaimer {
    color: var(--hd-white-a65);
    background-color: #1a1e23;
    border-left-color: rgb(43, 48, 53);
}


.label {
    color: white;
    padding: 8px;
    font-family: Arial;
    width: 100%;
    display: inline-block;
}

#u_id{ list-style:none; width:100%; }

.ipclass {
  font-family: Arial;
  font-size: 10pt;
  vertical-align: top;
}

.btn-small {
  border: 1px solid black;
  padding: 4px;
  height: 20px;
  width: 60px;
  float: right;
  margin-left: 5px;
  line-height: 10px;
  background-color: white;
  font-size: 10pt;
}

.btn-medium {
border: 1px solid black;
padding: 4px;
height: 25px;
width: 120px;
float: left;
margin-right: 15px;
line-height: 10px;
background-color: white;
font-size: 10pt;

}

.success {background-color: #4CAF50;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */
.other {background-color: #e7e7e7; color: black;} /* Gray */

/***************************************************************
--------------------Group Members Styles--------------------
***************************************************************/
/* #region */

/* Employee List Container Styles */
.employee-list-container {
    max-height: 500px; /* Adjust this value as needed */
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

/* Custom scrollbar styling for employee list */


.employee-list-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.employee-list-container::-webkit-scrollbar-thumb:hover,
.chat-thread::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Supervisor checkbox styling */
.supervisor-checkbox {
    margin: 0 auto;
    display: block;
    cursor: pointer;
}

/* Custom hover effect for supervisor checkbox */
.supervisor-checkbox:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Consistent spacing for user rows */
.user-row-container {
    min-height: 60px;
}

/* Add left padding to profile pictures in group members */
.user-row-container .flex-shrink-0:first-child {
    padding-left: 5px;
}

/* Enhanced tooltip styling for group members */
/* 
Must be unique class

.tooltip .tooltip-inner {
    background-color: #212529;
    color: #ffffff;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

.tooltip .tooltip-arrow::before {
    border-top-color: #212529;
} */

/* #endregion */

/* #region Assignment Dashboard Styles */
.assignment-dashboard .card {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	border: 1px solid rgba(0, 0, 0, 0.125);
}

.assignment-dashboard .card-body,
.crm-customer-management .card-header.depthdr,
.home-dash .hd-prog-groups-body {
	padding: 1rem;
}

.assignment-dashboard .bg-primary,
.ticket-badge-ticket_update {
	background-color: #007bff !important;
}

.assignment-dashboard .bg-success,
.ticket-badge-ticket_response {
	background-color: #28a745 !important;
}

.assignment-dashboard .bg-danger {
	background-color: #dc3545 !important;
}

.assignment-dashboard .bg-info,
.ticket-badge-call {
	background-color: #17a2b8 !important;
}

#assignmentChart {
	max-width: 100px;
	max-height: 100px;
}

.assignment-dashboard .card-body.py-2 {
	padding: 0.5rem 1rem !important;
}

.assignment-dashboard h4 {
	font-size: 1.5rem;
	font-weight: bold;
}

/* #endregion */

/***************************************************************
--------------------User Form Styling--------------------
***************************************************************/
/* #region */
.form-check-input {
	border-radius: 0.375rem !important;
	width: 1.2em !important;
	height: 1.2em !important;
	transform: scale(1.0);
}

.checkbox-container {
	display: flex !important;
	align-items: center !important;
	width: fit-content !important;
	gap: 0.5rem !important;
	justify-content: center !important;
}

.checkbox-container span,
.checkbox-container label {
	margin: 0 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	font-size: 0.875rem !important;
	font-weight: normal !important;
}

.checkbox-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 38px !important;
}
/* #endregion */

/***************************************************************
--------------------Customer Relations Module--------------------
***************************************************************/
/* #region */

/* Simple Search Autocomplete */

.cr-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 120px; /* Space for search button */
    z-index: 1000;
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.cr-search-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color, #e9ecef);
    color: var(--bs-body-color, #212529);
    transition: background-color 0.15s ease;
}


.cr-search-item:hover,
.cr-search-item.active,
[data-bs-theme="dark"] .cr-search-item:hover,
[data-bs-theme="dark"] .cr-search-item.active {
    background-color: var(--bs-primary, #007bff);
    color: white;
}

.cr-search-no-results {
    padding: 15px;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    font-style: italic;
}

/* Dark mode support */
[data-bs-theme="dark"] .cr-search-dropdown {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .cr-search-item {
    color: var(--bs-light, #f8f9fa);
    border-bottom-color: var(--bs-border-color, #495057);
}


[data-bs-theme="dark"] .cr-search-no-results {
    color: var(--bs-secondary, #6c757d);
}

/* #endregion */

/* #region Chat Bubble Styles for Message Threads */
.chat-thread {
  padding: 15px;
  max-height: 400px;
  overflow-y: auto;
  background: #f5f5f5;
  border-radius: 8px;
  margin: 0;
}

.chat-message-wrapper {
  display: flex;
  margin-bottom: 15px;
  clear: both;
  width: 100%;
}

.chat-message {
  max-width: 75%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.chat-message-received {
  align-self: flex-start;
  margin-right: auto;
  margin-left: 0;
}

.chat-message-sent {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}

.chat-bubble {
  position: relative;
  padding: 12px 16px;
  border-radius: 18px;
  word-break: break-word;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  margin-bottom: 4px;
  min-width: 0;
  overflow: visible;
}

/* Received messages (other person - left side, white/gray bubble) */
.chat-message-received .chat-bubble {
  background: #ffffff;
  color: #333;
  border: 1px solid #e1e5e9;
  border-bottom-left-radius: 6px;
}

/* Sent messages (current user - right side, blue bubble) */
.chat-message-sent .chat-bubble {
  background: #007bff;
  color: white;
  border-bottom-right-radius: 6px;
}

.chat-content {
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  width: 100%;
  overflow: visible;
  text-overflow: clip;
  display: block;
}

.chat-meta {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.7;
}

.chat-message-received .chat-meta,
.admin-text-muted {
  color: #666;
}


.chat-sender {
  font-weight: 500;
  margin-right: 8px;
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
}

.chat-time {
  font-style: italic;
  font-size: 10px;
}

/* Hide sender name for sent messages */

/* Remove default border from message content container when using chat bubbles */
.chat-container,
.home-dash .hd-wsch-inline-btn {
  border: none;
  padding: 0;
  background: transparent;
}

/* Adjust for single message display */
.single-message {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  line-height: 1.5;
}

/* Scrollbar styling for chat thread */
.chat-thread::-webkit-scrollbar,
.crm-contact-detail .activity-list::-webkit-scrollbar,
.crm-contact-detail .deals-list::-webkit-scrollbar,
.crm-customer-management .contact-list::-webkit-scrollbar,
.home-dash .hd-grp-members-list::-webkit-scrollbar {
  width: 6px;
}

.chat-thread::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.chat-thread::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .chat-message {
    max-width: 85%;
  }
  
  .chat-bubble {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .chat-meta {
    font-size: 0.7em;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .chat-thread {
    background: #2d3748;
  }
  
  .chat-message-received .chat-bubble {
    background: #4a5568;
    color: #e2e8f0;
    border: 1px solid #2d3748;
  }
  
  .chat-message-received .chat-meta {
    color: #a0aec0;
  }
  
  .chat-message-received .chat-sender {
    color: #cbd5e0;
  }
}

/* Dark theme class support (if your app uses a dark theme class) */
.dark .chat-thread,
[data-theme="dark"] .chat-thread,
body.dark .chat-thread {
  background: #2d3748;
}

.dark .chat-message-received .chat-bubble,
[data-theme="dark"] .chat-message-received .chat-bubble,
body.dark .chat-message-received .chat-bubble {
  background: #4a5568;
  color: #e2e8f0;
  border: 1px solid #2d3748;
}

.dark .chat-message-received .chat-meta,
[data-theme="dark"] .chat-message-received .chat-meta,
body.dark .chat-message-received .chat-meta {
  color: #a0aec0;
}

.dark .chat-message-received .chat-sender,
[data-theme="dark"] .chat-message-received .chat-sender,
body.dark .chat-message-received .chat-sender {
  color: #cbd5e0;
}
/* #endregion Chat Bubble Styles */

/***************************************************************
--------------------Traffic Log Dashboard--------------------
***************************************************************/
/* #region */

/* eSuite Traffic Log Dashboard Styling */
#log-content {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--bs-border-color);
    line-height: 1.4;
    height: 100%;
    overflow-y: auto;
}

/* Log entry styling using eSuite classes */
.log-entry {
    font-family: 'Courier New', monospace;
    padding: 4px 0;
    word-break: break-all;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Recent activity styling */
#recent-activity {
    max-height: 400px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    padding: 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

#recent-activity .border-bottom {
    padding: 8px 0;
    margin: 0;
    line-height: 1.3;
}

/* CRITICAL: Force proper table layout */
.traffic-log-table {
    width: 100% !important;
    table-layout: fixed !important;
    display: table !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.traffic-log-table thead {
    display: table-header-group !important;
}

.traffic-log-table tbody {
    display: table-row-group !important;
}

.traffic-log-table tr {
    display: table-row !important;
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

.traffic-log-table th,
.traffic-log-table td {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 0.75rem !important;
    border-bottom: none !important;
    border-right: 1px solid var(--bs-border-color-translucent) !important;
    border-top: none !important;
    border-left: none !important;
    height: 50px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    background-color: inherit !important;
}

.traffic-log-table th:last-child,
.traffic-log-table td:last-child {
    border-right: none !important;
}

/* Remove any margin/padding from table rows */
.traffic-log-table tbody tr {
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Ensure no gaps between rows */
.traffic-log-table tbody tr + tr {
    border-top: none !important;
    margin-top: 0 !important;
}

/* Remove borders between rows completely */
.traffic-log-table tbody tr td {
    border-bottom: none !important;
    border-top: none !important;
}

/* Override Bootstrap table striping */


/* Remove Bootstrap table spacing */
.traffic-log-table.table {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}

.traffic-log-table.table tbody {
    border-top: none !important;
}

/* Column widths for compact log table */

.traffic-log-table .col-entries,
.traffic-log-table .col-action {
    width: 30% !important;
    text-align: center !important;
}

.traffic-log-table .col-size {
    width: 20% !important;
    text-align: center !important;
}


/* Remove any background colors from parent containers */

/* Force remove all Bootstrap alternating row colors */

/* Override any eSuite alternating row styling */

/* Enhanced table hover effects */
.traffic-log-table tbody tr:hover {
    background-color: var(--bs-secondary-bg) !important;
}

/* Ensure proper table responsiveness - Override existing .table-responsive if needed */
.traffic-log-table-responsive {
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

/* Override Bootstrap spacing */
.traffic-log-table.table-sm th,
.traffic-log-table.table-sm td {
    padding: 0.5rem !important;
    height: 45px !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Ensure badges and buttons are properly sized */
.traffic-log-table .badge {
    font-size: 0.75em !important;
    padding: 0.25em 0.5em !important;
    vertical-align: middle !important;
}

.traffic-log-table .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}

/* Remove any inherited spacing from eSuite classes */
.traffic-log-table .borders,
.traffic-log-table .alt1 tr {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}


/* Additional border removal */
.traffic-log-table tbody,
.traffic-log-table .table-hover tbody tr {
    border: none !important;
}


/* Compact button styling */
.traffic-log-table .btn-sm {
    padding: 0.125rem 0.25rem !important;
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
}

/* Tooltip for file size */

/* Documentation modal CSS-only fullscreen toggle */


#documentation-modal.hd-modal:has(.documentation-fullscreen-checkbox:checked) .modal-dialog,
#documentation-modal.hd-modal:has(.documentation-fullscreen-checkbox:checked) .modal-dialog.modal-xl,
#documentation-modal.hd-modal:has(.documentation-fullscreen-checkbox:checked) .modal-dialog.modal-lg {
    max-width: 100vw !important;
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
}

#documentation-modal.hd-modal:has(.documentation-fullscreen-checkbox:checked) .modal-content {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh;
    border: 0;
    border-radius: 0 !important;
}


#documentation-modal:has(.documentation-fullscreen-checkbox:checked) .documentation-fullscreen-collapse,
.icon-16,
.vertical-align-bottom,
.home-dash .hd-wsch-filter,
.home-dash .hd-kl-pick {
    display: inline-block;
}

/* CSS-only edit/present swap driven by #documentation-edit-checkbox */

#documentation-parent:has(#documentation-edit-checkbox:checked) #documentation-form,
.hd-tc-toast.toast-error[style*="display: block"],
.hd-tc-toast.toast-error[style*="display:block"] {
    /* Must be flex (not block) so the form's flex-column layout from
       .hd-doc-form survives the edit-mode toggle. Without this, the
       body region loses its scroll cap and the Submit button at the
       bottom is unreachable when the form's content exceeds viewport
       height. */
    display: flex !important;
}

/* Modal improvements for large viewing - TRAFFIC LOG SPECIFIC */

.traffic-log-modal-fullscreen-lg-down .modal-content {
    height: 100vh;
    border: 0;
    border-radius: 0;
}

/* Responsive modal sizing - TRAFFIC LOG SPECIFIC */
@media (min-width: 992px) {
    .traffic-log-modal .modal-dialog {
        max-width: 95vw !important;
        width: 95vw;
        margin: 2.5vh auto;
    }
    
    .traffic-log-modal .modal-content {
        height: 95vh !important;
    }
}

/* Dark mode fixes for traffic analytics table headers */
[data-bs-theme=dark] .traffic-log-table .text_header th,
[data-bs-theme=dark] .traffic-log-modal .modal-header {
    color: #ffffff !important;
    background-color: rgb(43, 48, 53) !important;
}

[data-bs-theme=dark] .traffic-log-table .text_header {
    background-color: rgb(43, 48, 53) !important;
}

/* Ensure text content in table cells has proper contrast in dark mode without background boxes */

[data-bs-theme=dark] .traffic-log-table td strong,
[data-bs-theme=dark] #log-preview-content pre,
[data-bs-theme=dark] .card-header h5.mainfont {
    color: #ffffff !important;
    background-color: transparent !important;
}


/* Dark mode styles for log preview modal and filters - TRAFFIC LOG SPECIFIC */

[data-bs-theme=dark] .traffic-log-modal .modal-body,
[data-bs-theme=dark] .traffic-log-modal .card-body {
    background-color: #212529 !important;
    color: #ffffff !important;
}



/* Target the filter controls specifically in the traffic log modal */
[data-bs-theme=dark] .traffic-log-modal .card {
    background-color: #212529 !important;
    border: 1px solid #495057 !important;
}


[data-bs-theme=dark] .traffic-log-modal .card-header {
    background-color: rgb(43, 48, 53) !important;
    border-bottom: 1px solid #495057 !important;
    color: #ffffff !important;
}

/* Target the modal-header-filter container specifically in traffic log modal */
[data-bs-theme=dark] .traffic-log-modal .modal-header-filter {
    background-color: #212529 !important;
    border-bottom: 1px solid #495057 !important;
}

/* Override inline styles with highest specificity for traffic log modal */

/* Additional overrides for any white backgrounds in traffic log modal */






[data-bs-theme=dark] .traffic-log-modal .filter-controls .btn-group {
    border: 1px solid #495057;
}

[data-bs-theme=dark] .traffic-log-modal .filter-controls .btn-group .btn {
    border-color: #495057 !important;
}

[data-bs-theme=dark] #log-preview-content {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border: 1px solid #495057 !important;
}


/* Remove Bootstrap gutters and spacing */
.row.g-0 {
    margin: 0 !important;
    padding: 0 !important;
}

.row.g-0 > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Remove card spacing and borders */


/* Badge styling consistency */
.badge,
.crm-contact-list .badge,
.crm-company-list .badge {
    font-size: 0.75em;
    padding: 0.375em 0.75em;
}

/* Sticky header for better navigation */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Fix card headers to not have background boxes in dark mode */

/* #endregion */

/* DO NOT REMOVE */

.visible-hover-parent:hover .visible-hover-child {
	visibility: visible;
}

.visible-hover-child {
	visibility: hidden;
}

.show-hover-parent:hover .show-hover-child,
.show-hover-parent-2:hover .show-hover-child-2,
.show-hover-parent-3:hover .show-hover-child-3 {
	display: initial !important;
}





/* DO NOT REMOVE */





.dept4btn {
	background-color: #848080;
	color: #FFFFFF;
	text-decoration: none;
}

.dept4btn:hover {
	background-color: #4B4747;
	color: #FFFFFF;
	text-decoration: none;
}

.depthdr5{
	background-color:#F0EEEE;
}

.planning_bg{
	background-color:#5B9BD5;
	color:#FFFFFF;
}

.started_bg{
	background-color:#FAA61A;
	color:#FFFFFF;
}

.scheduled_bg{
	background-color:#FFDA6A;
	color:#000000;
}

.completed_bg{
	background-color:#6BBE6B;
	color:#FFFFFF;
}


/* ================================================
   CATEGORIES GRID - RESPONSIVE IMPROVEMENTS
   ================================================ */

/* Category checkbox container - responsive grid layout */
.category-grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

/* Tablet layout - 3 columns */
@media (max-width: 1199.98px) {
	.category-grid-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile layout - 2 columns */
@media (max-width: 767.98px) {
	.category-grid-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* Small mobile - single column */
@media (max-width: 575.98px) {
	.category-grid-container {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* Mobile landscape optimization */
@media (max-width: 767.98px) and (orientation: landscape) {
	.category-grid-container {
		grid-template-columns: repeat(3, 1fr);
		max-height: 50vh;
		overflow-y: auto;
	}
}

/* Category control buttons styling */
.card-header.crsmenu .btn-group .btn-outline-light {
	border-color: var(--hd-white-a25);
	color: #fff;
	font-size: 0.875rem;
	padding: 0.25rem 0.5rem;
}

.card-header.crsmenu .btn-group .btn-outline-light:hover {
	background-color: var(--hd-white-a18);
	border-color: var(--hd-white-a50);
	color: #fff;
}

.card-header.crsmenu .btn-group .btn-outline-light:active {
	background-color: var(--hd-white-a25);
	border-color: var(--hd-white-a65);
}

/* Mobile adjustments for category control buttons */
@media (max-width: 575.98px) {
	.card-header.crsmenu .btn-group .btn-outline-light {
		padding: 0.375rem 0.5rem;
		min-width: 36px;
	}
	
	.card-header.crsmenu .btn-group .btn-outline-light i {
		font-size: 0.875rem;
	}
}

/* Category selection counter (optional enhancement) */
.category-selection-count {
	font-size: 0.875rem;
	color: var(--hd-white-a80);
	margin-left: 0.5rem;
}

@media (max-width: 767.98px) {
	.category-selection-count {
		font-size: 0.75rem;
	}
}

/* Category search input styling */
#categorySearch {
	border-radius: 6px;
	margin-bottom: 16px;
}

@media (max-width: 767.98px) {
	#categorySearch {
		font-size: 16px; /* Prevent zoom on iOS */
		margin-bottom: 12px;
	}
}

/* ============================================
   Company Builder Mobile Improvements
   ============================================ */

/* Mobile layout for company builder page */
@media (max-width: 991.98px) {
	/* Show company selector as dropdown/modal on mobile */
	.company-mobile-selector {
		display: block !important;
		margin-bottom: 1rem;
	}
	
	/* Make company info section full width on mobile */
	.company-builder-layout .col-sm-9 {
		width: 100%;
		padding: 0;
	}
	
	/* Adjust card spacing on mobile */
	.company-builder-layout .card,
	.group-info-container .card,
	.job-description-container .card {
		margin-bottom: 1rem;
	}
}

/* Company info section mobile improvements */
@media (max-width: 767.98px) {
	/* Stack company info labels and values vertically */
	.company-info-row {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	
	.company-info-row .col-3,
	.company-info-row .col-4 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		text-align: left !important;
		margin-bottom: 0.5rem;
	}
	
	/* Adjust icon sizes for mobile */
	.company-info-row .text-center {
		text-align: left !important;
		padding-left: 0 !important;
	}
	
	/* Better spacing for form controls */
	.company-info-row .form-check-input,
	.home-dash .hd-emp-mgr-pager {
		margin-left: 0;
	}
	
	/* Make buttons full width on mobile */
	.company-info-row .btn {
		width: 100%;
		margin-bottom: 0.5rem;
	}
	
	.company-info-row .btn:last-child {
		margin-bottom: 0;
	}
}

/* License tables mobile improvements */
@media (max-width: 991.98px) {
	/* Convert license table to card layout on mobile */
	.license-table-mobile,
	.home-dash .hd-qb-al-cell-label {
		display: block;
	}
	
	.license-table-mobile .row {
		border: 1px solid #dee2e6;
		border-radius: 0.375rem;
		margin-bottom: 1rem;
		padding: 1rem;
		background-color: #fff;
	}
	
	.license-table-mobile .row .col-3,
	.license-table-mobile .row .col-2,
	.license-table-mobile .row .col-1 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
		text-align: left !important;
		margin-bottom: 0.75rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.license-table-mobile .row .col-3:before,
	.license-table-mobile .row .col-2:before,
	.license-table-mobile .row .col-1:before {
		content: attr(data-label);
		font-weight: 600;
		margin-right: 1rem;
	}
	
	/* Hide desktop table headers on mobile */
	.license-table-mobile .row.depthdr2,
	.home-dash .hd-maint-equipment-body.collapse:not(.show),
	.home-dash .hd-stb-col--left,
	.home-dash .hd-stb-col--right,
	.home-dash .hd-qb-al-row--head {
		display: none;
	}
	
	/* Adjust action buttons */
	.license-table-mobile .row .col-1 a,
	.license-table-mobile .row .col-2 a {
		margin-left: auto;
	}
}

/* Advanced search mobile improvements */
@media (max-width: 767.98px) {
	/* Stack advanced search options */
	.company-advanced-search .col-6 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
		margin-bottom: 0.75rem;
	}
	
	/* Improve search input */
	.company-search-input,
	.group-info-container .form-control-sm,
	.group-info-container .form-select-sm {
		font-size: 16px; /* Prevent zoom on iOS */
	}
	
	/* Better button layout */
	.company-advanced-search .btn {
		min-width: 44px; /* Touch target size */
		min-height: 44px;
	}
}

/* Company licenses header mobile improvements */
@media (max-width: 767.98px) {
	.license-header-row {
		flex-direction: column;
	}
	
	.license-header-row .col {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 0.5rem;
		text-align: left !important;
	}
	
	.license-header-row .col-auto {
		width: 100% !important;
		max-width: 100% !important;
		text-align: left !important;
	}
	
	.license-header-row .float-end {
		float: none !important;
	}
}

/* Scrollable table for small screens */
@media (max-width: 575.98px) {
	.table-responsive-mobile {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-bottom: 1rem;
	}
	
	.table-responsive-mobile table {
		min-width: 600px;
	}
}

/* Company selector card mobile improvements */
@media (max-width: 991.98px) {
	.company-select-card {
		margin-bottom: 1.5rem;
	}
	
	.company-select-card .scrollcard5 {
		max-height: 300px;
	}
}

/* Touch-friendly improvements */
@media (max-width: 767.98px) {
	/* Increase touch targets */
	.company-builder-page a,
	.company-builder-page button {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	/* Improve form check inputs */
	.company-builder-page .form-check-input {
		min-width: 24px;
		min-height: 24px;
		cursor: pointer;
	}
	
	/* Better spacing for cards */
	.company-builder-page .card,
	.company-builder-page form .row {
		margin-bottom: 1rem;
	}
	
	.company-builder-page .card-body {
		padding: 1rem;
	}
	
	/* Optimize row spacing */
	.company-builder-page .row {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
	}
	
	.company-builder-page .row > * {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/* Horizontal scroll indicator for tables */
@media (max-width: 767.98px) {
	.scrollable-table-wrapper {
		position: relative;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.scrollable-table-wrapper:after {
		content: '→';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		background: linear-gradient(to right, rgba(255,255,255,0), var(--hd-white-a92) 20%);
		padding: 0.5rem 1rem;
		pointer-events: none;
		font-size: 1.5rem;
		color: #6c757d;
		opacity: 0.8;
	}
	
	.scrollable-table-wrapper.scrolled-end:after,
	.group-info-container .depthdr2.list_detail_md,
	.home-dash .hd-groupinfo-contacts-head,
	.home-dash .hd-curriculum-head,
	.home-dash .hd-curriculum-track-headrow,
	.home-dash .hd-curriculum-item-spacer,
	.home-dash .hd-curriculum-item-role-spacer,
	.home-dash .hd-curriculum-item::before,
	.home-dash .hd-group-tasks-headrow,
	.home-dash .hd-personnel-head,
	.home-dash .hd-emp-groups-head,
	.home-dash .hd-kei-head-row,
	.home-dash .hd-kei-cell-task::before,
	.home-dash .hd-emp-mgr-filter-btn span:not(.hd-emp-mgr-filter-pill) {
		display: none;
	}
}

/* Mobile card improvements for company builder */
@media (max-width: 767.98px) {
	.company-builder-page .card {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	
	.company-builder-page .card-header,
	.group-info-container .card-header.depthdr4 {
		font-size: 1rem;
		padding: 0.75rem;
	}
	
	/* Improve scrollable areas on mobile */
	.scrollcard5 {
		max-height: 400px !important;
	}
	
	/* Better font sizes for mobile */
	.company-builder-page .fw600 {
		font-size: 0.9rem;
	}
	
	.company-builder-page .list_item_lg {
		font-size: 0.85rem;
	}
}

/* Extra small devices (phones in portrait) */
@media (max-width: 575.98px) {
	.company-builder-page .card-body,
	.group-info-container .card-body,
	.job-description-container .card-body {
		padding: 0.75rem;
	}
	
	.company-builder-page h6 {
		font-size: 1rem;
	}
	
	/* Improve button text visibility */
	.company-builder-page .btn-sm {
		font-size: 0.8rem;
		padding: 0.4rem 0.6rem;
	}
	
	/* Stack action buttons vertically on very small screens */
	.company-builder-page .d-flex.gap-2 {
		flex-direction: column;
		gap: 0.5rem !important;
	}
	
	.company-builder-page .d-flex.gap-2 .btn,
	.home-dash .hd-perm-grid-actions {
		width: 100%;
	}
}

/* Landscape orientation improvements for phones */
@media (max-width: 767.98px) and (orientation: landscape) {
	.scrollcard5 {
		max-height: 250px !important;
	}
	
	.company-mobile-selector {
		max-height: 250px;
		overflow-y: auto;
	}
}

/* Improved touch feedback */
@media (hover: none) and (pointer: coarse) {
	.company-builder-page a,
	.company-builder-page button,
	.company-builder-page .form-check-input {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
	}
	
	.company-builder-page .btn:active {
		transform: scale(0.98);
		transition: transform 0.1s ease;
	}
}

/* Sticky header for mobile tables */
@media (max-width: 767.98px) {
	.company-builder-page .card-header {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: inherit;
	}
}

/* Better spacing for mobile forms */
@media (max-width: 767.98px) {
	
	.company-builder-page .form-check {
		padding: 0.5rem 0;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	
	.company-builder-page .form-check-label {
		padding-left: 0.5rem;
		cursor: pointer;
		flex: 1;
	}
	
	.company-builder-page .form-check-input {
		margin-top: 0;
		flex-shrink: 0;
	}
}

/* ============================================
   Group Info / Department Profile Mobile Improvements
   ============================================ */

/* Mobile layout for group info page */
@media (max-width: 991.98px) {
	/* Add padding to main container */
	.group-info-container {
		padding: 0 15px;
	}
	
	/* Full width cards on mobile */
	
	/* Adjust spacing between sections */
	.group-info-container .row.mb-4 {
		margin-bottom: 1.5rem !important;
	}
}

@media (max-width: 767.98px) {
	/* Adjust header buttons */
	.group-info-container .card-body.depthdr .col-auto {
		margin-left: auto;
	}
	
	/* Make logo smaller on mobile */
	.group-info-container .logoimg {
		max-width: 150px;
		height: auto !important;
	}
	
	/* Better spacing for address and contact info */
	.group-info-container .list_item.fw600 {
		font-size: 0.9rem;
		margin-bottom: 0.5rem;
	}
	
	/* Stack input groups vertically */
	.group-info-container .input-group {
		flex-wrap: wrap;
	}
	
	.group-info-container .input-group-text.label_field {
		width: 100%;
		border-radius: 0.25rem 0.25rem 0 0 !important;
		justify-content: flex-start;
	}
	
	.group-info-container .input-group-text.content_field {
		width: 100%;
		border-radius: 0 0 0.25rem 0.25rem !important;
		justify-content: center;
		border-top: 0;
	}
	
	/* Improve contact list on mobile */
	
	/* Make contact cards more mobile-friendly */
	.group-info-container .alt1.rounded-1.cursor-pointer {
		flex-direction: column !important;
		padding: 1rem !important;
	}
	
	.group-info-container .alt1 > div[class*='col-'] {
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 0.5rem;
	}
	
	/* Stack contact checkboxes */
	.group-info-container .alt1 .row.list_item_md > div[class*='col-'] {
		width: 100% !important;
		text-align: left !important;
		margin-bottom: 0.75rem;
	}
	
	.group-info-container .alt1 .row.list_item_md > div[class*='col-']::before {
		content: attr(data-label);
		font-weight: 600;
		margin-right: 0.5rem;
		display: inline-block;
		min-width: 100px;
	}
	
	/* Better button sizing for mobile */
	.group-info-container .btn-sm {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		width: 100%;
		margin-bottom: 0.5rem;
	}
	
	/* Adjust form controls */
	
	/* Card headers more prominent on mobile */
	
	/* Better spacing for certifications */
	.group-info-container .certification-item {
		padding: 0.75rem;
		margin-bottom: 0.5rem;
	}
}

@media (max-width: 575.98px) {
	/* Extra small devices adjustments */
	.group-info-container .fs-5,
	.course-company-list .crsheader,
	.course-vendor-list .crsheader {
		font-size: 1.1rem !important;
	}
	
	/* Reduce padding on very small screens */
	
	/* Make modal full screen on small devices */
	.modal-dialog {
		margin: 0;
	}
	
	/* Better touch targets */
	.group-info-container .form-check-input {
		min-width: 20px;
		min-height: 20px;
		cursor: pointer;
	}
}

/* ============================================
   Job Description Builder Mobile Improvements
   ============================================ */

/* Mobile layout for job description page */
@media (max-width: 991.98px) {
	/* Remove extra padding - let Bootstrap handle it */
	.job-description-container {
		padding: 0;
	}
	
	/* Full width cards on mobile */
	
	/* Adjust spacing between sections */
	.job-description-container .row.mb-2 {
		margin-bottom: 1rem !important;
	}
	
	/* Mobile toggle buttons - better styling */
	.job-description-container .pb-2 {
		padding-bottom: 0.75rem !important;
		margin-bottom: 0.75rem;
		border-bottom: 1px solid #dee2e6;
	}
	
	.job-description-container .pb-2 .btn {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		font-weight: 500;
		border-radius: 0.25rem;
		white-space: nowrap;
	}
	
	.job-description-container .pb-2 .btn i {
		margin-right: 0.375rem;
		font-size: 0.9rem;
	}
	
	/* Ensure offcanvas content fits properly */
	.job-description-container .offcanvas-body .card {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
	
	.job-description-container .offcanvas-body .card:first-child {
		border-top: 0;
	}
	
	/* Better card spacing in middle column */
	.job-description-container .col-12.col-lg-6 > .card,
	.job-description-container .col-12.col-lg-6 > form > .card {
		margin-bottom: 0;
	}
	
}

@media (max-width: 767.98px) {
	/* Keep input groups normal - don't stack them */
	.job-description-container .input-group {
		flex-wrap: nowrap;
	}
	
	/* Label sizing on mobile - allow wrapping */
	.job-description-container .input-group-text {
		min-width: 90px;
		font-size: 0.85rem;
		padding: 0.5rem 0.75rem;
		white-space: normal;
		word-wrap: break-word;
		line-height: 1.3;
	}
	
	/* Stack owner and locked fields only in the specific row */
	.job-description-container .row.mb-2 > .col-6,
	.job-description-container .row.mb-2 > .col:not(.col-auto) {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-bottom: 0.75rem;
	}
	
	
	/* Better textarea sizing on mobile */
	.job-description-container textarea.form-control-sm {
		font-size: 16px; /* Prevent zoom on iOS */
		min-height: 180px;
		line-height: 1.5;
		padding: 0.5rem 0.75rem;
	}
	
	/* Card headers more prominent on mobile */
	.job-description-container .card-header {
		font-size: 0.95rem;
		padding: 0.5rem 0.75rem;
		line-height: 1.3;
	}
	
	/* Text card headers (Description, Education) */
	.job-description-container .card-header.text_header2 {
		font-size: 0.85rem;
		padding: 0.5rem 0.75rem;
		white-space: normal;
		word-wrap: break-word;
		line-height: 1.3;
	}
	
	/* Job description main header */
	.job-description-container .card-header.fw600.depthdr3 {
		flex-direction: row !important;
		align-items: center !important;
		flex-wrap: wrap;
	}
	
	.job-description-container .card-header.fw600 > div:first-child {
		flex: 1;
		min-width: 200px;
	}
	
	/* Dropdown menu better positioned */
	.job-description-container .dropdown-menu {
		min-width: 200px;
		font-size: 0.95rem;
	}
	
	/* Better form control sizing */
	.job-description-container input.form-control-sm,
	.job-description-container select.form-select-sm,
	.job-description-container input[type="search"],
	.job-description-container input[type="text"]:not(.form-control-sm) {
		font-size: 16px; /* Prevent zoom on iOS */
		padding: 0.5rem 0.75rem;
		min-height: 44px; /* Touch target */
	}
	
	/* Readonly display spans */
	.job-description-container span.form-control-sm {
		font-size: 16px;
		padding: 0.5rem 0.75rem;
		min-height: 44px;
		display: flex;
		align-items: center;
		background-color: #e9ecef;
	}
	
	/* Job tasks list improvements */
	.job-description-container .list_item,
	.job-description-container .list_item_md {
		font-size: 0.95rem;
		line-height: 1.5;
	}
	
	/* Better button sizing for mobile */
	.job-description-container .btn-sm:not(.pb-2 .btn) {
		min-width: 44px; /* Touch target size */
		min-height: 44px;
		padding: 0.5rem 0.875rem;
		font-size: 0.875rem;
		border-radius: 0.25rem;
	}
	
	/* Dropdown buttons in headers */
	.job-description-container .card-header .btn,
	.job-description-container .card-header .dropdown-item {
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
	}
	
	/* Search inputs */
	
	/* Card body padding */
	.job-description-container .card-body {
		padding: 0.75rem;
	}
	
	/* Better spacing for text cards */
	.job-description-container .card.text_border {
		margin-bottom: 0.75rem;
	}
	
	/* Tighter spacing inside text cards */
	.job-description-container .card.text_border .card-header,
	.job-description-container .card.text_border textarea {
		padding: 0.5rem 0.75rem;
	}
	
	
	/* Locked checkbox - keep compact but allow wrapping */
	.job-description-container .col-auto .input-group-text {
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		white-space: normal;
		line-height: 1.3;
	}
	
	/* Info icon in locked label */
	.job-description-container .col-auto .input-group-text a {
		white-space: nowrap;
		display: inline-block;
	}
}

@media (max-width: 575.98px) {
	/* Extra small devices adjustments */
	
	/* Reduce header font size */
	.job-description-container .fs-5 {
		font-size: 1rem !important;
	}
	
	/* On very small screens, stack the owner/locked row */
	.job-description-container .row.mb-2 > .col-6 {
		width: 100% !important;
	}
	
	/* Smaller labels on very small screens - allow wrapping */
	.job-description-container .input-group-text {
		min-width: 80px;
		font-size: 0.8rem;
		padding: 0.5rem;
		white-space: normal;
		word-wrap: break-word;
		line-height: 1.3;
	}
	
	/* Adjust modal buttons */
	.job-description-container .modal-footer .btn {
		width: 100%;
		margin-bottom: 0.5rem;
	}
	
	.job-description-container .modal-footer .btn:last-child {
		margin-bottom: 0;
	}
	
	/* Better touch targets for checkboxes */
	.job-description-container .form-check-input {
		min-width: 22px;
		min-height: 22px;
		cursor: pointer;
		margin-top: 0;
	}
	
	/* Offcanvas toggle buttons - better sizing */
	.job-description-container .pb-2 .btn {
		padding: 0.625rem 1rem;
		font-size: 0.875rem;
		margin-right: 0.5rem;
		min-height: 40px;
	}
	
	.job-description-container .pb-2 .btn:last-child {
		margin-right: 0;
	}
	
	.job-description-container .pb-2 .btn i {
		font-size: 0.9rem;
	}
	
	/* Textarea minimum height */
	.job-description-container textarea.form-control-sm {
		min-height: 200px;
	}
	
	/* Form controls smaller padding */
	.job-description-container input.form-control-sm,
	.job-description-container select.form-select-sm {
		padding: 0.5rem;
		font-size: 14px;
	}
}


/***************************************************************
--------------------Customer Relations Module Styles--------------------
***************************************************************/
/* #region */

/* CRM Dashboard Styles */
.crm-dashboard-table {
    table-layout: auto;
    width: 100%;
}


.crm-dashboard-badge {
    display: inline-block;
    white-space: nowrap;
}

.crm-dashboard-card,
.crm-company-list .card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* CRM Activity Form - Select2 Dark Theme Support */
[data-bs-theme=dark] .crm-activity-form .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme=dark] .crm-activity-form .select2-dropdown,
[data-bs-theme=dark] .crm-activity-form .select2-search__field {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

[data-bs-theme=dark] .crm-activity-form .select2-container--bootstrap-5 .select2-selection--single {
    background-color: #495057 !important;
    border-color: #6c757d !important;
}


[data-bs-theme=dark] .crm-activity-form .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #adb5bd !important;
}


[data-bs-theme=dark] .crm-activity-form .select2-results__option,
[data-bs-theme=dark] .crm-deal-form .form-select option {
    background-color: #495057 !important;
    color: #ffffff !important;
}

[data-bs-theme=dark] .crm-activity-form .select2-results__option--highlighted,
.crm-contact-form-new .select2-container--bootstrap-5 .select2-results__option--highlighted:has(.create-new-user-option) {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}


[data-bs-theme=dark] .crm-activity-form .select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* CRM Dashboard Mobile responsive improvements */
@media (max-width: 992px) {
    /* Hide less important columns on tablets */
    .crm-dashboard-table th:nth-child(3),
    .crm-dashboard-table td:nth-child(3),
    .crm-dashboard-table th:nth-child(4),
    .crm-dashboard-table td:nth-child(4),
    .crm-activity-list .table th:nth-child(6),
    .crm-activity-list .table td:nth-child(6),
    .crm-activity-list .table th:nth-child(7),
    .crm-activity-list .table td:nth-child(7),
    .crm-contact-list .table th:nth-child(7),
    .crm-contact-list .table td:nth-child(7),
    .crm-deal-list .table th:nth-child(6),
    .crm-deal-list .table td:nth-child(6) {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Stack header elements */
    .crm-dashboard-header,
    .ticket-page-header .d-flex,
    .ticket-dashboard .ticket-page-header .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }

    .crm-dashboard-header h2,
    .ticket-page-header h1,
    .ticket-dashboard .ticket-page-header h1 {
        text-align: center;
        font-size: 1.5rem;
    }
    
    /* Button groups stack vertically */
    .crm-dashboard-header .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .crm-dashboard-header .btn-group .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    /* Cards more compact on mobile */
    .crm-dashboard-card,
    #editprofile .preferences-section .col-3,
    #editprofile .preferences-section .col-6 {
        margin-bottom: 1rem;
    }

    .crm-dashboard-card .card-body,
    .crm-contact-detail .card-body,
    .crm-contact-detail .card-header,
    .crm-activity-list .card-body,
    .crm-activity-list .card-header,
    .crm-contact-list .card-body,
    .crm-contact-list .card-header,
    #editprofile .modal-body,
    .crm-deal-list .card-body,
    .crm-deal-list .card-header,
    .crm-customer-management .card-header,
    .crm-customer-management .card-body {
        padding: 0.75rem;
    }

    /* Statistics cards */
    .crm-dashboard-header ~ .row .col-lg-3,
    .crm-dashboard-header ~ .row .col-md-6 {
        margin-bottom: 0.75rem !important;
    }

    /* Table improvements - make text wrap */

    .crm-dashboard-table th,
    .crm-dashboard-table td {
        padding: 0.5rem 0.3rem;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Make tables use full width properly */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce badge size */
    .crm-dashboard-badge {
        font-size: 0.65rem;
        padding: 0.25em 0.4em;
        white-space: normal;
        line-height: 1.2;
    }


    .card-header h5,
    .crm-contact-detail .card-header h5,
    .crm-contact-detail .card-header h6,
    .crm-activity-list .card-header h6 {
        text-align: center;
        margin-bottom: 0.5rem !important;
    }

    .card-header .btn,
    .crm-contact-detail .card-header .btn,
    .ticket-dashboard .card-header .btn {
        width: 100%;
    }

    /* Show only 2 columns on mobile - Name and Status/Action column */
    .crm-dashboard-table thead th:nth-child(2),
    .crm-dashboard-table tbody td:nth-child(2),
    .suite-app-list .app-list-header,
    .crm-activity-list .table th:nth-child(5),
    .crm-activity-list .table td:nth-child(5),
    .crm-activity-list .table th:nth-child(6),
    .crm-activity-list .table td:nth-child(6),
    .crm-activity-list .table th:nth-child(7),
    .crm-activity-list .table td:nth-child(7),
    .crm-contact-list .table th:nth-child(4),
    .crm-contact-list .table td:nth-child(4),
    .crm-contact-list .table th:nth-child(6),
    .crm-contact-list .table td:nth-child(6),
    .crm-contact-list .table th:nth-child(7),
    .crm-contact-list .table td:nth-child(7),
    .crm-deal-list .table th:nth-child(3),
    .crm-deal-list .table td:nth-child(3),
    .crm-deal-list .table th:nth-child(5),
    .crm-deal-list .table td:nth-child(5),
    .crm-deal-list .table th:nth-child(6),
    .crm-deal-list .table td:nth-child(6),
    .crm-contact-activity-log .timeline-item:before,
    .suite-customer-support .btn-tickets i {
        display: none;
    }
    
}

@media (max-width: 576px) {
    /* Extra small devices */

    .crm-dashboard-header h2,
    .card-body.text-center h4,
    .crm-contact-detail h2,
    .ticket-page-header h1,
    .crm-activity-list h2,
    .crm-contact-list h2,
    .crm-deal-list h2,
    .ticket-dashboard .ticket-page-header h1 {
        font-size: 1.25rem !important;
    }

    h4, .h4 {
        font-size: 1.5rem;
    }

    h5, .h5 {
        font-size: 0.95rem;
    }

    /* Statistics cards even more compact */
    .card-body.text-center {
        padding: 0.75rem !important;
    }

    .card-body.text-center i {
        font-size: 1.5rem !important;
    }


    /* Buttons smaller */
    .btn-sm {
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
    }

    /* Tables ultra compact */
    .crm-dashboard-table,
    .crm-contact-detail .activity-item small,
    .crm-contact-detail .deal-item small,
    .ticket-dashboard .row {
        font-size: 0.7rem;
    }

    .crm-dashboard-table th,
    .crm-dashboard-table td {
        padding: 0.4rem 0.25rem;
        max-width: 150px;
    }

    /* Links should wrap */
    .crm-dashboard-table a {
        word-wrap: break-word;
        white-space: normal;
    }

    /* Compact badges */
    .crm-dashboard-badge {
        font-size: 0.6rem;
        padding: 0.2em 0.35em;
    }
}
/* #endregion */

/* #region CRM Contact Form New - Custom Select2 "Create New User" Option Styling */
.crm-contact-form-new .create-new-user-option {
    font-family: inherit;
    font-weight: normal;
    color: inherit;
}

/* Remove blue background from Create New User option */
.crm-contact-form-new .select2-container--bootstrap-5 .select2-results__option[aria-selected="false"]:has(.create-new-user-option) {
    background-color: transparent !important;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
}

/* Only show blue when hovering/highlighted */


[data-bs-theme=dark] .crm-contact-form-new .select2-container--bootstrap-5 .select2-results__option[aria-selected="false"]:has(.create-new-user-option) {
    border-bottom-color: #6c757d;
    background-color: transparent !important;
}
/* #endregion */

/* #region CRM Deal Form - Native Select Dark Theme */
[data-bs-theme=dark] .crm-deal-form .form-select {
    background-color: #495057 !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

[data-bs-theme=dark] .crm-deal-form .form-select:focus {
    background-color: #495057 !important;
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    color: #ffffff !important;
}

/* #endregion */

/* #region CRM Contact Detail - Activity/Deal Lists and Mobile Responsive */
.crm-contact-detail .activity-list,
.crm-contact-detail .deals-list,
.crm-deal-detail .activity-list,
.max-h-400-scroll {
    max-height: 400px;
    overflow-y: auto;
}

.crm-contact-detail .activity-item,
.crm-contact-detail .deal-item,
.crm-deal-detail .activity-item {
    transition: background-color 0.2s ease;
}


.crm-contact-detail .activity-icon,
.crm-contact-detail .deal-icon,
.crm-deal-detail .activity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    font-size: 14px;
}

.crm-contact-detail .badge-activity-type,
.crm-deal-detail .badge-activity-type {
    font-size: 0.7rem;
    font-weight: 500;
}

.crm-contact-detail .activity-status .badge,
.crm-contact-detail .deals-list .badge,
.crm-deal-detail .activity-status .badge {
    font-size: 0.7rem;
}

.crm-contact-detail .activity-item .fw-semibold,
.crm-contact-detail .deal-item .fw-semibold,
.crm-deal-detail .activity-item .fw-semibold {
    color: #495057;
    font-size: 0.9rem;
}

/* Scrollbar styling */

.crm-contact-detail .activity-list::-webkit-scrollbar-track,
.crm-contact-detail .deals-list::-webkit-scrollbar-track,
.crm-customer-management .contact-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.crm-contact-detail .activity-list::-webkit-scrollbar-thumb,
.crm-contact-detail .deals-list::-webkit-scrollbar-thumb,
.crm-customer-management .contact-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.crm-contact-detail .activity-list::-webkit-scrollbar-thumb:hover,
.crm-contact-detail .deals-list::-webkit-scrollbar-thumb:hover,
.crm-customer-management .contact-list::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Card styling */
.crm-contact-detail .card,
.crm-activity-list .card,
.crm-contact-list .card,
.crm-deal-list .card,
.crm-customer-management .card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1rem;
}

/* Mobile responsive improvements */
@media (max-width: 992px) {
    /* Stack header elements on tablets */
    .crm-contact-detail .d-flex.justify-content-between.align-items-center,
    .crm-activity-list .d-flex.justify-content-between.align-items-center,
    .crm-contact-list .d-flex.justify-content-between.align-items-center,
    .crm-deal-list .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }

    .crm-contact-detail .d-flex.justify-content-between.align-items-center h2,
    .crm-activity-list .d-flex.justify-content-between.align-items-center h2,
    .crm-contact-list .d-flex.justify-content-between.align-items-center h2,
    .crm-deal-list .d-flex.justify-content-between.align-items-center h2 {
        text-align: center;
    }

    .crm-contact-detail .btn-group,
    .crm-activity-list .btn-group,
    .crm-contact-list .btn-group,
    .crm-deal-list .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .crm-contact-detail .btn-group .btn,
    .crm-activity-list .btn-group .btn,
    .crm-contact-list .btn-group .btn,
    .crm-deal-list .btn-group .btn,
    .crm-customer-management .card-header.depthdr .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    /* Stack contact info and summary */
    .crm-contact-detail .col-lg-8,
    .crm-contact-detail .col-lg-4,
    .crm-contact-detail .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Stack activities and deals */
}

@media (max-width: 768px) {
    /* Compact layout for mobile */
    .crm-contact-detail .container-fluid,
    .crm-activity-list .container-fluid,
    .crm-contact-list .container-fluid,
    .crm-deal-list .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }


    .crm-contact-detail h5,
    .crm-contact-detail h6,
    .crm-contact-detail .h5,
    .crm-contact-detail .h6,
    .contractor-industry-builder .card-header,
    .course-legacy-import .card-header,
    .crm-deal-list h5,
    .crm-deal-list .h5,
    .suite-customer-support .card-header {
        font-size: 0.95rem;
    }

    /* Card spacing */
    .crm-contact-detail .card,
    .crm-activity-list .card,
    .crm-contact-list .card,
    .crm-deal-list .card {
        margin-bottom: 0.75rem;
    }



    /* Card headers with buttons */
    .crm-contact-detail .card-header.d-flex,
    .crm-activity-list .card-header.d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }



    /* Definition lists */
    .crm-contact-detail .dl.row,
    .crm-contact-detail dl.row,
    .suite-app-list .app-list-item .row:last-child {
        margin-bottom: 0;
    }

    .crm-contact-detail dl.row dt {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .crm-contact-detail dl.row dd {
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }

    /* Contact info columns stack */
    .crm-contact-detail .col-md-6,
    .crm-customer-management .col-xl-4,
    .crm-customer-management .col-lg-6,
    .crm-customer-management .col-md-6,
    .crm-customer-management .modal-body .row .col-md-6,
    .crm-customer-management .modal-body .row .col-md-9,
    .crm-customer-management .modal-body .row .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Activity and deal items */
    .crm-contact-detail .activity-item, .crm-contact-detail .deal-item {
        padding: 0.75rem 0.5rem !important;
    }

    .crm-contact-detail .activity-item .row,
    .crm-contact-detail .deal-item .row,
    .crm-contact-list .btn-group,
    .crm-customer-management .card-body form.row {
        flex-direction: column;
    }

    .crm-contact-detail .activity-item .col-auto,
    .crm-contact-detail .deal-item .col-auto,
    .suite-app-list .app-list-item .row {
        margin-bottom: 0.5rem;
    }

    .crm-contact-detail .activity-icon, .crm-contact-detail .deal-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }


    .crm-contact-detail .activity-item .d-flex,
    .crm-contact-detail .deal-item .d-flex,
    .crm-customer-management .contact-list .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .crm-contact-detail .activity-status {
        margin-top: 0.5rem;
    }

    /* Reduce badge size */
    .crm-contact-detail .badge,
    .crm-activity-list .badge,
    .crm-contact-list .badge,
    .crm-deal-list .badge,
    .crm-customer-management .badge {
        font-size: 0.65rem;
        padding: 0.25em 0.5em;
    }

    /* Compact buttons */
    .crm-contact-detail .btn-sm,
    .crm-customer-management .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* Summary card statistics */

    .crm-contact-detail .text-center small,
    #owly-chat-modal .owly-disclaimer {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    /* Extra small devices */

    .crm-contact-detail h6, .crm-contact-detail .h6 {
        font-size: 0.875rem !important;
    }

    /* Even more compact */
    .crm-contact-detail .card-body,
    .crm-contact-detail .card-header {
        padding: 0.5rem;
    }


    /* Activity/deal items very compact */
    .crm-contact-detail .activity-item, .crm-contact-detail .deal-item {
        padding: 0.5rem !important;
    }



    /* Definition lists very compact */

    /* Summary statistics */
    .crm-contact-detail .text-center h4 {
        font-size: 1.25rem;
    }

    /* Buttons very compact */
    .crm-contact-detail .btn-sm,
    .crm-contact-list .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    /* Remove some icons to save space */
    .crm-contact-detail .btn i.fas {
        margin-right: 0.2rem;
    }
}
/* #endregion */


/***************************************************************
--------------------Groups Module Styles--------------------
***************************************************************/
/* #region */

/* Group Member Deletion Styles */
.group-member-marked-for-deletion,
.employee-groups-modal .member-marked-for-deletion {
    opacity: 0.5;
    background-color: #ffebee;
    transition: all 0.3s ease;
}

.group-member-marked-for-deletion .card-body {
    background-color: #ffebee;
}

.group-member-marked-for-deletion .user-name,
.employee-groups-modal .member-marked-for-deletion .group-name {
    text-decoration: line-through !important;
    color: #d32f2f !important;
}

.group-deletion-indicator {
    color: #d32f2f;
    font-weight: bold;
    font-size: 0.9rem;
}

.group-remove-member-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.group-remove-member-link.processing,
.employee-groups-modal .remove-member-link.processing {
    pointer-events: none;
    opacity: 0.6;
}

.group-remove-member-link.processing i::after {
    content: " Processing...";
    font-family: inherit;
    font-size: 0.8rem;
    margin-left: 5px;
}

/* Dark theme member deletion */
[data-bs-theme=dark] .group-member-marked-for-deletion,
[data-bs-theme=dark] .group-member-marked-for-deletion .card-body {
    background-color: rgba(211, 47, 47, 0.2);
}

/* #endregion */


/***************************************************************
--------------------Ticket Module Styles--------------------
***************************************************************/
/* #region */

/* Ticket Dashboard Work Summary */
.ticket-work-summary-user-selector,
.ticket-dashboard .work-summary-user-selector {
    transition: all 0.3s ease;
}

.ticket-work-summary-user-selector:focus,
.ticket-dashboard .work-summary-user-selector:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

.ticket-user-display-badge,
.ticket-activity-clickable,
.ticket-dashboard .user-display-badge {
    transition: all 0.2s ease;
}
/* #endregion */


/***************************************************************
--------------------User Module Styles--------------------
***************************************************************/
/* #region */

/* User Tree Inactive User Styles */
.user-tree-inactive-user {
    text-decoration: line-through;
    color: #b0b0b0 !important;
}

[data-bs-theme=dark] .user-tree-inactive-user {
    color: #6c757d !important;
}

/* User Signature Mobile Styles */

@media (prefers-color-scheme: dark) {
    .user-signature-mobile .theme-inverse {
        color: white !important;
    }
}
/* #endregion */


/***************************************************************
--------------------Traffic Log Module Styles--------------------
***************************************************************/
/* #region */

/* Traffic Log Mobile Responsive */
@media (max-width: 991px) {
    /* Stack stat cards on mobile */
    .traffic-log-dashboard .col-md-2 {
        margin-bottom: 1rem;
    }
    
    /* Adjust card body padding on mobile */
    .traffic-log-table-responsive,
    .traffic-log-dashboard .traffic-log-table-responsive {
        font-size: 0.875rem;
    }
    
    /* Make log entries more readable on mobile */
    .traffic-log-entry,
    .traffic-log-dashboard .log-entry {
        font-size: 0.8rem;
        word-break: break-word;
    }
    
    /* Adjust button sizes on mobile */
    .traffic-log-dashboard .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}
/* #endregion */


/***************************************************************
--------------------Owly Chat Modal Styles--------------------
***************************************************************/
/* #region */

#owly-cancel-btn {
    transition: all 0.3s ease;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
}

#owly-cancel-btn:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

#owly-cancel-btn i {
    margin-right: 2px;
    font-size: 0.75rem;
}

#owly-typing-indicator {
    display: none;
    align-items: center;
    padding: 0.25rem 0;
}

.owly-typing-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    background-color: #6c757d;
    border-radius: 50%;
    animation: owly-pulse 1.2s infinite;
}

.owly-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.owly-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes owly-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Owly Chat Mobile responsive */
@media (max-width: 768px) {
    #owly-chat-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    #owly-chat-modal .modal-content {
        height: 100vh;
        border-radius: 0;
    }
    
    #owly-chat-modal .chat-messages {
        height: calc(100vh - 280px);
    }
    
    #owly-chat-modal .modal-header {
        padding: 1rem;
    }
    
    
    #owly-chat-modal .owly-icon-header {
        width: 30px;
        height: 30px;
    }
    
    #owly-chat-modal .chat-mode-section {
        padding: 0.75rem 1rem;
    }
    
    #owly-chat-modal .chat-mode-section .form-check-inline {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    #owly-chat-modal .p-3 {
        padding: 1rem !important;
    }
    
}
/* #endregion */


/***************************************************************
--------------------Suite & Support Module Styles--------------------
***************************************************************/
/* #region */

/* Suite App List Mobile Responsive */
@media (max-width: 768px) {
    
    .suite-app-list .app-list-item {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        margin-bottom: 0.75rem;
        padding: 0.75rem;
    }
    
    
    
    .suite-app-list .action-buttons {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-start;
    }
}

/* #endregion */


/***************************************************************
--------------------Contractor Module Styles--------------------
***************************************************************/
/* #region */

/* Industry Builder Mobile Responsive */
@media (max-width: 768px) {
    .contractor-industry-builder .page-title,
    .course-legacy-import .page-title,
    .suite-customer-support .page-title {
        font-size: 1.1rem !important;
    }
    
    
    .contractor-industry-builder .input-group-text,
    .course-legacy-import .input-group-text,
    #editprofile .input-group-text,
    .crm-customer-management .dropdown-menu {
        font-size: 0.875rem;
    }
    
}
/* #endregion */


/***************************************************************
--------------------Traffic Log Module Styles--------------------
***************************************************************/
/* #region */

/* Mobile-friendly styling for traffic log */
@media (max-width: 991px) {
    /* Stack stat cards on mobile */
    .traffic-log-dashboard .col-md-2 {
        margin-bottom: 1rem;
    }
    
    /* Adjust card body padding on mobile */
    
    /* Make log entries more readable on mobile */
    
    /* Adjust button sizes on mobile */
    .traffic-log-dashboard .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}
/* #endregion */


/***************************************************************
--------------------Ticket Dashboard Extended Styles--------------------
***************************************************************/
/* #region */

/* jQuery UI Datepicker Dark Mode Styling */
[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-header,
[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-calendar th,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-header,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-calendar th {
    background: #1a202c !important;
    border: 1px solid #4a5568 !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-title,
[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-prev,
[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-next,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-title {
    color: #e2e8f0 !important;
}


[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker table,
[data-bs-theme="dark"] .ui-datepicker table {
    background: #2d3748 !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker td a {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4a5568 !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker td a:hover,
[data-bs-theme="dark"] .ui-datepicker td a:hover {
    background: #4a5568 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker td.ui-datepicker-today a,
[data-bs-theme="dark"] .ui-datepicker td.ui-datepicker-today a {
    background: #3182ce !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker td.ui-datepicker-current-day a,
[data-bs-theme="dark"] .ui-datepicker td.ui-datepicker-current-day a {
    background: #2b6cb0 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-buttonpane,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-buttonpane {
    background: #1a202c !important;
    border-top: 1px solid #4a5568 !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-buttonpane button,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-buttonpane button {
    background: #4a5568 !important;
    border: 1px solid #6b7280 !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker .ui-datepicker-buttonpane button:hover,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-prev:hover,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-next:hover,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: #6b7280 !important;
    border: 1px solid #9ca3af !important;
}

[data-bs-theme="dark"] .ticket-dashboard .ui-datepicker td.ui-datepicker-unselectable a,
[data-bs-theme="dark"] .ui-datepicker td.ui-datepicker-unselectable a {
    color: #6b7280 !important;
    background: #374151 !important;
    opacity: 0.5 !important;
}


/* Light mode datepicker overrides */
[data-bs-theme="light"] .ticket-dashboard .ui-datepicker,
[data-bs-theme="light"] .ui-datepicker {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}

[data-bs-theme="light"] .ticket-dashboard .ui-datepicker .ui-datepicker-header,
[data-bs-theme="light"] .ui-datepicker .ui-datepicker-header {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}

[data-bs-theme="light"] .ticket-dashboard .ui-datepicker td.ui-datepicker-unselectable a,
[data-bs-theme="light"] .ui-datepicker td.ui-datepicker-unselectable a {
    color: #9ca3af !important;
    background: #f3f4f6 !important;
    opacity: 0.6 !important;
}

/* Ticket Dashboard Mobile Responsive */
@media (max-width: 992px) {
    .ticket-dashboard .row > .col-2:nth-child(3),
    .ticket-dashboard .row > .col-3:nth-child(3) {
        display: none !important;
    }
}

@media (max-width: 768px) {


    .ticket-page-header p,
    .ticket-dashboard .ticket-page-header p {
        text-align: center;
        font-size: 0.9rem !important;
    }

    .ticket-action-buttons,
    .ticket-dashboard .ticket-action-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .ticket-action-buttons .btn,
    .ticket-dashboard .ticket-action-buttons .btn {
        width: 100%;
        margin: 0 !important;
    }

    .ticket-dashboard .card-body {
        padding: 0.5rem;
    }

    .ticket-dashboard .row {
        font-size: 0.75rem;
        margin-left: 0;
        margin-right: 0;
    }

    .ticket-dashboard .row > div {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }



    .ticket-dashboard .row.py-2 > .col-2:first-child {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .ticket-dashboard .row.py-2 > .col-4:nth-child(2),
    .ticket-dashboard .row.py-2 > .col-3:nth-child(2) {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .ticket-dashboard .row.py-2 > .col-2:nth-child(4),
    .ticket-dashboard .row.py-2 > .col-2:last-child {
        flex: 0 0 35%;
        max-width: 35%;
        text-align: center !important;
    }

    .ticket-dashboard .text-truncate {
        white-space: normal !important;
        word-wrap: break-word;
        overflow: visible;
    }

    .ticket-dashboard .badge {
        font-size: 0.65rem;
        padding: 0.25em 0.45em;
        white-space: nowrap;
    }

    .ticket-dashboard .card-header .row {
        flex-direction: column;
        align-items: stretch !important;
    }

    .ticket-dashboard .card-header .col,
    .ticket-dashboard .card-header .col-auto {
        width: 100%;
        text-align: center;
        margin: 0.25rem 0;
    }


    .ticket-dashboard .row.py-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

@media (max-width: 576px) {

    .ticket-page-header p,
    .ticket-dashboard .ticket-page-header p {
        font-size: 0.85rem !important;
        display: none;
    }



    .ticket-dashboard .row.py-2 > .col-2:first-child {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .ticket-dashboard .row.py-2 > .col-4:nth-child(2),
    .ticket-dashboard .row.py-2 > .col-3:nth-child(2) {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .ticket-dashboard .badge {
        font-size: 0.6rem;
        padding: 0.2em 0.4em;
    }

    .ticket-dashboard .btn-lg {
        font-size: 0.85rem;
        padding: 0.45rem 0.65rem;
    }

    .ticket-dashboard .card-body {
        padding: 0.4rem !important;
    }

    .ticket-dashboard .row.py-2 {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.4rem;
    }
}
/* #endregion */


/***************************************************************
--------------------Ticket Detail Activity Timeline Styles--------------------
***************************************************************/
/* #region */

.ticket-activity-timeline .activity-item {
    border-left: 3px solid #dee2e6;
    transition: all 0.3s ease;
}

.ticket-activity-timeline .activity-item:hover {
    border-left-color: #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ticket-activity-timeline .activity-item.bg-light,
.groups-group-select-group .group-ul .group-ul.border-start,
.dept-select-border-green {
    border-left-color: #28a745;
}

.ticket-activity-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    background-color: #f8f9fa !important;
}


/* Activity Type Badges */
.ticket-badge-email { background-color: #6f42c1 !important; }
.ticket-badge-meeting { background-color: #fd7e14 !important; }
.ticket-badge-task { background-color: #20c997 !important; }
.ticket-badge-note { background-color: #6c757d !important; }
.ticket-badge-follow_up { background-color: #e83e8c !important; }

.ticket-activity-meta {
    font-size: 0.85rem;
}

.ticket-activity-item .btn-group {
    opacity: 0;
    transition: opacity 0.3s ease;
}


/* Related Tickets Dropdown */
.ticket-related-dropdown .dropdown-menu {
    min-width: 100%;
    max-width: 350px;
}
/* #endregion */


/***************************************************************
--------------------Ticket Base Card Styles--------------------
***************************************************************/
/* #region */

.ticket-card {
    border-left: 4px solid var(--bs-border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ticket-card.priority-fast-track { 
    border-left-color: var(--ticket-priority-fast-track); 
}

.ticket-card.priority-immediate { 
    border-left-color: var(--ticket-priority-immediate); 
}

.ticket-card.priority-high { 
    border-left-color: var(--ticket-priority-high); 
}

.ticket-card.priority-medium { 
    border-left-color: var(--ticket-priority-medium); 
}

.ticket-card.priority-low { 
    border-left-color: var(--ticket-priority-low); 
}

.ticket-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* #endregion */


/***************************************************************
--------------------Course Module Styles--------------------
***************************************************************/
/* #region */

/* Company Course List Mobile Responsive */
@media (max-width: 767.98px) {
    .course-company-list .card-body,
    .course-vendor-list .card-body {
        padding: 0.75rem !important;
    }
    
    /* Touch-friendly buttons */
    .course-company-list .btn-sm,
    .course-vendor-list .btn-sm {
        min-height: 38px;
        padding: 0.5rem 0.75rem;
    }
    
    /* Better spacing for mobile cards */
    .course-company-list .card.mb-2,
    .course-vendor-list .card.mb-2 {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* Improve dropdown menus on mobile */
    .course-company-list .dropdown-menu,
    .course-vendor-list .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Ensure pagination buttons are touch-friendly */
.course-company-list #pagination_pages .btn,
.course-vendor-list #pagination_pages .btn {
    min-width: 36px;
    min-height: 36px;
}

/* Better mobile filter form layout */
@media (max-width: 575.98px) {
}

/* Vendor Course List Mobile Responsive */
@media (max-width: 767.98px) {
    
    
    
}


@media (max-width: 575.98px) {
}

/* Legacy Course Import Styles */
@media (max-width: 768px) {
}

.course-legacy-import .processing {
    color: #ffc107;
}



.course-legacy-import .progress-text {
    font-size: 0.9rem;
    font-style: italic;
}
/* #endregion */


/***************************************************************
--------------------CRM Activity List Styles--------------------
***************************************************************/
/* #region */

/* Card styling */

/* Table styling */
.crm-activity-list .table,
.crm-contact-list .table,
.crm-company-list .table,
.crm-deal-list .table {
    table-layout: fixed;
    width: 100%;
}

.crm-activity-list .table th,
.crm-deal-list .table th {
    font-weight: 600;
    white-space: nowrap;
}

.crm-activity-list .table td,
.crm-deal-list .table td {
    vertical-align: middle;
}

/* Mobile responsive improvements */
@media (max-width: 992px) {
    /* Stack header elements */




    /* Hide less important columns on tablets */
}

@media (max-width: 768px) {
    /* Compact layout for mobile */



    /* Card spacing */



    /* Card headers with buttons */


    /* Table improvements */
    
    .crm-activity-list .table,
    .crm-contact-list .table,
    .crm-deal-list .table {
        table-layout: auto;
    }
    
    .crm-activity-list .table td,
    .crm-activity-list .table th,
    .crm-deal-list .table td,
    .crm-deal-list .table th {
        padding: 0.5rem 0.25rem;
    }
    
    /* Hide less important columns on mobile */

    /* Reduce badge size */

    /* Compact buttons */
    .crm-activity-list .btn-sm,
    .crm-contact-list .btn-group-sm > .btn,
    .crm-deal-list .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.3rem;
    }

    .crm-activity-list .btn-group-sm .btn,
    .crm-deal-list .btn-group-sm .btn {
        padding: 0.2rem 0.3rem;
    }

    /* Pagination improvements */
    .crm-activity-list .pagination,
    .crm-contact-list .pagination,
    .crm-deal-list .pagination {
        flex-wrap: wrap;
        font-size: 0.875rem;
    }

    .crm-activity-list .pagination .page-item,
    .crm-contact-list .pagination .page-item,
    .crm-deal-list .pagination .page-item {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 576px) {
    /* Extra small devices */


    .crm-activity-list .table td,
    .crm-activity-list .table th,
    .crm-contact-list .table td,
    .crm-contact-list .table th,
    .crm-deal-list .table td,
    .crm-deal-list .table th {
        padding: 0.375rem 0.2rem;
    }

    /* Show only essential columns */
    .crm-activity-list .table th:nth-child(4),
    .crm-activity-list .table td:nth-child(4),
    .crm-contact-list .table th:nth-child(3),
    .crm-contact-list .table td:nth-child(3),
    .crm-contact-list .table th:nth-child(5),
    .crm-contact-list .table td:nth-child(5),
    .crm-contact-list .btn-group .btn span,
    .crm-deal-list .table th:nth-child(2),
    .crm-deal-list .table td:nth-child(2),
    .crm-deal-list .btn-group .btn span {
        display: none;
    }

    /* Stack action buttons vertically */

    .crm-activity-list .btn-group .btn {
        margin-bottom: 0.2rem;
    }
}
/* #endregion */


/***************************************************************
--------------------CRM Contact List Styles--------------------
***************************************************************/
/* #region */

/* Card styling */

/* Table styling */

.crm-contact-list .table th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    white-space: nowrap;
    padding: 12px 8px;
    text-align: left;
}

.crm-contact-list .table-dark th,
.crm-company-list .table-dark th,
.crm-company-detail .table-dark th {
    background-color: #343a40 !important;
    color: white !important;
    border-color: #495057;
}

.crm-contact-list .table td {
    vertical-align: middle;
    padding: 12px 8px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.crm-contact-list .table-responsive,
.crm-company-list .table-responsive,
.crm-company-detail .table-responsive {
    border-radius: 8px;
    overflow: hidden;
}


.crm-contact-list .btn-group-sm > .btn,
.crm-contact-list .btn-sm,
.crm-company-list .btn-group-sm > .btn,
.crm-company-list .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Contact name cell styling */
.crm-contact-list .contact-name-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.crm-contact-list .contact-name-cell a {
    margin-bottom: 2px;
}

.crm-contact-list .contact-name-cell small {
    line-height: 1.2;
}

/* Mobile responsive improvements */
@media (max-width: 992px) {
    /* Stack header elements on tablets */




    /* Hide less important columns on tablets */
}

@media (max-width: 768px) {
    /* Compact layout for mobile */



    /* Card spacing */



    /* Search form stacking */
    .crm-contact-list .card-body form.row .col-md-4,
    .crm-contact-list .card-body form.row .col-md-3,
    .crm-contact-list .card-body form.row .col-md-2,
    .crm-deal-list .row.g-3 .col-md-5,
    .crm-deal-list .row.g-3 .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    .crm-contact-list .card-body form.row .d-flex,
    .crm-customer-management .card-body form .d-flex {
        width: 100%;
        justify-content: space-between;
    }

    .crm-contact-list .card-body form.row .btn,
    .crm-customer-management .card-body form .btn {
        flex: 1;
    }

    /* Table improvements */
    
    
    .crm-contact-list .table td, .crm-contact-list .table th {
        padding: 0.5rem 0.25rem;
        min-width: unset;
    }
    

    
    /* Hide less important columns on mobile */

    /* Reduce badge size */

    /* Action buttons in table */
    .crm-contact-list .table .btn-group {
        flex-direction: row;
        gap: 0.2rem;
    }

    .crm-contact-list .table .btn i {
        margin: 0;
    }

    /* Pagination improvements */

}

@media (max-width: 576px) {
    /* Extra small devices */



    /* Show minimal columns on very small screens */

    /* Make action buttons icon-only */

    /* Compact buttons */
}
/* #endregion */


/***************************************************************
--------------------CRM Company List Styles--------------------
***************************************************************/
/* #region */

/* Remove white background from header and improve contrast */
.crm-company-list .d-flex.justify-content-between.align-items-center.mb-4 {
    padding: 15px 20px;
    background: linear-gradient(135deg, #343a40 0%, #495057 100%);
    border-radius: 8px;
    color: white;
    margin-bottom: 1.5rem !important;
}

.crm-company-list .d-flex.justify-content-between.align-items-center.mb-4 h2 {
    color: white;
    margin: 0;
}

.crm-company-list .d-flex.justify-content-between.align-items-center.mb-4 .btn-outline-secondary {
    color: white;
    border-color: white;
}

.crm-company-list .d-flex.justify-content-between.align-items-center.mb-4 .btn-outline-secondary:hover {
    background-color: white;
    color: #343a40;
}

/* Improve table formatting */

.crm-company-list .table th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    white-space: nowrap;
    padding: 15px 8px;
    text-align: left;
    height: 50px;
}


.crm-company-list .table tbody tr,
.crm-company-detail .table tbody tr {
    height: 65px;
}

.crm-company-list .table td {
    vertical-align: middle;
    padding: 15px 8px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 65px;
    min-height: 65px;
    line-height: 1.4;
}




/* #endregion */


/***************************************************************
--------------------User Profile Modal Styles--------------------
***************************************************************/
/* #region */

@media (max-width: 768px) {
    #editprofile .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    #editprofile .modal-header {
        font-size: 1rem;
        padding: 0.75rem;
    }
    #editprofile .modal-footer {
        padding: 0.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #editprofile .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 100px;
    }
    #editprofile .linked-accounts-header {
        flex-direction: column;
        gap: 0.25rem;
    }
}
/* #endregion */


/***************************************************************
--------------------Employee Groups Modal Styles--------------------
***************************************************************/
/* #region */



.employee-groups-modal .deletion-indicator {
    color: #d32f2f;
    font-weight: bold;
    font-size: 0.9rem;
    margin-left: 10px;
}

/* #endregion */


/***************************************************************
--------------------Employee Messages Styles--------------------
***************************************************************/
/* #region */


.employee-messages .message-center-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* #endregion */


/***************************************************************
--------------------CRM Deal List Styles--------------------
***************************************************************/
/* #region */





@media (max-width: 992px) {




}

@media (max-width: 768px) {







    
    
    





}

@media (max-width: 576px) {




    .crm-deal-list .btn-group .btn {
        padding: 0.2rem 0.3rem;
        font-size: 0.7rem;
    }

    .crm-deal-list .btn-group .btn i {
        margin: 0;
    }

}
/* #endregion */


/***************************************************************
--------------------CRM Deal Detail Styles--------------------
***************************************************************/
/* #region */







/* #endregion */


/***************************************************************
--------------------CRM Company Detail Styles--------------------
***************************************************************/
/* #region */

.crm-company-detail .avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}


.crm-company-detail .table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.crm-company-detail .table th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    white-space: nowrap;
    padding: 12px 8px;
    text-align: left;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}



.crm-company-detail .table td {
    vertical-align: middle;
    padding: 12px 8px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 65px;
    min-height: 65px;
    line-height: 1.4;
}

.crm-company-detail .contact-name-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.crm-company-detail .contact-name-cell .d-flex {
    align-items: center;
}

.crm-company-detail .btn-group-sm > .btn, .crm-company-detail .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.2;
}



.crm-company-detail .badge {
    font-size: 0.7em;
    padding: 0.3em 0.6em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .crm-company-detail .table th, .crm-company-detail .table td {
        padding: 8px 4px;
        font-size: 0.875rem;
    }
    
    .crm-company-detail .btn-group-sm > .btn {
        padding: 0.15rem 0.3rem;
        font-size: 0.7rem;
    }
}
/* #endregion */


/***************************************************************
--------------------CRM Contact Activity Log Styles--------------------
***************************************************************/
/* #region */


.crm-contact-activity-log .timeline-item:not(:last-child):before {
    content: '';
    position: absolute;
    left: calc(16.666667% + 1rem);
    top: 2rem;
    bottom: -2rem;
    width: 2px;
    background: #dee2e6;
    z-index: 0;
}


.crm-contact-activity-log .border-left-primary {
    border-left: 3px solid #007bff !important;
}

.crm-contact-activity-log .timeline-date,
.fw-500,
.hd-user-menu-identity-group {
    font-weight: 500;
}

@media (max-width: 768px) {
    
    .crm-contact-activity-log .text-end {
        text-align: left !important;
    }
}
/* #endregion */


/***************************************************************
--------------------CRM Customer Management Styles--------------------
***************************************************************/
/* #region */



.crm-customer-management .card-header.depthdr .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}


.crm-customer-management .card.h-100 {
    transition: transform 0.2s ease-in-out;
}

.crm-customer-management .card.h-100:hover {
    transform: translateY(-5px);
}





@media (max-width: 992px) {
    .crm-customer-management .card-header.depthdr .row {
        flex-direction: column;
        align-items: stretch !important;
    }

    .crm-customer-management .card-header.depthdr .row .col {
        text-align: center;
        margin-bottom: 1rem;
    }

    .crm-customer-management .card-header.depthdr .btn-group {
        justify-content: center;
        flex-direction: column;
    }

}

@media (max-width: 768px) {
    .crm-customer-management .card-header.depthdr .fs-4 {
        font-size: 1.25rem !important;
    }




    .crm-customer-management .contact-list .text-end {
        text-align: left !important;
        margin-top: 0.5rem;
    }





    .crm-customer-management .card-body form .col-auto {
        margin-left: 0 !important;
        width: 100%;
    }



    .crm-customer-management .modal-dialog {
        margin: 0.5rem;
    }

    .crm-customer-management .modal-lg {
        max-width: 100%;
    }

}

@media (max-width: 576px) {
    .crm-customer-management .card-header.depthdr .fs-4 {
        font-size: 1.1rem !important;
    }

    .crm-customer-management .card-header.depthdr .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }

    .crm-customer-management .pagination {
        flex-wrap: wrap;
    }

    .crm-customer-management .pagination .page-item {
        margin-bottom: 0.25rem;
    }
}
/* #endregion */


/***************************************************************
--------------------Learning Course Run Styles--------------------
***************************************************************/
/* #region */

.learning-course-run .header-content,
.learning-course-lesson-run .course-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.learning-course-run .header-actions,
.home-dash .hd-lst-plan-row > .hd-lst-plan-status,
.home-dash .hd-lst-items-body .hd-kb-list-row > .hd-kb-iconbtn {
    margin-left: auto;
}

.learning-course-run .header-title {
    flex-grow: 1;
    margin: 0 20px;
}

.learning-course-run #reset-progress-button {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

.learning-course-run #reset-progress-button:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #000;
}
/* #endregion */


/***************************************************************
--------------------Learning Course Test Run Styles--------------------
***************************************************************/
/* #region */

/* Import course CSS variables */
body.learning-course-test-run {
    --primary-blue: #000000;
    --secondary-blue: #1a2030;
    --accent-color: #667eea;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-bg: #f8f9fa;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --header-height: 70px;
    --text-color: #2c3e50;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --border-color: #dee2e6;
    --border-radius: 12px;
    --card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Apply course wrapper styling */
body.learning-course-test-run {
    background: var(--light-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body.learning-course-test-run .vh-100 {
    background: var(--light-bg) !important;
}

/* Question display area */
body.learning-course-test-run #question_screens {
    background: var(--light-bg) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 40px 20px !important;
    position: relative !important;
}

body.learning-course-test-run .question-page {
    background: transparent !important;
    padding: 0 !important;
    position: relative !important;
    height: auto !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Course-style question container */
body.learning-course-test-run .question-display-container {
    max-width: 800px;
    margin: 0 auto !important;
    padding: 0 !important;
    background: white !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease !important;
}

body.learning-course-test-run .question-text-container {
    background: var(--primary-blue) !important;
    margin: 0 0 30px 0 !important;
    padding: 25px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.learning-course-test-run .question-icon {
    font-size: 1.5rem !important;
    color: white !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.learning-course-test-run .question-text {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    color: white !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.learning-course-test-run .question-instruction {
    color: var(--hd-white-a92) !important;
    font-style: italic !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.learning-course-test-run .question-instruction small {
    font-size: 0.9rem !important;
}

/* Question form styling */
body.learning-course-test-run .question-form {
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

body.learning-course-test-run #answer-form {
    width: 100% !important;
    max-width: 800px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* Fix answer options styling */
body.learning-course-test-run .question-page .course-form-check {
    margin: 10px 0 !important;
    padding: 15px !important;
    background: white !important;
    border: 2px solid #007bff !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
}

body.learning-course-test-run .question-page .course-form-check:hover {
    background: #f8f9fa !important;
    border-color: #0056b3 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-2px) !important;
}

body.learning-course-test-run .question-page .course-form-check-input {
    margin-right: 12px !important;
    transform: scale(1.2) !important;
}

body.learning-course-test-run .question-page .course-form-check-label {
    font-size: 1rem !important;
    color: #333 !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

body.learning-course-test-run .question-page .course-form-check-input:checked + .course-form-check-label {
    font-weight: 600 !important;
    color: var(--primary-blue) !important;
}

/* Drag and drop styling for ranking questions */
body.learning-course-test-run .ranking-container,
body.learning-course-test-run .drag-drop-container {
    background: white !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
}

body.learning-course-test-run .draggable-item,
body.learning-course-test-run .sortable-item {
    background: white !important;
    border: 2px solid var(--primary-blue) !important;
    border-radius: var(--border-radius) !important;
    padding: 12px 15px !important;
    margin: 8px 0 !important;
    box-shadow: var(--card-shadow) !important;
    cursor: move !important;
    transition: all 0.2s ease !important;
}

body.learning-course-test-run .draggable-item:hover,
body.learning-course-test-run .sortable-item:hover {
    border-color: #0056b3 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

body.learning-course-test-run .drop-zone {
    border: 2px dashed #007bff !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
    min-height: 50px !important;
    margin: 5px 0 !important;
    transition: all 0.2s ease !important;
}

body.learning-course-test-run .drop-zone.drag-over {
    border-color: #0056b3 !important;
    background: #e3f2fd !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3) !important;
}

/* Reset button styling */
body.learning-course-test-run #reset-progress-button {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
}

body.learning-course-test-run #reset-progress-button:hover {
    background-color: #e0a800 !important;
    border-color: #d39e00 !important;
    color: #000 !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Course-style continue button - matching course lesson gradient */
body.learning-course-test-run #continue-button,
body.learning-course-test-run .elbtn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: 2px solid transparent !important;
    color: white !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    font-family: var(--font-family) !important;
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

body.learning-course-test-run #continue-button:hover,
body.learning-course-test-run .elbtn:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: white !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

body.learning-course-test-run #continue-button:active,
body.learning-course-test-run #continue-button:focus,
body.learning-course-test-run .elbtn:active,
body.learning-course-test-run .elbtn:focus {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: white !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
    transform: translateY(0px) !important;
}

/* Course-style standard buttons */
body.learning-course-test-run .course-btn-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--font-family) !important;
    transition: all 0.3s ease !important;
}

body.learning-course-test-run .course-btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%) !important;
    transform: translateY(-1px) !important;
}

body.learning-course-test-run .course-btn-secondary {
    background: var(--light-bg) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--font-family) !important;
    transition: all 0.3s ease !important;
}

body.learning-course-test-run .course-btn-secondary:hover {
    background: var(--border-color) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Course-style typography */
body.learning-course-test-run h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
}

body.learning-course-test-run {
    font-family: var(--font-family) !important;
    color: var(--text-color) !important;
}

/* Course-style completion message */
body.learning-course-test-run .completion-message {
    background: white !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow) !important;
    border: 1px solid var(--border-color) !important;
    padding: 40px !important;
    text-align: center !important;
}

body.learning-course-test-run .completion-message h2 {
    color: var(--primary-blue) !important;
    margin-bottom: 20px !important;
}

/* Course-style warning button for reset */
body.learning-course-test-run .course-btn-warning {
    background: linear-gradient(135deg, #ff9500 0%, #ff7b00 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius) !important;
    font-family: var(--font-family) !important;
    transition: all 0.3s ease !important;
    font-size: 0.875rem !important;
}


/* Course-style checkbox choices for All That Apply questions */
body.learning-course-test-run .modern-checkbox-choice {
    border: 2px solid var(--primary-blue) !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
    padding: 15px 15px 15px 25px !important;
    background: white !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

body.learning-course-test-run .modern-checkbox-choice:hover {
    border-color: var(--secondary-blue) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

body.learning-course-test-run .modern-checkbox-choice.checked,
body.learning-course-test-run .modern-choice.selected {
    border-color: var(--primary-blue) !important;
    background: var(--light-bg) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Hide default Bootstrap checkbox completely */

/* Course-style custom checkbox */
body.learning-course-test-run .checkbox-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--primary-blue) !important;
    border-radius: 4px !important;
    margin-right: 12px !important;
    background: white !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

body.learning-course-test-run .modern-checkbox-choice.checked .checkbox-custom {
    background: var(--primary-blue) !important;
    border: none !important;
    color: white !important;
}





body.learning-course-test-run .modern-checkbox-choice .course-form-check-label {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: var(--text-color) !important;
}

body.learning-course-test-run .modern-checkbox-choice.checked .course-form-check-label {
    color: var(--text-color) !important;
}

/* Focus states for accessibility */
body.learning-course-test-run .modern-checkbox-choice:focus,
body.learning-course-test-run .modern-choice:focus {
    outline: 2px solid var(--primary-blue) !important;
    outline-offset: 2px !important;
}

/* Course-style True/False questions */
body.learning-course-test-run .true-false-container {
    display: flex !important;
    gap: 20px !important;
    margin: 20px 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

body.learning-course-test-run .modern-tf-choice {
    flex: 1 !important;
    max-width: 200px !important;
    min-width: 150px !important;
    padding: 20px !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: white !important;
    text-align: center !important;
    position: relative !important;
    box-shadow: var(--card-shadow) !important;
}

body.learning-course-test-run .modern-tf-choice:hover {
    border-color: var(--primary-blue) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

body.learning-course-test-run .modern-tf-choice.selected {
    border-width: 3px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.learning-course-test-run .modern-tf-choice.selected.true-choice {
    border-color: var(--success-color) !important;
    background: linear-gradient(135deg, #d4edda 0%, #f8fff9 100%) !important;
}

body.learning-course-test-run .modern-tf-choice.selected.false-choice {
    border-color: var(--danger-color) !important;
    background: linear-gradient(135deg, #f8d7da 0%, #fff8f8 100%) !important;
}

body.learning-course-test-run .tf-icon {
    font-size: 2.5rem !important;
    margin-bottom: 10px !important;
}

body.learning-course-test-run .true-icon {
    color: var(--success-color) !important;
}

body.learning-course-test-run .false-icon {
    color: var(--danger-color) !important;
}

body.learning-course-test-run .tf-text {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
    font-family: var(--font-family) !important;
}


body.learning-course-test-run .modern-tf-choice .course-form-check-label {
    display: block !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
}

/* Responsive design for true/false */
@media (max-width: 576px) {
    .true-false-container {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .modern-tf-choice {
        max-width: none !important;
        padding: 15px !important;
    }
    
    .tf-icon {
        font-size: 2rem !important;
    }
}

/* Course-style Multiple Choice questions */
body.learning-course-test-run .question-display-container {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden !important;
    margin: 24px 0 !important;
    border: 1px solid var(--border-color) !important;
}

body.learning-course-test-run .question-text-container {
    background: var(--primary-blue) !important;
    color: white !important;
    padding: 32px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

body.learning-course-test-run .question-icon {
    font-size: 2rem !important;
    color: var(--hd-white-a92) !important;
    flex-shrink: 0 !important;
    margin-top: 4px !important;
}

body.learning-course-test-run .question-text {
    font-size: 1.3rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    flex: 1 !important;
    font-family: var(--font-family) !important;
}

body.learning-course-test-run .question-text h1,
body.learning-course-test-run .question-text h2,
body.learning-course-test-run .question-text h3,
body.learning-course-test-run .question-text h4,
body.learning-course-test-run .question-text h5,
body.learning-course-test-run .question-text h6 {
    color: white !important;
    margin-bottom: 16px !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
}

body.learning-course-test-run .question-text p {
    margin-bottom: 16px !important;
    color: var(--hd-white-a92) !important;
}

body.learning-course-test-run .question-text ul,
body.learning-course-test-run .question-text ol {
    margin-left: 20px !important;
    color: var(--hd-white-a92) !important;
}

body.learning-course-test-run .question-text strong,
body.learning-course-test-run .question-text b {
    color: white !important;
    font-weight: 600 !important;
}

body.learning-course-test-run .question-form {
    padding: 32px !important;
    background: var(--light-bg) !important;
}

@media (max-width: 768px) {
    .question-text-container {
        padding: 24px !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .question-icon {
        font-size: 1.8rem !important;
        margin-top: 0 !important;
    }
    
    .question-text {
        font-size: 1.2rem !important;
    }
    
    .question-form {
        padding: 24px !important;
    }
}

/* Course-style Multiple Choice options */
body.learning-course-test-run .modern-choice {
    border: 2px solid var(--border-color) !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
    padding: 15px 15px 15px 25px !important;
    background: white !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

body.learning-course-test-run .modern-choice:hover {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}


/* Custom radio button styling */
body.learning-course-test-run .choice-custom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

body.learning-course-test-run .choice-custom i {
    position: absolute !important;
    font-size: 20px !important;
    color: var(--primary-blue) !important;
    transition: opacity 0.2s ease !important;
}

body.learning-course-test-run .choice-custom .selected-icon,
body.learning-course-test-run .modern-choice.selected .choice-custom .bi-circle {
    opacity: 0 !important;
}



/* Hide default radio button */

/* Choice content styling */
body.learning-course-test-run .choice-content {
    flex: 1 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: var(--text-color) !important;
    font-family: var(--font-family) !important;
}


/* Focus states for multiple choice */

/* Course-style footer with controls */
body.learning-course-test-run .elheader.h-50px {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%) !important;
    border-top: 1px solid var(--hd-white-a12) !important;
    padding: 8px 20px !important;
    min-height: 50px !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Course-style small buttons in footer */

/* Question counter styling */
body.learning-course-test-run .question-counter {
    color: white !important;
    font-weight: 600 !important;
    font-family: var(--font-family) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure proper container styling */
body.learning-course-test-run .vh-100 {
    height: 100vh !important;
}

/* Removed duplicate - already defined above */

/* Course-style headers */
body.learning-course-test-run .elheader {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%) !important;
    color: white !important;
    border: none !important;
    height: var(--header-height) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    z-index: 1000 !important;
}

body.learning-course-test-run .elheader a {
    color: white !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 8px !important;
    border-radius: 8px !important;
}

body.learning-course-test-run .elheader a:hover {
    color: var(--hd-white-a80) !important;
    background: var(--hd-white-a12) !important;
}

/* Fix any remaining visual conflicts */
body.learning-course-test-run .question-page h1, .question-page h2, .question-page h3, .question-page h4, .question-page h5, .question-page h6 {
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* #endregion */


/***************************************************************
--------------------Learning Course Lesson Run Styles--------------------
***************************************************************/
/* #region */


.learning-course-lesson-run .left-controls,
.learning-course-lesson-run .right-controls {
    display: flex;
    gap: 10px;
}


.learning-course-lesson-run .btn-warning-course {
    color: #000;
    border: 1px solid #ffc107;
}

.learning-course-lesson-run .btn-warning-course:hover {
    background-color: #ffb300 !important;
    border-color: #ffb300 !important;
}
/* #endregion */


/***************************************************************
--------------------Learning Track Node Item Styles--------------------
***************************************************************/
/* #region */



.learning-track-node-item .rounded-list a, 
.learning-track-node-item .rounded-list-scratch a {
    position: relative;
    display: inline-block;
    padding: .4em .4em .4em 2em;
    margin: .5em 0;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}

.learning-track-node-item .rounded-list a:hover, 
.learning-track-node-item .rounded-list-scratch a:hover {
    background: #eee;
}



[data-bs-theme=dark] .learning-track-node-item .rounded-list a {
    background: #404140 !important;
    color: #ffffff !important;
}

[data-bs-theme=dark] .learning-track-node-item .rounded-list a:hover {
    background: #2b3035 !important;
}










/* #endregion */


/***************************************************************
--------------------Reports Report View Styles--------------------
***************************************************************/
/* #region */

body.reports-report-view {
    background: #fff;
    margin: 0;
    padding: 2rem;
}

body.reports-report-view .report-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

body.reports-report-view .report-meta {
    color: #888;
    margin-bottom: 1.5rem;
}


body.reports-report-view .btn-print {
    float: right;
    margin-bottom: 1rem;
}

@media print {
    body.reports-report-view .btn-print,
    body.reports-report-view .btn-download {
        display: none !important;
    }
    
    body.reports-report-view {
        padding: 0;
    }
}
/* #endregion */


/***************************************************************
--------------------Reports Scheduled Report Form Styles--------------------
***************************************************************/
/* #region */


.reports-scheduled-report-form #user-selection-dropdown .multi-select-dropdown,
.reports-scheduled-report-form #user-selection-dropdown .multi-select-dropdown .btn,
.reports-scheduled-report-form #user-selection-dropdown .multi-select-dropdown .dropdown-menu {
    max-width: 100%;
    width: 100%;
}


/* #endregion */


/***************************************************************
--------------------Reports Generic Report Styles--------------------
***************************************************************/
/* #region */

@media screen {
    body.reports-generic-report {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f8f9fa;
        color: #333;
        line-height: 1.6;
    }
}

@media print {
    body.reports-generic-report {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: white;
        color: black;
        line-height: 1.4;
    }
}

body.reports-generic-report .report-download-buttons .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

body.reports-generic-report .report-download-buttons .btn-primary {
    background-color: var(--hd-blue);
    color: white;
}

body.reports-generic-report .report-download-buttons .btn-success {
    background-color: #23895F;
    color: white;
}

body.reports-generic-report .report-download-buttons .btn-info {
    background-color: #00B2E3;
    color: white;
}

body.reports-generic-report .report-download-buttons .btn-secondary {
    background-color: #939598;
    color: white;
}

body.reports-generic-report .report-download-buttons .btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

[data-bs-theme=dark] body.reports-generic-report .report-download-buttons .btn-primary {
    background-color: #76d7c4;
    color: #212529;
}

[data-bs-theme=dark] body.reports-generic-report .report-download-buttons .btn-success {
    background-color: #44B78B;
    color: #212529;
}

[data-bs-theme=dark] body.reports-generic-report .report-download-buttons .btn-info {
    background-color: #62DCFA;
    color: #212529;
}

[data-bs-theme=dark] body.reports-generic-report .report-download-buttons .btn-secondary {
    background-color: #CFD0D1;
    color: #212529;
}
/* #endregion */


/***************************************************************
--------------------Reports Email Scheduled Report Styles--------------------
***************************************************************/
/* #region */
/* Note: Email templates typically need inline styles for compatibility,
   but including here for consistency and potential web preview use */

body.reports-email-scheduled-report {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 600px;
    margin: 0 auto;
}

body.reports-email-scheduled-report .header {
    background-color: #f5f5f5;
    padding: 15px;
    border-bottom: 3px solid #007bff;
    margin-bottom: 20px;
}

body.reports-email-scheduled-report .content {
    padding: 20px;
}

body.reports-email-scheduled-report .footer {
    margin-top: 30px;
    font-size: 12px;
    color: #777;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

body.reports-email-scheduled-report h1 {
    color: #007bff;
    margin: 0 0 10px 0;
    font-size: 24px;
}

body.reports-email-scheduled-report .info {
    background-color: #e8f4ff;
    padding: 10px;
    border-left: 4px solid #007bff;
    margin: 15px 0;
}
/* #endregion */


/***************************************************************
--------------------Ticket History Report Styles--------------------
***************************************************************/
/* #region */

.ticket-history-report .timeline-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.ticket-history-report .timeline-container {
    max-height: 1000px;
    overflow-y: auto;
}

/* #endregion */


/***************************************************************
--------------------Ticket Dashboard Styles--------------------
***************************************************************/
/* #region */




/* Dark mode datepicker styling */
[data-bs-theme="dark"] .ui-datepicker {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}



[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-prev,
[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-next {
    background: #4a5568 !important;
    border: 1px solid #6b7280 !important;
}


[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-prev span:before {
    content: "◀" !important;
    color: #000000 !important;
    font-size: 12px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

[data-bs-theme="dark"] .ui-datepicker .ui-datepicker-next span:before {
    content: "▶" !important;
    color: #000000 !important;
    font-size: 12px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


[data-bs-theme="dark"] .ui-datepicker td {
    border: 1px solid #4a5568 !important;
}

[data-bs-theme="dark"] .ui-datepicker td a {
    color: #e2e8f0 !important;
    background: transparent !important;
    border: none !important;
}







/* Disabled dates styling for dark mode */


/* Regular light mode overrides to ensure consistency */



/* Mobile Responsive Improvements */
@media (max-width: 992px) {
    /* Hide Customer column on tablets */
    .ticket-dashboard .row > .col-2:nth-child(3),
    .ticket-dashboard .row > .col-3:nth-child(3) {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Stack ticket action buttons */





    /* Card improvements */
    .ticket-dashboard .card-body {
        padding: 0.5rem;
    }

    /* Make rows more compact */
    .ticket-dashboard .row {
        font-size: 0.75rem;
        margin-left: 0;
        margin-right: 0;
    }

    .ticket-dashboard .row > div {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Hide header row and extra columns on mobile */

    /* Hide Created/Completed/Hours columns on mobile */

    /* Adjust remaining column widths for mobile */
    .ticket-dashboard .row.py-2 > .col-2:first-child {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .ticket-dashboard .row.py-2 > .col-4:nth-child(2),
    .ticket-dashboard .row.py-2 > .col-3:nth-child(2) {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .ticket-dashboard .row.py-2 > .col-2:nth-child(4),
    .ticket-dashboard .row.py-2 > .col-2:last-child {
        flex: 0 0 35%;
        max-width: 35%;
        text-align: center !important;
    }

    /* Allow text to wrap on mobile */
    .ticket-dashboard .text-truncate {
        white-space: normal !important;
        word-wrap: break-word;
        overflow: visible;
    }

    /* Badge improvements */
    .ticket-dashboard .badge {
        font-size: 0.65rem;
        padding: 0.25em 0.45em;
        white-space: nowrap;
    }

    /* Card header improvements */
    .ticket-dashboard .card-header .row {
        flex-direction: column;
        align-items: stretch !important;
    }

    .ticket-dashboard .card-header .col,
    .ticket-dashboard .card-header .col-auto {
        width: 100%;
        text-align: center;
        margin: 0.25rem 0;
    }


    /* Compact rows */
    .ticket-dashboard .row.py-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    /* Extra small devices - show minimal info */



    /* Show only Ticket #, Name, and Status on very small screens */

    /* Adjust widths for minimal view */
    .ticket-dashboard .row.py-2 > .col-2:first-child {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .ticket-dashboard .row.py-2 > .col-4:nth-child(2),
    .ticket-dashboard .row.py-2 > .col-3:nth-child(2) {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .ticket-dashboard .badge {
        font-size: 0.6rem;
        padding: 0.2em 0.4em;
    }

    .ticket-dashboard .btn-lg {
        font-size: 0.85rem;
        padding: 0.45rem 0.65rem;
    }

    .ticket-dashboard .card-body {
        padding: 0.4rem !important;
    }

    /* Compact ticket rows */
    .ticket-dashboard .row.py-2 {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.4rem;
    }
}
/* #endregion */


/***************************************************************
--------------------Admin Task Overview Styles--------------------
***************************************************************/
/* #region */

.admin-task-overview .task-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin: 10px 0;
    background: #f9f9f9;
}

.admin-task-overview .task-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
}

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

.admin-task-overview .status-inactive {
    background: #f8d7da;
    color: #721c24;
}

.admin-task-overview .status-error {
    background: #f5c6cb;
    color: #721c24;
}

.admin-task-overview .status-paused {
    background: #fff3cd;
    color: #856404;
}

.admin-task-overview .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.admin-task-overview .stat-box {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
}

.admin-task-overview .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #417690;
}

.admin-task-overview .stat-label {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
}

.admin-task-overview .section-header {
    background: #417690;
    color: white;
    padding: 10px 15px;
    margin: 20px 0 10px 0;
    border-radius: 5px;
}

.admin-task-overview .task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
}
/* #endregion */


/***************************************************************
--------------------Groups Group Select Group Styles--------------------
***************************************************************/
/* #region */

.groups-group-select-group .group-ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.groups-group-select-group .group-ul.border-start {
    border-left: 3px solid #007bff;
    margin-left: 1rem;
    padding-left: 1rem;
    position: relative;
}

.groups-group-select-group .group-li {
    position: relative;
    margin-bottom: 0.25rem;
}

.groups-group-select-group .group-li .mainfont {
    padding: 0.25rem 0;
    transition: all 0.15s ease-in-out;
}


.groups-group-select-group .group-ul .group-ul .group-ul.border-start,
.dept-select-border-yellow {
    border-left-color: #ffc107;
}

.groups-group-select-group .group-ul .group-ul .group-ul .group-ul.border-start,
.dept-select-border-red {
    border-left-color: #dc3545;
}

.groups-group-select-group .group-ul .group-ul .group-ul .group-ul .group-ul.border-start,
.dept-select-border-purple {
    border-left-color: #6f42c1;
}

.groups-group-select-group .group_name {
    font-weight: 500;
    text-decoration: none;
    color: var(--bs-body-color, #2c3e50);
}

.groups-group-select-group .group_name:hover {
    color: #007bff;
    text-decoration: none;
}

@media (prefers-color-scheme: dark) {
    .groups-group-select-group .group_name {
        color: #e2e8f0;
    }
}

[data-bs-theme="dark"] .groups-group-select-group .group_name {
    color: #e2e8f0;
}

.groups-group-select-group .group-collapse-toggle {
    margin-right: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    transition: color 0.15s ease;
}


.groups-group-select-group .group-collapse-toggle:hover {
    color: #007bff;
}

.groups-group-select-group .visible-hover-child a {
    color: var(--bs-secondary-color, #6c757d);
    margin-left: 0.5rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.groups-group-select-group .visible-hover-child a:hover {
    background: var(--bs-secondary-bg, #f8f9fa);
    color: #007bff;
}

@media (prefers-color-scheme: dark) {
    .groups-group-select-group .visible-hover-child a:hover {
        background: #4a5568;
    }
}

[data-bs-theme="dark"] .groups-group-select-group .visible-hover-child a:hover {
    background: #4a5568;
}

.groups-group-select-group .group-li .d-flex {
    align-items: center;
    min-height: 1.5rem;
}

.groups-group-select-group .accordion-item {
    border: none;
    background: transparent;
}

.groups-group-select-group .accordion-body,
.home-dash .hd-kei-resource-item.is-locked:hover,
.home-dash .hd-perm-item.is-disabled:hover,
.home-dash .hd-grp-members-list::-webkit-scrollbar-track {
    background: transparent;
}
/* #endregion */


/***************************************************************
--------------------Questions Multiple Choice Survey Styles--------------------
***************************************************************/
/* #region */

.questions-multiple-choice-survey .modern-choice {
    border: 1px solid var(--hd-line) !important;
    border-radius: var(--hd-radius-sm) !important;
    padding: 12px 16px 12px 20px !important;
    margin: 8px 0 !important;
    transition: border-color .15s ease, background .15s ease !important;
    cursor: pointer !important;
}




.questions-multiple-choice-survey .modern-choice .choice-custom {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--hd-line) !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-right: 12px !important;
    position: relative !important;
    transition: border-color .15s ease, background .15s ease !important;
}


.questions-multiple-choice-survey .modern-choice.selected .choice-custom::after {
    content: '✓' !important;
    color: white !important;
    font-weight: bold !important;
    position: absolute !important;
    top: -2px !important;
    left: 4px !important;
    font-size: 14px !important;
}
/* #endregion */


/***************************************************************
--------------------Suite Customer Support Styles--------------------
***************************************************************/
/* #region */

@media (max-width: 768px) {
    
    .suite-customer-support .btn-tickets {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    
    
    .suite-customer-support .scrollcard5 {
        max-height: 300px !important;
    }
}
/* #endregion */


/***************************************************************
--------------------Utility Classes for Inline Style Replacement--------------------
***************************************************************/
/* #region */

/* Width utilities */
.w-5,
.w-5-feature { width: 5%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-10 { width: 10%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-15 { width: 15%; }
.w-18 { width: 18%; }
.w-20 { width: 20%; }
.w-22 { width: 22%; }
.w-28 { width: 28%; }
.w-32px { width: 32px; }
.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-70px { width: 70px; min-width: 70px; }
.w-150px { width: 150px; min-width: 150px; }
.w-160px { width: 160px; }
.w-230px { width: 230px; max-width: 230px; }
.w-250px { width: 250px; }
.w-400px { width: 400px; max-width: 400px; }
.w-500px { width: 500px; max-width: 500px; }
.w-600px { width: 600px; max-width: 600px; }
.w-auto { width: auto; }
.w-auto-min-70 { width: auto; min-width: 70px; }
.w-95vw { max-width: 95vw; }

/* Height utilities */
.h-28px { height: 28px; }
.h-31px { height: 31px; }
.h-32px { height: 32px; }
.h-200px { height: 200px; }
.h-400px { height: 400px; max-height: 400px; }
.h-500px { max-height: 500px; }
.h-600px { max-height: 600px; }
.h-70vh { height: 70vh; }
.h-90vh { height: 90vh; }

/* Display utilities */

/* Color utilities */
.color-transparent { color: transparent; }
.color-red,
.text-color-scheme-red,
.text-red,
.text-error { color: red; }.color-suite-blue,
.hd-topnav-toggle:hover .hd-topnav-caret,
.hd-topnav-toggle[aria-expanded="true"] .hd-topnav-caret,
.hd-kl-delete-outcome--deleted_with_notify .hd-kl-delete-outcome-headline .bi,
.hd-announce-toggle:hover,
#home-bookmarks .hd-bm-card:hover .hd-bm-name,
.home-dash .hd-dept-tab:hover .bi,
.home-dash .hd-dept-tab.is-active .bi,
.home-dash .hd-dept-mv-vision .hd-dept-mv-label .bi,
.home-dash .hd-dept-kra-chip:hover .hd-dept-kra-open,
.home-dash .hd-dept-member-groups-head .bi,
.home-dash .hd-dept-refs-tab:hover .bi,
.home-dash .hd-dept-refs-card-link:hover,
.home-dash .hd-dept-task:hover .hd-dept-task-sync,
.home-dash .hd-groupinfo-type:hover .hd-groupinfo-type-face .bi,
.hd-field-help .bi,
.home-dash .hd-maint-eq-row.is-selected .hd-maint-eq-row-code,
.home-dash .hd-field-help-link:hover,
.home-dash .hd-personnel-row:hover .hd-personnel-name,
.home-dash .hd-curriculum-section .hd-panel-head .hd-panel-title .bi,
.home-dash .hd-task-tabnav-btn:hover .bi,
.home-dash .hd-task-tabnav-btn.active .bi,
.home-dash .hd-proc-trial-empty .bi,
.home-dash .hd-qed-list-link:hover,
.home-dash .hd-emp-mgr-card:hover .hd-emp-card-name,
.home-dash .hd-grp-segctl-btn:hover .bi,
.home-dash .hd-licmgr-list-item.is-selected .hd-licmgr-list-title,
.home-dash .hd-prog-activity-user:hover,
.home-dash .hd-ugm-row.is-primary .hd-ugm-row-icon,
.home-dash .hd-emp-card:hover .hd-emp-card-name,
.home-dash .hd-emp-line a:hover,
.home-dash .hd-cat-default-toggle[aria-pressed="true"],
.hd-modal .hd-field-help .bi,
.hd-modal.hd-jc-modal .hd-field-label .bi,
.hd-modal.hd-cert-modal .hd-field-label .bi,
.hd-modal.hd-agency-modal .hd-field-label .bi,
.hd-modal.hd-ind-modal .hd-field-label .bi,
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-section-title .bi,
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-group-title .bi,
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-count .bi,
.hd-modal .hd-app-info-note .bi,
.hd-modal.hd-app-modal .hd-field-label .bi,
.hd-modal.hd-feat-modal .hd-field-label .bi,
.hd-modal.hd-lic-modal .hd-lic-modal-section-title .bi,
.hd-modal.hd-mfg-modal .hd-field-label .bi,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-users-head .bi,
.home-dash .hd-gf-members-hint .bi,
.home-dash .hd-gmove-tree-label.is-current .hd-gmove-tree-glyph,
.home-dash .hd-cl-filter-btn .bi:first-child,
.home-dash .hd-cl-action.is-info,
.home-dash .hd-kl-pick > .dropdown-toggle:hover,
.home-dash .hd-eq-filter-btn:hover .bi,
.home-dash .hd-emp-view-btn.is-active .bi,
.home-dash .hd-emp-line:hover,
.home-dash .hd-emp-line:hover .bi,
.home-dash .hd-emp-msg-item.is-unread .hd-emp-msg-from,
.home-dash .hd-kb-acc-sync-link:hover .hd-kb-acc-sync-title,
.hd-modal.hd-tb-tocustom-modal .hd-tb-tocustom-body strong,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-prompt strong,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row:hover .hd-tb-movetask-row-title,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row:focus-visible .hd-tb-movetask-row-title,
.home-dash .hd-pb-task-picker-btn:hover::after,
.home-dash .hd-pb-task-picker-btn:focus-visible::after,
.home-dash .hd-pb-task-picker-btn[aria-expanded="true"]::after,
.home-dash .hd-kb-dropdown-item.is-active .bi,
.home-dash .hd-lst-list-row .hd-lst-list-link:hover,
.home-dash .hd-lst-list-row .hd-lst-list-link:focus-visible,
.home-dash .hd-lst-list-row.is-active .hd-lst-list-link,
.home-dash .hd-lst-plan-row.is-active > .hd-lst-plan-cleanup,
.home-dash .hd-lst-plan-row.is-closed > .hd-lst-plan-cleanup,
.home-dash .hd-lst-plan-participant-search-row .bi,
.hd-modal.hd-cr-summary-modal .hd-cr-summary-user-label .bi,
.hd-modal.hd-emp-notifications-modal .hd-modal-title .bi,
.hd-modal.hd-news-preview-modal .hd-news-preview-card-head .bi,
.home-dash .hd-cat-toggle-wrap:has(.hd-cat-toggle-input:checked) .hd-cat-default-toggle,
.home-dash .hd-cat-toggle-wrap:has(.hd-cat-toggle-input:checked) .hd-cat-default-radio { color: var(--hd-blue); }
.home-dash .hd-cpv-lesson-row.is-started .hd-cpv-lesson-status { color: #eab308; }
.bg-filter-header { background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; }

/* Object fit utilities */

/* Size combinations */
.size-32 { width: 32px; height: 32px; }
.size-32-borderless { width: 32px; height: 32px; border: none; background: none; }

/* Position and z-index utilities */
.z-index-2,
#topLayer { z-index: 2; }
.z-index-500 { z-index: 500; }
.z-index-1050 { z-index: 1050; }
.z-index-1080,
.home-dash .hd-grp-deptpick-menu { z-index: 1080; }
.z-index-9999 { z-index: 9999; }

/* Cursor utilities */

/* Line height utilities */
.lh-1,
.hd-dept-add-btn-label,
.hd-login-status .bi { line-height: 1; }
.lh-15 { line-height: 1.5; }
.lh-18 { line-height: 1.8; }

/* Font size utilities */
.fs-08rem { font-size: 0.8rem; }
.fs-09em { font-size: 0.9em; }
.fs-16px { font-size: 16px; }

/* Font weight utilities */

/* Gap utilities */
.gap-8px { gap: 8px; }
.gap-10px { gap: 10px; }
.gap-15rem { gap: 1.5rem; }

/* Word break utilities */
.word-break-keep { word-break: keep-all; }
.word-break-keep-wrap { word-break: keep-all; overflow-wrap: break-word; }

/* Overflow utilities */
.overflow-y-auto,
.overflow-y-scroll { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* Border utilities */
.border-0,
.iframe-no-border { border: 0; }
.border-left-green { border-left: 4px solid #28a745; }

/* List utilities */
.list-style-none { list-style-type: none; }

/* Padding utilities */
.p-15px { padding: 15px; }
.pe-075rem { right: 0.75rem; }

/* Margin utilities */
.me-8px { margin-right: 8px; }
.mt-20px { margin-top: 20px; }
.mb-8px { margin-bottom: 8px; }

/* Pointer events utilities */

/* Box shadow utilities */
.shadow-report { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* Border radius utilities */
.radius-8px { border-radius: 8px; }
.radius-5px { border-radius: 5px; }
.radius-3px { border-radius: 3px; }

/* Background with styling combos */
.bg-report-download {
    background: var(--hd-blue);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
}

.bg-report-summary,
.report-summary-box {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #28a745;
    border-radius: 5px;
}

/* Flex utilities */
.flex-shrink-0-w25 { flex-shrink: 0; width: 25%; word-break: keep-all; overflow-wrap: break-word; }
.flex-shrink-0-w15 { flex-shrink: 0; width: 15%; word-break: keep-all; }
.flex-shrink-0-w5 { flex-shrink: 0; width: 5%; }
.flex-grow-1-wordbreak { flex-grow: 1; word-break: keep-all; overflow-wrap: break-word; }

/* Progress bar utilities */
.progress-mini { width: 60px; height: 20px; }

/* Canvas utilities */
.canvas-chart,
.chart-canvas { max-width: none !important; max-height: none !important; }

/* Chart container */
.chart-container-200,
.chart-container { width: 100%; height: 200px; position: relative; }

/* Dropdown menu sizing */
.dropdown-min-220,
.home-dash .hd-gf-members-col-user { min-width: 220px; }
.dropdown-min-250 { min-width: 250px; }
.dropdown-max-300,
.max-h-300-scroll { max-height: 300px; overflow-y: auto; min-width: 250px; }

/* Dynamic background image */
.course-background-dynamic,
.course-bg-dynamic { 
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

/* Font family utilities */
.font-mainfont { font-family: Mainfont; }
.font-monospace-feed { font-family: monospace; font-size: 0.9em; padding: 15px; }

/* Display flex combinations */
.flex-center-gap { display: flex; align-items: center; gap: 8px; }

/* Badge status styles */
.badge-status-inactive,
.admin-badge-inactive {
    background: #f8d7da;
    color: #721c24;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: bold;
}

.badge-status-overdue,
.admin-badge-overdue {
    background: #fff3cd;
    color: #856404;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: bold;
}

.badge-status-active,
.admin-badge-active {
    background: #d4edda;
    color: #155724;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: bold;
}

/* Admin panel specific utilities */
.admin-report-info,
.admin-info-box {
    background: #e8f4fd;
    padding: 10px;
    border-radius: 5px;
    margin: 5px 0;
}

.admin-report-warning,
.admin-warning-box {
    background: #ffeaa7;
    padding: 10px;
    border-radius: 5px;
}

/* Match area for surveys */
.match-area-min,
.match-area-box {
    min-width: 150px;
    min-height: 40px;
    border: 1px dashed #ccc;
}

/* Remove match icon */
.remove-match-icon {
    margin-left: 8px;
    cursor: pointer;
    color: #dc3545;
}

/* Owly bullet indentation */
.owly-bullet-indent,
.indent-1em,
.bullet-indent {
    padding-left: 1em;
}

/* Top position for password toggle */
.password-toggle-btn {
    right: 0.75rem;
    z-index: 2;
}

/* Grid layout utilities */
.grid-3col,
.grid-procedure-test,
.grid-3-cols { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: 1; 
}

/* Vertical align icon */
.vertical-align-text-bottom,
.vertical-align-bottom {
    vertical-align: text-bottom;
}

/* Icon sizing */
.icon-w16-h16,
.icon-16 {
    width: 16px;
    height: 16px;
}

.icon-size-25rem,
.fs-25rem {
    font-size: 2.5rem;
}

.icon-size-2rem,
.fs-2rem,
.home-dash .hd-fd-block-empty .bi {
    font-size: 2rem;
}

/* Max width with margin auto */
.max-w-150 {
    max-width: 150px;
}

/* Iframe border */

/* Form control adjustments */
.dur-single-input-wrapper {
    max-width: 250px;
}


/* Absolute positioning top -100 for hidden inputs */
.hidden-datepicker-input {
    position: absolute;
    top: -100px;
    width: 0px;
    z-index: -10;
}

/* Admin icon color */
.admin-icon-color {
    color: #417690;
}

/* Hover show parent utility - already exists but adding specific */
.visible-hover-parent:hover .visible-hover-child {
    visibility: visible;
}

/* Margin indent for bullets */

/* Fixed positioning utilities */
.fixed-bottom-right {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9999;
}

.fixed-top-right-p3 {
    position: fixed;
    top: 0;
    right: 0;
    padding: 1rem;
    z-index: 1050;
}

/* Min width and max width combinations for modals */
.modal-report-download {
    min-width: 260px;
    max-width: 350px;
}

/* Absolute positioning with width */
.absolute-z500-w99,
.pos-abs-z500 {
    position: absolute;
    z-index: 500;
    width: 99%;
    background: transparent;
}

/* Color scheme specific */

/* Test reset button */
.btn-test-reset,
.btn-warning-testing {
    background-color: #ffc107;
    border-color: #ffc107;
}

/* Grid display for procedure tests */

/* User select department borders */

/* Vertical align middle for small icons */
.align-middle-icon {
    margin-right: 0.5rem;
    vertical-align: text-bottom;
}

/* Progress bar dynamic width - use inline style for percentage */

/* Top navbar search container */
.search-results-container {
    max-width: 600px;
    margin: 0 auto;
}

/* DurationWidget specific margin */
.dur-toggle-margin,
.widget-checkbox-margin {
    margin-top: 0.15rem;
}


/* Minimum height for flex items */
.min-h-40px {
    min-height: 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .w-95vw {
        max-width: 95vw;
    }
}

/* Height utility for buttons and inputs */
.h-31px {
    height: 31px;
}

/* Font size utility for dropdowns */

/* Min-width for dropdowns */

/* Combined height and font-size for dropdown buttons */
.dropdown-btn-sm {
    height: 31px;
    font-size: 0.75rem;
}

/* Font family utility */
.font-mainfont {
    font-family: Mainfont;
}

/* Color utilities */

/* Background white */

/* Position relative */

/* Max-width for search container */
.max-w-600 {
    max-width: 600px;
}

/* Icon sizing utilities */

/* Feature list layout utilities */
.feature-header {
    line-height: 1.8;
    gap: 1.5rem;
    font-size: 0.75rem;
    word-break: keep-all;
}

.feature-row {
    line-height: 1.8;
    gap: 1.5rem;
    font-size: 0.75rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.w-25-feature {
    width: 25%;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.w-15-feature {
    width: 15%;
    word-break: keep-all;
}


/* List style utilities */
.list-style-none {
    list-style-type: none;
}

/* Report notification styling */
.report-notification {
    display: none;
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9999;
    min-width: 260px;
    max-width: 350px;
    background: var(--hd-blue);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    gap: 10px;
}

.report-flex-center {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.report-icon-info {
    color: var(--hd-blue);
    font-size: 14px;
}




.report-total-text {
    font-size: 16px;
    color: #333;
}

/* Scrollable content utilities */
.max-h-600-scroll,
.card-body-600 {
    max-height: 600px;
    overflow-y: auto;
}

.max-h-500-scroll {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Max width utilities */
.max-w-150 {
    max-width: 150px;
}

/* Question matching area */

/* Remove match icon */
.remove-match-icon {
    margin-left: 8px;
    cursor: pointer;
    color: #dc3545;
}

/* Icon size utilities */


/* Admin status badges */






.admin-margin-top {
    margin-top: 10px;
}

/* Widget styling */


/* Iframe border */

/* Bullet indentation for Owly */

/* Object fit utilities */

.object-fit-contain {
    object-fit: contain;
}

/* Cursor utilities */

/* Contact list scrolling */
.contact-list-scroll {
    max-height: 150px;
    overflow-y: auto;
}

/* Course background utilities */

/* Group form utilities */
.form-check-scroll {
    max-height: 200px;
    overflow-y: auto;
}

.min-h-150 {
    min-height: 150px;
}

.min-h-120 {
    min-height: 120px;
}

/* Progress bar utilities */

/* Card body scrolling */
.card-body-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

/* Admin error text */

.admin-margin-20 {
    margin: 20px 0;
}

/* Bootstrap variable colors */
.bg-bs-tertiary {
    background-color: var(--bs-tertiary-bg);
}


/* Progress bar heights */
.progress-8,
.home-dash .hd-prog-meter-bar {
    height: 8px;
}


/* User progress container */
.user-progress-scroll {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Card body with max height */

/* Form control widths */
.w-40px {
    width: 40px;
}

.w-fit-content {
    width: fit-content;
}

/* Font size utilities */

/* Form element utilities */
.form-flex-center,
.search-container .list_item .col,
.search-container .align-self-center,
.hdr_img_txt {
    display: flex;
    align-items: center;
}


.min-w-80 {
    min-width: 80px;
}

/* Group collapse utilities */
.group-collapse-width {
    width: 1rem;
    display: inline-block;
}

/* Form width utilities */

/* Toast notification styling */
.toast-error {
    display: none;
    color: #fff;
    background: #d9534f;
    padding: 10px 20px;
    border-radius: 4px;
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-weight: bold;
}

.toast-close-btn {
    background: none;
    border: none;
    color: #fff;
    float: right;
    font-size: 18px;
    margin-left: 10px;
}

/* Course launch utilities */
.max-w-800 {
    max-width: 800px;
}

/* Icon sizes */
.fs-3rem {
    font-size: 3rem;
}

.fs-4rem {
    font-size: 4rem;
}

/* Learning button styling */

/* Activity monitor utilities */
.activity-feed-height {
    height: 70vh;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.9em;
    padding: 15px;
}

.z-index-1050 {
    z-index: 1050;
}

/* List style utilities */
.list-disc {
    list-style-type: disc;
}

/* Font and layout utilities */
.lh-15 {
    line-height: 1.5;
}

.lh-18-fs-075 {
    line-height: 1.8;
    font-size: 0.75rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Grid layout utilities */

/* Chart container */


/* Employee message utilities */


/* Track dropdown */
.track-dropdown {
    min-width: 500px;
}

/* Position absolute utilities */

/* Text alignment utility */

/* Small text utility */
.text-small-muted {
    font-size: 0.75rem;
    font-weight: 300;
}

/* Notification badge - prevent flashing */
#unread-notification-count {
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

#unread-notification-count.d-none-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Prevent FOUC (Flash of Unstyled Content) */

/* Additional utility classes for final cleanup */



.list-disc {
    list-style-type: disc;
}


.font-mainfont {
    font-family: Mainfont;
}

/* Width auto utility */
.w-auto {
    width: auto;
}

/* Search Container Dropdown Overlay */
.search-container {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050; /* Higher than Bootstrap modals (1040) */
    max-height: 300px;
    overflow-y: auto;
    display: none; /* Hidden by default, controlled by JavaScript */
    margin: 0;
    /* Apply the clean dropdown styling to match the screenshot */
    background-color: #ffffff;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Ensure the search container content has proper styling */

.search-container .col,
.hd-modal .hd-section-card-body.p-0,
#mySidebar.hd-sidebar a,
.home-dash .hd-maint,
.home-dash.hd-utilities,
.home-dash.hd-jc,
.home-dash.hd-cert,
.home-dash .hd-gf-members-body,
.home-dash .hd-cl-results-body,
.home-dash .hd-kl-panel-body,
.home-dash.hd-agency,
.home-dash.hd-cfg,
.home-dash.hd-settings,
.home-dash .hd-news-body,
.home-dash .hd-fd-panel-body,
.hd-modal.hd-gb-remove-modal .modal-body,
.hd-modal.hd-kb-remove-modal .modal-body,
.hd-modal.hd-tb-remove-modal .modal-body,
.home-dash .hd-lst-assembled-item {
    padding: 0;
}

/* Style the list items to match the screenshot */
.search-container .list_item {
    padding: 8px 12px;
    margin: 0;
    min-height: 40px; /* Ensure consistent height */
    display: flex;
    align-items: center;
}


/* Ensure text and icons align properly */

/* Style the add buttons */
.search-container .fa-circle-plus {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}


/* Ensure parent search containers have relative positioning */

/* Preserve original search container content styling */
.search-container .alt1 {
    background-color: transparent; /* Let the container background show through */
    cursor: pointer;
    border-radius: 0; /* Remove individual item rounding */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle divider between items */
}

.search-container .alt1:hover {
    background-color: #F8F9FA; /* Subtle hover effect */
}

.search-container .alt1:first-child {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.search-container .alt1:last-child {
    border-bottom: none;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Ensure the search_shadow from the template works properly */
.search-container .search_shadow {
    background-color: transparent; /* Don't override the container background */
    box-shadow: none; /* Container already has shadow */
    border-radius: 0.375rem;
}

/* Dark theme support for search containers */
[data-bs-theme=dark] .search-container {
    background-color: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}

[data-bs-theme=dark] .search-container .alt1 {
    background-color: transparent;
    color: var(--bs-body-color, #ffffff);
    border-bottom-color: var(--hd-white-a12);
}

[data-bs-theme=dark] .search-container .alt1:hover {
    background-color: var(--bs-gray-700, #495057);
}

/* Ensure all dropdowns render above content */
.dropdown-menu {
    z-index: 1055 !important; /* Higher than search containers */
}

/* Fix for Bootstrap dropdowns in tables and cards */
.table-responsive .dropdown-menu,
.card .dropdown-menu {
    position: fixed !important;
}

/* Prevent overflow issues with search containers */
.search-container-wrapper {
    position: relative;
    overflow: visible;
}

/* Additional utility for search bars that need relative positioning */

/* #endregion */


/* #region */


  
/* #endregion */

.btn_border{
	border-width:1px;
	border-style:solid;
	border-color:black;
}

.img_bg{
	aspect-ratio:1 / 1;
	border-radius:4px;
	background-color:#E9E7E7;
	padding:4px;
	color:#848080;
}


.gallery-img{
	height:200px;
	width:100%;
	object-fit:cover;
}

.question-sortable-item{
	cursor:grab;
	background:#f8f9fa;
	border:1px solid #dee2e6;
	margin-bottom:5px;
	padding:10px;
	border-radius:4px;
}


.ghost{
	opacity:0.5;
	background:#e9ecef;
}


.imageTarget {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}




/* ===========================================================================
   ============================================================================
   HOME DASHBOARD — REIMAGINED
   ============================================================================
   Migrated from inline <style> blocks in:
     - templates/index.html              (scoped under .home-dash)
     - templates/bookmark_modals.html    (scoped under .hd-modal)

   All selectors are scoped with unique .hd-*, .hdm-*, or parent-ID prefixes
   (#home-bookmarks, .home-dash, .hd-modal) so they cannot affect unrelated
   parts of the application.
   ============================================================================
   =========================================================================== */

/* ===========================================================================
   HOME PAGE (index.html)
   =========================================================================== */

/* =================================================================
   Home Dashboard — reimagined (bold / modern)
   Scoped under .home-dash so it cannot leak into the rest of the app.
   Palette: black #000, steel-blue var(--hd-blue), deep purple var(--hd-lime),
   plus neutral surfaces. Font: Inter (loaded by base.html).
   ================================================================= */
/* ===========================================================================
   SUITE PALETTE — single source of truth for theming.
   Phase A consolidation (2026-05-14): the suite token set (formerly scoped
   to .home-dash) and the parallel modal token set (formerly scoped to
   .hd-modal) are merged here at :root so every surface — pages, modals,
   guest screens — resolves the same variables, and a per-tenant override
   file only has to redeclare these. The modal set's two non-overlapping
   values keep distinct names: --hd-danger (the modal danger red) and
   --hd-modal-radius (14px — the page radius --hd-radius is 16px).
   =========================================================================== */
:root {
	--hd-navy:       #000000;
	--hd-navy-2:     #1a1a1a;
	--hd-blue:       #346092;
	--hd-blue-soft:  #c2d2e3;
	--hd-lime:       #5C2D88;
	--hd-lime-soft:  #c8b5dd;
	--hd-ink:        #0f0f14;
	--hd-muted:      #6b6b78;
	--hd-line:       #e8e8ec;
	--hd-surface:    #ffffff;
	--hd-surface-2:  #f7f7f8;
	--hd-danger:     #C91B1B;
	--hd-radius:     16px;
	--hd-radius-sm:  10px;
	--hd-modal-radius: 14px;
	--hd-shadow-xs:  0 1px 2px rgba(0,0,0,.05);
	--hd-shadow-sm:  0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--hd-shadow-md:  0 10px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
	--hd-shadow-lg:  0 24px 48px rgba(0,0,0,.16);
	/* ---- Brand alpha-tint scale (Phase B, 2026-05-14). ----
	   The brand colors were used at ~24/20/20 arbitrary alpha
	   levels; normalized here to a 7-step scale (6/12/18/25/35/
	   55/90). A per-tenant theme file regenerates these from the
	   tenant brand color. */
	--hd-blue-a06:        rgba(52, 96, 146, .06);
	--hd-blue-a12:        rgba(52, 96, 146, .12);
	--hd-blue-a18:        rgba(52, 96, 146, .18);
	--hd-blue-a25:        rgba(52, 96, 146, .25);
	--hd-blue-a35:        rgba(52, 96, 146, .35);
	--hd-blue-a50:        rgba(52, 96, 146, .5);
	--hd-blue-a92:        rgba(52, 96, 146, .92);
	--hd-white-a06:       rgba(255, 255, 255, .06);
	--hd-white-a12:       rgba(255, 255, 255, .12);
	--hd-white-a18:       rgba(255, 255, 255, .18);
	--hd-white-a25:       rgba(255, 255, 255, .25);
	--hd-white-a35:       rgba(255, 255, 255, .35);
	--hd-white-a50:       rgba(255, 255, 255, .5);
	--hd-white-a65:       rgba(255, 255, 255, .65);
	--hd-white-a80:       rgba(255, 255, 255, .8);
	--hd-white-a92:       rgba(255, 255, 255, .92);
	--hd-lime-a06:        rgba(92, 45, 136, .06);
	--hd-lime-a12:        rgba(92, 45, 136, .12);
	--hd-lime-a18:        rgba(92, 45, 136, .18);
	--hd-lime-a25:        rgba(92, 45, 136, .25);
	--hd-lime-a35:        rgba(92, 45, 136, .35);
}
:root[data-bs-theme="dark"] {
	--hd-ink:       #e7ecf3;
	--hd-muted:     #9aa4b2;
	--hd-line:      #2b3440;
	--hd-surface:   #1e242c;
	--hd-surface-2: #171c22;
	/* Brand-soft surface tints get dark-mode variants so the
	   selected/active row states (which fill with --hd-blue-soft /
	   --hd-lime-soft and carry themed --hd-ink text) stay legible.
	   Light mode: light tint + dark text. Dark mode: dark tint + light
	   text. Both read as "highlighted" against their surface. */
	--hd-blue-soft: #24344a;
	--hd-lime-soft: #3a2b4d;
}
.home-dash {
	color: var(--hd-ink);
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* --------------------------------------------------------------
   HERO — full-width gradient panel with greeting + stats
   -------------------------------------------------------------- */
.hd-hero {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	padding: .65rem;
	background:
		radial-gradient(900px 300px at 100% -20%, var(--hd-blue-a35), transparent 60%),
		radial-gradient(700px 260px at -10% 120%, var(--hd-blue-a35), transparent 60%),
		linear-gradient(135deg, var(--hd-navy) 0%, #1a2030 55%, var(--hd-blue) 100%);
	color: #fff;
	box-shadow: var(--hd-shadow-md);
}
.hd-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(var(--hd-white-a06) 1px, transparent 1px),
		linear-gradient(90deg, var(--hd-white-a06) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse at top right, black 15%, transparent 70%);
	pointer-events: none;
}
.hd-hero::after {
	content: "";
	position: absolute;
	right: -80px; top: -80px;
	width: 360px; height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--hd-blue-a25), transparent 65%);
	pointer-events: none;
	filter: blur(8px);
}

.hd-eyebrow {
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hd-white-a80);
	font-weight: 600;
	margin-bottom: .15rem;
}
.hd-hero h1 {
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	letter-spacing: -.015em;
	line-height: 1.1;
	margin: 0;
}.hd-hero h1 .hd-name,
[data-bs-theme=dark] .hd-search-link:hover,
.home-dash .hd-lst-hero .hd-btn.hd-btn-ghost .bi,
.home-dash .hd-hero .hd-actions-trigger .bi,
.home-dash .hd-hero .hd-actions-trigger:hover .bi,
.home-dash .hd-hero .hd-actions-trigger:focus-visible .bi,
.home-dash .hd-hero .hd-actions-trigger[aria-expanded="true"] .bi,
.home-dash .hd-qed-list-row.is-selected .hd-qed-list-link,
.home-dash .hd-qed-list-row.is-selected .hd-qed-list-link:hover,
.home-dash .hd-qed-list-row.is-selected .hd-qed-list-link:focus,
.home-dash .hd-qed-list-row.is-selected .hd-qed-list-text,
.home-dash .tree-row.active .tree-toggle,
.home-dash .tree-row.active .tree-title,
.home-dash .hd-kl-hero-btn .bi,
.home-dash .hd-kl-tabs .hd-kl-tab.nav-link.active .bi,
.home-dash .hd-tc-hero-btn .bi,
.home-dash .hd-cr-hero-btn .bi,
.home-dash .hd-grp-segctl-btn.is-active .bi,
.home-dash .hd-lang-list-head .hd-panel-title .bi,
.home-dash .hd-lic-context,
.home-dash .hd-eq-filter-btn.is-active .bi,
.home-dash .hd-eq-filter-btn.is-active:hover,
.home-dash .hd-eq-filter-btn.is-active:focus-visible,
.hd-modal.hd-kb-newkra-modal .hd-modal-title,
.hd-modal.hd-kb-newnote-modal .hd-modal-title,
.hd-modal.hd-kb-newobs-modal .hd-modal-title,
.hd-modal.hd-kb-editobs-modal .hd-modal-title,
.hd-modal.hd-tb-tocustom-modal .hd-modal-title,
.hd-modal.hd-tb-newtask-modal .hd-modal-title,
.hd-modal.hd-tb-movetask-modal .hd-modal-title { color: #fff; }/* Stat tiles inside hero */
.hd-stat {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .65rem;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	border-radius: var(--hd-radius-sm);
	backdrop-filter: blur(6px);
	color: #fff;
	transition: transform .25s ease, background .25s ease, border-color .25s ease;
	min-width: 0;
}
.hd-stat:hover {
	transform: translateY(-2px);
	background: var(--hd-white-a12);
	border-color: var(--hd-white-a25);
}
.hd-stat-label {
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-white-a65);
	font-weight: 600;
	white-space: nowrap;
	margin-left: auto;
	line-height: 1;
	padding: 0;
}
.hd-stat-value {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	margin: 0 0 0 .35rem;
	white-space: nowrap;
}
.hd-stat-ico {
	position: static;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-size: .68rem;
}
.hd-stat.is-total  .hd-stat-ico,
#mySidebar .dropdown-menu .dropdown-item:hover,
.hd-modal .hd-gb-del-header .hd-modal-close:hover,
.hd-modal .hd-gb-del-header .hd-modal-close:focus-visible,
.home-dash .hd-gc-cluster-delete:hover { background: var(--hd-white-a12); color: #fff; }
.hd-stat.is-due    .hd-stat-ico { background: rgba(255, 99, 99, .18); color: #ffb4b4; }
.hd-stat.is-prog   .hd-stat-ico { background: rgba(255,176,32,.18); color: #ffd38a; }
.hd-stat.is-done   .hd-stat-ico { background: var(--hd-lime-a18); color: #c8f062; }

/* --------------------------------------------------------------
   SECTION — panel + header
   -------------------------------------------------------------- */
.hd-section { margin-top: 1.75rem; }
.hd-section-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
	margin-bottom: 1rem;
}
.hd-section-title {
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -.015em;
	color: var(--hd-ink);
	margin: 0;
	display: flex; align-items: center; gap: .65rem;
}
.hd-section-title .hd-bar {
	display: inline-block;
	width: 4px; height: 24px;
	background: linear-gradient(180deg, var(--hd-lime), var(--hd-blue));
	border-radius: 3px;
}.home-dash .hd-assignable-item-dim {
	color: var(--hd-muted);
	font-size: .9rem;
}

.hd-panel {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
	overflow: hidden;
}
.hd-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: .75rem;
	min-height: 4rem;
	padding: 1rem 1.15rem;
	background: var(--hd-blue);
	color: #fff;
	border-top-left-radius: calc(var(--hd-radius, 16px) - 1px);
	border-top-right-radius: calc(var(--hd-radius, 16px) - 1px);
}
.hd-panel-title {
	display: inline-flex; align-items: center; gap: .6rem;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	margin: 0;
}
.hd-panel-title .bi { color: #fff; font-size: 1.05rem; }
/* Iconbtn / ghost / primary buttons inside the dark panel head — these
   override the light-surface defaults so action chrome stays legible
   on the saturated suite-blue fill. The primary button flips from its
   gradient to a flat white fill so it remains the most prominent
   control on the strip. */
.home-dash .hd-panel-head .hd-kb-iconbtn {
	background: var(--hd-white-a06);
	border-color: var(--hd-white-a25);
	color: var(--hd-white-a92);
}
.home-dash .hd-panel-head .hd-kb-iconbtn:hover,
.home-dash .hd-panel-head .hd-kb-iconbtn:focus-visible {
	background: var(--hd-white-a18);
	border-color: var(--hd-white-a35);
	color: #fff;
}
.hd-panel-head .hd-btn.hd-btn-ghost {
	background: transparent;
	border-color: var(--hd-white-a35);
	color: #fff;
}
.hd-panel-head .hd-btn.hd-btn-ghost:hover,
.hd-panel-head .hd-btn.hd-btn-ghost:focus-visible {
	background: var(--hd-white-a12);
	border-color: var(--hd-white-a50);
	color: #fff;
}
/* The dark-mode selector is carried alongside the base one so the global
   :root[data-bs-theme="dark"] .hd-btn-primary override (solid --hd-blue
   fill) cannot win on source order — its (0,3,0) loses to the (0,5,0)
   dark selector here. The panel-head primary button is a fixed white
   button in BOTH themes (its .hd-panel-head parent is a blue gradient). */
.hd-panel-head .hd-btn.hd-btn-primary,
:root[data-bs-theme="dark"] .hd-panel-head .hd-btn.hd-btn-primary {
	background: #fff;
	/* Fixed dark text — the button background is hardcoded white and does
	   NOT theme, so the text must stay dark in both light and dark mode.
	   Using var(--hd-ink) here broke dark mode: --hd-ink flips to a light
	   value, producing white text on the white button. */
	color: var(--hd-ink);
	border-color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.hd-panel-head .hd-btn.hd-btn-primary:hover,
.hd-panel-head .hd-btn.hd-btn-primary:focus-visible {
	background: #f1f5fa;
	border-color: #f1f5fa;
	color: var(--hd-ink);
}
.hd-panel-body,
.hd-bookmarks-wrap,
.home-dash .hd-dept-members-panel .hd-panel-body,
.home-dash .hd-qe-detail-body,
.home-dash .hd-qed-display-body,
.home-dash .hd-gf-panel-body,
.home-dash .hd-perm-grid-body,
.home-dash .hd-mr-body,
.home-dash .hd-mr-delete-body,
.home-dash .hd-mr-edit-body,
.home-dash .hd-mr-info-body { padding: 1rem 1.15rem; }

/* --------------------------------------------------------------
   ASSIGNMENT CARDS — larger imagery, hover lift
   -------------------------------------------------------------- */
.hd-card {
	position: relative;
	height: 100%;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
	/* No overflow:hidden here — combining it with a border + border-radius
	   makes Chromium anti-alias the rounded border corners poorly (jagged).
	   The media child clips its own image (own overflow:hidden + rounded
	   top); the body is transparent so the card's rounded background
	   handles the bottom — nothing bleeds past the corners. */
	display: flex; flex-direction: column;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hd-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--hd-shadow-md);
	border-color: #cfd7e3;
}
/* Overdue cards: a single red border. 2px (vs the base 1px) so the curved
   corners have more pixels to anti-alias against and read smoother. The
   2px border shrinks the inner radius, so the media top corners are
   re-matched below. */
.hd-card.is-past-due { border: 2px solid var(--hd-danger); }
.hd-card.is-past-due .hd-card-media {
	border-top-left-radius: calc(var(--hd-radius) - 2px);
	border-top-right-radius: calc(var(--hd-radius) - 2px);
}

.hd-card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #eef2f7, #dde6f1);
	overflow: hidden;
	/* Round the media's own top corners (card inner radius = --hd-radius
	   minus the 1px border) so the image is clipped by its own geometry
	   and the corner stays crisp against the card border. */
	border-top-left-radius: calc(var(--hd-radius) - 1px);
	border-top-right-radius: calc(var(--hd-radius) - 1px);
}
.hd-card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}
.hd-card:hover .hd-card-media img { transform: scale(1.06); }
.hd-card-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0,0) 55%, rgba(0, 0, 0,.45) 100%);
	pointer-events: none;
}

.hd-kind {
	position: absolute; top: .7rem; left: .7rem;
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .28rem .6rem;
	font-size: .68rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: #fff;
	border-radius: 6px;
	backdrop-filter: blur(6px);
	background: rgba(0, 0, 0,.82);
	z-index: 1;
}
.hd-kind.is-course      { background: var(--hd-blue-a92); }
.hd-kind.is-requirement { background: rgba(64,88,64,.92); }
.hd-kind.is-task        { background: rgba(194,53,4,.92); }
/* Course-type badge (OSI admins only) -- pinned top-right, mirrors .hd-kind top-left */
.hd-kind--type          { left: auto; right: .7rem; background: rgba(0,0,0,.82); }
.hd-kind .bi,
.hd-announce-extlink .bi,
.hd-modal .hd-modal-close .bi,
.hd-modal .hd-btn.hd-btn-sm .bi,
.hd-btn.hd-btn-sm .bi,
.home-dash .hd-maint-eq-status .bi,
.hd-jd-offcanvas-header .hd-modal-close .bi,
.home-dash .hd-proc-trial-status .bi,
#category-container .category .hd-panel-head .hd-modal-close .bi { font-size: .78rem; }

/* Due-date row at the bottom of each card */
.hd-due-row {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-top: .7rem;
	padding-top: .6rem;
	border-top: 1px dashed var(--hd-line);
	font-size: .8rem;
	color: var(--hd-muted);
}
.hd-due-row-main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25rem .4rem;
	min-width: 0;
}
.hd-due-row-flag-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 1.4rem; /* reserves height even when slot is empty so non-overdue cards align with overdue ones */
}
.hd-due-row .bi,
.home-dash .hd-emp-identity-line .bi,
.home-dash .hd-curriculum-assign-cell-due .bi {
	font-size: .9rem;
	color: var(--hd-blue);
	flex-shrink: 0;
}
.hd-due-row-label {
	font-weight: 600;
	letter-spacing: .02em;
	flex-shrink: 0;
}
.hd-due-row-date {
	font-weight: 700;
	color: var(--hd-ink);
	letter-spacing: .01em;
	white-space: nowrap;
}
.hd-due-row-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .3rem .5rem .25rem;
	background: var(--hd-danger);
	color: #fff;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 4px;
	line-height: 1;
}
.hd-due-row.is-past .bi,
.hd-due-row.is-past .hd-due-row-date,
.hd-due-row.is-past .hd-due-row-label,
.hd-user-menu-logout:hover .bi,
.hd-user-menu-logout:focus .bi,
.home-dash .hd-dept-member-no-sms,
.home-dash .hd-curriculum-stat--overdue .hd-curriculum-stat-num,
.hd-kl-delete-outcome--deleted_with_work_removed .hd-kl-delete-outcome-headline .bi,
.hd-kl-delete-outcome--deleted .hd-kl-delete-outcome-headline .bi,
.home-dash .hd-kl-pending-state--2 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--4 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--92 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--94 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--96 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--98 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--99 .hd-kl-pending-state-value { color: var(--hd-danger); }

.hd-card-body {
	padding: .9rem 1rem .5rem;
	flex: 1 1 auto;
	display: flex; flex-direction: column;
}
.hd-card-title {
	font-weight: 600;
	font-size: .98rem;
	line-height: 1.3;
	color: var(--hd-ink);
	margin: 0 0 .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Status pill + progress track */
.hd-status {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .3rem .6rem;
	line-height: 1;
	border-radius: 999px;
	align-self: flex-start;
	margin-top: auto;
}
.hd-status-text {
	display: inline-block;
	transform: translateY(1px); /* optical centering: nudges uppercase text down to compensate for caps sitting high in the em-box */
}
.hd-status .dot {
	width: .5rem; height: .5rem; border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px currentColor;
	filter: drop-shadow(0 0 0 currentColor);
	opacity: .9;
}
.hd-status.is-passed     { color: #1f7a3a; background: rgba(31,122,58,.10); }
.hd-status.is-failed     { color: #b3261e; background: rgba(179,38,30,.10); }
.hd-status.is-progress   { color: #a16207; background: rgba(161,98,7,.10); }
.hd-status.is-not-started{ color: #475569; background: rgba(71,85,105,.10); }

.hd-card-foot {
	padding: .5rem 1rem 1rem;
}
.hd-progress {
	height: 6px;
	background: #eef2f7;
	border-radius: 999px;
	overflow: hidden;
}
.hd-progress-bar {
	height: 100%;
	border-radius: 999px;
	transition: width .4s ease;
}
.hd-progress-bar.is-passed     { background: linear-gradient(90deg, #23895F, #44B78B); width: 100%; }
.hd-progress-bar.is-failed     { background: linear-gradient(90deg, var(--hd-danger), #ff6b6b); width: 100%; }
.hd-progress-bar.is-progress   { background: linear-gradient(90deg, #ffb020, #ffd36a); width: 55%; }
.hd-progress-bar.is-not-started{ background: #c3c9d4; width: 0%; }

/* --------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------- */
.hd-empty {
	border: 1.5px dashed var(--hd-line);
	border-radius: var(--hd-radius);
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--hd-muted);
	background:
		radial-gradient(600px 160px at 50% 0%, var(--hd-blue-a06), transparent 60%),
		var(--hd-surface);
}
.hd-empty .bi {
	font-size: 2.2rem;
	color: var(--hd-blue);
	margin-bottom: .5rem;
}
.hd-empty-title { font-weight: 700; color: var(--hd-ink); font-size: 1.05rem; }

/* --------------------------------------------------------------
   SIDEBAR (announcements, bookmarks)
   -------------------------------------------------------------- */
.hd-side,
.home-dash .hd-dept-sidebar { position: sticky; top: 1rem; }

/* Empty state inside a sidebar panel (e.g. "No news to display") */
.hd-side-empty,
.home-dash .hd-pb-step-list-empty {
	text-align: center;
	padding: 1.5rem 1rem;
	color: var(--hd-muted);
}
.hd-side-empty-icon {
	display: inline-block;
	font-size: 1.75rem;
	color: var(--hd-blue);
	margin-bottom: .5rem;
}
.hd-side-empty-text {
	font-size: .9rem;
	line-height: 1.4;
}

/* ---- Announcements ---- */
.hd-announce-item {
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	background: var(--hd-surface);
	transition: border-color .2s ease, box-shadow .2s ease;
	overflow: hidden;
}
.hd-announce-item + .hd-announce-item { margin-top: .6rem; }
.hd-announce-item:hover,
.home-dash .hd-groupinfo-contact:hover,
.home-dash .hd-curriculum-track:hover,
.home-dash .hd-wsch-history-row:hover,
.home-dash .hd-perm-category:hover,
.home-dash .hd-kra-accordion .hd-kra-task:hover {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-xs);
}
.hd-announce-head {
	display: flex; align-items: center;
	gap: .5rem;
	padding: .7rem .85rem;
}
.hd-announce-toggle {
	color: var(--hd-ink);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	display: flex; align-items: center; gap: .5rem;
	flex: 1 1 auto;
	min-width: 0;
	cursor: pointer;
}
.hd-announce-toggle .hd-chevron {
	font-size: .7rem;
	color: var(--hd-muted);
	transition: transform .25s ease;
	flex-shrink: 0;
}
.hd-announce-toggle.collapsed .hd-chevron,
.hd-announce-panel-toggle.collapsed .bi,
.hd-bookmarks-toggle.collapsed .bi,
.home-dash .hd-gb-unused-head.collapsed .hd-gb-unused-chevron,
.home-dash .hd-gb-unused-head[aria-expanded="false"] .hd-gb-unused-chevron,
.home-dash .hd-kb-acc-head.collapsed .hd-kb-acc-chevron,
.home-dash .hd-kb-acc-head[aria-expanded="false"] .hd-kb-acc-chevron,
.home-dash .hd-kb-acc-chevron-btn.collapsed .hd-kb-acc-chevron,
.home-dash .hd-kb-acc-chevron-btn[aria-expanded="false"] .hd-kb-acc-chevron,
.home-dash .hd-collapse-toggle[aria-expanded="false"] .hd-collapse-chevron,
.home-dash .hd-lp-accordion-toggle.collapsed::after { transform: rotate(-90deg); }.hd-announce-headline,
.home-dash .hd-dept-member-contact-text,
.home-dash .hd-emp-identity-text,
.home-dash .hd-licmgr-mgr-name span,
.home-dash .hd-licmgr-alloc-group span,
.home-dash .hd-lic-owner span,
.home-dash .hd-emp-line span,
.home-dash .hd-cat-tile-label,
.home-dash .hd-gb-related-name,
.home-dash .hd-gb-orphan-name,
.home-dash .hd-stb-q-unused-chip-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.hd-announce-body {
	padding: 0 .85rem .85rem;
	font-size: .88rem;
	color: var(--hd-ink);
	line-height: 1.5;
}

/* External link icon — pinned flush to the right edge of the card header */
.hd-announce-extlink {
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	color: var(--hd-blue);
	background: var(--hd-blue-a06);
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hd-announce-extlink:hover,
.home-dash .hd-maint-back-link:hover,
.home-dash .hd-kra-sidebar-home:hover,
.hd-modal .hd-section-card-action:hover {
	background: var(--hd-blue);
	color: #fff;
	transform: translateY(-1px);
}

/* Panel collapse toggle — shared behavior for announcements + bookmarks.
   Button sits on the right of the panel header next to the count badge;
   chevron rotates -90° when the panel is collapsed. */
.hd-announce-panel-toggle,
.hd-bookmarks-toggle {
	color: var(--hd-muted);
	text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	transition: background .2s ease, color .2s ease;
}
.hd-announce-panel-toggle:hover,
.hd-bookmarks-toggle:hover { background: rgba(0, 0, 0,.06); color: var(--hd-ink); }
.hd-announce-panel-toggle .bi,
.hd-bookmarks-toggle .bi { font-size: .75rem; transition: transform .25s ease; }

/* ---- Bookmarks — reimagined to feel native to the page ----
   Each bookmark is a compact card in the same visual family as the
   assignment cards: surface + border + lift-on-hover, with a lime→blue
   gradient chip carrying the first initial as a typographic anchor. */

/* White-on-dark variant for collapse-toggle chevrons inside .hd-panel-head
   (bookmarks + announcements panel heads share the dark suite-blue
   gradient — the default muted-gray color above is invisible against it).
   Matches the canonical panel-head interactive chrome pattern. */
.hd-panel-head .hd-bookmarks-toggle:hover,
.hd-panel-head .hd-bookmarks-toggle:focus-visible,
.hd-panel-head .hd-announce-panel-toggle:hover,
.hd-panel-head .hd-announce-panel-toggle:focus-visible {
	background: var(--hd-white-a25);
	color: #fff;
}

#home-bookmarks { scroll-behavior: smooth; }
#home-bookmarks [id^="bookmark-page-"] { padding: .15rem 0; }

/* ---- Card ---- */
#home-bookmarks .hd-bm-card {
	position: relative;
	display: block;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	margin-bottom: .55rem;
	overflow: hidden;
	box-shadow: var(--hd-shadow-xs);
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
	/* staggered reveal — matches the page's orchestrated-load feel */
	opacity: 0;
	animation: hdBmIn .45s cubic-bezier(.22,.9,.32,1) forwards;
}
#home-bookmarks .hd-bm-card:nth-child(1) { animation-delay: .02s; }
#home-bookmarks .hd-bm-card:nth-child(2) { animation-delay: .08s; }
#home-bookmarks .hd-bm-card:nth-child(3) { animation-delay: .14s; }
#home-bookmarks .hd-bm-card:nth-child(4) { animation-delay: .20s; }
#home-bookmarks .hd-bm-card:nth-child(5) { animation-delay: .26s; }
#home-bookmarks .hd-bm-card:hover {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-md);
	transform: translateY(-2px);
}

@keyframes hdBmIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	#home-bookmarks .hd-bm-card {
		opacity: 1;
		animation: none;
		transition: border-color .22s ease, box-shadow .22s ease;
	}
	#home-bookmarks .hd-bm-card:hover { transform: none; }
}

/* ---- Primary clickable surface (chip + text + arrow) ---- */
#home-bookmarks .hd-bm-main {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .65rem .75rem;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
}
#home-bookmarks .hd-bm-main:hover,
.home-dash .hd-dept-refs-card-link,
.home-dash .hd-emp-mgr-card,
.home-dash .hd-emp-mgr-card:hover,
.home-dash .hd-licmgr-list-link:hover,
.home-dash .hd-lic-app-link:hover { color: var(--hd-ink); text-decoration: none; }

/* ---- Gradient initial chip ---- */
#home-bookmarks .hd-bm-chip {
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--hd-lime) 0%, var(--hd-blue) 100%);
	color: #fff;
	box-shadow:
		inset 0 1px 0 var(--hd-white-a25),
		inset 0 -1px 0 rgba(0,0,0,.18),
		0 2px 6px rgba(0, 0, 0,.14);
	position: relative;
	overflow: hidden;
	transition: transform .25s cubic-bezier(.22,.9,.32,1), box-shadow .25s ease;
}
/* subtle per-bookmark hue shift so adjacent cards aren't identical */
#home-bookmarks .hd-bm-card[data-bm-hue]:nth-child(3n) .hd-bm-chip { filter: hue-rotate(-18deg); }
#home-bookmarks .hd-bm-card[data-bm-hue]:nth-child(3n+1) .hd-bm-chip { filter: hue-rotate(0deg); }
#home-bookmarks .hd-bm-card[data-bm-hue]:nth-child(3n+2) .hd-bm-chip { filter: hue-rotate(14deg); }

#home-bookmarks .hd-bm-chip::after {
	/* diagonal sheen that slides across on hover */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, var(--hd-white-a35) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform .6s ease;
}
#home-bookmarks .hd-bm-card:hover .hd-bm-chip {
	transform: scale(1.04) rotate(-2deg);
	box-shadow:
		inset 0 1px 0 var(--hd-white-a25),
		inset 0 -1px 0 rgba(0,0,0,.18),
		0 4px 12px rgba(0, 0, 0,.22);
}
#home-bookmarks .hd-bm-card:hover .hd-bm-chip::after { transform: translateX(100%); }

#home-bookmarks .hd-bm-chip-initial {
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -.02em;
	line-height: 1;
}

/* ---- Text stack ---- */
#home-bookmarks .hd-bm-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.25;
}
#home-bookmarks .hd-bm-name {
	font-size: .88rem;
	font-weight: 600;
	color: var(--hd-ink);
	letter-spacing: -.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .2s ease;
}
#home-bookmarks .hd-bm-url {
	font-size: .72rem;
	font-weight: 500;
	color: var(--hd-muted);
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
	margin-top: 1px;
}

/* ---- Arrow indicator ---- */
#home-bookmarks .hd-bm-arrow {
	flex-shrink: 0;
	font-size: .85rem;
	color: var(--hd-muted);
	opacity: .55;
	transition: transform .3s cubic-bezier(.22,.9,.32,1), color .2s ease, opacity .2s ease;
	margin-left: .25rem;
}
#home-bookmarks .hd-bm-card:hover .hd-bm-arrow {
	color: var(--hd-blue);
	opacity: 1;
	transform: translate(3px, -3px);
}
/* when actions overlay is visible (on hover) the arrow fades aside */
#home-bookmarks .hd-bm-card:hover .hd-bm-arrow { opacity: 0; transform: translate(6px, -6px); }

/* ---- Actions overlay (hover-revealed) ----
   Absolute-positioned over the right edge so it doesn't reserve space
   when idle. Uses .visible-hover-child from main.css for the upstream
   hide-at-rest behavior, then we layer our own animation on top. */
#home-bookmarks .hd-bm-actions {
	position: absolute;
	top: 50%;
	right: .5rem;
	transform: translateY(-50%) translateX(8px);
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .22rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
	box-shadow: var(--hd-shadow-sm);
	opacity: 0;
	pointer-events: none;
	line-height: 0; /* kill inline-gap spacing from child baseline */
	transition: opacity .2s ease, transform .25s cubic-bezier(.22,.9,.32,1);
}
#home-bookmarks .hd-bm-card:hover .hd-bm-actions,
#home-bookmarks .hd-bm-card:focus-within .hd-bm-actions {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
	pointer-events: auto;
}

#home-bookmarks .hd-bm-action {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	padding: 0;
	border-radius: 6px;
	background: transparent;
	border: none;
	color: var(--hd-muted);
	cursor: pointer;
	line-height: 1; /* prevent glyph baseline offset */
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
#home-bookmarks .hd-bm-action i {
	font-size: .82rem;
	color: inherit;
	line-height: 1;
	display: block; /* take icon out of inline baseline flow */
}
#home-bookmarks .hd-bm-action:hover,
.hd-user-menu-trigger:hover,
.hd-user-menu-trigger:focus-visible,
.hd-user-menu-trigger[aria-expanded="true"] { transform: translateY(-1px); }
#home-bookmarks .hd-bm-action-edit:hover {
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: var(--hd-blue);
}
#home-bookmarks .hd-bm-action-remove:hover {
	background: rgba(201,27,27,.10);
	color: var(--hd-danger);
}

/* --------------------------------------------------------------
   PAGINATION — rebuilt to modern pills (keeps existing JS hooks)
   -------------------------------------------------------------- */
.hd-pager {
	display: flex; justify-content: center;
	margin-top: 1.25rem;
}
.hd-pager .pagination { gap: .3rem; margin: 0; }
.hd-pager .page-item .page-link {
	border: 1px solid var(--hd-line);
	border-radius: 8px !important;
	padding: .3rem .7rem;
	font-weight: 600;
	font-size: .85rem;
	color: var(--hd-ink);
	background: var(--hd-surface);
	transition: all .2s ease;
}
.hd-pager .page-item.active .page-link,
.hd-pager .page-item .page-link:hover {
	background: linear-gradient(135deg, var(--hd-navy), var(--hd-blue));
	color: #fff !important;
	border-color: transparent;
}

/* --------------------------------------------------------------
   Responsive tuning
   -------------------------------------------------------------- */
@media (max-width: 575.98px) {
	.hd-hero { padding: .75rem; }
	.hd-stat-value { font-size: 1.4rem; }
}
	

/* ===========================================================================
   BOOKMARK MODALS (bookmark_modals.html)
   =========================================================================== */

/* =================================================================
   Bookmark modal styling — scoped under .hd-modal so it cannot
   leak to other modals in the suite.
   ================================================================= */
/* Modal token set removed in Phase A consolidation — .hd-modal rules now
   reference the :root --hd-* palette directly (--hdm-* → --hd-*). */

/* ---- Modal dialog width constraints ----
   Cap width on zoomed/narrow viewports so the dialog doesn't overflow
   horizontally. */
.hd-modal .modal-dialog.modal-xl,
.hd-modal .modal-dialog.modal-lg {
	max-width: min(calc(100vw - 1rem), 1140px);
}
@media (min-width: 576px) {
	.hd-modal .modal-dialog.modal-lg {
		max-width: min(calc(100vw - 2rem), 800px);
	}
	.hd-modal .modal-dialog.modal-xl {
		max-width: min(calc(100vw - 2rem), 1140px);
	}
}

/* ---- Force the scrollable modal pattern unconditionally ----
   Some pages include legacy CSS that overrides Bootstrap's own
   .modal-dialog-scrollable rules, breaking the scroll chain. We enforce
   the full pattern here with explicit properties + !important so the
   content can never exceed viewport height and the body always scrolls
   regardless of what other rules set. */
.hd-modal .modal-content {
	border: none;
	border-radius: var(--hd-modal-radius);
	overflow: hidden;
	box-shadow: 0 24px 48px rgba(0, 0, 0,.24);
	background: var(--hd-surface);
	display: flex !important;
	flex-direction: column !important;
	max-height: calc(100vh - 1rem) !important;
	/* Defensive reset: Bootstrap renders modals in-place in the DOM, so a
	   modal included inside a centered/right-aligned ancestor (e.g. a list
	   action cell) will inherit that text-align into .modal-body. Reset
	   here so every .hd-modal renders left-aligned regardless of where the
	   include lives. Header/footer use flex and are unaffected. */
	text-align: start;
}
@media (min-width: 576px) {
	.hd-modal .modal-content {
		max-height: calc(100vh - 3.5rem) !important;
	}
}

/* ---- Header (gradient, matches page hero) ---- */
.hd-modal .hd-modal-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: 1rem 1.15rem;
	background:
		radial-gradient(600px 120px at 100% -20%, var(--hd-lime-a25), transparent 60%),
		linear-gradient(135deg, var(--hd-navy) 0%, #1a2030 55%, var(--hd-blue) 100%);
	color: #fff;
	border-bottom: none;
	overflow: hidden;
	/* Match the modal-content radius on top corners so the gradient clips
	   cleanly without needing overflow:hidden on the parent. */
	border-top-left-radius: var(--hd-modal-radius);
	border-top-right-radius: var(--hd-modal-radius);
	flex-shrink: 0 !important;
}
.hd-modal .hd-modal-header::before,
.hd-jd-offcanvas-header::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(var(--hd-white-a06) 1px, transparent 1px),
		linear-gradient(90deg, var(--hd-white-a06) 1px, transparent 1px);
	background-size: 24px 24px;
	mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
	pointer-events: none;
}
.hd-modal .hd-modal-header.is-danger {
	background:
		radial-gradient(600px 120px at 100% -20%, rgba(255,100,100,.25), transparent 60%),
		linear-gradient(135deg, #7a0f0f 0%, #a01818 55%, var(--hd-danger) 100%);
}
.hd-modal .hd-modal-title {
	position: relative;
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -.01em;
	color: #fff;
	margin: 0;
}
.hd-modal .hd-modal-title .bi {
	font-size: 1rem;
	color: var(--hd-lime);
}
.hd-modal .hd-modal-header.is-danger .hd-modal-title .bi {
	color: #ffb4b4;
}
.hd-modal .hd-modal-close {
	position: relative;
	margin-left: auto;
	flex-shrink: 0;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	color: #fff;
	width: 30px; height: 30px;
	border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	opacity: 1;
	padding: 0;
	transition: background .2s ease, transform .2s ease;
}
.hd-modal .hd-modal-close:hover,
.hd-jd-offcanvas-header .hd-modal-close:hover,
.hd-sidebar-close:hover,
#category-container .category .hd-panel-head .hd-modal-close:hover {
	background: var(--hd-white-a18);
	transform: rotate(90deg);
}

/* ---- Body ---- */
.hd-modal .modal-body {
	padding: 1.25rem 1.15rem;
	color: var(--hd-ink);
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	/* --- BULLETPROOF SCROLL ---
	   Apply max-height directly to the body itself so it never depends on
	   a parent height chain working correctly. The 70vh value leaves room
	   for the header (~60px), footer (~72px), dialog margins, and visual
	   breathing room at any reasonable viewport. overflow-y:auto means the
	   scrollbar appears ONLY when the content actually exceeds 70vh — short
	   modals show no scrollbar at all; tall ones still scroll inside the
	   body with the header/footer pinned. */
	max-height: 70vh !important;
	overflow-y: auto !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
@media (min-height: 800px) {
	.hd-modal .modal-body { max-height: 75vh !important; }
}
@media (max-height: 600px) {
	.hd-modal .modal-body { max-height: 60vh !important; }
}
/* --- BULLETPROOF SCROLL OPT-OUT ---
   Applied to short-form modals whose body content is small enough to fit
   without an inner scrollbar. The marker drops the max-height + forced
   scrollbar so the modal sizes to its content; if content ever exceeds
   the viewport, the page itself will scroll instead. Used by every list
   modal (delete confirmations, end-session prompts, finalize prompt,
   etc.) per the user's "no inner scrollbar on any modal" directive. */
.hd-modal.hd-modal--fit .modal-body,
.hd-modal.hd-iss-trial-modal .modal-body,
.hd-modal.hd-iss-edit-modal .modal-body,
.hd-modal.hd-iss-new-modal .modal-body,
.hd-modal.hd-stb-q-create-modal .modal-body,
.hd-modal.hd-stb-q-edit-modal .modal-body,
.hd-modal.hd-stb-q-img-modal .modal-body,
.hd-modal.hd-stb-q-overview-img-modal .modal-body {
	max-height: none !important;
	overflow-y: auto !important;
}
.hd-modal .hd-field,
.hd-field { margin-bottom: .9rem; }
.hd-modal .hd-field-label,
.hd-field-label {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .35rem;
}
.hd-modal .hd-field-input,
.hd-field-input {
	width: 100%;
	padding: .6rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	font-size: .95rem;
	color: var(--hd-ink);
	font-family: inherit;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.hd-modal .hd-field-input:focus,
.hd-field-input:focus,
.home-dash .hd-groupinfo-desc-field:focus,
.hd-modal .hd-field-file:focus-within,
.hd-field-file:focus-within,
.home-dash .hd-emp-search-input:focus,
.home-dash .hd-area-edit-form input[type="text"]:focus,
.home-dash .hd-area-edit-form input[type="number"]:focus,
.home-dash .hd-area-edit-form textarea:focus,
.home-dash .hd-gf input[type="text"]:focus,
.home-dash .hd-gf input[type="email"]:focus,
.home-dash .hd-gf input[type="number"]:focus,
.home-dash .hd-gf input[type="url"]:focus,
.home-dash .hd-gf textarea:focus,
.home-dash .hd-gf select:focus,
.home-dash .hd-gmove select:focus,
.home-dash .hd-gmove input[type="text"]:focus,
.home-dash .hd-tc input[type="text"]:focus,
.home-dash .hd-tc input[type="email"]:focus,
.home-dash .hd-tc input[type="number"]:focus,
.home-dash .hd-tc textarea:focus,
.home-dash .hd-tc select:focus,
.home-dash .hd-fc input[type="text"]:focus,
.home-dash .hd-fc input[type="email"]:focus,
.home-dash .hd-fc input[type="number"]:focus,
.home-dash .hd-fc textarea:focus,
.home-dash .hd-fc select:focus,
.home-dash .hd-cc input[type="text"]:focus,
.home-dash .hd-cc input[type="email"]:focus,
.home-dash .hd-cc input[type="password"]:focus,
.home-dash .hd-cc input[type="date"]:focus,
.home-dash .hd-cc input[type="number"]:focus,
.home-dash .hd-cc textarea:focus,
.home-dash .hd-cc select:focus,
.home-dash .hd-news-form input:focus,
.home-dash .hd-news-form select:focus,
.home-dash .hd-fd-search-input:focus {
	outline: none;
	border-color: var(--hd-blue);
	box-shadow: 0 0 0 3px var(--hd-blue-a12);
}
.hd-modal .hd-field-input[readonly],
.hd-modal .hd-field-input[disabled],
.hd-field-input[readonly],
.hd-field-input[disabled] {
	background: var(--hd-surface-2);
	color: var(--hd-muted);
	cursor: not-allowed;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .85rem;
}

/* ---- Summary card in delete confirm ---- */
.hd-modal .hd-confirm-lead {
	display: flex;
	gap: .75rem;
	padding: .9rem 1rem;
	background: rgba(201,27,27,.06);
	border: 1px solid rgba(201,27,27,.18);
	border-radius: 10px;
	margin-bottom: 1rem;
}
.hd-modal .hd-confirm-lead-icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 9px;
	background: rgba(201,27,27,.14);
	color: var(--hd-danger);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.05rem;
}
.hd-modal .hd-confirm-lead-text {
	font-size: .92rem;
	line-height: 1.45;
	color: var(--hd-ink);
}
.hd-modal .hd-confirm-lead-text strong,
.home-dash .hd-dept-member.is-primary .hd-dept-member-name,
.home-dash .hd-wsch-status-meta strong,
.home-dash .hd-qed-range-cell .hd-qed-meta-value,
.home-dash .hd-cl-chip-label,
.home-dash .hd-grp-member-name.is-primary,
.home-dash .hd-confirm-lead-text strong,
.home-dash .hd-cpv-lesson-row.is-active .hd-cpv-lesson-title {
	font-weight: 700;
}

.hd-modal .hd-summary {
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	padding: .85rem 1rem;
}
.hd-modal .hd-summary-row {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: .75rem;
	align-items: baseline;
	padding: .35rem 0;
}
.hd-modal .hd-summary-row + .hd-summary-row,
.hd-modal .hd-linked-row + .hd-linked-row,
.hd-modal .hd-maint-remove-list-item + .hd-maint-remove-list-item,
.home-dash .hd-dept-member-groups-item + .hd-dept-member-groups-item,
.home-dash .hd-summary-row + .hd-summary-row {
	border-top: 1px dashed var(--hd-line);
}
.hd-modal .hd-summary-label,
.home-dash .hd-summary-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.hd-modal .hd-summary-value {
	font-size: .9rem;
	color: var(--hd-ink);
	word-break: break-all;
	font-weight: 500;
}
.hd-modal .hd-summary-value.is-mono {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .82rem;
}

/* ---- Footer + buttons ---- */
.hd-modal .modal-footer {
	padding: .85rem 1.15rem;
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
	gap: .5rem;
	/* Match the modal-content radius on bottom corners */
	border-bottom-left-radius: var(--hd-modal-radius);
	border-bottom-right-radius: var(--hd-modal-radius);
	flex-shrink: 0 !important;
}
.hd-modal .hd-btn {
	display: inline-flex;
	align-items: center; gap: .4rem;
	padding: .55rem 1.1rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .01em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.hd-modal .hd-btn-ghost,
.hd-btn-ghost,
.home-dash .hd-iss-detail-actions .hd-btn-ghost {
	background: transparent;
	border-color: var(--hd-line);
	color: var(--hd-ink);
}
.hd-modal .hd-btn-ghost:hover {
	background: var(--hd-surface);
	border-color: #cfd7e3;
}
/* Soft fill — secondary action that needs to read as a button but not
   compete with .hd-btn-primary. Uses the same soft-blue surface as
   .hd-cpv-count-pill / canonical active-row chrome so it shares the
   tonal language. Keeps the standard 8px radius from .hd-btn (NOT
   pill-shaped) so it has button proportions. Used for secondary
   navigation actions alongside a primary CTA — eg the Home button in
   the lesson player footer next to Continue. */
.hd-modal .hd-btn-soft,
.hd-btn-soft {
	background: var(--hd-blue-soft);
	color: var(--hd-blue);
	border-color: transparent;
}
.hd-modal .hd-btn-soft:hover,
.hd-btn-soft:hover,
.hd-btn-soft:focus-visible {
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	transform: translateY(-1px);
}
.hd-modal .hd-btn-primary,
.hd-btn-primary {
	background: linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
	color: #fff;
	box-shadow: 0 4px 12px var(--hd-blue-a25);
	position: relative;
	overflow: hidden;
	isolation: isolate; /* create stacking context so ::after z-index:-1 stays behind children */
}
.hd-modal .hd-btn-primary::after,
.hd-btn-primary::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, var(--hd-lime) 0%, var(--hd-blue) 100%);
	opacity: 0;
	z-index: -1;
	transition: opacity .25s ease;
}
.hd-modal .hd-btn-primary:hover,
.home-dash .hd-iss-detail-actions .hd-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px var(--hd-blue-a35);
	color: #fff; /* explicit — keep text/icon white during the gradient swap */
}
/* Dark mode: the light-mode gradient starts at pure #000000, whose
   top-left corner camouflages into the dark modal footer while the blue
   box-shadow halo stays visible — the button reads as two stacked boxes.
   Drop to a solid --hd-blue fill + a neutral (non-glowing) shadow so the
   button has one crisp edge in dark mode. Light mode keeps the gradient. */
:root[data-bs-theme="dark"] .hd-modal .hd-btn-primary,
:root[data-bs-theme="dark"] .hd-btn-primary {
	background: var(--hd-blue);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
:root[data-bs-theme="dark"] .hd-modal .hd-btn-primary:hover,
:root[data-bs-theme="dark"] .home-dash .hd-iss-detail-actions .hd-btn-primary:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}

.hd-modal .hd-btn-danger,
.hd-btn-danger {
	background: linear-gradient(135deg, #a01818 0%, var(--hd-danger) 100%);
	color: #fff;
	box-shadow: 0 4px 12px rgba(201,27,27,.22);
}
.hd-modal .hd-btn-danger:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(201,27,27,.32);
	filter: brightness(1.05);
}


/* ===========================================================================
   NAVBAR DROPDOWN — BOOKMARK ITEMS
   ---------------------------------------------------------------------------
   bookmark_items.html is shared across the home page and the navbar
   dropdowns (user_profile_button_top/side). Inside the dropdown, we want a
   lighter, denser presentation than the home-page card treatment — keeping
   the gradient chip + name/URL stack but dropping the lift/shadow/arrow
   and hiding the floating action overlay (managed from the home page).
   Scoped under .suite-bookmark-items so it only applies in dropdowns.
   =========================================================================== */
.suite-bookmark-items .hd-bm-card {
	display: block;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 6px;
	margin: 2px 6px;
	padding: 0;
	overflow: visible;
	animation: none;
	opacity: 1;
	transform: none;
	transition: background .15s ease;
}
.suite-bookmark-items .hd-bm-card:hover {
	background: rgba(0, 0, 0, .06);
	transform: none;
	border-color: transparent;
	box-shadow: none;
}
[data-bs-theme=dark] .suite-bookmark-items .hd-bm-card:hover,
[data-bs-theme=dark] .hd-topnav-link:hover,
[data-bs-theme=dark] .home-dash .hd-dept-tab:hover {
	background: var(--hd-white-a06);
}

/* Remove the gradient accent bar used in the home-page card */

/* Primary anchor — row layout, tighter padding for dropdown density */
.suite-bookmark-items .hd-bm-main {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .4rem .6rem;
	color: inherit;
	text-decoration: none;
	min-width: 0;
	width: 100%;
}

/* Chip — smaller 24×24 version of the home-page chip, same gradient identity */
.suite-bookmark-items .hd-bm-chip {
	flex-shrink: 0;
	width: 24px; height: 24px;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--hd-lime) 0%, var(--hd-blue) 100%);
	color: #fff;
	display: inline-flex;
	align-items: center; justify-content: center;
	box-shadow:
		inset 0 1px 0 var(--hd-white-a25),
		inset 0 -1px 0 rgba(0,0,0,.15),
		0 1px 2px rgba(0, 0, 0,.10);
	transition: none;
	transform: none;
	position: relative;
	overflow: hidden;
}
/* no sheen animation in dropdowns */
.suite-bookmark-items .hd-bm-chip-initial {
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: -.01em;
	line-height: 1;
}
.suite-bookmark-items .hd-bm-card:hover .hd-bm-chip {
	transform: none;
	box-shadow:
		inset 0 1px 0 var(--hd-white-a25),
		inset 0 -1px 0 rgba(0,0,0,.15),
		0 1px 2px rgba(0, 0, 0,.10);
}

/* Text stack — name + URL */
.suite-bookmark-items .hd-bm-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.2;
}
.suite-bookmark-items .hd-bm-name {
	font-size: .85rem;
	font-weight: 500;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: none;
}
.suite-bookmark-items .hd-bm-url {
	font-size: .68rem;
	font-weight: 400;
	color: var(--hd-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 0;
}
[data-bs-theme=dark] .suite-bookmark-items .hd-bm-url,
[data-bs-theme=dark] .hd-search-snippet,
[data-bs-theme=dark] .hd-search-empty-sub { color: #9aa4b2; }

/* Hide the arrow indicator — not needed in dropdown contexts */

/* Hide the floating action overlay — bookmark management happens elsewhere */

/* Pagination / .scrolling-page wrapper — let dropdowns stack bookmarks
   vertically without the horizontal-scroll pattern used on the home page */
.suite-bookmark-items .scrolling-page {
	display: block;
	width: 100%;
	padding: 2px 0;
}


/* ===========================================================================
   USER PROFILE MODAL (user_profile_modal.html)
   ---------------------------------------------------------------------------
   Extends the .hd-modal system from bookmark_modals.html with section cards,
   preference tiles, radio-chip groups, linked-account tables, and signature
   preview styling. All rules scoped under .hd-modal or .hd-profile-body.
   =========================================================================== */

/* ---- Modal body — comfortable padding, scrollable for tall content ---- */
.hd-modal .hd-profile-body {
	padding: 1.25rem 1.25rem;
	background: var(--hd-surface-2);
}
.hd-modal .hd-profile-body .hd-profile-row + .hd-profile-row,
.home-dash .hd-wsch-personnel-card,
.home-dash .hd-gf-collapse,
.home-dash .hd-fb-extras,
.home-dash .hd-pb-extras,
.home-dash .hd-qb-extras,
.home-dash .hd-stb-q-update-choices-section {
	margin-top: 1rem;
}

/* ---- Section card — subtle framed grouping inside the modal body ---- */
.hd-modal .hd-section-card {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	overflow: hidden;
}
.hd-modal .hd-section-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .7rem .9rem;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
.hd-modal .hd-section-card-title {
	margin: 0;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-size: .82rem;
	font-weight: 700;
	color: var(--hd-ink);
	letter-spacing: .01em;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.hd-modal .hd-section-card-title .bi,
.home-dash .hd-empform-section-title .bi,
.home-dash .hd-kb-note-author .bi {
	font-size: .95rem;
	color: var(--hd-blue);
}
.hd-modal .hd-section-card-body {
	padding: .85rem .9rem;
}
.hd-modal .hd-section-card-action {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 6px;
	color: var(--hd-blue);
	background: var(--hd-blue-a06);
	text-decoration: none;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.hd-modal .hd-section-card-action .bi,
.hd-dept-add-btn--sm .hd-dept-add-btn-icon .bi,
.home-dash .hd-cl-chip .bi,
.home-dash .hd-prog-card-members .bi,
.home-dash .hd-eq-filter-btn--icon .bi,
.home-dash .hd-emp-dept-chip .bi { font-size: .75rem; }

/* ---- Textarea inherits .hd-field-input look ---- */
/* Textarea — inherits .hd-field-input look (borders, radius, focus ring)
   plus textarea-specific properties. */
.hd-modal .hd-field-textarea,
.hd-field-textarea {
	resize: none;
	min-height: 100px;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-size: .92rem;
	line-height: 1.5;
}

/* Variant: flush-to-section-card (used by the About You block in the
   profile modal where the textarea fills a section card body directly). */
.hd-modal .hd-section-card-body .hd-field-textarea {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border: none;
	border-top: 1px solid var(--hd-line);
	min-height: 120px;
}
.hd-modal .hd-section-card-body .hd-field-textarea:focus {
	box-shadow: inset 0 3px 0 var(--hd-blue-a12);
	border-top-color: var(--hd-blue);
}

/* ---- Select ---- */
.hd-modal .hd-field-select,
.hd-field-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7684'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .65rem center;
	background-size: 14px;
	padding-right: 2rem;
	cursor: pointer;
}

/* ---- Preference tile — label on top, body below ---- */
.hd-modal .hd-pref {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	height: 100%;
}
.hd-modal .hd-pref-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.hd-modal .hd-pref-label .bi,
.home-dash .hd-dept-mv-label .bi,
.home-dash .hd-curriculum-hint .bi,
.home-dash .hd-wsch-filter-menu .dropdown-item .bi,
.home-dash .hd-personnel-section-head .bi,
.home-dash .hd-emp-position-heading .bi,
.home-dash .hd-kra-section-title .bi,
.home-dash .hd-task-expert-chip .bi,
.home-dash .hd-jc-form .hd-field-label .bi,
.home-dash .hd-cert-form .hd-field-label .bi,
.home-dash .hd-qe-detail-label .bi,
.home-dash .hd-qed-meta-label .bi,
.home-dash .hd-ke-detail-section-title .bi,
.home-dash .hd-agency-form .hd-field-label .bi,
.home-dash .hd-ind-form .hd-field-label .bi,
.home-dash .hd-cfg-panel .hd-field-label .bi,
.home-dash .hd-emp-mgr-perpage-label .bi,
.home-dash .hd-emp-mgr-filter-btn .bi,
.home-dash .hd-app-update-form .hd-field-label .bi,
.home-dash .hd-app-overview-form .hd-field-label .bi,
.home-dash .hd-lic-owner .bi,
.home-dash .hd-mfg-update-form .hd-field-label .bi,
.home-dash .hd-eq-section-title .bi,
.home-dash .hd-area-edit-form .hd-field-label .bi,
.home-dash .hd-gf .hd-field-label .bi,
.home-dash .hd-gmove .hd-field-label .bi,
.home-dash .hd-cl-perpage-label .bi,
.home-dash .hd-tc-form .hd-field-label .bi,
.home-dash .hd-fc-form .hd-field-label .bi,
.home-dash .hd-cc-form .hd-field-label .bi,
.hd-login-field .hd-field-label .bi,
.home-dash .hd-news-form .hd-field-label .bi,
.home-dash .hd-gb-fields dt .bi,
.hd-modal .hd-gb-del-section-title .bi,
.home-dash .hd-kb-overview-eyebrow .bi,
.home-dash .hd-qb-overview-meta-label .bi,
.home-dash .hd-qb-del-question-label .bi,
.home-dash .hd-pb-overview-meta-label .bi,
.home-dash .hd-pb-step-survey-type .bi,
.hd-modal.hd-cl-preview-modal .hd-cl-preview-section-title .bi,
.hd-modal.hd-emp-msg-modal .hd-field-label .bi,
.hd-modal.hd-emp-msg-view-modal .hd-field-label .bi {
	font-size: .85rem;
	color: var(--hd-blue);
}
.hd-modal .hd-pref-body,
.home-dash .hd-emp-task-list,
.home-dash .hd-kra-accordion,
.home-dash .hd-su-section {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.hd-modal .hd-pref-hint {
	font-size: .72rem;
	color: #b54708;
	background: rgba(255, 176, 32, .10);
	border: 1px solid rgba(255, 176, 32, .25);
	border-radius: 6px;
	padding: .3rem .5rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.hd-modal .hd-pref-hint .bi,
.home-dash .hd-dept-member-contact .bi { font-size: .85rem; flex-shrink: 0; }

/* ---- Radio chip group — turns radios into pill-style toggle buttons ---- */
.hd-modal .hd-radio-group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .3rem;
	padding: .2rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
}
.hd-modal .hd-radio,
.home-dash .hd-groupinfo-type {
	position: relative;
	margin: 0;
	cursor: pointer;
}
.hd-modal .hd-radio input[type="radio"],
.home-dash .hd-groupinfo-type input[type="checkbox"],
.home-dash .hd-wsch-procedure-check,
.home-dash .hd-gmove-pos-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.hd-modal .hd-radio-face {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .4rem .7rem;
	border-radius: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--hd-ink);
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
	user-select: none;
}
.hd-modal .hd-radio-face .bi,
.hd-sidebar-close .bi,
.home-dash .hd-maint-back-link .bi,
.home-dash .hd-jd-borrow-panel .hd-panel-head .hd-panel-title,
.home-dash .hd-jd-other-tasks .hd-panel-head .hd-panel-title,
.home-dash .hd-wsch-status-pill .bi,
.home-dash .hd-kei-resources-open-link .bi,
.home-dash .hd-tile-go .bi,
.home-dash .hd-qed-list-action .bi,
.home-dash .hd-cl-pager-btn .bi,
.home-dash .hd-cl-action .bi,
.home-dash .hd-kl-action .bi,
.hd-tc-toast-close .bi,
.home-dash .hd-grp-sub-item-action .bi,
.home-dash .hd-grp-member-remove-btn .bi,
.home-dash .hd-lang-action .bi,
.home-dash .hd-lic-app-link .bi,
.home-dash .hd-ugm-action .bi,
.home-dash .hd-applist-action .bi,
.home-dash .hd-emp-view-btn .bi,
.home-dash .hd-emp-action .bi,
.home-dash .hd-news-action .bi,
.home-dash .hd-kb-list-admin-btn .bi,
.home-dash .hd-qb-overview-help .bi,
.home-dash .hd-qb-results-row-add .bi,
.home-dash .hd-lst-response-actions .hd-kb-iconbtn .bi,
.home-dash .hd-lst-respondent-reset .bi { font-size: .85rem; }
.hd-modal .hd-radio:hover .hd-radio-face {
	background: rgba(0, 0, 0, .06);
}
.hd-modal .hd-radio input[type="radio"]:checked + .hd-radio-face,
.home-dash .hd-dept-refs-tab.is-active {
	background: linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
	color: #fff;
	box-shadow: 0 2px 6px var(--hd-blue-a25);
}

/* ---- Linked accounts table ---- */
.hd-modal .hd-linked-table,
.home-dash .hd-cfg-upload,
.home-dash .hd-fd-nav {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.hd-modal .hd-linked-head,
.hd-modal .hd-linked-row {
	display: grid;
	grid-template-columns: 1fr 1fr 60px;
	gap: .6rem;
	align-items: center;
	padding: .45rem .1rem;
}
.hd-modal .hd-linked-head {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--hd-line);
}
.hd-modal .hd-linked-row:first-of-type { padding-top: .55rem; }
.hd-modal .hd-linked-user {
	font-weight: 600;
	color: var(--hd-ink);
	font-size: .88rem;
}
.hd-modal .hd-linked-company,
.home-dash .hd-pb-step-survey-body,
.home-dash .hd-ob-q-answerkey {
	font-size: .85rem;
	color: var(--hd-ink);
}
.hd-modal .hd-linked-unlink {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent;
	text-decoration: none;
	transition: all .18s ease;
}
.hd-modal .hd-linked-unlink:hover {
	background: rgba(201, 27, 27, .08);
	color: var(--hd-danger);
	transform: translateY(-1px);
}

.hd-modal .hd-linked-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 1.25rem .75rem;
	text-align: center;
	color: var(--hd-muted);
}
.hd-modal .hd-linked-empty > .bi {
	font-size: 1.6rem;
	color: var(--hd-blue);
}
.hd-modal .hd-linked-empty-title {
	font-weight: 700;
	color: var(--hd-ink);
	font-size: .95rem;
}
.hd-modal .hd-linked-empty-sub {
	font-size: .82rem;
	line-height: 1.4;
	max-width: 32ch;
}

/* ---- Signature preview ---- */
.hd-modal .hd-signature-body {
	background:
		repeating-linear-gradient(
			45deg,
			transparent 0 10px,
			rgba(0, 0, 0, .02) 10px 11px
		),
		var(--hd-surface-2);
	border-radius: 0 0 10px 10px;
	min-height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.hd-modal .hd-signature-preview {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	padding: .75rem 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	max-width: 100%;
}
.hd-modal .hd-signature-preview img {
	max-width: 100%;
	max-height: 120px;
	display: block;
}
.hd-modal .hd-signature-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	color: var(--hd-muted);
	font-size: .88rem;
}
.hd-modal .hd-signature-empty .bi {
	font-size: 1.4rem;
	color: var(--hd-blue);
}

/* ---- Small button variant used in section heads ---- */
.hd-modal .hd-btn.hd-btn-sm,
.hd-btn.hd-btn-sm {
	padding: .38rem .7rem;
	font-size: .78rem;
	gap: .3rem;
}

/* ---- Responsive: stack preferences on narrow viewports ---- */
@media (max-width: 575.98px) {
	.hd-modal .hd-radio-group { width: 100%; justify-content: stretch; }
	.hd-modal .hd-radio { flex: 1 1 auto; }
	.hd-modal .hd-radio-face { justify-content: center; width: 100%; }
}


/* ===========================================================================
   NAVBAR (site_navbar.html)
   ---------------------------------------------------------------------------
   Top bar + slide-out sidebar styling. Preserves #top-navbar, #mySidebar,
   and .sidebar / .openbtn hooks already defined earlier in main.css, then
   layers the new design system on top via higher-specificity selectors.
   =========================================================================== */

/* ================ TOP BAR ================ */
.hd-topbar {
	background: var(--hd-surface);
	border-bottom: 1px solid #e6eaf0;
	box-shadow: 0 1px 2px rgba(0, 0, 0,.04);
	padding: .4rem .9rem;
}
[data-bs-theme=dark] .hd-topbar,
[data-bs-theme=dark] #top-navbar.hd-topnav {
	background: #1e242c;
	border-bottom-color: #2b3440;
}
.hd-topbar .navbar { padding: 0; gap: .5rem; }

/* Hamburger — proper rounded button */
.hd-topbar .hd-hamburger {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 40px; height: 40px;
	margin-right: .25rem;
	border-radius: 10px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--hd-ink);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hd-topbar .hd-hamburger:hover {
	background: rgba(0, 0, 0,.06);
	border-color: #e6eaf0;
}
.hd-topbar .hd-hamburger:active { transform: scale(.96); }
.hd-topbar .hd-hamburger .bi { font-size: 1.35rem; }
[data-bs-theme=dark] .hd-topbar .hd-hamburger:hover { background: var(--hd-white-a06); border-color: #2b3440; }

.hd-topbar .hd-brand { padding: 0; margin: 0; display: inline-flex; align-items: center; }

.hd-topbar .hd-topbar-actions > div,
.hd-topnav-action,
.home-dash .hd-cb-info-toggle,
.home-dash .hd-stb-q-panel-menu,
.home-dash .hd-stb-q-survey-update-actions,
.home-dash .hd-cat-toggle-wrap:has(.hd-cat-toggle-input:checked) .hd-cat-default-toggle .bi-check-square-fill,
.home-dash .hd-cat-toggle-wrap:has(.hd-cat-toggle-input:checked) .hd-cat-default-radio .bi-record-circle-fill { display: inline-flex; }

/* ================ SIDEBAR ================ */
/* We keep the existing .sidebar rules (position: fixed, transition, etc.)
   and add a richer visual identity on top via #mySidebar specificity. */
#mySidebar.hd-sidebar {
	background:
		radial-gradient(600px 240px at 100% 0%, var(--hd-lime-a12), transparent 60%),
		radial-gradient(500px 220px at 0% 100%, rgba(0,178,227,.15), transparent 60%),
		linear-gradient(180deg, var(--hd-navy) 0%, #0c2d4f 45%, #08223f 100%);
	color: #fff;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 4px 0 24px rgba(0,0,0,.25);
}
[data-bs-theme=dark] #mySidebar.hd-sidebar {
	background:
		radial-gradient(600px 240px at 100% 0%, var(--hd-lime-a12), transparent 60%),
		radial-gradient(500px 220px at 0% 100%, rgba(0,178,227,.12), transparent 60%),
		linear-gradient(180deg, #070f1a 0%, #0b1a2b 45%, #060d18 100%);
}

/* Kill the inherited .sidebar a { padding-left: 32px } rule that would
   otherwise fight our structured padding inside .hd-sidebar-inner. */
#mySidebar.hd-sidebar .inner { background: none; width: auto; margin: 0; border-radius: 0; }
#mySidebar.hd-sidebar h1 { all: unset; }

.hd-sidebar-inner {
	display: flex;
	flex-direction: column;
	padding: .75rem .7rem 1.25rem;
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
}

/* Ensure all descendants respect the sidebar's inner width */
.hd-sidebar-inner * { box-sizing: border-box; }

/* ---- Sidebar header (close + search) ---- */
.hd-sidebar-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .9rem;
}
.hd-sidebar-close {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 32px; height: 32px;
	flex-shrink: 0;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	color: #fff;
	border-radius: 8px;
	cursor: pointer;
	transition: background .18s ease, transform .25s ease;
}

.hd-sidebar-search-trigger {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	flex: 1 1 auto;
	padding: .5rem .7rem;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	border-radius: 8px;
	color: var(--hd-white-a80);
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	transition: background .18s ease, border-color .18s ease;
}
.hd-sidebar-search-trigger:hover {
	background: var(--hd-white-a12);
	border-color: var(--hd-white-a25);
}
.hd-sidebar-search-trigger .bi { font-size: .9rem; color: var(--hd-white-a65); }
.hd-sidebar-search-trigger span,
.hd-nav-sub-toggle .hd-nav-sublink-label,
.hd-topnav-menu-label,
.home-dash .hd-gm-actions-spacer,
.hd-tc-toast-msg,
.home-dash .hd-cfg-row-pair .hd-panel-body,
.home-dash .hd-grp-info-row .hd-panel-body,
.hd-cpv-page--embed .question-screens { flex: 1 1 auto; }
.hd-kbd {
	padding: .05rem .4rem;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .72rem;
	font-weight: 600;
	color: var(--hd-white-a80);
	background: var(--hd-white-a12);
	border: 1px solid var(--hd-white-a18);
	border-radius: 4px;
	line-height: 1;
}

/* ---- Current group context pill ---- */
.hd-sidebar-context {
	margin-bottom: 1rem;
	padding: .55rem .7rem;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}
.hd-sidebar-context::before,
.home-dash .hd-contact-item.is-primary::before,
.home-dash .hd-emp-groups-row.is-primary::before {
	content: "";
	position: absolute;
	left: 0; top: 10%; bottom: 10%;
	width: 3px;
	background: linear-gradient(180deg, var(--hd-lime), var(--hd-blue));
	border-radius: 0 2px 2px 0;
}
.hd-sidebar-context-label {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-white-a65);
	margin-bottom: .1rem;
}
.hd-sidebar-context-value {
	font-size: .92rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Section label (replaces the old <h1>Management</h1>) ---- */
.hd-sidebar-section-label {
	margin: 1.1rem .2rem .4rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hd-white-a50);
	position: relative;
	padding-top: .8rem;
	border-top: 1px solid var(--hd-white-a06);
}

/* ---- Nav groups ---- */
.hd-nav-item,
.hd-user-menu-group { list-style: none; margin: 0; }
.hd-nav-item + .hd-nav-item,
.hd-nav-sub-item + .hd-nav-sub-item { margin-top: 1px; }

.hd-nav-link {
	display: flex !important; /* override inherited .sidebar a { display: block } */
	align-items: center;
	gap: .6rem;
	padding: .5rem .65rem !important;
	border-radius: 8px;
	color: var(--hd-white-a80) !important;
	text-decoration: none;
	font-size: .88rem;
	font-weight: 500;
	transition: background .15s ease, color .15s ease;
	cursor: pointer;
}
.hd-nav-link:hover {
	background: var(--hd-white-a06);
	color: #fff !important;
}
.hd-nav-link.active,
.hd-nav-link[aria-current="page"] {
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: #fff !important;
}
.hd-nav-icon {
	font-size: 1rem;
	flex-shrink: 0;
	color: var(--hd-white-a65);
	width: 20px;
	text-align: center;
}.hd-nav-link:hover .hd-nav-icon,
.home-dash .hd-dept-refs-tab.is-active .bi,
.home-dash .hd-groupinfo-type input[type="checkbox"]:checked + .hd-groupinfo-type-face .bi,
.hd-jd-offcanvas-header .offcanvas-title .bi,
.home-dash .hd-kra-hero .hd-btn.hd-btn-ghost .bi,
.home-dash .hd-kra-hero-btn.hd-btn-ghost .bi,
.home-dash .hd-utilities-hero .hd-dept-hero-sub .bi,
.home-dash .hd-jc-hero .hd-dept-hero-sub .bi,
.home-dash .hd-app-hero .hd-dept-hero-sub .bi,
.home-dash .hd-cb-hero .hd-dept-hero-sub .bi { color: var(--hd-lime); }
.hd-nav-label {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hd-nav-chevron {
	font-size: .65rem;
	color: var(--hd-white-a50);
	transition: transform .25s ease;
	flex-shrink: 0;
}

/* ---- Nested submenu (collapsible) ---- */
.hd-nav-sub {
	margin: .25rem 0 .35rem;
}
.hd-nav-sublist {
	margin: 0;
	padding: .3rem 0 .3rem 2rem; /* indent sub items under the icon column */
	list-style: none;
	border-left: 1px solid var(--hd-white-a12);
	margin-left: 1rem;
}
.hd-nav-sub-item { list-style: none; margin: 0; position: relative; }
.hd-nav-sub-header {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-white-a50);
	padding: .45rem .65rem .15rem;
	list-style: none;
}
.hd-nav-sublink {
	display: block !important;
	padding: .38rem .65rem !important;
	border-radius: 6px;
	color: var(--hd-white-a80) !important;
	text-decoration: none;
	font-size: .83rem;
	font-weight: 500;
	transition: background .15s ease, color .15s ease, padding-left .2s ease;
	position: relative;
}
.hd-nav-sublink:hover {
	background: var(--hd-white-a06);
	color: #fff !important;
	padding-left: .8rem !important;
}

/* Active group pill — gradient accent bar on the left */
.hd-nav-sub-item.active_group > .hd-nav-sublink {
	background: linear-gradient(90deg, var(--hd-lime-a18), var(--hd-blue-a12));
	color: #fff !important;
	font-weight: 600;
	position: relative;
}
.hd-nav-sub-item.active_group > .hd-nav-sublink::before {
	content: "";
	position: absolute;
	left: -2rem; /* reach to the parent border-left */
	top: 0; bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--hd-lime), var(--hd-blue));
}

/* ---- Sub-level collapsible toggle ----
   Used for "List Invites", "Knowledge", "Learning" etc. — second-level
   collapsibles nested inside the already-collapsed parent section.
   Mirrors the top-level .hd-nav-toggle pattern (label + chevron) scaled
   down to submenu typography. */
.hd-nav-sub-toggle {
	display: flex !important;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
}
.hd-nav-sub-toggle .hd-nav-chevron {
	font-size: .6rem;
	color: var(--hd-white-a50);
	transition: transform .25s ease;
	flex-shrink: 0;
}
.hd-nav-sub-toggle:not(.collapsed) .hd-nav-chevron {
	transform: rotate(180deg);
	color: var(--hd-white-a80);
}
/* Don't run the padding-left:0.8rem hover shift on toggles — it makes the
   chevron jump. Keep hover color + background change. */
.hd-nav-sub-toggle:hover {
	padding-left: .65rem !important;
}

/* ---- Nested submenu (3rd level) ----
   Rendered as an inline collapse beneath a sub-toggle. Narrower rail so
   it reads as a child of the 2nd level, not a peer. */
.hd-nav-sub-nested {
	margin: .15rem 0 .2rem;
}
.hd-nav-sub-nested .hd-nav-sublist {
	padding: .15rem 0 .15rem 1rem;
	margin-left: .5rem;
	border-left-color: var(--hd-white-a06);
}
.hd-nav-sub-nested .hd-nav-sublink {
	font-size: .8rem;
	padding: .32rem .6rem !important;
	color: var(--hd-white-a65) !important;
}
.hd-nav-sub-nested .hd-nav-sublink:hover,
[data-bs-theme=dark] .hd-user-menu-group.active_group > .hd-user-menu-group-link,
.hd-cs-footer-link span,
.hd-cs-footer-link.mainfont span {
	color: #fff !important;
}
.hd-nav-sub-nested .hd-nav-sub-header {
	font-size: .58rem;
	padding: .4rem .6rem .1rem;
}

/* ---- Disabled sub-item (permission-gated, shown greyed out) ---- */
.hd-nav-sub-item.is-disabled .hd-nav-sublink {
	color: var(--hd-white-a35) !important;
	cursor: not-allowed;
	pointer-events: none;
}
.hd-nav-sub-item.is-disabled .hd-nav-sublink:hover {
	background: transparent;
	padding-left: .65rem !important;
}

/* ---- Empty state inside a sub-list ---- */
.hd-nav-sub-empty {
	list-style: none;
	padding: .55rem .65rem;
	font-size: .78rem;
	font-style: italic;
	color: var(--hd-white-a50);
}#mySidebar .dropdown-menu {
	background: #0f2a4a;
	border: 1px solid var(--hd-white-a12);
	box-shadow: 0 8px 24px rgba(0,0,0,.3);
	padding: .3rem;
	border-radius: 8px;
}
#mySidebar .dropdown-menu .dropdown-item {
	color: var(--hd-white-a80);
	padding: .4rem .6rem;
	border-radius: 5px;
	font-size: .82rem;
}
#mySidebar .dropdown-menu .dropdown-item.disabled {
	color: var(--hd-white-a35);
	background: transparent;
}
#mySidebar .dropdown-menu .dropdown-header {
	color: var(--hd-white-a50);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .4rem .6rem .2rem;
}

/* ---- Version footer ---- */
.hd-sidebar-version {
	margin-top: auto;
	padding-top: 1.25rem;
	text-align: center;
	font-size: .7rem;
	color: var(--hd-white-a35);
	letter-spacing: .02em;
}
.hd-sidebar-version-num {
	color: var(--hd-white-a65);
	font-weight: 600;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* ================ SEARCH MODAL CONTENT ================ */
.hd-modal .hd-search-results {
	margin-top: .75rem;
	padding: 0;
	min-height: 1.5rem;
}

/* ================ REQUEST SUPPORT MODAL CONTENT ================ */
.hd-modal .hd-support-lead {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--hd-ink);
	margin-bottom: 1rem;
}
.hd-modal .hd-support-email,
.home-dash .hd-gf-crumb-link,
.hd-login-legal a {
	color: var(--hd-blue);
	text-decoration: none;
	font-weight: 600;
}
.hd-modal .hd-support-idcard {
	max-width: 360px;
	margin: 0 auto 1rem;
	background:
		radial-gradient(400px 100px at 100% 0%, var(--hd-lime-a12), transparent 60%),
		linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
	border-radius: 12px;
	padding: 1rem 1.2rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0,.18);
	color: #fff;
}
.hd-modal .hd-support-idcard-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .4rem 0;
}
.hd-modal .hd-support-idcard-row + .hd-support-idcard-row {
	border-top: 1px dashed var(--hd-white-a18);
}
.hd-modal .hd-support-idcard-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-white-a65);
}
.hd-modal .hd-support-idcard-value {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.01em;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.hd-modal .hd-support-outro {
	font-size: .9rem;
	color: var(--hd-muted);
	text-align: center;
	line-height: 1.5;
}


/* ===========================================================================
   TOP NAVBAR (top_navbar.html)
   ---------------------------------------------------------------------------
   Horizontal primary navigation used when the user selects "Top" menu
   position. Preserves Bootstrap dropdown + .dropdown-submenu behavior
   (driven by user_menu.js) and layers modern styling via .hd-topnav-*
   hooks. Scoped under #top-navbar so it cannot affect other navbars.
   =========================================================================== */

#top-navbar.hd-topnav {
	background: var(--hd-surface);
	border-bottom: 1px solid #e6eaf0;
	box-shadow: 0 1px 2px rgba(0, 0, 0,.04);
	padding: 0;
}



[data-bs-theme="dark"] .hd-brand .hd-logo-dark,
.home-dash .hd-cl-pager-short,
.home-dash .hd-tc-switch-on,
.home-dash .hd-tc-switch-off,
.home-dash .hd-fc-switch-on,
.home-dash .hd-fc-switch-off,
.home-dash .hd-cc-switch-on,
.home-dash .hd-cc-switch-off { 
    display: inline; 
}

/* Outer nav row — logo / menu / search / icons in a single flex line */
.hd-topnav-inner {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .45rem .9rem;
	max-width: 100%;
}

/* ---- Brand ---- */
.hd-topnav-brand {
	display: inline-flex;
	align-items: center;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
}

/* ---- Primary menu (horizontal list) ---- */
.hd-topnav-menu {
	flex-direction: row;
	align-items: center;
	gap: .1rem;
	margin: 0 .5rem;
	padding: 0;
}
.hd-topnav-item { list-style: none; position: relative; }

.hd-topnav-link {
	position: relative;
	padding: .5rem .8rem !important;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink) !important;
	border-radius: 8px;
	transition: background .16s ease, color .16s ease;
	white-space: nowrap;
}
.hd-topnav-link:hover,
.hd-topnav-link:focus-visible {
	background: rgba(0, 0, 0,.05);
	color: var(--hd-ink) !important;
}
.hd-topnav-link.active,
.hd-topnav-link[aria-current="page"],
.hd-modal.hd-cr-summary-modal .hd-cr-loading .spinner-border,
.hd-modal.hd-cr-breakdown-modal .hd-cr-loading .spinner-border {
	color: var(--hd-blue) !important;
}

/* Dropdown caret — custom Bootstrap Icon chevron.
   We hide Bootstrap's native .dropdown-toggle::after triangle and use an
   explicit <i class="hd-topnav-caret"> instead for consistent iconography. */
.hd-topnav-caret {
	font-size: .65rem;
	margin-left: .35rem;
	color: var(--hd-muted);
	transition: transform .22s ease, color .18s ease;
	vertical-align: middle;
}

[data-bs-theme=dark] .hd-topnav-link {
	color: #e7ecf3 !important;
}

/* ---- Dropdown panels ---- */
.hd-topnav-menu-panel {
	min-width: 220px;
	padding: .35rem;
	border: 1px solid #e6eaf0;
	border-radius: 10px;
	background: var(--hd-surface);
	box-shadow: 0 10px 28px rgba(0, 0, 0,.12), 0 2px 6px rgba(0, 0, 0,.05);
	margin-top: .25rem;
}
[data-bs-theme=dark] .hd-topnav-menu-panel,
[data-bs-theme=dark] .hd-topnav-search-results {
	background: #1e242c;
	border-color: #2b3440;
}

.hd-topnav-menu-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .65rem;
	border-radius: 6px;
	font-size: .85rem;
	font-weight: 500;
	color: #1a2332;
	transition: background .15s ease, color .15s ease;
}
.hd-topnav-menu-item:hover,
.hd-topnav-menu-item:focus {
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	color: var(--hd-blue);
}
.hd-topnav-menu-item.disabled,
.hd-topnav-menu-item.disabled:hover {
	color: #b5bcc7;
	background: transparent;
	cursor: not-allowed;
	pointer-events: none;
}
[data-bs-theme=dark] .hd-topnav-menu-item:hover,
[data-bs-theme=dark] .hd-user-menu-identity-company { color: #62b9ff; }


.hd-topnav-menu-header {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	padding: .45rem .65rem .2rem;
	margin: 0;
}

.hd-topnav-menu-divider {
	margin: .3rem 0;
	border: none;
	border-top: 1px solid #e6eaf0;
}
[data-bs-theme=dark] .hd-topnav-menu-divider,
[data-bs-theme=dark] .hd-user-menu-company + .hd-user-menu-company { border-top-color: #2b3440; }

.hd-topnav-menu-empty {
	display: block;
	padding: .6rem .75rem;
	font-size: .8rem;
	font-style: italic;
	color: var(--hd-muted);
}

/* ---- Submenus (.dropdown-submenu hooked by user_menu.js) ---- */

.hd-topnav-submenu-caret {
	margin-left: auto;
	font-size: .7rem;
	color: var(--hd-muted);
	transition: transform .18s ease, color .18s ease;
}
.hd-topnav-submenu:hover > .hd-topnav-submenu-toggle .hd-topnav-submenu-caret,
.hd-topnav-submenu > .hd-topnav-submenu-toggle:hover .hd-topnav-submenu-caret {
	color: var(--hd-blue);
	transform: translateX(2px);
}
/* Left-flyout submenus (.dropstart) — caret points and slides leftward */
.hd-topnav-submenu.dropstart:hover > .hd-topnav-submenu-toggle .hd-topnav-submenu-caret,
.hd-topnav-submenu.dropstart > .hd-topnav-submenu-toggle:hover .hd-topnav-submenu-caret,
.home-dash .hd-hero .hd-back-btn:active {
	transform: translateX(-2px);
}

/* Flyout position — right of the parent dropdown on desktop.
   user_menu.js toggles .show on the inner .dropdown-menu on hover / mobile tap. */
.hd-topnav-submenu > .dropdown-menu {
	position: absolute;
	top: -.4rem;
	left: 100%;
	margin: 0;
	display: none;
}
/* Left-flyout variant — either Bootstrap's dropdown-menu-right / -end
   classes, or a .dropstart parent (user menu bookmarks submenu pattern) */
.hd-topnav-submenu > .dropdown-menu.dropdown-menu-right,
.hd-topnav-submenu > .dropdown-menu.dropdown-menu-end,
.hd-topnav-submenu.dropstart > .dropdown-menu {
	left: auto;
	right: 100%;
}

/* CSS-only hover-reveal for submenus inside the user-avatar dropdown.
   The main top-nav dropdowns (Builders/My Stuff/Lists) rely on user_menu.js
   for their more elaborate desktop-hover + mobile-click logic, but that
   script is only loaded by top_navbar.html. The user-avatar dropdown
   appears in BOTH top_navbar.html AND site_navbar.html, and site_navbar
   doesn't load user_menu.js — so without CSS-only fallback, the Bookmarks
   and Switch Group submenus wouldn't work for users with side-menu enabled.
   Scoped under .hd-user-menu so it can't affect the main top-nav dropdowns. */

/* On narrow viewports user_menu.js uses click-toggle; stack submenus
   vertically instead of flying out sideways so they stay on-screen. */
@media (max-width: 768px) {
	.hd-topnav-submenu > .dropdown-menu {
		position: static;
		left: auto;
		box-shadow: none;
		border: none;
		padding-left: 1rem;
		margin-top: 0;
	}
}

/* ---- Search ---- */
.hd-topnav-search {
	position: relative;
	flex: 1 1 auto;
	/* max-width: 420px; */
	min-width: 180px;
	/* margin: 0 .5rem; */
}
.hd-topnav-search-form,
.home-dash .hd-dept-faq-search-form,
.home-dash .hd-inline-search-form,
.home-dash .hd-fb-search,
.home-dash .hd-pb-search,
.home-dash .hd-qb-search,
.home-dash .hd-pb-step-search,
.home-dash .hd-stb-q-search,
.home-dash .hd-stb-q-search .hd-inline-search-form {
	position: relative;
	margin: 0;
}
.hd-topnav-search-icon {
	position: absolute;
	left: .7rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: .82rem;
	color: var(--hd-muted);
	pointer-events: none;
}
.hd-topnav-search-input {
	width: 100%;
	padding: .45rem .8rem .45rem 2.1rem !important;
	font-size: .86rem;
	border: 1px solid #e6eaf0;
	border-radius: 999px;
	background: #f6f8fc;
	color: #1a2332;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.hd-topnav-search-input::placeholder { color: #8a96a6; }
[data-bs-theme=dark] .hd-topnav-search-input {
	background: #171c22;
	border-color: #2b3440;
	color: #e7ecf3;
}
[data-bs-theme=dark] .hd-topnav-search-input:focus { background: #1e242c; }

/* Search results overlay — positioned below the input */
.hd-topnav-search-results {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	right: 0;
	background: var(--hd-surface);
	border: 1px solid #e6eaf0;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(0, 0, 0,.12), 0 2px 6px rgba(0, 0, 0,.05);
	max-height: 420px;
	overflow-y: auto;
	z-index: 1050;
}

/* ---- Utility icons cluster ---- */
.hd-topnav-actions {
	flex-shrink: 0;
	gap: .3rem;
	margin-left: auto; /* pin to the right edge of the top bar */
}


/* ===========================================================================
   TOP NAVBAR SEARCH RESULTS (_search_home_results.html)
   ---------------------------------------------------------------------------
   AJAX-rendered list inside #global_search_result_container. Each result is
   a card-row: type chip + title + snippet + arrow. Chips are colored per
   s_type so users can scan by type at a glance.
   =========================================================================== */

.hd-search-list {
	list-style: none;
	margin: 0;
	padding: .3rem;
}
.hd-search-item { margin: 0; padding: 0; }
.hd-search-item + .hd-search-item { border-top: 1px solid #f0f3f7; }
[data-bs-theme=dark] .hd-search-item + .hd-search-item { border-top-color: #222932; }

.hd-search-link {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .6rem .7rem;
	color: #1a2332;
	text-decoration: none;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease;
	position: relative;
}
.hd-search-link:hover,
.hd-search-link:focus {
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
	color: var(--hd-ink);
	text-decoration: none;
}

/* ---- Type chip ---- */
.hd-search-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .45rem;
	margin-top: .1rem;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 5px;
	line-height: 1;
	min-width: 78px;
	justify-content: flex-start;
}
.hd-search-chip .bi { font-size: .78rem; line-height: 1; }
.hd-search-chip-label,
.home-dash .hd-curriculum-type--track,
.home-dash .hd-curriculum-type--supertrack { letter-spacing: .05em; }

/* Per-type palette — each chip gets its own tint.
   Classes are lowercase (via |lower filter) so e.g. Task → .hd-search-chip--task */
.hd-search-chip--procedure { background: rgba(71, 85, 105, .12);  color: #475569; }
.hd-search-chip--course,
.home-dash .hd-curriculum-type--track,
.home-dash .hd-dept-kra-open:hover,
.home-dash .hd-wsch-role-pill--member,
.home-dash .hd-curriculum-stat--total .hd-curriculum-stat-icon,
.home-dash .hd-dept-list-action--edit:hover,
.home-dash .hd-contact-action--edit:hover,
.home-dash .hd-qed-list-action:hover,
.home-dash .hd-gt-pill.is-active,
.home-dash .hd-gm-summary-pill.is-primary,
.hd-login-status--info { background: var(--hd-blue-a12);  color: var(--hd-blue); }
.hd-search-chip--question  { background: rgba(245, 158, 11, .16); color: #b45309; }
.hd-search-chip--foundation{ background: rgba(139, 92, 246, .14); color: #7c3aed; }
.hd-search-chip--task,
.home-dash .hd-curriculum-type--course { background: rgba(194, 53, 4, .14);   color: #c23504; }
.hd-search-chip--kra,
.home-dash .hd-curriculum-type--requirement { background: rgba(13, 148, 136, .14); color: #0d9488; }
.hd-search-chip--group,
.home-dash .hd-curriculum-type--collection { background: var(--hd-lime-a18);  color: #5c8a00; }
.hd-search-chip--track     { background: rgba(79, 70, 229, .14);  color: #4f46e5; }
.hd-search-chip--user      { background: rgba(219, 39, 119, .12); color: #be185d; }
.hd-search-chip--default   { background: rgba(0, 0, 0, .10);   color: var(--hd-ink); }

/* ---- Body (title + snippet) ---- */
.hd-search-body,
.home-dash .hd-contact-item-body,
.home-dash .hd-field-file-text,
.home-dash .hd-jc-note-body,
.home-dash .hd-prog-activity-main,
.home-dash .hd-gb-hero-text,
.home-dash .hd-kb-hero-text,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row-stack,
.home-dash .hd-tb-hero-text,
.home-dash .hd-cpv-lesson-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}
.hd-search-title {
	font-size: .88rem;
	font-weight: 600;
	color: inherit;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Highlighted tokens from the server (wrapped in <mark> or <strong>) */
.hd-search-title mark,
.hd-search-title strong {
	background: linear-gradient(180deg, transparent 60%, var(--hd-lime-a35) 60%);
	color: inherit;
	font-weight: 700;
	padding: 0 .05em;
}
.hd-search-snippet {
	font-size: .78rem;
	color: var(--hd-muted);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.hd-search-snippet mark,
.hd-search-snippet strong {
	background: linear-gradient(180deg, transparent 60%, var(--hd-lime-a25) 60%);
	color: inherit;
	font-weight: 600;
	padding: 0 .05em;
}
/* The |linebreaks filter wraps answer text in <p> — collapse internal
   paragraph margins so the snippet reads as a flowing block */
.hd-search-snippet p + p { margin-top: .2rem; }

/* ---- Arrow indicator ---- */
.hd-search-arrow {
	flex-shrink: 0;
	align-self: center;
	font-size: .85rem;
	color: #b5bcc7;
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.hd-search-link:hover .hd-search-arrow {
	opacity: 1;
	transform: translate(0, 0);
	color: var(--hd-blue);
}

/* ---- Empty state ---- */
.hd-search-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	padding: 2rem 1rem;
	text-align: center;
}
.hd-search-empty > .bi {
	font-size: 1.8rem;
	color: var(--hd-blue);
	opacity: .6;
}
.hd-search-empty-title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--hd-ink);
	letter-spacing: -.005em;
}
.hd-search-empty-sub {
	font-size: .82rem;
	color: var(--hd-muted);
	max-width: 28ch;
	line-height: 1.4;
}


/* ===========================================================================
   USER MENU DROPDOWN (user_profile_button_top.html)
   ---------------------------------------------------------------------------
   Avatar-triggered dropdown at the far-right of the top navbar. Uses the
   same .hd-topnav-menu-panel base as the other top-nav dropdowns, with an
   identity header block at the top, a Switch Group section grouped by
   company, and a destructive-colored Logout action.
   =========================================================================== */


/* ---- Avatar trigger ---- */
.hd-user-menu-trigger {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding: 2px;
	border-radius: 50%;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}
.hd-user-menu-trigger::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: 2px;
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity .2s ease;
}

/* ---- Dropdown panel ---- */
.hd-user-menu-panel {
	min-width: 280px;
	max-width: 320px;
	margin-top: .5rem !important;
}

/* ---- Identity header (avatar + name + context) ---- */
.hd-user-menu-header {
	list-style: none;
	padding: .25rem;
}
.hd-user-menu-identity {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem .75rem;
	border-radius: 8px;
	background:
		radial-gradient(400px 100px at 100% -20%, var(--hd-lime-a12), transparent 60%),
		linear-gradient(135deg, rgba(0, 0, 0,.04), var(--hd-blue-a06));
	border: 1px solid rgba(0, 0, 0,.06);
}
[data-bs-theme=dark] .hd-user-menu-identity {
	background:
		radial-gradient(400px 100px at 100% -20%, var(--hd-lime-a12), transparent 60%),
		linear-gradient(135deg, var(--hd-white-a06), var(--hd-blue-a06));
	border-color: var(--hd-white-a06);
}
.hd-user-menu-identity-avatar {
	width: 40px; height: 40px;
	flex-shrink: 0;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0,.15);
}
[data-bs-theme=dark] .hd-user-menu-identity-avatar,
[data-bs-theme=dark] .home-dash .hd-dept-member-avatar { border-color: #1e242c; }
.hd-user-menu-identity-text,
.home-dash .hd-dept-member-body,
.home-dash .hd-assignable-item-body,
.home-dash .hd-curriculum-notice-body,
.home-dash .hd-maint-row-body,
.home-dash .hd-maint-eq-row-body,
.home-dash .hd-jd-row-body,
.hd-modal .hd-jd-lock-card-body,
.home-dash .hd-wsch-row-body,
.home-dash .hd-field-toggle-body,
.home-dash .hd-wsch-procedures-head-text,
.home-dash .hd-emp-task-body,
.home-dash .hd-curriculum-stat-body,
.home-dash .hd-perm-select-all-body,
.home-dash .hd-kra-fact-body,
.home-dash .hd-qed-choice-text,
.hd-form-error-body,
.home-dash .hd-pb-task-picker,
.home-dash .hd-pb-step-list-head .hd-panel-title,
.home-dash .hd-lst-response-body,
.home-dash .hd-lst-respondent-identity,
.home-dash .hd-tl-stat-body,
.home-dash .hd-crb-hero-text,
.home-dash .hd-teb-hero-text,
.home-dash .hd-cpv-hero-text,
.home-dash .hd-ob-q-answer-text,
.home-dash .hd-ob-q-answer-def {
	flex: 1 1 auto;
	min-width: 0;
}
.hd-user-menu-identity-name {
	font-size: .92rem;
	font-weight: 700;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}
.hd-user-menu-identity-context {
	font-size: .72rem;
	color: var(--hd-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: .1rem;
}
.hd-user-menu-identity-sep { margin: 0 .3rem; opacity: .5; }

/* ---- Switch Group section — scrollable if long ---- */
.hd-user-menu-scroll {
	max-height: 280px;
	overflow-y: auto;
	list-style: none;
	padding: 0;
}
.hd-user-menu-scroll > ul { list-style: none; }

/* Switch-group flyout panel — sized for a compact list of group names */
.hd-user-menu-switch-panel {
	min-width: 240px;
	max-width: 300px;
}
.hd-user-menu-switch-panel .hd-user-menu-scroll {
	max-height: 340px;
}
.hd-user-menu-company {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	padding: .6rem .75rem .2rem;
	list-style: none;
}
.hd-user-menu-company + .hd-user-menu-company {
	padding-top: .4rem;
	border-top: 1px dashed #e6eaf0;
	margin-top: .2rem;
}
.hd-user-menu-group-link {
	padding-left: 1.25rem !important;
	position: relative;
}

/* Active group marker — same lime→blue accent bar used across the app */
.hd-user-menu-group.active_group > .hd-user-menu-group-link {
	background: linear-gradient(90deg, var(--hd-lime-a12), var(--hd-blue-a12)) !important;
	color: var(--hd-ink) !important;
	font-weight: 600;
}
.hd-user-menu-group.active_group > .hd-user-menu-group-link::before {
	content: "";
	position: absolute;
	left: .3rem;
	top: .35rem; bottom: .35rem;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--hd-lime), var(--hd-blue));
}
.hd-user-menu-group-check {
	margin-left: auto;
	font-size: .9rem;
	color: var(--hd-blue);
}

/* ---- Logout — destructive accent on hover ---- */
.hd-user-menu-logout {
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	color: #1a2332;
}
.hd-user-menu-logout:hover,
.hd-user-menu-logout:focus {
	background: rgba(201, 27, 27, .08) !important;
	color: var(--hd-danger) !important;
}
/* Dark mode — the saturated #C91B1B hover red is too dark on the dark
   menu; use the lighter red shared with the work-schedule warnings. */
[data-bs-theme=dark] .hd-user-menu-logout:hover,
[data-bs-theme=dark] .hd-user-menu-logout:focus,
[data-bs-theme=dark] .hd-user-menu-logout:hover .bi,
[data-bs-theme=dark] .hd-user-menu-logout:focus .bi {
	color: #f0a8a8 !important;
}


/* ---- Side-variant user menu: Owly brand icon (PNG, not a Bootstrap Icon) ---- */
.hd-user-menu-owly-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	object-fit: contain;
	display: block;
}


/* ===========================================================================
   DEPARTMENT PAGE (my_department.html, dept_overview.html, partials, modals)
   ---------------------------------------------------------------------------
   Hero header + modern tab bar + overview layout with:
     - Mission/Vision strip
     - KRAs + Tasks (left) / Members (right)
     - Reference Library tabs (Policies / Library / FAQs)
   All selectors scoped under .home-dash or .hd-dept-* / .hd-modal.
   =========================================================================== */

/* ---------------- Hero header (dept variant) ---------------- */

/* Hero-context back button — square, full-row-height, white-on-dark */
.home-dash .hd-hero .hd-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: auto;
	aspect-ratio: 1 / 1;
	padding: 0;
	min-width: 44px;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a25);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.home-dash .hd-hero .hd-back-btn:hover,
.home-dash .hd-hero .hd-back-btn:focus-visible,
.home-dash .hd-stb-q-survey-update-action:hover,
.home-dash .hd-stb-q-survey-update-action:focus-visible {
	background: var(--hd-white-a18);
	border-color: var(--hd-white-a50);
	color: #fff;
	outline: none;
}
.home-dash .hd-hero .hd-back-btn .bi {
	font-size: 1.15rem;
	line-height: 1;
}
.home-dash .hd-dept-hero-title {
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	letter-spacing: -.015em;
	line-height: 1.1;
	margin: 0;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}
.home-dash .hd-dept-hero-title .bi {
	color: var(--hd-white-a80);
	font-size: 1.3rem;
}
.home-dash .hd-dept-hero-sub {
	color: var(--hd-white-a80);
	font-size: .85rem;
	max-width: 72ch;
	margin: .15rem 0 0;
}
.home-dash .hd-dept-role-pill {
	background: var(--hd-lime-a12);
	border-color: var(--hd-lime-a25);
}
.home-dash .hd-dept-role-pill .hd-stat-ico {
	background: var(--hd-lime-a25);
	color: var(--hd-lime-soft);
}
/* Role pills only have a value, no label — size the value to match
   the visual weight of label+value chips on index (small uppercase
   text rather than the larger value font). */
.home-dash .hd-dept-role-pill .hd-stat-value {
	color: #fff;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-left: auto;
	line-height: 1;
}

/* ---------------- Tab bar ---------------- */
.home-dash .hd-dept-tabs {
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--hd-line);
	max-width: 100%;
	min-width: 0;
	/* `overflow: hidden` establishes a new block formatting context so the
	   inner flex list can't force this <nav> to expand to its content
	   width. Combined with the overflow JS in settings.html, this lets us
	   measure available space and tuck overflowing tabs into the More menu
	   without ever showing a horizontal scrollbar. */
	overflow: hidden;
}
.home-dash .hd-dept-tabs-list {
	display: flex;
	flex-wrap: nowrap;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	/* No horizontal scroll — overflowing items are moved into the
	   .hd-dept-tab-overflow dropdown by the script in settings.html. */
	overflow: hidden;
}
/* "More" overflow trigger — sits at the end of the strip, looks like a
   tab, opens a Bootstrap dropdown of items that didn't fit. */
.home-dash .hd-dept-tab-overflow > .hd-dept-tab {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
}
.home-dash .hd-dept-tab-overflow .dropdown-menu {
	min-width: 14rem;
}
.home-dash .hd-dept-tab-overflow .dropdown-item,
.home-dash .hd-gf-members-foot,
.hd-modal.hd-tb-newtask-modal .hd-tb-newtask-soc,
.home-dash .hd-iss-trial-head {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.home-dash .hd-dept-tab-overflow .dropdown-item .bi {
	width: 1.1rem;
	text-align: center;
}
.home-dash .hd-dept-tab-item { list-style: none; flex-shrink: 0; }
.home-dash .hd-dept-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-muted);
	text-decoration: none;
	border-radius: 8px 8px 0 0;
	transition: color .16s ease, background .16s ease;
	white-space: nowrap;
}
.home-dash .hd-dept-tab:hover,
.home-dash .hd-task-tabnav-btn:hover {
	color: var(--hd-ink);
	background: rgba(0, 0, 0,.04);
}
.home-dash .hd-dept-tab .bi {
	font-size: .95rem;
	color: var(--hd-muted);
	transition: color .16s ease;
}
.home-dash .hd-dept-tab.is-active,
.home-dash .hd-wsch-soc-value,
.home-dash .hd-kra-foundation-title,
.home-dash .hd-lang-title {
	color: var(--hd-ink);
	font-weight: 700;
}
.home-dash .hd-dept-tab.is-active::after,
.home-dash .hd-task-tabnav-btn.active::after {
	content: "";
	position: absolute;
	left: .75rem; right: .75rem; bottom: -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--hd-lime), var(--hd-blue));
	border-radius: 2px 2px 0 0;
}

/* ---------------- Content wrapper ---------------- */
.home-dash .hd-dept-content,
.home-dash .hd-dept-work-column,
.home-dash .hd-groupinfo,
.home-dash .hd-groupinfo-form,
.home-dash .hd-curriculum,
.home-dash .hd-jd-builder,
.home-dash .hd-jd-right-column,
.home-dash .hd-wsch,
.home-dash .hd-curriculum-page,
.home-dash .hd-jc-main-stack,
.home-dash .hd-emp-mgr,
.home-dash .hd-licmgr-main-stack,
.home-dash .hd-kb-left,
.home-dash .hd-mr-edit-body,
.home-dash .hd-su-sections,
.home-dash .hd-pb-layout,
.hd-modal .hd-stb-q-imgmodal-tools,
.hd-modal .hd-su-modal-body,
.home-dash .hd-lst-assembled,
.home-dash .hd-lst-grouped {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ---------------- Mission / Vision strip ---------------- */
.home-dash .hd-dept-mv-card {
	position: relative;
	padding: 1rem 1.1rem 1rem 1.25rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	height: 100%;
	overflow: hidden;
}
.home-dash .hd-dept-mv-card::before {
	content: "";
	position: absolute;
	left: 0; top: 12%; bottom: 12%;
	width: 3px;
	border-radius: 0 2px 2px 0;
}
.home-dash .hd-dept-mv-mission::before { background: linear-gradient(180deg, var(--hd-lime), var(--hd-blue)); }
.home-dash .hd-dept-mv-vision::before  { background: linear-gradient(180deg, var(--hd-blue), #62DCFA); }
.home-dash .hd-dept-mv-label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .35rem;
}
.home-dash .hd-dept-mv-mission .hd-dept-mv-label .bi { color: #5c8a00; }
.home-dash .hd-dept-mv-text,
.home-dash .hd-su-section-body,
.home-dash .hd-ob-overview-value {
	font-size: .92rem;
	line-height: 1.5;
	color: var(--hd-ink);
}
.home-dash .hd-dept-mv-empty {
	font-style: italic;
	color: var(--hd-muted);
	font-size: .88rem;
}

/* ---------------- Main layout (KRAs+Tasks | Members) ---------------- */
.home-dash .hd-dept-main,
.home-dash .hd-emp-jd-main,
.home-dash .hd-kra-main,
.home-dash .hd-qe-main,
.home-dash .hd-qed-main,
.home-dash .hd-ke-main,
.home-dash .hd-gm-main,
.home-dash .hd-prog-main,
.home-dash .hd-news-form-row { align-items: stretch; }

/* ---------------- KRAs panel ---------------- */
.home-dash .hd-dept-kras-hint,
.home-dash .hd-dept-tasks-meta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .72rem;
	color: var(--hd-white-a80);
	font-style: italic;
}
.home-dash .hd-dept-kras-hint .bi,
.home-dash .hd-dept-tasks-meta .bi,
.home-dash .hd-kra-hero .hd-eyebrow .bi { font-size: .85rem; color: var(--hd-white-a80); }
/* Force both KRAs and Tasks columns to true 50/50, panels to fill their column */
.home-dash .hd-dept-kra-tasks > [class*="col-"],
.home-dash .hd-groupinfo-contact-info,
.home-dash .hd-curriculum-row-title,
.home-dash .hd-curriculum-row-type,
.home-dash .hd-curriculum-track-type,
.home-dash .hd-group-tasks-cell-title,
.home-dash .hd-kei-cell,
.home-dash .hd-qe-main > [class*="col-"],
.home-dash .hd-qed-main > [class*="col-"],
.home-dash .hd-ke-main > [class*="col-"],
.home-dash .hd-gm-main > [class*="col-"],
.home-dash .hd-gmove-tree-name,
.home-dash .hd-cr-grid > [class*="col-"],
.home-dash .hd-grp-member-detail-col,
.home-dash .hd-prog-main > [class*="col-"],
.home-dash .hd-eq-spec-row > [class*="col-"],
.home-dash .hd-emp-main-roster,
.home-dash .hd-emp-main-aside,
.hd-cs-poster-col,
.hd-cs-footer-brand,
.home-dash .hd-cat-tile,
.home-dash .hd-iss-trial-col,
.home-dash .hd-stb-q-match-preview-col {
	min-width: 0;
}
.home-dash .hd-dept-kra-tasks > [class*="col-"] > .hd-panel {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
.home-dash .hd-dept-kras { min-width: 0; width: 100%; }
.home-dash .hd-dept-kras-body { min-width: 0; padding: .85rem 1rem; }

/* KRA list — stacked rows, styled to match .hd-dept-task on the right */
.home-dash .hd-dept-kra-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	min-width: 0;
}
.home-dash .hd-dept-kra-item {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}
.home-dash .hd-dept-kra-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: .65rem;
	width: 100%;
	padding: .55rem .75rem .55rem .85rem;
	margin-bottom: .3rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink);
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, padding-left .18s ease, background .18s ease, color .18s ease;
}

/* Left accent bar — site-wide standard 3px solid --hd-blue, square. */
.home-dash .hd-dept-kra-chip::before,
.home-dash .hd-dept-task::before {
	content: "";
	position: absolute;
	left: 0; top: 12%; bottom: 12%;
	width: 3px;
	background: var(--hd-blue);
	opacity: 0;
	transition: opacity .18s ease, top .18s ease, bottom .18s ease;
}
.home-dash .hd-dept-kra-chip:hover,
.home-dash .hd-dept-kra-chip:focus-visible {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-xs);
	transform: translateX(2px);
	color: var(--hd-blue);
	padding-left: 1rem;
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
}
.home-dash .hd-dept-kra-chip:hover::before,
.home-dash .hd-dept-kra-chip:focus-visible::before,
.home-dash .hd-dept-task:hover::before,
.home-dash .hd-dept-task:focus-visible::before,
.home-dash .hd-maint-row.is-selected::before,
.home-dash .hd-maint-row:hover::before,
.home-dash .hd-maint-eq-row.is-selected::before,
.home-dash .hd-maint-eq-row:hover::before,
.home-dash .hd-jd-row.is-selected::before,
.home-dash .hd-jd-row:hover::before,
.home-dash .hd-wsch-row:hover::before,
.home-dash .hd-wsch-row.is-selected::before,
.home-dash .hd-kra-list-item:hover::before,
.home-dash .hd-kra-list-item.is-selected::before {
	opacity: 1;
	top: 0; bottom: 0;
}
.home-dash .hd-dept-kra-chip:active,
.home-dash .hd-dept-task:active {
	transform: translateX(2px) scale(.997);
}

/* Selected state — preserves the existing dark-blue gradient */
.home-dash .hd-qe-list-link.is-selected,
.home-dash .hd-qed-list-row.is-selected {
	background: linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 12px var(--hd-blue-a25);
}
/* Selected KRA chip — restyled from the black->blue gradient pill to the
   standard selected-row look: soft-blue surface + 3px solid --hd-blue left
   stripe, matching the kra builder rows. */
.home-dash .hd-dept-kra-chip.is-selected,
.home-dash .hd-dept-kra-chip.active {
	background: var(--hd-blue-soft);
	color: var(--hd-ink);
	border-color: var(--hd-blue);
	border-radius: 3px;
	box-shadow: inset 3px 0 0 var(--hd-blue), 0 2px 8px var(--hd-blue-a18);
}
.home-dash .hd-kei-employee-menu .dropdown-item.active {
	color: #fff;
	background: linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
}

/* Leading bullseye icon — matches .hd-dept-task-icon styling */
.home-dash .hd-dept-kra-icon {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .9rem;
	transition: background .18s ease, color .18s ease;
}
.home-dash .hd-dept-kra-chip:hover .hd-dept-kra-icon,
.home-dash .hd-dept-task:hover .hd-dept-task-icon,
.home-dash .hd-contact-item:hover .hd-contact-item-icon,
.home-dash .hd-group-tasks-row:hover .hd-group-tasks-icon {
	background: var(--hd-blue-a18);
}
.home-dash .hd-panel-head .hd-dept-count-pill,
.home-dash .hd-qed-list-row.is-selected .hd-qed-list-action:hover {
	background: var(--hd-white-a18);
	color: #fff;
}

/* Title */
.home-dash .hd-dept-kra-chip .hd-dept-kra-title,
.home-dash .hd-dept-task-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .88rem;
	font-weight: 500;
	color: inherit;
	letter-spacing: -.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .18s ease;
}

/* External-link icon — sits inside the row, revealed via .visible-hover-child */
.home-dash .hd-dept-kra-open {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 6px;
	color: var(--hd-muted);
	transition: color .18s ease, background .18s ease;
}
.home-dash .hd-qed-list-row.is-selected .hd-qed-list-action,
.hd-cs-not-assigned .bi,
.home-dash .hd-lst-hero .hd-hero-note .bi {
	color: var(--hd-white-a65);
}
.home-dash .hd-dept-kra-open .bi,
.home-dash .hd-contact-action .bi,
.home-dash .hd-field-help-link .bi,
.home-dash .hd-prog-activity-group .bi,
.home-dash .hd-news-info-btn .bi,
.home-dash .hd-lst-plan-participant-remove .bi { font-size: .8rem; }

/* Trailing chevron — same reveal as .hd-dept-task-chev */
.home-dash .hd-dept-kra-chev,
.home-dash .hd-dept-task-chev {
	flex-shrink: 0;
	font-size: .75rem;
	color: var(--hd-muted);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.home-dash .hd-dept-kra-chip:hover .hd-dept-kra-chev,
.home-dash .hd-dept-kra-chip:focus-visible .hd-dept-kra-chev,
.home-dash .hd-dept-list-item:hover .hd-dept-list-ext,
.home-dash .hd-dept-list-item:hover .hd-dept-list-chev,
.home-dash .hd-dept-task:hover .hd-dept-task-chev,
.home-dash .hd-dept-task:focus-visible .hd-dept-task-chev,
.home-dash .hd-group-tasks-row:hover .hd-group-tasks-chev {
	opacity: 1;
	transform: translateX(0);
	color: var(--hd-blue);
}

/* ---------------- Tasks panel ---------------- */
.home-dash .hd-dept-tasks-body {
	padding: .85rem 1rem;
	max-height: 520px;
	overflow-y: auto;
}
.home-dash .hd-dept-tasks-group { /* each KRA's tasks block */ }

/* ---------------- Members sidebar ---------------- */
/* The panel-body carries both .hd-panel-body and .hd-dept-members-body
   classes; padding lives on the more-specific selector so it can't be
   reset by the base panel-body rule. Earlier this rule set padding: 0
   here and put the visible padding on .hd-dept-members-body alone, but
   the panel-scoped selector has higher specificity and was winning,
   leaving member cards touching the panel edges. */
.home-dash .hd-dept-members-body {
	max-height: 820px;
	overflow-y: auto;
}
.home-dash .hd-dept-member {
	display: block;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: .45rem;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home-dash .hd-dept-member:hover {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-xs);
	transform: translateY(-1px);
}
.home-dash .hd-dept-member.is-primary {
	/* Canonical active-chip affordance — soft-blue surface + 3px solid
	   blue left stripe + soft drop shadow. Identical to
	   .hd-kb-list-row.is-selected so the active item reads the same on
	   every surface. */
	background: var(--hd-blue-soft);
	border-color: var(--hd-blue);
	box-shadow:
		inset 3px 0 0 var(--hd-blue),
		0 2px 8px var(--hd-blue-a18);
}
.home-dash .hd-dept-member-primary-badge {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	margin-left: .25rem;
	padding: .08rem .42rem;
	border-radius: 999px;
	background: var(--hd-blue-soft, #eaf1f8);
	color: var(--hd-blue);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.home-dash .hd-dept-member-primary-badge .bi {
	font-size: .65rem;
}

/* Inline note shown inside the brainstorm finish modal when the
   facilitator's "Review & Clean Up" path is suppressed (not everyone
   has finished and the brainstorm window is still open). Reads as a
   muted info pill so the editor sees WHY the button isn't there
   instead of just an empty footer slot. */
.home-dash .hd-finish-cleanup-note,
.hd-finish-cleanup-note {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .65rem;
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	color: var(--hd-muted);
	font-size: .8rem;
	max-width: 28rem;
}
.hd-finish-cleanup-note .bi,
.hd-modal.hd-jc-delete-modal .hd-jc-delete-warn .bi,
.hd-modal.hd-grp-modal .hd-grp-modal-note .bi,
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-footnote .bi,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-dept > .bi {
	flex: 0 0 auto;
	color: var(--hd-blue);
}
.home-dash .hd-dept-member-row {
	display: flex;
	gap: .6rem;
	padding: .55rem .7rem;
}
.home-dash .hd-dept-member-avatar-wrap {
	position: relative;
	flex-shrink: 0;
	width: 42px; height: 42px;
}
.home-dash .hd-dept-member-avatar {
	width: 42px; height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0,.08);
}
.home-dash .hd-dept-member-role-badge {
	position: absolute;
	bottom: -3px; right: -3px;
	width: 17px; height: 17px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-size: .6rem;
	box-shadow: 0 0 0 2px var(--hd-surface);
}
.home-dash .hd-dept-member-role-badge--supv { background: linear-gradient(135deg, #5c8a00, var(--hd-blue)); }
.home-dash .hd-dept-member-role-badge--mgr  { background: linear-gradient(135deg, var(--hd-blue), #4f46e5); }
.home-dash .hd-dept-member-name-row {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	flex-wrap: wrap;
}
.home-dash .hd-dept-member-name {
	font-size: .88rem;
	font-weight: 600;
	color: var(--hd-ink);
	text-decoration: none;
	letter-spacing: -.005em;
	line-height: 1.25;
}
.home-dash .hd-dept-member-name:hover,
.home-dash .hd-dept-member-contact:hover,
.home-dash .hd-dept-list-link:hover,
.home-dash .hd-contact-item-link:hover,
.home-dash .hd-groupinfo-identity-link:hover,
.home-dash .hd-groupinfo-contact-line a:hover,
.home-dash .hd-curriculum-row-link:hover,
.home-dash .hd-curriculum-task-link:hover,
.home-dash .hd-group-tasks-link:hover,
.home-dash .hd-maint-row-link:hover,
.home-dash .hd-jd-row-link:hover,
.home-dash .hd-wsch-row-link:hover,
a.home-dash .hd-emp-identity-line:hover,
.home-dash .hd-emp-identity-line[href]:hover,
.home-dash .hd-emp-task-link:hover,
.home-dash .hd-emp-groups-link:hover,
.home-dash .hd-kei-task-link:hover,
.home-dash .hd-kra-list-link:hover,
.home-dash .hd-jc-list-link:hover,
.home-dash .hd-cert-list-link:hover,
.home-dash .hd-agency-list-link:hover,
.home-dash .hd-ind-list-link:hover,
.home-dash .hd-grp-member-name:hover,
.home-dash .hd-app-list-link:hover,
.home-dash .hd-mfg-list-link:hover,
.home-dash .hd-perm-admin-link:hover,
a.home-dash .hd-cat-tile-name:hover,
.home-dash a.hd-cat-tile-name:hover,
.home-dash .hd-cb-list-link:hover { color: var(--hd-blue); text-decoration: none; }
.home-dash .hd-dept-member-name--toggle { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.home-dash .hd-dept-member-name-chev {
	font-size: .65rem;
	color: var(--hd-muted);
	transition: transform .22s ease;
}
.home-dash .hd-dept-member-role-text {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--hd-blue);
}
.home-dash .hd-dept-member-title {
	font-size: .74rem;
	color: var(--hd-muted);
	margin-top: .05rem;
	line-height: 1.3;
}
.home-dash .hd-dept-member-contacts {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin-top: .3rem;
}
.home-dash .hd-dept-member-contact {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .74rem;
	color: var(--hd-muted);
	text-decoration: none;
	line-height: 1.3;
}
.home-dash .hd-dept-member-contact .break-at {
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 100%;
}
.home-dash .hd-break-at-user,
.home-dash .hd-break-at-domain {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.home-dash .hd-dept-member-groups {
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
	padding: .5rem .7rem;
}
.home-dash .hd-dept-member-groups-head {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .4rem;
}
.home-dash .hd-dept-member-groups-list,
.home-dash .hd-wsch-procedure-list,
.home-dash .hd-kl-pending-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.home-dash .hd-dept-member-groups-item {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
	padding: .25rem 0;
	font-size: .8rem;
}
.home-dash .hd-dept-member-groups-name,
.home-dash .hd-cl-chip-value { color: var(--hd-ink); font-weight: 500; }
.home-dash .hd-dept-member-groups-role,
.home-dash .hd-prog-activity-date { color: var(--hd-muted); font-size: .72rem; font-weight: 600; }
.home-dash .hd-dept-member-groups-empty { font-size: .78rem; color: var(--hd-muted); font-style: italic; }

/* ---------------- Count pill (reused on headers) ---------------- */
.home-dash .hd-dept-count-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin-left: .4rem;
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	font-size: .7rem;
	font-weight: 700;
	border-radius: 50%;
	letter-spacing: 0;
	flex-shrink: 0;
}
/* Dark-head variant — when the count pill sits inside a panel head
   (now dark blue suite-wide), the original blue-on-blue-tint default
   washes out. Override to a white tint with white text so it reads
   on the dark fill. Light-surface usages (e.g. inside panel bodies
   or other contexts) keep the base styling. */
/* Strong variant — solid blue background, white text (used on home page) */
.home-dash .hd-dept-count-pill.is-strong {
	background: #0071CE;
	color: #fff;
}

/* ---------------- Empty state variant ---------------- */
.home-dash .hd-dept-empty,
.home-dash .hd-dept-tasks-empty,
.home-dash .hd-kra-tasks-empty,
.home-dash .hd-qe-list-empty,
.home-dash .hd-qed-list-empty,
.home-dash .hd-qed-img-empty,
.home-dash .hd-gm-summary-empty,
.home-dash .hd-gb-empty,
.home-dash .hd-kb-list-empty,
.home-dash .hd-kb-notes-empty,
.home-dash .hd-tb-list-empty {
	padding: 2rem 1rem;
}
.home-dash .hd-dept-empty-sub {
	font-size: .84rem;
	color: var(--hd-muted);
	max-width: 36ch;
	margin: .2rem auto .8rem;
	line-height: 1.45;
}

/* ---------------- Reference Library (tabbed) ---------------- */
.home-dash .hd-dept-refs .hd-panel-head {
	flex-wrap: wrap;
	gap: .75rem;
	row-gap: .5rem;
}
.home-dash .hd-dept-refs-tabs {
	display: inline-flex;
	list-style: none;
	margin: 0;
	padding: .25rem;
	gap: .15rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
}
.home-dash .hd-dept-refs-tab {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .75rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--hd-ink);
	background: transparent;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.home-dash .hd-dept-refs-tab .bi { font-size: .88rem; color: var(--hd-muted); transition: color .18s ease; }
.home-dash .hd-dept-refs-tab:hover {
	background: rgba(0, 0, 0,.04);
}
.home-dash .hd-dept-refs-panel {
	display: none;
	padding: 1rem 1.15rem 1.25rem;
}

/* Reference-tab card (inside each reference panel) */
.home-dash .hd-dept-refs-card,
.home-dash .hd-emp-position-kras {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.home-dash .hd-dept-refs-card-head,
.home-dash .hd-gb-overview-head,
.home-dash .hd-gb-update-head,
.home-dash .hd-kb-list-head,
.home-dash .hd-kb-update-head,
.home-dash .hd-kb-notes-head,
.home-dash .hd-kb-obs-head,
.home-dash .hd-tb-list-head,
.home-dash .hd-mr-head,
.home-dash .hd-qb-overview-head,
.home-dash .hd-qb-cu-head,
.home-dash .hd-qb-al-head,
.home-dash .hd-pb-overview-head,
.home-dash .hd-lst-list-head,
.home-dash .hd-lst-overview-head,
.home-dash .hd-lst-plan-head,
.home-dash .hd-lst-items-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}
.home-dash .hd-dept-refs-card-title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	font-size: .95rem;
	color: var(--hd-ink);
}
.home-dash .hd-dept-refs-card-title .bi,
.hd-kl-link-info-headline .bi {
	font-size: 1.05rem;
	color: var(--hd-blue);
}

/* Shared list items inside reference tabs */
.home-dash .hd-dept-list,
.hd-modal .hd-workforce-list,
.home-dash .hd-kra-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.home-dash .hd-dept-list-item {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--hd-line);
	background: var(--hd-surface);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-dash .hd-dept-list-item:hover,
.home-dash .hd-contact-item:hover,
.home-dash .hd-assignable-item:hover,
.home-dash .hd-curriculum-row:hover,
.home-dash .hd-group-tasks-row:hover,
.home-dash .hd-maint-row:hover,
.home-dash .hd-maint-eq-row:hover,
.home-dash .hd-jd-row:hover,
.home-dash .hd-jd-task-row:hover,
.home-dash .hd-wsch-row:hover,
.home-dash .hd-qed-list-row:hover {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-xs);
	transform: translateX(2px);
}
.home-dash .hd-dept-list-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .75rem;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
}.home-dash .hd-dept-list-icon,
.home-dash .hd-emp-task-icon {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .9rem;
}
.home-dash .hd-dept-list-text {
	flex: 1 1 auto;
	font-size: .88rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.home-dash .hd-dept-list-ext,
.home-dash .hd-dept-list-chev {
	flex-shrink: 0;
	font-size: .78rem;
	color: var(--hd-muted);
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.home-dash .hd-dept-list-actions {
	flex-shrink: 0;
	display: inline-flex;
	gap: .15rem;
	padding-right: .45rem;
}
.home-dash .hd-dept-list-action {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	color: var(--hd-muted);
	text-decoration: none;
	transition: all .18s ease;
}
.home-dash .hd-dept-list-action .bi,
.home-dash .hd-jc-list-delete .bi,
.home-dash .hd-jc-note-delete .bi,
.home-dash .hd-cert-list-delete .bi,
.home-dash .hd-gt-action .bi,
.home-dash .hd-agency-list-delete .bi,
.home-dash .hd-ind-list-delete .bi,
.home-dash .hd-emp-mgr-search-submit .bi,
.home-dash .hd-feat-row-action .bi,
.home-dash .hd-mfg-list-delete .bi,
.home-dash .hd-perm-admin-remove .bi,
.home-dash .hd-empform-avatar-upload .hd-field-file-title,
.home-dash .hd-eq-task-remove .bi,
.home-dash .hd-emp-msg-seeall .bi,
.home-dash .hd-cat-action .bi,
.home-dash .hd-cb-lic-action .bi,
.home-dash .hd-kb-note-delete .bi,
.home-dash .hd-kb-obs-pill-action .bi,
.home-dash .hd-tb-expert-pill-remove .bi,
.home-dash .hd-iss-trial-card-action .bi { font-size: .82rem; }
.home-dash .hd-dept-list-action--delete:hover,
.home-dash .hd-contact-action--delete:hover,
.home-dash .hd-curriculum-stat--overdue .hd-curriculum-stat-icon,
.home-dash .hd-proc-trial--failed .hd-proc-trial-status {
	background: rgba(201,27,27,.1);
	color: var(--hd-danger);
}

/* ---------------- FAQ search inside reference tab ---------------- */
.home-dash .hd-dept-faq-search-icon,
.home-dash .hd-inline-search-icon {
	position: absolute;
	left: .75rem; top: 50%;
	transform: translateY(-50%);
	color: var(--hd-muted);
	font-size: .85rem;
	pointer-events: none;
}
.home-dash .hd-dept-faq-search-input,
.home-dash .hd-inline-search-input {
	padding-left: 2.15rem !important;
	border-radius: 999px !important;
	background: var(--hd-surface-2);
}
.home-dash .hd-dept-faq-results {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0; right: 0;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	box-shadow: var(--hd-shadow-md);
	max-height: 360px;
	overflow-y: auto;
	z-index: 50;
	padding: .3rem;
}

/* ---------------- Modal extras (faq + media) ---------------- */
.hd-modal .hd-field-file,
.hd-field-file {
	padding: .35rem !important;
	cursor: pointer;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-size: .88rem;
	color: var(--hd-ink);
	display: flex;
	align-items: center;
	gap: .75rem;
}
/* The native file-picker button — browsers render this inside the
   <input type="file"> via shadow DOM. ::file-selector-button is the
   modern standard; ::-webkit-file-upload-button is the legacy fallback
   for older Safari. Both get the same treatment. */
.hd-modal .hd-field-file::file-selector-button,
.hd-modal .hd-field-file::-webkit-file-upload-button,
.hd-field-file::file-selector-button,
.hd-field-file::-webkit-file-upload-button {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	margin-right: .75rem;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .005em;
	color: #fff;
	background: linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
	border: none;
	border-radius: 7px;
	cursor: pointer;
	box-shadow: 0 2px 6px var(--hd-blue-a25);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hd-modal .hd-field-file:hover::file-selector-button,
.hd-modal .hd-field-file:hover::-webkit-file-upload-button,
.hd-field-file:hover::file-selector-button,
.hd-field-file:hover::-webkit-file-upload-button {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px var(--hd-blue-a35);
	filter: brightness(1.05);
}
.hd-modal .hd-field-file:active::file-selector-button,
.hd-modal .hd-field-file:active::-webkit-file-upload-button,
.hd-field-file:active::file-selector-button,
.hd-field-file:active::-webkit-file-upload-button {
	transform: translateY(0);
	box-shadow: 0 2px 6px var(--hd-blue-a25);
}
/* Focus state — keyboard users get a visible ring on the whole input */
.hd-modal .hd-field-help,
.hd-field-help {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .35rem;
	font-size: .78rem;
	color: var(--hd-muted);
}

/* ---------------- Responsive tuning ---------------- */
@media (max-width: 991.98px) {
	.home-dash .hd-dept-sidebar,
	.home-dash .hd-empform-sidebar { position: static; }
}
@media (max-width: 575.98px) {
	.home-dash .hd-dept-refs-tabs { flex-wrap: wrap; width: 100%; }
	.home-dash .hd-dept-refs-tab { flex: 1 1 auto; justify-content: center; }
}


/* ===========================================================================
   DEPARTMENT — MODERN "ADD" BUTTON
   ---------------------------------------------------------------------------
   Dedicated button style for "create new item" actions in reference-tab
   headers (Policies / Library / FAQs). A pill-shaped button with a
   gradient circular plus-icon badge on the left, surface background,
   and a lime→blue tinted border + lift on hover. More prominent than a
   ghost button — these are primary actions within their tab context.
   =========================================================================== */
.hd-dept-add-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .85rem .3rem .35rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
	color: var(--hd-ink);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .005em;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
	position: relative;
}
.hd-dept-add-btn:hover,
.hd-dept-add-btn:focus-visible {
	border-color: transparent;
	background-image: linear-gradient(var(--hd-surface), var(--hd-surface)),
	                  linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 4px 12px var(--hd-blue-a18);
	transform: translateY(-1px);
	color: var(--hd-ink);
	text-decoration: none;
}
.hd-dept-add-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px var(--hd-blue-a18);
}

/* Gradient plus-icon badge (the visual hook) */
.hd-dept-add-btn-icon {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	color: #fff;
	box-shadow:
		inset 0 1px 0 var(--hd-white-a25),
		inset 0 -1px 0 rgba(0,0,0,.15),
		0 2px 6px var(--hd-blue-a25);
	transition: transform .25s cubic-bezier(.22,.9,.32,1), box-shadow .25s ease;
}
.hd-dept-add-btn-icon .bi {
	font-size: .85rem;
	line-height: 1;
}
.hd-dept-add-btn:hover .hd-dept-add-btn-icon {
	box-shadow:
		inset 0 1px 0 var(--hd-white-a25),
		inset 0 -1px 0 rgba(0,0,0,.15),
		0 4px 12px var(--hd-blue-a35);
}

[data-bs-theme=dark] .hd-dept-add-btn,
a.home-dash .hd-emp-identity-line,
.home-dash .hd-emp-identity-line[href],
.home-dash .hd-curriculum-section .hd-panel-head .hd-panel-title,
.home-dash .hd-licmgr-list-item.is-selected .hd-licmgr-list-alloc,
.home-dash .hd-lic-owner,
.home-dash .hd-gdel-impact-none,
.home-dash .hd-emp-msg-item.is-unread .hd-emp-msg-preview,
.hd-kl-delete-rules > summary:hover,
.hd-modal.hd-cr-summary-modal .hd-cr-summary-content,
.hd-modal.hd-cr-breakdown-modal #companyBreakdownContent,
[data-bs-theme=dark] .home-dash .hd-kra-list-item.is-selected .hd-kra-list-link,
[data-bs-theme=dark] .home-dash .hd-cb-list-item.is-selected .hd-cb-list-link,
[data-bs-theme=dark] .home-dash .hd-ind-list-item.is-selected .hd-ind-list-link,
.home-dash .hd-licmgr-list-item.is-selected .hd-licmgr-list-link,
.hd-modal.hd-eq-confirm-modal .hd-eq-confirm-body strong { color: var(--hd-ink); }
[data-bs-theme=dark] .hd-dept-add-btn:hover {
	background-image: linear-gradient(var(--hd-surface), var(--hd-surface)),
	                  linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
}


/* ===========================================================================
   DEPARTMENT — TASK ROWS (_kra_tasks.html)
   ---------------------------------------------------------------------------
   Task links inside the Tasks panel and KRA-specific task containers.
   Gets the same visual language as bookmarks + announcements:
   card-like rows, lift + tint on hover, gradient accent bar slides in
   from the left, trailing chevron fades in. Custom vs synced tasks get
   different leading-icon colors (custom = lime, synced = blue).
   =========================================================================== */
.home-dash .hd-dept-task {
	position: relative;
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .75rem .55rem .85rem;
	margin-bottom: .3rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-ink);
	text-decoration: none;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, padding-left .18s ease;
}
.home-dash .hd-dept-task:hover,
.home-dash .hd-dept-task:focus-visible {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-xs);
	transform: translateX(2px);
	color: var(--hd-blue);
	text-decoration: none;
	padding-left: 1rem;
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
}

/* Leading document icon — matches the policies list icon treatment */
.home-dash .hd-dept-task-icon {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .9rem;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

/* Title */

/* Sync indicator — revealed via upstream .visible-hover-child mechanism */
.home-dash .hd-dept-task-sync {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 6px;
	color: var(--hd-muted);
	font-size: 1rem;
	transition: color .18s ease, background .18s ease;
}

/* Trailing chevron — appears on hover to reinforce clickability */


[data-bs-theme=dark] .home-dash .hd-dept-task,
[data-bs-theme=dark] .home-dash .hd-tile-go,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-user:hover,
.hd-modal.hd-stb-q-remove-modal .modal-content {
	background: var(--hd-surface);
}
[data-bs-theme=dark] .home-dash .hd-dept-task:hover,
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle:hover,
.home-dash .hd-emp-mgr-filter-option:hover,
.home-dash .hd-perm-check:hover,
.home-dash .hd-cat-tile-row:hover {
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
}


/* ===========================================================================
   DEPARTMENT — CONTACT TAB (group_contact_info.html + 4 partials)
   ---------------------------------------------------------------------------
   Four parallel contact-type panels (Addresses / Phones / Websites /
   Emails). Each panel holds a list of compact "contact-item" cards with
   icon chip on the left, label/value stack in the middle, and hover-
   revealed edit/delete actions on the right.
   =========================================================================== */

/* ---- Panel wrapper (subtle sizing tweak; inherits .hd-panel) ---- */
.home-dash .hd-contact-panel,
.home-dash .hd-wsch-edit-panel { height: 100%; }
.home-dash .hd-contact-body {
	padding: .6rem .75rem .75rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* ---- Individual contact item (row) ---- */
.home-dash .hd-contact-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .6rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .25s ease;
}
.home-dash .hd-contact-item.is-primary,
.home-dash .hd-emp-groups-row.is-primary {
	border-color: var(--hd-lime-a35);
}
.home-dash .hd-contact-item.deleted {
	opacity: 0;
	transform: translateX(-20px);
	pointer-events: none;
}

/* Leading icon chip */
.home-dash .hd-contact-item-icon,
.home-dash .hd-maint-eq-row-icon {
	flex-shrink: 0;
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: 1rem;
	transition: background .18s ease;
}
.home-dash .hd-contact-item.is-primary .hd-contact-item-icon,
.home-dash .hd-maint-row.is-selected .hd-maint-row-icon,
.home-dash .hd-maint-eq-row.is-selected .hd-maint-eq-row-icon,
.home-dash .hd-jd-row.is-selected .hd-jd-row-icon {
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
}

/* Body (label + value) */
.home-dash .hd-contact-item-label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-contact-item-value {
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink);
	line-height: 1.45;
	word-break: break-word;
}
.home-dash .hd-contact-item-link {
	color: var(--hd-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}
.home-dash .hd-contact-item-extlink {
	font-size: .7rem;
	color: var(--hd-muted);
	opacity: 0;
	transition: opacity .18s ease;
}

/* Primary badge (star pill) */
.home-dash .hd-contact-primary-badge {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .1rem .4rem;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a12));
	color: #5c8a00;
	border-radius: 4px;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.home-dash .hd-contact-primary-badge .bi,
.home-dash .hd-contact-meta-badge .bi,
.home-dash .hd-emp-sms-badge .bi { font-size: .62rem; }

/* Meta badge (SMS indicator on phones) */
.home-dash .hd-contact-meta-badge {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .1rem .4rem;
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	border-radius: 4px;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* Actions (hover-revealed edit/delete) */
.home-dash .hd-contact-item-actions {
	flex-shrink: 0;
	display: inline-flex;
	gap: .2rem;
	align-items: center;
}
.home-dash .hd-contact-action {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 7px;
	color: var(--hd-muted);
	text-decoration: none;
	transition: all .18s ease;
}

/* ---- Smaller add button for narrow contact panels ---- */
.hd-dept-add-btn--sm {
	padding: .2rem .6rem .2rem .25rem;
	font-size: .72rem;
}
.hd-dept-add-btn--sm .hd-dept-add-btn-icon,
.hd-modal .hd-jd-lock-card-toggle .hd-check {
	width: 22px; height: 22px;
}

/* ---- Modal checkbox field (for "is primary" / "SMS" / etc.) ---- */
.hd-modal .hd-field-check,
.hd-field-check {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: .7rem;
}
/* Standardized suite checkbox — renders the Bootstrap Icons bi-square /
   bi-check-square-fill SVG paths via mask-image so every real
   <input type="checkbox"> is pixel-identical to the icon-glyph
   checkboxes in suite/category_list (which use <i class="bi">). The
   CSS background-color paints through the mask, so the colour is
   themed via --hd-muted (unchecked) and --hd-blue (checked / hover). */
.hd-modal .hd-check,
.hd-check,
.home-dash .hd-stb-q-survey-update-toggle-input,
.hd-modal .hd-iss-trial-toggle-input,
.home-dash .form-check-input[type="checkbox"]:not([role="switch"]),
.hd-modal .form-check-input[type="checkbox"]:not([role="switch"]) {
	flex-shrink: 0;
	width: 18px; height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	background-color: var(--hd-muted);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M14%201a1%201%200%200%201%201%201v12a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V2a1%201%200%200%201%201-1zM2%200a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M14%201a1%201%200%200%201%201%201v12a1%201%200%200%201-1%201H2a1%201%200%200%201-1-1V2a1%201%200%200%201%201-1zM2%200a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2z%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: background-color .15s ease;
}
.suite-color-2-4,
.hd-modal .hd-check:hover,
.home-dash .hd-groupinfo-type:hover .hd-groupinfo-type-face::before,
.hd-check:hover,
.home-dash .hd-stb-q-survey-update-toggle-input:hover,
.hd-modal .hd-iss-trial-toggle-input:hover,
.home-dash .form-check-input[type="checkbox"]:not([role="switch"]):hover,
.hd-modal .form-check-input[type="checkbox"]:not([role="switch"]):hover { background-color: var(--hd-blue); }
.hd-modal .hd-check:focus-visible,
.hd-check:focus-visible,
.home-dash .hd-stb-q-survey-update-toggle-input:focus-visible,
.hd-modal .hd-iss-trial-toggle-input:focus-visible,
.home-dash .form-check-input[type="checkbox"]:not([role="switch"]):focus-visible,
.hd-modal .form-check-input[type="checkbox"]:not([role="switch"]):focus-visible {
	outline: 2px solid var(--hd-blue-a35);
	outline-offset: 2px;
}
.hd-modal .hd-check:checked,
.hd-check:checked,
.home-dash .hd-stb-q-survey-update-toggle-input:checked,
.hd-modal .hd-iss-trial-toggle-input:checked,
.home-dash .form-check-input[type="checkbox"]:not([role="switch"]):checked,
.hd-modal .form-check-input[type="checkbox"]:not([role="switch"]):checked {
	background-color: var(--hd-blue);
	background-image: none;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M2%200a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2H2zm10.03%204.97a.75.75%200%200%201%20.011%201.05l-3.992%204.99a.75.75%200%200%201-1.08.02L4.324%208.384a.75.75%200%201%201%201.06-1.06l2.094%202.093%203.473-4.425a.75.75%200%200%201%201.08-.022z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M2%200a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V2a2%202%200%200%200-2-2H2zm10.03%204.97a.75.75%200%200%201%20.011%201.05l-3.992%204.99a.75.75%200%200%201-1.08.02L4.324%208.384a.75.75%200%201%201%201.06-1.06l2.094%202.093%203.473-4.425a.75.75%200%200%201%201.08-.022z%22%2F%3E%3C%2Fsvg%3E");
}
.hd-modal .hd-check-label,
.hd-check-label {
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink);
	cursor: pointer;
	user-select: none;
}


/* ===========================================================================
   GROUP INFO PAGE (group_info.html + partials)
   ---------------------------------------------------------------------------
   Editable department profile. Panel-based layout: header → identity →
   description → services/contacts + industries/certifications grid.
   =========================================================================== */

/* ---------------- Page wrapper ---------------- */

/* ---------------- Header ---------------- */
.home-dash .hd-groupinfo-header .hd-panel-head { flex-wrap: wrap; gap: .75rem; }
.home-dash .hd-groupinfo-actions,
.home-dash .hd-kra-hero .hd-eyebrow,
.home-dash .hd-tc-soc,
.hd-cs-header-meta-item,
.home-dash .hd-stb-q-tf-options > div > div,
.home-dash .hd-stb-q-tf-options > div > label,
.home-dash .hd-q-radio {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

/* ---------------- Identity row ---------------- */
.home-dash .hd-groupinfo-identity-row {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: .5rem 0;
}
.home-dash .hd-groupinfo-logo {
	flex-shrink: 0;
	width: 88px; height: 88px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem;
}
.home-dash .hd-groupinfo-logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.home-dash .hd-groupinfo-identity-details,
.home-dash .hd-emp-identity-body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	min-width: 0;
	flex: 1 1 auto;
}
.home-dash .hd-groupinfo-identity-line {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .88rem;
	line-height: 1.4;
	color: var(--hd-ink);
	min-width: 0;
}
.home-dash .hd-groupinfo-identity-line .bi {
	color: var(--hd-blue);
	flex-shrink: 0;
	margin-top: 2px;
}
.home-dash .hd-groupinfo-identity-link {
	color: var(--hd-ink);
	text-decoration: none;
	word-break: break-word;
}

/* Sub-sections inside identity card */
.home-dash .hd-groupinfo-sub {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	height: 100%;
}
.home-dash .hd-groupinfo-sub-title {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin: 0 0 .1rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}.home-dash .hd-groupinfo-sub-title .bi,
.home-dash .hd-field-toggle-title .bi,
.home-dash .hd-perm-cat-head .bi,
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-section-title .bi,
.home-dash .hd-kl-pick-item .bi:first-child { color: var(--hd-blue); font-size: .9rem; }

/* Group-type toggles (Vendor / Contractor / Service) */
.home-dash .hd-groupinfo-types {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .25rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
}
.home-dash .hd-groupinfo-type-face {
	position: relative;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .65rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 7px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Leading checkbox indicator — visible at rest so it's obvious each row
   is a toggle, not a static label. Uses a centered SVG checkmark via
   background-image so it's perfectly aligned inside the box. */
.home-dash .hd-groupinfo-type-face::before {
	content: "";
	flex-shrink: 0;
	width: 18px; height: 18px;
	border: 2px solid var(--hd-line);
	border-radius: 4px;
	background-color: var(--hd-surface);
	background-image: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px 12px;
	transition: background-color .18s ease, background-image .18s ease, border-color .18s ease;
}

.home-dash .hd-groupinfo-type-face .bi {
	font-size: .95rem;
	color: var(--hd-muted);
	transition: color .18s ease;
}

/* Hover — subtle lift + blue border hints at clickability */
.home-dash .hd-groupinfo-type:hover .hd-groupinfo-type-face {
	border-color: var(--hd-blue);
	background: var(--hd-blue-a06);
	transform: translateY(-1px);
}

/* Checked state — gradient fill, checkbox indicator flips to navy/blue */
.home-dash .hd-groupinfo-type input[type="checkbox"]:checked + .hd-groupinfo-type-face {
	background: linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 3px 10px var(--hd-blue-a25);
	transform: translateY(-1px);
}
.home-dash .hd-groupinfo-type input[type="checkbox"]:checked + .hd-groupinfo-type-face::before {
	background-color: var(--hd-white-a12);
	border-color: var(--hd-white-a50);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}

/* Focus — keyboard users get a blue ring */

.home-dash .hd-groupinfo-workforce-btn { align-self: flex-start; }

/* ---------------- Description field ---------------- */
.home-dash .hd-groupinfo-desc-field {
	min-height: 100px;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-size: .95rem;
	line-height: 1.5;
	resize: none;
}

/* ---------------- Inline-search include ---------------- */
.home-dash .hd-inline-search-wrap {
	position: relative;
	margin-bottom: .75rem;
}
.home-dash .hd-inline-search-results {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0; right: 0;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	box-shadow: var(--hd-shadow-md);
	max-height: 320px;
	overflow-y: auto;
	z-index: 50;
	padding: .3rem;
}

/* ---------------- Assignable list (categories / industries) ---------------- */
.home-dash .hd-assignable-list,
.home-dash .hd-curriculum-table,
.home-dash .hd-group-tasks-table,
.home-dash .hd-jd-task-list,
.home-dash .hd-emp-identity-contacts,
.home-dash .hd-curriculum-assign-table {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.home-dash .hd-assignable-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .45rem .7rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	margin-bottom: .15rem;
}
.home-dash .hd-assignable-head-col--action { width: 80px; text-align: center; }
.home-dash .hd-assignable-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-dash .hd-assignable-item.is-selected,
.home-dash .hd-personnel-row:hover,
.home-dash .hd-emp-task-card:hover,
.home-dash .hd-emp-groups-row:hover,
.home-dash .hd-kra-list-item:hover,
.home-dash .hd-kei-row:hover,
.home-dash .hd-curriculum-assign-row:hover,
.home-dash .hd-task-training-item:hover {
	border-color: var(--hd-blue-a35);
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
}
.home-dash .hd-assignable-item-num {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .75rem;
	font-weight: 700;
	border-radius: 6px;
}
.home-dash .hd-assignable-item-title {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.home-dash .hd-assignable-item-has-desc {
	font-size: .75rem;
	color: var(--hd-blue);
}
.home-dash .hd-assignable-item-actions,
.home-dash .hd-wsch-row-actions {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	flex-shrink: 0;
}
.home-dash .hd-assignable-check,
.home-dash .hd-radio-input,
.home-dash .hd-gf-switch input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}
.home-dash .hd-assignable-empty,
.home-dash .hd-maint-empty,
.home-dash .hd-jd-empty,
.home-dash .hd-wsch-empty,
.home-dash .hd-personnel-empty,
.home-dash .hd-curriculum-empty,
.home-dash .hd-perm-empty,
.home-dash .hd-gb-related-empty,
.home-dash .hd-gb-orphan-empty { padding: 1.5rem 1rem; }

/* ---------------- Primary Contacts table ---------------- */
.home-dash .hd-groupinfo-contacts-table {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: .5rem;
}
.home-dash .hd-groupinfo-contacts-head {
	display: grid;
	grid-template-columns: minmax(0,2fr) repeat(3, minmax(0,1fr)) 36px;
	gap: .5rem;
	padding: .5rem .75rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	align-items: center;
}
.home-dash .hd-groupinfo-contacts-col-role,
.home-dash .text-center,
.home-dash .hd-personnel-col-role,
.home-dash .hd-applist-key--price,
.home-dash .hd-applist-key--actions,
.home-dash .hd-cb-lic-key--center,
.home-dash .hd-cb-applic-key--center,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-key--using { text-align: center; }
.home-dash .hd-groupinfo-contacts-col-action { width: 36px; }
.home-dash .hd-groupinfo-contact {
	display: grid;
	grid-template-columns: minmax(0,2fr) repeat(3, minmax(0,1fr)) 36px;
	gap: .5rem;
	padding: .6rem .75rem;
	align-items: center;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.home-dash .hd-groupinfo-contact-name {
	font-size: .9rem;
	font-weight: 600;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-groupinfo-contact-line {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .76rem;
	color: var(--hd-muted);
	min-width: 0;
}
.home-dash .hd-groupinfo-contact-line a {
	color: var(--hd-muted);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-groupinfo-contact-role {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-dash .hd-groupinfo-contact-actions,
.home-dash .hd-curriculum-row-action,
.home-dash .hd-group-tasks-cell-action,
.home-dash .hd-wsch-history-action,
.home-dash .hd-emp-groups-cell--action {
	display: flex;
	justify-content: center;
}
/* Hide role columns when the corresponding type toggle is off
   (updateDivVisibility toggles inline display property — these
   rules describe how the visible state should look) */
.home-dash .vendor_group_column,
.home-dash .contractor_group_column,
.home-dash .service_group_column { transition: opacity .18s ease; }

@media (max-width: 767.98px) {
	/* Stack contact-role cells vertically on narrow screens */
	.home-dash .hd-groupinfo-contact {
		grid-template-columns: 1fr;
		gap: .4rem;
	}
	.home-dash .hd-groupinfo-contact-role::before {
		content: attr(data-label);
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
		margin-right: .4rem;
	}
	.home-dash .hd-groupinfo-contact-role,
	.home-dash .hd-group-tasks-cell-action,
	.home-dash .hd-personnel-cell-role,
	.home-dash .hd-emp-groups-cell--action,
	.home-dash .hd-kei-cell-delete {
		justify-content: flex-start;
	}
}

/* ---------------- Certification preview ---------------- */
.home-dash .hd-groupinfo-cert-embed {
	flex: 1 1 auto;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: var(--hd-navy);
}
.hd-modal .hd-groupinfo-cert-nav {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-right: auto;
}


/* ===========================================================================
   FORM CONTROLS — BASE STYLES (usable outside modals)
   ---------------------------------------------------------------------------
   The .hd-field-* and .hd-check* classes were originally scoped under
   .hd-modal. These base rules make them usable anywhere on the page
   (group info, department tabs, etc.) using the --hd-* page tokens
   instead of the modal-only --hdm-* tokens.

   The modal-specific rules (.hd-modal .hd-field-*) still take precedence
   via higher specificity when the element is actually inside a modal.
   =========================================================================== */




/* Textarea — clean default for standalone usage (not inside a card body) */

/* Select with custom dropdown arrow */
/* Native <select> popup options — when the user clicks the field, the
   browser renders the option list using OS-native styling unless
   font-family is explicitly set on the <option> elements. Chrome,
   Edge, and Firefox respect this; Safari falls back to system styling
   regardless. Same coverage extended to input/textarea as a defensive
   net so any form control that doesn't explicitly carry .hd-field-input
   still inherits the suite font instead of the browser default (which
   on macOS is -apple-system, on Windows is some Tahoma variant —
   visibly different from Inter). Scoped under .home-dash so it doesn't
   leak. Matching rules on .hd-modal cover modal-rendered controls. */
.home-dash select,
.home-dash option,
.home-dash input,
.home-dash textarea,
.hd-modal select,
.hd-modal option,
.hd-modal input,
.hd-modal textarea {
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
}
.home-dash option,
.hd-modal option,
.home-dash .hd-stb-q-match-preview-question {
	font-size: .92rem;
	color: var(--hd-ink);
}

/* File input with styled native selector button */

/* Field help text */

/* Checkbox field wrapper */

/* ===========================================================================
   BUTTONS — BASE STYLES (usable outside modals)
   =========================================================================== */
.hd-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1.1rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .01em;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.hd-btn-ghost:hover,
.hd-btn-ghost:focus-visible {
	background: var(--hd-surface);
	border-color: #cfd7e3;
	color: var(--hd-ink);
	text-decoration: none;
}
.hd-btn-primary:hover,
.hd-btn-primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px var(--hd-blue-a35);
	color: #fff;
	text-decoration: none;
}
.hd-btn-danger:hover,
.hd-btn-danger:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(201,27,27,.32);
	filter: brightness(1.05);
	color: #fff;
	text-decoration: none;
}

/* ===========================================================================
   GROUP-INFO PAGE — LAYOUT REFINEMENTS
   ---------------------------------------------------------------------------
   Stack the logo above the contact info (previously side-by-side), and
   make the description textarea truly full-width.
   =========================================================================== */

/* Stack logo on top, contact details below */
.home-dash .hd-groupinfo-identity-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .85rem;
	padding: .5rem 0;
}
.home-dash .hd-groupinfo-logo {
	width: 88px;
	height: 88px;
}

/* Description panel textarea fills its container */
.home-dash .hd-groupinfo-desc-field,
.home-dash .hd-panel .hd-groupinfo-desc-field {
	width: 100%;
	display: block;
	min-height: 110px;
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	background: var(--hd-surface);
	padding: .75rem .9rem;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--hd-ink);
	resize: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* Make the Description textarea fill the panel's available height so
   the field matches the height of its sibling panel (Primary Contacts)
   when both panels are h-100 in the same row. */
.home-dash .hd-groupinfo-desc,
.home-dash .hd-jd-tasks-panel,
.home-dash .hd-emp-details,
.home-dash .hd-curriculum-section,
.home-dash .hd-task-tabs-panel,
.home-dash .hd-grp-notes-panel,
.hd-login-field,
.home-dash .hd-news-form-right,
.home-dash.hd-lst-brainstorm-page #response-card,
.hd-lst-brainstorm-page #response-card,
.hd-cpv-page--split,
.hd-cpv-page--embed {
	display: flex;
	flex-direction: column;
}
/* Split variant is a two-pane launcher (menu + iframe stage) that should
   always fit the viewport — never the document. Constraining the body to
   exactly 100vh + clipping overflow stops the placeholder's background
   image from forcing the page taller than the viewport when its natural
   aspect ratio is portrait-ish, which produced a vertical scrollbar
   especially when the menu was hidden and the stage went full width. */
.hd-cpv-page--split {
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}
.home-dash .hd-groupinfo-desc .hd-groupinfo-desc-field {
	flex: 1 1 auto;
	min-height: 110px;
}

/* Inline search inputs should be ~2× narrower-than-panel-width so they
   feel intentional, not full-bleed. Cap at 540px for readability. */
.home-dash .hd-inline-search-input {
	max-width: 540px;
	width: 100%;
}
.home-dash .hd-inline-search-wrap {
	max-width: 540px;
}


/* ===========================================================================
   WORKFORCE MODAL (_show_workforce_modal.html)
   =========================================================================== */
.hd-modal .hd-workforce-lead {
	font-size: .88rem;
	line-height: 1.5;
	color: var(--hd-muted);
	margin-bottom: 1rem;
}
.hd-modal .hd-workforce-item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hd-modal .hd-workforce-item:hover {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0, 0, 0,.05));
	transform: translateX(2px);
}
.hd-modal .hd-workforce-item-num {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 6px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .72rem;
	font-weight: 700;
}
.hd-modal .hd-workforce-item-name,
.home-dash .hd-wsch-fact-value,
.home-dash .hd-rb-sched-label {
	font-size: .9rem;
	font-weight: 500;
	color: var(--hd-ink);
}


/* ===========================================================================
   GROUP CURRICULUM (group_curriculum.html + _curriculum_items + 4 sub-items)
   ---------------------------------------------------------------------------
   Department + Inherited assignments as responsive card-tables with
   color-coded type badges, collapsible track groups, and clean mobile
   stacking via data-label pseudo-elements.
   =========================================================================== */


/* ---- Notice banner ---- */
.home-dash .hd-curriculum-notice {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .9rem 1.1rem;
	border-radius: var(--hd-radius);
	background:
		radial-gradient(600px 120px at 100% -40%, rgba(255,176,32,.18), transparent 60%),
		linear-gradient(135deg, rgba(255,176,32,.06), var(--hd-blue-a06));
	border: 1px solid rgba(255,176,32,.28);
}
.home-dash .hd-curriculum-notice > .bi {
	flex-shrink: 0;
	font-size: 1.35rem;
	color: #b45309;
	margin-top: 2px;
}
.home-dash .hd-curriculum-notice-heading {
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -.005em;
	color: var(--hd-ink);
	margin-bottom: .2rem;
}
.home-dash .hd-curriculum-notice-text,
.home-dash .hd-emp-position-text {
	font-size: .88rem;
	line-height: 1.5;
	color: var(--hd-ink);
}
.home-dash .hd-curriculum-notice-text strong {
	color: #b45309;
	font-weight: 700;
}

/* ---- Panel body (reduce default padding for table density) ---- */
.home-dash .hd-curriculum-body,
.home-dash .hd-licmgr-managers-body,
.home-dash .hd-licmgr-alloc-body,
.home-dash .hd-cat-body,
.home-dash .hd-qb-al-body,
.home-dash .hd-lp-accordion .accordion-body { padding: .85rem 1rem 1rem; }

/* ---- Hint text in panel head ---- */
.home-dash .hd-curriculum-hint {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .72rem;
	color: var(--hd-muted);
	font-style: italic;
}

/* ===========================================================================
   CURRICULUM TABLE (Department Assignments)
   ---------------------------------------------------------------------------
   CSS Grid based so head + rows stay aligned. Collapses to stacked
   labeled cells on mobile via data-label pseudo-elements.
   =========================================================================== */
.home-dash .hd-curriculum-head,
.home-dash .hd-curriculum-row {
	display: grid;
	grid-template-columns:
		minmax(70px, .9fr)   /* code */
		minmax(0, 2fr)       /* title */
		minmax(0, 1fr)       /* origin */
		110px                /* type */
		minmax(0, 1fr)       /* source */
		40px;                /* action */
	gap: .75rem;
	align-items: center;
	padding: .5rem .75rem;
}
.home-dash .hd-curriculum-head,
.home-dash .hd-group-tasks-headrow {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	margin-bottom: .15rem;
}
.home-dash .hd-curriculum-row,
.home-dash .hd-group-tasks-row {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-dash .hd-curriculum-row-code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .8rem;
	font-weight: 600;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-curriculum-row-link {
	color: var(--hd-ink);
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-curriculum-row-origin,
.home-dash .hd-curriculum-row-source,
.home-dash .hd-curriculum-track-roles,
.home-dash .hd-curriculum-track-source,
.home-dash .hd-emp-groups-cell--role,
.home-dash .hd-emp-groups-cell--supv,
.home-dash .hd-emp-card-role {
	font-size: .82rem;
	color: var(--hd-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ===========================================================================
   TYPE BADGES — color-coded by curriculum item type
   =========================================================================== */
.home-dash .hd-curriculum-type {
	display: inline-flex;
	align-items: center;
	padding: .2rem .5rem;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 5px;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-curriculum-type--supertrack  { background: rgba(0, 0, 0, .12);   color: var(--hd-ink); }
/* Sometimes get_type_display returns mixed case; these lowercase variants
   match the |lower filter used in the template */

/* ===========================================================================
   INHERITED ASSIGNMENTS — expandable track cards
   =========================================================================== */
.home-dash .hd-curriculum-inherited,
.home-dash .hd-emp-position-section,
.home-dash .hd-qb-del-using,
.home-dash .hd-grp-tree-wrap,
.home-dash .hd-cpv-lessons {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* Column header row above the collapsible track cards — mirrors the
   grid template of .hd-curriculum-track-head so columns line up. */
.home-dash .hd-curriculum-track-headrow {
	display: grid;
	grid-template-columns:
		24px                 /* chevron spacer */
		minmax(80px, 1fr)    /* code */
		minmax(0, 2.2fr)     /* title */
		120px                /* type */
		minmax(0, 1fr)       /* roles */
		minmax(0, 1.2fr);    /* source */
	gap: .75rem;
	align-items: center;
	padding: .5rem .85rem .4rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	margin-bottom: .15rem;
}
.home-dash .hd-curriculum-track-headrow-chev {
	/* empty column to align with the chevron slot in track-head rows */
}

.home-dash .hd-curriculum-track {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* Track header row — clickable collapse toggle */
.home-dash .hd-curriculum-track-head {
	display: grid;
	grid-template-columns:
		24px                 /* chevron */
		minmax(80px, 1fr)    /* code */
		minmax(0, 2.2fr)     /* title */
		120px                /* type */
		minmax(0, 1fr)       /* roles */
		minmax(0, 1.2fr);    /* source */
	gap: .75rem;
	align-items: center;
	padding: .65rem .85rem;
	color: var(--hd-ink);
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease;
}
.home-dash .hd-curriculum-track-head:hover {
	background: var(--hd-blue-a06);
	color: var(--hd-ink);
	text-decoration: none;
}
.home-dash .hd-curriculum-track-chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	color: var(--hd-muted);
	font-size: .75rem;
	transition: transform .22s ease, color .18s ease;
}
.home-dash .hd-curriculum-track-head:not(.collapsed) .hd-curriculum-track-chev,
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle:not(.collapsed)::after {
	transform: rotate(90deg);
	color: var(--hd-blue);
}
.home-dash .hd-curriculum-track-code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .8rem;
	font-weight: 700;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-curriculum-track-title {
	font-size: .92rem;
	font-weight: 600;
	font-style: italic;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Expanded body */
.home-dash .hd-curriculum-track-body {
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
	padding: .5rem 0 .6rem; /* no horizontal padding so inner items
	   align with the outer track-head columns exactly */
}

/* Nested items — share the outer track-head grid template so the Code
   / Title / Type / Source cells sit directly under the outer column
   headers. The chevron + Role(s) slots get empty spacer cells. */
.home-dash .hd-curriculum-items,
.home-dash .hd-cb-advanced-row,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-table,
.home-dash .hd-lst-list-section,
.home-dash .hd-rb-course-reason-edit {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.home-dash .hd-curriculum-item {
	display: grid;
	grid-template-columns:
		24px                 /* chevron (spacer) */
		minmax(80px, 1fr)    /* code */
		minmax(0, 2.2fr)     /* title */
		120px                /* type */
		minmax(0, 1fr)       /* roles (spacer) */
		minmax(0, 1.2fr);    /* source */
	gap: .75rem;
	align-items: center;
	padding: .45rem .85rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--hd-radius-sm);
	transition: background .18s ease, border-color .18s ease;
	position: relative;
}
/* Subtle left accent to visually indicate the item is nested under a track */
.home-dash .hd-curriculum-item::before {
	content: "";
	position: absolute;
	left: .25rem; top: 30%; bottom: 30%;
	width: 2px;
	border-radius: 2px;
	background: var(--hd-blue-a25);
}
.home-dash .hd-curriculum-item:hover,
.home-dash .hd-field-toggle.is-locked:hover,
.home-dash .hd-cfg-preview-delete.is-disabled:hover {
	background: var(--hd-surface);
	border-color: var(--hd-line);
}
.home-dash .hd-curriculum-item-spacer,
.home-dash .hd-curriculum-item-role-spacer {
	/* empty cells to align with chevron + roles columns in track-head */
}
.home-dash .hd-curriculum-item-code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .78rem;
	font-weight: 600;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-curriculum-item-title {
	font-size: .85rem;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.home-dash .hd-curriculum-item-source {
	font-size: .8rem;
	color: var(--hd-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-curriculum-source-direct {
	font-style: italic;
	color: var(--hd-blue);
}
.home-dash .hd-curriculum-source-kind {
	font-size: .7rem;
	color: var(--hd-muted);
	font-style: italic;
}
.home-dash .hd-curriculum-items-empty {
	padding: .85rem;
	font-size: .82rem;
	font-style: italic;
	color: var(--hd-muted);
	text-align: center;
}

/* ===========================================================================
   COMPACT TASK CONTEXT (in_manager == 'task')
   ---------------------------------------------------------------------------
   Inline task-row layout used when these sub-templates render in the
   Tasks view rather than the Group_Curriculum view.
   =========================================================================== */
.home-dash .hd-curriculum-task-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .5rem;
	border-radius: 6px;
	font-size: .82rem;
	transition: background .18s ease;
}
.home-dash .hd-curriculum-task-row:hover,
.home-dash .hd-kei-resource-item:hover,
.home-dash .hd-kra-question:hover,
.home-dash .hd-perm-item:hover { background: var(--hd-blue-a06); }
.home-dash .hd-curriculum-task-code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-weight: 600;
	color: var(--hd-muted);
	flex-shrink: 0;
}
.home-dash .hd-curriculum-task-link {
	color: var(--hd-ink);
	text-decoration: none;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===========================================================================
   RESPONSIVE — stack grid rows as labeled cards on narrow viewports
   =========================================================================== */
@media (max-width: 767.98px) {
	.home-dash .hd-curriculum-row,
	.home-dash .hd-curriculum-item,
	.home-dash .hd-curriculum-track-head {
		grid-template-columns: 1fr;
		gap: .3rem;
		padding: .7rem .85rem;
	}
	/* Spacer cells have no content — hide them in stacked mobile view */
	.home-dash .hd-curriculum-row > [data-label]::before,
	.home-dash .hd-curriculum-item > [data-label]::before,
	.home-dash .hd-curriculum-track-head > [data-label]::before,
	.home-dash .hd-group-tasks-cell-id::before,
	.home-dash .hd-personnel-cell-role[data-label]::before {
		content: attr(data-label) ":";
		display: inline-block;
		margin-right: .4rem;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
	/* The chevron column doesn't need a label but keep its position */
	.home-dash .hd-curriculum-track-head .hd-curriculum-track-chev {
		position: absolute;
		top: .7rem; right: .85rem;
	}
	.home-dash .hd-curriculum-track-head { position: relative; padding-right: 2.5rem; }
}


/* ===========================================================================
   GROUP TASKS (group_tasks.html)
   ---------------------------------------------------------------------------
   Reuses .hd-curriculum-notice / .hd-panel / .hd-inline-search-wrap and
   adds a compact 3-column task table (ID / Title / Remove) with a leading
   document icon and trailing chevron on each task link.
   =========================================================================== */

/* Header with multiple controls — wraps on narrow screens */
.home-dash .hd-group-tasks-head {
	flex-wrap: wrap;
	row-gap: .65rem;
}
.home-dash .hd-group-tasks-controls {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	max-width: 100%;
}
.home-dash .hd-group-tasks-search {
	position: relative;
	flex: 0 1 720px;
	width: 720px;
	max-width: 100% !important;
	min-width: 160px;
	margin-bottom: 0; /* override default .hd-inline-search-wrap margin */
}
.home-dash .hd-group-tasks-search .hd-inline-search-input {
	max-width: 100% !important;
	width: 100% !important;
}

/* ---- Table ---- */
.home-dash .hd-group-tasks-headrow,
.home-dash .hd-group-tasks-row {
	display: grid;
	grid-template-columns:
		96px                 /* ID */
		minmax(0, 1fr)       /* Title */
		44px;                /* Action */
	gap: .75rem;
	align-items: center;
	padding: .5rem .75rem;
}
.home-dash .hd-group-tasks-cell-id {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .78rem;
	font-weight: 600;
	color: var(--hd-muted);
}

/* Title link — icon chip + title + trailing chevron */
.home-dash .hd-group-tasks-link {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
	transition: color .18s ease;
}
.home-dash .hd-group-tasks-icon,
.home-dash .hd-maint-row-icon,
.home-dash .hd-jd-row-icon {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .9rem;
	transition: background .18s ease;
}
.home-dash .hd-group-tasks-title {
	flex: 1 1 auto;
	font-size: .88rem;
	font-weight: 500;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.home-dash .hd-group-tasks-chev {
	flex-shrink: 0;
	font-size: .75rem;
	color: var(--hd-muted);
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity .18s ease, transform .18s ease, color .18s ease;
}

/* ---- Responsive stacking ---- */
@media (max-width: 767.98px) {
	.home-dash .hd-group-tasks-row {
		grid-template-columns: 1fr;
		gap: .35rem;
		padding: .7rem .85rem;
	}
	.home-dash .hd-group-tasks-controls {
		width: 100%;
		margin-left: 0;
	}
	.home-dash .hd-group-tasks-search {
		flex: 1 1 auto;
		width: auto;
	}
}


/* ===========================================================================
   MAINTENANCE / EQUIPMENT BUILDER
   ---------------------------------------------------------------------------
   Two-panel Areas | Equipment layout with list cards, selected state,
   unmaintained visual treatment, and shared delete-confirmation dialog.
   =========================================================================== */


/* ---- Panel wrappers ---- */
.home-dash .hd-maint-panel,
.home-dash .hd-jd-panel,
.home-dash .hd-wsch-panel,
.home-dash .hd-emp-groups,
.home-dash .hd-kra-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.home-dash .hd-maint-panel .hd-panel-head {
	flex-wrap: wrap;
	gap: .5rem;
	row-gap: .4rem;
	min-height: 64px;
}
.home-dash .hd-maint-panel-actions {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	margin-left: auto;
}

/* Back-link icon (to parent builder / settings) */
.home-dash .hd-maint-back-link,
.home-dash .hd-kra-sidebar-home {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	color: var(--hd-blue);
	text-decoration: none;
	background: var(--hd-blue-a06);
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

/* Mobile hamburger for the equipment list collapse */
.home-dash .hd-maint-mobile-toggle {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	border: 1px solid var(--hd-line);
	background: var(--hd-surface);
	color: var(--hd-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
	margin-right: .25rem;
}
.home-dash .hd-maint-mobile-toggle:hover,
.home-dash .hd-kei-resources-open-link:hover {
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
}

/* Equipment header context (area name before title) */
.home-dash .hd-maint-eq-context {
	font-size: .9rem;
	font-weight: 600;
	color: var(--hd-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}
/* ---- List bodies ---- */
.home-dash .hd-maint-list-body,
.home-dash .hd-maint-equipment-body {
	padding: .75rem .85rem 1rem;
	overflow-y: auto;
	max-height: 600px;
}
.home-dash .hd-maint-list,
.home-dash .hd-jd-list,
.home-dash .hd-emp-groups-table,
.home-dash .hd-licmgr-table,
.home-dash .hd-licmgr-table-body,
.hd-modal.hd-empform-modal .hd-empform-modal-field,
.home-dash .hd-gb-list,
.home-dash .hd-gb-related-list,
.home-dash .hd-gb-orphan-list,
.home-dash .hd-gb-unused-list,
.home-dash .hd-kb-list,
.home-dash .hd-kb-overview-header,
.home-dash .hd-qb-del-question,
.home-dash .hd-pb-step-list,
.home-dash .hd-stb-q-list,
.hd-modal .hd-stb-q-imgmodal-coords,
.home-dash .hd-lst-plan-participants-roster,
.home-dash .hd-lst-assembled-group,
.home-dash .hd-lst-grouped-group,
.home-dash .hd-tl-files {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

/* ---- Search width constraint ---- */
.home-dash .hd-maint-search {
	max-width: none !important;
	margin-bottom: .75rem;
}
.home-dash .hd-maint-search .hd-inline-search-input,
.home-dash .hd-jd-search .hd-inline-search-input,
.home-dash .hd-emp-group-search .hd-inline-search-input,
.home-dash .hd-eq-update-body .hd-inline-search-wrap,
.home-dash .hd-eq-update-body .hd-inline-search-input {
	max-width: none !important;
	width: 100% !important;
}

/* ===========================================================================
   AREA ROW (left panel)
   =========================================================================== */
.home-dash .hd-maint-row,
.home-dash .hd-jd-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .7rem .55rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
	overflow: hidden;
}
/* Active-item left accent stripe — site-wide standard: 3px solid
   --hd-blue, square corners, full row height. Matches the inset-box-shadow
   stripe on .hd-kb-list-row / .hd-lst-list-row so every builder list reads
   the same. */
.home-dash .hd-maint-row::before,
.home-dash .hd-maint-eq-row::before,
.home-dash .hd-jd-row::before,
.home-dash .hd-wsch-row::before,
.home-dash .hd-kra-list-item::before {
	content: "";
	position: absolute;
	left: 0; top: 10%; bottom: 10%;
	width: 3px;
	background: var(--hd-blue);
	opacity: 0;
	transition: opacity .18s ease, top .18s ease, bottom .18s ease;
}
/* Selected-row surface — flat --hd-blue-soft + soft drop shadow, matching
   .hd-kb-list-row.is-selected (the kra builder rows). The 3px blue left
   stripe is drawn by the ::before above. */
.home-dash .hd-maint-row.is-selected,
.home-dash .hd-maint-eq-row.is-selected,
.home-dash .hd-jd-row.is-selected,
.home-dash .hd-wsch-row.is-selected,
.home-dash .hd-kra-list-item.is-selected {
	border-color: var(--hd-blue);
	background: var(--hd-blue-soft);
	border-radius: 3px;
	box-shadow: 0 2px 8px var(--hd-blue-a18);
}
.home-dash .hd-kra-list-item.is-selected .hd-kra-list-link,
.home-dash .hd-ind-list-item.is-selected .hd-ind-list-link,
.home-dash .hd-cb-list-item.is-selected .hd-cb-list-link,
.hd-modal .hd-stb-q-imgmodal-help strong,
.home-dash .hd-gmove-preview-name,
.home-dash .hd-fd-nav-link.active .hd-fd-nav-label,
.home-dash .hd-qb-levels-name {
	color: var(--hd-blue);
	font-weight: 700;
}


.home-dash .hd-maint-row-link,
.home-dash .hd-jd-row-link,
.home-dash .hd-wsch-row-link,
.home-dash .hd-news-del-article-link {
	color: var(--hd-ink);
	text-decoration: none;
	display: block;
}
/* Selected-list text uses themed --hd-ink (not --hd-blue): on the dark
   selected background in dark mode, --hd-blue text went dark-on-dark.
   --hd-ink reads in both modes — applies to every builder list: the
   .hd-kb-list-row primitive (kra / task / foundation / procedure / step /
   question), group_builder's .hd-gb-list-row, the maintenance builder
   rows (.hd-maint-row area + .hd-maint-eq-row equipment), the job
   description builder's .hd-jd-row, the work schedule's .hd-wsch-row, and
   the work schedule's selected procedure tiles (.hd-wsch-procedure-tile). */
.home-dash .hd-maint-row.is-selected .hd-maint-row-link,
.home-dash .hd-maint-row.is-selected .hd-maint-row-title,
.home-dash .hd-maint-eq-row.is-selected .hd-maint-eq-row-title span:last-child,
.home-dash .hd-jd-row.is-selected .hd-jd-row-link,
.home-dash .hd-wsch-row.is-selected .hd-wsch-row-link,
.home-dash .hd-cert-list-item.is-selected .hd-cert-list-link,
.home-dash .hd-agency-list-item.is-selected .hd-agency-list-link,
.home-dash .hd-app-list-item.is-selected .hd-app-list-link,
.home-dash .hd-jc-list-item.is-selected .hd-jc-list-link,
.home-dash .hd-mfg-list-item.is-selected .hd-mfg-list-link,
.home-dash .hd-perm-admin-item.is-selected .hd-perm-admin-link,
.home-dash .hd-wsch-procedure-tile.is-selected .hd-wsch-procedure-tile-title,
.home-dash .hd-wsch-procedure-tile:has(.hd-wsch-procedure-check:checked) .hd-wsch-procedure-tile-title,
.home-dash .hd-gf-crumb-current,
.home-dash .hd-news-date-d,
.home-dash .hd-kb-list-row.is-selected .hd-kb-list-link,
.home-dash .hd-gb-list-row.is-selected .hd-gb-list-link,
.home-dash .hd-jc-note-author,
.home-dash .hd-perm-check:has(input:checked) .hd-perm-check-label,
.home-dash .hd-lb-list-item.is-active .hd-dept-list-text { color: var(--hd-ink); font-weight: 600; }
.home-dash .hd-maint-row-title,
.home-dash .hd-jd-row-title,
.home-dash .hd-wsch-row-title {
	font-size: .88rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
.home-dash .hd-maint-row-actions,
.home-dash .hd-jd-row-actions,
.home-dash .hd-jd-task-row-actions,
.home-dash .hd-emp-task-actions {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

/* ===========================================================================
   EQUIPMENT ROW (right panel)
   =========================================================================== */
.home-dash .hd-maint-eq-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .7rem .55rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease, opacity .18s ease;
	overflow: hidden;
}
.home-dash .hd-maint-eq-row .stretched-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-decoration: none;
	color: transparent;
}


.home-dash .hd-maint-eq-row-code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hd-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: .1rem;
}
.home-dash .hd-maint-eq-row-title {
	font-size: .88rem;
	color: var(--hd-ink);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: .4rem;
}
.home-dash .hd-maint-eq-row-actions {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	position: relative;
	z-index: 2;
}

/* Maintained / Not Maintained status label */
.home-dash .hd-maint-eq-status {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .55rem;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background .18s ease, color .18s ease;
}
.home-dash .hd-maint-eq-status--yes {
	background: rgba(31, 122, 58, .12);
	color: #1f7a3a;
	border: 1px solid rgba(31, 122, 58, .25);
}
.home-dash .hd-maint-eq-status--no {
	background: rgba(201, 27, 27, .10);
	color: var(--hd-danger);
	border: 1px solid rgba(201, 27, 27, .25);
}
/* On narrow rows, hide the label text and show just the icon */
@media (max-width: 575.98px) {
	.home-dash .hd-maint-eq-status-label,
	.home-dash .hd-wsch-crew-head,
	.home-dash .hd-curriculum-assign-head,
	.home-dash .hd-emp-mgr-perpage-text,
	.home-dash .hd-lic-panel-meta-label { display: none; }
	.home-dash .hd-maint-eq-status {
		padding: .25rem .35rem;
		border-radius: 50%;
	}
}

/* ---- Empty state padding tweak for builder panels ---- */

/* ===========================================================================
   AREA EDIT PANEL (.hd-area-edit-*)
   Center column of the MaintenanceBuilder. Edits a selected MAINTENANCE_AREA.
   =========================================================================== */
.home-dash .hd-area-edit-body,
.home-dash .hd-perm-body,
.home-dash .hd-gmove-body,
.home-dash .hd-gdel-body,
.home-dash .hd-tc-body,
.home-dash .hd-fc-body,
.home-dash .hd-cc-body,
.home-dash .hd-news-form-body { padding: 1rem 1.15rem 1.25rem; }

/* Field labels — uppercase eyebrow with leading icon, matches the suite */
.home-dash .hd-area-edit-form .hd-field-label,
.home-dash .hd-gf .hd-field-label,
.home-dash .hd-gmove .hd-field-label,
.home-dash .hd-tc-form .hd-field-label,
.home-dash .hd-fc-form .hd-field-label,
.home-dash .hd-cc-form .hd-field-label,
.hd-login-field .hd-field-label,
.home-dash .hd-news-form .hd-field-label,
.hd-modal.hd-emp-msg-modal .hd-field-label,
.hd-modal.hd-emp-msg-view-modal .hd-field-label,
.home-dash .hd-jc-form .hd-field-label,
.home-dash .hd-cert-form .hd-field-label,
.home-dash .hd-agency-form .hd-field-label,
.home-dash .hd-ind-form .hd-field-label,
.home-dash .hd-cfg-panel .hd-field-label,
.home-dash .hd-app-update-form .hd-field-label,
.home-dash .hd-app-overview-form .hd-field-label,
.home-dash .hd-app-modal-form .hd-field-label,
.home-dash .hd-feat-modal-form .hd-field-label,
.home-dash .hd-feat-update-form .hd-field-label,
.home-dash .hd-mfg-update-form .hd-field-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-bottom: .35rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
}

/* Force native widgets inside hd-area-edit to inherit the suite's field look */
.home-dash .hd-area-edit-form input[type="text"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-area-edit-form input[type="number"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-area-edit-form textarea:not(.hd-field-input),
.home-dash .hd-gf input[type="text"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-gf input[type="email"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-gf input[type="number"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-gf input[type="url"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-gf textarea:not(.hd-field-input),
.home-dash .hd-gf select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-gmove select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-gmove input[type="text"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-tc input[type="text"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-tc input[type="email"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-tc input[type="number"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-tc textarea:not(.hd-field-input),
.home-dash .hd-tc select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-fc input[type="text"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-fc input[type="email"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-fc input[type="number"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-fc textarea:not(.hd-field-input),
.home-dash .hd-fc select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-cc input[type="text"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-cc input[type="email"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-cc input[type="password"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-cc input[type="date"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-cc input[type="number"]:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-cc textarea:not(.hd-field-input),
.home-dash .hd-cc select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-news-form input[type="text"]:not(.hd-field-input),
.home-dash .hd-news-form input[type="url"]:not(.hd-field-input),
.home-dash .hd-news-form input[type="datetime-local"]:not(.hd-field-input),
.home-dash .hd-news-form select:not(.hd-field-input):not(.form-check-input) {
	display: block;
	width: 100%;
	padding: .55rem .75rem;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--hd-ink);
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.home-dash .hd-area-edit-form textarea,
.home-dash .hd-cert-form .hd-field-textarea,
.home-dash .hd-cc textarea { min-height: 6rem; resize: none; }

/* Action footer — dashed top border, right-aligned, matches other edit forms */
.home-dash .hd-area-edit-actions,
.home-dash .hd-cert-form-actions,
.home-dash .hd-lci-form-actions,
.home-dash .hd-agency-form-actions,
.home-dash .hd-ind-form-actions,
.home-dash .hd-app-form-actions,
.home-dash .hd-mfg-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1.25rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* Map preview — sits below the form when both lat/lon are populated */
.home-dash .hd-area-edit-map {
	margin-top: 1.25rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
	background: var(--hd-surface-2);
}
.home-dash .hd-area-edit-map-head {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .85rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-area-edit-map-head .bi,
.home-dash .hd-gmove-info-label .bi,
.home-dash .hd-eq-filter-group-label .bi,
.home-dash .hd-kb-overview-meta .bi,
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-meta-label .bi,
.home-dash .hd-jc-note-meta .bi,
.home-dash .hd-lic-date-range .bi,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-user .bi {
	color: var(--hd-blue);
	font-size: .82rem;
}
.home-dash .hd-area-edit-map-coords {
	margin-left: auto;
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hd-ink);
	font-size: .72rem;
}
.home-dash .hd-area-edit-map-frame {
	display: block;
	width: 100%;
	border: 0;
	background: var(--hd-surface, #fff);
}

/* ===========================================================================
   REMOVE-AREA MODAL — children list
   =========================================================================== */
.hd-modal .hd-maint-remove-list-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .5rem;
}
.hd-modal .hd-maint-remove-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	overflow: hidden;
}
.hd-modal .hd-maint-remove-list-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .75rem;
	font-size: .86rem;
	color: var(--hd-ink);
}
.hd-modal .hd-maint-remove-list-item .bi {
	font-size: .9rem;
	color: var(--hd-danger);
	flex-shrink: 0;
}

/* ===========================================================================
   Shared: monospace field + code input treatment
   =========================================================================== */
.hd-modal .hd-field-mono,
.hd-field-mono {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	letter-spacing: .02em;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 991.98px) {
	/* Equipment list collapses via Bootstrap collapse on mobile */
}
@media (max-width: 575.98px) {
	.home-dash .hd-maint-eq-context { max-width: 120px; }
	.home-dash .hd-maint-list-body,
	.home-dash .hd-maint-equipment-body {
		max-height: 480px;
	}
}


/* ===========================================================================
   JOB DESCRIPTION BUILDER (job_description_builder.html + 11 partials)
   ---------------------------------------------------------------------------
   Three-column master/detail/sub-detail: JD list | editor | tasks.
   On mobile, list + tasks collapse into offcanvas panels.
   =========================================================================== */


/* Mobile toggle bar — hidden at lg+ by d-lg-none in the template */
.home-dash .hd-jd-mobile-toggles {
	display: flex;
	gap: .5rem;
	justify-content: flex-end;
}

/* Right-column stack on desktop */

/* ---- JD list panel ---- */
.home-dash .hd-jd-panel-body {
	padding: .75rem .85rem 1rem;
	overflow-y: auto;
	max-height: 620px;
}

/* Search wrap — override the 540px cap when nested in JD panels */
.home-dash .hd-jd-search.hd-inline-search-wrap {
	max-width: none !important;
}

/* ---- JD list row ---- */


/* ===========================================================================
   JD EDITOR (middle column)
   =========================================================================== */

/* View-only badge (shown when can_edit_source is False) */
.home-dash .hd-jd-viewonly-badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .15rem .5rem;
	margin-left: .5rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
	background: rgba(0, 0, 0,.06);
	border: 1px solid var(--hd-line);
	border-radius: 4px;
}.home-dash .hd-jd-viewonly-badge .bi,
.home-dash .hd-gmove-tree-tag .bi,
.home-dash .hd-lic-expires-pill .bi,
.home-dash .hd-empform-avatar-upload .hd-field-file-hint { font-size: .7rem; }
.home-dash .hd-jd-viewonly-badge--locked {
	color: #b45309;
	background: rgba(255,176,32,.14);
	border-color: rgba(255,176,32,.35);
}

/* Help-link icon next to a label */
.home-dash .hd-field-help-link {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 16px; height: 16px;
	margin-left: .3rem;
	color: var(--hd-muted);
	text-decoration: none;
	transition: color .18s ease;
}

/* Locked-toggle wrapper (inside .hd-field) */
.home-dash .hd-jd-locked-wrap {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .5rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	min-height: 44px;
}

/* Display-only fields (view-only mode) — styled to look like a read-only
   input so the layout matches the editable variant's height. */
.home-dash .hd-field-display {
	color: var(--hd-ink);
	background: var(--hd-surface-2);
	cursor: default;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-field-display--block {
	white-space: normal;
	min-height: 120px;
	line-height: 1.5;
}

/* ===========================================================================
   JD TASKS (right column)
   =========================================================================== */
.home-dash .hd-jd-tasks-body {
	padding: .75rem .85rem 1rem;
	max-height: 520px;
	overflow-y: auto;
}

/* Task row — slightly denser than JD row; includes a drag handle */
.home-dash .hd-jd-task-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .5rem .65rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-dash .hd-jd-task-row-handle {
	flex-shrink: 0;
	width: 16px; height: 16px;
	display: inline-flex;
	align-items: center; justify-content: center;
	color: var(--hd-muted);
	font-size: .85rem;
	opacity: 0;
	transition: opacity .18s ease, color .18s ease;
	cursor: grab;
}
/* The drag handle is hover-revealed (opacity 0 at rest). In dark mode it
   then vanishes entirely until hover; show it at rest there so the row
   still reads as draggable. Light mode keeps the hover-reveal. */
.home-dash .hd-jd-task-row:hover .hd-jd-task-row-handle,
[data-bs-theme=dark] .home-dash .hd-jd-task-row-handle,
.home-dash .hd-jc-note-dot {
	opacity: .6;
}
.home-dash .hd-jd-task-row-icon,
.home-dash .hd-kra-list-icon {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 6px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .82rem;
}
.home-dash .hd-jd-task-row-title,
.home-dash .tree-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .85rem;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Other tasks" variant — plus-icon add button instead of trash */
.home-dash .hd-jd-task-row--other .hd-jd-task-row-icon {
	background: var(--hd-lime-a12);
	color: #5c8a00;
}

/* ===========================================================================
   BORROW TASKS + OTHER TASKS panels
   =========================================================================== */

/* ===========================================================================
   OFFCANVAS (mobile)
   =========================================================================== */
.hd-jd-offcanvas {
	width: min(360px, 92vw) !important;
}
.hd-jd-offcanvas-header {
	position: relative;
	padding: 1rem 1.15rem;
	background:
		radial-gradient(600px 120px at 100% -20%, var(--hd-lime-a25), transparent 60%),
		linear-gradient(135deg, var(--hd-navy) 0%, #1a2030 55%, var(--hd-blue) 100%);
	color: #fff;
	border-bottom: none;
	overflow: hidden;
}
.hd-jd-offcanvas-header .offcanvas-title {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
}
.hd-jd-offcanvas-header .hd-modal-close {
	position: relative;
	margin-left: auto;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	color: #fff;
	width: 30px; height: 30px;
	border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	transition: background .2s ease, transform .2s ease;
}
.hd-jd-offcanvas-body {
	padding: 1rem .75rem;
	background: var(--hd-surface-2);
	overflow-y: auto;
}


/* ===========================================================================
   JD CREATE MODAL — prominent Lock-toggle card
   ---------------------------------------------------------------------------
   The Lock checkbox used to sit cramped between the Owner/Job Class row
   and the Description. This gives it a dedicated framed card with a lock
   icon, clear title + explanatory subtext, and plenty of vertical
   whitespace on either side so it reads as an intentional, important
   setting rather than a loose checkbox.
   =========================================================================== */
.hd-modal .hd-jd-lock-card {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .85rem 1rem;
	margin: 1.15rem 0;
	background: linear-gradient(135deg, rgba(255,176,32,.05), var(--hd-blue-a06));
	border: 1px solid rgba(255,176,32,.25);
	border-radius: 10px;
	transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.hd-modal .hd-jd-lock-card:hover {
	border-color: rgba(255,176,32,.45);
	background: linear-gradient(135deg, rgba(255,176,32,.09), var(--hd-blue-a06));
}

/* Icon chip */
.hd-modal .hd-jd-lock-card-icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(255,176,32,.14);
	color: #b45309;
	font-size: 1.15rem;
	transition: background .22s ease, color .22s ease, transform .22s ease;
}
.hd-modal .hd-jd-lock-card:has(.hd-check:checked) .hd-jd-lock-card-icon,
.hd-modal .hd-jd-lock-card.is-locked .hd-jd-lock-card-icon {
	background: linear-gradient(135deg, #b45309, var(--hd-blue));
	color: #fff;
	transform: rotate(-6deg) scale(1.05);
}

/* Body (title + subtext stack) */
.hd-modal .hd-jd-lock-card-title {
	font-size: .92rem;
	font-weight: 700;
	color: var(--hd-ink);
	line-height: 1.2;
}
.hd-modal .hd-jd-lock-card-sub {
	font-size: .78rem;
	color: var(--hd-muted);
	line-height: 1.4;
	margin-top: .2rem;
}

/* Toggle area (wraps the checkbox) — increase click target, align right */
.hd-modal .hd-jd-lock-card-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .35rem;
	margin: 0;
	cursor: pointer;
}
/* Screen-reader-only helper for the hidden label */
.hd-modal .visually-hidden {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* ===========================================================================
   WORK SCHEDULE (group_work_schedule.html + assigned_employees + create_jt)
   ---------------------------------------------------------------------------
   Three-column kanban-like editor for Job Tasks. Left: department tasks.
   Middle: job tasks + history. Right: status-branched editor.
   =========================================================================== */


/* ---- Panels & stacks ---- */
.home-dash .hd-wsch-middle-stack,
.home-dash .hd-kra-main-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}
.home-dash .hd-wsch-list-body {
	padding: .75rem .85rem 1rem;
	max-height: 520px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

/* ---- List row (shared across Dept Tasks, Job Tasks) ---- */
.home-dash .hd-wsch-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem .7rem .55rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
	overflow: hidden;
}

/* ---- Status badges on job task rows ---- */
.home-dash .hd-wsch-status-badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .18rem .5rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
}
.home-dash .hd-wsch-status-badge .bi,
.home-dash .hd-lang-vis-pill .bi,
.home-dash .hd-news-method-pill .bi { font-size: .72rem; }
.home-dash .hd-wsch-status-badge--completed,
.home-dash .hd-task-status--published {
	background: rgba(31,122,58,.14);
	color: #1f7a3a;
	border: 1px solid rgba(31,122,58,.3);
}
.home-dash .hd-wsch-status-badge--planning {
	background: rgba(168,85,247,.12);
	color: #7e22ce;
	border: 1px solid rgba(168,85,247,.3);
}
.home-dash .hd-wsch-status-badge--started,
.home-dash .hd-news-method-pill.is-on {
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	border: 1px solid var(--hd-blue-a25);
}
.home-dash .hd-wsch-status-badge--scheduled {
	background: rgba(255,176,32,.16);
	color: #b45309;
	border: 1px solid rgba(255,176,32,.35);
}

/* ---- Filter dropdown in Job Tasks header ---- */
.home-dash .hd-wsch-filter-menu {
	border: 1px solid var(--hd-line);
	box-shadow: var(--hd-shadow-md);
	border-radius: 10px;
	min-width: 180px;
	padding: .35rem;
}
.home-dash .hd-wsch-filter-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .65rem;
	border-radius: 7px;
	font-size: .85rem;
	color: var(--hd-ink);
}
.home-dash .hd-wsch-filter-menu .dropdown-item:hover,
.home-dash .hd-emp-addtask-menu .dropdown-item:hover,
.home-dash .hd-kei-employee-menu .dropdown-item:hover {
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
	color: var(--hd-blue);
}

/* ---- Completed history list ---- */
.home-dash .hd-wsch-history-head,
.home-dash .hd-wsch-history-row {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 40px;
	gap: .5rem;
	align-items: center;
	padding: .5rem .7rem;
}
.home-dash .hd-wsch-history-head {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	margin-bottom: .1rem;
}
.home-dash .hd-wsch-history-row {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.home-dash .hd-wsch-history-title {
	font-size: .85rem;
	color: var(--hd-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-wsch-history-date {
	font-size: .8rem;
	color: var(--hd-muted);
	white-space: nowrap;
}

/* ===========================================================================
   EDITOR PANEL (right column)
   =========================================================================== */
/* Single-row header: the title block flexes/shrinks and its job-task name
   truncates with an ellipsis; the action buttons keep their size and never
   wrap to a second row. The "Update Job Task:" label + icon are normal
   flex items (min-width:auto) so they never shrink — only .hd-wsch-edit-title
   (min-width:0) does. */
.home-dash .hd-wsch-edit-panel .hd-panel-head {
	flex-wrap: nowrap;
	gap: 1rem;
}
.home-dash .hd-wsch-edit-panel .hd-panel-title {
	min-width: 0;
	flex: 1 1 auto;
	white-space: nowrap;
}
.home-dash .hd-wsch-edit-title {
	font-weight: 500;
	color: var(--hd-white-a80);
	margin-left: .3rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-wsch-edit-actions,
.home-dash .hd-gt-toolbar,
.home-dash .hd-rb-panel-actions {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex-wrap: wrap;
}
/* Filter By Group / Filter By Type dropdowns sit at the top of the
   Courses panel body, directly above the filter/search input. */
.home-dash .hd-rb-course-filters {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .75rem;
}
/* The filter triggers read as real buttons at rest (subtle surface-2
   fill + blue-soft border) rather than only on hover — the base
   .hd-btn-ghost border (--hd-line) is too faint on the white body. */
.home-dash .hd-rb-course-filters .hd-btn.hd-btn-ghost {
	background: var(--hd-surface-2);
	border-color: var(--hd-blue-soft);
	color: var(--hd-ink);
}
.home-dash .hd-rb-course-filters .hd-btn.hd-btn-ghost:hover,
.home-dash .hd-rb-course-filters .hd-btn.hd-btn-ghost:focus-visible,
.home-dash .hd-rb-course-filters .hd-btn.hd-btn-ghost[aria-expanded="true"] {
	background: var(--hd-surface);
	border-color: var(--hd-blue);
	color: var(--hd-ink);
}
.home-dash .hd-wsch-edit-actions {
	flex-shrink: 0;
	flex-wrap: nowrap;
}
.home-dash .hd-wsch-edit-body {
	padding: 1rem 1.15rem 1.25rem;
	overflow-y: auto;
	max-height: calc(100vh - 260px);
}

/* Status banner at top of editor body */
.home-dash .hd-wsch-status-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1rem;
	border-radius: 10px;
	margin-bottom: 1rem;
	border: 1px solid transparent;
}
.home-dash .hd-wsch-status-banner--completed {
	background: linear-gradient(135deg, rgba(31,122,58,.08), var(--hd-lime-a06));
	border-color: rgba(31,122,58,.25);
	color: #1f7a3a;
}
.home-dash .hd-wsch-status-banner--started {
	background: linear-gradient(135deg, var(--hd-blue-a06), rgba(98,220,250,.1));
	border-color: var(--hd-blue-a25);
	color: var(--hd-blue);
}
.home-dash .hd-wsch-status-banner--planning {
	background: linear-gradient(135deg, rgba(168,85,247,.07), var(--hd-blue-a06));
	border-color: rgba(168,85,247,.3);
	color: #7e22ce;
}
.home-dash .hd-wsch-status-banner--scheduled {
	background: linear-gradient(135deg, rgba(255,176,32,.1), var(--hd-blue-a06));
	border-color: rgba(255,176,32,.3);
	color: #b45309;
}
.home-dash .hd-wsch-status-meta {
	flex: 1 1 auto;
	font-size: .82rem;
	color: var(--hd-ink);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-width: 0;
}
.home-dash .hd-wsch-status-meta .bi { opacity: .8; }
.home-dash .hd-wsch-status-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .65rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
	background: var(--hd-white-a65);
	flex-shrink: 0;
}

/* Sections within the editor */
.home-dash .hd-wsch-section,
.home-dash .hd-ke-detail-section,
.hd-modal.hd-lic-modal .hd-lic-modal-section {
	margin-bottom: 1.25rem;
}
.home-dash .hd-wsch-section-title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin: 0 0 .6rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-wsch-section-lead {
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
	margin-bottom: .6rem;
}

/* Fact grid (date/duration summary) */
.home-dash .hd-wsch-facts { }
.home-dash .hd-wsch-fact {
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	padding: .55rem .75rem;
	height: 100%;
}
.home-dash .hd-wsch-fact-label {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .15rem;
}

/* Procedure list (COMPLETED / STARTED modes) */
.home-dash .hd-wsch-procedure-list li {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .6rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	font-size: .85rem;
}
.home-dash .hd-wsch-procedure-num {
	flex-shrink: 0;
	width: 22px; height: 22px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 5px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .7rem;
	font-weight: 700;
}

/* Instructions display (read-only branches) */
.home-dash .hd-wsch-instructions-display {
	padding: .75rem .9rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--hd-ink);
	white-space: pre-wrap;
}

/* Warning banner (SOC / one-person task / qualification requirements) */
.home-dash .hd-wsch-warning,
.home-dash .hd-applist-devnote {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .5rem .7rem;
	background: rgba(201,27,27,.06);
	border: 1px solid rgba(201,27,27,.2);
	border-radius: 7px;
	margin-bottom: .4rem;
	font-size: .82rem;
	color: #7f1d1d;
}
.home-dash .hd-wsch-warning .bi,
.home-dash .hd-applist-devnote .bi {
	color: var(--hd-danger);
	flex-shrink: 0;
	margin-top: 1px;
}
/* Dark mode — the warning text (#7f1d1d, a near-black red) is unreadable
   on a dark surface, and the 6%-alpha red fill all but vanishes. Lift the
   text to a light red and strengthen the fill/border so the warning box
   reads. Light mode keeps the dark-red-on-pale treatment. */
[data-bs-theme=dark] .home-dash .hd-wsch-warning,
[data-bs-theme=dark] .home-dash .hd-applist-devnote,
[data-bs-theme=dark] .home-dash .hd-su-alert,
[data-bs-theme=dark] .home-dash .hd-empform-pw-req,
[data-bs-theme=dark] .home-dash .hd-jc-warning {
	background: rgba(201, 27, 27, .14);
	border-color: rgba(201, 27, 27, .45);
	color: #f0a8a8;
}

/* Crew table */
.home-dash .hd-wsch-crew-head,
.home-dash .hd-wsch-crew-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
	gap: .5rem;
	align-items: center;
	padding: .55rem .7rem;
}
.home-dash .hd-wsch-crew-head,
.home-dash .hd-personnel-head,
.home-dash .hd-emp-groups-head,
.home-dash .hd-curriculum-assign-head {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	margin-bottom: .15rem;
}
.home-dash .hd-wsch-crew-row {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	margin-bottom: .3rem;
}
.home-dash .hd-wsch-crew-name {
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink);
}
.home-dash .hd-wsch-role-pill {
	display: inline-flex;
	align-items: center;
	padding: .15rem .5rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
}
.home-dash .hd-wsch-role-pill--lead,
.home-dash .hd-kra-list-item.is-selected .hd-kra-list-num,
.home-dash .hd-task-tabnav-btn.active .hd-task-tab-count {
	background: linear-gradient(135deg, var(--hd-navy), var(--hd-blue));
	color: #fff;
}

/* Field-toggle: styled label-wrapping-checkbox used for "Require X" options */
.home-dash .hd-field-toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
	margin: 0;
}
.home-dash .hd-field-toggle.is-locked {
	opacity: .8;
	cursor: not-allowed;
}
.home-dash .hd-field-toggle-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
}

/* SOC inputs */
.home-dash .hd-wsch-soc-display {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .88rem;
}
.home-dash .hd-wsch-soc-ratio,
.home-dash .hd-qed-range-readout-label {
	color: var(--hd-muted);
	font-weight: 700;
}
.home-dash .hd-wsch-soc-none {
	color: var(--hd-muted);
	font-style: italic;
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
}
.home-dash .hd-wsch-soc-input {
	display: flex;
	align-items: center;
	gap: .4rem;
}
.home-dash .hd-wsch-soc-prefix {
	flex-shrink: 0;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-weight: 700;
	color: var(--hd-muted);
}

/* Form field wrapper for typical/actual duration (Django-rendered) */
.home-dash .hd-wsch-form-field input[type="text"],
.home-dash .hd-wsch-form-field select {
	width: 100%;
	padding: .6rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	font-size: .95rem;
	color: var(--hd-ink);
	font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* Procedures selector grid (create-modal + editor) */
.home-dash .hd-wsch-procedure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: .35rem;
}
.home-dash .hd-wsch-procedure-item {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .55rem;
	border: 1px solid var(--hd-line);
	border-radius: 6px;
	font-size: .82rem;
	cursor: pointer;
	margin: 0;
	background: var(--hd-surface);
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-wsch-procedure-card {
	margin: 1rem 0;
}

/* Personnel section */

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 991.98px) {
	.home-dash .hd-wsch-edit-body { max-height: none; }
	.home-dash .hd-wsch-list-body { max-height: 420px; }
}
@media (max-width: 575.98px) {
	.home-dash .hd-wsch-crew-head,
	.home-dash .hd-wsch-crew-row {
		grid-template-columns: 1fr;
		gap: .25rem;
	}
	.home-dash .hd-wsch-status-banner { flex-direction: column; align-items: flex-start; }
}


/* ===========================================================================
   PROCEDURES SELECTION — prominent tile grid (Work Schedule editor)
   ---------------------------------------------------------------------------
   Replaces the small compact checkbox grid with larger selectable tiles,
   a clear header explaining the action, and unambiguous selected state.
   =========================================================================== */
.home-dash .hd-wsch-procedures-block {
	margin: 1.25rem 0;
	padding: 1rem 1.1rem 1.1rem;
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
	border: 1px solid var(--hd-blue-a25);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
}
.home-dash .hd-wsch-procedures-block::before {
	content: "";
	position: absolute;
	left: 0; top: 12%; bottom: 12%;
	width: 4px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--hd-lime), var(--hd-blue));
}
.home-dash .hd-wsch-procedures-head {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding-bottom: .85rem;
	margin-bottom: .85rem;
	border-bottom: 1px solid var(--hd-blue-a12);
}.home-dash .hd-wsch-procedures-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin: 0;
	letter-spacing: -.01em;
}
.home-dash .hd-wsch-procedures-sub {
	font-size: .83rem;
	color: var(--hd-muted);
	margin: .1rem 0 0;
	line-height: 1.4;
}
/* Count pill — matches the .hd-kb-list-seq badge: translucent-white fill
   so the blue text reads in both modes (--hd-surface went near-invisible
   on the dark procedures block in dark mode). */
.home-dash .hd-wsch-procedures-count {
	flex-shrink: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: .4rem .85rem;
	background: var(--hd-white-a65);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
}
.home-dash .hd-wsch-procedures-count-total {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--hd-blue);
	line-height: 1;
}
.home-dash .hd-wsch-procedures-count-label {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-blue);
	margin-top: .15rem;
}

/* Tile grid */
.home-dash .hd-wsch-procedures-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .55rem;
}
.home-dash .hd-wsch-procedure-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .7rem .85rem;
	background: var(--hd-surface);
	border: 1.5px solid var(--hd-line);
	border-radius: 10px;
	cursor: pointer;
	margin: 0;
	transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.home-dash .hd-wsch-procedure-tile:hover {
	border-color: var(--hd-blue);
	background: var(--hd-blue-a06);
	transform: translateY(-1px);
	box-shadow: var(--hd-shadow-xs);
}.home-dash .hd-wsch-procedure-tile-title {
	flex: 1 1 auto;
	font-size: .9rem;
	font-weight: 500;
	color: var(--hd-ink);
	line-height: 1.35;
	min-width: 0;
	transition: color .18s ease;
}
/* Circular checkmark indicator on the right — hidden when unchecked */
.home-dash .hd-wsch-procedure-tile-indicator {
	flex-shrink: 0;
	width: 24px; height: 24px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--hd-line);
	color: transparent;
	font-size: .75rem;
	transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

/* Selected state — applied via .is-selected from template OR via :has()
   for live state change after user clicks. Both paths produce identical
   styling. */
.home-dash .hd-wsch-procedure-tile.is-selected,
.home-dash .hd-wsch-procedure-tile:has(.hd-wsch-procedure-check:checked) {
	border-color: var(--hd-blue);
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	box-shadow: 0 3px 10px var(--hd-blue-a12);
}.home-dash .hd-wsch-procedure-tile.is-selected .hd-wsch-procedure-tile-indicator,
.home-dash .hd-wsch-procedure-tile:has(.hd-wsch-procedure-check:checked) .hd-wsch-procedure-tile-indicator {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	border-color: transparent;
	color: #fff;
	transform: scale(1.05);
}

/* Keyboard focus ring on the whole tile when the hidden checkbox is focused */

/* ===========================================================================
   AVAILABLE PERSONNEL TABLE (_annotated_employees_include.html)
   =========================================================================== */
.home-dash .hd-personnel-errors {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin-bottom: 1rem;
}

.home-dash .hd-personnel-table {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.home-dash .hd-personnel-head,
.home-dash .hd-personnel-row {
	display: grid;
	grid-template-columns: minmax(0, 2.5fr) repeat(5, minmax(0, 1fr));
	gap: .5rem;
	align-items: center;
	padding: .55rem .75rem;
}

/* Section group label (00_crew / 01_member / 02_other / 03_direct) */
.home-dash .hd-personnel-section-head {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem .75rem .45rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-blue);
	border-left: 3px solid var(--hd-blue);
	background: linear-gradient(90deg, var(--hd-blue-a06), transparent);
	border-radius: 0 6px 6px 0;
	margin: .2rem 0 .1rem;
}
.home-dash .hd-personnel-section-head--spaced {
	margin-top: .9rem;
}

/* Row */
.home-dash .hd-personnel-row,
.home-dash .hd-curriculum-assign-row {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-personnel-row:hover .hd-personnel-avatar {
	background: linear-gradient(135deg, var(--hd-lime-a25), var(--hd-blue-a25));
}
.home-dash .hd-personnel-cell-name,
.home-dash .hd-curriculum-assign-cell-title {
	display: flex;
	align-items: center;
	gap: .55rem;
	min-width: 0;
}
.home-dash .hd-personnel-avatar {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: var(--hd-blue);
	font-size: .9rem;
}
.home-dash .hd-personnel-name {
	font-size: .88rem;
	color: var(--hd-ink);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.home-dash .hd-personnel-cell-role,
.home-dash .hd-curriculum-overview-chart,
.home-dash .hd-stb-q-overview-choice-correct,
.hd-modal .hd-stb-q-overview-img-modal-body,
.home-dash .hd-stb-q-mc-correct,
.home-dash .hd-stb-q-mc-delete,
.home-dash .hd-stb-q-img-row-correct,
.home-dash .hd-stb-q-img-row-delete,
.home-dash .hd-stb-q-rank-row-delete {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Qualified indicator — check vs dash, no clickable control */
.home-dash .hd-personnel-qualified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	font-size: 1rem;
}
.home-dash .hd-personnel-qualified--yes,
.home-dash .hd-curriculum-stat--ontime .hd-curriculum-stat-num,
.home-dash .hd-cl-action.is-success,
.home-dash .hd-kl-pending-state--10 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--12 .hd-kl-pending-state-value,
.home-dash .hd-kl-pending-state--16 .hd-kl-pending-state-value,
.home-dash .hd-prog-stat--done .hd-prog-stat-value { color: #1f7a3a; }
.home-dash .hd-personnel-qualified--no  { color: var(--hd-muted); opacity: .5; }

/* Remove checkbox — subtle red hint */
.home-dash .hd-personnel-remove:checked,
.home-dash .hd-kei-delete-check:checked {
	background: linear-gradient(135deg, #a01818, var(--hd-danger)) !important;
	border-color: transparent !important;
}


/* Responsive stacking */
@media (max-width: 767.98px) {
	.home-dash .hd-personnel-row {
		grid-template-columns: 1fr;
		gap: .35rem;
	}
}


/* ===========================================================================
   EMPLOYEE MANAGER (user_base.html + employee_manager.html + partials)
   ---------------------------------------------------------------------------
   Two-column Job Definition editor with identity card + form on the left,
   group memberships on the right.
   =========================================================================== */


/* ===========================================================================
   EMPLOYEE DETAILS PANEL (left column)
   =========================================================================== */
.home-dash .hd-emp-details-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	margin: 0;
}

/* Identity + form fields — 2-column grid at md+ (identity left,
   form fields stacked right). Below md, single column with identity
   on top followed by the field stack. The dividing border that
   visually separates this section from the dynamic position
   description below now lives on this wrapper rather than on
   .hd-emp-identity (so the border doesn't sit in the middle of
   the row when the grid is two columns wide). */
.home-dash .hd-emp-id-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	padding: .25rem 0 1.25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--hd-line);
}
@media (min-width: 768px) {
	.home-dash .hd-emp-id-form-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1.5rem;
	}
}
.home-dash .hd-emp-id-form-fields {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	min-width: 0;
}
/* Inside this compact field stack the .hd-field default margin-bottom
   would stack with the flex gap — zero it so the gap value is the
   only spacing between rows. Field inputs also use a slightly tighter
   vertical padding so the right column reads at the same visual
   density as the identity block on the left. */
.home-dash .hd-emp-id-form-fields .hd-field-label,
.home-dash .hd-jc-create-hero,
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-fallback li,
.hd-cs-requirements-list li { margin-bottom: .25rem; }
.home-dash .hd-emp-id-form-fields .hd-field-input { padding: .45rem .7rem; }
.home-dash .hd-emp-id-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: .55rem;
}

/* Identity row: avatar + stacked name + contact rows. When this lives
   inside .hd-emp-id-form-grid, the wrapper owns the divider so the
   identity itself drops its padding-bottom / margin-bottom / border. */
.home-dash .hd-emp-identity {
	display: flex;
	gap: 1rem;
	padding: .25rem 0 1.25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-emp-id-form-grid > .hd-emp-identity {
	padding: 0;
	margin: 0;
	border-bottom: 0;
}

/* ===========================================================================
   AVATAR FALLBACK — paired with the templates/_avatar.html include.
   Unscoped on purpose: avatars also render in the navbar, outside
   .home-dash. The fallback <span> shows the bi-person-fill icon when there
   is no avatar (or base.js's avatarFallback() swaps in a broken <img>);
   the inline SVG scales to whatever size the avatar class gives the
   element, so no per-size rules are needed, and it themes via currentColor.
   =========================================================================== */
.hd-avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hd-surface-2);
	color: var(--hd-muted);
	overflow: hidden;
}
.hd-avatar--fallback svg {
	width: 56%;
	height: 56%;
	fill: currentColor;
}

.home-dash .hd-emp-avatar-wrap {
	flex-shrink: 0;
	width: 96px; height: 96px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	box-shadow: 0 3px 10px rgba(0, 0, 0,.12);
}
/* The photo fills its circular frame here. Scoped to .hd-emp-avatar-wrap
   so it beats the roster's small-circle .hd-emp-avatar rule (which sizes
   the same class to a 56px chip in the employee list). */
.home-dash .hd-emp-avatar-wrap .hd-emp-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}.home-dash .hd-emp-avatar,
.home-dash .hd-grp-member-avatar-img,
.home-dash .hd-emp-avatar-img,
.home-dash .hd-inb-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.home-dash .hd-emp-identity-name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hd-ink);
	letter-spacing: -.005em;
	line-height: 1.2;
	margin-bottom: .2rem;
}
.home-dash .hd-emp-identity-line {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .85rem;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
}
.home-dash .hd-emp-sms-badge {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .1rem .4rem;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 4px;
	margin-left: .3rem;
	flex-shrink: 0;
}
.home-dash .hd-emp-sms-badge--yes {
	background: rgba(31,122,58,.12);
	color: #1f7a3a;
}
.home-dash .hd-emp-sms-badge--no {
	background: rgba(201,27,27,.08);
	color: var(--hd-danger);
}

/* ===========================================================================
   POSITION DESCRIPTION (dynamic pane)
   =========================================================================== */
.home-dash .hd-emp-position-desc {
	padding: 1rem 1.1rem;
	margin: 1rem 0;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
}
.home-dash .hd-emp-position-pane {
	display: none;
	flex-direction: column;
	gap: 1rem;
}
/* First pane visible by default before JS kicks in */
.home-dash .hd-emp-position-pane:first-child,
.home-dash .hd-cfg-row-pair > [class*="col-"],
.home-dash .hd-grp-info-row > [class*="col-"] { display: flex; }
.home-dash .hd-emp-position-heading {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin: 0;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-emp-position-empty,
.home-dash .hd-emp-position-kra-desc em,
.home-dash .hd-emp-task-desc em,
.home-dash .hd-kra-description-empty,
.home-dash .hd-app-overview-empty,
.home-dash .hd-gf-crumb-muted,
.home-dash .hd-gmove-info-muted,
.home-dash .hd-kl-muted,
.home-dash .hd-ob-q-answer-def {
	color: var(--hd-muted);
	font-style: italic;
}
.home-dash .hd-emp-position-kra {
	padding: .6rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
}
.home-dash .hd-emp-position-kra-title {
	font-size: .88rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin-bottom: .25rem;
}
.home-dash .hd-emp-position-kra-desc {
	font-size: .82rem;
	color: var(--hd-muted);
	line-height: 1.45;
}

/* ===========================================================================
   SECTIONS (Additional Responsibilities / Group Tasks)
   =========================================================================== */
.home-dash .hd-emp-section {
	margin-top: 1.5rem;
}
.home-dash .hd-emp-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .7rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-emp-section-title {
	font-size: .88rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.home-dash .hd-emp-section-title .bi,
.home-dash .hd-qed-note .bi,
.home-dash .hd-grp-sub-title .bi,
.home-dash .hd-emp-msg-title .bi,
.home-dash .hd-news-del-card-head .bi,
.home-dash .hd-fd-content-head .bi,
.home-dash .hd-kb-toggle-label .bi {
	color: var(--hd-blue);
	font-size: 1rem;
}

/* Add-task dropdown styling */
.home-dash .hd-dept-add-btn.dropdown-toggle::after {
	border-top-color: var(--hd-blue);
	margin-left: .25rem;
	opacity: .6;
}
.home-dash .hd-emp-addtask-menu,
.home-dash .hd-kei-employee-menu {
	min-width: 240px;
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var(--hd-line);
	box-shadow: var(--hd-shadow-md);
	border-radius: 10px;
	padding: .35rem;
}
.home-dash .hd-emp-addtask-menu .dropdown-item {
	padding: .45rem .65rem;
	font-size: .85rem;
	border-radius: 7px;
}
.home-dash .hd-emp-addtask-empty {
	font-style: italic;
	color: var(--hd-muted);
	font-size: .82rem;
	padding: .45rem .65rem;
}

/* Task cards (ad-hoc + group) */
.home-dash .hd-emp-task-card {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .7rem .85rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-emp-task-link {
	color: var(--hd-ink);
	text-decoration: none;
	display: inline-block;
}
.home-dash .hd-emp-task-title {
	font-size: .9rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
}
.home-dash .hd-emp-task-badge {
	display: inline-flex;
	align-items: center;
	padding: .1rem .4rem;
	background: rgba(168,85,247,.12);
	color: #7e22ce;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 4px;
}
.home-dash .hd-emp-task-desc {
	font-size: .82rem;
	color: var(--hd-muted);
	margin-top: .2rem;
	line-height: 1.45;
}
.home-dash .hd-emp-task-desc p { margin-bottom: .3rem; }
.home-dash .hd-emp-task-card--readonly,
.home-dash .tree-row:hover,
.home-dash .hd-lang-row.is-locked,
.home-dash .hd-prog-activity-item:hover,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-row:hover,
.home-dash .hd-gt .tree-row:hover,
.home-dash .hd-gt .tree-row.active,
.home-dash .hd-gf-members-table .member-row.empty-form,
.home-dash .hd-gm-summary-item:hover,
.home-dash .hd-cl-filter-check:hover,
.home-dash .hd-cl-row:hover,
.home-dash .hd-kl-row:hover,
.home-dash .hd-cr-row:hover,
.home-dash .hd-news-row:hover,
.home-dash .hd-pb-dim-filter-item:hover,
.home-dash .hd-pb-answer-row:nth-child(odd),
.home-dash .hd-iss-detail-comrades-table tbody tr:hover,
.home-dash .hd-bs-alias,
.home-dash .hd-tl-files-row:hover {
	background: var(--hd-surface-2);
}
.home-dash .hd-emp-task-card--readonly:hover,
.home-dash .hd-lang-row.is-locked:hover {
	border-color: var(--hd-line);
	background: var(--hd-surface-2);
}

.home-dash .hd-emp-empty,
.home-dash .hd-kra-task-empty,
.home-dash .hd-gb-unused-empty,
.home-dash .hd-kb-acc-empty { padding: 1.25rem 1rem; }

/* ===========================================================================
   EMPLOYEE GROUPS PANEL (right column)
   =========================================================================== */
.home-dash .hd-emp-groups-body {
	padding: .85rem 1rem 1rem;
	overflow-y: auto;
	max-height: 640px;
}
.home-dash .hd-emp-group-search.hd-inline-search-wrap {
	max-width: none !important;
	margin-bottom: .85rem;
}

/* Groups table */
.home-dash .hd-emp-groups-head,
.home-dash .hd-emp-groups-row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) 40px;
	gap: .5rem;
	align-items: center;
	padding: .55rem .7rem;
}
.home-dash .hd-emp-groups-row,
.home-dash .hd-kei-row,
.home-dash .hd-kra-list-item {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, background .18s ease;
	position: relative;
	overflow: hidden;
}
.home-dash .hd-emp-groups-link {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
}
.home-dash .hd-emp-groups-name {
	font-size: .88rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-emp-groups-primary-badge {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .1rem .4rem;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a12));
	color: #5c8a00;
	border-radius: 4px;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.home-dash .hd-emp-groups-primary-badge .bi { font-size: .6rem; }
.home-dash .hd-emp-groups-lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	font-size: .8rem;
	opacity: .6;
}

/* Responsive: stack rows as labeled cards on narrow viewports */
@media (max-width: 767.98px) {
	.home-dash .hd-emp-groups-row {
		grid-template-columns: 1fr;
		gap: .25rem;
	}
	.home-dash .hd-emp-groups-cell--role::before,
	.home-dash .hd-emp-groups-cell--supv::before {
		content: attr(data-label) ":";
		display: inline-block;
		margin-right: .4rem;
		font-size: .6rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
}


/* ===========================================================================
   KEI PAGE (user_kei.html) — skill/qualification tracker for an employee
   ---------------------------------------------------------------------------
   CSS Grid-based table with a selected-row expansion that shows training
   resources inline. Responsive: stacks to labeled cards on mobile.
   =========================================================================== */

/* Release the suite-wide .hd-panel { overflow: hidden } clip so the
   employee-switcher and Add-Task dropdowns in the head can render
   past the panel's bottom edge. The body retains its own overflow-x
   handling for wide-table scroll on narrow viewports (see below). */

/* ---- Panel header layout ---- */
.home-dash .hd-kei-head {
	flex-wrap: wrap;
	row-gap: .6rem;
}
.home-dash .hd-kei-employee-switcher .dropdown-toggle,
.home-dash .hd-perm-employee-switcher .dropdown-toggle {
	padding: .4rem .85rem;
}
.home-dash .hd-kei-employee-switcher .bi-person-fill,
.home-dash .hd-perm-employee-switcher .bi-person-fill {
	color: var(--hd-blue);
	margin-right: .1rem;
}
.home-dash .hd-kei-employee-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .65rem;
	border-radius: 7px;
	font-size: .85rem;
}
.home-dash .hd-kei-employee-check {
	color: var(--hd-lime);
	font-size: .9rem;
}

.home-dash .hd-kei-actions,
.home-dash .hd-cb-licenses-meta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
	flex-wrap: wrap;
}

/* ---- Body ---- */
.home-dash .hd-kei-body {
	padding: .85rem 1rem 1rem;
	overflow-x: auto;
}

/* ===========================================================================
   KEI TABLE — CSS Grid; each row is also a grid
   =========================================================================== */
.home-dash .hd-kei-table {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 920px;
}

.home-dash .hd-kei-head-row,
.home-dash .hd-kei-row {
	display: grid;
	grid-template-columns:
		minmax(180px, 2.4fr)  /* task */
		90px                  /* current level */
		90px                  /* desired level */
		140px                 /* target date */
		140px                 /* applied date */
		140px                 /* qualified date */
		minmax(160px, 2fr)    /* resources */
		64px;                 /* delete */
	gap: .65rem;
	align-items: start;
	padding: .6rem .8rem;
}
.home-dash .hd-kei-head-row {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
	margin-bottom: .15rem;
	align-items: center;
}
.home-dash .hd-kei-row.is-selected {
	border-color: var(--hd-blue);
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a12));
	border-radius: 3px;
	box-shadow: 0 2px 8px var(--hd-blue-a12);
}
.home-dash .hd-kei-row.is-selected::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--hd-blue);
}


/* ---- Task cell (icon + title) ---- */
.home-dash .hd-kei-cell-task {
	display: flex;
	align-items: center;
	gap: .55rem;
	align-self: start;
	/* Small top offset so the icon button + title visually align with
	   the tops of the level/date inputs in adjacent cells (which have
	   their own padding). */
	padding-top: .15rem;
}
.home-dash .hd-kei-task-detail-btn {
	flex-shrink: 0;
	width: 30px; height: 30px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .95rem;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.home-dash .hd-kei-task-detail-btn:hover {
	background: var(--hd-blue);
	color: #fff;
	transform: scale(1.05);
}
.home-dash .hd-kei-task-link {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--hd-ink);
	text-decoration: none;
}
.home-dash .hd-kei-task-title {
	display: block;
	font-size: .88rem;
	line-height: 1.35;
}

/* ---- Level inputs (small number fields) ---- */
.home-dash .hd-kei-level-input {
	width: 100%;
	padding: .4rem .55rem !important;
	text-align: center;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .9rem;
	font-weight: 600;
}

/* ---- Date inputs ---- */
.home-dash .hd-kei-date-input {
	width: 100%;
	padding: .4rem .55rem !important;
	font-size: .82rem;
}

/* ---- Resources cell ---- */
.home-dash .hd-kei-cell-resources {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.home-dash .hd-kei-resources {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding-left: .5rem;
	border-left: 2px solid var(--hd-blue-a25);
}
.home-dash .hd-kei-resource-group,
.home-dash .hd-kra-foundation,
.home-dash .hd-foundation-answer {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	overflow: hidden;
}
.home-dash .hd-kei-resource-group-head {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .6rem;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-kei-resource-group-head .bi {
	color: var(--hd-blue);
	font-size: .8rem;
}
.home-dash .hd-kei-resource-list {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .45rem .6rem;
}
.home-dash .hd-kei-resource-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .4rem;
	border-radius: 5px;
	cursor: pointer;
	margin: 0;
	transition: background .18s ease;
}
.home-dash .hd-kei-resource-item.is-locked {
	opacity: .7;
	cursor: not-allowed;
}
.home-dash .hd-kei-resource-title {
	flex: 1 1 auto;
	font-size: .82rem;
	color: var(--hd-ink);
	line-height: 1.3;
}
.home-dash .hd-kei-resource-empty {
	font-size: .8rem;
	color: var(--hd-muted);
	font-style: italic;
	padding: .35rem .5rem;
}

/* Unselected resources cell — "Open" hint */
.home-dash .hd-kei-resources-open-link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .5rem;
	font-size: .78rem;
	color: var(--hd-muted);
	text-decoration: none;
	border-radius: 5px;
	transition: color .18s ease, background .18s ease;
}

/* ---- Delete cell ---- */
.home-dash .hd-kei-cell-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

.home-dash .hd-kei-empty { padding: 1.8rem 1rem; }

/* ===========================================================================
   RESPONSIVE — stack rows as labeled cards on narrow screens
   =========================================================================== */
@media (max-width: 1199.98px) {
	.home-dash .hd-kei-body { overflow-x: auto; }
}
@media (max-width: 767.98px) {
	.home-dash .hd-kei-body { overflow-x: visible; }
	.home-dash .hd-kei-table { min-width: 0; }
	.home-dash .hd-kei-row {
		grid-template-columns: 1fr;
		gap: .45rem;
		padding: .75rem .85rem;
	}
	.home-dash .hd-kei-row.is-selected::before {
		top: 10%; bottom: 10%;
		width: 3px;
		border-radius: 0 2px 2px 0;
	}
	.home-dash .hd-kei-cell {
		display: flex;
		align-items: center;
		gap: .4rem;
	}
	.home-dash .hd-kei-cell-task { align-items: center; }
	.home-dash .hd-kei-cell[data-label]::before {
		content: attr(data-label) ":";
		flex-shrink: 0;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
		min-width: 80px;
	}
	.home-dash .hd-kei-cell-resources {
		display: block;
	}
	.home-dash .hd-kei-cell-resources::before {
		display: block;
		min-width: 0;
		margin-bottom: .4rem;
	}
	.home-dash .hd-kei-resources {
		padding-left: 0;
		border-left: none;
	}
}


/* ===========================================================================
   USER CURRICULUM (user_curriculum.html + _assignment_overview_chart.html)
   ---------------------------------------------------------------------------
   Employee training assignments page — doughnut overview + sectioned
   assignment tables grouped by source.
   =========================================================================== */


/* ===========================================================================
   ASSIGNMENT OVERVIEW — chart + stats
   =========================================================================== */
.home-dash .hd-curriculum-overview {
	display: grid;
	grid-template-columns: minmax(0, 260px) 1fr;
	gap: 1.5rem;
	align-items: center;
}
.home-dash .hd-curriculum-chart-container {
	width: 100%;
	max-width: 240px;
	aspect-ratio: 1;
	position: relative;
}
.home-dash .hd-curriculum-chart-canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}
.home-dash .hd-curriculum-chart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	height: 100%;
	padding: 1.5rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: 12px;
	color: var(--hd-muted);
	font-size: .85rem;
	text-align: center;
}
.home-dash .hd-curriculum-chart-empty .bi {
	font-size: 2rem;
	color: var(--hd-muted);
	opacity: .6;
}

.home-dash .hd-curriculum-overview-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: .75rem;
}

/* Individual stat cards — each has an icon chip + number + label */
.home-dash .hd-curriculum-stat {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 3px;
	border-left-width: 4px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.home-dash .hd-curriculum-stat:hover {
	transform: translateY(-1px);
	box-shadow: var(--hd-shadow-xs);
}
.home-dash .hd-curriculum-stat-icon {
	flex-shrink: 0;
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 10px;
	font-size: 1.2rem;
}
.home-dash .hd-curriculum-stat-num {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--hd-ink);
	letter-spacing: -.02em;
}
.home-dash .hd-curriculum-stat-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-top: .1rem;
}
.home-dash .hd-curriculum-stat-pct {
	font-weight: 600;
	opacity: .85;
	margin-left: .2rem;
}

.home-dash .hd-curriculum-stat--total {
	border-left-color: var(--hd-blue);
}
.home-dash .hd-curriculum-stat--ontime,
.home-dash .hd-proc-trial--worked {
	border-left-color: #1f7a3a;
}
.home-dash .hd-curriculum-stat--ontime .hd-curriculum-stat-icon,
.home-dash .hd-proc-trial--worked .hd-proc-trial-status {
	background: rgba(31,122,58,.14);
	color: #1f7a3a;
}

.home-dash .hd-curriculum-stat--overdue,
.home-dash .hd-proc-trial--failed {
	border-left-color: var(--hd-danger);
}

/* Responsive: stack chart + stats on narrow viewports */
@media (max-width: 767.98px) {
	.home-dash .hd-curriculum-overview {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.home-dash .hd-curriculum-chart-container {
		margin: 0 auto;
		max-width: 200px;
	}
}

/* ===========================================================================
   ASSIGNMENT SECTIONS (Direct, Task, Inherited, Other)
   =========================================================================== */
/* Colored left accent on each section panel to differentiate the source.
   These heads STAY LIGHT (reverting the suite-wide dark default) because
   the colored 3px left-edge stripes that distinguish Direct / Task /
   Inherited / Other are the entire visual identity of these panels —
   blue/amber/purple stripes on a saturated blue head would be invisible
   or clashing. */
.home-dash .hd-curriculum-section .hd-panel-head {
	background: var(--hd-surface-2);
	color: var(--hd-ink);
	border-bottom: 1px solid var(--hd-line);
}

.home-dash .hd-curriculum-assign-body {
	padding: .75rem 1rem 1rem;
}

/* Assignment table */
.home-dash .hd-curriculum-assign-head,
.home-dash .hd-curriculum-assign-row {
	display: grid;
	grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
	gap: .75rem;
	align-items: center;
	padding: .55rem .75rem;
}
.home-dash .hd-curriculum-assign-icon {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .88rem;
}
.home-dash .hd-curriculum-assign-name {
	flex: 1 1 auto;
	font-size: .88rem;
	color: var(--hd-ink);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.home-dash .hd-curriculum-assign-cell-due,
.home-dash .hd-rb-course-default {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	color: var(--hd-muted);
}


/* Responsive: stack assignment rows on narrow screens */
@media (max-width: 575.98px) {
	.home-dash .hd-curriculum-assign-row {
		grid-template-columns: 1fr;
		gap: .35rem;
	}
	.home-dash .hd-curriculum-assign-cell-due::before {
		content: attr(data-label) ":";
		display: inline-block;
		margin-right: .35rem;
		font-size: .62rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
}


/* ===========================================================================
   USER GROUP PERMISSIONS (user_group_permissions.html)
   ---------------------------------------------------------------------------
   Feature-permission grid: categories become cards, features become
   toggleable items within cards.
   =========================================================================== */


/* Header layout — wraps on narrow screens */
.home-dash .hd-perm-head {
	flex-wrap: wrap;
	row-gap: .65rem;
	align-items: center;
}
.home-dash .hd-perm-employee-static {
	font-size: .92rem;
	font-weight: 700;
	color: #fff;
	padding: .4rem .85rem;
	background: var(--hd-white-a06);
	border-radius: 8px;
	border: 1px solid var(--hd-white-a25);
}.home-dash .hd-perm-context {
	font-size: .9rem;
	color: var(--hd-white-a80);
}
.home-dash .hd-perm-context strong,
.hd-cs-header-meta-item strong {
	color: #fff;
	font-weight: 700;
}
.home-dash .hd-perm-actions {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-left: auto;
	flex-wrap: wrap;
}

/* ===========================================================================
   SELECT-ALL toggle
   =========================================================================== */
.home-dash .hd-perm-select-all {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .85rem 1rem;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
	border: 1px solid var(--hd-blue-a25);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-perm-select-all:hover {
	border-color: var(--hd-blue);
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a12));
}
.home-dash .hd-perm-select-all .hd-check {
	flex-shrink: 0;
	width: 22px; height: 22px;
}
.home-dash .hd-perm-select-all-title {
	display: block;
	font-size: .95rem;
	font-weight: 700;
	color: var(--hd-ink);
	line-height: 1.2;
}
.home-dash .hd-perm-select-all-sub {
	display: block;
	font-size: .78rem;
	color: var(--hd-muted);
	margin-top: .15rem;
}
.home-dash .hd-perm-select-all-count {
	flex-shrink: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: .35rem .8rem;
	background: var(--hd-white-a65);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--hd-blue);
	line-height: 1;
}
.home-dash .hd-perm-select-all-count span {
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-blue);
	margin-top: .15rem;
}

/* ===========================================================================
   CATEGORY GRID
   =========================================================================== */
.home-dash .hd-perm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: .75rem;
}
.home-dash .hd-perm-category {
	display: flex;
	flex-direction: column;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.home-dash .hd-perm-category-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .85rem;
	background: var(--hd-blue);
	color: #fff;
	border-bottom: 0;
}
.home-dash .hd-perm-category-head .bi {
	color: #fff;
	font-size: 1rem;
	flex-shrink: 0;
}
.home-dash .hd-perm-category-head .hd-perm-category-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-perm-category-head .hd-perm-category-count {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	padding: 0 .45rem;
	height: 20px;
	background: var(--hd-white-a18);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	border-radius: 999px;
}
.home-dash .hd-perm-category-body {
	padding: .4rem .45rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

/* Individual permission item — label wrapping a checkbox + title */
.home-dash .hd-perm-item {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .4rem .55rem;
	border-radius: 6px;
	margin: 0;
	cursor: pointer;
	transition: background .18s ease;
}
.home-dash .hd-perm-item.is-disabled {
	cursor: not-allowed;
	opacity: .65;
}
.home-dash .hd-perm-item-title,
.home-dash .hd-perm-check-label {
	flex: 1 1 auto;
	font-size: .85rem;
	color: var(--hd-ink);
	line-height: 1.35;
	min-width: 0;
}
.home-dash .hd-perm-item-lock {
	flex-shrink: 0;
	color: var(--hd-muted);
	font-size: .72rem;
}


/* Responsive */
@media (max-width: 575.98px) {
	.home-dash .hd-perm-select-all,
	.home-dash .hd-cl-toolbar-row--search { flex-wrap: wrap; }
	.home-dash .hd-perm-select-all-count {
		margin-left: auto;
	}
}


/* ===========================================================================
   KRA DETAIL (kra_detail.html)
   ---------------------------------------------------------------------------
   Hero header + sidebar (KRA list) + details panel + tasks accordion.
   =========================================================================== */

.home-dash .hd-kra {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
/* Extra breathing room between the gradient hero and the main content
   row. Using padding-top on the main row (rather than margin) avoids
   Bootstrap's .row negative-gutter from absorbing part of the space. */
.home-dash .hd-kra > .row.hd-kra-main,
.home-dash .hd-kra-main,
.home-dash .hd-settings-body,
.home-dash .hd-utilities-body,
.home-dash .hd-jc > .row.hd-jc-main,
.home-dash .hd-jc-main,
.home-dash .hd-jc-create > .row.hd-jc-create-main,
.home-dash .hd-jc-create-main,
.home-dash .hd-cert > .row.hd-cert-main,
.home-dash .hd-cert-main,
.home-dash .hd-agency > .row.hd-agency-main,
.home-dash .hd-agency-main {
	padding-top: .5rem;
}
@media (min-width: 768px) {
	.home-dash .hd-kra > .row.hd-kra-main,
	.home-dash .hd-kra-main,
	.home-dash .hd-settings-body,
	.home-dash .hd-utilities-body,
	.home-dash .hd-jc > .row.hd-jc-main,
	.home-dash .hd-jc-main,
	.home-dash .hd-jc-create > .row.hd-jc-create-main,
	.home-dash .hd-jc-create-main,
	.home-dash .hd-cert > .row.hd-cert-main,
	.home-dash .hd-cert-main,
	.home-dash .hd-agency > .row.hd-agency-main,
	.home-dash .hd-agency-main,
	.home-dash .hd-cfg-main {
		padding-top: 1rem;
	}
}

/* Ghost buttons sitting on the navy gradient hero need inverted colors —
   the base .hd-btn-ghost was designed for light backgrounds so its text
   and border are dark. On the hero, we flip to white text + translucent
   white border + soft white background fill, with a subtle hover brighten. */
.home-dash .hd-kra-hero .hd-btn.hd-btn-ghost,
.home-dash .hd-kra-hero-btn.hd-btn-ghost,
.home-dash .hd-lst-hero .hd-btn.hd-btn-ghost,
.home-dash .hd-crb-hero .hd-btn.hd-btn-ghost,
.home-dash .hd-cpv-hero .hd-btn.hd-btn-ghost {
	background: var(--hd-white-a06);
	border-color: var(--hd-white-a25);
	color: #fff;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}.home-dash .hd-kra-hero .hd-btn.hd-btn-ghost:hover,
.home-dash .hd-kra-hero .hd-btn.hd-btn-ghost:focus-visible,
.home-dash .hd-kra-hero-btn.hd-btn-ghost:hover,
.home-dash .hd-kra-hero-btn.hd-btn-ghost:focus-visible,
.home-dash .hd-lst-hero .hd-btn.hd-btn-ghost:hover,
.home-dash .hd-lst-hero .hd-btn.hd-btn-ghost:focus-visible,
.home-dash .hd-crb-hero .hd-btn.hd-btn-ghost:hover,
.home-dash .hd-crb-hero .hd-btn.hd-btn-ghost:focus-visible,
.home-dash .hd-cpv-hero .hd-btn.hd-btn-ghost:hover,
.home-dash .hd-cpv-hero .hd-btn.hd-btn-ghost:focus-visible,
.home-dash .hd-hero .hd-actions-trigger:hover,
.home-dash .hd-hero .hd-actions-trigger:focus-visible,
.home-dash .hd-hero .hd-actions-trigger[aria-expanded="true"],
.home-dash .hd-kl-hero-btn:hover,
.home-dash .hd-kl-hero-btn:focus-visible,
.home-dash .hd-tc-hero-btn:hover,
.home-dash .hd-tc-hero-btn:focus-visible,
.home-dash .hd-cr-hero-btn:hover,
.home-dash .hd-cr-hero-btn:focus-visible,
.home-dash .hd-rt-hero .hd-btn.hd-btn-ghost:hover,
.home-dash .hd-rt-hero .hd-btn.hd-btn-ghost:focus-visible {
	background: var(--hd-white-a18);
	border-color: var(--hd-white-a50);
	color: #fff;
}

/* ---- Main two-column grid ---- */

/* ===========================================================================
   LEFT SIDEBAR — KRA list
   =========================================================================== */
.home-dash .hd-kra-sidebar-body {
	padding: .75rem .85rem 1rem;
	overflow-y: auto;
	max-height: 640px;
}

.home-dash .hd-kra-list-link {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem .7rem .55rem 1rem;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
}
.home-dash .hd-kra-list-num {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .72rem;
	font-weight: 700;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.home-dash .hd-kra-list-title {
	flex: 1 1 auto;
	font-size: .85rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.home-dash .hd-kra-empty,
.home-dash .hd-jc-empty,
.home-dash .hd-cert-empty,
.home-dash .hd-agency-empty,
.home-dash .hd-ind-empty,
.home-dash .hd-app-empty,
.home-dash .hd-cb-empty { padding: 1.25rem .75rem; }

/* ===========================================================================
   KRA DETAILS PANEL
   =========================================================================== */
.home-dash .hd-kra-section-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin: 0 0 .55rem;
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-kra-description {
	font-size: .9rem;
	line-height: 1.55;
	color: var(--hd-ink);
}

/* Metadata fact cards */
.home-dash .hd-kra-facts {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
}
.home-dash .hd-kra-fact {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .7rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
}
.home-dash .hd-kra-fact-icon {
	flex-shrink: 0;
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .9rem;
}
.home-dash .hd-kra-fact-label {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .1rem;
}
.home-dash .hd-kra-fact-value {
	font-size: .88rem;
	font-weight: 600;
	color: var(--hd-ink);
	word-break: break-word;
}
.home-dash .hd-kra-fact-none {
	color: var(--hd-muted);
	font-style: italic;
	font-weight: 500;
}

/* ===========================================================================
   TASKS ACCORDION
   =========================================================================== */
.home-dash .hd-kra-tasks-panel .hd-panel-head {
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
}
.home-dash .hd-kra-tasks-sub {
	font-size: .82rem;
	color: var(--hd-white-a80);
	font-weight: 500;
}
.home-dash .hd-kra-tasks-body {
	padding: .85rem 1rem 1rem;
	overflow-y: auto;
	max-height: 720px;
}

/* Override Bootstrap accordion defaults with our design-system styling */
.home-dash .hd-kra-accordion .hd-kra-task {
	border: 1px solid var(--hd-line);
	border-radius: 10px !important;
	background: var(--hd-surface);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .9rem;
	background: var(--hd-surface);
	color: var(--hd-ink);
	font-size: .92rem;
	font-weight: 600;
	border: none;
	box-shadow: none;
	transition: background .18s ease;
}
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle::after {
	background: none;
	content: "\F285"; /* bi-chevron-right glyph */
	font-family: 'bootstrap-icons';
	width: auto; height: auto;
	font-size: .85rem;
	color: var(--hd-muted);
	margin-left: auto;
	transition: transform .22s ease, color .18s ease;
}
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle:not(.collapsed) {
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a12));
	color: var(--hd-blue);
}
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle:focus {
	box-shadow: 0 0 0 2px var(--hd-blue-a25);
	z-index: 2;
}
.home-dash .hd-kra-task-icon {
	flex-shrink: 0;
	width: 30px; height: 30px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .9rem;
}
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle:not(.collapsed) .hd-kra-task-icon,
.home-dash .hd-kra-list-item.is-selected .hd-kra-list-icon,
.home-dash .hd-kra-accordion .accordion-button.hd-kra-task-toggle:not(.collapsed) .hd-kra-question-label {
	background: linear-gradient(135deg, var(--hd-navy), var(--hd-blue));
	color: var(--hd-lime);
}
.home-dash .hd-kra-task-title,
.home-dash .hd-proc-issue-title,
.home-dash .hd-pb-task-picker-name {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.home-dash .hd-kra-task-body {
	padding: .85rem 1rem 1rem;
	background: var(--hd-surface-2);
	border-top: 1px solid var(--hd-line);
}

/* ---- Foundations & Questions ---- */
.home-dash .hd-kra-foundations-lead {
	font-size: .82rem;
	color: var(--hd-muted);
	margin: 0 0 .7rem;
}
.home-dash .hd-kra-foundations,
.home-dash .hd-cfg-toggle-stack,
.home-dash .hd-grp-newgroup-form,
.home-dash .hd-emp-card,
.home-dash .hd-emp-mgr-card,
.home-dash .hd-kb-overview-section,
.home-dash .hd-stb-q-range-list {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.home-dash .hd-kra-foundation-head {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .7rem;
	background: linear-gradient(135deg, rgba(0, 0, 0,.04), var(--hd-blue-a06));
	border-bottom: 1px solid var(--hd-line);
	font-size: .85rem;
}
.home-dash .hd-kra-foundation-head .bi {
	color: var(--hd-blue);
	font-size: .88rem;
}
.home-dash .hd-kra-foundation-label {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-kra-questions {
	list-style: none;
	margin: 0;
	padding: .5rem .6rem;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.home-dash .hd-kra-question {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	padding: .35rem .45rem;
	border-radius: 5px;
	font-size: .85rem;
	transition: background .18s ease;
}
.home-dash .hd-kra-question-num {
	flex-shrink: 0;
	width: 22px; height: 22px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 5px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .68rem;
	font-weight: 700;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.home-dash .hd-kra-question-title {
	flex: 1 1 auto;
	color: var(--hd-ink);
	line-height: 1.45;
}
.home-dash .hd-kra-foundation-empty {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .7rem;
	font-size: .82rem;
	color: var(--hd-muted);
	font-style: italic;
}


.home-dash .hd-kra-task-actions,
.home-dash .hd-jc-form-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 1rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* ---- Bottom nav ---- */
.home-dash .hd-kra-nav {
	display: flex;
	gap: .5rem;
	justify-content: flex-end;
	padding: .5rem 0;
	flex-wrap: wrap;
}


/* ===========================================================================
   TASK DETAIL (task_detail.html) — extends KRA-detail patterns
   ---------------------------------------------------------------------------
   Adds a tabbed content area (Training / Foundations / Procedures),
   experts chips, training list, and status/SOC badges specific to tasks.
   The shared KRA-detail classes (hd-kra-*) cover the hero, sidebar,
   details panel, accordion, bottom nav.
   =========================================================================== */

/* Monospaced fact value (e.g., SOC ratio) */
/* Published / Unpublished status pill */
.home-dash .hd-task-status {
	display: inline-flex;
	align-items: center;
	padding: .1rem .55rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
}
.home-dash .hd-task-status--unpublished {
	background: rgba(255,176,32,.14);
	color: #b45309;
	border: 1px solid rgba(255,176,32,.35);
}

/* Group link in the hero sub-line */

/* ---- Task Experts chips ---- */
.home-dash .hd-task-experts,
.home-dash .hd-jc-create-panel .hd-jc-form-actions,
.home-dash .hd-gmove-preview {
	margin-top: 1.25rem;
}
.home-dash .hd-task-experts-list,
.hd-modal .hd-stb-q-imgmodal-tools-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.home-dash .hd-task-expert-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .65rem;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	border: 1px solid var(--hd-blue-a18);
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 500;
	color: var(--hd-ink);
}

/* Sidebar list icon (sits before the title on each sibling task row) */

/* ===========================================================================
   TAB NAV for Training / Foundations / Procedures
   =========================================================================== */
.home-dash .hd-task-tabs {
	padding: 0 1rem;
	border-bottom: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
}
.home-dash .hd-task-tabnav {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: .1rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.home-dash .hd-task-tabnav-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .75rem 1rem;
	background: transparent;
	border: none;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-muted);
	cursor: pointer;
	border-radius: 8px 8px 0 0;
	transition: color .16s ease, background .16s ease;
	white-space: nowrap;
}
.home-dash .hd-task-tabnav-btn .bi {
	font-size: .92rem;
	color: var(--hd-muted);
	transition: color .16s ease;
}
.home-dash .hd-task-tabnav-btn.active {
	color: var(--hd-ink);
	font-weight: 700;
	background: var(--hd-surface);
}
.home-dash .hd-task-tabnav-btn:focus-visible {
	outline: 2px solid var(--hd-blue);
	outline-offset: -2px;
}

/* Count pill in tab button */
.home-dash .hd-task-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	padding: 0 .4rem;
	height: 18px;
	margin-left: .15rem;
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	font-size: .65rem;
	font-weight: 700;
	border-radius: 999px;
}

/* Tab body */
.home-dash .hd-task-tabs-body {
	padding: 1rem 1.15rem 1.25rem;
	overflow-y: auto;
	max-height: 620px;
}
.home-dash .hd-task-tab-lead {
	font-size: .85rem;
	color: var(--hd-muted);
	margin: 0 0 .85rem;
}

/* ===========================================================================
   TRAINING LIST
   =========================================================================== */
.home-dash .hd-task-training-list,
.home-dash .hd-jc-list,
.home-dash .hd-cert-list,
.home-dash .hd-qe-list,
.home-dash .hd-qed-list,
.home-dash .hd-qed-choices,
.home-dash .hd-agency-list,
.home-dash .hd-ind-list,
.home-dash .hd-grp-sub-list,
.home-dash .hd-app-list,
.home-dash .hd-lang-list,
.home-dash .hd-licmgr-list,
.home-dash .hd-lic-list,
.home-dash .hd-mfg-list,
.home-dash .hd-perm-admin-list,
.home-dash .hd-ugm-list,
.home-dash .hd-applist-list,
.home-dash .hd-cb-list,
.home-dash .hd-cb-lic-list,
.home-dash .hd-cb-applic-list,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-list,
.home-dash .hd-iss-orphan-list,
.home-dash .hd-iss-detail-trial-list,
.home-dash .hd-stb-q-match-preview-list,
.home-dash .hd-lst-items-list,
.home-dash .hd-lb-list,
.home-dash .hd-ob-questions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.home-dash .hd-task-training-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-task-training-num {
	flex-shrink: 0;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .78rem;
	font-weight: 700;
	color: var(--hd-muted);
	width: 44px;
}
.home-dash .hd-task-training-title {
	flex: 1 1 auto;
	font-size: .88rem;
	color: var(--hd-ink);
	line-height: 1.4;
	min-width: 0;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 575.98px) {
	.home-dash .hd-task-tabnav-btn { padding: .65rem .75rem; }
	.home-dash .hd-task-tabnav-btn span { font-size: .8rem; }
}


/* ===========================================================================
   FOUNDATION DETAIL (foundation_detail.html)
   ---------------------------------------------------------------------------
   Extends KRA/task-detail patterns with:
     • A "Q001" label badge inside the question accordion title
     • An "Answer" section treatment for the expanded accordion body
   =========================================================================== */

/* Question number label (e.g., "Q001") inside the accordion title */
.home-dash .hd-kra-question-label {
	display: inline-flex;
	align-items: center;
	padding: .12rem .5rem;
	margin-right: .45rem;
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	border-radius: 4px;
	flex-shrink: 0;
}

/* Answer block inside an expanded question */
.home-dash .hd-foundation-answer-label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .75rem;
	background: linear-gradient(135deg, rgba(31,122,58,.08), var(--hd-blue-a06));
	border-bottom: 1px solid var(--hd-line);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	width: 100%;
}
.home-dash .hd-foundation-answer-label .bi {
	color: #1f7a3a;
	font-size: .85rem;
}
.home-dash .hd-foundation-answer-text {
	padding: .75rem .9rem;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--hd-ink);
}


/* ===========================================================================
   PROCEDURE DETAIL (task_procedure_detail.html)
   ---------------------------------------------------------------------------
   Adds a nested-accordion pattern (issues inside steps) + trial-error
   cards with pass/fail indicators. Extends KRA-detail patterns.
   =========================================================================== */

/* Introductory lead text with icon above the issues accordion */
.home-dash .hd-kra-foundations-lead .bi {
	color: #b45309;
	margin-right: .3rem;
}

/* "No issues" positive state when a step has zero children */
.home-dash .hd-proc-no-issues {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem .8rem;
	background: rgba(31,122,58,.08);
	border: 1px solid rgba(31,122,58,.25);
	border-radius: 8px;
	color: #1f7a3a;
	font-size: .85rem;
	font-style: italic;
}
.home-dash .hd-proc-no-issues .bi {
	color: #1f7a3a;
	font-size: .95rem;
}

/* ===========================================================================
   NESTED ISSUES ACCORDION
   =========================================================================== */
.home-dash .hd-proc-issue-accordion {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-top: .65rem;
}
.home-dash .hd-proc-issue {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color .18s ease;
}
.home-dash .hd-proc-issue:hover { border-color: #cfd7e3; }
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	color: var(--hd-ink);
	font-size: .85rem;
	font-weight: 500;
	border: none;
	box-shadow: none;
}
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle::after {
	background: none;
	content: "\F285";
	font-family: 'bootstrap-icons';
	width: auto; height: auto;
	font-size: .8rem;
	color: var(--hd-muted);
	margin-left: auto;
	transition: transform .22s ease, color .18s ease;
}
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle:not(.collapsed) {
	background: linear-gradient(135deg, rgba(255,176,32,.08), rgba(201,27,27,.06));
	color: #b45309;
}
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle:not(.collapsed)::after {
	transform: rotate(90deg);
	color: #b45309;
}
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle:hover {
	background: linear-gradient(135deg, rgba(255,176,32,.05), rgba(201,27,27,.04));
}
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle:focus {
	box-shadow: 0 0 0 2px rgba(255,176,32,.35);
	z-index: 2;
}

.home-dash .hd-proc-issue-icon {
	flex-shrink: 0;
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 6px;
	background: rgba(255,176,32,.16);
	color: #b45309;
	font-size: .85rem;
	transition: background .18s ease, color .18s ease;
}
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle:not(.collapsed) .hd-proc-issue-icon {
	background: linear-gradient(135deg, #b45309, var(--hd-danger));
	color: #fff;
}
.home-dash .hd-proc-issue-label {
	flex-shrink: 0;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
	padding: .1rem .4rem;
	background: var(--hd-surface-2);
	border-radius: 4px;
}
.home-dash .hd-proc-issue-accordion .accordion-button.hd-proc-issue-toggle:not(.collapsed) .hd-proc-issue-label {
	background: rgba(180,83,9,.15);
	color: #b45309;
}
.home-dash .hd-proc-issue-body {
	padding: .75rem .9rem;
	background: var(--hd-surface-2);
	border-top: 1px solid var(--hd-line);
}

/* ===========================================================================
   TRIAL-ERROR CARDS (inside an expanded issue)
   =========================================================================== */
.home-dash .hd-proc-trials,
.home-dash .hd-stb-q-mc-list,
.home-dash .hd-stb-q-img-list,
.home-dash .hd-stb-q-match-list,
.home-dash .hd-stb-q-match-row-fields,
.home-dash .hd-stb-q-rank-list,
.home-dash .hd-stb-q-num-list,
.home-dash .hd-stb-q-upload-list,
.home-dash .hd-rb-sched,
.home-dash .hd-rb-sched-cycle {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}
.home-dash .hd-proc-trial {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-left-width: 3px;
	border-radius: 8px;
	overflow: hidden;
}

.home-dash .hd-proc-trial-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .45rem .7rem;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-proc-trial-num {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .7rem;
	font-weight: 700;
	color: var(--hd-muted);
}
.home-dash .hd-proc-trial-status {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .15rem .55rem;
	border-radius: 999px;
}

.home-dash .hd-proc-trial-body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .6rem .85rem .75rem;
}
.home-dash .hd-proc-trial-field,
.home-dash .hd-fd-hero-text,
.home-dash .hd-fd-nav-group,
.home-dash .hd-iss-field,
.home-dash .hd-stb-q-overview-meta,
.home-dash .hd-inb-meta-row {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.home-dash .hd-proc-trial-field-label {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-proc-trial-field-value {
	font-size: .88rem;
	color: var(--hd-ink);
	line-height: 1.45;
}

.home-dash .hd-proc-trial-empty {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: 7px;
	font-size: .82rem;
	color: var(--hd-muted);
	font-style: italic;
}

/* =============================================================================
   Tile launcher grid — hd-tile-* (settings_base.html, language_builder.html,
   osi_utilities.html, and any future tile-launcher pages)
   ============================================================================= */
.home-dash .hd-settings-grid-wrap {
	padding: 1rem 0 .5rem;
}
.home-dash .hd-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}
@media (min-width: 1400px) {
	.home-dash .hd-tile-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

/* Tile = anchor card. Three-row layout: thumb / label / go-arrow chip. */
.home-dash .hd-tile {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: stretch;
	min-height: 180px;
	padding: 1.25rem 1rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	color: var(--hd-ink);
	text-decoration: none;
	overflow: hidden;
	transition:
		transform .2s cubic-bezier(.22,.9,.32,1),
		box-shadow .2s ease,
		border-color .2s ease,
		background .2s ease;
}
.home-dash .hd-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
	z-index: 0;
}
.home-dash .hd-tile::after {
	content: "";
	position: absolute;
	left: 0; top: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--hd-lime), var(--hd-blue));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s cubic-bezier(.22,.9,.32,1);
	z-index: 1;
}
.home-dash .hd-tile:hover,
.home-dash .hd-tile:focus-visible {
	border-color: var(--hd-blue-soft);
	box-shadow: var(--hd-shadow-md);
	color: var(--hd-ink);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-tile:focus-visible {
	box-shadow: 0 0 0 3px var(--hd-blue-a25), var(--hd-shadow-md);
}
.home-dash .hd-tile:active,
.home-dash .hd-emp-mgr-search-submit:active {
	transform: translateY(1px);
}

/* Thumb area — image lives in a soft surface tile to keep PNGs grounded */
.home-dash .hd-tile-thumb {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 88px;
	padding: .35rem;
	margin-bottom: .9rem;
	background: linear-gradient(135deg, var(--hd-surface-2), #eef0f4);
	border-radius: var(--hd-radius-sm);
	transition: background .25s ease;
}
.home-dash .hd-tile:hover .hd-tile-thumb,
.home-dash .hd-tile:focus-visible .hd-tile-thumb,
.home-dash .hd-perm-check:has(input:checked) {
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
}
.home-dash .hd-tile-img {
	max-height: 64px;
	max-width: 80%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .25s cubic-bezier(.22,.9,.32,1);
}
.home-dash .hd-tile:hover .hd-tile-img,
.home-dash .hd-tile:focus-visible .hd-tile-img {
	transform: scale(1.04);
}

/* Bottom row: label on the left, "go" arrow chip on the right */
.home-dash .hd-tile-label {
	position: relative;
	z-index: 1;
	display: block;
	font-size: 1rem;
	font-weight: 600;
	/* Themed ink, not --hd-navy: --hd-navy is a fixed near-black with no
	   dark-mode variant, so it rendered black-on-dark and the labels
	   disappeared in dark mode. --hd-ink flips light in dark mode. */
	color: var(--hd-ink);
	line-height: 1.3;
	letter-spacing: -.005em;
	padding-right: 2rem;
}
.home-dash .hd-tile-go {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	color: var(--hd-blue);
	transition:
		background .2s ease,
		border-color .2s ease,
		color .2s ease,
		transform .25s cubic-bezier(.22,.9,.32,1);
}
.home-dash .hd-tile:hover .hd-tile-go,
.home-dash .hd-tile:focus-visible .hd-tile-go {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	border-color: transparent;
	color: #fff;
	transform: translateX(2px);
}

/* Dark mode — soften the thumb tile */
[data-bs-theme=dark] .home-dash .hd-tile-thumb {
	background: linear-gradient(135deg, var(--hd-surface-2), #11141a);
}
/* Dark mode hover — the base hover tint behind the icon (--hd-lime-a12 /
   --hd-blue-a12, 12% alpha) is far too faint over the near-black thumb.
   Swap the whole panel to the SOLID brand gradient (the same purple→blue
   used on the tile's top stripe) so the thumb stays a fully opaque panel
   and unmistakably lights up when the tile is hovered/focused. */
[data-bs-theme=dark] .home-dash .hd-tile:hover .hd-tile-thumb,
[data-bs-theme=dark] .home-dash .hd-tile:focus-visible .hd-tile-thumb {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	box-shadow: inset 0 1px 0 var(--hd-white-a18);
}
/* Dark mode — the page body is #212529; the token --hd-surface (#1e242c)
   is actually DARKER than the body, so tiles sink into the background.
   Lift the tile onto an elevated surface and firm up the border so the
   cards read as raised. (Hover feedback is carried by the ::after top
   stripe + shadow, so the hover border is left to the base rule.) */
[data-bs-theme=dark] .home-dash .hd-tile {
	background: #2a313c;
	border-color: #3b4654;
}
/* Dark mode hover — the base hover (--hd-blue-soft border + dark shadow)
   is nearly invisible on a dark bg. Lift the surface a clear step, give
   it a bright --hd-blue edge and a deeper shadow so the hovered tile
   plainly separates from its neighbours. */
[data-bs-theme=dark] .home-dash .hd-tile:hover,
[data-bs-theme=dark] .home-dash .hd-tile:focus-visible {
	background: #333c49;
	border-color: var(--hd-blue);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
[data-bs-theme=dark] .home-dash .hd-tile:focus-visible {
	box-shadow: 0 0 0 3px var(--hd-blue-a25), 0 8px 24px rgba(0, 0, 0, .55);
}

/* Narrow viewport — tighten the gap and let tiles get smaller */
@media (max-width: 575.98px) {
	.home-dash .hd-tile-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: .65rem;
	}
	.home-dash .hd-tile {
		min-height: 150px;
		padding: 1rem .85rem .85rem;
	}
	.home-dash .hd-tile-thumb { min-height: 72px; margin-bottom: .65rem; }
	.home-dash .hd-tile-img { max-height: 52px; }
	.home-dash .hd-tile-label { font-size: .92rem; }
}

/* =============================================================================
   ============================================================================
   REBUILD BLOCK — page-specific CSS families that were missing from main.css
   ============================================================================
   Added in a single batch because the local main.css fell out of sync with
   the templates over many sessions. Everything in this block was previously
   built piece-by-piece in earlier sessions and is being restored here.
   ============================================================================= */

/* =============================================================================
   Shared primitives — used by many pages
   ============================================================================= */

/* ---- Field-affix (currency-prefix etc.) ---- */
.hd-field-affix,
.home-dash .hd-cc-input-prefix {
	position: relative;
	display: flex;
	align-items: stretch;
}
.hd-field-affix .hd-field-prefix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0 .65rem;
	background: linear-gradient(180deg, var(--hd-surface-2), #eef2f8);
	border: 1px solid var(--hd-line);
	border-right: 0;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	font-weight: 700;
	font-size: .9rem;
	color: var(--hd-ink);
	letter-spacing: .02em;
}
.hd-field-affix .hd-field-input--with-prefix,
.hd-modal .hd-field-affix .hd-field-input--with-prefix {
	flex: 1 1 auto;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	min-width: 0;
}
.hd-modal .hd-field-affix { display: flex; align-items: stretch; }
.hd-modal .hd-field-affix .hd-field-prefix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0 .65rem;
	background: linear-gradient(180deg, var(--hd-surface-2), var(--hd-blue-a06));
	border: 1px solid var(--hd-line);
	border-right: 0;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	font-weight: 700;
	font-size: .9rem;
	color: var(--hd-blue);
}

/* ---- Field-level error block ---- */
.home-dash .hd-field-error {
	display: flex;
	align-items: flex-start;
	gap: .35rem;
	margin-top: .35rem;
	padding: .35rem .55rem;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .25);
	border-radius: 6px;
	font-size: .78rem;
	line-height: 1.4;
	color: #991b1b;
}
.home-dash .hd-field-error::before {
	content: "\F33A";
	font-family: "bootstrap-icons";
	font-size: .85rem;
	line-height: 1.4;
	flex: 0 0 auto;
	color: #dc3545;
}

/* ---- Inline help-icon next to labels ---- */
.home-dash .hd-field-help-icon {
	margin-left: .25rem;
	color: var(--hd-blue);
	font-size: .82rem;
	cursor: help;
}

/* ---- Full-width help text below an input column ---- */
.home-dash .hd-field-help.hd-field-help--full {
	display: block;
	width: 100%;
	margin-top: .5rem;
	align-items: initial;
	gap: 0;
}

/* ---- Toggle switch primitive ---- */
.home-dash .hd-toggle {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: .65rem .85rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.home-dash .hd-toggle:hover,
.home-dash .hd-teb-q:hover,
.home-dash .hd-jc-list-item:hover,
.home-dash .hd-jc-track-item:hover,
.home-dash .hd-jc-note:hover,
.home-dash .hd-cert-list-item:hover,
.home-dash .hd-agency-list-item:hover,
.home-dash .hd-ind-list-item:hover,
.home-dash .hd-grp-sub-item:hover,
.home-dash .hd-grp-member:hover,
.home-dash .hd-app-list-item:hover,
.home-dash .hd-feat-list-item:hover,
.home-dash .hd-lang-row:hover,
.home-dash .hd-licmgr-list-item:hover,
.home-dash .hd-licmgr-table-row:hover,
.home-dash .hd-lic-row:hover,
.home-dash .hd-mfg-list-item:hover,
.home-dash .hd-perm-admin-item:hover,
.home-dash .hd-ugm-row:hover,
.home-dash .hd-eq-task-row:hover,
.home-dash .hd-applist-row:hover,
.home-dash .hd-cb-list-item:hover,
.home-dash .hd-cb-lic-row:hover,
.home-dash .hd-cb-applic-row:hover {
	border-color: var(--hd-blue-soft);
	background: var(--hd-surface-2);
}
.home-dash .hd-toggle:has(.hd-toggle-input:checked),
.home-dash .hd-field-file:hover,
.home-dash .hd-field-file:focus-within,
.home-dash .hd-ugm-row.is-primary {
	border-color: var(--hd-blue);
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
}
.home-dash .hd-toggle:has(.hd-toggle-input:focus-visible) {
	box-shadow: 0 0 0 3px var(--hd-blue-a18);
	border-color: var(--hd-blue);
}
.home-dash .hd-toggle-input,
.home-dash .hd-field-file-input,
.home-dash .hd-cat-toggle-input,
.home-dash .hd-crb-image-file,
.home-dash .hd-inb-segment-input {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.home-dash .hd-toggle-track {
	flex-shrink: 0;
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	margin-top: .15rem;
	border-radius: 999px;
	background: var(--hd-line);
	transition: background .22s ease;
}
.home-dash .hd-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .22s cubic-bezier(.22,.9,.32,1);
}
.home-dash .hd-toggle-input:checked + .hd-toggle-track {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
}
.home-dash .hd-toggle-input:checked + .hd-toggle-track .hd-toggle-thumb {
	transform: translateX(16px);
}
.home-dash .hd-toggle-text {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}
.home-dash .hd-toggle-title,
.home-dash .hd-field-file-title,
.home-dash .hd-crb-marketplace-title {
	font-size: .9rem;
	font-weight: 600;
	color: var(--hd-ink);
	line-height: 1.3;
}
.home-dash .hd-toggle-help,
.home-dash .hd-crb-marketplace-caption {
	font-size: .78rem;
	color: var(--hd-muted);
	line-height: 1.45;
}

/* ---- File input primitive ---- */
.home-dash .hd-field-file {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .85rem 1rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.home-dash .hd-field-file-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	color: #fff;
	font-size: 1rem;
}.home-dash .hd-field-file-hint,
.home-dash .hd-grp-member-role {
	font-size: .76rem;
	color: var(--hd-muted);
}

/* ---- Kebab actions-menu primitive ---- */
.home-dash .hd-actions-menu {
	position: relative;
	display: inline-flex;
}
.home-dash .hd-actions-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--hd-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.home-dash .hd-actions-trigger:hover,
.home-dash .hd-actions-trigger:focus-visible,
.home-dash .hd-actions-trigger[aria-expanded="true"],
.home-dash .hd-qed-json-copy:hover,
.home-dash .hd-qed-json-copy:focus-visible,
.home-dash .hd-grp-sub-item-action:hover,
.home-dash .hd-grp-sub-item-action:focus-visible,
.home-dash .hd-feat-row-action:hover,
.home-dash .hd-feat-row-action:focus-visible,
.home-dash .hd-lang-action:hover,
.home-dash .hd-lang-action:focus-visible,
.home-dash .hd-applist-action:hover,
.home-dash .hd-applist-action:focus-visible,
.home-dash .hd-cat-action:hover,
.home-dash .hd-cat-action:focus-visible,
.home-dash .hd-cb-lic-action:hover,
.home-dash .hd-cb-lic-action:focus-visible,
.home-dash .hd-kl-action:hover,
.home-dash .hd-kl-action:focus-visible,
.home-dash .hd-news-action:hover,
.home-dash .hd-news-action:focus-visible {
	background: var(--hd-surface-2);
	border-color: var(--hd-line);
	color: var(--hd-blue);
	outline: none;
}

/* Hero-context kebab — white icon on the dark gradient hero (.hd-hero) */
.home-dash .hd-hero .hd-actions-trigger {
	color: #fff;
	border-color: var(--hd-white-a35);
	background: var(--hd-white-a06);
}
.home-dash .hd-actions-list {
	min-width: 200px;
	padding: .35rem;
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	box-shadow: var(--hd-shadow-md);
	background: var(--hd-surface);
}
.home-dash .hd-actions-item {
	display: flex;
	align-items: center;
	gap: .55rem;
	width: 100%;
	padding: .5rem .65rem;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--hd-ink);
	font-size: .85rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.home-dash .hd-actions-item:hover,
.home-dash .hd-actions-item:focus-visible {
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	color: var(--hd-ink);
	outline: none;
}.home-dash .hd-actions-item .bi,
.home-dash .hd-ugm-row-icon,
.home-dash .hd-kb-obs-pill-link > .bi,
.home-dash .hd-tb-expert-pill-link > .bi,
.home-dash .hd-iss-trial-empty .bi {
	color: var(--hd-blue);
	font-size: .9rem;
	flex: 0 0 auto;
}

/* ---- Inline-search primitives (used by AJAX search inputs) ---- */
.home-dash .hd-inline-search-control,
.home-dash .hd-crb-cost-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.home-dash .hd-inline-search-control .hd-inline-search-icon,
.home-dash .hd-cl-search-icon {
	position: absolute;
	left: .85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hd-muted);
	pointer-events: none;
	font-size: .9rem;
}
.home-dash .hd-inline-search-control .hd-inline-search-input {
	padding-left: 2.4rem;
	padding-right: 2.4rem;
	width: 100%;
}
.home-dash .hd-inline-search-clear {
	position: absolute;
	right: .35rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hd-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.home-dash .hd-inline-search-clear:hover,
.home-dash .hd-inline-search-clear:focus-visible,
.home-dash .hd-emp-search-clear:hover,
.home-dash .hd-emp-search-clear:focus-visible {
	background: var(--hd-surface-2);
	color: #b91c1c;
	outline: none;
}.home-dash .hd-inline-search-results {
	position: absolute;
	z-index: 1050;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	box-shadow: var(--hd-shadow-md);
}

/* ---- Settings shell extras (hd-settings-tabs / hd-settings-body / hd-utilities-*) ---- */
.home-dash .hd-settings-tabs,
.home-dash .hd-utilities-tabs { margin-top: .25rem; margin-bottom: 1rem; }
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}

/* =============================================================================
   Job Class Builder — hd-jc-*
   ============================================================================= */
@media (min-width: 768px) {
}

.home-dash .hd-jc-sidebar,
.home-dash .hd-cert-sidebar,
.home-dash .hd-agency-sidebar,
.home-dash .hd-ind-sidebar,
.home-dash .hd-app-select-panel,
.home-dash .hd-licmgr-sidebar,
.home-dash .hd-mfg-select-panel,
.home-dash .hd-perm-admin-panel,
.home-dash .hd-cb-select-panel {
	position: sticky;
	top: 1rem;
	max-height: calc(100vh - 2rem);
	display: flex;
	flex-direction: column;
}
.home-dash .hd-jc-sidebar-body,
.home-dash .hd-cert-sidebar-body,
.home-dash .hd-agency-sidebar-body,
.home-dash .hd-ind-sidebar-body,
.home-dash .hd-app-select-body,
.home-dash .hd-licmgr-sidebar-body,
.home-dash .hd-mfg-select-body {
	overflow-y: auto;
	padding: .5rem .65rem .75rem;
	flex: 1 1 auto;
	min-height: 0;
}
.home-dash .hd-jc-sidebar-add .bi,
.home-dash .hd-cert-sidebar-add .bi,
.home-dash .hd-agency-sidebar-add .bi,
.home-dash .hd-ind-sidebar-add .bi,
.home-dash .hd-app-select-add .bi,
.home-dash .hd-feat-select-add .bi,
.home-dash .hd-mfg-select-add .bi,
.home-dash .hd-cat-default-toggle .bi,
.home-dash .hd-cat-default-radio .bi,
.home-dash .hd-cb-select-add .bi,
.home-dash .hd-iss-list-head-action .bi,
.home-dash .hd-stb-q-panel-action .bi,
.home-dash .hd-stb-q-overview-action .bi,
.home-dash .hd-stb-q-update-action .bi,
.home-dash .hd-stb-q-survey-update-action .bi,
.hd-modal .hd-stb-q-levels-list > li { font-size: .92rem; }

.home-dash .hd-jc-list-item,
.home-dash .hd-cert-list-item,
.home-dash .hd-agency-list-item,
.home-dash .hd-ind-list-item {
	position: relative;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.home-dash .hd-jc-list-item::before,
.home-dash .hd-cert-list-item::before,
.home-dash .hd-agency-list-item::before,
.home-dash .hd-ind-list-item::before,
.home-dash .hd-app-list-item::before,
.home-dash .hd-licmgr-list-item::before,
.home-dash .hd-mfg-list-item::before,
.home-dash .hd-perm-admin-item::before,
.home-dash .hd-cb-list-item::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: transparent;
	transition: background .18s ease;
}
.home-dash .hd-jc-list-item:hover::before,
.home-dash .hd-cert-list-item:hover::before,
.home-dash .hd-agency-list-item:hover::before,
.home-dash .hd-ind-list-item:hover::before,
.home-dash .hd-app-list-item:hover::before,
.home-dash .hd-licmgr-list-item:hover::before,
.home-dash .hd-mfg-list-item:hover::before,
.home-dash .hd-perm-admin-item:hover::before,
.home-dash .hd-cb-list-item:hover::before { background: var(--hd-blue-soft); }
.home-dash .hd-jc-list-item.is-selected,
.home-dash .hd-cert-list-item.is-selected,
.home-dash .hd-agency-list-item.is-selected,
.home-dash .hd-ind-list-item.is-selected {
	border-color: var(--hd-blue);
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	box-shadow: var(--hd-shadow-xs);
}
.home-dash .hd-jc-list-item.is-selected::before,
.home-dash .hd-cert-list-item.is-selected::before,
.home-dash .hd-agency-list-item.is-selected::before,
.home-dash .hd-ind-list-item.is-selected::before,
.home-dash .hd-app-list-item.is-selected::before,
.home-dash .hd-licmgr-list-item.is-selected::before,
.home-dash .hd-mfg-list-item.is-selected::before,
.home-dash .hd-perm-admin-item.is-selected::before,
.home-dash .hd-ugm-row.is-primary::before,
.home-dash .hd-cb-list-item.is-selected::before {
	background: var(--hd-blue);
	width: 3px;
}
.home-dash .hd-jc-list-item.sortable_list_item,
.home-dash .hd-bs-draggable .hd-bs-grip,
#list-grouping-container .hd-kb-list-row.grouping-item { cursor: grab; }
.home-dash .hd-jc-list-item.ui-sortable-helper {
	box-shadow: var(--hd-shadow-md);
	transform: rotate(.5deg);
}
.home-dash .hd-jc-list-row,
.home-dash .hd-cert-list-row,
.home-dash .hd-agency-list-row,
.home-dash .hd-ind-list-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .7rem .55rem .85rem;
}
.home-dash .hd-jc-list-link,
.home-dash .hd-cert-list-link,
.home-dash .hd-agency-list-link,
.home-dash .hd-ind-list-link {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-width: 0;
	color: var(--hd-ink);
	text-decoration: none;
	font-size: .88rem;
	line-height: 1.3;
}
.home-dash .hd-jc-list-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.65rem;
	height: 1.65rem;
	padding: 0 .35rem;
	border-radius: 6px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	font-size: .72rem;
	font-weight: 700;
	color: var(--hd-ink);
	letter-spacing: .02em;
}
.home-dash .hd-jc-list-title,
.home-dash .hd-cert-list-title,
.home-dash .hd-agency-list-title,
.home-dash .hd-ind-list-title,
.home-dash .hd-emp-mgr-filter-option span,
.home-dash .hd-app-list-title,
.home-dash .hd-mfg-list-name,
.home-dash .hd-perm-admin-name,
.home-dash .hd-cb-list-name,
.home-dash .hd-pb-dim-filter-item-label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-jc-list-delete {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	opacity: 0;
}
.home-dash .hd-jc-list-delete:hover,
.home-dash .hd-jc-list-delete:focus-visible,
.home-dash .hd-jc-note-delete:hover,
.home-dash .hd-jc-note-delete:focus-visible,
.home-dash .hd-cert-list-delete:hover,
.home-dash .hd-cert-list-delete:focus-visible,
.home-dash .hd-cl-action:hover,
.home-dash .hd-cl-action:focus-visible,
.home-dash .hd-agency-list-delete:hover,
.home-dash .hd-agency-list-delete:focus-visible,
.home-dash .hd-ind-list-delete:hover,
.home-dash .hd-ind-list-delete:focus-visible,
.home-dash .hd-grp-member-remove-btn:hover,
.home-dash .hd-grp-member-remove-btn:focus-visible,
.home-dash .hd-mfg-list-delete:hover,
.home-dash .hd-mfg-list-delete:focus-visible,
.home-dash .hd-perm-admin-remove:hover,
.home-dash .hd-perm-admin-remove:focus-visible,
.home-dash .hd-ugm-action.is-danger:hover,
.home-dash .hd-ugm-action.is-danger:focus-visible,
.home-dash .hd-eq-task-remove:hover,
.home-dash .hd-eq-task-remove:focus-visible {
	background: rgba(220, 53, 69, .10);
	border-color: rgba(220, 53, 69, .35);
	color: #b91c1c;
	outline: none;
}


.home-dash .hd-jc-form .hd-field-textarea { min-height: 6.5rem; resize: none; }
.home-dash .hd-jc-form-actions .hd-btn-primary {
	-webkit-appearance: none;
	appearance: none;
}

/* Edit button sits inside the blue .hd-panel-head — use the white-tint
   chrome (same as .hd-kb-iconbtn--dark) so it reads on the dark/blue bar. */
.home-dash .hd-jc-track-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 8px;
	color: var(--hd-white-a92);
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}
.home-dash .hd-jc-track-edit:hover,
.home-dash .hd-jc-track-edit:focus-visible {
	background: var(--hd-white-a18);
	border-color: var(--hd-white-a35);
	color: #fff;
	outline: none;
}
.home-dash .hd-jc-warning {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .65rem .85rem;
	margin-bottom: .85rem;
	/* Matches .hd-wsch-warning / .hd-su-alert — the dark-mode override is
	   shared with them below. */
	background: rgba(201, 27, 27, .06);
	border: 1px solid rgba(201, 27, 27, .2);
	border-radius: 10px;
	color: #7f1d1d;
	font-size: .85rem;
	line-height: 1.45;
}
.home-dash .hd-jc-warning .bi { color: var(--hd-danger); flex: 0 0 auto; margin-top: .15rem; }

.home-dash .hd-jc-track-list,
.home-dash .hd-feat-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column;
	gap: .4rem;
}
.home-dash .hd-jc-track-item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .8rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
	transition: background .18s ease, border-color .18s ease;
}
.home-dash .hd-jc-track-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 .35rem;
	border-radius: 6px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	color: var(--hd-ink);
	font-size: .72rem;
	font-weight: 700;
}
.home-dash .hd-jc-track-title {
	color: var(--hd-ink);
	font-size: .9rem;
	line-height: 1.4;
}

.home-dash .hd-jc-notes-list {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	margin-bottom: 1rem;
}
.home-dash .hd-jc-note {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .7rem .85rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	transition: background .18s ease, border-color .18s ease;
}
.home-dash .hd-jc-note-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: var(--hd-blue);
	font-size: .95rem;
}
.home-dash .hd-jc-note-text {
	color: var(--hd-ink);
	white-space: pre-wrap;
	word-break: break-word;
}
.home-dash .hd-jc-note-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
	font-size: .74rem;
	color: var(--hd-muted);
}
/* .hd-jc-note-author + perm-check label styled with the --hd-ink rule above */
.home-dash .hd-jc-note-delete {
	flex: 0 0 auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}

.home-dash .hd-jc-note-composer {
	display: flex;
	align-items: stretch;
	gap: .5rem;
	padding: .6rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
}
.home-dash .hd-jc-note-textarea {
	flex: 1 1 auto;
	min-height: 2.5rem;
	resize: none;
}
.home-dash .hd-jc-note-save { flex: 0 0 auto; align-self: flex-end; }
.home-dash .hd-jc-notes-empty { padding: 1.5rem 1rem; margin-bottom: 1rem; }

.hd-jc-toast {
	position: fixed;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: none;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.1rem;
	background: linear-gradient(135deg, #dc3545, #b91c1c);
	color: #fff;
	border-radius: 10px;
	box-shadow: var(--hd-shadow-md);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .01em;
	max-width: min(90vw, 460px);
}
.hd-jc-toast .bi,
.home-dash .hd-su-alert .bi { font-size: 1rem; flex: 0 0 auto; color: var(--hd-danger); }

.hd-modal.hd-jc-modal .hd-field-label,
.hd-modal.hd-cert-modal .hd-field-label,
.hd-modal.hd-agency-modal .hd-field-label,
.hd-modal.hd-ind-modal .hd-field-label,
.hd-modal.hd-app-modal .hd-field-label,
.hd-modal.hd-feat-modal .hd-field-label,
.hd-modal.hd-mfg-modal .hd-field-label,
.hd-modal.hd-empform-modal .hd-field-label,
.home-dash .hd-emp-pagination-controls,
.home-dash .hd-mr-fullsize-nav,
.home-dash .hd-mr-fullsize-tools,
.home-dash .hd-rb-section-actions,
.home-dash .hd-inb-narration .hd-field-label {
	display: inline-flex; align-items: center; gap: .35rem;
}
.hd-modal.hd-jc-modal .hd-jc-modal-footer,
.hd-modal.hd-cert-modal .hd-cert-modal-footer,
.hd-modal.hd-agency-modal .hd-agency-modal-footer,
.hd-modal.hd-ind-modal .hd-ind-modal-footer,
.hd-modal.hd-emp-mgr-modal .hd-emp-mgr-bulk-footer,
.hd-modal.hd-grp-modal .hd-grp-modal-footer,
.hd-modal.hd-app-modal .hd-app-modal-footer,
.hd-modal.hd-feat-modal .hd-feat-modal-footer,
.hd-modal.hd-lic-modal .hd-lic-modal-footer,
.hd-modal.hd-mfg-modal .hd-mfg-modal-footer {
	margin: 1.1rem -1.15rem -1.15rem;
	margin-top: 1.1rem;
}
.hd-modal.hd-jc-delete-modal .hd-jc-delete-warn {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .9rem 0 0;
	padding: .55rem .8rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: 8px;
	font-size: .82rem;
	color: var(--hd-muted);
}
.hd-modal.hd-jc-delete-modal .hd-jc-delete-error {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: 0;
	padding: .8rem .95rem;
	background: rgba(201,27,27,.08);
	border: 1px solid rgba(201,27,27,.30);
	border-radius: 10px;
	color: #991b1b;
	font-size: .92rem;
	line-height: 1.45;
}
.hd-modal.hd-jc-delete-modal .hd-jc-delete-error .bi {
	color: var(--hd-danger); flex: 0 0 auto;
	font-size: 1.05rem; margin-top: .05rem;
}

@media (max-width: 991.98px) {
	.home-dash .hd-jc-sidebar,
	.home-dash .hd-cert-sidebar,
	.home-dash .hd-agency-sidebar,
	.home-dash .hd-ind-sidebar,
	.home-dash .hd-app-select-panel,
	.home-dash .hd-licmgr-sidebar,
	.home-dash .hd-mfg-select-panel,
	.home-dash .hd-perm-admin-panel,
	.home-dash .hd-cb-select-panel { position: static; max-height: none; }
	.home-dash .hd-jc-sidebar-body,
	.home-dash .hd-cert-sidebar-body,
	.home-dash .hd-agency-sidebar-body,
	.home-dash .hd-ind-sidebar-body,
	.home-dash .hd-app-select-body,
	.home-dash .hd-mfg-select-body { max-height: 320px; }
}

/* Job Class create page (utilities_base settings shell) */
.home-dash.hd-jc-create { padding: 1.25rem 0; }
@media (min-width: 768px) {
}

/* =============================================================================
   Certification Builder — hd-cert-*
   ============================================================================= */
@media (min-width: 768px) {
}.home-dash .hd-cert-list-delete-form,
.home-dash .hd-agency-list-delete-form,
.home-dash .hd-ind-list-delete-form,
.home-dash .hd-cb-radio .form-check-input,
.home-dash .hd-teb-combo-value { flex: 0 0 auto; margin: 0; }
.home-dash .hd-cert-list-delete,
.home-dash .hd-agency-list-delete,
.home-dash .hd-ind-list-delete {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; padding: 0;
	border-radius: 6px; color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	opacity: 0; cursor: pointer;
}


/* Legacy Course Import — form actions row */

/* ==============================================================
   QUESTION EXPLORER (.hd-qe)
   ============================================================== */
.home-dash .hd-qe-main > [class*="col-"] > .hd-panel,
.home-dash .hd-qed-main > [class*="col-"] > .hd-panel,
.home-dash .hd-ke-main > [class*="col-"] > .hd-panel,
.home-dash .hd-gm-main > [class*="col-"] > .hd-panel,
.home-dash .hd-cr-grid > [class*="col-"] > .hd-panel,
.home-dash .hd-prog-main > [class*="col-"] > .hd-panel {
	flex: 1 1 auto; width: 100%; min-width: 0;
	display: flex; flex-direction: column;
}

/* ----- Questions list panel ----- */
.home-dash .hd-qe-list-body,
.home-dash .hd-qed-list-body {
	padding: .5rem;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 70vh;
	overflow-y: auto;
}

/* List link — full row, two-line layout (type label above, question text below) */
.home-dash .hd-qe-list-link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-ink);
	text-decoration: none;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.home-dash .hd-qe-list-link:hover,
.home-dash .hd-qe-list-link:focus-visible {
	border-color: #cfd7e3;
	box-shadow: var(--hd-shadow-xs);
	color: var(--hd-blue);
	transform: translateX(2px);
	outline: none;
}
.home-dash .hd-qe-list-link.is-selected:hover {
	color: #fff;
	transform: none;
}

/* Type pill above the question text */
.home-dash .hd-qe-list-type {
	display: inline-flex;
	align-items: center;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	line-height: 1;
}

.home-dash .hd-qe-list-text {
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -.005em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Empty state inside the list panel — sits centered */

/* ----- Detail panel ----- */

.home-dash .hd-qe-detail {
	margin: 0;
	display: flex; flex-direction: column;
	gap: 1rem;
}
.home-dash .hd-qe-detail-row {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .85rem 1rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-qe-detail-label,
.home-dash .hd-qed-meta-label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-qe-detail-value {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--hd-ink);
	word-break: break-word;
}

.home-dash .hd-qe-detail-empty,
.home-dash .hd-ke-detail-empty,
.home-dash .hd-gt-empty,
.home-dash .hd-cr-empty,
.home-dash .hd-grp-sub-empty,
.home-dash .hd-lang-empty,
.home-dash .hd-lic-empty,
.home-dash .hd-ugm-empty,
.home-dash .hd-applist-empty,
.home-dash .hd-cat-empty { padding: 2.5rem 1.25rem; }

/* ==============================================================
   QUESTION EXPLORER — DETAIL VIEW (.hd-qed)
   ============================================================== */

/* ----- LEFT: Question list panel ----- */

/* "+" CTA in panel head — same shape as other sidebar add buttons */
.home-dash .hd-qed-list-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 7px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	text-decoration: none;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.home-dash .hd-qed-list-add:hover,
.home-dash .hd-qed-list-add:focus-visible {
	background: var(--hd-blue-a18);
	color: var(--hd-blue);
	transform: translateY(-1px);
	outline: none;
}


/* Row wrapper holds the link + the inline action cluster */
.home-dash .hd-qed-list-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .65rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.home-dash .hd-qed-list-row.is-selected:hover { transform: none; }

/* Link takes the available space, truncates */
.home-dash .hd-qed-list-link {
	flex: 1 1 auto; min-width: 0;
	color: inherit;
	text-decoration: none;
	font-size: .88rem;
	font-weight: 500;
}

.home-dash .hd-qed-list-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.35;
}

/* Inline action icons — visible-hover-child reveals them on row hover */
.home-dash .hd-qed-list-actions {
	display: flex;
	align-items: center;
	gap: .15rem;
	flex-shrink: 0;
}
.home-dash .hd-qed-list-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--hd-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.home-dash .hd-qed-list-action.is-danger:hover,
.home-dash .hd-tl-stat--danger .hd-tl-stat-icon {
	background: rgba(201, 27, 27, .12);
	color: var(--hd-danger);
}
.home-dash .hd-qed-list-row.is-selected .hd-qed-list-action.is-danger:hover {
	background: rgba(255, 200, 200, .25);
	color: #ffd6d6;
}

/* Per-row delete form is just a wrapper — no visual */
.home-dash .hd-qed-list-delete-form,
.home-dash .hd-kb-acc-head-form {
	margin: 0; padding: 0;
	display: inline-flex;
}


/* ----- MIDDLE: Question Display panel ----- */

/* Meta rows (Question / Type) */
.home-dash .hd-qed-meta {
	margin: 0;
	display: flex; flex-direction: column;
	gap: .85rem;
}
.home-dash .hd-qed-meta-row {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: .65rem .8rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-qed-meta-value {
	margin: 0;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--hd-ink);
	word-break: break-word;
}

/* Divider between meta block and the type-specific content below */
.home-dash .hd-qed-display-divider {
	height: 1px;
	background: var(--hd-line);
	margin: 1rem 0;
}

/* Choice list (multiple choice / all that apply) */
.home-dash .hd-qed-choice {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	font-size: .9rem;
	color: var(--hd-ink);
	line-height: 1.4;
}
.home-dash .hd-qed-choice.is-correct {
	background: rgba(31, 122, 58, .06);
	border-color: rgba(31, 122, 58, .35);
}
.home-dash .hd-qed-choice-marker {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--hd-blue-a12);
	color: var(--hd-muted);
	font-size: .85rem;
	margin-top: 1px;
}
.home-dash .hd-qed-choice.is-correct .hd-qed-choice-marker {
	background: #1f7a3a;
	color: #fff;
}
.home-dash .hd-qed-choice-bullet {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--hd-muted);
	display: block;
}
.home-dash .hd-qed-choice-num {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--hd-muted);
}

/* Matching grid */
.home-dash .hd-qed-match {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: .5rem .75rem;
	margin-top: .25rem;
}
.home-dash .hd-qed-match-header {
	font-weight: 700;
	color: var(--hd-ink);
	padding: .5rem .75rem;
	border-bottom: 2px solid var(--hd-blue);
	font-size: .85rem;
	letter-spacing: -.005em;
}
.home-dash .hd-qed-match-cell {
	display: flex;
	align-items: center;
	padding: .65rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	font-size: .88rem;
	color: var(--hd-ink);
	line-height: 1.4;
}

/* Image-target form */
.home-dash .hd-qed-img-form,
.home-dash .hd-grp-tab-panel-body,
.home-dash .hd-stb-q-update-section {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.home-dash .hd-qed-img-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.home-dash .hd-qed-img {
	display: block;
	max-width: 100%;
	height: auto;
}
.home-dash .hd-qed-img-canvas {
	position: absolute;
	top: 0; left: 0;
	cursor: crosshair;
}
.home-dash .hd-qed-img-controls {
	display: flex;
	align-items: center;
	gap: .65rem;
	flex-wrap: wrap;
	padding: .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-qed-img-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 auto 0 0;
	font-size: .85rem;
	color: var(--hd-ink);
	cursor: pointer;
}

/* Generic note banner — for placeholder messages (true/false, unknown) */
.home-dash .hd-qed-note {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem .9rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-muted);
	font-size: .9rem;
}

/* Ranking — numbered list */
.home-dash .hd-qed-rank {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	counter-reset: rank;
}
.home-dash .hd-qed-rank-item {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-qed-rank-num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
}
.home-dash .hd-qed-rank-text { flex: 1 1 auto; min-width: 0; font-size: .9rem; color: var(--hd-ink); }

/* Range — three-up meta cells then the slider */
.home-dash .hd-qed-range-meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
	margin: 0 0 1rem;
}
.home-dash .hd-qed-range-cell {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	text-align: center;
}
.home-dash .hd-qed-range-cell .hd-qed-meta-label { justify-content: center; }

.home-dash .hd-qed-range-slider {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-qed-range-input {
	width: 100%;
	accent-color: var(--hd-blue);
}
.home-dash .hd-qed-range-readout {
	display: flex;
	justify-content: flex-end;
	gap: .35rem;
	font-size: .85rem;
	color: var(--hd-ink);
}

/* ----- RIGHT: JSON panel ----- */
.home-dash .hd-qed-json-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 7px;
	color: var(--hd-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.home-dash .hd-qed-json-body {
	padding: 0;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}
.home-dash .hd-qed-json {
	margin: 0;
	padding: .85rem 1rem;
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--hd-ink);
	background: var(--hd-surface);
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 70vh;
	overflow: auto;
}

/* ==============================================================
   KNOWLEDGE EXPLORER (.hd-ke)
   Pairs with knowledge_tree/explorer.html, partials/tree_node.html,
   and knowledge/partials/node_detail.html.

   The .tree-*, .badge-*, and .pill-* class names are emitted by the
   knowledge_type_css template filter and read by the tree explorer's
   inline <script>, so their *names* are a contract — only the styling
   changes here.
   ============================================================== */

/* ----- Toolbar above the panels ----- */
.home-dash .hd-ke-toolbar {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	padding: .65rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
}
.home-dash .hd-ke-toolbar-search {
	position: relative;
	flex: 1 1 240px;
	min-width: 220px;
}
.home-dash .hd-ke-toolbar-search-icon {
	position: absolute;
	left: .65rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hd-muted);
	font-size: .9rem;
	pointer-events: none;
}
.home-dash .hd-ke-toolbar-input {
	width: 100%;
	padding-left: 2rem;
}

/* ----- Layout ----- */

/* ----- LEFT: tree panel ----- */
.home-dash .hd-ke-visible-count {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: .72rem;
	font-weight: 600;
	color: var(--hd-muted);
}
.home-dash .hd-ke-visible-count > #visible-count {
	color: var(--hd-blue);
	font-weight: 800;
}
.home-dash .hd-ke-tree-body {
	padding: .75rem;
	flex: 1 1 auto;
	min-height: 0;
	max-height: calc(100vh - 18rem);
	min-block-size: 480px;
	overflow-y: auto;
}

/* ----- Tree structure ----- */
.home-dash .tree-item { margin: 1px 0; }
.home-dash .tree-row {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .55rem;
	border-radius: var(--hd-radius-sm);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	min-width: 0;
}
.home-dash .tree-row.active {
	background: linear-gradient(135deg, #000000 0%, var(--hd-blue) 100%);
	color: #fff;
	box-shadow: 0 4px 12px var(--hd-blue-a25);
}

.home-dash .tree-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: .7rem;
	color: var(--hd-muted);
	transition: transform .18s ease, color .18s ease;
	flex-shrink: 0;
}
.home-dash .tree-toggle.leaf {
	visibility: hidden;
	pointer-events: none;
}

.home-dash .tree-children {
	padding-left: 1.25rem;
	list-style: none;
	margin: 0;
}

/* ----- Type badges (.badge + variants from knowledge_type_css filter) ----- */
.home-dash .tree-row .badge,
.hd-ke-detail .badge {
	display: inline-flex;
	align-items: center;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 2px 8px;
	border-radius: 999px;
	flex-shrink: 0;
	line-height: 1.4;
	text-transform: uppercase;
}
.home-dash .badge-group      { background: #ede9fe; color: #5b21b6; }
.home-dash .badge-kra,
.home-dash .pill-green,
.home-dash .hd-gdel-pill.is-active,
.home-dash .hd-cr-status--11,
.hd-login-status--success { background: #d1fae5; color: #065f46; }
.home-dash .badge-task,
.home-dash .pill-blue,
.home-dash .hd-cr-priority--31 { background: #dbeafe; color: #1e40af; }
.home-dash .badge-foundation,
.home-dash .pill-amber,
.home-dash .hd-gt-pill.is-warning,
.home-dash .hd-gm-summary-pill.is-inactive,
.home-dash .hd-cr-status--10,
.home-dash .hd-cr-status--12,
.home-dash .hd-cr-priority--30 { background: #fef3c7; color: #92400e; }
.home-dash .badge-question   { background: #fce7f3; color: #9d174d; }
.home-dash .badge-none,
.home-dash .pill-gray,
.home-dash .hd-cr-status--14,
.home-dash .hd-cr-priority--33,
.home-dash .hd-cr-priority--34 { background: #f3f4f6; color: #6b7280; }
.home-dash .tree-row.active .badge { box-shadow: 0 0 0 1px var(--hd-white-a35); }

/* ----- State pills (.pill + variants) ----- */
.home-dash .tree-row .pill,
.hd-ke-detail .pill {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .03em;
	flex-shrink: 0;
	line-height: 1.4;
}
.home-dash .pill-red,
.home-dash .hd-cr-status--15,
.home-dash .hd-cr-priority--35,
.hd-login-status--error { background: #fee2e2; color: #991b1b; }

/* ----- RIGHT: detail panel ----- */
.home-dash .hd-ke-detail-body {
	padding: 1rem 1.15rem;
	flex: 1 1 auto;
	min-height: 0;
	max-height: calc(100vh - 18rem);
	min-block-size: 480px;
	overflow-y: auto;
}


/* Error state — used when fetch() of node detail fails */
.home-dash .hd-ke-detail-error {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .85rem 1rem;
	background: rgba(201, 27, 27, .06);
	border: 1px solid rgba(201, 27, 27, .25);
	border-radius: var(--hd-radius-sm);
	color: #991b1b;
	font-size: .9rem;
}
.home-dash .hd-ke-detail-error .bi { color: var(--hd-danger); font-size: 1rem; }

/* Detail fragment header */
.home-dash .hd-ke-detail-header {
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-ke-detail-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--hd-ink);
	letter-spacing: -.01em;
	margin: 0 0 .35rem;
	line-height: 1.3;
}
.home-dash .hd-ke-detail-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	font-size: .78rem;
	color: var(--hd-muted);
}
.home-dash .hd-ke-detail-sub-sep {
	color: var(--hd-muted);
	opacity: .6;
}

/* Sectioned grid */
.home-dash .hd-ke-detail-section-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .5rem;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
}

.home-dash .hd-ke-detail-grid {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .35rem .5rem;
}
@media (max-width: 575.98px) {
	.home-dash .hd-ke-detail-grid,
	.home-dash .hd-gmove-pos-grid,
	.home-dash .hd-empform-pw-req-list,
	.home-dash .hd-fb-create-grid {
		grid-template-columns: 1fr;
	}
}
.home-dash .hd-ke-detail-row {
	display: grid;
	grid-template-columns: minmax(110px, 38%) 1fr;
	gap: .5rem;
	align-items: start;
	padding: .4rem .65rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	font-size: .85rem;
}
.home-dash .hd-ke-detail-label {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	color: var(--hd-muted);
	letter-spacing: .02em;
}
.home-dash .hd-ke-detail-value {
	margin: 0;
	color: var(--hd-ink);
	word-break: break-word;
	min-width: 0;
}

/* Source-record link at the bottom of the detail fragment */
.home-dash .hd-ke-detail-source-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1rem;
	padding: .5rem .85rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-ink);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.home-dash .hd-ke-detail-source-link:hover,
.home-dash .hd-ke-detail-source-link:focus-visible {
	border-color: var(--hd-blue-soft);
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	transform: translateY(-1px);
	outline: none;
}

/* ==============================================================
   GROUP TREE PAGE (.hd-gt)
   Pairs with groups/group_list.html. Wraps the page content in
   .hd-gt so its rules win over the more generic .tree-* rules
   from the knowledge explorer further up in this file (the JS
   for this page reads .tree-children + .js-toggle, so those
   class names are kept while the visual styling lives under
   the .hd-gt scope).
   ============================================================== */

/* Scrollable wrapper — replaces inline overflow-x:auto */
.home-dash .hd-gt-scroll,
.home-dash .hd-gf-members-scroll {
	overflow-x: auto;
	width: 100%;
}

/* Tree root */
.home-dash .hd-gt-tree {
	display: inline-block;
	min-width: 100%;
	padding: .25rem 0;
}

/* Toolbar (Expand all / Collapse all) — sits in the panel head */

/* ----- Tree row ----- */
.home-dash .hd-gt .tree-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .65rem .35rem .25rem;
	border-radius: var(--hd-radius-sm, 8px);
	margin: 1px 0;
	white-space: nowrap;
	background: transparent;
	transition: background .15s ease;
	/* override the active-state gradient from the .home-dash .tree-row
	   rule that the knowledge explorer ships — group tree rows don't
	   have a "selected" notion */
	color: inherit;
	box-shadow: none;
}

/* ----- Toggle glyph (▾ / ▸) -----
   The JS reads/writes the text content of this element, so it stays
   a plain text glyph. Override the chevron-icon styling that the
   knowledge-explorer adds to .home-dash .tree-toggle. */
.home-dash .hd-gt .tree-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	min-width: 1.25rem;
	font-size: .8rem;
	line-height: 1;
	color: var(--hd-muted, #6c757d);
	cursor: pointer;
	flex-shrink: 0;
	user-select: none;
	transform: none !important; /* defeat .tree-toggle.open rotate from knowledge explorer */
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
}
.home-dash .hd-gt .tree-toggle:focus-visible {
	outline: 2px solid var(--hd-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ----- Type icon ----- */
.home-dash .hd-gt-type-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	flex-shrink: 0;
	color: var(--hd-blue);
}
.home-dash .hd-gt-type-icon .bi,
.home-dash .hd-iss-card-action .bi { font-size: .95rem; }

/* ----- Name + code ----- */
.home-dash .hd-gt-name {
	font-weight: 600;
	color: var(--hd-ink);
	font-size: .9rem;
}
.home-dash .hd-gt-code {
	font-size: .78rem;
	color: var(--hd-muted);
	font-variant-numeric: tabular-nums;
}

/* ----- Type / status pills ----- */
.home-dash .hd-gt-pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: 999px;
	flex-shrink: 0;
	line-height: 1.5;
}
.home-dash .hd-gt-pill.is-inactive {
	background: var(--hd-surface-2, #f3f4f6);
	color: var(--hd-muted);
}

/* ----- Children container -----
   Overrides the .home-dash .tree-children rule from the knowledge
   explorer (which uses 1.25rem padding-left + no border). */
.home-dash .hd-gt .tree-children {
	display: block;
	margin: 0 0 0 1.15rem;
	padding-left: 0;
	border-left: 2px solid var(--hd-line, #dee2e6);
	list-style: none;
}

/* ----- Inline action cluster ----- */
.home-dash .hd-gt-actions {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	margin-left: .5rem;
	opacity: 0;
	transition: opacity .15s ease;
	flex-shrink: 0;
}
.home-dash .hd-gt-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--hd-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.home-dash .hd-gt-action:hover,
.home-dash .hd-gt-action:focus-visible {
	background: var(--hd-blue-a12);
	border-color: var(--hd-blue-a25);
	color: var(--hd-blue);
	outline: none;
}
.home-dash .hd-gt-action.is-success:hover,
.home-dash .hd-gt-action.is-success:focus-visible,
.home-dash .hd-cl-action.is-success:hover,
.home-dash .hd-cl-action.is-success:focus-visible,
.home-dash .hd-kl-action.is-success:hover,
.home-dash .hd-kl-action.is-success:focus-visible {
	background: rgba(31, 122, 58, .10);
	border-color: rgba(31, 122, 58, .35);
	color: #1f7a3a;
}
.home-dash .hd-gt-action.is-danger:hover,
.home-dash .hd-gt-action.is-danger:focus-visible,
.home-dash .hd-kl-action.is-danger:hover,
.home-dash .hd-kl-action.is-danger:focus-visible,
.home-dash .hd-grp-sub-item-action.is-danger:hover,
.home-dash .hd-grp-sub-item-action.is-danger:focus-visible,
.home-dash .hd-feat-row-action.is-danger:hover,
.home-dash .hd-feat-row-action.is-danger:focus-visible,
.home-dash .hd-lang-action.is-danger:hover,
.home-dash .hd-lang-action.is-danger:focus-visible,
.home-dash .hd-applist-action.is-danger:hover,
.home-dash .hd-applist-action.is-danger:focus-visible,
.home-dash .hd-news-action.is-danger:hover,
.home-dash .hd-news-action.is-danger:focus-visible,
.home-dash .hd-cat-action.is-danger:hover,
.home-dash .hd-cat-action.is-danger:focus-visible,
.home-dash .hd-cb-lic-action.is-danger:hover,
.home-dash .hd-cb-lic-action.is-danger:focus-visible {
	background: rgba(220, 53, 69, .10);
	border-color: rgba(220, 53, 69, .35);
	color: #b91c1c;
}

/* ----- Empty state ----- */
.home-dash .hd-gt-empty-cta,
.home-dash .hd-pb-extras + .hd-pb-extras,
.home-dash .hd-gc-banner { margin-top: .75rem; }

/* ==============================================================
   CONFLICT MODAL (.hd-gt-conflict-*)
   ============================================================== */
.hd-modal.hd-gt-conflict-modal .hd-modal-title .bi,
.hd-modal.hd-kl-confirm-modal .hd-modal-title .bi {
	color: #d97706;
	font-size: 1.1rem;
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-message,
.home-dash .hd-gdel-warning {
	margin: 0 0 1rem;
	color: var(--hd-ink);
	font-size: .92rem;
	line-height: 1.5;
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-section,
.home-dash .hd-gf-crumbs,
.hd-modal.hd-cl-preview-modal .hd-cl-preview-section {
	margin: 0 0 1rem;
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-section-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .4rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--hd-ink);
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 .35rem;
	margin-left: .25rem;
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	font-size: .68rem;
	font-weight: 700;
	border-radius: 999px;
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface-2);
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-list-item {
	padding: .4rem .65rem;
	font-size: .82rem;
	line-height: 1.4;
	color: var(--hd-ink);
	border-bottom: 1px solid var(--hd-line);
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-list-item:last-child,
.home-dash .hd-gf-members-table tbody tr:last-child td,
.home-dash .hd-cl-row:last-child,
.home-dash .hd-kl-row:last-child,
.home-dash .hd-cr-row:last-child,
.home-dash .hd-prog-activity-item:last-child,
.hd-modal.hd-lic-modal .hd-lic-modal-table tbody tr:last-child td,
.home-dash .hd-news-row:last-child,
.hd-modal.hd-news-info-modal .hd-news-info-row:last-child,
.hd-modal .hd-gb-del-cascade tbody tr:last-child td,
.home-dash .hd-qb-del-using-row:last-child,
.home-dash .hd-qb-al-row:last-child,
.home-dash .hd-qb-results-row:last-child,
.home-dash .hd-qb-remove-table-row:last-child { border-bottom: 0; }
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-note {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: 1rem 0 0;
	padding: .65rem .85rem;
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-a18);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-size: .82rem;
	line-height: 1.5;
}
.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-note .bi {
	color: var(--hd-blue);
	font-size: .95rem;
	flex-shrink: 0;
	margin-top: 1px;
}.hd-modal.hd-gt-conflict-modal .hd-gt-conflict-footer,
.hd-modal.hd-kl-confirm-modal .hd-kl-confirm-footer,
.hd-modal.hd-emp-notifications-modal .hd-emp-notifications-footer,
.hd-modal.hd-msg-create-modal .hd-msg-create-footer,
.hd-modal.hd-news-preview-modal .hd-news-preview-footer,
.home-dash .hd-mr-delete-footer,
.home-dash .hd-mr-edit-footer,
.home-dash .hd-mr-info-footer {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .85rem 1.15rem;
	border-top: 1px solid var(--hd-line);
}

/* ==============================================================
   SHARED FORM HELPERS (used across forms — group_form, etc.)
   ============================================================== */

/* Required-field asterisk on labels */
.hd-field-required {
	color: #b91c1c;
	font-weight: 700;
	margin-left: .15rem;
}

/* Top-of-form error block (non_field_errors / non_form_errors) */
.hd-form-error {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .75rem .9rem;
	margin-bottom: 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--hd-radius-sm, 10px);
	color: #991b1b;
	font-size: .88rem;
	line-height: 1.5;
}
.hd-form-error .bi,
.hd-tc-toast > .bi,
.hd-login-error .bi {
	color: var(--hd-danger);
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 1px;
}.hd-form-error-body > div + div,
.home-dash .hd-gm-summary-pill-row,
.home-dash .hd-lst-naming-menu li + li { margin-top: .25rem; }

/* ==============================================================
   GROUP FORM (.hd-gf)
   ============================================================== */

/* ----- Breadcrumb ----- */
.home-dash .hd-gf-crumbs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	font-size: .82rem;
	color: var(--hd-muted);
}
.home-dash .hd-gf-crumb,
.home-dash .hd-crb-update-toggle {
	display: inline-flex;
	align-items: center;
}
.home-dash .hd-gf-crumb-sep .bi { font-size: .7rem; color: var(--hd-muted); }

/* ----- Panel layout ----- */
.home-dash .hd-gf-panel,
.home-dash .hd-gf-members-panel { width: 100%; margin-bottom: 1rem; }
.home-dash .hd-gf-panel-sub {
	font-size: .82rem;
	font-weight: 400;
	color: var(--hd-muted);
	margin-left: .35rem;
}
.home-dash .hd-gf-panel-sub em,
.home-dash .hd-cl-current-none,
.home-dash .hd-rb-course-default-label { font-style: italic; }

/* Force native form widgets inside hd-gf to inherit the suite's field look */
.home-dash .hd-gf textarea { min-height: 5.5rem; resize: none; }

/* Selects get a custom dropdown caret on the right edge.
   Replaces the native browser arrow with a Bootstrap-Icon-style chevron
   embedded as an inline SVG background, matching the suite's
   .hd-field-select pattern. */
.home-dash .hd-gf select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-gmove select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-tc select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-tc .hd-field-select,
.home-dash .hd-fc select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-fc .hd-field-select,
.home-dash .hd-cc select:not(.hd-field-input):not(.form-check-input),
.home-dash .hd-cc .hd-field-select,
.home-dash .hd-news-form select:not(.form-check-input),
.home-dash .hd-news-form .hd-field-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7684'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
	background-size: 14px;
	padding-right: 2.25rem;
	cursor: pointer;
}

/* Field labels inside the form pick up an icon prefix and a stronger weight */

/* ----- Toggle switches row ----- */
.home-dash .hd-gf-switches {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding-top: 1.65rem; /* aligns the switches with the field-input row above */
}
.home-dash .hd-gf-switch {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	cursor: pointer;
	user-select: none;
}
.home-dash .hd-gf-switch-label,
.home-dash .hd-tc-switch-label,
.home-dash .hd-fc-switch-label,
.home-dash .hd-cc-switch-label,
.home-dash .hd-empform-toggle .hd-toggle-title {
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
}

/* ----- Collapsible section (Mission / Vision / Description) ----- */
.home-dash .hd-gf-collapse-toggle {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .15rem;
	background: transparent;
	border: 0;
	color: var(--hd-muted);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: color .15s ease;
}
.home-dash .hd-gf-collapse-toggle:hover,
.home-dash .hd-gf-collapse-toggle:focus-visible {
	color: var(--hd-blue);
	outline: none;
}
.home-dash .hd-gf-collapse-chevron {
	display: inline-block;
	font-size: .75rem;
	transition: transform .18s ease;
}
.home-dash .hd-gf-collapse-hint,
.home-dash .hd-lst-respondent-role {
	color: var(--hd-muted);
	font-weight: 400;
	font-size: .78rem;
}

/* ----- Members panel ----- */
.home-dash .hd-gf-members-hint {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .76rem;
	color: var(--hd-muted);
}


/* Members table — clean, sparse rows */
.home-dash .hd-gf-members-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .85rem;
}
.home-dash .hd-gf-members-table thead th {
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
	text-align: left;
	white-space: nowrap;
}
.home-dash .hd-gf-members-table tbody td {
	padding: .35rem .55rem;
	vertical-align: middle;
	border-bottom: 1px solid var(--hd-line);
}

/* Column sizing */
.home-dash .hd-gf-members-col-role    { min-width: 140px; }
.home-dash .hd-gf-members-col-title   { min-width: 180px; }
.home-dash .hd-gf-members-col-primary { width: 5.5rem; text-align: center; }
.home-dash .hd-gf-members-col-active  { width: 4.5rem; text-align: center; }
.home-dash .hd-gf-members-col-delete  { width: 3rem; text-align: center; }

/* Row state */
.home-dash .hd-gf-members-table .member-row.deleted-row { opacity: .4; }

/* Inline form widgets shrink to fit table cells */
.home-dash .hd-gf-members-table input[type="text"],
.home-dash .hd-gf-members-table select {
	width: 100%;
	padding: .35rem .55rem;
	font-size: .85rem;
}

/* Footer with "+ Add employee" button */
.home-dash .hd-gf-members-foot {
	padding: .75rem 1.15rem;
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface, #fff);
}

/* ----- Bottom action row ----- */
.home-dash .hd-gf-actions {
	display: flex;
	gap: .5rem;
	margin: 0 0 1.25rem;
	padding-top: .75rem;
	border-top: 1px dashed var(--hd-line);
}

/* ----- Hero link styling for base_groups hero ----- */
.home-dash .hd-gt-hero-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed transparent;
	transition: border-color .15s ease, color .15s ease;
}
.home-dash .hd-gt-hero-link:hover,
.home-dash .hd-gt-hero-link:focus-visible {
	color: #fff;
	border-bottom-color: var(--hd-white-a35);
	outline: none;
}
.home-dash .hd-gt-hero-sep { margin: 0 .35rem; opacity: .65; }

/* ==============================================================
   GROUP MEMBERS PAGE (.hd-gm)
   Reuses the .hd-gf-* members-table styling, .hd-gf-crumbs, and
   .hd-form-error. Adds page-specific styles for the read-only
   summary sidebar and the multi-button footer row.
   ============================================================== */

/* Summary sidebar */
.home-dash .hd-gm-summary-body {
	padding: .5rem;
	flex: 1 1 auto;
	min-height: 0;
	max-height: calc(100vh - 16rem);
	overflow-y: auto;
}
.home-dash .hd-gm-summary-list,
.home-dash .hd-cl-list,
.home-dash .hd-kl-list,
.home-dash .hd-cr-list,
.home-dash .hd-prog-activity-list,
.home-dash .hd-news-list,
.home-dash .hd-tb-delete-affected-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.home-dash .hd-gm-summary-item {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .65rem .55rem;
	border-radius: var(--hd-radius-sm, 8px);
	transition: background .15s ease;
}.home-dash .hd-gm-summary-item + .hd-gm-summary-item,
.home-dash .hd-csv-preview-row + .hd-csv-preview-row {
	border-top: 1px solid var(--hd-line);
}

/* Avatar circle with initials */
.home-dash .hd-gm-summary-avatar {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	color: var(--hd-blue);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Body of each summary row */
.home-dash .hd-gm-summary-meta {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.3;
}
.home-dash .hd-gm-summary-name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin-bottom: .15rem;
}
.home-dash .hd-gm-summary-role {
	font-size: .75rem;
	color: var(--hd-muted);
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-gm-summary-sep { opacity: .55; margin: 0 .15rem; }

/* Pills inside the summary (primary / inactive) */
.home-dash .hd-gm-summary-pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: 999px;
	line-height: 1.5;
	text-transform: uppercase;
}


/* Footer-action layout — Add (left) | spacer | Cancel + Save (right) */

/* ==============================================================
   GROUP MOVE PAGE (.hd-gmove)
   ============================================================== */

/* Force native form widgets inside hd-gmove to inherit the suite's field
   look (Django renders <select>, etc. without our class names). */

/* Selects get a custom dropdown caret on the right edge — matches the
   .hd-gf select rule for visual consistency across forms. */

/* Field labels — slightly lighter weight than form labels elsewhere */

/* ----- Stat strip (current parent / depth / sub-group count) ----- */
.home-dash .hd-gmove-info {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
.home-dash .hd-gmove-info-cell {
	flex: 1 1 0;
	min-width: 140px;
	padding: .6rem .85rem;
	border-right: 1px solid var(--hd-line);
}
.home-dash .hd-gmove-info-cell:last-child { border-right: 0; }
.home-dash .hd-gmove-info-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .2rem;
}
.home-dash .hd-gmove-info-value {
	font-size: .92rem;
	font-weight: 600;
	color: var(--hd-ink);
	line-height: 1.3;
	word-break: break-word;
}

/* ----- Position picker (radio cards) ----- */
.home-dash .hd-gmove-pos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}
@media (max-width: 575.98px) {
}
.home-dash .hd-gmove-pos-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .55rem .75rem;
	background: var(--hd-surface, #fff);
	border: 2px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.home-dash .hd-gmove-pos-option:hover {
	border-color: var(--hd-blue-soft, #c2d2e3);
	background: var(--hd-surface-2);
}
.home-dash .hd-gmove-pos-option:has(input:checked) {
	border-color: var(--hd-blue);
	background: var(--hd-blue-a06);
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0,0,0,.05));
}
.home-dash .hd-gmove-pos-option:focus-within {
	box-shadow: 0 0 0 3px var(--hd-blue-a12);
}

/* Hide the actual radio — we use the .hd-gmove-pos-check element instead */
.home-dash .hd-gmove-pos-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 2px solid var(--hd-line);
	border-radius: 50%;
	background: var(--hd-surface, #fff);
	color: transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.home-dash .hd-gmove-pos-check .bi { font-size: .72rem; line-height: 1; }
.home-dash .hd-gmove-pos-label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
	flex: 1 1 auto;
	min-width: 0;
}

/* ----- Tree preview ----- */
.home-dash .hd-gmove-preview-hint {
	margin: 0 0 .55rem;
	font-size: .82rem;
	color: var(--hd-muted);
}
.home-dash .hd-gmove-tree-wrap {
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface-2);
	padding: .6rem .35rem;
	max-height: 240px;
	overflow-y: auto;
}

.home-dash .hd-gmove-tree {
	display: flex;
	flex-direction: column;
	font-size: .85rem;
}

/* Per-row indent driven by the --lvl custom property emitted on each row.
   Avoids per-row inline padding while still supporting arbitrary depth. */
.home-dash .hd-gmove-tree-row {
	padding: .15rem .35rem .15rem calc(var(--lvl, 0) * 1.25rem + .35rem);
	line-height: 1.5;
}
.home-dash .hd-gmove-tree-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--hd-ink);
	border-radius: 4px;
	padding: 1px 4px;
}
.home-dash .hd-gmove-tree-label.is-current {
	font-weight: 700;
	color: var(--hd-blue);
	background: var(--hd-blue-a12);
}
.home-dash .hd-gmove-tree-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	color: var(--hd-muted);
	font-size: .72rem;
	flex-shrink: 0;
}
.home-dash .hd-gmove-tree-tag {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	margin-left: .5rem;
	padding: 1px 6px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hd-blue);
	background: var(--hd-blue-a12);
	border-radius: 999px;
	line-height: 1.5;
}

/* ----- Actions ----- */
.home-dash .hd-gmove-actions {
	display: flex;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* ==============================================================
   GROUP DELETE CONFIRMATION (.hd-gdel)
   Danger-themed confirmation panel — softer than a red banner so
   the user reads the impact list before clicking the action.
   ============================================================== */
.home-dash .hd-gdel-panel,
.home-dash .hd-news-del-panel {
	width: 100%;
	border-color: rgba(220, 53, 69, .35);
	box-shadow: 0 4px 14px rgba(220, 53, 69, .08);
}

/* Panel head — tinted danger gradient */
.home-dash .hd-gdel-head,
.hd-modal.hd-kl-confirm-modal .hd-kl-confirm-header,
.home-dash .hd-news-del-head {
	background: linear-gradient(180deg, rgba(220, 53, 69, .08), rgba(220, 53, 69, .02));
	border-bottom-color: rgba(220, 53, 69, .25);
}
.home-dash .hd-gdel-title {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: #991b1b;
}
.home-dash .hd-gdel-title .bi,
.home-dash .hd-news-del-title .bi {
	color: #dc2626;
	font-size: 1.1rem;
}

/* Panel body */

/* Plain-language warning */
.home-dash .hd-gdel-warning strong,
.home-dash .hd-gdel-impact-none strong,
.home-dash .hd-gdel-impact-extra strong,
.hd-modal .hd-gb-del-section--warn .hd-gb-del-section-title { color: #991b1b; }

/* Impact callout — amber-tinted block listing affected items */
.home-dash .hd-gdel-impact {
	margin: 0 0 1.25rem;
	padding: .75rem .9rem;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: var(--hd-radius-sm, 8px);
	color: #92400e;
}
.home-dash .hd-gdel-impact-head {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .35rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #92400e;
}
.home-dash .hd-gdel-impact-head .bi {
	color: #d97706;
	font-size: .9rem;
}
.home-dash .hd-gdel-impact-body {
	font-size: .88rem;
	line-height: 1.5;
}
.home-dash .hd-gdel-impact-summary {
	font-weight: 700;
	color: #991b1b;
	margin-bottom: .35rem;
}
.home-dash .hd-gdel-impact-list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .82rem;
	color: var(--hd-ink);
	max-height: 180px;
	overflow-y: auto;
}
.home-dash .hd-gdel-impact-list li { padding: .1rem 0; }
.home-dash .hd-gdel-impact-extra {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .65rem;
	padding-top: .55rem;
	border-top: 1px dashed rgba(146, 64, 14, .4);
	color: var(--hd-ink);
}
.home-dash .hd-gdel-impact-extra .bi,
.hd-kl-delete-outcome--orphaned .hd-kl-delete-outcome-headline .bi,
.home-dash .hd-kl-pending-state--14 .hd-kl-pending-state-value,
.home-dash .hd-iss-trial-card--failed .hd-iss-trial-card-result .bi { color: #d97706; }

/* Group attribute summary — definition list with two columns per row */
.home-dash .hd-gdel-meta {
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .65rem .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.home-dash .hd-gdel-meta-row {
	display: grid;
	grid-template-columns: minmax(110px, 40%) 1fr;
	gap: .5rem;
	align-items: center;
	padding: .15rem 0;
	font-size: .85rem;
}
.home-dash .hd-gdel-meta-row + .hd-gdel-meta-row {
	border-top: 1px solid var(--hd-line);
	padding-top: .35rem;
	margin-top: .1rem;
}
.home-dash .hd-gdel-meta-label {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-gdel-meta-value {
	margin: 0;
	color: var(--hd-ink);
	font-weight: 600;
}
.home-dash .hd-gdel-meta-code {
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .82rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 4px;
	padding: 1px 6px;
}

/* Pills for status row */
.home-dash .hd-gdel-pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: 999px;
	line-height: 1.5;
	text-transform: uppercase;
}
.home-dash .hd-gdel-pill.is-inactive {
	background: var(--hd-surface, #fff);
	color: var(--hd-muted);
	border: 1px solid var(--hd-line);
}

/* Actions */
.home-dash .hd-gdel-actions {
	display: flex;
	gap: .5rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* ==============================================================
   COMPANY COURSE LIST (.hd-cl)
   Pairs with company_course_list.html. Single responsive layout
   for the courses table — desktop shows a wide row, mobile
   collapses to a stacked card via CSS only.
   ============================================================== */
.home-dash .hd-cl-toolbar-panel {
	width: 100%;
	margin-bottom: 1rem;
	overflow: visible; /* let filter dropdowns escape the panel bounds */
}
.home-dash .hd-cl-toolbar-body,
.home-dash .hd-lst-items-body { padding: .85rem 1.15rem 1rem; }

/* ----- Toolbar rows ----- */
.home-dash .hd-cl-toolbar-row,
.home-dash .hd-crb-image-picker {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: center;
}
.home-dash .hd-cl-toolbar-row + .hd-cl-toolbar-row { margin-top: .65rem; }
.home-dash .hd-cl-toolbar-row--filters { gap: .65rem; }

/* Search row holds search (flexes) + per-page (right) */
.home-dash .hd-cl-toolbar-row--search {
	flex-wrap: nowrap;
}
@media (max-width: 575.98px) {
}

/* Per-page selector (sits on the right of the search row) */
.home-dash .hd-cl-perpage,
.home-dash .hd-kb-obs-head-actions {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
}
.home-dash .hd-cl-perpage-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	white-space: nowrap;
}
.home-dash .hd-cl-perpage-select {
	width: auto;
	min-width: 70px;
	padding-right: 2.25rem;
}

/* Pager cluster */
.home-dash .hd-cl-pager {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-weight: 600;
}
.home-dash .hd-cl-pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
	color: var(--hd-ink);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.home-dash .hd-cl-pager-btn:hover,
.home-dash .hd-cl-pager-btn:focus-visible {
	background: var(--hd-surface-2);
	border-color: var(--hd-blue-soft, #c2d2e3);
	color: var(--hd-blue);
	outline: none;
}
.home-dash .hd-cl-pager-btn.is-disabled,
.home-dash .hd-emp-mgr-pager-btn.is-disabled {
	opacity: .35;
	pointer-events: none;
	cursor: not-allowed;
}
.home-dash .hd-cl-pager-current {
	display: inline-flex;
	align-items: center;
	padding: 0 .5rem;
	font-size: .82rem;
	color: var(--hd-ink);
	white-space: nowrap;
}
@media (min-width: 576px) {
	.home-dash .hd-cl-pager-long { display: inline; }
	.home-dash .hd-cl-pager-short { display: none; }
}

/* ----- Filter form ----- */

/* Search input with leading icon — grows to fill remaining row space */
.home-dash .hd-cl-search,
.home-dash .hd-emp-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-cl-search-input {
	width: 100%;
	padding-left: 2.2rem;
}

/* Filter row groups — filters (left, expands) + actions (right, content-sized) */
.home-dash .hd-cl-filters {
	display: flex;
	flex: 1 1 auto;
	gap: .5rem;
	flex-wrap: wrap;
	min-width: 0;
}
.home-dash .hd-cl-actions {
	display: flex;
	gap: .4rem;
	flex-shrink: 0;
	align-items: center;
}

/* Filter dropdown buttons — each takes equal share of .hd-cl-filters */
.home-dash .hd-cl-filter {
	flex: 1 1 220px;
	min-width: 200px;
}
.home-dash .hd-cl-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .5rem .85rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-size: .88rem;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.home-dash .hd-cl-filter-btn:hover,
.home-dash .hd-cl-filter-btn:focus-visible {
	border-color: var(--hd-blue-soft, #c2d2e3);
	background: var(--hd-surface-2);
	outline: none;
}
.home-dash .hd-cl-filter-btn::after {
	content: "";
	display: inline-block;
	margin-left: auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .5;
}
.home-dash .hd-cl-filter-btn[aria-expanded="true"]::after {
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

/* Filter dropdown menu */
.home-dash .hd-cl-filter-menu {
	width: 100%;
	min-width: 230px;
	max-height: 320px;
	overflow-y: auto;
	padding: .35rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-sm, 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04));
}
.home-dash .hd-cl-filter-item {
	display: block;
	margin: 0;
	padding: 0;
}
.home-dash .hd-cl-filter-check {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .55rem;
	margin: 0;
	border-radius: 6px;
	cursor: pointer;
	font-size: .85rem;
	color: var(--hd-ink);
	transition: background .15s ease;
}
.home-dash .hd-cl-filter-check input[type="checkbox"] {
	flex-shrink: 0;
	cursor: pointer;
}

/* ----- Current filters chip strip ----- */
.home-dash .hd-cl-current {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	padding-top: .65rem;
	margin-top: .65rem;
	border-top: 1px dashed var(--hd-line);
	font-size: .78rem;
	color: var(--hd-muted);
}
.home-dash .hd-cl-current-label {
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .7rem;
}
.home-dash .hd-cl-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: 2px 9px;
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-a18);
	border-radius: 999px;
	color: var(--hd-blue);
	line-height: 1.5;
}

/* ==============================================================
   RESULTS LIST
   Single responsive markup — desktop = wide row grid, mobile =
   stacked card with cell labels visible.
   ============================================================== */

/* Column key strip — desktop only */
@media (min-width: 992px) {
	.home-dash .hd-cl-keyrow {
		display: grid;
		grid-template-columns: 1.2fr 2.5fr 1.8fr 1.5fr 1.8fr 60px;
		gap: .75rem;
		padding: .55rem 1rem;
		background: var(--hd-surface-2);
		border-bottom: 1px solid var(--hd-line);
		font-size: .68rem;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
	.home-dash .hd-cl-keyrow .hd-cl-key--actions,
	.home-dash .hd-kl-keyrow .hd-kl-key--actions,
	.home-dash .hd-cr-key--center,
	.home-dash .hd-licmgr-table-cell--center,
	.home-dash .hd-licmgr-table-key--center,
	.home-dash .hd-applist-cell--price,
	.home-dash .hd-applist-cell--actions,
	.home-dash .hd-news-keyrow .hd-news-key--actions,
	.home-dash .hd-news-keyrow .hd-news-key--method,
	.home-dash .hd-news-keyrow .hd-news-key--date,
	.home-dash .hd-cb-lic-cell--center,
	.home-dash .hd-cb-applic-cell--center { text-align: center; }
}

/* Course list */
.home-dash .hd-cl-row,
.home-dash .hd-news-row {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--hd-line);
	transition: background .15s ease;
}

@media (min-width: 992px) {
	.home-dash .hd-cl-row {
		display: grid;
		grid-template-columns: 1.2fr 2.5fr 1.8fr 1.5fr 1.8fr 60px;
		gap: .75rem;
		align-items: center;
		padding: .65rem 1rem;
	}
}

/* Cell — mobile shows label, desktop hides it */
.home-dash .hd-cl-cell,
.home-dash .hd-kl-cell,
.home-dash .hd-cr-cell,
.home-dash .hd-news-cell {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: .5rem;
	min-width: 0;
}
.home-dash .hd-cl-cell-label {
	display: inline-block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	min-width: 70px;
	flex-shrink: 0;
}
.home-dash .hd-cl-cell-value,
.home-dash .hd-kl-cell-value,
.home-dash .hd-cr-cell-value,
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-item-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (min-width: 992px) {
	.home-dash .hd-cl-cell,
	.home-dash .hd-kl-cell,
	.home-dash .hd-cr-cell,
	.home-dash .hd-news-cell { display: flex; gap: 0; }.home-dash .hd-cl-cell-label,
.home-dash .hd-kl-cell-label,
.home-dash .hd-cr-cell-label,
.home-dash .hd-licmgr-table-label,
.home-dash .hd-ugm-cell-label,
.home-dash .hd-news-cell-label { display: none; }
	.home-dash .hd-cl-cell--actions,
	.home-dash .hd-licmgr-table-cell--center .hd-licmgr-table-value,
	.home-dash .hd-cb-lic-cell--center .hd-cb-lic-cell-value,
	.home-dash .hd-cb-applic-cell--center .hd-cb-applic-cell-value { justify-content: center; }
}

/* Cell content typography */
.home-dash .hd-cl-code-link,
.home-dash .hd-kl-id-link {
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .82rem;
	color: var(--hd-blue);
	text-decoration: none;
	font-weight: 600;
}

.home-dash .hd-cl-title-link,
.home-dash .hd-cl-title-text {
	color: var(--hd-ink);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-cl-title-link:hover,
.home-dash .hd-kl-title-link:hover,
.home-dash .hd-cr-title-link:hover,
.home-dash .hd-news-del-article-link:hover .hd-news-del-article-headline,
.home-dash .hd-news-del-article-link:focus-visible .hd-news-del-article-headline {
	color: var(--hd-blue);
	text-decoration: underline;
}

.home-dash .hd-cl-owner-link {
	color: var(--hd-blue);
	text-decoration: none;
	font-weight: 500;
	font-size: .85rem;
}


/* Action icon button (delete) */
.home-dash .hd-cl-action,
.home-dash .hd-kl-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--hd-muted);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.home-dash .hd-cl-action.is-danger:hover,
.home-dash .hd-licmgr-table-key--danger,
.home-dash .hd-licmgr-table-cell--danger .hd-licmgr-table-label { color: #b91c1c; }

/* Bottom pager */
.home-dash .hd-cl-pager-bottom {
	display: flex;
	justify-content: center;
	padding: 1rem;
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
}

/* Top pager — centered above the results panel.
   The toolbar panel has 1rem margin-bottom which gives this row room. */
.home-dash .hd-cl-pager-top {
	display: flex;
	justify-content: center;
	margin-bottom: .65rem;
}

/* Empty state */
.home-dash .hd-cl-empty,
.home-dash .hd-kl-empty,
.home-dash .hd-news-empty { padding: 3rem 1.5rem; }

/* ==============================================================
   VENDOR COURSE LIST EXTENSIONS (.hd-cl-*--vendor / .hd-cl-preview-*)
   ============================================================== */

/* Info banner above the results — explains the add-course flow */
.home-dash .hd-cl-info-banner {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .75rem 1rem;
	background: var(--hd-blue-a06);
	border-bottom: 1px solid var(--hd-line);
	color: var(--hd-ink);
	font-size: .82rem;
	line-height: 1.5;
}
.home-dash .hd-cl-info-banner .bi,
.home-dash .hd-tc-notice .bi,
.hd-modal.hd-news-info-modal .hd-news-info-note .bi {
	color: var(--hd-blue);
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 1px;
}

/* Vendor-list 8-column grid (Code / Title / Cat / Type / Vendor / Cost / Preview / Add-Remove)
   Overrides the 6-column .hd-cl-keyrow/.hd-cl-row at lg+. Hidden on smaller
   viewports — the row falls back to the stacked-card layout from the base
   .hd-cl-row rule. */
@media (min-width: 992px) {
	.home-dash .hd-cl-keyrow--vendor,
	.home-dash .hd-cl-row--vendor {
		grid-template-columns: 1fr 1.8fr 1.3fr 1fr 1.3fr 80px 70px 100px;
	}
	.home-dash .hd-cl-keyrow--vendor .hd-cl-key--num,
	.home-dash .hd-cl-row--vendor .hd-cl-cell--cost {
		text-align: right;
		justify-content: flex-end;
	}
	.home-dash .hd-cl-keyrow--vendor .hd-cl-key--actions,
	.home-dash .hd-cl-row--vendor .hd-cl-cell--preview,
	.home-dash .hd-cl-row--vendor .hd-cl-cell--toggle,
	.home-dash .hd-kl-cell--actions,
	.home-dash .hd-cr-cell--status,
	.home-dash .hd-cr-cell--priority,
	.home-dash .hd-cr-cell--date,
	.home-dash .hd-cr-cell--hours,
	.home-dash .hd-news-cell--actions,
	.home-dash .hd-news-cell--method,
	.home-dash .hd-news-cell--date {
		text-align: center;
		justify-content: center;
	}
}

/* Cost — bold and slightly green so it reads as a price */
.home-dash .hd-cl-cost {
	font-weight: 700;
	color: #1f7a3a;
	font-variant-numeric: tabular-nums;
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .88rem;
}

/* Action variants beyond the default + danger from the base .hd-cl-action */
.home-dash .hd-cl-action.is-info:hover,
.home-dash .hd-cl-action.is-info:focus-visible {
	background: var(--hd-blue-a12);
	border-color: var(--hd-blue-a35);
	color: var(--hd-blue);
}

/* ==============================================================
   COURSE PREVIEW MODAL (.hd-cl-preview-*)
   ============================================================== */
.hd-modal.hd-cl-preview-modal .hd-cl-preview-body {
	padding: 1rem 1.25rem;
}

/* Top metadata grid — 2 columns at sm+, 1 column on mobile */
.hd-modal.hd-cl-preview-modal .hd-cl-preview-meta {
	margin: 0 0 1.25rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem .85rem;
}
@media (min-width: 576px) {
	.hd-modal.hd-cl-preview-modal .hd-cl-preview-meta,
	.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-meta {
		grid-template-columns: 1fr 1fr;
	}
}
.hd-modal.hd-cl-preview-modal .hd-cl-preview-row,
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-meta-row {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .5rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.hd-modal.hd-cl-preview-modal .hd-cl-preview-label {
	margin: 0;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.hd-modal.hd-cl-preview-modal .hd-cl-preview-value,
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-meta-value {
	margin: 0;
	font-size: .9rem;
	color: var(--hd-ink);
	font-weight: 500;
}
.hd-modal.hd-cl-preview-modal .hd-cl-preview-code {
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .82rem;
	color: var(--hd-blue);
}

/* Section blocks (Categories, Objective, Description, etc.) */
.hd-modal.hd-cl-preview-modal .hd-cl-preview-section-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .4rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
}

/* Category chips */
.hd-modal.hd-cl-preview-modal .hd-cl-preview-cats {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}
.hd-modal.hd-cl-preview-modal .hd-cl-preview-cat {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	background: var(--hd-blue-a12);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
	color: var(--hd-blue);
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.5;
}

/* Prose blocks (Objective / Description / etc.) */
.hd-modal.hd-cl-preview-modal .hd-cl-preview-prose {
	font-size: .88rem;
	line-height: 1.55;
	color: var(--hd-ink);
}
.hd-modal.hd-cl-preview-modal .hd-cl-preview-teaser {
	font-style: italic;
	color: var(--hd-muted);
	padding: .55rem .75rem;
	border-left: 3px solid var(--hd-blue);
	background: var(--hd-surface-2);
	border-radius: 0 var(--hd-radius-sm, 8px) var(--hd-radius-sm, 8px) 0;
}

/* Modal footer with multiple action buttons */
.hd-modal.hd-cl-preview-modal .hd-cl-preview-footer {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: flex-end;
	padding: .85rem 1.15rem;
	border-top: 1px solid var(--hd-line);
}/* ==============================================================
   KNOWLEDGE LISTS (.hd-kl)
   Shared styling for kra_list / foundation_list / task_list /
   procedure_list. Single responsive layout — desktop = wide grid
   row,
mobile = stacked card with cell labels visible.
   ============================================================== */

/* ----- Hero CTA buttons (when multiple) ----- */
.home-dash .hd-kl-hero-btn,
.home-dash .hd-tc-hero-btn,
.home-dash .hd-cr-hero-btn,
.home-dash .hd-rt-hero .hd-btn.hd-btn-ghost {
	background: var(--hd-white-a06);
	border-color: var(--hd-white-a25);
	color: #fff;
}

/* ----- Tabs ----- */
.home-dash .hd-kl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0 0 0;
	padding: 0;
	border-bottom: 1px solid var(--hd-line);
	list-style: none;
}
.home-dash .hd-kl-tabs .hd-kl-tab.nav-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .9rem;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--hd-radius-sm, 8px) var(--hd-radius-sm, 8px) 0 0;
	color: var(--hd-muted);
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	margin-bottom: -1px;
}
.home-dash .hd-kl-tabs .hd-kl-tab.nav-link:hover,
.home-dash .hd-kl-tabs .hd-kl-tab.nav-link:focus-visible,
.home-dash .hd-eq-filter-btn:hover,
.home-dash .hd-eq-filter-btn:focus-visible,
.home-dash .hd-gb-dropdown-item:hover,
.home-dash .hd-gb-dropdown-item:focus-visible,
.home-dash .hd-cat-default-toggle:hover,
.home-dash .hd-cat-default-toggle:focus-visible,
.home-dash .hd-cat-default-radio:hover,
.home-dash .hd-cat-default-radio:focus-visible {
	background: var(--hd-surface-2);
	color: var(--hd-blue);
	outline: none;
}
.home-dash .hd-kl-tabs .hd-kl-tab .bi,
.home-dash .hd-lst-plan-row-title .bi { color: var(--hd-blue); font-size: .92rem; }
.home-dash .hd-kl-tabs .hd-kl-tab.nav-link.active:hover,
.home-dash .hd-kl-tabs .hd-kl-tab.nav-link.active:focus-visible,
.home-dash .hd-inb-segment-input:checked + .hd-inb-segment-btn {
	background: var(--hd-blue);
	color: #fff;
}
.home-dash .hd-kl-tab-content > .tab-pane {
	padding-top: 1rem;
}
/* ----- Column key strip — desktop only ----- */
@media (min-width: 992px) {
	.home-dash .hd-kl-keyrow {
		display: grid;
		grid-template-columns: 70px 2fr 2.5fr 100px 1.5fr 80px;
		gap: .75rem;
		padding: .55rem 1rem;
		background: var(--hd-surface-2);
		border-bottom: 1px solid var(--hd-line);
		font-size: .68rem;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
	/* Layout variants */
	.home-dash .hd-kl-keyrow--abandoned,
	.home-dash .hd-kl-keyrow--unorg,
	.home-dash .hd-kl-row--abandoned,
	.home-dash .hd-kl-row--unorg {
		grid-template-columns: 70px 1fr 80px 80px 1fr;
	}
	.home-dash .hd-kl-keyrow--orphan,
	.home-dash .hd-kl-row--orphan {
		grid-template-columns: 70px 1fr;
	}
	.home-dash .hd-kl-keyrow--org,
	.home-dash .hd-kl-row--org {
		grid-template-columns: 70px 2fr 1.5fr 100px 80px 80px 3.5fr;
	}
	.home-dash .hd-kl-keyrow--proc,
	.home-dash .hd-kl-row--proc {
		grid-template-columns: 70px 2.5fr 2fr 80px;
	}
}

/* ----- Lists ----- */

/* Row — mobile = stacked cells, desktop = grid */
.home-dash .hd-kl-row,
.home-dash .hd-cr-row {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--hd-line);
	transition: background .15s ease;
}

@media (min-width: 992px) {
	.home-dash .hd-kl-row {
		display: grid;
		grid-template-columns: 70px 2fr 2.5fr 100px 1.5fr 80px;
		gap: .75rem;
		align-items: center;
		padding: .65rem 1rem;
	}
}

/* ----- Cells ----- */
.home-dash .hd-kl-cell-label,
.home-dash .hd-cr-cell-label {
	display: inline-block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	min-width: 80px;
	flex-shrink: 0;
}
@media (min-width: 992px) {
	.home-dash .hd-kl-cell--full { grid-column: 2 / -1; }
}

/* Cell content typography */
.home-dash .hd-kl-title-link,
.home-dash .hd-kl-title-text {
	color: var(--hd-ink);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-kl-owner-link {
	color: var(--hd-blue);
	text-decoration: none;
	font-size: .85rem;
}
.home-dash .hd-kl-type-link {
	color: var(--hd-ink);
	text-decoration: none;
	font-size: .82rem;
}

/* ----- Action icon buttons ----- */
.home-dash .hd-kl-action.is-locked {
	color: var(--hd-muted);
	cursor: not-allowed;
}
.home-dash .hd-kl-action.is-locked:hover,
.home-dash .hd-lang-action.is-locked:hover {
	background: transparent;
	border-color: transparent;
	color: var(--hd-muted);
}

/* ----- Empty state ----- */

/* ==============================================================
   PICK DROPDOWN (kra_pick_include + foundation move-to-task)
   Multi-level dropdown used inside row title cells.
   ============================================================== */
.home-dash .hd-kl-pick > .dropdown-toggle {
	color: var(--hd-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
}
.home-dash .hd-kl-pick-menu,
.home-dash .hd-stb-q-panel-menu-list,
.home-dash .hd-stb-q-overview-menu,
.home-dash .hd-stb-q-update-menu,
.home-dash .hd-stb-q-survey-update-menu {
	min-width: 220px;
	padding: .35rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-sm, 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04));
}
.home-dash .hd-kl-pick-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .65rem;
	border-radius: 6px;
	color: var(--hd-ink);
	font-size: .85rem;
	transition: background .15s ease;
}
.home-dash .hd-kl-pick-caret { margin-left: auto; opacity: .55; font-size: .75rem; }
.home-dash .hd-kl-pick-submenu {
	position: absolute;
	top: 0;
	left: 100%;
	margin-left: 2px;
	max-height: 280px;
	overflow-y: auto;
	min-width: 220px;
	padding: .35rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-sm, 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04));
	display: none;
}
/* The parent <li> needs relative positioning so the absolute submenu
   is anchored to it. The legacy _kra_pick_include.js toggles a class
   on hover/click — but we also reveal on :hover for keyboard/mouse
   parity even if the JS hasn't initialized yet. */
/* If the right side of the viewport doesn't have room, tip the submenu
   to the left instead. The legacy `.submenu-left` class can be added
   by JS when it detects edge-clipping. */
.home-dash .hd-kl-pick-submenu.submenu-left {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 2px;
}
.home-dash .hd-kl-pick-subitem {
	display: block;
	padding: .4rem .65rem;
	border-radius: 6px;
	color: var(--hd-ink);
	font-size: .85rem;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

/* Hide tabs panel borders that Bootstrap normally adds for nav-tabs */
.home-dash .hd-kl-tabs.nav-tabs { border-bottom-color: var(--hd-line); }

/* ==============================================================
   DELETE-CONFIRM MODAL (used by procedure_list)
   ============================================================== */
.hd-modal.hd-kl-confirm-modal .hd-kl-confirm-body {
	padding: 1.5rem 1.25rem;
	text-align: center;
}
.hd-modal.hd-kl-confirm-modal .hd-kl-confirm-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: #fee2e2;
	color: #dc2626;
	font-size: 2rem;
}
.hd-modal.hd-kl-confirm-modal .hd-kl-confirm-message {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--hd-ink);
	max-width: 28rem;
	margin: 0 auto;
}

/* --------------------------------------------------------------
   Predicted-outcome callout inside _kra_delete_modal.html. The
   delete-or-orphan helper picks one of four branches; the modal
   highlights the predicted branch up front so the user knows
   exactly what Continue will do, with the full rule list tucked
   into a collapsed <details>. Each variant gets its own accent
   so the user can recognize the outcome at a glance.
   -------------------------------------------------------------- */
.hd-kl-delete-outcome {
	margin: .25rem 0 1rem;
	padding: .85rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
	border-left-width: 4px;
}
.hd-kl-delete-outcome-eyebrow,
.hd-kl-link-info-eyebrow {
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hd-muted);
	font-weight: 600;
	margin-bottom: .25rem;
}
.hd-kl-delete-outcome-headline,
.hd-kl-link-info-headline {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin-bottom: .35rem;
}
.hd-kl-delete-outcome-body,
.hd-kl-link-info-body,
.hd-modal.hd-news-info-modal .hd-news-info-def {
	margin: 0;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--hd-ink);
}
/* Per-outcome accent — left border + headline icon color. */
.hd-kl-delete-outcome--orphaned,
.home-dash .hd-lst-plan-row.is-closed {
	border-left-color: #d97706;
	background: rgba(217, 119, 6, .06);
}
.hd-kl-delete-outcome--deleted_with_work_removed,
.hd-kl-delete-outcome--deleted {
	border-left-color: var(--hd-danger);
	background: rgba(201, 27, 27, .06);
}
.hd-kl-delete-outcome--deleted_with_notify {
	border-left-color: var(--hd-blue);
	background: var(--hd-blue-a06);
}

.hd-kl-delete-rules {
	margin: 0 0 .75rem;
	font-size: .85rem;
}
.hd-kl-delete-rules > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--hd-muted);
	padding: .25rem 0;
	user-select: none;
}
.hd-kl-delete-rules ul { margin-top: .5rem; color: var(--hd-ink); }
.hd-kl-delete-rules li + li,
.home-dash .hd-kb-list-row--remove { margin-top: .35rem; }

/* --------------------------------------------------------------
   Link-confirm callout inside _kra_link_modal.html. Mirrors the
   delete-modal callout shape but in suite blue since linking is
   an additive (not destructive) action.
   -------------------------------------------------------------- */
.hd-kl-link-info {
	margin: .25rem 0 0;
	padding: .85rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--hd-line);
	border-left: 4px solid var(--hd-blue);
	background: var(--hd-blue-a06);
}

/* --------------------------------------------------------------
   Pending Changes section on KRAList. Sits below the tab pane
   stack as a view-only roster of every Knowledge mirror in the
   group whose edit_type isn't NO_CHANGE — staged Adds (from the
   Link button on the Abandoned tab), Moves, Pending finalizations,
   etc. Each row is a link into KRABuilder with a return_to query
   param so the back arrow lands the user on the Organized tab.
   -------------------------------------------------------------- */
.home-dash .hd-kl-pending-section {
	margin-top: 1.5rem;
	padding: 1rem 1.15rem 1.15rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius, 16px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}
.home-dash .hd-kl-pending-head { margin-bottom: .75rem; }
.home-dash .hd-kl-pending-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin: 0 0 .25rem;
}
.home-dash .hd-kl-pending-title .bi {
	color: #d97706;
	font-size: 1rem;
}
.home-dash .hd-kl-pending-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.25rem;
	padding: 0 .45rem;
	font-size: .72rem;
	font-weight: 700;
	color: #d97706;
	background: rgba(217, 119, 6, .12);
	border-radius: 999px;
	margin-left: .15rem;
}
.home-dash .hd-kl-pending-sub {
	margin: 0;
	font-size: .82rem;
	color: var(--hd-muted);
}
.home-dash .hd-kl-pending-link {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .55rem .75rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--hd-surface-2);
	color: var(--hd-ink);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.home-dash .hd-kl-pending-link:hover,
.home-dash .hd-kl-pending-link:focus-visible,
.home-dash .hd-kb-list-admin-btn:hover,
.home-dash .hd-kb-list-admin-btn:focus-visible,
.home-dash .hd-pb-task-picker-btn:hover,
.home-dash .hd-pb-task-picker-btn:focus-visible,
.home-dash .hd-pb-task-picker-btn[aria-expanded="true"] {
	border-color: var(--hd-blue);
	background: var(--hd-blue-soft, #eaf1f8);
	color: var(--hd-blue);
	outline: none;
}
.home-dash .hd-kl-pending-id {
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .78rem;
	color: var(--hd-blue);
	font-weight: 600;
	flex: 0 0 auto;
}
.home-dash .hd-kl-pending-title-text {
	flex: 1 1 auto;
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Status label — explicitly NOT a pill/button. Flat label-style
   chrome (no border, no rounded fill) with a muted "Status:"
   prefix and a colored value, so it reads as informational rather
   than interactive. The whole row is the click target via the
   surrounding anchor. */
.home-dash .hd-kl-pending-state {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: 0;
	font-size: .76rem;
	background: transparent;
	border: none;
	border-radius: 0;
	color: var(--hd-muted);
	cursor: default;
	pointer-events: none;
}
.home-dash .hd-kl-pending-state .bi,
.home-dash .hd-app-remove-seq,
.home-dash .hd-cb-list-grip {
	font-size: .82rem;
	color: var(--hd-muted);
}
.home-dash .hd-kl-pending-state-label {
	color: var(--hd-muted);
	font-weight: 500;
}
.home-dash .hd-kl-pending-state-value {
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--hd-blue);
}
/* Per-edit_type tint applied to the value only. Integers come
   straight from constants.py — additive (Add/Add-Orphan/Create)
   in green, Move in amber, all Remove/Delete variants in red,
   Pending in purple. */
.home-dash .hd-kl-pending-state--70 .hd-kl-pending-state-value { color: #6a5ce0; }

/* ==============================================================
   TASK CREATE / UPDATE (.hd-tc)
   ============================================================== */

/* Hero CTA tinted for the dark hero background */

/* Notice banner — sits between hero and form panel */
.home-dash .hd-tc-notice {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: 0 0 1rem;
	padding: .65rem .9rem;
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-a18);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-size: .88rem;
	line-height: 1.5;
}

/* Form panel */

/* Field labels */

/* Force native form widgets inside hd-tc to inherit the suite's field look */
.home-dash .hd-tc textarea,
.home-dash .hd-fc textarea,
.home-dash .hd-ind-form .hd-field-textarea,
.hd-modal.hd-kb-newkra-modal .hd-kb-newkra-textarea { min-height: 8rem; resize: none; }

/* Selects get a custom dropdown caret */

/* Published switch (replaces the original two-row published toggle) */
.home-dash .hd-tc-switch {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .55rem .15rem 0;
	cursor: pointer;
	user-select: none;
}
.home-dash .hd-tc-switch input[type="checkbox"],
.home-dash .hd-fc-switch input[type="checkbox"],
.home-dash .hd-cc-switch input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}

/* Span of Control: "1:" prefix + narrow input */
.home-dash .hd-tc-soc-prefix {
	font-size: .92rem;
	font-weight: 700;
	color: var(--hd-muted);
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}
.home-dash .hd-tc-soc-input {
	width: 5rem;
	min-width: 4rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Action footer */
.home-dash .hd-tc-actions,
.home-dash .hd-fc-actions,
.home-dash .hd-cc-actions,
.home-dash .hd-news-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* ==============================================================
   DUPLICATE-TITLE TOAST (.hd-tc-toast)
   The legacy `toast-error` and `toast-close-btn` class names are kept
   so any existing JS targeting them continues to work. The new
   .hd-tc-toast styles drive the appearance.
   ============================================================== */
.hd-tc-toast.toast-error,
.toast-error.hd-tc-toast {
	display: none; /* JS toggles to block on duplicate-title detection */
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 1080;
	max-width: 24rem;
	padding: .65rem .85rem;
	background: #fee2e2;
	border: 1px solid #fecaca;
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-md, 0 10px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05));
	color: #991b1b;
	font-size: .88rem;
	line-height: 1.45;
}
.hd-tc-toast {
	align-items: flex-start;
	gap: .55rem;
}
.hd-tc-toast-close.toast-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: #991b1b;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	margin-left: auto;
	flex-shrink: 0;
	transition: background .15s ease;
}
.hd-tc-toast-close.toast-close-btn:hover,
.hd-tc-toast-close.toast-close-btn:focus-visible {
	background: rgba(220, 53, 69, .15);
	outline: none;
}
/* When JS sets display:block via inline style, restore flex layout */

/* ==============================================================
   FOUNDATION CREATE / UPDATE (.hd-fc)
   ============================================================== */

/* Field labels */
.home-dash .hd-fc-form .hd-field-help-icon {
	color: var(--hd-muted);
	cursor: help;
	margin-left: .15rem;
}

/* Force Django-rendered native widgets to inherit the suite's field look */

/* Selects get a custom dropdown caret */

/* Published Yes/No switch — same pattern as task_create */
.home-dash .hd-fc-switch,
.home-dash .hd-cc-switch {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .25rem .15rem 0;
	cursor: pointer;
	user-select: none;
}

/* Action footer */

/* ==============================================================
   COMPANY CREATE (.hd-cc)
   ============================================================== */

/* Field labels */

/* Force native form widgets inside hd-cc to inherit the suite's field look */

/* Selects get a custom dropdown caret */

/* Inputs with a leading prefix character (#, $, etc.) */
.home-dash .hd-cc-input-prefix-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .65rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-right: 0;
	border-radius: var(--hd-radius-sm, 8px) 0 0 var(--hd-radius-sm, 8px);
	color: var(--hd-muted);
	font-weight: 700;
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .85rem;
	flex-shrink: 0;
}
.home-dash .hd-cc-input-with-prefix {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Yes / No toggle switch — same pattern as hd-fc-switch / hd-tc-switch */

/* Action footer */

/* ==============================================================
   CUSTOMER RELATIONS DASHBOARD (.hd-cr)
   ============================================================== */
.home-dash .hd-cr-grid { align-items: stretch; margin: 0 0 1rem; }
/* ----- Column key strip — desktop only ----- */
@media (min-width: 992px) {
	.home-dash .hd-cr-keyrow {
		display: grid;
		gap: .75rem;
		padding: .55rem 1rem;
		background: var(--hd-surface-2);
		border-bottom: 1px solid var(--hd-line);
		font-size: .68rem;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
	.home-dash .hd-cr-keyrow--recent,
	.home-dash .hd-cr-row--recent {
		grid-template-columns: 70px 1.6fr 1fr 100px 90px;
	}
	.home-dash .hd-cr-keyrow--assigned,
	.home-dash .hd-cr-row--assigned {
		grid-template-columns: 70px 1.6fr 1.2fr 110px 90px;
	}
	.home-dash .hd-cr-keyrow--completed,
	.home-dash .hd-cr-row--completed {
		grid-template-columns: 70px 2fr 1.4fr 100px 110px 70px;
	}
}

/* ----- Lists ----- */

@media (min-width: 992px) {
	.home-dash .hd-cr-row {
		display: grid;
		gap: .75rem;
		align-items: center;
		padding: .65rem 1rem;
	}
}

/* ----- Cells ----- */
@media (min-width: 992px) {
}

/* Cell content typography */
.home-dash .hd-cr-id-link {
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .82rem;
	color: var(--hd-blue);
	text-decoration: none;
	font-weight: 700;
}
.home-dash .hd-cr-title-link {
	color: var(--hd-ink);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

/* Empty state */

/* ----- Key (column header) modifier helpers ----- */
@media (min-width: 992px) {
}

/* ----- Status pills (codes 10/11/12/14/15) ----- */
.home-dash .hd-cr-status,
.home-dash .hd-cr-priority {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: 999px;
	line-height: 1.5;
	white-space: nowrap;
}
/* warning */
/* success */
/* warning */
/* secondary */
/* danger */

/* ----- Priority pills (codes 30..35) ----- */
/* warning */
/* primary */
.home-dash .hd-cr-priority--32 { background: #cffafe; color: #155e75; }   /* info */
/* secondary */
/* light */
/* danger */

/* ----- Hours readout (completed tab) ----- */
.home-dash .hd-cr-hours {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	min-width: 3rem;
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .82rem;
	font-weight: 700;
	color: var(--hd-ink);
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 4px;
}

/* ==============================================================
   WORK SUMMARY MODAL (.hd-cr-summary-modal) +
   COMPANY BREAKDOWN MODAL (.hd-cr-breakdown-modal)
   ============================================================== */
.hd-modal.hd-cr-summary-modal .hd-modal-title .bi,
.hd-modal.hd-cr-breakdown-modal .hd-modal-title .bi {
	color: var(--hd-blue);
	font-size: 1.1rem;
}

/* User picker + week-nav controls */
.hd-modal.hd-cr-summary-modal .hd-cr-summary-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding: .75rem 1rem;
	margin: 0 0 1rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.hd-modal.hd-cr-summary-modal .hd-cr-summary-user {
	display: flex;
	align-items: center;
	gap: .65rem;
	flex: 1 1 auto;
	min-width: 0;
}
.hd-modal.hd-cr-summary-modal .hd-cr-summary-user-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
	white-space: nowrap;
}
.hd-modal.hd-cr-summary-modal .hd-cr-summary-user-select {
	flex: 0 1 280px;
	min-width: 220px;
}

/* Week navigation row */
.hd-modal.hd-cr-summary-modal .hd-cr-week-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding: .75rem 1rem;
	margin: 0 0 1.25rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.hd-modal.hd-cr-summary-modal .hd-cr-week-current {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.hd-modal.hd-cr-summary-modal .hd-cr-week-title {
	margin: 0;
	font-size: .92rem;
	font-weight: 700;
	color: var(--hd-ink);
}
.hd-modal.hd-cr-summary-modal .hd-cr-week-picker {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 220px;
}
.hd-modal.hd-cr-summary-modal .hd-cr-week-picker .hd-field-input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width: 12rem;
}
.hd-modal.hd-cr-summary-modal .hd-cr-week-cal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	padding: 0;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-left: 0;
	border-radius: 0 var(--hd-radius-sm, 8px) var(--hd-radius-sm, 8px) 0;
	color: var(--hd-blue);
	cursor: pointer;
	transition: background .15s ease;
}
.hd-modal.hd-cr-summary-modal .hd-cr-week-cal-btn:hover,
.hd-modal.hd-cr-summary-modal .hd-cr-week-cal-btn:focus-visible,
.home-dash .hd-news-info-btn:hover,
.home-dash .hd-news-info-btn:focus-visible {
	background: var(--hd-blue-a12);
	outline: none;
}

/* Loading state inside modal */
.hd-modal.hd-cr-summary-modal .hd-cr-loading,
.hd-modal.hd-cr-breakdown-modal .hd-cr-loading {
	text-align: center;
	padding: 3rem 1rem;
}
.hd-modal.hd-cr-summary-modal .hd-cr-loading-text,
.hd-modal.hd-cr-breakdown-modal .hd-cr-loading-text {
	margin: .85rem 0 0;
	font-size: .85rem;
	color: var(--hd-muted);
}

/* JS-rendered summary content lives here — keep it minimal so the
   inline-built cards/tables from renderWorkSummary inherit Bootstrap
   defaults rather than fighting the suite chrome. */

/* Modal footer */


@media (max-width: 991.98px) {
}

/* =============================================================================
   Certification Agency Builder — hd-agency-* (mirrors hd-cert-*)
   ============================================================================= */
@media (min-width: 768px) {
}
@media (max-width: 991.98px) {
}

/* ==============================================================
   INDUSTRY BUILDER (.hd-ind)
   Mirrors the cert/agency builder layout — sidebar list (left) +
   detail form (right) on the list+detail mode, centered single
   form on the create-only mode.
   ============================================================== */

/* Sidebar */

/* List */

/* Form (used in both create-only mode and the _industry_update.html partial) */

/* Modal — labels and footer styling specific to the create modal */

@media (max-width: 991.98px) {
}

/* =============================================================================
   Company Config — hd-cfg-*
   ============================================================================= */
.home-dash .hd-cfg-main {
	padding-top: .5rem;
	display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 768px) {
}

/* Side-by-side panel pairs */
.home-dash .hd-cfg-row-pair .hd-panel,
.home-dash .hd-grp-info-row .hd-panel {
	width: 100%; display: flex; flex-direction: column;
}

.home-dash .hd-cfg-preview {
	display: flex; flex-direction: column; gap: .65rem;
	padding: 1rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-cfg-preview-label,
.home-dash .hd-stb-q-overview-meta-label,
.home-dash .hd-stb-q-update-context-label {
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--hd-muted);
}
.home-dash .hd-cfg-preview-frame {
	display: flex; align-items: center; justify-content: center;
	min-height: 110px; padding: 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
}
.home-dash .hd-cfg-preview-img {
	max-height: 80px; max-width: 100%;
	width: auto; height: auto; object-fit: contain;
}
.home-dash .hd-cfg-preview-empty {
	display: flex; flex-direction: column;
	align-items: center; gap: .35rem;
	color: var(--hd-muted);
	font-size: .82rem;
	text-align: center;
}
.home-dash .hd-cfg-preview-empty .bi {
	font-size: 1.4rem; color: var(--hd-blue); opacity: .55;
}
.home-dash .hd-cfg-preview-delete {
	display: flex; align-items: center; gap: .55rem;
	padding: .5rem .65rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-cfg-preview-delete:hover {
	border-color: rgba(220, 53, 69, .35);
	background: rgba(220, 53, 69, .06);
}
.home-dash .hd-cfg-preview-delete.is-disabled {
	opacity: .55; cursor: not-allowed;
}
.home-dash .hd-cfg-preview-delete-label,
.home-dash .hd-kb-note-author {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .82rem; font-weight: 600; color: var(--hd-ink);
}
.home-dash .hd-cfg-preview-delete-label .bi {
	color: #b91c1c; font-size: .85rem;
}
.home-dash .hd-cfg-actions {
	display: flex; justify-content: flex-end; gap: .5rem;
	padding: 1rem 0 1.25rem;
	margin-top: .5rem;
	border-top: 1px solid var(--hd-line);
}.home-dash .hd-empform-actions,
.home-dash .hd-ugm-actions {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: .75rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
	flex-wrap: wrap;
}.home-dash .hd-empform-actions-left,
.home-dash .hd-ugm-actions-left {
	display: inline-flex; align-items: center; gap: .55rem;
	min-width: 0;
}.home-dash .hd-empform-actions-icon,
.home-dash .hd-ugm-actions-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: var(--hd-blue); font-size: 1rem; flex: 0 0 auto;
}.home-dash .hd-empform-actions-label {
	font-weight: 700; font-size: 1rem; color: var(--hd-ink);
}.hd-cs-footer-col,
.home-dash .hd-crb-hero-actions,
.home-dash .hd-cpv-hero-actions {
	display: inline-flex; align-items: center; gap: .5rem;
	flex-wrap: wrap;
}
.home-dash .hd-emp-mgr-toolbar {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
	padding: .85rem 1rem;
	display: flex; flex-direction: column; gap: .75rem;
	margin: 0;
}
.home-dash .hd-emp-mgr-toolbar-row {
	display: flex; align-items: center; gap: .75rem;
	flex-wrap: wrap;
}
.home-dash .hd-emp-mgr-toolbar-filters {
	border-top: 1px dashed var(--hd-line);
	padding-top: .75rem;
}
.home-dash .hd-emp-mgr-search {
	flex: 1 1 280px; min-width: 220px;
}
.home-dash .hd-emp-mgr-search-submit {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0;
	margin-right: -.4rem;
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	border: 0; border-radius: 7px;
	color: #fff; cursor: pointer;
	transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.home-dash .hd-emp-mgr-search-submit:hover,
.home-dash .hd-emp-mgr-search-submit:focus-visible {
	filter: brightness(1.05);
	box-shadow: 0 2px 6px var(--hd-blue-a35);
	outline: none;
}
.home-dash .hd-emp-mgr-perpage {
	display: inline-flex; align-items: center; gap: .55rem;
	flex: 0 0 auto;
}
.home-dash .hd-emp-mgr-perpage-label {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .78rem; font-weight: 600; color: var(--hd-muted);
	margin: 0; letter-spacing: .02em; white-space: nowrap;
}
.home-dash .hd-emp-mgr-perpage-select {
	width: auto; min-width: 5rem;
	padding-top: .35rem; padding-bottom: .35rem;
}
@media (max-width: 575.98px) {
}
.home-dash .hd-emp-mgr-pager {
	display: inline-flex; align-items: center; gap: .25rem;
	flex: 0 0 auto; margin-left: auto;
}
.home-dash .hd-emp-mgr-pager-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border-radius: 8px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	color: var(--hd-ink); text-decoration: none;
	font-size: .85rem;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.home-dash .hd-emp-mgr-pager-btn:hover,
.home-dash .hd-emp-mgr-pager-btn:focus-visible {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	color: #fff; border-color: transparent; outline: none;
}
.home-dash .hd-emp-mgr-pager-current {
	padding: 0 .55rem; font-size: .82rem; font-weight: 700;
	color: var(--hd-ink); white-space: nowrap;
}
.home-dash .hd-emp-mgr-filter,
.home-dash .hd-lst-respondent-avatar { flex: 0 0 auto; position: relative; }
.home-dash .hd-emp-mgr-filter-btn {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .4rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: 8px;
	color: var(--hd-ink); font-size: .82rem; font-weight: 600;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.home-dash .hd-emp-mgr-filter-btn:hover,
.home-dash .hd-emp-mgr-filter-btn:focus-visible,
.home-dash .hd-emp-mgr-filter-btn[aria-expanded="true"],
.home-dash .hd-mfg-select-back:hover,
.home-dash .hd-mfg-select-back:focus-visible {
	background: var(--hd-surface-2); border-color: var(--hd-blue-soft);
	color: var(--hd-blue); outline: none;
}
.home-dash .hd-emp-mgr-filter-btn.dropdown-toggle::after,
.home-dash .hd-news-form .hd-field-lock {
	margin-left: .15rem; color: var(--hd-muted);
}
.home-dash .hd-emp-mgr-filter-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px;
	padding: 0 .35rem; border-radius: 999px;
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
}
.home-dash .hd-emp-mgr-filter-menu {
	min-width: 240px; max-width: 320px; max-height: 340px;
	overflow-y: auto; padding: .35rem;
	border: 1px solid var(--hd-line); border-radius: 10px;
	box-shadow: var(--hd-shadow-md);
	background: var(--hd-surface);
}
.home-dash .hd-emp-mgr-filter-search {
	position: sticky; top: 0;
	display: flex; align-items: center; gap: .4rem;
	padding: .35rem .55rem; margin: 0 0 .35rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line); border-radius: 8px;
}
.home-dash .hd-emp-mgr-filter-search .bi {
	color: var(--hd-muted); font-size: .82rem; flex-shrink: 0;
}
.home-dash .hd-emp-mgr-filter-search-input {
	flex: 1; min-width: 0; padding: .15rem 0;
	background: transparent; border: 0; outline: 0;
	font-size: .85rem; color: var(--hd-ink);
	font-family: inherit;
}
.home-dash .hd-emp-mgr-filter-list {
	display: flex; flex-direction: column; gap: .1rem;
}
.home-dash .hd-emp-mgr-filter-option {
	display: flex !important; align-items: center; gap: .5rem;
	padding: .45rem .55rem; border-radius: 6px;
	font-size: .85rem; color: var(--hd-ink);
	cursor: pointer;
	transition: background .15s ease;
}
.home-dash .hd-emp-mgr-filter-actions {
	display: inline-flex; gap: .4rem;
	flex: 0 0 auto; margin-left: auto;
}
.home-dash .hd-emp-mgr-empty,
.home-dash .hd-perm-grid-empty,
.hd-modal.hd-empform-modal .hd-empform-no-assignments { padding: 3rem 2rem; }

.hd-modal.hd-emp-mgr-modal .hd-emp-mgr-bulk-userpick-toggle {
	width: 100%; text-align: left; padding-right: 2rem; position: relative;
}
.hd-modal.hd-emp-mgr-modal .hd-emp-mgr-bulk-userpick-toggle::after {
	position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
}
.hd-modal.hd-emp-mgr-modal .hd-emp-mgr-bulk-userpick-menu {
	width: 100%; max-height: 320px; overflow-y: auto; padding: .35rem;
	border: 1px solid var(--hd-line); border-radius: 10px;
	box-shadow: var(--hd-shadow-md);
	background: var(--hd-surface);
}
.hd-modal.hd-emp-mgr-modal .hd-emp-mgr-bulk-msg {
	margin: .85rem 0 0; padding: .55rem .8rem;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .25);
	border-radius: 8px; font-size: .82rem; color: #991b1b;
}

@media (max-width: 767.98px) {
	.home-dash .hd-emp-mgr-filter-actions {
		margin-left: 0; width: 100%; justify-content: flex-end;
	}
	.home-dash .hd-emp-mgr-toolbar-filters { gap: .4rem; }
	.home-dash .hd-emp-mgr-filter-btn { font-size: .78rem; padding: .35rem .6rem; }
}

/* =============================================================================
   Group Builder — hd-grp-*
   ============================================================================= */
.hd-grp,
.hd-app,
.hd-lang,
.hd-langb,
.hd-licmgr,
.hd-lic,
.hd-mfg,
.hd-perm,
.hd-empform,
.hd-ugm,
.home-dash .hd-eq,
.hd-applist,
.hd-cat,
.hd-cb,
.home-dash .hd-gb-col,
.home-dash .hd-kb-col,
.home-dash .hd-tb-col,
.home-dash .hd-fb-col,
.home-dash .hd-stb-col,
.home-dash .hd-qb-col,
.home-dash .hd-pb-col,
.home-dash .hd-stb-q-builder-col,
.home-dash .hd-stb-q-survey-col,
.home-dash .hd-lst-col,
.home-dash .hd-rb-col,
.home-dash .hd-crb-col,
.home-dash .hd-ob-col,
.home-dash .hd-teb-col,
.home-dash .hd-lsb-col,
.home-dash .hd-inb-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.hd-grp-form { margin: 0; min-width: 0; }
.home-dash .hd-grp > .row.hd-grp-main,
.home-dash .hd-grp-main,
.home-dash .hd-app > .row.hd-app-main,
.home-dash .hd-app-main,
.home-dash .hd-licmgr > .row.hd-licmgr-main,
.home-dash .hd-licmgr-main,
.home-dash .hd-mfg > .row.hd-mfg-main,
.home-dash .hd-mfg-main,
.home-dash .hd-perm > .row.hd-perm-main,
.home-dash .hd-perm-main,
.home-dash .hd-empform > .row.hd-empform-main,
.home-dash .hd-empform-main,
.home-dash .hd-eq > .row.hd-eq-main,
.home-dash .hd-eq-main,
.home-dash .hd-cb > .row.hd-cb-main,
.home-dash .hd-cb-main { padding-top: .25rem; }
.home-dash:has(.hd-grp) { overflow-x: clip; }
.home-dash:has(.hd-grp) .hd-hero::before {
	clip-path: inset(0 round var(--hd-radius));
}
.home-dash:has(.hd-grp) .hd-hero::after {
	right: 0; top: 0;
	width: 280px; height: 280px;
	clip-path: inset(0 round var(--hd-radius));
}

.home-dash .hd-grp-deptpick-caret {
	font-size: .65rem; opacity: .7; margin-left: .15rem;
}

.home-dash .hd-grp-hero-actions-stack {
	display: flex; flex-direction: column;
	align-items: stretch; gap: .5rem; min-width: 0;
}
.home-dash .hd-grp-hero-actions-row {
	display: flex; flex-wrap: wrap; gap: .5rem;
}.home-dash .hd-grp-hero-actions-row--main { justify-content: flex-end; }


.home-dash .hd-grp-segctl {
	display: flex; gap: 2px; padding: 3px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	margin-bottom: .75rem;
}
.home-dash .hd-grp-segctl-btn {
	flex: 1 1 0;
	display: inline-flex; align-items: center; justify-content: center;
	gap: .4rem; padding: .45rem .7rem;
	border-radius: 7px; background: transparent;
	color: var(--hd-muted); font-size: .85rem; font-weight: 600;
	text-decoration: none;
	transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.home-dash .hd-grp-segctl-btn:hover {
	color: var(--hd-ink);
	background: rgba(0, 0, 0, .04);
}
.home-dash .hd-grp-segctl-btn .bi {
	font-size: .9rem; color: var(--hd-muted);
	transition: color .16s ease;
}
.home-dash .hd-grp-segctl-btn.is-active {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	color: #fff;
	box-shadow: 0 2px 6px var(--hd-blue-a25);
}

.home-dash .hd-grp-notes-edit {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0;
	background: transparent;
	border: 1px solid var(--hd-line);
	border-radius: 8px; color: var(--hd-muted);
	cursor: not-allowed; opacity: .55;
}
.home-dash .hd-grp-notes-empty {
	display: flex; flex-direction: column;
	align-items: center; gap: .65rem;
	padding: 1.5rem 1rem;
	color: var(--hd-muted);
	text-align: center;
	font-size: .88rem; font-style: italic;
}
.home-dash .hd-grp-notes-empty .bi {
	font-size: 1.4rem; color: var(--hd-blue); opacity: .5;
}

.home-dash .hd-grp-search-results { min-height: 0; }
.home-dash .hd-grp-search-results .search-container {
	display: block; border-radius: 8px; overflow: hidden;
}

.home-dash .hd-grp-sub-head,
.home-dash .hd-tb-update-head,
.home-dash .hd-pb-step-list-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: .75rem; flex-wrap: wrap;
}
.home-dash .hd-grp-sub-head-left {
	display: inline-flex; align-items: center; gap: .65rem;
	flex-wrap: wrap;
}
.home-dash .hd-grp-sub-title {
	display: inline-flex; align-items: center; gap: .45rem;
	margin: 0; font-size: .95rem; font-weight: 700; color: var(--hd-ink);
}.home-dash .hd-grp-sub-home,
.home-dash .hd-grp-sub-item-reactivate,
.home-dash .hd-grp-member-supervisor,
.home-dash .hd-grp-member-remove,
.home-dash .hd-eq-tasks-count,
.home-dash .hd-emp-search-submit,
.home-dash .hd-lp-accordion-toggle .bi,
.hd-lst-brainstorm-page #response-card .hd-panel-head,
.home-dash .hd-crb-image-picker > .dropdown,
.note-editor.fullscreen .note-toolbar { flex: 0 0 auto; }
.home-dash .hd-grp-newgroup-menu {
	width: 360px; max-width: calc(100vw - 2rem);
	padding: .85rem;
	border: 1px solid var(--hd-line); border-radius: 12px;
	box-shadow: var(--hd-shadow-md);
	background: var(--hd-surface);
}
.home-dash .hd-grp-newgroup-error {
	display: flex; align-items: center; gap: .35rem;
	margin: 0; padding: .4rem .6rem;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .25);
	border-radius: 6px;
	font-size: .76rem; color: #991b1b;
}
.home-dash .hd-grp-newgroup-actions {
	display: flex; justify-content: flex-end; gap: .4rem;
	margin-top: .35rem;
}

.home-dash .hd-grp-sub-item {
	display: flex; align-items: center; gap: .5rem; padding: 0;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px; overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-grp-sub-item.is-inactive,
.home-dash .hd-emp-card.is-inactive {
	background: var(--hd-surface-2); opacity: .85;
}
.home-dash .hd-grp-sub-item-toggle {
	flex: 1 1 auto;
	display: flex; align-items: center; gap: .55rem;
	padding: .55rem .75rem;
	background: transparent; border: 0;
	color: var(--hd-ink); text-align: left; cursor: pointer;
	min-width: 0;
}
.home-dash .hd-grp-sub-item-icon {
	flex: 0 0 auto; color: var(--hd-blue); font-size: .92rem;
}
.home-dash .hd-grp-sub-item-name {
	flex: 1 1 auto; min-width: 0;
	font-size: .9rem; font-weight: 600; color: var(--hd-ink);
	line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis;
}
.home-dash .hd-grp-sub-item-city {
	font-weight: 400; color: var(--hd-muted); font-size: .82rem;
}
.home-dash .hd-grp-sub-item-actions {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: 0 .65rem 0 0;
}
.home-dash .hd-grp-sub-item-action {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 6px;
	color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}

.home-dash .hd-grp-members-list {
	display: flex; flex-direction: column; gap: .4rem;
	max-height: 600px; overflow-y: auto;
	padding-right: .25rem;
}
.home-dash .hd-grp-members-list::-webkit-scrollbar-thumb {
	background: var(--hd-line); border-radius: 3px;
}.home-dash .hd-grp-members-list::-webkit-scrollbar-thumb:hover { background: var(--hd-muted); }

.home-dash .hd-grp-member,
.home-dash .hd-crb-marketplace-card {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px; overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-grp-member.group-member-marked-for-deletion {
	background: rgba(220, 53, 69, .06);
	border-color: rgba(220, 53, 69, .35);
	opacity: .7;
}
.home-dash .hd-grp-member-row {
	display: flex; align-items: center; gap: .65rem;
	padding: .5rem .75rem;
}
.home-dash .hd-grp-member-avatar {
	flex: 0 0 auto; width: 40px; height: 40px;
	border-radius: 50%; overflow: hidden;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	box-shadow: 0 0 0 1px var(--hd-line);
}
.home-dash .hd-grp-member-identity {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
}
.home-dash .hd-grp-member-name {
	color: var(--hd-ink); font-size: .9rem; font-weight: 500;
	text-decoration: none;
	overflow: hidden; text-overflow: ellipsis;
}
.home-dash .hd-grp-member-removing {
	margin-left: .35rem; font-size: .76rem;
	color: #b91c1c; font-style: italic;
}
.home-dash .hd-grp-member-remove-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0;
	background: transparent;
	border: 1px solid transparent; border-radius: 6px;
	color: var(--hd-muted); cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.home-dash .hd-grp-member-remove-spacer {
	display: inline-block; width: 32px; height: 32px;
}
.home-dash .hd-grp-member-detail {
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
	padding: .65rem .85rem;
}
.home-dash .hd-grp-member-detail-head,
.home-dash .hd-grp-member-detail-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
	gap: .5rem; font-size: .82rem;
	padding: .35rem 0;
}
.home-dash .hd-grp-member-detail-head {
	font-weight: 700; color: var(--hd-ink);
	border-bottom: 1px dashed var(--hd-line);
	margin-bottom: .25rem;
}
.home-dash .hd-grp-member-detail-row:nth-child(even) {
	background: var(--hd-surface);
	border-radius: 6px;
	padding-left: .35rem; padding-right: .35rem;
}
.home-dash .hd-grp-member-detail-col.is-type,
.home-dash .hd-lic-alloc-total,
.home-dash .hd-prog-card-members-label,
.home-dash .hd-cb-applic-alloc-total,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-using-total { color: var(--hd-muted); font-weight: 600; }

.hd-modal.hd-grp-modal .hd-grp-modal-note {
	display: flex; align-items: center; gap: .45rem;
	margin-top: 1rem; padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line); border-radius: 8px;
	font-size: .8rem; color: var(--hd-muted);
}
.hd-modal.hd-grp-managers-modal .hd-grp-managers-list {
	display: flex; flex-direction: column; gap: .35rem;
	max-height: 320px; overflow-y: auto;
	margin-top: .35rem; padding: .35rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line); border-radius: 8px;
}
.hd-modal.hd-grp-managers-modal .hd-grp-managers-option {
	display: flex; align-items: center; gap: .55rem;
	padding: .4rem .55rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: 6px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.hd-modal.hd-grp-managers-modal .hd-grp-managers-option-label {
	flex: 1 1 auto; min-width: 0;
	font-size: .88rem; color: var(--hd-ink);
}
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-section-title {
	display: inline-flex; align-items: center; gap: .35rem;
	margin: 1rem 0 .65rem;
	font-size: .82rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--hd-muted);
}
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-group {
	margin-bottom: .85rem; padding: .65rem .8rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line); border-radius: 9px;
}
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-group-title {
	display: inline-flex; align-items: center; gap: .4rem;
	margin: 0 0 .55rem;
	font-size: .88rem; font-weight: 700; color: var(--hd-ink);
}
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-item {
	margin-bottom: .35rem; padding: .5rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: 7px;
	font-size: .87rem; color: var(--hd-ink);
	gap: .55rem;
}
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-count {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: 7px;
	font-size: .87rem; color: var(--hd-muted);
}
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-fallback {
	margin: 0 0 .85rem; padding-left: 1.25rem;
	font-size: .87rem; color: var(--hd-ink);
}
.hd-modal.hd-grp-conflict-modal .hd-grp-conflict-footnote {
	display: flex; align-items: center; gap: .45rem;
	margin-top: .85rem; padding: .65rem .8rem;
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 8px;
	font-size: .85rem; color: var(--hd-ink);
}

/* =============================================================================
   App / Feature Manager — hd-app-* / hd-feat-*
   ============================================================================= */
.home-dash.hd-app-manager,
.home-dash.hd-mfg-manager,
.home-dash.hd-eq-manager,
.home-dash.hd-cb-builder { padding: 0 0 2rem; }
@media (min-width: 768px) {
	.home-dash .hd-app > .row.hd-app-main,
	.home-dash .hd-app-main,
	.home-dash .hd-mfg > .row.hd-mfg-main,
	.home-dash .hd-mfg-main,
	.home-dash .hd-eq > .row.hd-eq-main,
	.home-dash .hd-eq-main,
	.home-dash .hd-cb > .row.hd-cb-main,
	.home-dash .hd-cb-main { padding-top: .5rem; }
}
.home-dash .hd-app-select-add,
.home-dash .hd-feat-select-add,
.home-dash .hd-mfg-select-add {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0;
	border: 1px solid var(--hd-white-a18); border-radius: 8px;
	background: var(--hd-white-a12);
	color: var(--hd-white-a92); cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.home-dash .hd-app-select-add:hover,
.home-dash .hd-app-select-add:focus-visible,
.home-dash .hd-feat-select-add:hover,
.home-dash .hd-feat-select-add:focus-visible,
.home-dash .hd-mfg-select-add:hover,
.home-dash .hd-mfg-select-add:focus-visible,
.home-dash .hd-cb-select-add:hover,
.home-dash .hd-cb-select-add:focus-visible,
.home-dash .hd-jc-sidebar-add:hover,
.home-dash .hd-jc-sidebar-add:focus-visible,
.home-dash .hd-cert-sidebar-add:hover,
.home-dash .hd-cert-sidebar-add:focus-visible,
.home-dash .hd-agency-sidebar-add:hover,
.home-dash .hd-agency-sidebar-add:focus-visible,
.home-dash .hd-ind-sidebar-add:hover,
.home-dash .hd-ind-sidebar-add:focus-visible {
	background: var(--hd-white-a25);
	border-color: var(--hd-white-a50);
	color: #fff;
	outline: none; transform: translateY(-1px);
}
@media (max-width: 991.98px) {
}
.home-dash .hd-app-list-item,
.home-dash .hd-cb-list-item {
	position: relative;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px; overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-app-list-item.is-selected,
.home-dash .hd-mfg-list-item.is-selected,
.home-dash .hd-perm-admin-item.is-selected,
.home-dash .hd-cb-list-item.is-selected,
.home-dash .hd-licmgr-list-item.is-selected {
	border-color: var(--hd-blue);
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
}
.home-dash .hd-app-list-link,
.home-dash .hd-cb-list-link {
	display: flex; align-items: center; gap: .5rem;
	padding: .55rem .75rem .55rem .85rem;
	color: var(--hd-ink); text-decoration: none;
	font-size: .88rem; min-width: 0;
}
.home-dash .hd-app-list-grip {
	flex: 0 0 auto; color: var(--hd-muted); font-size: .82rem;
}.home-dash .hd-app-remove-item .hd-app-list-link.is-current {
	cursor: default; color: var(--hd-blue); font-weight: 700;
}
.home-dash .hd-app-overview-label {
	font-size: .68rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--hd-muted); margin-bottom: .35rem;
}
.home-dash .hd-app-overview-value {
	font-size: .92rem; color: var(--hd-ink); line-height: 1.5;
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line); border-radius: 8px;
}
.home-dash .hd-app-info-note,
.hd-modal .hd-app-info-note {
	display: flex; align-items: flex-start; gap: .55rem;
	margin-top: 1rem; padding: .65rem .85rem;
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 8px;
	font-size: .85rem; color: var(--hd-ink); line-height: 1.45;
}
.home-dash .hd-app-info-note .bi,
.hd-modal .hd-app-info-note .bi {
	color: var(--hd-blue); flex: 0 0 auto; margin-top: .1rem;
}

/* App create/update form (app_create_update.html) — narrow centered
   panel with the title/description/price/product fields, plus
   label/vendor on create only. The panel sits centered in the
   settings_content slot. */
.home-dash .hd-app-form-page,
.home-dash .hd-tb-delete-layout {
	display: flex;
	justify-content: center;
	width: 100%;
}
.home-dash .hd-app-form-panel {
	width: 100%;
	max-width: 56rem;
}
.home-dash .hd-app-form-head-actions {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-left: auto;
	flex-shrink: 0;
}
.home-dash .hd-app-form-body,
.home-dash .hd-tb-delete-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.15rem 1.25rem 1.25rem;
}
.home-dash .hd-app-form-row,
.home-dash .hd-gb-grid,
.home-dash .hd-kb-grid,
.home-dash .hd-tb-update-grid,
.home-dash .hd-tb-grid,
.home-dash .hd-fb-grid,
.home-dash .hd-stb-grid,
.home-dash .hd-qb-grid,
.home-dash .hd-qb-overview-row,
.home-dash .hd-stb-q-builder-grid,
.home-dash .hd-stb-q-survey-grid,
.hd-modal .hd-su-modal-grid,
.home-dash .hd-lst-grid,
.hd-modal .hd-lb-modal-grid,
.home-dash .hd-rb-grid,
.home-dash .hd-crb-grid,
.home-dash .hd-crb-grid--2,
.home-dash .hd-crb-grid--3,
.home-dash .hd-ob-grid,
.home-dash .hd-ob-update-grid,
.home-dash .hd-teb-grid,
.home-dash .hd-lsb-grid,
.home-dash .hd-inb-grid,
.home-dash .hd-inb-build-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 576px) {
}
/* Field margin-bottom from the suite default would stack with the
   form-body flex gap — zero it inside this form so the gap value
   is the only spacing between rows. */

.home-dash .hd-feat-select-body { padding: .75rem .85rem; }
.home-dash .hd-feat-list-item {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-feat-row {
	display: flex; align-items: flex-start; gap: .65rem;
	padding: .65rem .85rem;
}
.home-dash .hd-feat-row-main,
.home-dash .hd-crb-objective-main {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: .35rem;
}
.home-dash .hd-feat-row-title-line {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: .55rem; min-width: 0;
}
/* .hd-feat-row-title is styled with .hd-licmgr-list-title (identical) */
.home-dash .hd-feat-row-meta {
	display: inline-flex; flex-wrap: wrap; gap: .35rem;
}
.home-dash .hd-feat-row-pill {
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .15rem .5rem; border-radius: 999px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	font-size: .7rem; font-weight: 600; color: var(--hd-muted);
	letter-spacing: .01em; white-space: nowrap;
}
.home-dash .hd-feat-row-pill .bi { font-size: .72rem; color: var(--hd-blue); }
.home-dash .hd-feat-row-pill.is-active {
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	border-color: var(--hd-blue);
	color: var(--hd-blue);
}
/* Dark mode — the faint --hd-lime-a12/--hd-blue-a12 tint + --hd-blue text
   go dark-on-dark; give the active pill a solid --hd-blue-soft surface
   with themed --hd-ink text + icon so it stays legible and stands out. */
[data-bs-theme=dark] .home-dash .hd-feat-row-pill.is-active,
[data-bs-theme=dark] .home-dash .hd-feat-row-pill.is-active .bi,
[data-bs-theme=dark] .home-dash .hd-lang-vis-pill.is-public,
[data-bs-theme=dark] .home-dash .hd-lang-vis-pill.is-public .bi,
[data-bs-theme=dark] .home-dash .hd-lang-vis-pill.is-private,
[data-bs-theme=dark] .home-dash .hd-lang-vis-pill.is-private .bi {
	background: var(--hd-blue-soft);
	color: var(--hd-ink);
}
.home-dash .hd-feat-row-desc {
	font-size: .82rem; color: var(--hd-muted); line-height: 1.45;
	overflow: hidden; text-overflow: ellipsis;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.home-dash .hd-feat-row-empty { color: #b91c1c; font-style: italic; }
.home-dash .hd-feat-row-actions {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: .25rem;
	margin-top: .15rem;
}
.home-dash .hd-feat-row-action {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; padding: 0; border-radius: 6px;
	color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none; cursor: pointer;
}.home-dash .hd-news-action + .hd-news-action { margin-left: .15rem; }
.home-dash .hd-lang-list-body,
.home-dash .hd-lic-list-body,
.home-dash .hd-ugm-list-body,
.home-dash .hd-applist-body,
.home-dash .hd-cb-licenses-body,
.home-dash .hd-cb-applic-body { padding: .75rem; }
@media (min-width: 992px) {
	.home-dash .hd-lang-list-keyrow {
		display: grid;
		grid-template-columns:
			minmax(60px, .6fr)
			minmax(0, 2fr)
			minmax(0, 1.6fr)
			minmax(120px, .8fr)
			minmax(110px, .6fr);
		gap: .75rem;
		padding: .55rem .9rem; margin: 0 0 .35rem;
		background: var(--hd-surface-2);
		border: 1px solid var(--hd-line); border-radius: 8px;
		font-size: .68rem; font-weight: 700;
		letter-spacing: .12em; text-transform: uppercase;
		color: var(--hd-muted);
	}
}
.home-dash .hd-lang-key--actions,
.home-dash .hd-ugm-key--actions { text-align: right; }
.home-dash .hd-lang-row,
.home-dash .hd-lic-row,
.home-dash .hd-applist-row {
	display: flex; flex-direction: column; gap: .55rem;
	padding: .75rem .9rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: 9px;
	transition: border-color .18s ease, background .18s ease;
}
@media (min-width: 992px) {
	.home-dash .hd-lang-row {
		display: grid;
		grid-template-columns:
			minmax(60px, .6fr)
			minmax(0, 2fr)
			minmax(0, 1.6fr)
			minmax(120px, .8fr)
			minmax(110px, .6fr);
		gap: .75rem; align-items: center;
		padding: .65rem .9rem;
	}
}
.home-dash .hd-lang-cell,
.home-dash .hd-licmgr-table-cell,
.home-dash .hd-lic-cell,
.home-dash .hd-ugm-cell,
.home-dash .hd-applist-cell,
.home-dash .hd-cb-lic-cell,
.home-dash .hd-cb-applic-cell {
	display: flex; align-items: baseline; gap: .55rem; min-width: 0;
}.home-dash .hd-ugm-cell-label {
	display: inline-block; flex: 0 0 auto; min-width: 6.5rem;
	font-size: .7rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-lang-cell-value,
.home-dash .hd-lic-cell-value,
.home-dash .hd-ugm-cell-value,
.home-dash .hd-applist-cell-value {
	flex: 1 1 auto; min-width: 0;
	display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap;
	font-size: .9rem; color: var(--hd-ink);
}
@media (min-width: 992px) {
	.home-dash .hd-lang-cell,
	.home-dash .hd-licmgr-table-cell,
	.home-dash .hd-lic-cell,
	.home-dash .hd-ugm-cell,
	.home-dash .hd-applist-cell,
	.home-dash .hd-cb-lic-cell,
	.home-dash .hd-cb-applic-cell { display: block; gap: 0; }
	.home-dash .hd-lang-cell-value { display: inline-flex; align-items: center; }
	.home-dash .hd-lang-cell--actions,
	.home-dash .hd-ugm-cell--actions { text-align: right; }
	.home-dash .hd-lang-cell--actions .hd-lang-cell-value {
		justify-content: flex-end; gap: .25rem;
	}
}
.home-dash .hd-lang-id-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.6rem; padding: .15rem .45rem; border-radius: 6px;
	background: var(--hd-surface-2); border: 1px solid var(--hd-line);
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .76rem; font-weight: 700; color: var(--hd-ink);
}
/* .hd-lang-title is styled with the shared --hd-ink/700 rule above */
.home-dash .hd-lang-default-badge {
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .1rem .45rem; border-radius: 999px;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: var(--hd-blue);
	font-size: .65rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
}
.home-dash .hd-lang-default-badge .bi { color: #d49b00; font-size: .68rem; }
.home-dash .hd-lang-cell--company .hd-lang-cell-value {
	flex-direction: row; align-items: baseline; gap: .4rem;
}
.home-dash .hd-lang-company-name {
	color: var(--hd-ink); font-weight: 500;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}.home-dash .hd-lang-vis-pill {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .15rem .55rem; border-radius: 999px;
	font-size: .72rem; font-weight: 600;
	border: 1px solid var(--hd-line);
}
.home-dash .hd-lang-vis-pill.is-public,
.home-dash .hd-lang-vis-pill.is-private {
	background: var(--hd-blue-a06);
	border-color: var(--hd-blue-a25);
	color: var(--hd-blue);
}
.home-dash .hd-qb-al-row--head:hover,
.home-dash .hd-lst-plan-status--idle,
.home-dash .hd-tl-stat--secondary .hd-tl-stat-icon {
	background: var(--hd-surface-2); color: var(--hd-muted);
}
.home-dash .hd-lang-action {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0;
	border-radius: 7px;
	color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none; cursor: pointer;
}
.home-dash .hd-lang-action.is-locked {
	color: var(--hd-muted); cursor: not-allowed; opacity: .55;
}

/* =============================================================================
   Language Builder — hd-langb-*
   ============================================================================= */
.home-dash .hd-langb-actions {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: .85rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs); flex-wrap: wrap;
}
.home-dash .hd-langb-actions-left {
	display: inline-flex; align-items: center; gap: .75rem; min-width: 0;
}
.home-dash .hd-langb-actions-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 9px;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: var(--hd-blue); font-size: 1.1rem; flex: 0 0 auto;
}
.home-dash .hd-langb-actions-stack,
.home-dash .hd-kb-acc-sync-name {
	display: flex; flex-direction: column; gap: .1rem; min-width: 0;
}.home-dash .hd-langb-actions-eyebrow {
	font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
	font-weight: 700; color: var(--hd-muted); line-height: 1;
}
.home-dash .hd-langb-actions-name {
	font-size: 1.1rem; font-weight: 700; color: var(--hd-ink); line-height: 1.25;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-dash .hd-langb-intro { text-align: center; padding: 1rem 0; }
.home-dash .hd-langb-intro-title {
	font-size: 1.1rem; font-weight: 700; color: var(--hd-ink); margin: 0 0 .35rem;
}
.home-dash .hd-langb-intro-sub,
.home-dash .hd-cpv-empty .hd-empty-text {
	font-size: .9rem; color: var(--hd-muted); margin: 0;
}
.home-dash .hd-langb-grid-wrap {
	max-width: 960px; margin: 0 auto; width: 100%;
}
.home-dash .hd-langb-tile-grid,
.hd-cpv-split.is-menu-hidden { grid-template-columns: 1fr; }
@media (min-width: 576px) {
	.home-dash .hd-langb-tile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =============================================================================
   License Manager (per-license detail) — hd-licmgr-*
   ============================================================================= */
@media (max-width: 991.98px) {
	.home-dash .hd-licmgr-sidebar-body,
	.home-dash .hd-cb-select-body { max-height: 360px; }
}
.home-dash .hd-licmgr-list-item {
	position: relative;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px; overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-licmgr-list-link {
	display: block; padding: .65rem .85rem;
	color: var(--hd-ink); text-decoration: none;
}
.home-dash .hd-licmgr-list-row {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: .55rem; margin-bottom: .35rem;
}
.home-dash .hd-licmgr-list-app {
	display: inline-flex; align-items: center; gap: .4rem; min-width: 0;
}
.home-dash .hd-licmgr-list-title,
.home-dash .hd-feat-row-title {
	font-weight: 700; font-size: .92rem; color: var(--hd-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-licmgr-list-tier {
	flex: 0 0 auto;
	font-size: .72rem; font-weight: 600; color: var(--hd-muted);
	padding: .1rem .45rem; border-radius: 999px;
	background: var(--hd-surface-2); border: 1px solid var(--hd-line);
	white-space: nowrap;
}
.home-dash .hd-licmgr-list-meta {
	display: flex; flex-wrap: wrap; gap: .5rem;
	font-size: .76rem; color: var(--hd-muted);
	margin-bottom: .25rem;
}
.home-dash .hd-licmgr-list-meta-item {
	display: inline-flex; align-items: center; gap: .3rem;
}
.home-dash .hd-licmgr-list-meta-item .bi,
.home-dash .hd-cb-since-pill .bi { color: var(--hd-blue); font-size: .78rem; }
.home-dash .hd-licmgr-list-meta-label {
	letter-spacing: .04em; text-transform: uppercase;
	font-weight: 700; font-size: .65rem;
}
.home-dash .hd-licmgr-list-alloc {
	font-size: .78rem; color: var(--hd-muted);
	font-style: italic; line-height: 1.45;
}
.home-dash .hd-licmgr-empty,
.home-dash .hd-mfg-empty,
.home-dash .hd-perm-admin-empty { padding: 1.75rem 1rem; }
.home-dash .hd-licmgr-search,
.home-dash .hd-gb-related-search,
.home-dash .hd-qb-levels-list > li,
.hd-modal.hd-rb-course-delete-modal .hd-rb-course-delete-section,
.home-dash .hd-crb-marketplace-toggle { margin-bottom: .85rem; }
.home-dash .hd-licmgr-alloc-count {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .2rem .65rem; border-radius: 999px;
	background: var(--hd-white-a12);
	border: 1px solid var(--hd-white-a25);
	font-size: .76rem; font-weight: 700; color: var(--hd-white-a92);
}
.home-dash .hd-licmgr-alloc-count .bi { color: var(--hd-white-a80); font-size: .78rem; }
.home-dash .hd-licmgr-capacity {
	display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
	padding: .65rem .85rem; margin-bottom: .85rem;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .25);
	border-left: 3px solid #dc3545;
	border-radius: 8px;
	font-size: .85rem; color: #991b1b;
}
.home-dash .hd-licmgr-capacity .bi { color: #dc3545; flex: 0 0 auto; }
.home-dash .hd-licmgr-buy-link {
	margin-left: auto; color: #b91c1c; font-weight: 700; text-decoration: underline;
}
.home-dash .hd-licmgr-buy-link:hover { color: #7f1414; }
.home-dash .hd-licmgr-table-row {
	display: flex; flex-direction: column; gap: .55rem;
	padding: .65rem .85rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-licmgr-table-label {
	display: inline-block; flex: 0 0 auto; min-width: 7rem;
	font-size: .7rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-licmgr-table-value {
	flex: 1 1 auto; min-width: 0;
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .9rem; color: var(--hd-ink);
}
@media (min-width: 992px) {
	.home-dash .hd-licmgr-managers-body .hd-licmgr-table-keyrow {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(120px, 1fr);
	}
	.home-dash .hd-licmgr-managers-body .hd-licmgr-table-row {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(120px, 1fr);
		align-items: center; gap: .75rem;
	}
	.home-dash .hd-licmgr-alloc-body .hd-licmgr-table-keyrow {
		display: grid;
		grid-template-columns:
			minmax(0, 1.6fr) minmax(120px, .9fr) minmax(80px, .6fr)
			minmax(110px, .9fr) minmax(110px, .9fr) minmax(80px, .6fr);
	}
	.home-dash .hd-licmgr-alloc-body .hd-licmgr-table-row {
		display: grid;
		grid-template-columns:
			minmax(0, 1.6fr) minmax(120px, .9fr) minmax(80px, .6fr)
			minmax(110px, .9fr) minmax(110px, .9fr) minmax(80px, .6fr);
		align-items: center; gap: .75rem;
	}
	.home-dash .hd-licmgr-table-keyrow {
		padding: .55rem .9rem; margin: 0 0 .35rem;
		background: var(--hd-surface-2);
		border: 1px solid var(--hd-line); border-radius: 8px;
		font-size: .68rem; font-weight: 700;
		letter-spacing: .12em; text-transform: uppercase;
		color: var(--hd-muted); gap: .75rem;
	}
}
.home-dash .hd-licmgr-table-key-mark { color: #dc3545; margin-left: .15rem; }
.home-dash .hd-licmgr-mgr-name,
.home-dash .hd-licmgr-alloc-group,
.home-dash .hd-tb-toggle-label {
	display: inline-flex; align-items: center; gap: .4rem;
	font-weight: 600; color: var(--hd-ink); min-width: 0;
}
.home-dash .hd-licmgr-mgr-name .bi,
.home-dash .hd-licmgr-alloc-group .bi { color: var(--hd-blue); font-size: .85rem; flex: 0 0 auto; }
.home-dash .hd-licmgr-remove-check:checked,
.home-dash .hd-eq-maint .form-check-input:not(:checked) {
	background-color: #dc3545; border-color: #b02a37;
}.home-dash .hd-ugm-form-actions {
	display: flex; justify-content: flex-end;
	margin-top: 1rem; padding-top: .85rem;
	border-top: 1px solid var(--hd-line);
}

/* =============================================================================
   License List — hd-lic-* (sibling to license_manager but for the list page)
   ============================================================================= */
.home-dash .hd-lic-context-sep { opacity: .5; margin: 0 .35rem; }
.home-dash .hd-lic-debug {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .3rem .6rem;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	border-radius: 6px;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .72rem; color: var(--hd-white-a80);
	white-space: nowrap;
}
.home-dash .hd-lic-debug .bi { font-size: .72rem; opacity: .8; }
@media (min-width: 992px) {
	.home-dash .hd-lic-list-keyrow {
		display: grid;
		grid-template-columns:
			minmax(60px, .5fr) minmax(0, 1.5fr) minmax(0, 1.4fr)
			minmax(110px, .8fr) 1fr minmax(220px, auto);
		gap: .75rem;
		padding: .55rem .9rem; margin: 0 0 .35rem;
		background: var(--hd-surface-2);
		border: 1px solid var(--hd-line); border-radius: 8px;
		font-size: .68rem; font-weight: 700;
		letter-spacing: .12em; text-transform: uppercase;
		color: var(--hd-muted);
	}
	.home-dash .hd-lic-list-keyrow .hd-lic-key--dates,
	.home-dash .hd-lic-row .hd-lic-cell--dates {
		grid-column: 6;
		justify-self: center;
		text-align: center;
	}
}
.home-dash .hd-lic-row.is-expiring {
	border-color: rgba(220, 53, 69, .35);
	background: rgba(220, 53, 69, .03);
}
.home-dash .hd-lic-row.is-expiring:hover {
	border-color: rgba(220, 53, 69, .5);
	background: rgba(220, 53, 69, .06);
}
@media (min-width: 992px) {
	.home-dash .hd-lic-row {
		display: grid;
		grid-template-columns:
			minmax(60px, .5fr) minmax(0, 1.5fr) minmax(0, 1.4fr)
			minmax(110px, .8fr) 1fr minmax(220px, auto);
		gap: .75rem; align-items: center;
		padding: .65rem .9rem;
	}
}
@media (min-width: 992px) {
	.home-dash .hd-lic-cell-value,
	.home-dash .hd-ugm-cell-value,
	.home-dash .hd-applist-cell-value,
	.home-dash .hd-cb-lic-cell-value,
	.home-dash .hd-cb-applic-cell-value { display: inline-flex; }
}
.home-dash .hd-lic-id-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2rem; padding: .15rem .5rem; border-radius: 6px;
	background: var(--hd-surface-2); border: 1px solid var(--hd-line);
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .76rem; font-weight: 700; color: var(--hd-ink);
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.home-dash .hd-lic-id-pill:hover,
.home-dash .hd-lic-id-pill:focus-visible {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	border-color: transparent; color: #fff;
	outline: none; text-decoration: none;
}
.home-dash .hd-lic-app-link {
	display: inline-flex; align-items: center; gap: .4rem;
	color: var(--hd-blue); font-weight: 600; text-decoration: none;
	min-width: 0;
}
.home-dash .hd-lic-alloc-pill,
.home-dash .hd-cb-applic-alloc-pill {
	display: inline-flex; align-items: baseline; gap: .15rem;
	padding: .2rem .55rem; border-radius: 999px;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	border: 1px solid var(--hd-blue-soft);
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .8rem; color: var(--hd-ink); font-weight: 700;
}
.home-dash .hd-lic-alloc-divider,
.home-dash .hd-cb-applic-alloc-divider,
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-using-divider { color: var(--hd-muted); margin: 0 .1rem; }
.home-dash .hd-lic-dates {
	flex-direction: column; align-items: flex-start; gap: .25rem;
}
.home-dash .hd-lic-date-range {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .85rem; color: var(--hd-ink);
}
.home-dash .hd-lic-expires-pill {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .15rem .55rem; border-radius: 999px;
	background: rgba(220, 53, 69, .10);
	border: 1px solid rgba(220, 53, 69, .35);
	color: #b91c1c;
	font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
@media (min-width: 992px) {
	.home-dash .hd-lic-cell--dates .hd-lic-cell-value {
		flex-direction: column; align-items: center; gap: .25rem;
	}
}

/* ==============================================================
   GROUP PROGRESS OVERVIEW (.hd-prog)
   ============================================================== */

/* ----- Groups panel + card grid ----- */
.home-dash .hd-prog-grid,
.home-dash .hd-stb-q-update-grid,
.home-dash .hd-stb-q-survey-update-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .85rem;
}
/* Pill toggles inside the step-question grid bottom-align with the
   sibling dropdown (which sits below its label). align-self is scoped
   to the toggles so neighbouring .hd-field cells keep the default
   stretch behaviour and stay equal-height with each other. The paired
   .hd-field cells drop their default .9rem bottom margin via the
   existing margin-bottom: 0 selector chain so the row height matches
   the dropdown's actual bottom edge. */
.home-dash .hd-stb-q-update-grid .hd-kb-toggle,
.home-dash .hd-stb-q-survey-update-grid .hd-kb-toggle,
.home-dash .hd-lb-locked-toggle {
	align-self: end;
}
@media (min-width: 768px) {
	.home-dash .hd-prog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Group summary card */
.home-dash .hd-prog-card {
	display: flex; flex-direction: column;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-dash .hd-prog-card:hover {
	border-color: var(--hd-blue-soft);
	box-shadow: 0 4px 14px var(--hd-blue-a12);
	transform: translateY(-2px);
}

/* Card head — group name + member badge */
.home-dash .hd-prog-card-head {
	display: flex; align-items: center; gap: .65rem;
	padding: .85rem 1rem;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-prog-card-title {
	flex: 1 1 auto;
	margin: 0; min-width: 0;
	font-size: .95rem;
	font-weight: 700;
	color: var(--hd-ink);
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-prog-card-members {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .2rem .55rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--hd-blue);
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-a18);
	border-radius: 999px;
}

/* Card body */
.home-dash .hd-prog-card-body { padding: 1rem; flex: 1 1 auto; }

/* Stat blocks */
.home-dash .hd-prog-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-bottom: 1rem;
}
.home-dash .hd-prog-stat {
	padding: .65rem .5rem;
	text-align: center;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	transition: background .18s ease, border-color .18s ease;
}
.home-dash .hd-prog-stat-value {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}
.home-dash .hd-prog-stat-label {
	margin-top: .15rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-prog-stat--prog .hd-prog-stat-value { color: #a16207; }

/* Progress meter */
.home-dash .hd-prog-meter-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: .35rem;
	font-size: .78rem;
}
.home-dash .hd-prog-meter-label {
	color: var(--hd-muted);
	font-weight: 600;
	letter-spacing: .01em;
}
.home-dash .hd-prog-meter-value {
	color: var(--hd-ink);
	font-weight: 800;
	letter-spacing: -.01em;
}
.home-dash .hd-prog-meter-fill {
	background: linear-gradient(90deg, var(--hd-lime), var(--hd-blue));
}

/* Card footer */
.home-dash .hd-prog-card-foot {
	padding: .65rem 1rem .85rem;
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface);
}
.home-dash .hd-prog-card-cta,
.home-dash .hd-prog-activity-all {
	width: 100%;
	justify-content: center;
}

/* Empty state in groups panel */

/* ----- Activity sidebar ----- */
@media (min-width: 992px) {
	.home-dash .hd-prog-activity-panel,
	.home-dash .hd-emp-main-aside {
		position: sticky;
		top: 1rem;
		max-height: calc(100vh - 2rem);
	}
}
.home-dash .hd-prog-activity-body {
	padding: 0;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.home-dash .hd-prog-activity-item {
	display: flex; align-items: flex-start; gap: .75rem;
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--hd-line);
	transition: background .15s ease;
}

.home-dash .hd-prog-activity-user {
	font-size: .88rem;
	font-weight: 700;
	color: var(--hd-ink);
	text-decoration: none;
	letter-spacing: -.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .15s ease;
}
.home-dash .hd-prog-activity-course {
	font-size: .78rem;
	color: var(--hd-ink);
	opacity: .85;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-prog-activity-group {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .72rem;
	color: var(--hd-muted);
}

.home-dash .hd-prog-activity-meta {
	flex-shrink: 0;
	display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
}

.home-dash .hd-prog-activity-foot {
	padding: .75rem 1rem;
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface);
}

.home-dash .hd-prog-activity-empty { padding: 2rem 1.25rem; margin: 1rem; }

.hd-modal.hd-lic-modal .hd-lic-modal-section-title {
	display: inline-flex; align-items: center; gap: .4rem;
	margin: 0 0 .55rem;
	font-size: .82rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--hd-muted);
}
.hd-modal.hd-lic-modal .hd-lic-modal-table {
	width: 100%; margin: 0;
	border: 1px solid var(--hd-line);
	border-radius: 9px; overflow: hidden;
}
.hd-modal.hd-lic-modal .hd-lic-modal-table thead th {
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
	color: var(--hd-ink);
	font-size: .75rem; font-weight: 700;
	letter-spacing: .04em; padding: .55rem .85rem;
	text-transform: uppercase;
}
.hd-modal.hd-lic-modal .hd-lic-modal-table tbody td {
	padding: .55rem .85rem;
	border-bottom: 1px solid var(--hd-line);
	font-size: .87rem; color: var(--hd-ink);
	vertical-align: middle;
}
.hd-modal.hd-lic-modal .hd-lic-modal-key {
	font-weight: 600; color: var(--hd-muted); width: 35%;
}
.hd-modal.hd-lic-modal .hd-lic-modal-actions {
	display: flex; flex-wrap: wrap; gap: .45rem;
	margin: 0 0 1.25rem; padding: .85rem .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line); border-radius: 9px;
}

/* =============================================================================
   Manufacturer Manager — hd-mfg-*
   ============================================================================= */
@media (min-width: 768px) {
}
@media (max-width: 991.98px) {
}
.home-dash .hd-mfg-select-actions,
.home-dash .hd-pb-dim-filter-head-actions {
	display: inline-flex; gap: .35rem;
}
.home-dash .hd-mfg-select-back {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0;
	border: 1px solid var(--hd-line); border-radius: 8px;
	color: var(--hd-muted);
	background: var(--hd-surface);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}
.home-dash .hd-mfg-list-item {
	position: relative;
	display: flex; align-items: center; gap: .35rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px; overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-mfg-list-link,
.home-dash .hd-perm-admin-link {
	flex: 1 1 auto;
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .55rem .7rem .55rem .85rem;
	color: var(--hd-ink); text-decoration: none;
	font-size: .88rem; min-width: 0;
}
.home-dash .hd-mfg-list-delete {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	margin-right: .5rem;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	opacity: 0; text-decoration: none;
}
.home-dash .hd-mfg-search-form,
.hd-modal .hd-stb-q-imgmodal-help p { margin: 0 0 .5rem; }
.home-dash .hd-mfg-search-results { margin-bottom: .5rem; }

/* =============================================================================
   Company Permissions Manager — hd-perm-*
   ============================================================================= */
.home-dash .hd-perm-admin-body {
	display: flex; flex-direction: column; gap: .75rem;
	overflow-y: auto;
	flex: 1 1 auto; min-height: 0;
}
@media (max-width: 991.98px) {
	.home-dash .hd-perm-admin-body { max-height: 380px; }
}
.home-dash .hd-perm-admin-item {
	position: relative;
	display: flex; align-items: center; gap: .5rem; padding: 0;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px; overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-perm-admin-grip { color: var(--hd-muted); font-size: .78rem; }.home-dash .hd-eq-task-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 7px;
	background: var(--hd-surface-2); border: 1px solid var(--hd-line);
	color: var(--hd-blue); font-size: .82rem; flex: 0 0 auto;
}
.home-dash .hd-perm-admin-remove {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	margin-right: .35rem; border-radius: 6px;
	color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	opacity: 0; text-decoration: none;
}
.home-dash .hd-perm-grid-head { gap: 1rem; flex-wrap: wrap; }
.home-dash .hd-perm-grid-actions,
.home-dash .hd-eq-update-actions-right {
	display: inline-flex; gap: .4rem; flex-wrap: wrap;
}
.home-dash .hd-perm-cat-card {
	height: 100%;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px; overflow: hidden;
	display: flex; flex-direction: column;
}
.home-dash .hd-perm-cat-head {
	display: flex; align-items: center; gap: .45rem;
	padding: .55rem .85rem;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-perm-cat-title {
	font-size: .82rem; font-weight: 700; color: var(--hd-ink);
	letter-spacing: .01em;
}
.home-dash .hd-perm-cat-list {
	display: flex; flex-direction: column; gap: .25rem;
	padding: .55rem .35rem; flex: 1 1 auto;
}
.home-dash .hd-perm-check {
	display: flex; align-items: center; gap: .55rem;
	padding: .4rem .55rem; border-radius: 6px;
	cursor: pointer;
	transition: background .15s ease;
	margin: 0;
}
.home-dash .hd-perm-check .form-check-input {
	margin-top: 0; flex: 0 0 auto;
}
@media (max-width: 575.98px) {
	.home-dash .hd-perm-grid-head { padding: .85rem 1rem; }
}

/* =============================================================================
   Employee Form (create/update) — hd-empform-*
   ============================================================================= */
.home-dash .hd-empform-actions-right {
	display: inline-flex; gap: .5rem;
}
.home-dash .hd-empform-sidebar {
	position: sticky; top: 1rem;
	display: flex; flex-direction: column; gap: .85rem;
	padding: 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
}
@media (max-width: 991.98px) {
}
.home-dash .hd-empform-avatar {
	display: flex; align-items: center; justify-content: center;
	min-height: 140px; padding: .5rem;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-empform-avatar-img {
	width: 100%; max-width: 160px;
	height: auto; aspect-ratio: 1 / 1;
	object-fit: cover; border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.home-dash .hd-empform-avatar-upload .hd-field-file,
.home-dash .hd-ob-q-row {
	padding: .55rem .65rem;
}
.home-dash .hd-empform-avatar-upload .hd-field-file-icon {
	width: 30px; height: 30px; font-size: .85rem;
}
.home-dash .hd-empform-clear {
	display: flex; align-items: center; gap: .5rem;
	padding: .45rem .65rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line); border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
	margin: 0;
}
.home-dash .hd-empform-clear:hover {
	border-color: rgba(220, 53, 69, .35);
	background: rgba(220, 53, 69, .05);
}
.home-dash .hd-empform-clear-label {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .8rem; font-weight: 600; color: var(--hd-ink);
}
.home-dash .hd-empform-clear-label .bi {
	color: #b91c1c; font-size: .82rem;
}
.home-dash .hd-empform-side-actions {
	display: flex; flex-direction: column; gap: .4rem;
	padding-top: .5rem;
	border-top: 1px dashed var(--hd-line);
}
.home-dash .hd-empform-body {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
	padding: 1.25rem 1.25rem 1.5rem;
}
.home-dash .hd-empform-section {
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-empform-section:last-child {
	padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
.home-dash .hd-empform-section-title {
	display: inline-flex; align-items: center; gap: .45rem;
	margin: 0 0 1rem;
	font-size: .82rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-empform .hd-field-label {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .7rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .35rem;
}
.home-dash .hd-empform .hd-empform-info-label .bi {
	color: var(--hd-blue); font-size: .82rem; cursor: help;
}
/* Empform toggles render inline with the form fields, not as clickable
   cards. Strip the .hd-toggle card chrome and align baseline with adjacent
   text inputs (which have their label above the input). The toggle's track
   sits where the input would. */
.home-dash .hd-empform-toggle {
	margin: 0;
	padding: 0;
	min-height: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	cursor: pointer;
	padding-top: 1.65rem; /* aligns track with adjacent input baseline (label height + gap) */
}
.home-dash .hd-empform-toggle:hover,
.home-dash .hd-empform-toggle:has(.hd-toggle-input:checked),
.home-dash .hd-empform-toggle:has(.hd-toggle-input:focus-visible) {
	background: transparent;
	border: 0;
	box-shadow: none;
}
.home-dash .hd-empform-toggle--compact {
	padding-top: 0;
}
.home-dash .hd-empform-password {
	margin-top: .5rem; padding: 1rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line); border-radius: 10px;
}
.home-dash .hd-empform-pw-req {
	margin-top: 1rem; padding: .85rem 1rem;
	/* Red warning treatment — matches .hd-su-alert / .hd-wsch-warning; the
	   dark-mode override is shared with them. Title + list inherit color. */
	background: rgba(201, 27, 27, .06);
	border: 1px solid rgba(201, 27, 27, .2);
	border-radius: 8px;
	color: #7f1d1d;
}
.home-dash .hd-empform-pw-req-title {
	font-size: .75rem; font-weight: 700; letter-spacing: .04em;
	margin-bottom: .45rem;
}
.home-dash .hd-empform-pw-req-list {
	margin: 0; padding-left: 1.1rem;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .25rem .75rem;
	font-size: .8rem;
	list-style: disc;
}
.home-dash .hd-empform-pw-req-list .is-ok {
	color: #146c43; list-style-type: '\2713  ';
}
@media (max-width: 575.98px) {
}
.hd-modal.hd-empform-modal .hd-empform-children-list {
	margin: 1rem 0 .85rem; padding: .85rem 1rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line); border-radius: 8px;
	font-size: .9rem; color: var(--hd-ink);
}
.hd-modal.hd-empform-modal .hd-empform-children-list ul {
	margin: .35rem 0 0; padding-left: 1.25rem;
}

/* =============================================================================
   User Group Manager — hd-ugm-*
   ============================================================================= */
.home-dash .hd-ugm-actions-label {
	font-weight: 700; font-size: 1rem; color: var(--hd-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-ugm-actions-right {
	flex: 1 1 320px; max-width: 480px; margin-left: auto;
}
@media (max-width: 767.98px) {
	.home-dash .hd-ugm-actions-right {
		flex: 1 1 100%; max-width: none; margin-left: 0;
	}
}
@media (min-width: 992px) {
	.home-dash .hd-ugm-list-keyrow {
		display: grid;
		grid-template-columns:
			minmax(0, 2fr) minmax(140px, 1fr) minmax(0, 1.4fr) minmax(180px, 1.2fr);
		gap: .75rem;
		padding: .55rem .9rem; margin: 0 0 .35rem;
		background: var(--hd-surface-2);
		border: 1px solid var(--hd-line); border-radius: 8px;
		font-size: .68rem; font-weight: 700;
		letter-spacing: .12em; text-transform: uppercase;
		color: var(--hd-muted);
	}
}
.home-dash .hd-ugm-row {
	position: relative;
	display: flex; flex-direction: column; gap: .55rem;
	padding: .75rem .9rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: 9px;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-ugm-row::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px; background: transparent;
	border-radius: 9px 0 0 9px;
	transition: background .18s ease;
}
@media (min-width: 992px) {
	.home-dash .hd-ugm-row {
		display: grid;
		grid-template-columns:
			minmax(0, 2fr) minmax(140px, 1fr) minmax(0, 1.4fr) minmax(180px, 1.2fr);
		gap: .75rem; align-items: center;
		padding: .65rem .9rem;
	}
}
@media (min-width: 992px) {
	.home-dash .hd-ugm-cell--actions .hd-ugm-cell-value {
		justify-content: flex-end; gap: .35rem;
	}
}
.home-dash .hd-ugm-row-name {
	font-weight: 700; color: var(--hd-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-ugm-row-title {
	color: var(--hd-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-ugm-row .hd-field-input.hd-field-select {
	padding: .35rem .85rem .35rem .65rem;
	font-size: .85rem;
}
.home-dash .hd-ugm-primary-toggle {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .25rem .65rem; border-radius: 999px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	color: var(--hd-muted);
	font-size: .76rem; font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.home-dash .hd-ugm-primary-toggle:hover,
.home-dash .hd-ugm-primary-toggle:focus-visible {
	background: var(--hd-surface);
	color: var(--hd-blue);
	border-color: var(--hd-blue-soft);
	outline: none; text-decoration: none;
}
.home-dash .hd-ugm-primary-toggle .bi,
.home-dash .hd-ugm-primary-pill .bi { font-size: .76rem; color: #d49b00; }
.home-dash .hd-ugm-primary-pill {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .25rem .65rem; border-radius: 999px;
	background: linear-gradient(135deg, var(--hd-lime-a18), var(--hd-blue-a18));
	color: var(--hd-blue);
	font-size: .72rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
}
.home-dash .hd-ugm-action {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 7px;
	color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}

/* =============================================================================
   Equipment Manager — hd-eq-* (equipment_manager.html, _equipment_update.html,
   _equipment_tasks_panel.html, _confirm_delete_modal.html)
   ============================================================================= */

@media (min-width: 768px) {
}d-modal .hd-gb-del-title-stack,
.home-dash .hd-kb-acc-row-name-stack {
	display: inline-flex; flex-direction: column; gap: .1rem; min-width: 0;
}
.home-dash .hd-eq-update-body { padding: 1rem 1.15rem 1.15rem; }

/* Validation alert */
.home-dash .hd-eq-form-error {
	display: flex; align-items: flex-start; gap: .65rem;
	margin-bottom: 1rem;
	padding: .85rem 1rem;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .25);
	border-left: 4px solid #dc3545;
	border-radius: 8px;
	color: #991b1b;
}
.home-dash .hd-eq-form-error > .bi {
	color: #dc3545; font-size: 1.1rem; flex: 0 0 auto; margin-top: .15rem;
}
.home-dash .hd-eq-form-error-title {
	font-size: .72rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	margin-bottom: .25rem;
}
.home-dash .hd-eq-form-error-list {
	margin: 0; padding-left: 1rem;
	font-size: .82rem; line-height: 1.45;
}

/* Form sections */
.home-dash .hd-eq-section { margin-bottom: 1.25rem; padding: 0; }
.home-dash .hd-eq-section-title {
	display: inline-flex; align-items: center; gap: .4rem;
	margin: 0 0 .65rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--hd-line);
	font-size: .72rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--hd-muted);
	width: 100%;
}

/* Override the global .hd-inline-search-* 540px max-width cap so the Owner
   and Manufacturer search fields fill their column width inside the
   equipment update form. */

/* Specification row — Manufacturer / Model / Maintained must stay on one
   line at all widths. min-width: 0 on the column lets it shrink so the
   inline-search widget inside can't push past its allocated grid track.
   The switch column matches the input height so all three rows line up. */
.home-dash .hd-eq-spec-row .hd-eq-maint {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: calc(2.4rem + 2px); /* ≈ .hd-field-input height (padding .6rem×2 + line-height .95rem + 2px border) */
}

/* ----- Equipment list filter / order toolbar (.hd-eq-filter)
   Sits above the equipment list when in the Settings 'equipment_manager'
   context. All 5 buttons (3 filter + 2 order icons) sit on one row.
   Filter group flexes to take remaining space; order group is content-
   sized on the right when 'Both' is the active filter. */
.home-dash .hd-eq-filter {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: .5rem;
	align-items: stretch;
	margin: 0 0 .65rem;
}
.home-dash .hd-eq-filter-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface, #fff);
	overflow: hidden;
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0,0,0,.05));
	flex: 1 1 auto;
	min-width: 0;
}
/* Order group sits to the right of the filter group, content-sized */
.home-dash .hd-eq-filter-group--order {
	flex: 0 0 auto;
	gap: 0;
}
.home-dash .hd-eq-filter-group-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem .65rem;
	background: var(--hd-surface-2);
	border-right: 1px solid var(--hd-line);
	color: var(--hd-muted);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Individual filter button — pill segment. Borders between segments
   come from a single-side border on each non-first item so we don't
   double-up. Buttons in the primary group flex to share width evenly. */
.home-dash .hd-eq-filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	padding: .4rem .5rem;
	background: var(--hd-surface, #fff);
	color: var(--hd-ink);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
	border-left: 1px solid var(--hd-line);
	flex: 1 1 0;
	min-width: 0;
}
.home-dash .hd-eq-filter-group > .hd-eq-filter-btn:first-child,
.home-dash .hd-eq-filter-group > .hd-eq-filter-group-label + .hd-eq-filter-btn,
.home-dash .hd-emp-view-btn:first-child {
	border-left: 0;
}
.home-dash .hd-eq-filter-btn .bi {
	color: var(--hd-muted);
	font-size: .78rem;
	flex-shrink: 0;
}

/* Active state — gradient fill matching the suite's selected pill */
.home-dash .hd-eq-filter-btn.is-active {
	background: linear-gradient(135deg, var(--hd-navy) 0%, var(--hd-blue) 100%);
	color: #fff;
	box-shadow: 0 4px 12px var(--hd-blue-a25) inset, 0 0 0 1px var(--hd-blue-a35);
}

/* Icon-only variant (used by the Maintained-first / Unmaintained-first
   order toggles). Content-sized — does not flex like the primary group. */
.home-dash .hd-eq-filter-btn--icon {
	flex: 0 0 auto;
	padding: .4rem .65rem;
	gap: .2rem;
}
.home-dash .hd-eq-filter-btn--icon .bi-arrow-right {
	font-size: .65rem;
	opacity: .65;
}

/* Maintained switch */
.home-dash .hd-eq-maint {
	display: flex; align-items: center; gap: .65rem;
	padding-top: .25rem;
}
.home-dash .hd-eq-maint .form-check-input {
	width: 3em; height: 1.6em; margin: 0;
	cursor: pointer; border-width: 2px;
}
.home-dash .hd-eq-maint .form-check-input:checked {
	background-color: #198754; border-color: #146c43;
}
.home-dash .hd-eq-maint .hd-eq-maint-label {
	font-size: .82rem; font-weight: 700;
	letter-spacing: .04em;
	margin: 0; cursor: pointer;
}
.home-dash .hd-eq-maint .form-check-input:checked ~ .hd-eq-maint-label .hd-eq-maint-yes {
	display: inline; color: #146c43;
}
.home-dash .hd-eq-maint .form-check-input:not(:checked) ~ .hd-eq-maint-label .hd-eq-maint-no {
	display: inline; color: #b02a37;
}

/* Update form footer actions */
.home-dash .hd-eq-update-actions {
	display: flex; justify-content: space-between; align-items: center;
	gap: .75rem; margin-top: 1.25rem; padding-top: .85rem;
	border-top: 1px solid var(--hd-line);
	flex-wrap: wrap;
}
.home-dash .hd-eq-update-actions-left,
.home-dash .hd-crb-image-remove { display: inline-flex; gap: .4rem; }

/* Empty state (no equipment selected) */
.home-dash .hd-eq-empty-panel { min-height: 320px; }
.home-dash .hd-eq-empty {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	min-height: 280px; padding: 2rem 1rem;
	text-align: center; gap: .85rem;
}
.home-dash .hd-eq-empty-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 72px; height: 72px;
	border-radius: 50%;
	border: 2px dashed var(--hd-line);
	color: var(--hd-muted);
	font-size: 1.6rem;
}
.home-dash .hd-eq-empty-title {
	font-size: .82rem; font-weight: 700;
	color: var(--hd-muted);
	letter-spacing: .08em; text-transform: uppercase;
	margin: 0;
}
.home-dash .hd-eq-empty-sub {
	font-size: .92rem; color: var(--hd-muted);
	max-width: 340px; margin: 0; line-height: 1.5;
}

/* Maintenance Tasks panel — hd-eq-tasks-* */
.home-dash .hd-eq-tasks-panel {
	display: flex;
	flex-direction: column;
	overflow: visible; /* let the inline search results dropdown escape */
}
.home-dash .hd-eq-tasks-body {
	display: flex; flex-direction: column; gap: .85rem;
	padding: .85rem 1rem 1rem;
}
.home-dash .hd-eq-task-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: .35rem;
	max-height: 380px; overflow-y: auto;
}
.home-dash .hd-eq-task-row {
	display: flex; align-items: center; gap: .55rem;
	padding: .55rem .75rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line); border-radius: 9px;
	transition: border-color .18s ease, background .18s ease;
}
.home-dash .hd-eq-task-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-eq-task-title:hover,
.home-dash .hd-eq-task-title:focus-visible,
.home-dash .hd-gb-list-link:hover,
.home-dash .hd-gb-list-link:focus-visible,
.home-dash .hd-gb-related-link:hover,
.home-dash .hd-gb-related-link:focus-visible,
.home-dash .hd-gb-orphan-link:hover,
.home-dash .hd-gb-orphan-link:focus-visible,
.home-dash .hd-kb-acc-sync-link:hover,
.home-dash .hd-kb-acc-sync-link:focus-visible,
.home-dash .hd-kb-list-link:hover,
.home-dash .hd-kb-list-link:focus-visible {
	color: var(--hd-blue);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-eq-task-remove {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent; border: 1px solid transparent;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	opacity: 0;
}
.home-dash .hd-eq-tasks-search-form {
	margin: 0;
	width: 100%;
}
.home-dash .hd-eq-tasks-search {
	width: 100%;
	max-width: none !important;
	display: block;
}
.home-dash .hd-eq-tasks-search .hd-inline-search-input {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
	border-radius: var(--hd-radius-sm) !important;
}

/* Confirm Delete modal — hd-eq-confirm-* */
.hd-modal.hd-eq-confirm-modal .hd-eq-confirm-title {
	display: inline-flex; align-items: center; gap: .55rem;
}
.hd-modal.hd-eq-confirm-modal .hd-eq-confirm-title-stack {
	display: inline-flex; flex-direction: column; gap: .1rem;
}
.hd-modal.hd-eq-confirm-modal .hd-eq-confirm-eyebrow,
.hd-modal .hd-gb-del-eyebrow {
	font-size: .65rem; letter-spacing: .12em;
	text-transform: uppercase; font-weight: 700;
	color: var(--hd-white-a80); line-height: 1;
}
.hd-modal.hd-eq-confirm-modal .hd-eq-confirm-body,
.home-dash .hd-mr-fullsize-desc {
	font-size: .95rem; color: var(--hd-ink); line-height: 1.5;
}
.hd-modal.hd-eq-confirm-modal .hd-eq-confirm-footer { gap: .4rem; }

/* ==============================================================
   GUEST PAGES (login, password reset, etc.)
   .hd-guest-body / .hd-guest-main are emitted by guest.html so the
   shell stays neutral; the page-specific styles live below.
   ============================================================== */
.hd-guest-body {
	min-height: 100vh;
	margin: 0;
	background: var(--hd-surface-2);
	color: var(--hd-ink);
	font-family: 'Inter', 'Source Sans 3', 'Open Sans', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.hd-guest-main {
	min-height: 100vh;
}

/* ==============================================================
   LOGIN PAGE (.hd-login)
   ============================================================== */
.hd-login {
	min-height: 100vh;
	display: flex;
	align-items: stretch;
	background: var(--hd-surface-2);
}

/* Form column — full width on small, ~480px on lg+ */
.hd-login-form-col {
	flex: 1 1 auto;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
	background: var(--hd-surface-2);
}
@media (min-width: 992px) {
	.hd-login-form-col {
		flex: 0 0 480px;
		max-width: 480px;
		padding: 3rem 2.5rem;
	}
}

/* Brand panel — visible from lg+, fills remaining width */
.hd-login-brand {
	flex: 1 1 auto;
	min-height: 100vh;
	position: relative;
	display: none;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 3rem;
	overflow: hidden;
	color: #fff;
	background-color: #ACB8BC; /* legacy fallback if .login_bg image fails */
}
@media (min-width: 992px) {
	.hd-login-brand { display: flex; }
}
/* Dark gradient overlay so the imagery underneath stays readable
   regardless of which photo is set on .login_bg */
.hd-login-brand-overlay {
	position: absolute; inset: 0;
	background:
		radial-gradient(900px 400px at 100% -20%, var(--hd-blue-a35), transparent 60%),
		radial-gradient(700px 300px at -10% 120%, var(--hd-blue-a35), transparent 60%),
		linear-gradient(135deg, rgba(0, 0, 0, .85) 0%, rgba(26, 32, 48, .80) 55%, var(--hd-blue-a50) 100%);
	pointer-events: none;
}
.hd-login-brand-content {
	position: relative; z-index: 1;
	max-width: 36rem;
}
.hd-login-brand-eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hd-white-a80);
	margin-bottom: .85rem;
}
.hd-login-brand-title {
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0 0 .85rem;
	color: #fff;
}
.hd-login-brand-sub {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--hd-white-a80);
	margin: 0;
	max-width: none;
	white-space: nowrap;
}

/* Form card */
.hd-login-card {
	width: 100%;
	max-width: 26rem;
}
.hd-login-logo {
	margin: 0 auto 1.75rem;
	max-width: 200px;
}
.hd-login-logo img {
	width: 100%;
	height: auto;
	display: block;
}
.hd-login-title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--hd-ink);
	margin: 0 0 .35rem;
	text-align: center;
}
.hd-login-sub {
	font-size: .9rem;
	color: var(--hd-muted);
	margin: 0 0 1.5rem;
	text-align: center;
}

/* Error block — matches the .hd-eq-form-error pattern */
.hd-login-error {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .65rem .85rem;
	margin-bottom: 1rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--hd-radius-sm, 10px);
	color: #991b1b;
	font-size: .85rem;
	line-height: 1.4;
}

/* Form fields */
.hd-login-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.hd-login-field .hd-field-input {
	width: 100%;
	font-size: .95rem;
}

/* Password peek toggle — eye button inset on the right of the password
   field. The wrapper is the positioning context; the input reserves
   right padding so typed text never slides under the button. */
.hd-login-password-wrap .hd-field-input {
	padding-right: 2.75rem;
}
.hd-login-password-toggle {
	position: absolute;
	top: 50%;
	right: .4rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--hd-muted);
	cursor: pointer;
	border-radius: var(--hd-radius-sm, 8px);
	transition: color .15s ease, background .15s ease;
}

/* Submit button */
.hd-login-submit {
	width: 100%;
	justify-content: center;
	padding: .65rem 1rem;
	font-size: .95rem;
	font-weight: 600;
}

/* Links and legal */
.hd-login-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-blue);
	text-decoration: none;
	margin-top: 1rem;
	transition: color .15s ease;
}

.hd-login-legal {
	font-size: .75rem;
	color: var(--hd-muted);
	margin: 1.25rem 0 0;
	text-align: center;
	line-height: 1.5;
}

/* Status icon — used on done/complete/logged-out/invalid pages.
   A large circle icon at the top of the card that telegraphs the state. */
.hd-login-status {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	font-size: 1.85rem;
	flex-shrink: 0;
}

/* Password-requirements help block on password_reset_confirm.
   Django's password validators emit a <ul> via help_text; this block
   gives that list a tinted surface and small, muted styling. */
.hd-login-help {
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	padding: .75rem .9rem;
	margin: 0 0 1rem;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--hd-muted);
}
.hd-login-help-title {
	margin: 0 0 .35rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-ink);
}
.hd-login-help-body :where(ul, ol) {
	margin: 0;
	padding-left: 1.15rem;
}
.hd-login-help-body :where(p) {
	margin: 0 0 .35rem;
}


/* =============================================================================
   OSI Utilities — view-driven flex tile grid
   The view (OSIUtilities) computes tile size, gap, and grid max-width based
   on visible_count and a per-row cap. Those values are passed to the template
   as context vars and emitted as CSS custom properties on the grid wrapper:
     --tile-width      e.g. "180px"
     --tile-gap        e.g. "16px"
     --grid-max-width  e.g. "1136px" or "100%"
   ============================================================================= */
.home-dash.hd-osi-utilities .hd-osi-utilities-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tile-gap, 1rem);
	max-width: var(--grid-max-width, 100%);
	margin-left: auto;
	margin-right: auto;
}
.home-dash.hd-osi-utilities .hd-osi-utilities-grid .hd-tile {
	flex: 0 0 var(--tile-width, 220px);
	width: var(--tile-width, 220px);
	box-sizing: border-box;
}
@media (max-width: 575.98px) {
	.home-dash.hd-osi-utilities .hd-osi-utilities-grid .hd-tile {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* =============================================================================
   App List page — hd-applist-*
   Same hybrid markup pattern as hd-lang-* / hd-lic-*.
   ============================================================================= */

/* Dev note (warning-tinted info strip) */
/* List panel */

/* Column-key strip — lg+ only */
@media (min-width: 992px) {
	.home-dash .hd-applist-keyrow {
		display: grid;
		grid-template-columns:
			minmax(60px, .5fr)
			minmax(0, 4fr)
			minmax(120px, 1fr)
			minmax(140px, 1fr);
		gap: .75rem;
		padding: .55rem .9rem;
		margin: 0 0 .35rem;
		background: var(--hd-surface-2);
		border: 1px solid var(--hd-line);
		border-radius: 8px;
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
}

/* List rows */
@media (min-width: 992px) {
	.home-dash .hd-applist-row {
		display: grid;
		grid-template-columns:
			minmax(60px, .5fr)
			minmax(0, 4fr)
			minmax(120px, 1fr)
			minmax(140px, 1fr);
		gap: .75rem;
		align-items: center;
		padding: .65rem .9rem;
	}
}

/* Cells with auto-shown labels on mobile */
@media (min-width: 992px) {
	.home-dash .hd-applist-cell--price .hd-applist-cell-value,
	.home-dash .hd-applist-cell--actions .hd-applist-cell-value {
		justify-content: center;
		gap: .25rem;
	}
}

/* ID pill (mono) */
.home-dash .hd-applist-id-pill {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.8rem;
	padding: .15rem .5rem;
	border-radius: 6px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .76rem;
	font-weight: 700;
	color: var(--hd-ink);
}

/* App title */
.home-dash .hd-applist-title {
	font-weight: 600; color: var(--hd-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	min-width: 0;
}

/* Price */
.home-dash .hd-applist-price {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .82rem; font-weight: 700;
	color: var(--hd-ink);
	white-space: nowrap;
}

/* Action buttons */
.home-dash .hd-applist-action {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	padding: 0;
	border-radius: 7px;
	color: var(--hd-muted);
	background: transparent;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}

/* Empty */

/* =============================================================================
   hd-dept-add-btn--icon-only — icon-only variant of the dept-add-btn
   The base .hd-dept-add-btn uses asymmetric padding tuned for [icon][label]
   layout. When there's no label, the asymmetric padding shifts the icon
   off-center. This modifier evens out the padding and makes the button
   render as a proper circle around the icon badge.
   ============================================================================= */
.home-dash .hd-dept-add-btn--icon-only {
	padding: .3rem;
	gap: 0;
}

/* =============================================================================
   Employee Directory / Roster Cards — hd-emp-card-* and hd-emp-search-*
   Used by employee_directory, user_list, and any page rendering employee
   cards via _employee_list_include.html. Missing from the rebuild block
   above; restored here.
   ============================================================================= */

/* ---- Roster grid container ---- */
.home-dash .hd-emp-mgr-roster,
.home-dash .hd-emp-roster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: .75rem;
	margin-top: 1rem;
}
@media (min-width: 1400px) {
	.home-dash .hd-emp-mgr-roster,
	.home-dash .hd-emp-roster {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
}

/* ---- Card ---- */
.home-dash .hd-emp-card,
.home-dash .hd-emp-mgr-card {
	display: flex;
	gap: .75rem;
	padding: .85rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius);
	box-shadow: var(--hd-shadow-xs);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
}
.home-dash .hd-emp-card:hover,
.home-dash .hd-emp-mgr-card:hover,
.home-dash .hd-emp-card:focus-visible,
.home-dash .hd-emp-mgr-card:focus-visible {
	border-color: var(--hd-blue-soft);
	background: var(--hd-surface);
	box-shadow: var(--hd-shadow-sm);
	color: var(--hd-ink);
	text-decoration: none;
	outline: none;
	transform: translateY(-1px);
}.home-dash .hd-emp-avatar {
	flex: 0 0 auto;
	width: 56px; height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	box-shadow: 0 0 0 1px var(--hd-line);
	position: relative;
}home-dash .hd-emp-card-identity {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	overflow: hidden;
}
.home-dash .hd-emp-card-name {
	font-size: .95rem;
	font-weight: 700;
	/* Themed ink, not --hd-navy (a fixed near-black with no dark variant —
	   it rendered black-on-dark in dark mode). */
	color: var(--hd-ink);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .18s ease;
}* =============================================================================
   Employee Directory layout — hero, toolbar, two-column main, message aside
   Used by employee_directory.html and its partials.
   ============================================================================= */

/* ---- Hero ---- */

/* ---- Grid / List view toggle (right side of hero) ---- */
.home-dash .hd-emp-view-toggle {
	display: inline-flex;
	border: 1px solid var(--hd-white-a25);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-white-a06);
	overflow: hidden;
}
.home-dash .hd-emp-view-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem .75rem;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--hd-white-a12);
	color: var(--hd-white-a80);
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.home-dash .hd-emp-view-btn:hover,
.home-dash .hd-emp-view-btn:focus-visible,
.home-dash .hd-kb-acc-chevron-btn:hover,
.home-dash .hd-kb-acc-chevron-btn:focus-visible {
	background: var(--hd-white-a12);
	color: #fff;
	outline: none;
}
.home-dash .hd-emp-view-btn.is-active {
	background: var(--hd-white-a92);
	color: var(--hd-blue);
}

/* ---- Toolbar (search bar) ---- */
.home-dash .hd-emp-toolbar {
	margin-bottom: 1rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius, 12px);
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0,0,0,.05));
	padding: .65rem;
}
/* Override the generic .hd-emp-search wrapper so the directory search
   spans the full toolbar (the .hd-emp-mgr-* version uses flex-basis 280px) */
.home-dash .hd-emp-toolbar .hd-emp-search {
	flex: 1 1 auto;
	max-width: none !important;
	width: 100%;
}

/* Server-side search form — wraps the existing .hd-emp-search wrapper plus
   a submit button. Submitting reloads the page with ?q=, so pagination and
   the roster see consistent filtered state. */
.home-dash .hd-emp-search-form {
	display: flex;
	align-items: center;
	gap: .65rem;
	flex: 1 1 auto;
}

/* "Clear search" affordance, only rendered when ?q is active. Anchored
   inside .hd-emp-search to the right of the input. */
.home-dash .hd-emp-search-clear {
	position: absolute;
	right: .65rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	color: var(--hd-muted);
	text-decoration: none;
	border-radius: 50%;
	transition: color .15s ease, background .15s ease;
}
.home-dash .hd-emp-search-clear:hover,
.home-dash .hd-emp-search-clear:focus-visible {
	color: var(--hd-ink);
	background: var(--hd-surface-2);
	outline: none;
}

/* Pagination strip — sits below the roster on the directory page. Stacks
   on mobile, splits to a row at sm+ with the count info on the left and
   the prev/page/next controls on the right. */
.home-dash .hd-emp-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	padding: 1rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius, 12px);
}
@media (min-width: 576px) {
	.home-dash .hd-emp-pagination {
		flex-direction: row;
		justify-content: space-between;
	}
}
.home-dash .hd-emp-pagination-info {
	font-size: .85rem;
	color: var(--hd-muted);
}
.home-dash .hd-emp-page-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .4rem .75rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface, #fff);
	color: var(--hd-ink);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.home-dash .hd-emp-page-btn:hover,
.home-dash .hd-emp-page-btn:focus-visible,
.home-dash .hd-kb-iconbtn:hover,
.home-dash .hd-kb-iconbtn:focus-visible,
.home-dash .hd-kb-obs-pill-action--edit:hover,
.home-dash .hd-kb-obs-pill-action--edit:focus-visible,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row:hover,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row:focus-visible {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue);
	color: var(--hd-blue);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-emp-page-btn.is-disabled {
	opacity: .5;
	cursor: default;
	pointer-events: none;
}
.home-dash .hd-emp-page-current {
	padding: 0 .65rem;
	font-size: .85rem;
	color: var(--hd-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* ---- Two-column main: roster (flex) + messages aside (320px) ---- */
.home-dash .hd-emp-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: stretch;
}
@media (min-width: 992px) {
	.home-dash .hd-emp-main {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}
@media (min-width: 992px) {
}

/* ---- Department chip on each card ---- */
.home-dash .hd-emp-dept-wrap {
	margin: .5rem 0 .35rem;
}
.home-dash .hd-emp-dept-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: 2px 9px;
	font-size: .72rem;
	font-weight: 600;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	border: 1px solid var(--hd-blue-a18);
	border-radius: 999px;
	line-height: 1.5;
}

/* ---- Card contact rows (email + phone in card body) ---- */
.home-dash .hd-emp-card-contact {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-top: .5rem;
	font-size: .82rem;
}
.home-dash .hd-emp-line {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--hd-ink);
	text-decoration: none;
	min-width: 0;
}
.home-dash .hd-emp-line .bi { color: var(--hd-muted); font-size: .8rem; flex-shrink: 0; }

/* ---- Card actions row (Email + Message buttons at the bottom) ---- */
.home-dash .hd-emp-card-actions {
	display: flex;
	gap: .35rem;
	margin-top: .75rem;
	padding-top: .65rem;
	border-top: 1px dashed var(--hd-line);
}
.home-dash .hd-emp-action {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .4rem .55rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-size: .78rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.home-dash .hd-emp-action:hover,
.home-dash .hd-emp-action:focus-visible {
	background: var(--hd-blue-a06);
	border-color: var(--hd-blue-soft, #c2d2e3);
	color: var(--hd-blue);
	outline: none;
}/* ---- List view (when toggle === 'list') ----
   Roster's [data-view="list"] attribute compresses each card into a
   single horizontal row: avatar | identity + dept inline | contact inline |
   actions. Card padding shrinks, avatar shrinks, contact rows collapse
   to a single inline line, and everything sits on one baseline so each
   row is roughly 56px tall. */
.home-dash .hd-emp-roster[data-view="list"] {
	grid-template-columns: 1fr;
	gap: .35rem;
	margin-top: 0;
}
/* The base .hd-emp-card rule (defined later in this file) sets
   flex-direction: column — explicitly override to grid here so each
   section has a fixed column track and rows align across the list.
   Same for the 56×56 avatar — shrink to 36×36 in list view. */
.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card {
	display: grid !important;
	flex-direction: row !important;
	grid-template-columns: 44px 1fr 1fr 1fr 1fr auto;
	grid-template-rows: auto;
	column-gap: 1rem;
	row-gap: 0;
	padding: .5rem .85rem !important;
	align-items: center;
}
.home-dash .hd-emp-roster[data-view="list"] .hd-emp-avatar {
	width: 36px !important;
	height: 36px !important;
	flex-shrink: 0;
	grid-column: 1 / 2;
}
.home-dash .hd-emp-roster[data-view="list"] .hd-emp-avatar-img {
	width: 36px;
	height: 36px;
}
@media (min-width: 768px) {
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card {
		min-height: 56px;
	}
	/* Top-row markup contains avatar + identity stacked. We position the
	   avatar via the rule above, and place the identity column in track 2. */
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-top,
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-contact {
		display: contents;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-identity {
		grid-column: 2 / 3;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-name {
		font-size: .92rem;
		line-height: 1.2;
		margin: 0 0 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-role {
		font-size: .75rem;
		line-height: 1.2;
		margin: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-dept-wrap {
		grid-column: 3 / 4;
		margin: 0;
		min-width: 0;
		display: flex;
		align-items: center;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-dept-chip {
		max-width: 100%;
		overflow: hidden;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-dept-chip span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* Email and phone become independent grid items in columns 4 and 5
	   via display: contents on the wrapper. The two .hd-emp-line elements
	   inside .hd-emp-card-contact become direct children of the card grid. */
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-contact > .hd-emp-line:nth-child(1) {
		grid-column: 4 / 5;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-contact > .hd-emp-line:nth-child(2) {
		grid-column: 5 / 6;
	}
	/* If a user has no phone, the second .hd-emp-line is missing — nothing
	   renders in column 5, which preserves the gridline alignment. */
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-line {
		font-size: .78rem;
		gap: .3rem;
		min-width: 0;
		max-width: 100%;
		display: inline-flex;
		align-items: center;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-line span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100%;
	}
	/* Actions: row direction, content-sized in the last column. */
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-card-actions {
		grid-column: 6 / 7;
		flex-direction: row !important;
		gap: .35rem;
		margin: 0 !important;
		padding: 0 !important;
		border-top: 0 !important;
		justify-self: end;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-action {
		flex: 0 0 auto;
		padding: .35rem .55rem;
		font-size: .75rem;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-action span {
		display: none;
	}
	.home-dash .hd-emp-roster[data-view="list"] .hd-emp-action .bi {
		font-size: .9rem;
	}
}
/* Below 768px, list view stays vertical (avatar/identity at top, dept/
   contact/actions stacked) — same as grid view essentially, since on
   mobile horizontal compression isn't viable. */

/* =============================================================================
   Messages aside panel (.hd-emp-msg-*)
   Right column of the directory; lists up to 5 latest messages with
   an "is-unread" emphasis state.
   ============================================================================= */
.home-dash .hd-emp-msg-panel {
	display: flex;
	flex-direction: column;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius, 12px);
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0,0,0,.05));
	overflow: hidden;
	height: 100%;
	min-height: 360px;
}
.home-dash .hd-emp-msg-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	min-height: 56px;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-emp-msg-title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .92rem;
	font-weight: 700;
	color: var(--hd-ink);
	flex: 1 1 auto;
}
.home-dash .hd-emp-msg-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 .4rem;
	margin-left: .25rem;
	background: var(--hd-danger);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	border-radius: 999px;
}
.home-dash .hd-emp-msg-seeall {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: transparent;
	border: 0;
	color: var(--hd-blue);
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	padding: .2rem .35rem;
	border-radius: 4px;
	transition: background .15s ease, color .15s ease;
	flex-shrink: 0;
}
.home-dash .hd-emp-msg-seeall:hover,
.home-dash .hd-emp-msg-seeall:focus-visible,
.hd-modal.hd-emp-notifications-modal .hd-emp-msg-tabs .hd-emp-msg-tab.nav-link:hover,
.hd-modal.hd-emp-notifications-modal .hd-emp-msg-tabs .hd-emp-msg-tab.nav-link:focus-visible {
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	outline: none;
}

/* List */
.home-dash .hd-emp-msg-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.home-dash .hd-emp-msg-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .15rem;
	padding: .55rem .65rem;
	min-height: 56px;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.home-dash .hd-emp-msg-item:hover {
	border-color: var(--hd-blue-soft, #c2d2e3);
	background: var(--hd-surface-2);
	transform: translateX(2px);
}
.home-dash .hd-emp-msg-item.is-unread {
	border-left: 3px solid var(--hd-blue);
	padding-left: calc(.65rem - 2px);
	background: var(--hd-blue-a06);
}
.home-dash .hd-emp-msg-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}
.home-dash .hd-emp-msg-from {
	font-weight: 700;
	font-size: .85rem;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-emp-msg-time {
	font-size: .72rem;
	color: var(--hd-muted);
	font-weight: 600;
	flex-shrink: 0;
}
.home-dash .hd-emp-msg-preview {
	font-size: .78rem;
	color: var(--hd-muted);
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.home-dash .hd-emp-msg-more {
	margin-top: .25rem;
	padding: .55rem;
	text-align: center;
	font-size: .78rem;
	color: var(--hd-muted);
	font-style: italic;
}
.home-dash .hd-emp-msg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 2rem 1rem;
	color: var(--hd-muted);
	font-size: .85rem;
	text-align: center;
}
.home-dash .hd-emp-msg-empty .bi { font-size: 1.85rem; opacity: .65; }

/* =============================================================================
   Send-message + Message-view modals
   ============================================================================= */
.hd-modal.hd-emp-msg-modal .hd-emp-msg-modal-footer,
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-footer {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .85rem 0 0;
	margin: 1.25rem 0 0;
	border-top: 1px solid var(--hd-line);
}

/* Send-message form labels */

/* Message view modal — "From" / "Date" meta block */
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-meta {
	margin: 0 0 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem;
}
@media (min-width: 576px) {
}
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-meta-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
}

/* The original message body — bordered quote-style block */
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-body-quote {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-left: 3px solid var(--hd-blue);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-size: .9rem;
	line-height: 1.55;
}

/* =============================================================================
   Notifications modal + tabs (.hd-emp-notifications-modal + .hd-emp-msg-tabs)
   Global modal opened from the notification bell or "View all" links;
   contains the All / Read / Unread / Messages tab strip and the
   notification_display.html body.
   ============================================================================= */
.hd-modal.hd-emp-notifications-modal .hd-emp-notifications-body {
	padding: 0;
	max-height: 60vh;
	overflow-y: auto;
}

/* Tab strip — sits between header and body, full-width with bottom border */
.hd-modal.hd-emp-notifications-modal .hd-emp-msg-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: .25rem;
	margin: 0;
	padding: 0 1rem;
	list-style: none;
	border-bottom: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
	overflow-x: auto;
	overflow-y: hidden;
}
.hd-modal.hd-emp-notifications-modal .hd-emp-msg-tabs .hd-emp-msg-tab.nav-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .65rem .9rem;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--hd-muted);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
	margin-bottom: -1px;
}
.hd-modal.hd-emp-notifications-modal .hd-emp-msg-tabs .hd-emp-msg-tab.nav-link.active {
	color: var(--hd-blue);
	border-bottom-color: var(--hd-blue);
	background: var(--hd-surface, #fff);
}
.hd-modal.hd-emp-notifications-modal .hd-emp-msg-tabs .hd-emp-msg-tab .bi {
	color: inherit;
	font-size: .9rem;
}

/* =============================================================================
   Single message view modal — additional styling for the singleton
   #messageViewModal that loadMessageThread() populates with chat bubbles.
   The chat-* classes are styled separately (existing block earlier in
   this file). These rules style the wrapping container that the JS
   toggles between "border rounded p-3" and "chat-container".
   ============================================================================= */

/* The default state before chat content is loaded — preserves the legacy
   class names (border rounded p-3) the JS adds. We don't need to
   restyle them since Bootstrap utilities are still loaded; just give
   the wrapper a min-height so the modal isn't tiny while loading. */
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-content {
	min-height: 8rem;
	margin-bottom: 1rem;
}
.hd-modal.hd-emp-msg-view-modal .hd-emp-msg-view-content.chat-container {
	min-height: 12rem;
	max-height: 50vh;
	overflow-y: auto;
	padding: 0;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface-2);
}

/* Create-message modal (_create_message_modal.html) — short two-field
   form (recipient + message) with Cancel / Send footer. Body and
   footer use namespaced wrappers so the suite's BULLETPROOF scroll
   rule on .modal-body doesn't apply to this short form. */
.hd-modal.hd-msg-create-modal .hd-msg-create-body {
	padding: 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

/* Spinner utility — applies the global @keyframes spin to any icon.
   Used by the create-message Send button while the AJAX POST is in
   flight. Matches the suite's bi-* convention (no FontAwesome dep). */
.hd-spin {
	display: inline-block;
	animation: spin 1s linear infinite;
}

/* hd-btn success variant — used by the "Sent!" confirmation state on the
   Reply button in the single message view modal. Matches hd-btn-primary
   sizing but green for the success cue. */
.hd-btn.hd-btn-success {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .45rem .85rem;
	background: linear-gradient(135deg, #1f7a3a 0%, #166934 100%);
	border: 1px solid #166934;
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	border-radius: var(--hd-radius-sm, 8px);
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.hd-btn.hd-btn-success:hover,
.hd-btn.hd-btn-success:focus-visible {
	filter: brightness(1.05);
	color: #fff;
	outline: none;
}

/* =============================================================================
   COURSE SPLASH (.hd-cs)
   Pre-launch splash for course assignments. Body gets a blurred/dimmed
   background image (set via the --course-bg custom property), header is
   a translucent dark bar, content is a poster-image left + detail-text
   right two-column layout, footer carries OSI brand info.
   ============================================================================= */

/* ---- Body background ----
   full_screen.html sets body to: display: flex; flex-direction: column;
   height: 100%; margin: 0. We add the dimmed photo background and let
   the parent's .header / .content / .footer flex children scroll naturally. */
.hd-cs-body {
	background-image: var(--course-bg);
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	background-color: #1a2030;
}
/* Soft dark overlay so text is always readable on top of the photo */
.hd-cs-body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .45));
	z-index: 0;
	pointer-events: none;
}
/* Override parent's .content rule so the page uses the parent's flex
   layout properly — content scrolls naturally inside its flex item, and
   only ONE scrollbar shows (the .content area's own internal scrollbar
   is the one we want, not double).
   The parent template sets html, body { height: 100% } so the flex
   layout has a defined height to fill — we keep that, since changing
   it breaks the footer-at-bottom behavior. */
.hd-cs-body .content {
	scrollbar-gutter: auto !important;
}
.hd-cs-body .content > .container-fluid {
	padding: 1.5rem 1.25rem;
}

/* ---- Header (top strip) — overrides parent's .header height: 5vh ---- */
.hd-cs-body .header.hd-cs-header {
	height: auto !important;
	min-height: 56px;
	background: rgba(15, 22, 34, .85);
	backdrop-filter: blur(8px);
	color: #fff;
	border-bottom: 1px solid var(--hd-white-a12);
	padding: 0 !important;
}
.hd-cs-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: .85rem 1.25rem;
}
.hd-cs-header-title {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	flex: 1 1 auto;
	min-width: 0;
}
.hd-cs-header-title .bi {
	color: #fff;
	font-size: 1.15rem;
}
.hd-cs-header-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	color: var(--hd-white-a80);
	font-size: .82rem;
}
.hd-cs-header-meta-item .bi {
	color: var(--hd-white-a65);
	font-size: .85rem;
}
.hd-cs-header-meta-sep {
	color: var(--hd-white-a35);
}

/* ---- Main content ---- */
.hd-cs {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 1.5rem 1.25rem;
	color: #fff;
}
.hd-cs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: start;
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
@media (min-width: 768px) {
	.hd-cs-grid {
		grid-template-columns: minmax(260px, 360px) 1fr;
		gap: 2rem;
	}
	/* When the course has no poster, span the detail column full width
	   instead of leaving a 360px gutter on the left. */
	.hd-cs-grid.hd-cs-grid--no-poster {
		grid-template-columns: 1fr;
		max-width: 1100px;
		margin: 0 auto;
	}
}
/* Override default scrollbar containers from full_screen.html so only the
   document scrollbar shows. .hd-cs-body .content rule above handles this. */

/* Poster column */
.hd-cs-poster {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	margin: 0 auto;
}

/* Detail column — content sits directly on the dimmed photo overlay */
.hd-cs-detail-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	color: #fff;
}
.hd-cs-section {
	font-size: .92rem;
	line-height: 1.6;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.hd-cs-section :where(p, ul, ol) {
	margin: 0 0 .65rem;
}
.hd-cs-section-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .5rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-white-a80);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.hd-cs-section-title .bi {
	color: #7fb1e6;
	font-size: .85rem;
}
.hd-cs-description {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.55;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--hd-white-a12);
}
.hd-cs-requirements-list {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--hd-white-a92);
	font-style: italic;
}

/* Disclaimer block — semi-translucent amber-tinted note over the photo */
.hd-cs-disclaimer {
	margin: 0;
	padding: 1rem 1.15rem;
	background: rgba(217, 119, 6, .15);
	border: 1px solid rgba(217, 119, 6, .45);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-white-a92);
	font-size: .82rem;
	line-height: 1.6;
	backdrop-filter: blur(4px);
}
.hd-cs-disclaimer-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .55rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fcd34d;
}
.hd-cs-disclaimer-title .bi {
	color: #fcd34d;
	font-size: .9rem;
}
.hd-cs-disclaimer-body {
	margin: 0 0 .55rem;
	font-style: italic;
}
.hd-cs-disclaimer-sig {
	margin: 0;
	font-style: italic;
	color: #fff;
	font-weight: 600;
}

/* Actions */
.hd-cs-actions {
	margin-top: .5rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--hd-white-a25);
}
.hd-cs-mobile-warning {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .65rem .85rem;
	margin: 0 0 1rem;
	background: rgba(254, 243, 199, .9);
	border: 1px solid #fcd34d;
	border-radius: var(--hd-radius-sm, 8px);
	color: #92400e;
	font-size: .85rem;
	line-height: 1.5;
}
.hd-cs-mobile-warning .bi,
.home-dash .hd-news-locked-banner .bi {
	color: #d97706;
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 1px;
}
.hd-cs-actions-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .65rem;
}
.hd-cs-action {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1rem;
	font-size: .9rem;
	font-weight: 600;
}
/* On the dimmed-photo background, the default .hd-btn-ghost (transparent
   bg) reads as translucent. Override scoped to .hd-cs so the Return Home
   button has an opaque white surface like the primary button — solid,
   readable, and visually balanced against the gradient Launch Course
   button next to it. */
.hd-cs .hd-cs-action.hd-btn-ghost {
	background: #fff;
	border-color: #fff;
	color: var(--hd-ink);
}
.hd-cs .hd-cs-action.hd-btn-ghost:hover,
.hd-cs .hd-cs-action.hd-btn-ghost:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--hd-blue);
	text-decoration: none;
}
.hd-cs-not-assigned {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1rem;
	font-size: .85rem;
	font-style: italic;
	color: var(--hd-white-a80);
	background: var(--hd-white-a06);
	border: 1px dashed var(--hd-white-a35);
	border-radius: var(--hd-radius-sm, 8px);
}

/* ---- Footer ----
   Overrides parent's .footer { height: 3vh; background: #CFCFCF; color: #000 }
   Lives as a flex child of the body, sits at the bottom naturally. */
.hd-cs-body .footer {
	height: auto !important;
	min-height: 48px;
	background: rgba(15, 22, 34, .92) !important;
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--hd-white-a12);
	color: #fff !important;
	padding: 0 !important;
}
.hd-cs-footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: .65rem 1.25rem;
	font-size: .82rem;
	color: #fff;
}
.hd-cs-footer-contact {
	gap: 1rem;
}
.hd-cs-footer-copy { font-weight: 600; color: #fff; }
.hd-cs-footer-addr { color: #fff; opacity: .85; }
.hd-cs-footer-sep {
	color: #fff;
	opacity: .4;
	margin: 0 .25rem;
}
.hd-cs-footer-link,
.hd-cs-footer-link.mainfont,
.hd-cs-footer-link:link,
.hd-cs-footer-link:visited,
.hd-cs-body .hd-cs-footer-link,
.hd-cs-body .hd-cs-footer-link.mainfont {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: #fff !important;
	text-decoration: none;
	transition: opacity .15s ease;
	opacity: .95;
}
.hd-cs-footer-link:hover,
.hd-cs-footer-link.mainfont:hover,
.hd-cs-footer-link:focus-visible,
.hd-cs-footer-link.mainfont:focus-visible {
	color: #fff !important;
	text-decoration: underline;
	opacity: 1;
	outline: none;
}
.hd-cs-footer-link .bi {
	color: #fff !important;
	opacity: .75;
	font-size: .9rem;
}

/* =============================================================================
   NEWS BUILDER + CREATE + UPDATE (.hd-news-*)
   Used by news_builder.html (list), news_create.html (form),
   news_update.html (form with timeCheck branching).
   ============================================================================= */

/* ---- Panel ---- */

/* ---- Column key strip — desktop only (lg+) ---- */
@media (min-width: 992px) {
	.home-dash .hd-news-keyrow {
		display: grid;
		grid-template-columns: 70px minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 1.25rem;
		padding: .55rem 1.25rem;
		background: var(--hd-surface-2);
		border-bottom: 1px solid var(--hd-line);
		font-size: .68rem;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
}

/* ---- List + rows ---- */
@media (min-width: 992px) {
	.home-dash .hd-news-row {
		display: grid;
		grid-template-columns: 70px minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: center;
		padding: 1rem 1.25rem;
	}
}

/* ---- Cells ---- */
.home-dash .hd-news-cell-label {
	display: inline-block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	min-width: 110px;
	flex-shrink: 0;
}
@media (min-width: 992px) {
	.home-dash .hd-news-cell--date .hd-news-date { align-items: center; }
}

/* Cell content typography */
.home-dash .hd-news-id {
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
	font-size: .82rem;
	color: var(--hd-blue);
	font-weight: 600;
}
.home-dash .hd-news-headline {
	font-weight: 600;
	color: var(--hd-ink);
	font-size: .9rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.home-dash .hd-news-article {
	color: var(--hd-muted);
	font-size: .82rem;
	line-height: 1.45;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/* Extra breathing room between the article preview and the
   publish-method column at lg+. The grid column-gap alone is too
   tight when the article text fills its column; this padding-right
   reserves a clear gutter so the two columns don't visually collide. */
@media (min-width: 992px) {
	.home-dash .hd-news-cell--article {
		padding-right: 1.5rem;
	}
}
/* Suppress rich content inside the article preview cell — list view
   shows text only so each row stays compact and consistent. The full
   article (with images, formatting, etc.) is still visible in Edit /
   Preview. */
/* Reset float-* classes Summernote adds to images so the surrounding
   text doesn't keep an empty wrap zone after the images are hidden. */
.home-dash .hd-news-date {
	display: inline-flex;
	flex-direction: column;
	gap: 0;
	font-size: .78rem;
}
.home-dash .hd-news-date-t {
	color: var(--hd-muted);
	font-size: .72rem;
}

/* ---- Publish-method pill ---- */
.home-dash .hd-news-method-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: 2px 8px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .03em;
	border-radius: 999px;
	line-height: 1.5;
	white-space: nowrap;
}
.home-dash .hd-news-method-pill.is-below {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fcd34d;
}
.home-dash .hd-news-method-pill.is-children {
	background: #d1fae5;
	color: #065f46;
	border: 1px solid #6ee7b7;
}

/* ---- Action icons (edit / delete on each row) ---- */
.home-dash .hd-news-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--hd-muted);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* ---- Empty state ---- */

/* =============================================================================
   News Create / Update form (.hd-news-form-*)
   ============================================================================= */
.home-dash .hd-news-form-panel,
.home-dash .hd-gb-related-panel,
.home-dash .hd-kb-list-panel,
.home-dash .hd-kb-obs-panel,
.home-dash .hd-tb-list-panel,
.home-dash .hd-pb-step-list-panel,
.home-dash .hd-stb-q-panel {
	width: 100%;
	overflow: visible;
}

/* Field labels */

/* Inline info button next to a field label */
.home-dash .hd-news-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--hd-blue);
	cursor: pointer;
	margin-left: .15rem;
	border-radius: 3px;
	transition: background .15s ease;
}

/* Force Django-rendered widgets to inherit the suite's field look */
.home-dash .hd-news-form input[readonly] {
	background: var(--hd-surface-2);
	color: var(--hd-muted);
	cursor: not-allowed;
	font-family: inherit;
	font-size: .9rem;
}
.home-dash .hd-news-form select:disabled,
.home-dash .hd-teb-combo:not(:has(.hd-toggle-input:checked)) .hd-field-input {
	background: var(--hd-surface-2);
	color: var(--hd-muted);
	cursor: not-allowed;
}

/* Selects get a custom dropdown caret */

/* Article editor wrapper — passthrough container so Summernote's own
   editor frame (.note-editor) provides the cell border. The full chain
   below stretches the editor to match the height of the left column
   (which has 4 stacked field groups). Each link declares display:flex
   so height: 100% / flex-grow propagate properly down to the editable
   region. Also stretches the raw textarea (before Summernote initializes
   or as an iframe-fallback alternative). */
.home-dash .hd-news-article-editor {
	flex: 1 1 auto;
	min-height: 240px;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
}
/* The raw <textarea> Django renders before Summernote initializes (and
   sometimes shown if Summernote fails to load). Stretch it to match
   the column height. !important needed because Django widget attrs
   often inline a rows= or cols= attribute. */
.home-dash .hd-news-article-editor > textarea {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-height: 240px !important;
	height: auto !important;
	padding: .65rem .85rem !important;
	font-size: .85rem !important;
	font-family: 'SF Mono', Menlo, Consolas, 'Courier New', monospace !important;
	line-height: 1.5 !important;
	color: var(--hd-ink) !important;
	background: var(--hd-surface, #fff) !important;
	border: 1px solid var(--hd-line) !important;
	border-radius: var(--hd-radius-sm, 8px) !important;
	resize: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Round Summernote's own frame to match the rest of the suite's fields
   and stretch it to fill the wrapper. */
.home-dash .hd-news-article-editor .note-editor,
.home-dash .hd-news-article-editor .note-editor.note-frame,
.home-dash .hd-news-article-editor .note-editor.note-airframe {
	border: 1px solid var(--hd-line) !important;
	border-radius: var(--hd-radius-sm, 8px) !important;
	overflow: visible !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 240px !important;
	height: auto !important;
	box-shadow: none !important;
}
/* Inside Summernote's frame: toolbar is content-sized, editing-area and
   editable region grow to fill remaining space. */
.home-dash .hd-news-article-editor .note-editor .note-toolbar {
	flex: 0 0 auto !important;
}
.home-dash .hd-news-article-editor .note-editor .note-editing-area {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}
.home-dash .hd-news-article-editor .note-editable,
.home-dash .hd-news-article-editor .note-editor .note-editable,
.home-dash .hd-news-article-editor .note-editor .note-editing-area > .note-editable {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	box-shadow: none !important;
	border: 0 !important;
}
.home-dash .hd-news-article-editor .note-editor .note-editing-area {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	box-shadow: none !important;
}
.home-dash .hd-news-article-editor .note-editor .note-statusbar {
	flex: 0 0 auto !important;
	display: none !important;
	border-top: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
/* Hide ONLY the resize-grip icon inside the statusbar, NOT the
   fullscreen icon (which also uses .note-icon-arrows-alt). */
/* Iframe fallback gets its own bordered shell + grows to fill height. */
.home-dash .hd-news-iframe {
	display: block;
	width: 100%;
	height: auto !important;
	flex: 1 1 auto;
	min-height: 240px;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}

/* "Locked / live" banner on the update page when timeCheck is false */
.home-dash .hd-news-locked-banner {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .65rem .9rem;
	margin: 0 0 1rem;
	background: rgba(217, 119, 6, .08);
	border: 1px solid rgba(217, 119, 6, .35);
	border-radius: var(--hd-radius-sm, 8px);
	color: #92400e;
	font-size: .85rem;
	line-height: 1.45;
}

/* Action footer */

/* =============================================================================
   News preview modal (.hd-news-preview-modal) + info modal (.hd-news-info-modal)
   ============================================================================= */
.hd-modal.hd-news-preview-modal .hd-news-preview-body,
.hd-modal.hd-news-info-modal .hd-news-info-body,
.home-dash .hd-news-del-card-body {
	padding: 1rem 1.25rem 1.25rem;
}
.hd-modal.hd-news-preview-modal .hd-news-preview-card {
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
.hd-modal.hd-news-preview-modal .hd-news-preview-card-head,
.home-dash .hd-news-del-card-head {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .65rem 1rem;
	background: var(--hd-surface, #fff);
	border-bottom: 1px solid var(--hd-line);
	color: var(--hd-ink);
}
.hd-modal.hd-news-preview-modal .hd-news-preview-card-head h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}
.hd-modal.hd-news-preview-modal .hd-news-preview-card-body {
	padding: 1.25rem 1rem 2rem;
}
.hd-modal.hd-news-preview-modal .hd-news-preview-carousel {
	min-height: 8rem;
}
.hd-modal.hd-news-preview-modal .hd-news-preview-link {
	display: block;
	color: var(--hd-ink);
	text-decoration: none;
	padding: 0 2rem;
}
.hd-modal.hd-news-preview-modal .hd-news-preview-link h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 .55rem;
}

/* Info modal */
.hd-modal.hd-news-info-modal .hd-news-info-note {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .65rem .85rem;
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-a25);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-size: .85rem;
}
.hd-modal.hd-news-info-modal .hd-news-info-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.hd-modal.hd-news-info-modal .hd-news-info-row {
	display: grid;
	grid-template-columns: minmax(110px, auto) 1fr;
	gap: .75rem;
	align-items: start;
	padding: .55rem 0;
	border-bottom: 1px dashed var(--hd-line);
}
.hd-modal.hd-news-info-modal .hd-news-info-term {
	margin: 0;
	display: flex;
	align-items: center;
}

/* =============================================================================
   NEWS DELETE CONFIRMATION (.hd-news-del)
   Pairs with news_delete.html. Danger-themed confirmation flow:
   warning paragraph above, article preview card in the middle, action
   footer with Cancel + Delete buttons. Mirrors .hd-gdel pattern but
   slimmer since news articles don't have downstream impact lists.
   ============================================================================= */

/* Hero strip with back button + title + subtitle */
.home-dash .hd-news-del-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.home-dash .hd-news-del-hero-text,
.home-dash .hd-lst-plan-row-meta {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

/* Panel — danger-tinted border so the page reads as a confirmation */
.home-dash .hd-news-del-title {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #991b1b;
}
.home-dash .hd-news-del-body {
	padding: 1.1rem 1.25rem 1.25rem;
}

/* Plain-language warning. The headline is bolded inside the sentence
   so the user sees exactly what they're deleting before scrolling. */
.home-dash .hd-news-del-warning {
	margin: 0 0 1.15rem;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--hd-ink);
}
.home-dash .hd-news-del-warning strong,
.hd-modal .hd-gb-del-prompt strong {
	color: #991b1b;
	font-weight: 700;
}

/* Article preview card — neutral surface with a small header strip
   identifying it as the article that will be deleted. */
.home-dash .hd-news-del-card {
	margin: 0 0 1.25rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
.home-dash .hd-news-del-card-head h3 {
	margin: 0;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hd-muted);
}

/* Article rendering — wrapping anchor (when article has a URL) gets
   the same visual as the no-link variant; the hint chip below tells
   the user the link will open in a new tab. */
.home-dash .hd-news-del-article-headline {
	margin: 0 0 .65rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hd-ink);
	line-height: 1.3;
}
.home-dash .hd-news-del-article-body {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--hd-ink);
	max-height: 240px;
	overflow-y: auto;
}
/* Suppress images inside the article preview to keep the card height
   predictable — the goal is identification, not full rendering. */
.home-dash .hd-news-del-article-link-hint {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .85rem;
	padding: .25rem .55rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hd-muted);
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
}

/* Form + actions */
.home-dash .hd-news-del-actions,
.home-dash .hd-tb-delete-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* =============================================================================
   FULL DETAIL (.hd-fd)
   Pairs with full_detail.html + _leftScroll.html + _rightContent.html.
   Two-pane reading view: left navigator with type-tinted links,
   right content area with type-tinted detail blocks. Bootstrap
   scrollspy ties them together; the JS in the page shell centers
   the deepest active link inside the navigator on activation.

   Type colors are reused on both panes (badge in content matches
   accent stripe in nav) so the user can scan for a specific type
   visually without reading labels.
   ============================================================================= */

/* Type color tokens — defined once, consumed by both nav + content */
.home-dash .hd-fd {
	--hd-fd-kra-bg: #dbeafe;
	--hd-fd-kra-fg: #1e3a8a;
	--hd-fd-kra-line: #93c5fd;
	--hd-fd-task-bg: #d1fae5;
	--hd-fd-task-fg: #065f46;
	--hd-fd-task-line: #6ee7b7;
	--hd-fd-foundation-bg: #cffafe;
	--hd-fd-foundation-fg: #155e75;
	--hd-fd-foundation-line: #67e8f9;
	--hd-fd-question-bg: #f1f5f9;
	--hd-fd-question-fg: #334155;
	--hd-fd-question-line: #cbd5e1;
	--hd-fd-procedure-bg: #fef3c7;
	--hd-fd-procedure-fg: #92400e;
	--hd-fd-procedure-line: #fcd34d;
	--hd-fd-step-bg: #ede9fe;
	--hd-fd-step-fg: #5b21b6;
	--hd-fd-step-line: #c4b5fd;
	--hd-fd-issue-bg: #fee2e2;
	--hd-fd-issue-fg: #991b1b;
	--hd-fd-issue-line: #fca5a5;
	--hd-fd-trialerror-bg: #e5e7eb;
	--hd-fd-trialerror-fg: #1f2937;
	--hd-fd-trialerror-line: #9ca3af;
}

/* Hero — single line of text, no back button (page is reached
   from the dashboard / nav, not as a sub-page) */
/* Lift the 72ch cap and forbid wrapping — the subtitle is short
   enough to fit one line on any realistic suite viewport. */
.home-dash .hd-fd-hero .hd-dept-hero-sub {
	max-width: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Panel chrome — body has no padding so the two-pane grid touches
   the panel walls and uses its own internal gutter */

/* Two-pane responsive grid. Below lg the navigator stacks above
   the content pane; above lg they sit side-by-side with a fixed
   navigator width. */
.home-dash .hd-fd-grid {
	display: grid;
	grid-template-columns: 1fr;
	min-height: min(70vh, 720px);
}
@media (min-width: 992px) {
	.home-dash .hd-fd-grid {
		grid-template-columns: 320px 1fr;
	}
}

/* Left navigator pane */
.home-dash .hd-fd-nav-pane {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
@media (min-width: 992px) {
	.home-dash .hd-fd-nav-pane {
		border-bottom: 0;
		border-right: 1px solid var(--hd-line);
	}
}

/* Search input — icon-affordance pattern matching .hd-emp-search */
.home-dash .hd-fd-search {
	position: relative;
	padding: .75rem .85rem;
	border-bottom: 1px solid var(--hd-line);
	background: var(--hd-surface, #fff);
}
.home-dash .hd-fd-search-icon {
	position: absolute;
	left: 1.6rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hd-muted);
	pointer-events: none;
	font-size: .9rem;
}
.home-dash .hd-fd-search-input {
	width: 100%;
	padding: .55rem .75rem .55rem 2.4rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	font-size: .9rem;
	color: var(--hd-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Scroll region — let the navigator scroll independently of the page */
.home-dash .hd-fd-nav-scroll {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 600px;
	overflow-y: auto;
	padding: .75rem;
}
@media (min-width: 992px) {
	.home-dash .hd-fd-nav-scroll,
	.home-dash .hd-fd-content-scroll {
		max-height: min(75vh, 820px);
	}
}

/* Nav containers — the outer `<nav id="masterNav">` is a flex
   column; nested groups indent and add a left guide line so the
   tree structure reads visually. */
.home-dash .hd-fd-nav-group--nested {
	margin-left: .65rem;
	padding-left: .75rem;
	border-left: 1px solid var(--hd-line);
	margin-top: .15rem;
	margin-bottom: .25rem;
}

/* Hide rule used by the live filter JS */

/* Nav link — left accent stripe in the type color, body in neutral
   surface, label wraps cleanly. The `.active` state (set by Bootstrap
   scrollspy) tints the background in the type color so the user can
   see at a glance which kind of element they're currently reading. */
.home-dash .hd-fd-nav-link {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .45rem .65rem .45rem .85rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-left: 3px solid var(--hd-muted, #6b6b78);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	text-decoration: none;
	font-size: .85rem;
	line-height: 1.3;
	transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.home-dash .hd-fd-nav-link:hover,
.home-dash .hd-fd-nav-link:focus-visible {
	background: var(--hd-surface-2);
	color: var(--hd-blue);
	outline: none;
	transform: translateX(1px);
}
.home-dash .hd-fd-nav-link.active {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue);
	border-left-width: 6px;
	padding-left: calc(.85rem - 3px);
	box-shadow: 0 2px 6px var(--hd-blue-a18);
	transform: translateX(2px);
}
.home-dash .hd-fd-nav-tag,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row-eyebrow {
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-fd-nav-label {
	font-weight: 600;
	color: var(--hd-ink);
	word-break: break-word;
}

/* Per-type accent stripe + active state. Active is intentionally
   high-contrast — the type's --line color becomes the full left
   stripe, and the --bg color fills the body. The type's --fg color
   takes over the tag and label for readability against the tint. */
.home-dash .hd-fd-nav-link--kra { border-left-color: var(--hd-fd-kra-line); }
.home-dash .hd-fd-nav-link--kra.active {
	background: var(--hd-fd-kra-bg);
	border-color: var(--hd-fd-kra-line);
	border-left-color: var(--hd-fd-kra-fg);
	box-shadow: 0 2px 6px rgba(30, 58, 138, .18);
}
.home-dash .hd-fd-nav-link--kra.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--kra.active .hd-fd-nav-label { color: var(--hd-fd-kra-fg); }

.home-dash .hd-fd-nav-link--task { border-left-color: var(--hd-fd-task-line); }
.home-dash .hd-fd-nav-link--task.active {
	background: var(--hd-fd-task-bg);
	border-color: var(--hd-fd-task-line);
	border-left-color: var(--hd-fd-task-fg);
	box-shadow: 0 2px 6px rgba(6, 95, 70, .18);
}
.home-dash .hd-fd-nav-link--task.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--task.active .hd-fd-nav-label { color: var(--hd-fd-task-fg); }

.home-dash .hd-fd-nav-link--foundation { border-left-color: var(--hd-fd-foundation-line); }
.home-dash .hd-fd-nav-link--foundation.active {
	background: var(--hd-fd-foundation-bg);
	border-color: var(--hd-fd-foundation-line);
	border-left-color: var(--hd-fd-foundation-fg);
	box-shadow: 0 2px 6px rgba(21, 94, 117, .18);
}
.home-dash .hd-fd-nav-link--foundation.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--foundation.active .hd-fd-nav-label { color: var(--hd-fd-foundation-fg); }

.home-dash .hd-fd-nav-link--question { border-left-color: var(--hd-fd-question-line); }
.home-dash .hd-fd-nav-link--question.active {
	background: var(--hd-fd-question-bg);
	border-color: var(--hd-fd-question-line);
	border-left-color: var(--hd-fd-question-fg);
	box-shadow: 0 2px 6px rgba(51, 65, 85, .18);
}
.home-dash .hd-fd-nav-link--question.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--question.active .hd-fd-nav-label { color: var(--hd-fd-question-fg); }

.home-dash .hd-fd-nav-link--procedure { border-left-color: var(--hd-fd-procedure-line); }
.home-dash .hd-fd-nav-link--procedure.active {
	background: var(--hd-fd-procedure-bg);
	border-color: var(--hd-fd-procedure-line);
	border-left-color: var(--hd-fd-procedure-fg);
	box-shadow: 0 2px 6px rgba(146, 64, 14, .18);
}
.home-dash .hd-fd-nav-link--procedure.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--procedure.active .hd-fd-nav-label { color: var(--hd-fd-procedure-fg); }

.home-dash .hd-fd-nav-link--step { border-left-color: var(--hd-fd-step-line); }
.home-dash .hd-fd-nav-link--step.active {
	background: var(--hd-fd-step-bg);
	border-color: var(--hd-fd-step-line);
	border-left-color: var(--hd-fd-step-fg);
	box-shadow: 0 2px 6px rgba(91, 33, 182, .18);
}
.home-dash .hd-fd-nav-link--step.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--step.active .hd-fd-nav-label { color: var(--hd-fd-step-fg); }

.home-dash .hd-fd-nav-link--issue { border-left-color: var(--hd-fd-issue-line); }
.home-dash .hd-fd-nav-link--issue.active {
	background: var(--hd-fd-issue-bg);
	border-color: var(--hd-fd-issue-line);
	border-left-color: var(--hd-fd-issue-fg);
	box-shadow: 0 2px 6px rgba(153, 27, 27, .18);
}
.home-dash .hd-fd-nav-link--issue.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--issue.active .hd-fd-nav-label { color: var(--hd-fd-issue-fg); }

.home-dash .hd-fd-nav-link--trialerror { border-left-color: var(--hd-fd-trialerror-line); }
.home-dash .hd-fd-nav-link--trialerror.active {
	background: var(--hd-fd-trialerror-bg);
	border-color: var(--hd-fd-trialerror-line);
	border-left-color: var(--hd-fd-trialerror-fg);
	box-shadow: 0 2px 6px rgba(31, 41, 55, .18);
}
.home-dash .hd-fd-nav-link--trialerror.active .hd-fd-nav-tag,
.home-dash .hd-fd-nav-link--trialerror.active .hd-fd-nav-label { color: var(--hd-fd-trialerror-fg); }

/* Nav empty state */
.home-dash .hd-fd-nav-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 2rem 1rem;
	color: var(--hd-muted);
	text-align: center;
}
.home-dash .hd-fd-nav-empty .bi { font-size: 1.5rem; }
.home-dash .hd-fd-nav-empty p { margin: 0; font-size: .85rem; }

/* Right content pane */
.home-dash .hd-fd-content-pane {
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.home-dash .hd-fd-content-head {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .75rem 1.15rem;
	border-bottom: 1px solid var(--hd-line);
	background: var(--hd-surface, #fff);
}
.home-dash .hd-fd-content-head h2 {
	margin: 0;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-fd-content-scroll {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 600px;
	overflow-y: auto;
	padding: 1.25rem 1.5rem;
}
/* At lg+ the content scroll needs a concrete height for Bootstrap
   scrollspy to function — it observes scroll events on this element,
   so it must actually be the scrolling container (not the page). Use
   a viewport-relative height so it adapts to the user's screen. */
@media (min-width: 992px) {
}

/* Detail block — each scrollspy target. Header is type-tinted with
   a subtle background so the type is identifiable while scrolling. */
.home-dash .hd-fd-block {
	margin-bottom: 1.5rem;
	scroll-margin-top: 1rem;
}
.home-dash .hd-fd-block--nested { margin-left: 1.25rem; }
.home-dash .hd-fd-block--nested-2 { margin-left: 2.5rem; }

.home-dash .hd-fd-block-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .65rem;
	padding: .55rem .85rem;
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface-2);
	border-left: 4px solid var(--hd-muted, #6b6b78);
	margin-bottom: .65rem;
}
.home-dash .hd-fd-block-title {
	margin: 0;
	font-weight: 700;
	color: var(--hd-ink);
	word-break: break-word;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-fd-block-body {
	padding: 0 .25rem;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--hd-ink);
}
.home-dash .hd-fd-block-body p {
	margin: 0 0 .85rem;
	word-break: break-word;
}

/* Per-type block-head accent line + tinted background */
.home-dash .hd-fd-block-head--kra { border-left-color: var(--hd-fd-kra-line); background: var(--hd-fd-kra-bg); }
.home-dash .hd-fd-block-head--task { border-left-color: var(--hd-fd-task-line); background: var(--hd-fd-task-bg); }
.home-dash .hd-fd-block-head--foundation { border-left-color: var(--hd-fd-foundation-line); background: var(--hd-fd-foundation-bg); }
.home-dash .hd-fd-block-head--question { border-left-color: var(--hd-fd-question-line); background: var(--hd-fd-question-bg); }
.home-dash .hd-fd-block-head--procedure { border-left-color: var(--hd-fd-procedure-line); background: var(--hd-fd-procedure-bg); }
.home-dash .hd-fd-block-head--step { border-left-color: var(--hd-fd-step-line); background: var(--hd-fd-step-bg); }
.home-dash .hd-fd-block-head--issue { border-left-color: var(--hd-fd-issue-line); background: var(--hd-fd-issue-bg); }
.home-dash .hd-fd-block-head--trialerror { border-left-color: var(--hd-fd-trialerror-line); background: var(--hd-fd-trialerror-bg); }

/* Type badge — solid pill in the type color, sits before the title */
.home-dash .hd-fd-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 2px 8px;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
	line-height: 1.4;
}
.home-dash .hd-fd-badge--kra { color: var(--hd-fd-kra-fg); border-color: var(--hd-fd-kra-line); background: var(--hd-surface, #fff); }
.home-dash .hd-fd-badge--task { color: var(--hd-fd-task-fg); border-color: var(--hd-fd-task-line); background: var(--hd-surface, #fff); }
.home-dash .hd-fd-badge--foundation { color: var(--hd-fd-foundation-fg); border-color: var(--hd-fd-foundation-line); background: var(--hd-surface, #fff); }
.home-dash .hd-fd-badge--question { color: var(--hd-fd-question-fg); border-color: var(--hd-fd-question-line); background: var(--hd-surface, #fff); }
.home-dash .hd-fd-badge--procedure { color: var(--hd-fd-procedure-fg); border-color: var(--hd-fd-procedure-line); background: var(--hd-surface, #fff); }
.home-dash .hd-fd-badge--step { color: var(--hd-fd-step-fg); border-color: var(--hd-fd-step-line); background: var(--hd-surface, #fff); }
.home-dash .hd-fd-badge--issue { color: var(--hd-fd-issue-fg); border-color: var(--hd-fd-issue-line); background: var(--hd-surface, #fff); }
.home-dash .hd-fd-badge--trialerror { color: var(--hd-fd-trialerror-fg); border-color: var(--hd-fd-trialerror-line); background: var(--hd-surface, #fff); }

/* Step / TrialError field list — cleaner than stacked paragraphs */
.home-dash .hd-fd-step-fields {
	margin: 0 0 .85rem;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .35rem .85rem;
	padding: .65rem .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	font-size: .88rem;
}
.home-dash .hd-fd-step-fields dt {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	padding-top: 2px;
}
.home-dash .hd-fd-step-fields dd {
	margin: 0;
	color: var(--hd-ink);
	line-height: 1.45;
}

/* Right content empty state */
.home-dash .hd-fd-block-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
	padding: 3rem 1rem;
	color: var(--hd-muted);
	text-align: center;
}
.home-dash .hd-fd-block-empty p { margin: 0; font-size: .9rem; }

/* =============================================================================
   Employee search input wrapper — hd-emp-search-*
   Used by user_list, employee_directory, group_base, manufacturer_select,
   and several other AJAX search inputs.
   ============================================================================= */
.home-dash .hd-emp-search-icon {
	position: absolute;
	left: .85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hd-muted);
	pointer-events: none;
	font-size: .9rem;
	z-index: 1;
}
.home-dash .hd-emp-search-input {
	width: 100%;
	padding: .6rem .75rem .6rem 2.4rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	font-size: .95rem;
	font-family: inherit;
	color: var(--hd-ink);
	line-height: 1.4;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}
.home-dash .hd-emp-search-input::placeholder { color: var(--hd-muted); opacity: .85; }
.home-dash .hd-emp-search-clear {
	position: absolute;
	right: .35rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hd-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	z-index: 1;
}

/* AJAX results dropdown for employee search */

/* =============================================================================
   Employee card — actual class names used in the template
   The template uses .hd-emp-avatar, .hd-emp-avatar-img, .hd-emp-card-top,
   .hd-emp-card-identity, .hd-emp-card-contact, and .hd-emp-line. These
   override the attempt at .hd-emp-card-avatar* etc. with the real names.
   ============================================================================= */

/* Card body becomes a vertical stack (top: avatar+identity row, then contact) */

/* Top row: avatar on the left, name+role stacked on the right */
.home-dash .hd-emp-card-top {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-width: 0;
}

/* Avatar — the actual class is .hd-emp-avatar */

/* Identity column (name + role) */
.home-dash .hd-emp-card-identity .hd-emp-card-name {
	margin: 0;
	font-size: .95rem;
	font-weight: 700;
	/* Themed ink — --hd-navy is a fixed near-black with no dark variant. */
	color: var(--hd-ink);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .18s ease;
}
.home-dash .hd-emp-card-identity .hd-emp-card-role {
	margin: 0;
	font-size: .82rem;
	color: var(--hd-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Contact section (below the top row) */
.home-dash .hd-emp-card-contact {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding-top: .35rem;
	border-top: 1px dashed var(--hd-line);
}
.home-dash .hd-emp-line {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .8rem;
	color: var(--hd-muted);
	min-width: 0;
}
.home-dash .hd-emp-line .bi {
	color: var(--hd-blue);
	font-size: .82rem;
	flex: 0 0 auto;
}
.home-dash .hd-emp-line span,
.home-dash .hd-emp-line a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

/* =============================================================================
   Employee search — submit button positioning fix
   The .hd-emp-mgr-search-submit lives inside .hd-emp-search (positioned
   relative). Earlier the button was only flex-styled, so without an explicit
   position it flowed below the input. Anchor it to the right edge of the
   search wrapper, vertically centered, with the input padded-right enough
   to clear it.
   ============================================================================= */
.home-dash .hd-emp-search .hd-emp-mgr-search-submit {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}
.home-dash .hd-emp-search .hd-emp-search-input {
	padding-right: 42px;
}

/* =============================================================================
   Hero row vertical centering — brute force
   Bootstrap's .row + .align-items-center should center cols vertically,
   but on the equipment_manager hero the right-column search input renders
   at the top of the row instead of centered. Force the row's flex behavior
   explicitly and force the form/search inside the right column to center.
   ============================================================================= */
.home-dash .hd-hero > .row {
	align-items: center !important;
}
.home-dash .hd-hero > .row > .col-12.col-lg-auto,
.home-dash .hd-hero > .row > .col-12.col-lg-auto > *,
.home-dash .hd-cpv-lesson-row:not(.is-started):not(.is-complete) .hd-cpv-lesson-status {
	align-self: center;
}/* The inline-search wrapper inside the form needs explicit centering too {
	align-self: center;
	margin-top: auto;
	margin-bottom: auto;
}

/* =============================================================================
   License List — panel-head meta cluster (right side of the panel head)
   ============================================================================= */
.home-dash .hd-lic-panel-meta {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-left: auto;
}
.home-dash .hd-lic-panel-meta-label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-white-a80);
	white-space: nowrap;
}
@media (max-width: 575.98px) {
}/* =============================================================================
   App List — panel-head actions cluster (right side of the panel head)
   Houses the "New App" CTA so it lives next to the panel title rather
   than in a standalone action row above.
   ============================================================================= */
.home-dash .hd-applist-panel-actions {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-left: auto;
}/* Body wrapper — 80% of the page below the hero */
.home-dash .hd-applist-body-wrap {
	width: 80%;
	max-width: 1280px;
	margin: 1rem auto 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (max-width: 991.98px) {
	.home-dash .hd-applist-body-wrap {
		width: 100%;
		margin-top: .75rem;
	}
}

/* =============================================================================
   Category List — hd-cat-* (category_list.html, _category_list_results.html)
   ============================================================================= */



/* ---- Responsive grid ---- */
.home-dash .hd-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .35rem .5rem;
}

/* ---- Tile (one per category) ---- */
.home-dash .hd-cat-tile-row {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .45rem .65rem;
	border-radius: 7px;
	transition: background .15s ease;
}
.home-dash .hd-cat-tile-main {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}
.home-dash .hd-cat-default-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 5px;
	color: var(--hd-muted);
	text-decoration: none;
	transition: color .15s ease, background .15s ease;
}
.home-dash .hd-cat-default-radio {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	color: var(--hd-muted);
	text-decoration: none;
	transition: color .15s ease, background .15s ease;
}

.home-dash .hd-cat-tile-name {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: baseline;
	gap: .25rem;
	color: var(--hd-ink);
	text-decoration: none;
	font-size: .88rem;
	overflow: hidden;
}
.home-dash .hd-cat-tile-count {
	flex: 0 0 auto;
	color: var(--hd-muted);
	font-size: .78rem;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
}

.home-dash .hd-cat-tile-actions,
.home-dash .hd-iss-trial-card-actions {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .15rem;
}
.home-dash .hd-cat-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
	text-decoration: none;
	opacity: 0;
}
.home-dash .hd-cat-action.is-locked {
	color: var(--hd-muted);
	cursor: not-allowed;
	opacity: 1; /* always visible since this is informational, not actionable */
}


/* =============================================================================
   Company Builder — hd-cb-*
   (company_builder.html, _company_select.html, _company_list.html,
    _company_list_include.html, _company_info.html, _company_licenses.html,
    _app_license_allocations_modal.html)
   ============================================================================= */

/* ---- Page wrapper ---- */
@media (min-width: 768px) {
}

/* =============================================================================
   Companies sidebar — hd-cb-select-*
   ============================================================================= */
.home-dash .hd-cb-select-body {
	overflow-y: auto;
	padding: .65rem .75rem .85rem;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
@media (max-width: 991.98px) {
}

.home-dash .hd-cb-select-add,
.home-dash .hd-jc-sidebar-add,
.home-dash .hd-cert-sidebar-add,
.home-dash .hd-agency-sidebar-add,
.home-dash .hd-ind-sidebar-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	padding: 0;
	border: 1px solid var(--hd-white-a18);
	border-radius: 8px;
	background: var(--hd-white-a12);
	color: var(--hd-white-a92);
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
	text-decoration: none;
}

/* Search form / advanced search collapse */
.home-dash .hd-cb-search-form { margin: 0; display: flex; flex-direction: column; gap: .5rem; }

.home-dash .hd-cb-advanced-trigger {
	display: flex;
	justify-content: flex-end;
}
.home-dash .hd-cb-advanced-link {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem .55rem;
	border-radius: 7px;
	color: var(--hd-blue);
	font-size: .76rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
	cursor: pointer;
}
.home-dash .hd-cb-advanced-link:hover,
.home-dash .hd-cb-advanced-link:focus-visible {
	background: var(--hd-surface-2);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-cb-advanced-caret {
	transition: transform .2s ease;
	font-size: .72rem;
}

.home-dash .hd-cb-advanced-pane {
	padding: .65rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.home-dash .hd-cb-advanced-label {
	font-size: .65rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--hd-muted);
}
.home-dash .hd-cb-advanced-options {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .65rem;
}
.home-dash .hd-cb-radio {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .82rem;
	color: var(--hd-ink);
	cursor: pointer;
	margin: 0;
}
.home-dash .hd-cb-advanced-actions {
	display: flex;
	justify-content: flex-end;
	gap: .35rem;
	margin-top: .25rem;
	padding-top: .35rem;
	border-top: 1px dashed var(--hd-line);
}



/* =============================================================================
   Company Info panel — hd-cb-info-*
   ============================================================================= */
.home-dash .hd-cb-info-body { padding: 1.25rem 1.25rem 1rem; }

.home-dash .hd-cb-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75rem;
	margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
	.home-dash .hd-cb-info-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}
.home-dash .hd-cb-info-cell {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .65rem .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
}
@media (min-width: 768px) {
	.home-dash .hd-cb-info-cell {
		flex-direction: column;
		align-items: center;
		gap: .55rem;
		padding: 1rem .65rem;
		text-align: center;
	}
}
.home-dash .hd-cb-info-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
	flex: 1 1 auto;
}
@media (min-width: 768px) {
	.home-dash .hd-cb-info-label { flex: 0 0 auto; order: 1; }
	.home-dash .hd-cb-info-toggle,
	.home-dash .hd-cb-info-tree-btn { order: 2; }
}

.home-dash .hd-cb-info-tree-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	border: 1px solid var(--hd-line);
	color: var(--hd-blue);
	font-size: 1rem;
	transition: background .18s ease, color .18s ease, transform .18s ease;
	text-decoration: none;
}
.home-dash .hd-cb-info-tree-btn:hover,
.home-dash .hd-cb-info-tree-btn:focus-visible {
	background: linear-gradient(135deg, var(--hd-lime), var(--hd-blue));
	color: #fff;
	outline: none;
	transform: translateY(-1px);
}

.home-dash .hd-cb-info-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--hd-line);
}

/* Delete modal extras */
.hd-modal.hd-cb-delete-modal .hd-cb-affected-users {
	margin: .85rem 0 1rem;
	padding: .75rem 1rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	font-size: .87rem;
	color: var(--hd-ink);
	max-height: 240px;
	overflow-y: auto;
}
.hd-modal.hd-cb-delete-modal .hd-cb-affected-users li {
	padding: .15rem 0;
	list-style: disc;
	margin-left: 1.1rem;
}
.hd-modal.hd-cb-delete-modal .hd-cb-delete-warning {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1rem;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .25);
	border-radius: 8px;
	color: #991b1b;
	font-size: .87rem;
}
.hd-modal.hd-cb-delete-modal .hd-cb-delete-warning .bi {
	color: #dc3545;
	font-size: 1rem;
	flex: 0 0 auto;
}

/* =============================================================================
   Company Licenses panel — hd-cb-licenses-*
   ============================================================================= */
.home-dash .hd-cb-since-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .65rem;
	border-radius: 999px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	font-size: .76rem;
	font-weight: 600;
	color: var(--hd-muted);
	white-space: nowrap;
}

/* Licenses table — hybrid responsive layout */
@media (min-width: 992px) {
	.home-dash .hd-cb-lic-keyrow {
		display: grid;
		grid-template-columns:
			minmax(0, 3fr) minmax(110px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(80px, .8fr) minmax(80px, .8fr);
		gap: .75rem;
		padding: .55rem .9rem;
		margin: 0 0 .35rem;
		background: var(--hd-surface-2);
		border: 1px solid var(--hd-line);
		border-radius: 8px;
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
}
.home-dash .hd-cb-lic-row,
.home-dash .hd-cb-applic-row {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: .65rem .9rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
	transition: border-color .18s ease, background .18s ease;
}
@media (min-width: 992px) {
	.home-dash .hd-cb-lic-row {
		display: grid;
		grid-template-columns:
			minmax(0, 3fr) minmax(110px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(80px, .8fr) minmax(80px, .8fr);
		gap: .75rem;
		align-items: center;
	}
}
.home-dash .hd-cb-lic-cell-value,
.home-dash .hd-cb-applic-cell-value {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .9rem;
	color: var(--hd-ink);
}
@media (min-width: 992px) {
}

.home-dash .hd-cb-lic-link,
.home-dash .hd-cb-applic-link {
	color: var(--hd-ink);
	font-weight: 700;
	text-decoration: none;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
}
.home-dash .hd-cb-lic-link:hover,
.home-dash .hd-cb-applic-link:hover,
.home-dash .hd-cb-lic-link:focus-visible,
.home-dash .hd-cb-applic-link:focus-visible,
.hd-login-reset:hover,
.hd-login-reset:focus-visible {
	color: var(--hd-ink);
	text-decoration: underline;
	outline: none;
}

.home-dash .hd-cb-lic-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	padding: 0;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
}

/* App Licenses table */
@media (min-width: 992px) {
	.home-dash .hd-cb-applic-keyrow {
		display: grid;
		grid-template-columns:
			minmax(0, 2fr) minmax(0, 1.4fr) minmax(140px, 1fr) minmax(80px, .8fr) minmax(110px, .9fr) minmax(110px, .9fr);
		gap: .75rem;
		padding: .55rem .9rem;
		margin: 0 0 .35rem;
		background: var(--hd-surface-2);
		border: 1px solid var(--hd-line);
		border-radius: 8px;
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--hd-muted);
	}
	.home-dash .hd-cb-applic-row {
		display: grid;
		grid-template-columns:
			minmax(0, 2fr) minmax(0, 1.4fr) minmax(140px, 1fr) minmax(80px, .8fr) minmax(110px, .9fr) minmax(110px, .9fr);
		gap: .75rem;
		align-items: center;
	}
}

.home-dash .hd-cb-applic-group-break {
	height: .5rem;
	list-style: none;
	border-top: 1px dashed var(--hd-line);
}

.home-dash .hd-cb-applic-price {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .82rem;
	font-weight: 700;
	color: var(--hd-ink);
}

/* =============================================================================
   Allocations modal — hd-cb-alloc-*
   ============================================================================= */
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-summary {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .85rem 1rem;
	margin-bottom: .75rem;
	background: linear-gradient(135deg, var(--hd-lime-a06), var(--hd-blue-a06));
	border: 1px solid var(--hd-line);
	border-radius: 9px;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-summary-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 9px;
	background: var(--hd-surface);
	color: var(--hd-blue);
	font-size: 1rem;
	flex: 0 0 auto;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-summary-text {
	font-size: .9rem;
	color: var(--hd-ink);
	line-height: 1.45;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-help {
	margin: 0 0 1rem;
	font-size: .87rem;
	color: var(--hd-muted);
	line-height: 1.5;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-keyrow {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(140px, 1fr);
	gap: .5rem;
	padding: .55rem .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-item {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 9px;
	overflow: hidden;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-row {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(140px, 1fr);
	gap: .5rem;
	width: 100%;
	padding: .65rem .85rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: background .15s ease;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-dept {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .9rem;
	color: var(--hd-ink);
	font-weight: 600;
	min-width: 0;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-caret {
	font-size: .8rem;
	color: var(--hd-muted);
	transition: transform .2s ease;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-using {
	display: inline-flex;
	justify-content: center;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-using-pill {
	display: inline-flex;
	align-items: baseline;
	gap: .15rem;
	padding: .2rem .65rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hd-lime-a12), var(--hd-blue-a12));
	border: 1px solid var(--hd-blue-a25);
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .8rem;
	font-weight: 700;
	color: var(--hd-ink);
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-users-wrap { padding: 0 .85rem .85rem; }
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-users {
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
	overflow: hidden;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-users-head {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem .75rem;
	background: var(--hd-surface);
	border-bottom: 1px solid var(--hd-line);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-users-list {
	list-style: none;
	margin: 0;
	padding: .35rem .35rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.hd-modal.hd-cb-allocations-modal .hd-cb-alloc-user {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .35rem .55rem;
	font-size: .85rem;
	color: var(--hd-ink);
	border-radius: 6px;
}

/* =============================================================================
   GROUP BUILDER (.hd-gb)
   Pairs with group_builder.html + _group_select.html + _group_list.html +
   _group_list_include.html + _group_overview.html + _group_update.html +
   _related_groups.html.
   Three-column layout: groups list (left, with related-groups panel
   beneath) | mission/vision pane (middle, read-only or editable based
   on PERM_KNOWLEDGE) | KRA list (right, owns its own .hd-kl namespace).
   ============================================================================= */

/* Hero — title on the left, group jump-pill on the right */
.home-dash .hd-gb-hero,
.home-dash .hd-kb-hero,
.home-dash .hd-tb-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}home-dash .hd-tb-hero-pill:hover,
.home-dash .hd-tb-hero-pill:focus-visible,
.home-dash .hd-fb-hero-pill:hover,
.home-dash .hd-fb-hero-pill:focus-visible,
.home-dash .hd-stb-crumb:hover,
.home-dash .hd-stb-crumb:focus-visible,
.home-dash .hd-qb-hero-pill:hover,
.home-dash .hd-qb-hero-pill:focus-visible,
.home-dash .hd-pb-hero-pill:hover,
.home-dash .hd-pb-hero-pill:focus-visible,
.home-dash .hd-lst-crumb:hover,
.home-dash .hd-lst-crumb:focus-visible,
.home-dash .hd-gb-kebab:hover,
.home-dash .hd-gb-kebab:focus-visible {
	background: var(--hd-white-a12);
	border-color: var(--hd-white-a25);
	color: #fff;
	outline: none;
	text-decoration: none;
}/* Three-column responsive grid. Below lg the columns stack; above lg
   they sit 3:6:3 to match the original Bootstrap layout (col-3 col-6
   col-3). The middle column gets half the width since it holds the
   editor with two textareas. */
@media (min-width: 992px) {
	.home-dash .hd-gb-grid,
	.home-dash .hd-kb-grid,
	.home-dash .hd-tb-grid,
	.home-dash .hd-fb-grid,
	.home-dash .hd-stb-grid,
	.home-dash .hd-stb-q-builder-grid,
	.home-dash .hd-lst-grid,
	.home-dash .hd-rb-grid,
	.home-dash .hd-crb-grid,
	.home-dash .hd-ob-grid,
	.home-dash .hd-lsb-grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
		align-items: start;
	}
	.home-dash .hd-teb-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
	.home-dash .hd-inb-build-grid {
		grid-template-columns: 8.5rem minmax(0, 1fr);
		align-items: start;
	}
}
@media (min-width: 576px) {
	.home-dash .hd-emp-id-form-row,
	.home-dash .hd-app-form-row,
	.hd-modal .hd-lb-modal-grid,
	.home-dash .hd-crb-grid--2,
	.home-dash .hd-ob-update-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
@media (min-width: 768px) {
	.home-dash .hd-crb-grid--3 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ---- Left column: Groups list panel ---- */
.home-dash .hd-gb-groups-body,
.home-dash .hd-gb-kra-body {
	padding: .75rem;
	max-height: 480px;
	overflow-y: auto;
}

/* List row — sortable item. Grip is hidden by default (added back
   when the row enters sortable mode via JS); link fills remaining
   width with name + optional location meta. */
.home-dash .hd-gb-list-row,
.home-dash .hd-kb-list-row {
	display: flex;
	align-items: stretch;
	gap: .25rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.home-dash .hd-gb-list-row:hover,
.home-dash .hd-gb-related-row:hover,
.home-dash .hd-gb-orphan-row:hover,
.home-dash .hd-gb-unused-row:hover,
.home-dash .hd-kb-acc-row:hover,
.home-dash .hd-kb-list-row:hover,
.home-dash .hd-iss-orphan-row:hover,
.home-dash .hd-lst-list-row:hover {
	border-color: var(--hd-blue-soft, #c8d8e8);
	background: var(--hd-surface-2);
}
.home-dash .hd-gb-list-row.is-selected {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue);
	box-shadow: inset 3px 0 0 var(--hd-blue), 0 2px 6px var(--hd-blue-a12);
}
.home-dash .hd-gb-list-grip,
.home-dash .hd-kb-list-grip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	color: var(--hd-muted);
	cursor: grab;
}
.home-dash .hd-gb-list-link {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem .75rem;
	color: var(--hd-ink);
	text-decoration: none;
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.3;
}
.home-dash .hd-gb-list-name {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	word-break: break-word;
}
.home-dash .hd-gb-list-editor {
	display: inline-flex;
	color: #d97706;
	font-size: .85rem;
}
.home-dash .hd-gb-list-meta,
.home-dash .hd-kb-acc-row-meta {
	font-size: .72rem;
	color: var(--hd-muted);
	letter-spacing: .02em;
}

/* ---- Left column: Related Groups panel ---- */
/* Lift the suite-wide overflow:hidden so the inline-search dropdown
   can escape the panel body. */
.home-dash .hd-gb-related-body {
	padding: .85rem 1rem 1rem;
	max-height: 400px;
}

/* Related-groups list row — flex with leading icon + link + hover-
   revealed trash button. Visually lighter than .hd-gb-list-row since
   these don't have a selection state (you can't "be on" a related
   group from the builder, only navigate to it or remove it). */
.home-dash .hd-gb-related-row {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .25rem .15rem .5rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: border-color .15s ease, background .15s ease;
}
.home-dash .hd-gb-related-link,
.home-dash .hd-gb-orphan-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: .45rem .25rem;
	font-size: .87rem;
	font-weight: 500;
	color: var(--hd-ink);
	text-decoration: none;
	line-height: 1.3;
}
.home-dash .hd-gb-related-link > .bi,
.home-dash .hd-gb-orphan-link > .bi,
.home-dash .hd-gb-unused-name .bi,
.home-dash .hd-kb-acc-sync-link > .bi,
.home-dash .hd-teb-instructions .bi,
.home-dash .hd-pb-task-picker-btn > .bi:first-child {
	flex: 0 0 auto;
	color: var(--hd-blue);
	font-size: 1rem;
}
.home-dash .hd-gb-related-remove,
.home-dash .hd-gb-orphan-add,
.home-dash .hd-gb-unused-add,
.home-dash .hd-kb-acc-row-add {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--hd-muted);
	text-decoration: none;
	cursor: pointer;
	opacity: 0;
	transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.home-dash .hd-gb-related-remove:hover,
.home-dash .hd-gb-related-remove:focus-visible {
	background: rgba(220, 53, 69, .10);
	border-color: rgba(220, 53, 69, .35);
	color: #b91c1c;
	text-decoration: none;
	outline: none;
}

/* ---- Middle column: Overview (read-only) ---- */
.home-dash .hd-gb-overview-body { padding: 1.15rem 1.25rem 1.25rem; }
.home-dash .hd-gb-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
}
@media (min-width: 768px) {
	.home-dash .hd-gb-fields {
		grid-template-columns: max-content 1fr;
		gap: .75rem 1.25rem;
	}
}
.home-dash .hd-gb-fields dt {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	padding-top: 2px;
}
.home-dash .hd-gb-fields dd {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--hd-ink);
	word-break: break-word;
}

/* ---- Middle column: Edit form ---- */
.home-dash .hd-gb-update-body,
.home-dash .hd-kb-update-body,
.home-dash .hd-su-body,
.home-dash .hd-qb-overview-body,
.home-dash .hd-qb-cu-body,
.home-dash .hd-pb-overview-body {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	padding: 1.15rem 1.25rem 1.25rem;
}
.home-dash .hd-gb-textarea,
.home-dash .hd-kb-update-textarea,
.home-dash .hd-tb-update-textarea {
	width: 100%;
	min-height: 5.5rem;
	resize: none;
}
.home-dash .hd-gb-form-actions,
.home-dash .hd-qb-del-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
	margin-top: .25rem;
}

/* ---- Kebab dropdown (used by both overview + update panel heads) ---- */
.home-dash .hd-gb-kebab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	color: var(--hd-white-a92);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
	flex: 0 0 auto;
}
.home-dash .hd-gb-dropdown {
	min-width: 11rem;
	padding: .35rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-md, 0 6px 18px rgba(0, 0, 0, .08));
	background: var(--hd-surface, #fff);
}
.home-dash .hd-gb-dropdown-item {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .45rem .65rem;
	width: 100%;
	font-size: .88rem;
	color: var(--hd-ink);
	background: transparent;
	border: 0;
	border-radius: 6px;
	text-align: left;
}
.home-dash .hd-gb-dropdown-item .bi,
.home-dash .hd-kb-dropdown-item .bi,
.home-dash .hd-tb-toggle-label .bi {
	color: var(--hd-blue);
	font-size: .95rem;
	flex: 0 0 auto;
}

/* ---- Remove modal (populated by JS) ---- */
.hd-modal.hd-gb-remove-modal .modal-content,
.hd-modal.hd-kb-remove-modal .modal-content,
.hd-modal.hd-tb-remove-modal .modal-content {
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius, 16px);
	box-shadow: var(--hd-shadow-lg, 0 16px 48px rgba(0, 0, 0, .18));
	overflow: hidden;
}

/* ---- Right column: KRAs panel + orphan + unused KRA flows ---- */

/* Orphan list — KRAs that exist on the group but aren't placed in
   the tree. Each row is clickable to open the KRA builder, plus a
   hover-revealed (+) button to add the KRA back to the active item. */
.home-dash .hd-gb-orphan-row {
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .15rem .25rem .15rem .5rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Edit-state tints (item_add / item_move / item_pending) — kept low
   contrast so they read as status indicators, not alerts. */
.home-dash .hd-gb-orphan-row.item_add {
	background: rgba(22, 163, 74, .06);
	box-shadow: inset 3px 0 0 #16a34a;
}
.home-dash .hd-gb-orphan-row.item_move {
	background: rgba(37, 99, 235, .06);
	box-shadow: inset 3px 0 0 #2563eb;
}
.home-dash .hd-gb-orphan-row.item_pending {
	background: rgba(217, 119, 6, .06);
	box-shadow: inset 3px 0 0 #d97706;
}
.home-dash .hd-gb-orphan-add:hover,
.home-dash .hd-gb-orphan-add:focus-visible,
.home-dash .hd-gb-unused-add:hover,
.home-dash .hd-gb-unused-add:focus-visible,
.home-dash .hd-kb-acc-row-add:hover,
.home-dash .hd-kb-acc-row-add:focus-visible {
	background: rgba(22, 163, 74, .10);
	border-color: rgba(22, 163, 74, .35);
	color: #166534;
	text-decoration: none;
	outline: none;
}

/* Unused-KRAs collapsible panel. The whole header is the collapse
   trigger — chevron rotates from down (open) to right (collapsed)
   based on aria-expanded. */
.home-dash .hd-gb-unused-head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	cursor: pointer;
	text-decoration: none;
	transition: filter .15s ease;
}
.home-dash .hd-gb-unused-head:hover,
.home-dash .hd-gb-unused-head:focus-visible {
	filter: brightness(1.08);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-gb-unused-title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-gb-unused-chevron {
	flex: 0 0 auto;
	color: var(--hd-white-a80);
	font-size: .9rem;
	transition: transform .2s ease;
}
.home-dash .hd-gb-unused-body,
.home-dash .hd-kb-acc-body {
	padding: .75rem;
	max-height: 360px;
	overflow-y: auto;
}
.home-dash .hd-gb-unused-row {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .35rem .35rem .65rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: border-color .15s ease, background .15s ease;
}
.home-dash .hd-gb-unused-name {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: .25rem 0;
	font-size: .87rem;
	font-weight: 500;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- KRA delete confirmation modal body (.hd-gb-del-*) ---- */
.hd-modal .hd-gb-del-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
	color: #fff;
	border-bottom: 1px solid var(--hd-white-a12);
}
.hd-modal .hd-gb-del-title {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	min-width: 0;
}
.hd-modal .hd-gb-del-title > .bi {
	color: #fde68a;
	font-size: 1.25rem;
	flex: 0 0 auto;
}
.hd-modal .hd-gb-del-title-main {
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hd-modal .hd-gb-del-header .hd-modal-close {
	color: var(--hd-white-a80);
	flex: 0 0 auto;
}
.hd-modal .hd-gb-del-body {
	padding: 1.15rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	color: var(--hd-ink);
}
.hd-modal .hd-gb-del-prompt,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-prompt {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--hd-ink);
}

/* Section blocks. The default tone is neutral (used for Description);
   --warn variant tints red and is used for the cascade-delete tables. */
.hd-modal .hd-gb-del-section {
	margin: 0;
	padding: .85rem 1rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.hd-modal .hd-gb-del-section--warn {
	background: rgba(220, 53, 69, .04);
	border-color: rgba(220, 53, 69, .25);
}
.hd-modal .hd-gb-del-section-title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .65rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.hd-modal .hd-gb-del-section--warn .hd-gb-del-section-title .bi {
	color: #dc2626;
}
.hd-modal .hd-gb-del-section-body {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--hd-ink);
}

/* Cascade-delete table — used for both kra_tasks and employee_assignments. */
.hd-modal .hd-gb-del-cascade {
	width: 100%;
	border-collapse: collapse;
	font-size: .87rem;
}
.hd-modal .hd-gb-del-cascade thead th {
	padding: .35rem .55rem;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	background: var(--hd-white-a50);
	border-bottom: 1px solid var(--hd-line);
	text-align: left;
}
.hd-modal .hd-gb-del-cascade tbody td {
	padding: .4rem .55rem;
	color: var(--hd-ink);
	border-bottom: 1px solid var(--hd-line);
	vertical-align: top;
	word-break: break-word;
}
.hd-modal .hd-gb-del-cascade-id-col,
.hd-modal .hd-gb-del-cascade-id {
	width: 3.5rem;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .82rem;
	color: var(--hd-muted);
	white-space: nowrap;
}

.hd-modal .hd-gb-del-footer {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .85rem 1.25rem 1rem;
	border-top: 1px dashed var(--hd-line);
	background: var(--hd-surface, #fff);
}

/* =============================================================================
   KRA BUILDER (.hd-kb)
   Pairs with kra_builder.html and ~13 child templates building the
   left/middle/right column flow. Three columns: KRA list (with
   "Additional KRA Information" accordions) | edit form | tasks list.

   The accordion primitive .hd-kb-acc-* is reused by ~7 panels:
   _kras_not_using, _orphaned_kras, _abandoned_children, _abandoned_items,
   _groups_synced_to_kra, _kra_change_sync_to, plus the wrapper
   "Additional KRA Information" accordion in _kra_select. Same chrome
   for all so the user reads them as a unified surface.
   ============================================================================= */

/* Hero — same shape as group_builder */

/* 3-column responsive grid: stacks below lg, 3:6:3 at lg+ — handled by the
   shared .hd-tb-grid / .hd-fb-grid / … media rule so kra_builder matches
   the task_builder column widths exactly. */
/* ---- Header icon button (kebab + back-arrow + plus) ---- */
.home-dash .hd-kb-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	color: var(--hd-blue);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	flex: 0 0 auto;
}
/* Dark variant — for explicit use on dark surfaces outside the standard
   .hd-panel-head context (where the dark fill is now the default and
   .hd-kb-iconbtn already gets white-tint styling cascaded automatically).
   This variant remains useful for one-off dark surfaces such as the page
   hero, dark modal headers, or any custom dark-tinted strip. */
.home-dash .hd-kb-iconbtn--dark {
	background: var(--hd-white-a06);
	border-color: var(--hd-white-a12);
	color: var(--hd-white-a92);
}
.home-dash .hd-kb-iconbtn--dark:hover,
.home-dash .hd-kb-iconbtn--dark:focus-visible {
	background: var(--hd-white-a12);
	border-color: var(--hd-white-a25);
	color: #fff;
}

/* Suite-styled dropdown menu */
.home-dash .hd-kb-dropdown {
	min-width: 12rem;
	padding: .35rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: var(--hd-shadow-md, 0 6px 18px rgba(0, 0, 0, .08));
	background: var(--hd-surface, #fff);
}
.home-dash .hd-kb-dropdown-item {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .45rem .65rem;
	width: 100%;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hd-ink);
	background: transparent;
	border: 0;
	border-radius: 6px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.home-dash .hd-kb-dropdown-item:hover,
.home-dash .hd-kb-dropdown-item:focus-visible,
.home-dash .hd-qb-al-row:hover,
.home-dash .hd-qb-al-row:focus-visible {
	background: var(--hd-surface-2);
	color: var(--hd-blue);
	text-decoration: none;
	outline: none;
}

/* ---- Left column: KRA list panel ---- */
.home-dash .hd-kb-list-actions,
.home-dash .hd-tb-list-actions,
.home-dash .hd-kb-acc-head-actions,
.home-dash .hd-pb-step-list-actions,
.home-dash .hd-lst-list-actions,
.home-dash .hd-lst-overview-actions,
.home-dash .hd-lst-plan-actions,
.home-dash .hd-lst-items-actions,
.home-dash .hd-crb-cat-item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex: 0 0 auto;
}
.home-dash .hd-kb-list-body,
.home-dash .hd-tb-list-body,
.home-dash .hd-pb-step-list-body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: .85rem 1rem;
}
.home-dash .hd-kb-list-scroll,
.home-dash .hd-tb-list-scroll {
	max-height: 460px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* ---- Reusable accordion primitive (.hd-kb-acc-*) ---- */
.home-dash .hd-kb-acc {
	width: 100%;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius, 12px);
	overflow: hidden;
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0, 0, 0, .03));
}
.home-dash .hd-kb-acc-head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .65rem 1rem;
	background: var(--hd-blue);
	color: #fff;
	border-bottom: 1px solid var(--hd-white-a12);
	border-top-left-radius: calc(var(--hd-radius, 16px) - 1px);
	border-top-right-radius: calc(var(--hd-radius, 16px) - 1px);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}
.home-dash .hd-kb-acc-head:hover,
.home-dash .hd-kb-acc-head:focus-visible {
	background: #2d568a;
	color: #fff;
	text-decoration: none;
	outline: none;
}
/* When collapsed, the bottom border is redundant against the panel
   border below. Drop it so collapsed accordions don't show a stray
   line under the head. */
.home-dash .hd-kb-acc-head.collapsed,
.home-dash .hd-kb-acc-head[aria-expanded="false"],
.home-dash .hd-kb-acc-head--split:has(.hd-kb-acc-chevron-btn.collapsed),
.home-dash .hd-kb-acc-head--split:has(.hd-kb-acc-chevron-btn[aria-expanded="false"]) {
	border-bottom-color: transparent;
}
.home-dash .hd-kb-acc-title {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	font-size: .9rem;
	font-weight: 700;
	color: #fff;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-kb-acc-title .bi { color: #fff; font-size: 1rem; }
.home-dash .hd-kb-acc-chevron,
.home-dash .hd-collapse-chevron {
	flex: 0 0 auto;
	color: var(--hd-white-a80);
	font-size: .85rem;
	transition: transform .2s ease;
}
/* Nested body — used by the "Additional KRA Information" wrapper
   that contains other .hd-kb-acc panels inside. The wrapper itself
   gets no height cap, and its child accordions also lose their height
   caps so the user can scroll continuously through all nested
   panels in one swipe instead of fighting per-panel scrollbars. */
.home-dash .hd-kb-acc-body--nested {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	max-height: none;
	overflow: visible;
	padding: .85rem;
	background: var(--hd-surface, #fff);
}
.home-dash .hd-kb-acc-body--nested .hd-kb-acc-body,
.home-dash .hd-kb-acc-body--nested .hd-gb-unused-body,
.home-dash .hd-pb-extras-body .hd-kb-acc-body {
	max-height: none;
	overflow: visible;
}

/* Accordion item row — shared by all panels */
.home-dash .hd-kb-acc-row {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .25rem .15rem .65rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	margin-bottom: .35rem;
	transition: border-color .15s ease, background .15s ease;
}
.home-dash .hd-kb-acc-row--info:hover {
	border-color: var(--hd-line);
	background: var(--hd-surface, #fff);
}
.home-dash .hd-kb-acc-row-name {
	flex: 1 1 auto;
	min-width: 0;
	padding: .45rem .25rem;
	font-size: .87rem;
	font-weight: 500;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-kb-acc-row-name--em {
	font-style: italic;
	color: var(--hd-muted);
	cursor: help;
}
/* Add (+) button — hover-revealed, green tint on hover */

/* Change-sync-to row variant — link wraps title + group meta on two
   lines, sync button on the right. */
.home-dash .hd-kb-acc-sync-link {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: .45rem .25rem;
	color: var(--hd-ink);
	text-decoration: none;
}
.home-dash .hd-kb-acc-sync-title {
	font-size: .87rem;
	font-weight: 600;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-kb-acc-sync-meta {
	font-size: .72rem;
	color: var(--hd-muted);
	letter-spacing: .02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Middle column: KRA edit form (.hd-kb-update-*) ---- */
.home-dash .hd-kb-update-form,
.home-dash .hd-tb-update-form {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	margin: 0;
}
.home-dash .hd-kb-update-grid,
.hd-modal.hd-tb-newtask-modal .hd-tb-newtask-grid,
.home-dash .hd-qb-update-grid--3,
.home-dash .hd-qb-cu-grid,
.home-dash .hd-pb-update-grid--titleseq {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.15rem;
}
@media (min-width: 768px) {
	.home-dash .hd-kb-update-grid,
	.home-dash .hd-tb-update-grid--2,
	.hd-modal.hd-tb-newtask-modal .hd-tb-newtask-grid,
	.home-dash .hd-iss-trial-grid,
	.home-dash .hd-stb-q-update-grid,
	.home-dash .hd-stb-q-survey-update-grid,
	.hd-modal .hd-su-modal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.home-dash .hd-kb-field-info,
.home-dash .hd-tb-field-info {
	margin-left: .35rem;
	color: var(--hd-muted);
	font-size: .85rem;
	cursor: help;
}

/* Toggle pill — single row with label on left, native checkbox on right */
.home-dash .hd-kb-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .85rem;
	padding: .55rem .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.home-dash .hd-kb-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .87rem;
	font-weight: 600;
	color: var(--hd-ink);
}
/* kra_builder Active / General KRA toggle uses the suite/category_list
   .hd-cat-default-toggle visual chrome — the visible <label> wraps two
   icons (bi-square + bi-check-square-fill) and drives a visually-hidden
   form checkbox via for="". The icon swap / blue tint / hidden-input
   styling all merge into the shared color/display/visually-hidden
   selector lists above so no rule clones a body. */
/* Sub-sections under the form (observables + notes) — visually
   separated from the form by a top divider. */
.home-dash .hd-kb-update-section {
	padding-top: 1rem;
	border-top: 1px dashed var(--hd-line);
}

/* ---- Create New KRA modal ---- */
.hd-modal.hd-kb-newkra-modal .hd-modal-header {
	background: linear-gradient(135deg, var(--hd-navy) 0%, #1a2030 55%, var(--hd-blue) 100%);
	color: #fff;
	border-bottom: 1px solid var(--hd-line);
}
.hd-modal.hd-kb-newkra-modal .hd-modal-title .bi,
.hd-modal.hd-kb-newnote-modal .hd-modal-title .bi,
.hd-modal.hd-kb-newobs-modal .hd-modal-title .bi,
.hd-modal.hd-kb-editobs-modal .hd-modal-title .bi,
.hd-modal.hd-tb-tocustom-modal .hd-modal-title .bi,
.hd-modal.hd-tb-newtask-modal .hd-modal-title .bi,
.hd-modal.hd-tb-movetask-modal .hd-modal-title .bi { color: var(--hd-lime, #d6f366); }
.hd-modal.hd-kb-newkra-modal .hd-kb-newkra-body,
.hd-modal.hd-kb-newobs-modal .hd-kb-newobs-body,
.hd-modal.hd-kb-editobs-modal .hd-kb-editobs-body,
.hd-modal.hd-tb-newtask-modal .hd-tb-newtask-body {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	padding: 1.25rem 1.5rem;
}
.hd-modal.hd-kb-newkra-modal .hd-kb-newkra-footer,
.hd-modal.hd-kb-newnote-modal .hd-kb-newnote-footer,
.hd-modal.hd-kb-newobs-modal .hd-kb-newobs-footer,
.hd-modal.hd-kb-editobs-modal .hd-kb-editobs-footer,
.hd-modal.hd-tb-tocustom-modal .hd-tb-tocustom-footer,
.hd-modal.hd-tb-newtask-modal .hd-tb-newtask-footer,
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-footer {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .85rem 1.5rem 1rem;
	border-top: 1px dashed var(--hd-line);
	background: var(--hd-surface, #fff);
}

/* ---- Remove modal ---- */

/* ---- KRA list row primitive (.hd-kb-list-row) ---- */
/* Used by both _kra_list_include (active) and _kra_remove_list_include
   (marked-for-removal). Selection state via .is-selected. Edit-state
   tints (item_add / item_move / item_pending) preserved on the same
   element where the original applied them. */
/* .is-selected — canonical active-row accent: 3px solid stripe down
   the left edge via inset box-shadow + soft drop shadow for lift.
   Matches .hd-lst-list-row.is-active so both row types share the
   exact same visual treatment. Children with solid backgrounds
   (.hd-pb-step-survey, .hd-pb-step-detail) get a margin-left
   carve-out below so the inset shadow isn't hidden by their fill. */
.home-dash .hd-kb-list-row.is-selected,
.home-dash .hd-lst-list-row.is-active,
.home-dash .hd-lb-list-item.is-active,
.home-dash .hd-rb-course-item.is-active,
.home-dash .hd-crb-objective-item.is-active,
.home-dash .hd-ob-question-item:has(.hd-ob-q-row.is-active) {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue);
	border-radius: 3px;
	box-shadow: inset 3px 0 0 var(--hd-blue), 0 2px 8px var(--hd-blue-a18);
}
/* Edit-state tints — match _orphan_list_include patterns. Communicate
   status via the soft background tint alone; the row still renders
   its full 1px border on every edge. */
.home-dash .hd-kb-list-row.item_add,
.home-dash .hd-iss-trial-card.item_add,
.home-dash .hd-lb-list-item.is-add,
.home-dash .hd-ob-q-row.item_add,
.home-dash .hd-rb-course-item.item_add,
.home-dash .hd-crb-objective-item.item_add {
	background: rgba(22, 163, 74, .12);
}
.home-dash .hd-kb-list-row.item_move,
.home-dash .hd-iss-trial-card.item_move,
.home-dash .hd-lb-list-item.is-move,
.home-dash .hd-ob-q-row.item_move,
.home-dash .hd-rb-course-item.item_move,
.home-dash .hd-crb-objective-item.item_move {
	background: rgba(37, 99, 235, .12);
}
.home-dash .hd-kb-list-row.item_pending,
.home-dash .hd-iss-trial-card.item_pending,
.home-dash .hd-lb-list-item.is-pending,
.home-dash .hd-ob-q-row.item_pending,
.home-dash .hd-rb-course-item.item_pending,
.home-dash .hd-crb-objective-item.item_pending {
	background: rgba(217, 119, 6, .12);
}
.home-dash .hd-ob-q-row.item_delete_remove,
.home-dash .hd-rb-course-item.item_delete_remove,
.home-dash .hd-crb-objective-item.item_delete_remove {
	background: rgba(220, 53, 69, .1);
}
/* Marked-for-removal — strikethrough text + red inset stripe on the
   left edge. Same inset-shadow pattern as .is-selected so the chrome
   stays consistent across row states. */
.home-dash .hd-kb-list-row--remove {
	background: rgba(220, 53, 69, .04);
	box-shadow: inset 3px 0 0 #dc2626;
	opacity: .85;
}
.home-dash .hd-kb-list-row--remove.is-selected {
	background: rgba(220, 53, 69, .1);
	border-color: #dc2626;
	box-shadow: inset 3px 0 0 #dc2626, 0 2px 6px rgba(220, 53, 69, .14);
}
/* Every remove row gets .35rem of top margin. The parent template
   for KRAs (_kra_list.html, in_manager=='kra') renders the remove
   loop as a sibling of the .hd-kb-list flex container — outside the
   gap-providing wrapper — so consecutive remove rows had no spacing
   and the boundary between the active wrapper and the first remove
   row also had none. This margin-top on every remove row handles
   both cases. The minor side-effect: when remove rows do happen to
   sit inside a .hd-kb-list (e.g. _kra_list.html group branch), they
   get .35rem gap from the parent + .35rem margin = .7rem total,
   slightly more breathing room than active rows but not broken. */
/* Neutralize the legacy .item_delete_remove background paint when it
   sits inside a suite list row. The legacy rule at line ~8180 paints
   the inner div full red (#f44336) which would override the suite's
   soft-red tint on .hd-kb-list-row--remove. Specificity (0,3,0) beats
   both the bare legacy rule (0,1,0) and the dark-theme variant
   (0,2,0). The .item_delete_remove class stays on the element for any
   external JS hooks, but no longer governs the visual. */
.home-dash .hd-kb-list-row .item_delete_remove,
.home-dash .hd-kb-list-row--remove .item_delete_remove {
	background-color: transparent;
	font-style: normal;
}


/* Inner wrapper — needs to be the flex container since the outer row
   has the grip alongside, and the original DOM has an inner #{{k.id}}
   that's targeted by AJAX replacements. */
.home-dash .hd-kb-list-row-inner {
	display: flex;
	align-items: center;
	gap: .25rem;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-kb-list-link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem .25rem .55rem .65rem;
	color: var(--hd-ink);
	text-decoration: none;
	font-size: .87rem;
	font-weight: 500;
	line-height: 1.3;
}

/* Sequence pill — three-digit ordering badge in a monospace-flavored
   pill. Placeholder variant (just "--") is muted for removal rows. */
.home-dash .hd-kb-list-seq {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: .1rem .5rem;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .72rem;
	font-weight: 700;
	/* Translucent-white pill so the blue ordering text reads in BOTH
	   modes — the old --hd-muted on --hd-surface-2 went near-invisible in
	   dark mode. Styled at the primitive level so every list that reuses
	   .hd-kb-list-seq (step / procedure / step-question / kra / task /
	   foundation) gets a consistent ordering badge. */
	color: var(--hd-blue);
	background: var(--hd-white-a65);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
	letter-spacing: .04em;
}
.home-dash .hd-kb-list-row.is-selected .hd-kb-list-seq,
.home-dash .hd-kb-list-row.is-selected .hd-pb-step-meta {
	color: var(--hd-blue);
	border-color: var(--hd-blue-a25);
}
.home-dash .hd-kb-list-seq--placeholder {
	color: rgba(220, 53, 69, .6);
	background: rgba(220, 53, 69, .06);
	border-color: rgba(220, 53, 69, .2);
}

.home-dash .hd-kb-list-name {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-kb-list-editor {
	display: inline-flex;
	color: #d97706;
	font-size: .85rem;
	cursor: help;
}

/* Action stack on the right — buttons hover-revealed individually */
.home-dash .hd-kb-list-actions {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	flex: 0 0 auto;
	padding-right: .35rem;
}
.home-dash .hd-kb-list-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--hd-muted);
	text-decoration: none;
	cursor: pointer;
	opacity: 0;
	transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
/* Step Builder step list — the step rows reuse the .hd-kb-list-row
   primitive. Per request, scoped to .hd-pb-step-list: the step text
   stays at full --hd-ink contrast even on a selected row (the global
   .is-selected rule drops it to --hd-blue, which goes low-contrast on
   the dark --hd-blue-soft selected background in dark mode), and the
   delete action is shown at rest instead of only on hover. --hd-ink is
   used rather than a literal white so it renders correctly in BOTH
   modes — the step panel themes (light surface in light mode). */
.home-dash .hd-pb-step-list .hd-kb-list-action--remove {
	opacity: 1;
	color: var(--hd-ink);
}
/* Step type badge (.hd-pb-step-meta) restyled to match the .hd-kb-list-seq
   ordering pill — blue text, translucent-white fill, blue-tint border,
   full pill. Scoped to .hd-pb-step-list because .hd-pb-step-meta is also
   used for the muted (seq_type)/(dimension) text on remove rows, which
   keeps its base muted styling. (The ordering badge itself is now styled
   on the .hd-kb-list-seq primitive directly, so no per-panel scoping is
   needed for it any more.) */
.home-dash .hd-pb-step-list .hd-pb-step-meta {
	color: var(--hd-blue);
	background: var(--hd-white-a65);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
}
/* Per-action hover tints — convert (purple), apply (green),
   remove (red), restore (blue) */
.home-dash .hd-kb-list-action--convert:hover,
.home-dash .hd-kb-list-action--convert:focus-visible {
	background: rgba(124, 58, 237, .1);
	border-color: rgba(124, 58, 237, .35);
	color: #6d28d9;
	outline: none;
}
.home-dash .hd-kb-list-action--apply:hover,
.home-dash .hd-kb-list-action--apply:focus-visible {
	background: rgba(22, 163, 74, .1);
	border-color: rgba(22, 163, 74, .35);
	color: #166534;
	outline: none;
}
.home-dash .hd-kb-list-action--remove:hover,
.home-dash .hd-kb-list-action--remove:focus-visible {
	background: rgba(220, 53, 69, .1);
	border-color: rgba(220, 53, 69, .35);
	color: #b91c1c;
	outline: none;
}
.home-dash .hd-kb-list-action--restore:hover,
.home-dash .hd-kb-list-action--restore:focus-visible {
	background: rgba(37, 99, 235, .1);
	border-color: rgba(37, 99, 235, .35);
	color: #1d4ed8;
	outline: none;
}

/* Update Admin dropdown on remove rows */
.home-dash .hd-kb-list-admin {
	flex: 0 0 auto;
	margin: 0 .25rem;
}
.home-dash .hd-kb-list-admin-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .55rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--hd-ink);
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.home-dash .hd-kb-list-admin-btn::after {
	margin-left: .15rem;
	border-top-color: currentColor;
}

/* ---- KRA Overview (read-only middle pane) ---- */
.home-dash .hd-kb-overview-body,
.home-dash .hd-tb-update-body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.15rem 1.25rem 1.25rem;
}
.home-dash .hd-kb-overview-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hd-ink);
	line-height: 1.3;
	word-break: break-word;
}
.home-dash .hd-kb-overview-meta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: .25rem .55rem;
	font-size: .75rem;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
	width: fit-content;
}
.home-dash .hd-kb-overview-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-kb-overview-prose {
	font-size: .92rem;
	line-height: 1.6;
	color: var(--hd-ink);
	word-break: break-word;
}

/* ---- Notes panel (.hd-kb-notes-*) ---- */
.home-dash .hd-kb-notes-body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: .85rem 1rem 1rem;
	max-height: 420px;
	overflow-y: auto;
}

/* Note card — author + timestamp on top row, body below, hover-revealed
   delete button on the right edge of the meta row */
.home-dash .hd-kb-note {
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	padding: .75rem .85rem;
	transition: border-color .15s ease;
}
.home-dash .hd-kb-note:hover { border-color: var(--hd-blue-soft, #c8d8e8); }
.home-dash .hd-kb-note-meta {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-bottom: .45rem;
	padding-bottom: .35rem;
	border-bottom: 1px dashed var(--hd-line);
}
.home-dash .hd-kb-note-time {
	flex: 1 1 auto;
	font-size: .72rem;
	color: var(--hd-muted);
	letter-spacing: .02em;
}
.home-dash .hd-kb-note-delete {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--hd-muted);
	text-decoration: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.home-dash .hd-kb-note-delete:hover,
.home-dash .hd-kb-note-delete:focus-visible,
.home-dash .hd-kb-obs-pill-action--remove:hover,
.home-dash .hd-kb-obs-pill-action--remove:focus-visible,
.home-dash .hd-tb-expert-pill-remove:hover,
.home-dash .hd-tb-expert-pill-remove:focus-visible {
	background: rgba(220, 53, 69, .1);
	border-color: rgba(220, 53, 69, .35);
	color: #b91c1c;
	text-decoration: none;
	outline: none;
}
.home-dash .hd-kb-note-body {
	font-size: .9rem;
	line-height: 1.55;
	color: var(--hd-ink);
	white-space: pre-wrap;
	word-break: break-word;
}

/* New Note modal */
.hd-modal.hd-kb-newnote-modal .hd-modal-header,
.hd-modal.hd-kb-newobs-modal .hd-modal-header,
.hd-modal.hd-kb-editobs-modal .hd-modal-header,
.hd-modal.hd-tb-tocustom-modal .hd-modal-header,
.hd-modal.hd-tb-newtask-modal .hd-modal-header,
.hd-modal.hd-tb-movetask-modal .hd-modal-header {
	background: linear-gradient(135deg, var(--hd-navy) 0%, #1a2030 55%, var(--hd-blue) 100%);
	color: #fff;
}
.hd-modal.hd-kb-newnote-modal .hd-kb-newnote-body { padding: 1.25rem 1.5rem; }
.hd-modal.hd-kb-newnote-modal .hd-kb-newnote-textarea,
.hd-modal.hd-kb-newobs-modal .hd-kb-newobs-textarea,
.hd-modal.hd-kb-editobs-modal .hd-kb-editobs-textarea {
	resize: none;
	min-height: 7rem;
}

/* ---- Observables panel (.hd-kb-obs-*) ---- */
/* Lift suite-wide overflow:hidden so the inline-search dropdown can
   escape if the user enables one. The dropdown isn't currently shown
   for observables but we keep the pattern consistent. */
.home-dash .hd-kb-obs-search {
	position: relative;
	width: 100%;
	margin: 0 0 .65rem;
}
.home-dash .hd-kb-obs-body {
	display: flex;
	flex-direction: column;
	padding: .85rem 1rem 1rem;
	overflow: visible;
}
.home-dash .hd-kb-obs-result-container {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin-top: .25rem;
}
.home-dash .hd-kb-obs-list {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	padding: 0;
	max-height: 360px;
	overflow-y: auto;
}
.home-dash .hd-kb-obs-empty {
	padding: 1.5rem 1rem;
	flex: 1 1 100%;
}

/* Observable pill — link + edit + remove buttons in a single rounded
   pill cluster. Hover lifts the pill. */
.home-dash .hd-kb-obs-pill {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	padding: .15rem .15rem .15rem .15rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.home-dash .hd-kb-obs-pill:hover,
.home-dash .hd-tb-expert-pill:hover {
	border-color: var(--hd-blue-soft, #c8d8e8);
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0, 0, 0, .04));
}
.home-dash .hd-kb-obs-pill-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .65rem;
	font-size: .82rem;
	font-weight: 500;
	color: var(--hd-ink);
	text-decoration: none;
	border-radius: 999px;
	max-width: 18rem;
}
.home-dash .hd-kb-obs-pill-link:hover,
.home-dash .hd-kb-obs-pill-link:focus-visible,
.home-dash .hd-tb-expert-pill-link:hover,
.home-dash .hd-tb-expert-pill-link:focus-visible,
.home-dash .hd-pb-step-survey-edit:hover,
.home-dash .hd-pb-step-survey-edit:focus-visible {
	color: var(--hd-blue);
	background: var(--hd-blue-soft, #eaf1f8);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-kb-obs-pill-action,
.home-dash .hd-tb-expert-pill-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--hd-muted);
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* New Observable modal */

/* ---- Edit Observable modal (same chrome as New Observable) ---- */

/* Related-from-other-group ® mark — appears next to the KRA title
   in _kras_not_using_list_include rows when k.is_related is truthy. */
.home-dash .hd-kb-acc-related-mark {
	display: inline-flex;
	align-items: center;
	margin-left: .35rem;
	color: var(--hd-blue);
	font-size: .9rem;
	cursor: help;
}

/* =============================================================================
   TASK BUILDER (.hd-tb)
   Pairs with the task builder/manager flow (~19 templates). Reuses
   .hd-kb-acc-*, .hd-kb-list-row, .hd-kb-iconbtn, .hd-kb-dropdown,
   .hd-kb-left from the KRA Builder namespace; adds task-specific
   primitives for the edit form, experts panel, modals, and a few
   row variants (synced indicator, info icon, locked badge, source meta).
   ============================================================================= */

/* ---- Task search wrap (reuses .hd-inline-search-*) ---- */
.home-dash .hd-tb-search { margin: 0 0 .85rem; }

/* ---- Tasks panel head + list ---- */

/* ---- Task list row (.hd-kb-list-action--synced) — static badge
   indicating a task is synced via its parent KRA; doesn't toggle ---- */
.home-dash .hd-kb-list-action--synced {
	color: var(--hd-muted);
	cursor: help;
	opacity: 1; /* always visible (it's a status indicator, not an action) */
}
.home-dash .hd-kb-list-action--synced .bi { font-size: 1.1rem; }

/* ---- Convert-to-custom modal ---- */
.hd-modal.hd-tb-tocustom-modal .hd-tb-tocustom-body {
	padding: 1.25rem 1.5rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--hd-ink);
}

/* ---- Accordion row variants for tasks ---- */
/* Two-line name stack — used by orphaned tasks where each row shows
   the task title + its origin group. */
.home-dash .hd-kb-acc-row-title {
	font-size: .87rem;
	font-weight: 500;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-kb-acc-row-info,
.home-dash .hd-pb-step-editor {
	display: inline-flex;
	color: #d97706;
	font-size: .85rem;
	cursor: help;
	margin-left: .35rem;
}
/* Locked / secured badge (replaces the security.png img on orphaned
   tasks when knowledge_kra is sourced) */
.home-dash .hd-kb-acc-row-locked {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: var(--hd-muted);
	cursor: help;
}
/* Item type badge for unapplied items (small inline pill in the
   row title) */
.home-dash .hd-kb-acc-row-type {
	display: inline-flex;
	align-items: center;
	margin-left: .5rem;
	padding: .05rem .45rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
}
/* Sync row variants — current/target highlights */
.home-dash .hd-kb-acc-row.is-current,
#list-grouping-container .hd-kb-list-row.grouping-item:hover {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue);
}
.home-dash .hd-kb-acc-row.is-target .hd-kb-acc-row-add {
	background: rgba(124, 58, 237, .1);
	border-color: rgba(124, 58, 237, .35);
	color: #6d28d9;
	opacity: 1;
}
.home-dash .hd-kb-acc-sync-seq {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	margin-right: .35rem;
	padding: 0 .35rem;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .68rem;
	font-weight: 700;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 4px;
}

/* ---- Curriculum-select head iconbtn (lives inside .hd-kb-acc-head)
   Need a slot inside the header for the edit/create button next to
   the chevron without tripping the parent <a>'s click handler. ---- */
.home-dash .hd-kb-acc-head-iconbtn {
	width: 28px;
	height: 28px;
}
/* ---- Split-head variant of .hd-kb-acc-head ----
   Used on the curriculum-select panel so the edit/create action button
   can sit inside the header without nesting interactive elements
   inside an <a> (invalid HTML — was breaking layout). The header wrapper
   is inert; the title block (left) is non-interactive; the chevron
   <button> on the right (.hd-kb-acc-chevron-btn) owns the collapse
   toggle and ARIA attributes. The action buttons (edit/create) sit
   between title and chevron and isolate their own hit areas. */
.home-dash .hd-kb-acc-head--split .hd-kb-acc-title {
	padding-left: 0;
}
.home-dash .hd-kb-acc-chevron-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-white-a80);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
/* Chevron rotation for the split-head variant — the chevron <i> lives
   inside its own button now. The existing descendant rule on
   .hd-kb-acc-head doesn't fire because the wrapper no longer carries
   the collapsed/aria-expanded state. Drive it off the chevron button. */
/* The base .hd-kb-acc-head.collapsed rule sets border-bottom-color to
   transparent, but in the split-head pattern the .collapsed class lives
   on the chevron button, not the head. Mirror the rule via :has() so
   the head's bottom border vanishes when its chevron button is in the
   collapsed state. Without this, an --experts (overflow: visible) card
   shows a hard horizontal line under the head when collapsed. */

/* ---- Task edit form ---- */
.home-dash .hd-tb-update-actions {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex: 0 0 auto;
	flex-wrap: wrap;
}
@media (min-width: 768px) {
	.home-dash .hd-tb-update-grid--3,
	.home-dash .hd-qb-update-grid--3,
	.home-dash .hd-qb-cu-grid,
	.home-dash .hd-stb-q-update-grid:has(> *:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.home-dash .hd-tb-update-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991px) {
	.home-dash .hd-tb-update-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Toggle pill (parallels .hd-kb-toggle but with task-specific label
   sizing for the 8 toggles) */
.home-dash .hd-tb-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .65rem;
	padding: .5rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	font-size: .82rem;
}
/* SOC field — special two-input layout */
.home-dash .hd-tb-soc-field { max-width: 16rem; }
.home-dash .hd-tb-soc-input {
	display: flex;
	align-items: center;
	gap: .55rem;
}
.home-dash .hd-tb-soc-prefix,
.hd-modal.hd-tb-newtask-modal .hd-tb-newtask-soc-prefix {
	flex: 0 0 auto;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .85rem;
	font-weight: 700;
	color: var(--hd-muted);
	padding: .55rem .65rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}

/* ---- Update sub-sections (Experts, Curriculum) ---- */
.home-dash .hd-tb-update-section {
	padding-top: 1.25rem;
	border-top: 1px dashed var(--hd-line);
}

/* Experts panel inside the task update form */
/* ---- Experts accordion ---------------------------------------------
   The Experts block sits in the .hd-kb-acc accordion primitive on the
   task edit panel. The --experts modifier overrides three things from
   the primitive:
	 1. Wrapper overflow: hidden → visible, so the inline-search AJAX
		results dropdown can escape the accordion.
	 2. Body max-height + overflow-y: auto → none + visible, so the
		expert pill list grows naturally without an inner scrollbar
		(pills are short and wrap on their own).
	 3. Body display becomes a column so search → results → list
		stack with consistent gap.
   --------------------------------------------------------------------- */
/* Wrapper overflow is visible (so the AJAX search-results dropdown can
   escape), which means the head's flat corners are no longer clipped
   to the card's rounded corners. Round the head's top corners always,
   and round the bottom corners too when the panel is collapsed (the
   head is then the only visible element and needs to match the
   wrapper's full rounded shape, like Task Training does via overflow:
   hidden). When expanded, the head's bottom stays flat so it meets
   the body cleanly. */
.home-dash .hd-kb-acc--experts > .hd-kb-acc-head,
.home-dash .hd-kb-acc--coaches > .hd-kb-acc-head {
	border-top-left-radius: var(--hd-radius, 16px);
	border-top-right-radius: var(--hd-radius, 16px);
}
.home-dash .hd-kb-acc--experts > .hd-kb-acc-head:has(.hd-kb-acc-chevron-btn.collapsed),
.home-dash .hd-kb-acc--experts > .hd-kb-acc-head:has(.hd-kb-acc-chevron-btn[aria-expanded="false"]),
.home-dash .hd-kb-acc--coaches > .hd-kb-acc-head:has(.hd-kb-acc-chevron-btn.collapsed),
.home-dash .hd-kb-acc--coaches > .hd-kb-acc-head:has(.hd-kb-acc-chevron-btn[aria-expanded="false"]) {
	border-bottom-left-radius: var(--hd-radius, 16px);
	border-bottom-right-radius: var(--hd-radius, 16px);
}
.home-dash .hd-kb-acc--experts > .collapse,
.home-dash .hd-kb-acc--experts > .collapsing,
.home-dash .hd-kb-acc--coaches > .collapse,
.home-dash .hd-kb-acc--coaches > .collapsing {
	border-bottom-left-radius: var(--hd-radius, 16px);
	border-bottom-right-radius: var(--hd-radius, 16px);
	overflow: hidden;
}
.home-dash .hd-kb-acc--experts .hd-tb-experts-body,
.home-dash .hd-kb-acc--coaches .hd-fb-coaches-body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	max-height: none;
	overflow: visible;
}
.home-dash .hd-tb-experts-search,
.home-dash .hd-fb-coaches-search {
	position: relative;
	margin: 0;
	min-width: 0;
}
/* Legacy Bootstrap classes (.form-control, .form-control-sm, .search-bar,
   .w-100) are kept on the input because the inline-search JS hooks via
   one of them. Override their visual chrome to match the suite — full
   border, suite tokens, rounded pill, focus ring — regardless of which
   legacy rule wins specificity by default. */
.home-dash .hd-tb-experts-search .hd-inline-search-input,
.home-dash .hd-fb-search .hd-inline-search-input,
.home-dash .hd-pb-search .hd-inline-search-input,
.home-dash .hd-fb-coaches-search .hd-inline-search-input,
.home-dash .hd-qb-search .hd-inline-search-input {
	width: 100%;
	padding: .42rem .75rem .42rem 2.05rem !important;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 999px !important;
	font-size: .85rem;
	font-family: inherit;
	color: var(--hd-ink);
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.hd-topnav-search-input:focus,
.home-dash .hd-tb-experts-search .hd-inline-search-input:focus,
.home-dash .hd-fb-search .hd-inline-search-input:focus,
.home-dash .hd-pb-search .hd-inline-search-input:focus,
.home-dash .hd-fb-coaches-search .hd-inline-search-input:focus,
.home-dash .hd-qb-search .hd-inline-search-input:focus {
	outline: none;
	background: var(--hd-surface);
	border-color: var(--hd-blue);
	box-shadow: 0 0 0 3px var(--hd-blue-a12);
}
.home-dash .hd-tb-experts-search .hd-inline-search-icon,
.home-dash .hd-fb-search .hd-inline-search-icon,
.home-dash .hd-pb-search .hd-inline-search-icon,
.home-dash .hd-fb-coaches-search .hd-inline-search-icon,
.home-dash .hd-qb-search .hd-inline-search-icon {
	left: .8rem;
	font-size: .8rem;
}
/* Result container — JS injects AJAX search-results markup into this
   <span>. Float as an absolute-positioned dropdown anchored to the
   search wrap (which is position: relative), matching the suite's
   .hd-inline-search-results pattern. This way it sits directly below
   the input regardless of where else it falls in the body's flow,
   and overlays the empty state / expert pill list rather than pushing
   them down. */
.home-dash .hd-tb-experts-result-container,
.home-dash .hd-fb-search-results,
.home-dash .hd-pb-search-results,
.home-dash .hd-fb-coaches-result-container,
.home-dash .hd-qb-search-results {
	display: block;
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	right: 0;
	margin: 0;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	box-shadow: var(--hd-shadow-md);
	max-height: 320px;
	overflow-y: auto;
	z-index: 50;
}
.home-dash .hd-tb-experts-list,
.home-dash .hd-fb-coaches-list {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

/* Expert pill — same shape as .hd-kb-obs-pill */
.home-dash .hd-tb-expert-pill {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	padding: .15rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.home-dash .hd-tb-expert-pill-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem;
	font-size: .82rem;
	font-weight: 500;
	color: var(--hd-ink);
	text-decoration: none;
	border-radius: 999px;
}
.home-dash .hd-tb-expert-pill-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 14rem;
}

/* ---- Create New Task modal ---- */
@media (min-width: 768px) {
}

/* ---- Move Task modal ---- */
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-body {
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	max-height: 360px;
	overflow-y: auto;
}
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem .85rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row > .bi {
	flex: 0 0 auto;
	color: var(--hd-blue);
	font-size: 1.1rem;
}
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row-title {
	font-size: .92rem;
	font-weight: 600;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hd-modal.hd-tb-movetask-modal .hd-tb-movetask-row-chevron,
.home-dash .hd-lst-assembled-item-link .bi,
.home-dash .hd-lst-grouped-item .bi {
	flex: 0 0 auto;
	color: var(--hd-muted);
	font-size: 1rem;
}

/* ---- Remove modal ---- */

/* ---- Small button modifier (used in task update head) ---- */
.home-dash .hd-btn.hd-btn-sm {
	padding: .35rem .65rem;
	font-size: .8rem;
}

/* ---- Task Builder page shell (.hd-tb root) ---- */

/* Hero — title on the left, two breadcrumb pills (Group + KRA) on
   the right. Pills wrap to a second row on narrow viewports. */
.home-dash .hd-tb-hero-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}
.home-dash .hd-tb-hero-pill,
.home-dash .hd-fb-hero-pill,
.home-dash .hd-qb-hero-pill,
.home-dash .hd-pb-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .75rem;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	border-radius: 999px;
	color: var(--hd-white-a92);
	font-size: .82rem;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
	max-width: 100%;
	min-width: 0;
}
.home-dash .hd-tb-hero-pill .bi,
.home-dash .hd-fb-hero-pill .bi,
.home-dash .hd-qb-hero-pill .bi,
.home-dash .hd-pb-hero-pill .bi { color: var(--hd-lime, #d6f366); font-size: .9rem; flex: 0 0 auto; }
.home-dash .hd-tb-hero-pill-label {
	font-size: .65rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-white-a50);
	font-weight: 700;
	flex: 0 0 auto;
}
.home-dash .hd-tb-hero-pill-value {
	font-weight: 600;
	color: var(--hd-white-a92);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Three-column responsive grid (3:6:3 at lg+, single column below) */
@media (min-width: 992px) {
}

/* ===========================================================================
   FOUNDATION BUILDER — page-specific chrome (.hd-fb-*)
   ---------------------------------------------------------------------------
   Foundation select / list panels lean almost entirely on the suite-wide
   .hd-kb-* primitives (list panel, list rows, accordion, sync rows, modal).
   These rules cover the small handful of foundation-specific affordances:
   the secured-lock icon for orphan rows the user can't add, the create-
   foundation modal's two-up code/title grid, and the foundation list
   inline-search result dropdown (float-positioned beneath the search,
   matching the experts-panel pattern).
   =========================================================================== */

/* Secured icon — replaces the legacy security.png raster on orphan rows
   when knowledge_task.source is set (the parent task is synced from
   somewhere, so the orphan can't be added here). Sits in the same
   right-side slot as the Add (+) button. */
.home-dash .hd-fb-secured {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--hd-muted);
	cursor: help;
}

/* Create-Foundation modal — two-up grid for Code + Title at the top
   of the body, then full-width Description below. */
.home-dash .hd-fb-create-form,
.home-dash .hd-qb-create-form,
.home-dash .hd-mr-edit-form,
.home-dash .hd-qb-overview-form,
.home-dash .hd-qb-cu-form,
.home-dash .hd-qb-del-form,
.home-dash .hd-pb-overview-form,
.home-dash .hd-iss-trial-col:not(.hd-iss-trial-col--unused),
.home-dash .hd-stb-q-overview-form,
.home-dash .hd-su-modal-form { display: contents; }
.home-dash .hd-fb-create-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}
@media (max-width: 575.98px) {
}

/* Foundation search results — float-positioned dropdown anchored to the
   .hd-fb-search wrap. The legacy markup keeps id="foundation-result-
   container" so the inline-search JS can inject results; the suite chrome
   is layered on via .hd-fb-search-results. Same approach as the experts
   panel result container. */
/* Mirror the experts-panel scoped sizing override on the search input
   so it visually matches a compact pill (legacy .form-control.form-
   control-sm.search-bar combined classes would otherwise produce the
   default Bootstrap chrome). */

/* ===========================================================================
   PROCEDURE BUILDER — page-specific chrome (.hd-pb-*)
   ---------------------------------------------------------------------------
   Procedure select / list panels lean on the suite-wide .hd-kb-* primitives
   for the list rows, accordion sub-panels, modal, and inline-search. These
   rules cover only the procedure-page-specific affordances:
   - The task-switcher dropdown that replaces the panel title in the
     procedure manager (lets user navigate to other tasks' procedures)
   - The float-positioned search-results dropdown (mirrors .hd-fb-search)
   - The current-row "static link" variant on .hd-kb-list-row (when the
     row points at the page you're already on, it's non-clickable)
   - The active-state highlight on .hd-kb-dropdown-item (used by the
     task picker to mark the current task)
   =========================================================================== */

/* Task picker — sits in the panel head where .hd-panel-title would
   otherwise be, in the procedure manager only. Visually a button with
   dropdown-toggle chevron, sized to feel like a title rather than a
   form control. */
.home-dash .hd-pb-task-picker-btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	max-width: 100%;
	margin: 0;
	padding: .2rem .55rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-weight: 700;
	font-size: .88rem;
	letter-spacing: -.005em;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.home-dash .hd-pb-task-picker-btn::after {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--hd-muted);
	transition: color .15s ease;
}

/* Active-task highlight in the picker menu (also reusable by any
   dropdown that needs an "is-current" affordance). */
.home-dash .hd-kb-dropdown-item.is-active {
	background: var(--hd-blue-soft, #eaf1f8);
	color: var(--hd-blue);
	font-weight: 600;
}

/* Static (non-clickable) list link — used when a list-row's link points
   at the page you're already on. Suppresses the .hd-kb-list-link hover
   color change since clicking does nothing. */

/* Procedure search results dropdown — same float pattern as the
   foundation/experts panels. */
/* Mirror the foundation/experts compact search-input override so the
   pill matches a hd-btn-sm rather than the default Bootstrap
   .form-control sizing. */

/* ===========================================================================
   FOUNDATION BUILDER PAGE — page shell + 3-col grid + hero pills
   ---------------------------------------------------------------------------
   Mirrors task_builder / kra_builder page chrome. The .hd-fb-grid is
   single-column below lg, 3:6:3 at lg+ (left foundation list, middle edit
   form, right question list). The minmax(0, ...) on each column track is
   important — without it, ellipsified content wider than its allotted
   share blows out the grid (a common Grid + flex-child gotcha).
   NB: .home-dash.hd-fb (no space) targets the page-shell <section> which
   carries BOTH classes on the same element — same idiom as task_builder.
   .home-dash<space>.hd-fb would require .hd-fb to be a descendant, which
   doesn't match this markup.
   =========================================================================== */
.home-dash.hd-fb,
.home-dash.hd-stb-page,
.home-dash.hd-qb,
.home-dash.hd-qb-cu,
.home-dash.hd-qb-detail,
.home-dash.hd-qb-del,
.home-dash.hd-qb-al,
.home-dash.hd-pb-page,
.home-dash.hd-tb-delete-page,
.home-dash.hd-stb-q-builder-page,
.home-dash.hd-lst-page {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}
.home-dash .hd-fb-hero,
.home-dash .hd-qb-hero,
.home-dash .hd-qb-cu-hero,
.home-dash .hd-qb-detail-hero,
.home-dash .hd-qb-del-hero,
.home-dash .hd-pb-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0;
}
@media (min-width: 992px) {
}accordion sub-panels,
modal,
and inline-search. These
   rules cover only the question-page-specific affordances: the float-
   positioned search-results dropdown,
and the small layout tweaks.
   =========================================================================== */

/* Question search dropdown — same float pattern as foundation/procedure */

/* ===========================================================================
   MEDIA RESOURCES — file thumbnail grid + display/edit/delete modal set
   ---------------------------------------------------------------------------
   Used inside _foundation_update.html (and presumably any *_update template
   that needs attached files). The grid is a flex-wrap of square-ish
   thumbnails; clicking a tile opens a fullscreen display modal with
   prev/next nav between siblings,
and per-file edit and delete modals.
   =========================================================================== */
.home-dash .hd-mr-result-container {
	display: block;
	margin: 0 0 .5rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	overflow: hidden;
}

/* File grid — wraps to as many columns as fit, each tile ~120px wide */
.home-dash .hd-mr-grid,
.hd-modal.hd-crb-media-modal .hd-crb-media-grid {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
}
.home-dash .hd-mr-tile {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	width: 120px;
	padding: .45rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-dash .hd-mr-tile:hover,
.home-dash .hd-mr-tile:focus-visible {
	border-color: var(--hd-blue);
	box-shadow: var(--hd-shadow-sm);
	outline: none;
}
.home-dash .hd-mr-tile-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hd-surface-2);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
.home-dash .hd-mr-tile-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.home-dash .hd-mr-tile-title {
	font-size: .78rem;
	font-weight: 500;
	color: var(--hd-ink);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Empty state — full-width inside the grid (the grid is flex-wrap, so
   the empty state takes its own row at width: 100%) */
.home-dash .hd-mr-empty {
	flex: 1 1 100%;
}

/* Fullscreen display modal — body splits into description + content
   columns above the prev/next + edit/delete footer. */
.home-dash .hd-mr-fullsize-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: start;
	padding: 1.25rem 1.5rem;
}
@media (max-width: 767.98px) {
	.home-dash .hd-mr-fullsize-body {
		grid-template-columns: 1fr;
	}
}
.home-dash .hd-mr-fullsize-content {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: center;
	justify-content: center;
}
.home-dash .hd-mr-fullsize-actions {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: center;
}
.home-dash .hd-mr-fullsize-image,
.home-dash .hd-cpv-menu-logo {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-dash .hd-mr-fullsize-image img {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: var(--hd-radius-sm, 8px);
}
.home-dash .hd-mr-fullsize-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.home-dash .hd-mr-charcount {
	margin-top: .25rem;
	font-size: .75rem;
	color: var(--hd-muted);
}
/* Media resources — extras added for the step_builder reimagining.
   The .hd-mr-fullsize-or sits between the PDF "open" and "download"
   actions as a tiny separator. The delete/edit/info modal body and
   footer rules bring the namespace in line with other suite modal
   conventions (right-aligned action cluster + .85rem padding). */
.home-dash .hd-mr-fullsize-or {
	font-size: .8rem;
	color: var(--hd-muted);
	text-align: center;
	padding: .15rem 0;
}
/* Fullscreen display modal — release the suite's modal-content
   max-height cap so the fullscreen modal can claim the full viewport.
   The .hd-modal .modal-content rule sets max-height: calc(100vh - X);
   modal-fullscreen needs to override that. */
.home-dash .hd-mr-fullsize-modal .modal-fullscreen .modal-content {
	max-height: none !important;
	height: 100% !important;
}

/* ===========================================================================
   STEP BUILDER PAGE — page shell + hero with breadcrumb + 3-col grid
   ---------------------------------------------------------------------------
   Mirrors procedure_builder / task_builder / kra_builder chrome but
   has an extended hero with a 4-link breadcrumb (Group / KRA / Task /
   Procedure). The grid is 3:6:3 at lg+, single column below; the
   `.is-initial` modifier hides the right column and expands middle to
   accommodate the initial-help include.
   =========================================================================== */
.home-dash .hd-stb-content,
.home-dash .hd-lst-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	min-width: 0;
}
.home-dash .hd-stb-hero,
.home-dash .hd-stb-q-builder-hero,
.home-dash .hd-lst-hero {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}
.home-dash .hd-stb-hero .hd-hero-text,
.home-dash .hd-stb-q-builder-hero .hd-hero-text,
.home-dash .hd-lst-hero .hd-hero-text {
	min-width: 0;
	flex: 0 1 auto;
}
.home-dash .hd-stb-breadcrumb,
.home-dash .hd-lst-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	flex: 0 1 auto;
	min-width: 0;
}
.home-dash .hd-stb-breadcrumb-sep,
.home-dash .hd-lst-breadcrumb-sep {
	color: var(--hd-white-a35);
	font-size: .75rem;
	flex: 0 0 auto;
}
.home-dash .hd-stb-crumb,
.home-dash .hd-lst-crumb {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .65rem;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	border-radius: 999px;
	color: var(--hd-white-a92);
	font-size: .78rem;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
	min-width: 0;
}
.home-dash .hd-stb-crumb .bi,
.home-dash .hd-lst-crumb .bi {
	color: var(--hd-lime, #d6f366);
	font-size: .82rem;
	flex: 0 0 auto;
}
.home-dash .hd-stb-crumb-label,
.home-dash .hd-lst-crumb-label {
	color: var(--hd-white-a65);
	font-weight: 500;
	flex: 0 0 auto;
}
.home-dash .hd-stb-crumb-value,
.home-dash .hd-lst-crumb-value {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
@media (min-width: 992px) {
	.home-dash .hd-stb-grid.is-initial {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	}
}
@media (max-width: 991.98px) {
}

/* ===========================================================================
   STEP UPDATE — middle column on step_builder showing the current
   step's purpose / self-check / how. Read-mostly; the head iconbtn
   opens the edit modal. Missing-field alerts use a tinted danger
   block; survey-dimension steps suppress those alerts at the
   template level so this CSS doesn't need a survey variant.
   =========================================================================== */
.home-dash .hd-su-step {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-su-step-label {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	font-weight: 700;
	flex: 0 0 auto;
}
.home-dash .hd-su-step-name {
	color: var(--hd-ink);
	font-weight: 600;
	font-size: .95rem;
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.home-dash .hd-su-section-title {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hd-blue);
	font-weight: 700;
}
.home-dash .hd-su-section-lede {
	color: var(--hd-muted);
	font-style: italic;
	margin-right: .25rem;
}
.home-dash .hd-su-alert {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem .85rem;
	/* Colours match .hd-wsch-warning so step + work-schedule warnings read
	   identically; the dark-mode override is shared with it below. */
	background: rgba(201, 27, 27, .06);
	border: 1px solid rgba(201, 27, 27, .2);
	border-radius: var(--hd-radius-sm, 8px);
	color: #7f1d1d;
	font-size: .88rem;
	font-weight: 600;
}

/* ===========================================================================
   QUESTION BUILDER PAGE — page shell + 2-col grid + hero pills
   ---------------------------------------------------------------------------
   Mirrors foundation_builder / task_builder / kra_builder page chrome.
   The .hd-qb-grid is single-column below lg, 4fr 8fr at lg+ (left
   question list, middle edit form). NB: .home-dash.hd-qb (no space) —
   both classes carry on the same <section> element, not in an ancestor
   relationship.
   =========================================================================== */
@media (min-width: 992px) {
	.home-dash .hd-qb-grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: start;
	}
}

/* ===========================================================================
   QUESTION OVERVIEW + UPDATE — middle pane on question_builder
   ---------------------------------------------------------------------------
   Read-only overview (.hd-qb-overview-*) and editable update
   (.hd-qb-update-*) share most of the .hd-kb-update-* primitives. Add
   a 3-column grid modifier for owner/view/level and a status pill.
   =========================================================================== */
@media (min-width: 768px) {
	.home-dash .hd-qb-overview-row--qstatus {
		grid-template-columns: minmax(0, 5fr) minmax(0, 1fr);
	}
	.home-dash .hd-qb-overview-row--levelowner {
		grid-template-columns: 1fr 1fr;
	}
}
.home-dash .hd-qb-overview-meta,
.home-dash .hd-pb-overview-meta {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}
.home-dash .hd-qb-overview-meta-label,
.home-dash .hd-qb-del-question-label,
.home-dash .hd-pb-overview-meta-label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	font-weight: 700;
}
.home-dash .hd-qb-overview-meta-value,
.home-dash .hd-pb-overview-meta-value {
	font-size: .95rem;
	color: var(--hd-ink);
	line-height: 1.45;
	min-width: 0;
	overflow-wrap: break-word;
}
/* Help button for the Levels modal — sits inline next to a label */
.home-dash .hd-qb-overview-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: .15rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--hd-blue);
	cursor: help;
	transition: color .15s ease;
}
.home-dash .hd-qb-overview-help:hover,
.home-dash .hd-qb-overview-help:focus-visible {
	color: var(--hd-ink);
	outline: none;
}

/* Status pills — published/unpublished */
.home-dash .hd-qb-status {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.home-dash .hd-qb-status--published {
	background: rgba(22, 163, 74, .1);
	color: #166534;
	border: 1px solid rgba(22, 163, 74, .25);
}
.home-dash .hd-qb-status--unpublished {
	background: rgba(217, 119, 6, .1);
	color: #b45309;
	border: 1px solid rgba(217, 119, 6, .25);
}

/* 3-column grid modifier for owner/view/level row */
@media (min-width: 768px) {
}

/* Levels modal — ordered list with primary item label + nested bullets */
.home-dash .hd-qb-levels-list {
	margin: 0;
	padding-left: 1.4rem;
	color: var(--hd-ink);
}
.home-dash .hd-qb-levels-list ul {
	margin: .25rem 0 0;
	padding-left: 1.2rem;
	color: var(--hd-muted);
	font-size: .92rem;
}
.home-dash .hd-qb-levels-list ul li { margin-bottom: .15rem; }

/* ===========================================================================
   QUESTION CREATE/UPDATE PAGE — standalone full-page form
   =========================================================================== */
.home-dash .hd-qb-cu-shell,
.home-dash .hd-qb-del-shell {
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
}
.home-dash .hd-qb-cu-readonly {
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink);
	font-size: .92rem;
	line-height: 1.4;
}
.home-dash .hd-qb-cu-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: .5rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* ===========================================================================
   QUESTION DETAIL — read-only Q+A page
   =========================================================================== */
.home-dash .hd-qb-detail-body {
	padding: 1.5rem 1.75rem;
}
.home-dash .hd-qb-detail-answer {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hd-ink);
}
.home-dash .hd-qb-detail-answer-label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-right: .3rem;
	font-weight: 700;
	color: var(--hd-blue);
}

/* ===========================================================================
   QUESTION DELETE — confirmation page
   =========================================================================== */
.home-dash .hd-qb-del-body {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	padding: 1.25rem 1.5rem 1.5rem;
}
.home-dash .hd-qb-del-error {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .75rem 1rem;
	background: rgba(220, 53, 69, .08);
	border: 1px solid rgba(220, 53, 69, .25);
	border-radius: var(--hd-radius-sm, 8px);
	color: #991b1b;
	font-size: .92rem;
}
.home-dash .hd-qb-del-error .bi { color: #dc2626; font-size: 1.1rem; flex: 0 0 auto; }
.home-dash .hd-qb-del-question-text {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--hd-ink);
}
.home-dash .hd-qb-del-answer {
	font-size: .92rem;
	color: var(--hd-muted);
	line-height: 1.5;
}
.home-dash .hd-qb-del-warning {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .85rem 1rem;
	background: rgba(220, 53, 69, .06);
	border: 1px solid rgba(220, 53, 69, .25);
	border-left-width: 4px;
	border-radius: var(--hd-radius-sm, 8px);
}
.home-dash .hd-qb-del-warning .bi {
	color: #dc2626;
	font-size: 1.2rem;
	flex: 0 0 auto;
}
.home-dash .hd-qb-del-warning-text {
	font-size: .95rem;
	font-weight: 600;
	color: #991b1b;
	line-height: 1.4;
}
.home-dash .hd-qb-del-using-title {
	margin: 0;
	font-size: .9rem;
	font-weight: 700;
	color: var(--hd-ink);
}
.home-dash .hd-qb-del-using-table,
.home-dash .hd-qb-al-table,
.home-dash .hd-qb-remove-table,
.home-dash .hd-csv-preview-grid {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
.home-dash .hd-qb-del-using-head,
.home-dash .hd-qb-del-using-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: .75rem;
	padding: .55rem .75rem;
}
.home-dash .hd-qb-del-using-head,
.home-dash .hd-qb-remove-table-head {
	background: var(--hd-surface-2);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	font-weight: 700;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-qb-del-using-row,
.home-dash .hd-qb-remove-table-row {
	font-size: .9rem;
	color: var(--hd-ink);
	border-bottom: 1px solid var(--hd-line);
}

/* ===========================================================================
   QUESTION ANSWER LIST — under vendors_base shell
   ---------------------------------------------------------------------------
   Single-responsive list pattern: at lg+ each row is grid 1fr 5fr 6fr;
   below lg each row collapses to flex column with cell labels visible.
   =========================================================================== */
.home-dash .hd-qb-al-row {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .65rem .85rem;
	color: var(--hd-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hd-line);
	transition: background .15s ease;
}
.home-dash .hd-qb-al-row--head {
	background: var(--hd-surface-2);
	color: var(--hd-muted);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	pointer-events: none;
}
.home-dash .hd-qb-al-cell-label {
	display: none;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	font-weight: 700;
}
@media (min-width: 992px) {
	.home-dash .hd-qb-al-row {
		display: grid;
		grid-template-columns: 1fr 5fr 6fr;
		gap: .75rem;
		align-items: center;
	}
	.home-dash .hd-qb-al-row--head { display: grid; }
}
@media (max-width: 991.98px) {
}

/* ===========================================================================
   QUESTION SEARCH RESULTS — AJAX response inside #question-result-container
   =========================================================================== */
.home-dash .hd-qb-results-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .55rem .75rem;
	color: var(--hd-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--hd-line);
	transition: background .15s ease;
}
.home-dash .hd-qb-results-row:hover,
.home-dash .hd-qb-results-row:focus-visible {
	background: var(--hd-surface-2);
	color: var(--hd-ink);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-qb-results-row-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .87rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-qb-results-row-add {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--hd-muted);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.home-dash .hd-qb-results-row:hover .hd-qb-results-row-add,
.home-dash .hd-qb-results-row:focus-visible .hd-qb-results-row-add {
	background: rgba(22, 163, 74, .10);
	border-color: rgba(22, 163, 74, .35);
	color: #166534;
}

/* ===========================================================================
   QUESTION REMOVE MODAL — body fetched into #removeModal scaffold
   =========================================================================== */
.home-dash .hd-qb-remove-preamble {
	margin: 0 0 1rem;
	font-size: .92rem;
	color: var(--hd-ink);
	line-height: 1.45;
}
.home-dash .hd-qb-remove-table-head,
.home-dash .hd-qb-remove-table-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: .75rem;
	padding: .55rem .75rem;
}

/* ===========================================================================
   PROCEDURE BUILDER PAGE — page shell + responsive layout + hero pills
   ---------------------------------------------------------------------------
   Complements the .hd-pb-* rules earlier in the file (which cover the
   procedure list/select internal chrome). This block is for the page-
   level layout: the .home-dash.hd-pb-page wrapper, the hero pills, the
   3:6:3 grid at lg+, and the single-column stack below lg. The same
   include elements render once and CSS Grid + visibility utilities
   handle the responsive switch (no DOM duplication for the middle
   column or its IDs).
   =========================================================================== */

/* Responsive layout — single CSS Grid wrapper that re-templates at
   the lg breakpoint. Each included column renders exactly once and
   relies on the suite-wide single-responsive-layout convention to
   adapt to narrow widths (no _small mobile variants needed). */
@media (min-width: 992px) {
	.home-dash .hd-pb-layout {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
		gap: 1rem;
		align-items: start;
	}
}

/* ===========================================================================
   PROCEDURE OVERVIEW + UPDATE — middle column on procedure_builder
   ---------------------------------------------------------------------------
   .hd-pb-overview-* covers the read-only overview panel; .hd-pb-update-*
   covers the editable form. Both lean on the suite-wide .hd-kb-update-*
   primitives (inherited via the markup using those classes alongside
   page-specific modifiers).
   =========================================================================== */
.home-dash .hd-pb-overview-title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.005em;
}
.home-dash .hd-pb-overview-owner {
	font-size: .8rem;
	color: var(--hd-muted);
	margin-top: -.1rem;
}

/* Title / Seq Type 8/4 split at md+ */
@media (min-width: 768px) {
	.home-dash .hd-pb-update-grid--titleseq {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	}
}

/* ===========================================================================
   PROCEDURE BUILDER — Step list / Step select panel
   ---------------------------------------------------------------------------
   The _step_select.html template renders the left-rail step picker on
   procedure_builder, step_builder, and step_question_update. It mirrors
   the .hd-kb-list-panel / .hd-tb-list-panel pattern: a panel with a
   head (title + filter + back-up button + kebab actions), a body that
   may contain an inline step-search, then the active list, then any
   marked-for-removal rows.

   Rows lean on the suite-wide .hd-kb-list-row primitive (and its
   --remove variant), .hd-kb-list-link, .hd-kb-list-seq, .hd-kb-list-name,
   .hd-kb-list-actions, .hd-kb-list-action--apply / --convert / --remove /
   --restore / --synced — none of which is duplicated here. The
   page-level rules below cover only the panel chrome, the dimension
   filter dropdown, the inline search-results pane, the per-row meta
   pills, the survey-question expansion, and the marked-for-removal
   detail block.

   .hd-pb-extras-* covers the secondary "Additional Step Information"
   accordion below the main list (change-sync / abandoned / unapplied).
   =========================================================================== */
.home-dash .hd-pb-step-list-form {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

/* Inline step-search wrap — sits at the top of the panel body when the
   user can add steps. Reuses .hd-inline-search-* primitives; the
   results pane stacks directly under the input rather than floating,
   so the pane is just a styled container that becomes a card-like
   surface only when populated. */
.home-dash .hd-pb-step-search-results {
	display: block;
	margin-top: .35rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.home-dash .hd-pb-step-search-results:not(:empty) {
	padding: .5rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	box-shadow: var(--hd-shadow-xs, 0 1px 2px rgba(0, 0, 0, .03));
}

/* Dimension filter — a Bootstrap dropdown menu rendered as a
   suite-styled popover with reset / apply controls and a checkbox
   list. The whole thing is a <form> so submitting either the visible
   button or pressing Enter posts to the current URL. */
.home-dash .hd-pb-dim-filter {
	min-width: 16rem;
	max-width: 22rem;
	max-height: 24rem;
	overflow-y: auto;
	padding: .6rem;
	margin: 0;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	box-shadow: var(--hd-shadow-md, 0 6px 18px rgba(0, 0, 0, .08));
	background: var(--hd-surface, #fff);
}
.home-dash .hd-pb-dim-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .35rem;
	padding-bottom: .55rem;
	margin-bottom: .55rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-pb-dim-filter-head-title,
.home-dash .hd-ob-perf-objective-label {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	font-weight: 700;
}
.home-dash .hd-pb-dim-filter-list {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: 0;
	margin: 0;
	list-style: none;
}
.home-dash .hd-pb-dim-filter-item {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .35rem .5rem;
	border-radius: 6px;
	font-size: .87rem;
	color: var(--hd-ink);
	cursor: pointer;
	transition: background .15s ease;
}
.home-dash .hd-pb-dim-filter-item input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
}

/* Per-row meta pill — used for dimension display on the active row
   and for "(seq_type)" + "(dimension)" on remove rows. */
.home-dash .hd-pb-step-meta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	margin-right: .25rem;
	padding: .1rem .45rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
}

/* When a survey-question or remove-detail block is rendered inside the
   row's inner flex container, the inner needs to wrap so the block can
   break onto its own line below the link/meta/actions. The :has()
   override scopes this to rows that actually contain such a block,
   leaving plain rows on a single horizontal line. */
.home-dash .hd-kb-list-row-inner:has(> .hd-pb-step-survey),
.home-dash .hd-kb-list-row-inner:has(> .hd-pb-step-detail),
.home-dash .hd-kb-list-row-inner:has(> .hd-pb-question-answers) {
	flex-wrap: wrap;
}
/* When the question row has its answers block (which claims a full
   100% flex basis to land on a new line), the link's content-width
   flex-basis can push the actions to a separate wrap line before the
   link shrinks. Override the link's basis to 0 so the flex algorithm
   keeps actions on the title row and grows the link into the
   remaining space (its inner name span already truncates via
   text-overflow: ellipsis). */
.home-dash .hd-kb-list-row-inner:has(> .hd-pb-question-answers) > .hd-kb-list-link {
	flex-basis: 0;
}

/* Editor-conflict info icon next to the row name */

/* Survey-question expansion — appears INSIDE the selected row when
   the step's dimension is SURVEY. Pushes below the main row line so
   it doesn't fight the link's flex layout. */
.home-dash .hd-pb-step-survey {
	flex: 1 1 100%;
	margin-top: .35rem;
	/* Carve 4px off the left so the parent row's inset 3px blue stripe
	   (when .is-selected) isn't covered by this card's solid white
	   background. Without the carve-out, the inset shadow stripe gets
	   painted under the survey card and disappears. */
	margin-left: 4px;
	padding: .65rem .85rem;
	background: var(--hd-surface, #fff);
	border-radius: 0 0 var(--hd-radius-sm, 8px) var(--hd-radius-sm, 8px);
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.home-dash .hd-pb-step-survey-head,
.home-dash .hd-rb-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
.home-dash .hd-pb-step-survey-type {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--hd-blue);
}
.home-dash .hd-pb-step-survey-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	color: var(--hd-muted);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	flex: 0 0 auto;
}

/* ===========================================================================
   QUESTION DISPLAY — _question_display.html / _survey_question_display.html
   ---------------------------------------------------------------------------
   Renders the answer-choice list below a question's link/actions. Two
   render contexts: as a row in the right-column step-questions panel
   (full chrome), or embedded inside the step-survey expansion (lighter,
   no row chrome — the .hd-pb-question-survey wrapper carries selection
   and edit-state markers without the bordered card look).
   =========================================================================== */
.home-dash .hd-pb-question-survey {
	display: block;
	width: 100%;
	border-radius: var(--hd-radius-sm, 8px);
}

/* Type badge — small uppercase pill on the right of the question link
   (MC / TF / ATA / IT / MAT) */
.home-dash .hd-pb-question-type {
	flex: 0 0 auto;
	padding: .15rem .5rem;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .04em;
	/* Matches the .hd-kb-list-seq ordering badge — translucent-white pill
	   so the blue text reads in both modes (--hd-blue-a06 was too faint
	   in dark mode and sat on the dark row background). */
	color: var(--hd-blue);
	background: var(--hd-white-a65);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
	white-space: nowrap;
}
.home-dash .hd-kb-list-row.is-selected .hd-pb-question-type {
	border-color: var(--hd-blue-a35);
}

/* Answer-choices block — wraps below the link/actions on its own line.
   The :has() flex-wrap rule on .hd-kb-list-row-inner above makes this
   work; the answers block claims 100% width via flex: 1 1 100%. */
.home-dash .hd-pb-question-answers {
	flex: 1 1 100%;
	margin-top: .4rem;
	padding: .55rem .65rem;
	border-top: 1px dashed var(--hd-line);
	display: flex;
	flex-direction: column;
	gap: .25rem;
	font-size: .85rem;
	color: var(--hd-ink);
}
.home-dash .hd-pb-question-answers--survey {
	margin-top: 0;
	padding: 0;
	border-top: 0;
}
.home-dash .hd-pb-answer-row {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding: .25rem .5rem;
	border-radius: 4px;
	min-width: 0;
}
.home-dash .hd-pb-answer-row--match {
	flex-direction: column;
	align-items: stretch;
	gap: .15rem;
}
.home-dash .hd-pb-answer-row--number {
	padding: .35rem .5rem;
}
.home-dash .hd-pb-answer-label {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--hd-blue);
}
.home-dash .hd-pb-answer-index {
	flex: 0 0 auto;
	min-width: 1.4rem;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .78rem;
	color: var(--hd-muted);
	font-weight: 600;
}
.home-dash .hd-pb-answer-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}
.home-dash .hd-pb-answer-prompt {
	font-weight: 600;
	color: var(--hd-ink);
	overflow-wrap: anywhere;
}
.home-dash .hd-pb-answer-match {
	font-style: italic;
	color: var(--hd-muted);
	padding-left: .65rem;
	overflow-wrap: anywhere;
}
.home-dash .hd-pb-answer-correct {
	flex: 0 0 auto;
	color: #16a34a;
	font-size: 1rem;
}
.home-dash .hd-pb-answer-canvas {
	max-width: 100%;
	border-radius: var(--hd-radius-sm, 8px);
	border: 1px solid var(--hd-line);
	background: var(--hd-surface-2);
}
.home-dash .hd-pb-answer-number-input {
	max-width: 8rem;
}

/* Info-icon variant of .hd-kb-list-action — used when can_apply is
   false (someone else is editing). Always visible (not hover-revealed)
   since it carries critical conflict info. */
.home-dash .hd-kb-list-action.hd-kb-list-action--info {
	color: #d97706;
	cursor: help;
	opacity: 1;
}
.home-dash .hd-kb-list-action.hd-kb-list-action--info:hover {
	background: rgba(217, 119, 6, .1);
	border-color: rgba(217, 119, 6, .3);
	color: #b45309;
}

/* Marked-for-removal detail block — the purpose / self-check / how
   text that expands inside the selected remove-row. Each line shows
   either the populated text (italic lead-in + value) or a missing
   warning. */
.home-dash .hd-pb-step-detail {
	flex: 1 1 100%;
	margin-top: .35rem;
	/* See .hd-pb-step-survey comment: 4px left carve-out keeps the
	   parent .hd-kb-list-row.is-selected stripe visible underneath. */
	margin-left: 4px;
	padding: .65rem .75rem;
	border-top: 1px dashed var(--hd-line);
	background: var(--hd-surface, #fff);
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-size: .85rem;
	line-height: 1.45;
	color: var(--hd-ink);
}
.home-dash .hd-pb-step-detail-lead {
	font-style: italic;
	color: var(--hd-muted);
	margin-right: .15rem;
}
.home-dash .hd-pb-step-detail-missing {
	margin: 0;
	font-style: italic;
	font-weight: 600;
	color: #b91c1c;
}
.home-dash .hd-pb-step-detail-survey {
	margin-top: .25rem;
	padding-top: .5rem;
	border-top: 1px dashed var(--hd-line);
}
.home-dash .hd-pb-step-detail-survey-label {
	display: block;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--hd-blue);
	margin-bottom: .35rem;
}

/* ===========================================================================
   PROCEDURE BUILDER — Additional Step Information (extras) accordion
   ---------------------------------------------------------------------------
   Wraps change-sync (step manager) or abandoned + unapplied (procedure
   manager) below the main step list. Uses the split-head .hd-kb-acc
   pattern so the chevron button is the click target. The body is a
   nested-style container (no inner height cap, gap between sub-cards),
   identical philosophy to the KRA "Additional KRA Information" panel.
   =========================================================================== */
.home-dash .hd-pb-extras-body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: .85rem;
	max-height: none;
	overflow: visible;
	background: var(--hd-surface, #fff);
}


/* ===========================================================================
   TASK DELETE — destructive-action confirmation page
   ---------------------------------------------------------------------------
   Single-column danger-toned page used to confirm removing a Task from
   a KRA. Lays out a danger-variant .hd-hero, a single centered .hd-panel
   with the confirmation lead + task summary + (when applicable) the
   list of affected employees, and a flat action footer with Cancel
   (ghost) + Remove (danger).

   The panel itself uses the suite-wide dark .hd-panel-head, but the
   page-level surface above it (the hero) overrides to a red gradient
   so the page reads unmistakably as destructive on first glance.

   .hd-confirm-lead and .hd-summary primitives mirror the .hd-modal
   versions defined earlier (lines ~18027 / ~18054) but use suite tokens
   instead of modal tokens so they work on the .home-dash surface.
   =========================================================================== */
.home-dash .hd-tb-delete-hero,
.home-dash .hd-crb-hero,
.home-dash .hd-teb-hero,
.home-dash .hd-cpv-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}/* Hero variant — kept defined for any page that wants a fully-red
   destructive hero. The task_delete page now uses the standard suite
   blue hero and applies the danger tone to the confirmation panel
   head instead {
	background:
		radial-gradient(900px 300px at 100% -20%, rgba(255, 100, 100, .25), transparent 60%),
		radial-gradient(700px 260px at -10% 120%, rgba(255, 100, 100, .25), transparent 60%),
		linear-gradient(135deg, #7a0f0f 0%, #a01818 55%, #C91B1B 100%);
}/* Panel-head variant — flips the suite-wide dark blue head to a red
   gradient matching .hd-modal-header.is-danger. Used on the
   task_delete confirmation panel so the destructive context lives on
   the panel that carries the action. The cascading button + iconbtn
   rules already defined for .hd-panel-head still apply (white-tint
   borders, white primary, white ghost) — those colors all read
   correctly on the red fill too. */
.hd-panel-head.hd-panel-head--danger {
	background:
		radial-gradient(600px 120px at 100% -20%, rgba(255, 100, 100, .25), transparent 60%),
		linear-gradient(135deg, #7a0f0f 0%, #a01818 55%, var(--hd-danger) 100%);
}
.home-dash .hd-tb-delete-panel {
	width: 100%;
	max-width: 38rem;
}

/* Page-level confirm-lead (mirrors the .hd-modal primitive at ~18027 but
   scoped to .home-dash surfaces). Red-tinted callout that frames the
   destructive question. */
.home-dash .hd-confirm-lead {
	display: flex;
	gap: .75rem;
	padding: .9rem 1rem;
	background: rgba(201, 27, 27, .06);
	border: 1px solid rgba(201, 27, 27, .18);
	border-radius: var(--hd-radius-sm, 10px);
}
.home-dash .hd-confirm-lead-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: rgba(201, 27, 27, .14);
	color: var(--hd-danger);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
}
.home-dash .hd-confirm-lead-text {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--hd-ink);
	flex: 1 1 auto;
	min-width: 0;
}

/* Page-level summary block. */
.home-dash .hd-summary {
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 10px);
	padding: .85rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.home-dash .hd-summary-row {
	display: grid;
	grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
	gap: .75rem;
	align-items: baseline;
	padding: .35rem 0;
}
.home-dash .hd-summary-value {
	font-size: .95rem;
	color: var(--hd-ink);
	min-width: 0;
	overflow-wrap: break-word;
}

/* Affected-employees block — amber-tinted to read as a warning rather
   than a confirmed danger (the assigned employees aren't being deleted,
   they'll just lose this task assignment). The list uses a stacked
   row layout; each row shows the employee id and their name. */
.home-dash .hd-tb-delete-affected {
	background: rgba(217, 119, 6, .06);
	border: 1px solid rgba(217, 119, 6, .22);
	border-radius: var(--hd-radius-sm, 10px);
	padding: .85rem 1rem;
}
.home-dash .hd-tb-delete-affected-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .55rem;
	font-size: .82rem;
	font-weight: 700;
	color: #92400e;
}
.home-dash .hd-tb-delete-affected-head .bi,
.home-dash .hd-stb-q-overview-choice-correct--no {
	color: #d97706;
	font-size: .95rem;
}
.home-dash .hd-tb-delete-affected-row {
	display: grid;
	grid-template-columns: minmax(2.4rem, max-content) minmax(0, 1fr);
	gap: .65rem;
	padding: .35rem 0;
	font-size: .9rem;
	color: var(--hd-ink);
}
.home-dash .hd-tb-delete-affected-row + .hd-tb-delete-affected-row {
	border-top: 1px dashed rgba(217, 119, 6, .25);
}
.home-dash .hd-tb-delete-affected-id {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .78rem;
	color: var(--hd-muted);
	font-weight: 700;
	letter-spacing: .04em;
}

/* Error banner — for server-side error_message rendering. */
.home-dash .hd-tb-delete-error {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	padding: .65rem .85rem;
	background: rgba(201, 27, 27, .08);
	border: 1px solid rgba(201, 27, 27, .25);
	border-radius: var(--hd-radius-sm, 10px);
	color: #b91c1c;
	font-size: .9rem;
	font-weight: 600;
}
.home-dash .hd-tb-delete-error .bi {
	flex: 0 0 auto;
	font-size: 1rem;
	margin-top: .1rem;
}

/* Footer action bar — flex-end, dashed top border. */

/* ===========================================================================
   ISSUES LIST — _issue_list.html
   ---------------------------------------------------------------------------
   Per-step list of issues with their trialerror sub-lists. Renders inside
   a parent .home-dash.hd-{ns}-page (typically the procedure step builder).
   Two parallel loops: active issues (.hd-iss-card) and marked-for-removal
   issues (.hd-iss-card.hd-iss-card--remove). Each card carries the
   suite-standard edit-state tints (item_add / item_move / item_pending)
   on the card itself.
   The cards are richer than .hd-kb-list-row — a header strip with title
   + actions, a body section for "Why It's a Problem", and a nested
   trialerror sub-section with a 2-column grid (active list | unused
   reference panel). They aren't selectable: there's no .is-selected
   state, so the 4px border-left slot is reused as a category indicator
   on remove cards (red), transparent on active cards.
   The .hd-iss-trial-grid stacks the unused reference panel below the
   active trialerror list at full width — the unused list is typically
   short or empty, so giving the active list the full row width is
   easier to read than a half-column.
   =========================================================================== */
.home-dash .hd-iss-list {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	width: 100%;
}
.home-dash .hd-iss-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .85rem;
	padding: .55rem .85rem;
	background: var(--hd-blue);
	color: #fff;
	border-radius: var(--hd-radius-sm, 8px);
	flex-wrap: wrap;
}
.home-dash .hd-iss-list-title {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}
.home-dash .hd-iss-list-title .bi,
.home-dash .hd-stb-q-overview-title .bi,
.home-dash .hd-stb-q-update-title .bi,
.home-dash .hd-stb-q-survey-update-title .bi,
.home-dash .hd-stb-q-choices-title .bi {
	font-size: 1rem;
	color: var(--hd-white-a92);
}

/* ---- Card primitive ---- */
/* The 4px border-left slot is filled at all times: blue-soft at rest
   so each issue card carries a visible category stripe without
   competing with the card header, full blue on hover for state
   feedback. Edit-state classes (item_add / item_move / item_pending)
   and the --remove modifier override border-left-color with their
   own status hue. */
.home-dash .hd-iss-card {
	position: relative;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-left: 4px solid var(--hd-blue-soft, #c8d8e8);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.home-dash .hd-iss-card:hover {
	box-shadow: 0 2px 6px rgba(15, 15, 20, .04);
}

/* Edit-state tints — applied to the whole card so the colored fill
   reads through both header and body. The header strip retains its
   own subtle background (see .hd-iss-card-head below), but the card's
   body picks up the tint directly. The border-left stripe also
   shifts to match the state hue so the resting blue-soft baseline
   doesn't clash with an amber/green/blue body fill. */
.home-dash .hd-iss-card.item_add {
	background: rgba(22, 163, 74, .12);
	border-left-color: #16a34a;
}
.home-dash .hd-iss-card.item_move {
	background: rgba(37, 99, 235, .12);
	border-left-color: #2563eb;
}
.home-dash .hd-iss-card.item_pending {
	background: rgba(217, 119, 6, .12);
	border-left-color: #d97706;
}

/* Marked-for-removal — red border-left as category indicator, soft
   red wash, faint opacity to communicate "scheduled for removal". */
.home-dash .hd-iss-card--remove,
.home-dash .hd-iss-trial-card--remove {
	background: rgba(220, 53, 69, .04);
	border-left-color: #dc2626;
	opacity: .9;
}

/* ---- Card head: title + actions ---- */
.home-dash .hd-iss-card-head {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .65rem .85rem;
	background: var(--hd-blue-soft, #eaf1f8);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-iss-card--remove .hd-iss-card-head,
.home-dash .hd-iss-trial-card--remove .hd-iss-trial-card-head {
	background: rgba(220, 53, 69, .08);
	border-bottom-color: rgba(220, 53, 69, .18);
}
.home-dash .hd-iss-card-title,
.home-dash .hd-iss-search-bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-iss-card-seq {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	padding: .15rem .4rem;
	font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
	font-size: .78rem;
	font-weight: 700;
	color: var(--hd-blue);
	background: var(--hd-white-a65);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
	letter-spacing: .04em;
}
.home-dash .hd-iss-card-seq--strike {
	color: #b91c1c;
	background: var(--hd-white-a65);
	border-color: rgba(220, 53, 69, .35);
}
.home-dash .hd-iss-card-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .98rem;
	font-weight: 700;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-iss-card-name--strike {
	text-decoration: line-through;
	color: var(--hd-muted);
	font-weight: 600;
}
.home-dash .hd-iss-card-flag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #d97706;
	cursor: help;
	font-size: .92rem;
}

/* ---- Card actions (icon strip) ---- */
.home-dash .hd-iss-card-actions,
.home-dash .hd-iss-list-head-actions,
.home-dash .hd-stb-q-panel-actions {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}
.home-dash .hd-iss-card-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	color: var(--hd-muted);
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	cursor: pointer;
}
.home-dash .hd-iss-card-action:hover,
.home-dash .hd-iss-card-action:focus-visible,
.home-dash .hd-iss-trial-card-action:hover,
.home-dash .hd-iss-trial-card-action:focus-visible {
	background: var(--hd-white-a80);
	color: var(--hd-blue);
	border-color: var(--hd-blue-a35);
	outline: none;
	text-decoration: none;
}
.home-dash .hd-iss-card-action--remove:hover,
.home-dash .hd-iss-card-action--remove:focus-visible,
.home-dash .hd-iss-trial-card-action--remove:hover,
.home-dash .hd-iss-trial-card-action--remove:focus-visible {
	color: #b91c1c;
	border-color: rgba(220, 53, 69, .4);
}
.home-dash .hd-iss-card-action--apply,
.home-dash .hd-iss-trial-card--worked .hd-iss-trial-card-result .bi,
.home-dash .hd-iss-trial-card-action--apply,
.home-dash .hd-cpv-lesson-chevron--done,
.home-dash .hd-cpv-lesson-row.is-complete .hd-cpv-lesson-status,
.home-dash .hd-cpv-lesson-row.is-complete .hd-cpv-lesson-num {
	color: #16a34a;
}
/* Not-started rows show the bi-play-circle icon vertically centered
   inside the row regardless of whether the title wraps — joined into the
   .hd-hero > .row > .col-12.col-lg-auto chain above (same body). In-
   progress (pie chart) and completed (check disc) icons stay top-aligned
   via the row's base align-items:flex-start so they sit next to the
   eyebrow line consistently. */
.home-dash .hd-iss-card-action--apply:hover,
.home-dash .hd-iss-card-action--apply:focus-visible,
.home-dash .hd-iss-trial-card-action--apply:hover,
.home-dash .hd-iss-trial-card-action--apply:focus-visible {
	color: #15803d;
	border-color: rgba(22, 163, 74, .4);
}
.home-dash .hd-iss-card-action--restore:hover,
.home-dash .hd-iss-card-action--restore:focus-visible,
.home-dash .hd-iss-trial-card-action--restore:hover,
.home-dash .hd-iss-trial-card-action--restore:focus-visible {
	color: var(--hd-blue);
	border-color: var(--hd-blue-a35);
}

/* ---- Card body ---- */
.home-dash .hd-iss-card-body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: .85rem;
}
.home-dash .hd-iss-field-label,
.home-dash .hd-stb-q-overview-field-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-iss-card--remove .hd-iss-field-label {
	color: #92400e;
}
.home-dash .hd-iss-field-value {
	font-size: .95rem;
	color: var(--hd-ink);
	overflow-wrap: break-word;
	white-space: pre-wrap;
}
.home-dash .hd-iss-field-value--strike,
.home-dash .hd-iss-trial-card--remove .hd-iss-trial-card-result,
.home-dash .hd-iss-trial-card-value--strike,
.home-dash .hd-lb-list-item.is-removed .hd-dept-list-text {
	text-decoration: line-through;
	color: var(--hd-muted);
}

/* ---- Trial-error sub-section ---- */
.home-dash .hd-iss-trial-section {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding-top: .65rem;
	border-top: 1px dashed var(--hd-line);
}
.home-dash .hd-iss-trial-title {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-iss-trial-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	color: var(--hd-blue);
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
	cursor: pointer;
}
.home-dash .hd-iss-trial-add:hover,
.home-dash .hd-iss-trial-add:focus-visible {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue-a35);
	color: var(--hd-blue);
	outline: none;
	text-decoration: none;
}

/* The trial-error grid: stacked rows, active list on top, unused
   reference panel below — full-width at every viewport. The unused
   list tends to be small (often empty), so giving the active list
   the full row width keeps the read-side trialerror cards readable
   without squeezing them into a half-column. */
/* Outer trial-grid IS the 2-up tiling grid at md+. Trialerror cards
   tile 2-across; the unused panel below them spans both columns by
   default (full-width banner). Single-column on mobile.
   When the trial-grid carries the --single modifier (set by the
   template when there's exactly one active trialerror and zero
   removes), the unused panel takes its natural col-2 cell instead
   of spanning, so it fits beside the lone trialerror card and
   reuses the otherwise-empty cell. */
.home-dash .hd-iss-trial-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .65rem;
}
@media (min-width: 768px) {
}
/* The active-trialerror wrapper uses display: contents so its
   trialerror cards (and the optional empty-state) flatten into the
   parent .hd-iss-trial-grid for layout purposes. The wrapper still
   exists in the DOM (preserves the AJAX target id="trialerror_list_div{N}"
   so AJAX innerHTML replacement keeps working) — it just doesn't
   generate its own box.
   The :not(--unused) guard keeps the unused reference panel out of
   display:contents — it stays a real grid item with its own box. */
/* Card order — worked → failed → remove. Order applies relative to
   the effective grid container (.hd-iss-trial-grid since the col is
   display:contents). DOM-level child selector still matches because
   the cards remain DOM children of the col. */
.home-dash .hd-iss-trial-col > .hd-iss-trial-card--worked { order: 0; }
.home-dash .hd-iss-trial-col > .hd-iss-trial-card--failed { order: 1; }
.home-dash .hd-iss-trial-col > .hd-iss-trial-card--remove { order: 2; }
/* Empty-state spans both columns (full-width banner) and lands after
   any cards via order: 3. */
.home-dash .hd-iss-trial-col > .hd-iss-trial-empty {
	grid-column: 1 / -1;
	order: 3;
}
/* Unused panel placement at md+. Default: span both columns, land
   after all cards (order: 10 high enough to clear card orders 0-3).
   Single-mode override: take its natural col-2 cell so it sits
   beside the lone active trialerror. */
.home-dash .hd-iss-trial-col--unused { order: 10; }
@media (min-width: 768px) {
	.home-dash .hd-iss-trial-grid > .hd-iss-trial-col--unused {
		grid-column: 1 / -1;
	}
	.home-dash .hd-iss-trial-grid--single > .hd-iss-trial-col--unused {
		grid-column: auto;
	}
}

/* ---- Unused-trialerror reference panel ---- */
/* This panel iterates the same context var on every issue card (source-
   side bug noted in the template doc-comment). De-emphasized typography
   so it reads as reference data, not per-issue state. */
.home-dash .hd-iss-trial-col--unused {
	align-self: stretch;
	background: var(--hd-surface, #fff);
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
/* Shared min-height across both trial-card-head and trial-unused-head
   so when the unused panel sits beside an active trialerror in single
   mode (.hd-iss-trial-grid--single), their header strips render at the
   same height. The value matches the trial-card-head's natural height
   (26px action button + .42rem top/bottom padding ≈ 2.65rem). */
.home-dash .hd-iss-trial-unused-head {
	display: flex;
	align-items: center;
	min-height: 2.65rem;
	padding: .35rem .65rem;
	background: var(--hd-blue-a06);
	border-bottom: 1px dashed var(--hd-line);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-iss-trial-unused-body { padding: .5rem .65rem; }
/* Unused-trialerror items render as a horizontal flex-wrap of
   pill chips. The previous vertical stack with dotted dividers
   wasted horizontal space when the panel runs full-width below
   the active list — chips read better as reference glance-data. */
.home-dash .hd-iss-trial-unused-list,
.home-dash .hd-stb-q-unused-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}
.home-dash .hd-iss-trial-unused-item {
	display: inline-flex;
	align-items: center;
	padding: .2rem .55rem;
	font-size: .82rem;
	color: var(--hd-ink);
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
}
.home-dash .hd-iss-trial-unused-empty {
	margin: 0;
	font-size: .82rem;
	font-style: italic;
	color: var(--hd-muted);
}

/* ---- Restore-orphans modal ---- */
.home-dash .hd-iss-restore-body { padding: 1.1rem 1.25rem; }
.home-dash .hd-iss-restore-lead,
.home-dash .hd-iss-detail-section-lead {
	margin: 0 0 .85rem;
	font-size: .92rem;
	color: var(--hd-ink);
}
.home-dash .hd-iss-orphan-row {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem .75rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: border-color .15s ease, background .15s ease;
}
.home-dash .hd-iss-orphan-seq {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: .15rem .45rem;
	font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
	font-size: .78rem;
	font-weight: 700;
	color: var(--hd-blue);
	background: var(--hd-blue-soft, #eaf1f8);
	border: 1px solid var(--hd-blue-a25);
	border-radius: 999px;
	letter-spacing: .04em;
}
.home-dash .hd-iss-orphan-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .92rem;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-iss-orphan-action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	color: #16a34a;
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.home-dash .hd-iss-orphan-action:hover,
.home-dash .hd-iss-orphan-action:focus-visible {
	background: rgba(22, 163, 74, .1);
	color: #15803d;
	border-color: rgba(22, 163, 74, .4);
	outline: none;
	text-decoration: none;
}
.home-dash .hd-iss-restore-empty {
	margin: 0;
	padding: 1rem;
	text-align: center;
	font-size: .9rem;
	font-style: italic;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}

/* ===========================================================================
   ISSUES — extension block for the rest of the issue/trialerror chain
   ---------------------------------------------------------------------------
   Builds on the .hd-iss-* base shipped earlier. Adds:
	   - Search-bar primitives for _issue_search_include.html
	   - Trialerror cards (active + remove variants) for
		 _trialerror_list.html / _trialerror_remove_list.html
	   - Trialerror empty state for _trialerror_keep_remove_list.html
	   - Trialerror modal scaffolding (toggle row, modal-action strip)
	   - Confirm-modal extras (using_me table) for the AJAX-loaded
		 _issue_remove_modal.html
	   - Standalone detail page (.hd-iss-page) for step_issue_detail.html
   The .hd-iss-list-search wrapper from the shipped base already provides
   the flex container that holds the search bar.
   =========================================================================== */

/* ---- Search section (transparent band between issue-list head and
   the first issue card; just hosts the search input). The search
   action buttons (Restore Orphans, Create New Issue) moved to the
   .hd-iss-list-head — see .hd-iss-list-head-action below. ---- */
.home-dash .hd-iss-search-section {
	display: flex;
	padding: 0;
	background: transparent;
	border: 0;
}

.home-dash .hd-iss-search-form {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	margin: 0;
}
.home-dash .hd-iss-search-icon,
.home-dash .hd-stb-q-search .hd-inline-search-icon {
	position: absolute;
	left: .75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hd-muted);
	font-size: .82rem;
	pointer-events: none;
}
.home-dash .hd-iss-search-input {
	display: block;
	width: 100%;
	padding: .42rem .75rem .42rem 2.15rem;
	font-size: .85rem;
	color: var(--hd-ink);
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.home-dash .hd-iss-search-input:focus,
.home-dash .hd-stb-q-search .hd-inline-search-input:focus {
	outline: none;
	background: var(--hd-surface, #fff);
	border-color: var(--hd-blue);
	box-shadow: 0 0 0 3px var(--hd-blue-a12);
}
/* ---- List-head action buttons (Restore Orphans, Create New Issue) —
   sit inline in the dark .hd-iss-list-head next to the title. White-on-
   dark chrome to read against the suite blue gradient. ---- */
.home-dash .hd-iss-list-head-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	color: var(--hd-white-a92);
	background: var(--hd-white-a12);
	border: 1px solid var(--hd-white-a18);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.home-dash .hd-iss-list-head-action:hover,
.home-dash .hd-iss-list-head-action:focus-visible {
	color: #fff;
	background: var(--hd-white-a25);
	border-color: var(--hd-white-a50);
	outline: none;
	text-decoration: none;
}

/* ---- Trialerror card primitive ---- */
/* Compact card sized for the .hd-iss-trial-col (left column inside an
   issue card's trial-grid). The header carries the worked/failed status
   pill + action icons; the body is a label-on-left, value-on-right
   stack. Edit-state tints (item_add/item_move/item_pending) inherit the
   suite's standard rgba .12 fills. */
.home-dash .hd-iss-trial-card {
	position: relative;
	display: block;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-left: 4px solid transparent;
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.home-dash .hd-iss-trial-card:hover {
	border-color: var(--hd-blue-soft, #c8d8e8);
	box-shadow: 0 2px 6px rgba(15, 15, 20, .04);
}

/* Worked / failed left-stripe accents — these reuse the 4px border-left
   slot to communicate status at a glance. The .--remove variant takes
   precedence (red) over the worked/failed accents below it because
   .item_delete_remove + .--remove are written for that case in the
   CSS cascade. */
.home-dash .hd-iss-trial-card--worked { border-left-color: #16a34a; }
.home-dash .hd-iss-trial-card--failed { border-left-color: #d97706; }

/* Edit-state tints (same opacity convention as issue cards) */

/* Remove variant — red accent + soft red wash + faded opacity. */
/* Neutralize the legacy .item_delete_remove background paint (line ~8180
   of main.css paints it full red) when it sits inside a suite trial
   card. Specificity (0,2,0) beats both the bare legacy rule (0,1,0) and
   the dark-theme variant (0,2,0). */
.home-dash .hd-iss-trial-card.item_delete_remove {
	background-color: rgba(220, 53, 69, .04);
	font-style: normal;
}

/* Card head — colored background per status, action icons on the right */
.home-dash .hd-iss-trial-card-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.65rem;
	padding: .42rem .65rem;
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
	font-size: .82rem;
}
.home-dash .hd-iss-trial-card--worked .hd-iss-trial-card-head {
	background: rgba(22, 163, 74, .08);
	border-bottom-color: rgba(22, 163, 74, .2);
}
.home-dash .hd-iss-trial-card--failed .hd-iss-trial-card-head {
	background: rgba(217, 119, 6, .08);
	border-bottom-color: rgba(217, 119, 6, .2);
}

.home-dash .hd-iss-trial-card-result {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-iss-trial-card-result-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-right: .15rem;
}
.home-dash .hd-iss-trial-card--remove .hd-iss-trial-card-result-label {
	color: #92400e;
	text-decoration: none;
}

/* Action icon strip — same chrome as the issue card actions but smaller */
.home-dash .hd-iss-trial-card-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 5px;
	color: var(--hd-muted);
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	cursor: pointer;
}

/* Card body — label/value stack */
.home-dash .hd-iss-trial-card-body {
	padding: .55rem .65rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.home-dash .hd-iss-trial-card-row {
	display: grid;
	grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr);
	gap: .55rem;
	align-items: baseline;
	font-size: .85rem;
}
.home-dash .hd-iss-trial-card-row + .hd-iss-trial-card-row {
	border-top: 1px dotted var(--hd-line);
	padding-top: .25rem;
}
.home-dash .hd-iss-trial-card-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-iss-trial-card-value,
.home-dash .hd-stb-q-overview-field-value {
	color: var(--hd-ink);
	overflow-wrap: break-word;
	min-width: 0;
}

/* ---- Trialerror empty state (when issue has neither active nor
   remove trialerrors) — matches .hd-iss-trial-unused-empty visual
   weight but a touch larger since it stands alone. */
.home-dash .hd-iss-trial-empty {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .75rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-muted);
	font-size: .82rem;
	font-style: italic;
}

/* ---- Short-form modals (trialerror new + edit, issue edit): opt
   out of the suite-wide bulletproof-scroll on .hd-modal .modal-body.
   These forms are short (a handful of fields) so the always-visible
   scrollbar reads as visual noise. Switch to overflow-y:auto so the
   bar appears only when content actually overflows, and drop the
   70vh cap — the parent .modal-content already enforces a viewport
   cap via max-height: calc(100vh - 1rem). Specificity (0,3,0) +
   !important beats the bulletproof rule's (0,2,0) + !important
   pair. */

/* ---- Trialerror toggle row (Worked checkbox in modal) ---- */
/* Replaces the source's input-group .input-group-text + .form-check
   tangle with a simple horizontal label + native checkbox. The
   .hd-field-label (already styled above the row) provides the label;
   we override its layout to inline beside the checkbox. */
.hd-modal .hd-iss-trial-toggle {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .5rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 8px;
}
.hd-modal .hd-iss-trial-toggle .hd-field-label,
.home-dash .hd-teb-field .hd-field-label {
	margin: 0;
	flex: 1 1 auto;
}

/* ---- Modal-action strip inside modal-body (for the inline trialerror
   edit modal that puts its buttons at the end of the form rather than
   in a separate .modal-footer). ---- */
.hd-modal .hd-iss-trial-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1rem;
	padding-top: .85rem;
	border-top: 1px dashed var(--hd-line);
}

/* ===========================================================================
   ISSUE/TRIALERROR REMOVE CONFIRM MODAL EXTRAS
   ---------------------------------------------------------------------------
   _issue_remove_modal.html and _trialerror_remove_modal.html return
   modal-body contents that the JS handler injects into a host modal
   shell. The shell already provides .hd-modal scope so .hd-modal-header,
   .hd-confirm-lead, .hd-summary, .modal-body, .modal-footer all pick up
   their suite chrome.
   The using_me table is unique to _issue_remove_modal.html — issues can
   be referenced by multiple groups/tasks/procedures and the user needs
   to see the impact before removing.
   =========================================================================== */
.hd-modal .hd-iss-confirm-using {
	margin-top: 1rem;
	padding: .85rem 1rem;
	background: rgba(217, 119, 6, .06);
	border: 1px solid rgba(217, 119, 6, .22);
	border-radius: var(--hd-modal-radius);
}
.hd-modal .hd-iss-confirm-using-title {
	margin: 0 0 .55rem;
	font-size: .82rem;
	font-weight: 700;
	color: #92400e;
	display: flex;
	align-items: center;
	gap: .4rem;
}
.hd-modal .hd-iss-confirm-using-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
	color: var(--hd-ink);
}
.hd-modal .hd-iss-confirm-using-table thead th {
	text-align: left;
	padding: .35rem .5rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #92400e;
	border-bottom: 1px solid rgba(217, 119, 6, .25);
}
.hd-modal .hd-iss-confirm-using-table tbody td {
	padding: .35rem .5rem;
	border-bottom: 1px dashed rgba(217, 119, 6, .14);
	overflow-wrap: break-word;
}

/* ===========================================================================
   STEP_ISSUE_DETAIL — standalone read-only page
   ---------------------------------------------------------------------------
   Hero + centered content column with three panels (Ownership,
   TrialErrors, Comrades) + back/add action strip.
   =========================================================================== */
.home-dash.hd-iss-page,
.home-dash.hd-stb-q-survey-page {
	padding: 1.25rem 1rem 2rem;
	max-width: 1400px;
	margin: 0 auto;
}

/* Hero — gradient block with eyebrow + title + lead */
.home-dash .hd-iss-detail-hero {
	background:
		radial-gradient(800px 200px at 100% 0%, var(--hd-lime-a25), transparent 60%),
		linear-gradient(135deg, #000 0%, #1a2030 55%, var(--hd-blue) 100%);
	border-radius: var(--hd-radius, 16px);
	color: #fff;
	padding: 2rem 1.5rem;
	margin-bottom: 1.25rem;
	overflow: hidden;
	position: relative;
}
.home-dash .hd-iss-detail-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--hd-white-a06) 1px, transparent 1px),
		linear-gradient(90deg, var(--hd-white-a06) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
	pointer-events: none;
}
.home-dash .hd-iss-detail-hero-inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.home-dash .hd-iss-detail-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .25rem .65rem;
	background: var(--hd-white-a12);
	border: 1px solid var(--hd-white-a25);
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hd-white-a92);
	width: max-content;
}
.home-dash .hd-iss-detail-hero-eyebrow .bi {
	color: #d6f366;
	font-size: .82rem;
}
.home-dash .hd-iss-detail-hero-title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
	line-height: 1.15;
}
.home-dash .hd-iss-detail-hero-lead {
	margin: 0;
	max-width: 70ch;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--hd-white-a80);
	overflow-wrap: break-word;
}

/* Center column shell + stacked panels */
.home-dash .hd-iss-detail-shell,
.hd-cpv-player {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Trialerror chip list inside the TrialErrors panel — flat read-only
   display, since this page is the detail surface (no edit affordances). */
.home-dash .hd-iss-detail-trial-pill {
	padding: .55rem .85rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-left: 4px solid var(--hd-blue);
	border-radius: var(--hd-radius-sm, 8px);
	font-size: .92rem;
	color: var(--hd-ink);
	transition: border-color .15s ease, background .15s ease;
}
.home-dash .hd-iss-detail-trial-pill:hover {
	background: var(--hd-blue-soft, #eaf1f8);
}

/* Comrades table — list of other procedures using this issue */
.home-dash .hd-iss-detail-comrades-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}
.home-dash .hd-iss-detail-comrades-table thead th {
	text-align: left;
	padding: .55rem .75rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
	background: var(--hd-surface-2);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-iss-detail-comrades-table tbody td {
	padding: .55rem .75rem;
	border-bottom: 1px solid var(--hd-line);
	color: var(--hd-ink);
	overflow-wrap: break-word;
}
.home-dash .hd-iss-detail-comrade-link {
	color: var(--hd-blue);
	font-weight: 600;
	text-decoration: none;
	transition: color .15s ease;
}
.home-dash .hd-iss-detail-comrade-link:hover,
.home-dash .hd-iss-detail-comrade-link:focus-visible {
	color: #1d4d80;
	text-decoration: underline;
}

/* Empty state inside the detail panels (no trialerrors / no comrades) */
.home-dash .hd-iss-detail-empty,
.home-dash .hd-stb-q-empty {
	padding: 1.5rem 1rem;
	text-align: center;
}
.home-dash .hd-iss-detail-empty .bi,
.home-dash .hd-stb-q-empty .bi {
	font-size: 1.5rem;
	color: var(--hd-muted);
	margin-bottom: .5rem;
}

/* Action strip at the bottom of the page (Previous / Add) */
.home-dash .hd-iss-detail-actions {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: .5rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--hd-line);
}
.home-dash .hd-iss-detail-actions .hd-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1.1rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .01em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
	text-decoration: none;
}
.home-dash .hd-iss-detail-actions .hd-btn-ghost:hover {
	background: var(--hd-surface-2);
	border-color: #cfd7e3;
}
.home-dash .hd-iss-detail-actions .hd-btn-primary {
	background: linear-gradient(135deg, #000 0%, var(--hd-blue) 100%);
	color: #fff;
	box-shadow: 0 4px 12px var(--hd-blue-a25);
}

/* ===========================================================================
   COLLAPSE TOGGLE — shared chrome for any panel-head that doubles as a
   Bootstrap collapse trigger. Pairs a chevron icon with a label; the
   chevron rotates 180° when the trigger is expanded. Driven entirely
   by [aria-expanded] which Bootstrap toggles automatically. No JS
   needed beyond Bootstrap's collapse plugin.
   =========================================================================== */
.home-dash .hd-collapse-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 1 1 auto;
	min-width: 0;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .02em;
	transition: color .15s ease;
}
.home-dash .hd-collapse-toggle:hover,
.home-dash .hd-collapse-toggle:focus-visible {
	color: var(--hd-white-a80);
	text-decoration: none;
	outline: none;
}
.home-dash .hd-collapse-toggle[aria-expanded="true"] .hd-collapse-chevron {
	transform: rotate(0deg);
}

/* ---- Plan-form accordion toggle (list_plan_form.html) ----
   The Bootstrap accordion-button used inside .hd-lp-accordion sits on a
   white panel-body, NOT on a dark .hd-panel-head, so the white-on-dark
   .hd-collapse-toggle chrome is wrong here. This variant gives each phase
   header a dark-on-light pill that doubles as the collapse trigger. */
.home-dash .hd-lp-accordion .accordion-item {
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
.home-dash .hd-lp-accordion .accordion-item + .accordion-item,
.home-dash .hd-rb-objective-replace,
.home-dash .hd-crb-image-preview-new {
	margin-top: .5rem;
}
.home-dash .hd-lp-accordion-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .65rem .85rem;
	background: var(--hd-surface-2, #f4f4f7);
	border: none;
	color: var(--hd-ink, #1f2024);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.home-dash .hd-lp-accordion-toggle:hover,
.home-dash .hd-lp-accordion-toggle:focus-visible {
	background: var(--hd-surface-3, #eaeaef);
	color: var(--hd-ink, #1f2024);
	outline: none;
}
.home-dash .hd-lp-accordion-toggle:not(.collapsed) {
	background: var(--hd-blue-soft, #eef3f8);
	color: var(--hd-blue);
	box-shadow: none;
}
.home-dash .hd-lp-accordion-toggle::after {
	margin-left: auto;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231f2024'%3e%3cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: center;
	transition: transform .2s ease;
}

/* ===========================================================================
   STEP-QUESTIONS PANEL — _question_select.html (right-column slot on
   step_builder.html). Two stacked .hd-panel cards: the primary
   .hd-stb-q-panel (always visible) and the secondary .hd-stb-q-extras
   (collapsed by default). The primary panel hosts an inline search,
   the question list (drag-to-reorder), and a kebab dropdown for
   create-question + reorder actions.
   =========================================================================== */

/* ---- Primary panel ---- */
/* Override .hd-panel's overflow: hidden so the kebab dropdown's submenu
   can fly out of the panel's right edge without being clipped. The
   head already has its own top-corner border-radius, so the rounded
   top corners still render correctly. The body gets explicit bottom
   corner radii + overflow-x: hidden so its right-angle corners don't
   poke past the panel's rounded bottom curve. */
.home-dash .hd-stb-q-panel-action,
.home-dash .hd-stb-q-overview-action,
.home-dash .hd-stb-q-update-action,
.home-dash .hd-stb-q-survey-update-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	color: var(--hd-white-a92);
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a18);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.home-dash .hd-stb-q-panel-action:hover,
.home-dash .hd-stb-q-panel-action:focus-visible,
.home-dash .hd-stb-q-overview-action:hover,
.home-dash .hd-stb-q-overview-action:focus-visible,
.home-dash .hd-stb-q-update-action:hover,
.home-dash .hd-stb-q-update-action:focus-visible {
	color: #fff;
	background: var(--hd-white-a18);
	border-color: var(--hd-white-a50);
	outline: none;
	text-decoration: none;
}

/* Kebab dropdown menu (Bootstrap dropdown chrome inside the panel head).
   The .invisible-when-empty rule already in main.css handles auto-hiding
   the trigger when the menu has no <li> children. */
/* Top-level kebab items reuse the .hd-kl-pick-item styling (see
   _kra_pick_include.html). The submenu inside _question_create_dropdown.html
   uses .hd-kl-pick-submenu — no extra styling needed here, the suite
   primitive already covers it. */

/* Body — bounded scrollable region. Bottom corners explicitly rounded
   to match the panel's outer radius (since .hd-stb-q-panel itself uses
   overflow: visible to let the kebab submenu escape). overflow-x: hidden
   clips the body's right-angle corners on the X axis; overflow-y: auto
   preserves vertical scrolling. */
.home-dash .hd-stb-q-panel-body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: .85rem;
	max-height: 70vh;
	overflow-x: hidden;
	overflow-y: auto;
	border-bottom-left-radius: calc(var(--hd-radius, 16px) - 1px);
	border-bottom-right-radius: calc(var(--hd-radius, 16px) - 1px);
}

/* ---- Inline search bar inside the panel body ---- */
.home-dash .hd-stb-q-search .hd-inline-search-input {
	padding-left: 2.15rem !important;
	border-radius: 999px !important;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	width: 100%;
	padding: .42rem .75rem .42rem 2.15rem;
	font-size: .85rem;
	color: var(--hd-ink);
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Search results dropdown — typeahead writes HTML here */
.home-dash .hd-stb-q-search-results {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	box-shadow: var(--hd-shadow-md, 0 4px 12px rgba(0,0,0,.08));
	max-height: 320px;
	overflow-y: auto;
	padding: .3rem;
}

/* ---- Question list (active wrapper) ---- */
/* The list is itself a flex column so .hd-kb-list-row siblings stack
   with the gap. The .sortable_list / .procedure_list legacy classes
   are kept on this element for Sortable.js binding. */

/* ---- Secondary "Additional Step Question Information" collapse panel ---- */
.home-dash .hd-stb-q-extras-body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: .85rem;
	max-height: 60vh;
	overflow-y: auto;
}

/* ---- Unused-questions sub-panel (inside the extras collapse) ---- */
.home-dash .hd-stb-q-unused-body {
	padding: .65rem .85rem;
	max-height: 32vh;
	overflow-y: auto;
}
.home-dash .hd-stb-q-unused-empty {
	padding: 1rem .75rem;
	text-align: center;
}
.home-dash .hd-stb-q-unused-empty .bi {
	font-size: 1.2rem;
	color: var(--hd-muted);
	margin-bottom: .35rem;
}

/* Chip layout — horizontal flex-wrap. Same approach as the
   .hd-iss-trial-unused-list pills. Each chip carries the item title
   with optional "currently being edited" flag icon. */
.home-dash .hd-stb-q-unused-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .6rem;
	font-size: .82rem;
	color: var(--hd-ink);
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 999px;
}
.home-dash .hd-stb-q-unused-chip--editing {
	background: rgba(217, 119, 6, .08);
	border-color: rgba(217, 119, 6, .25);
}
.home-dash .hd-stb-q-unused-chip-flag {
	flex: 0 0 auto;
	color: #d97706;
	font-size: .85rem;
	cursor: help;
}

/* ===========================================================================
   QUESTION MODALS — _question_modals.html
   ---------------------------------------------------------------------------
   Three modals: create, edit, image-target polygon picker. Create and
   edit are AJAX-loaded shells (.insert-data placeholder); imgModal is
   a full-fledged canvas-based polygon authoring tool.
   =========================================================================== */

/* The create / edit modals are AJAX shells — opt out of the bulletproof
   scroll since the loaded form may be short and the always-visible
   scrollbar is ugly. Same opt-out as for trialerror/edit-issue modals.
   Uses overflow-y:auto so long forms still scroll. */

/* ---- Image-target polygon-picker modal ---- */
/* The modal-body holds a flex grid with the canvas pair on one side
   and the tool sidebar on the other. Below md, the tools stack
   below the canvas. */
.hd-modal .hd-stb-q-imgmodal-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}
@media (min-width: 768px) {
	.hd-modal .hd-stb-q-imgmodal-grid {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

/* Canvas pair — both canvases stack at the same position so the
   topLayer (drawing surface) sits over the jPolygon (image
   underlay). The position context lives on .hd-stb-q-imgmodal-canvas;
   each canvas uses absolute positioning to overlap. */
.hd-modal .hd-stb-q-imgmodal-canvas {
	position: relative;
	width: 100%;
	min-height: 320px;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	overflow: hidden;
}
.hd-modal .hd-stb-q-imgmodal-toplayer {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	cursor: crosshair;
	max-width: 100%;
}
.hd-modal .hd-stb-q-imgmodal-jpolygon {
	position: relative;
	display: block;
	z-index: 1;
	max-width: 100%;
}

/* Tool sidebar — stacked sections: action buttons, help text,
   coordinates output. */
.hd-modal .hd-stb-q-imgmodal-help,
.hd-modal .hd-stb-q-levels-list ul li {
	font-size: .85rem;
	line-height: 1.5;
	color: var(--hd-ink);
}
.hd-modal .hd-stb-q-imgmodal-coords-area {
	min-height: 110px;
	resize: vertical;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .82rem;
}

/* ===========================================================================
   STEP QUESTION BUILDER — page chrome for step_question_builder.html
   ---------------------------------------------------------------------------
   Page wrapper, hero band with the 5-link breadcrumb, and the multi-
   column grid that hosts question_select on the left + the question
   editor/overview on the right.
   =========================================================================== */

/* Layout grid — 3-col at lg+ (left list panel + main editor + reserved
   right gutter). The right column is empty by template choice; the
   grid still allocates the space so the main column doesn't stretch
   to the full width. Survey-mode collapses to a single centered column. */
@media (min-width: 992px) {
	.home-dash .hd-stb-q-builder-grid--survey {
		grid-template-columns: minmax(0, 1fr);
		max-width: 720px;
		margin: 0 auto;
	}
}
@media (max-width: 991.98px) {
	.home-dash .hd-stb-q-builder-col--left { order: 2; }
	.home-dash .hd-stb-q-builder-col--main { order: 1; }
}

/* ===========================================================================
   SHARED HELPER — disabled state for hd-kl-pick-item (used in
   _step_question_overview.html when PERM_PROCEDURE is missing).
   =========================================================================== */
.home-dash .hd-kl-pick-item--disabled {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}
.home-dash .hd-kl-pick-item--disabled:hover,
.home-dash .hd-kl-pick-item--disabled:focus-visible {
	background: transparent;
	color: var(--hd-ink);
}

/* ===========================================================================
   STEP QUESTION OVERVIEW — _step_question_overview.html
   ---------------------------------------------------------------------------
   Read-only card showing the question text, correct answer summary,
   and metadata grid. Followed by a separate Choices card listing every
   answer with correct/incorrect indicator (suppressed for True/False
   questions where the answer summary already says it all).
   =========================================================================== */
.home-dash .hd-stb-q-overview-card {
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
	margin-bottom: 1rem;
}
.home-dash .hd-stb-q-overview-head,
.home-dash .hd-stb-q-choices-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .85rem;
	padding: .65rem .85rem;
	background: var(--hd-blue);
	color: #fff;
	flex-wrap: wrap;
}
.home-dash .hd-stb-q-overview-title,
.home-dash .hd-stb-q-update-title,
.home-dash .hd-stb-q-survey-update-title,
.home-dash .hd-stb-q-choices-title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .92rem;
	font-weight: 700;
	color: #fff;
}
.home-dash .hd-stb-q-overview-actions,
.home-dash .hd-stb-q-update-actions {
	display: inline-flex;
	flex: 0 0 auto;
}

/* Body */
.home-dash .hd-stb-q-overview-body {
	padding: 1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.home-dash .hd-stb-q-overview-field {
	display: grid;
	grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
	gap: .65rem;
	align-items: baseline;
}
.home-dash .hd-stb-q-overview-section-title {
	margin: .65rem 0 0;
	padding-bottom: .35rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--hd-ink);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-stb-q-overview-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .65rem .85rem;
}
.home-dash .hd-stb-q-overview-meta-value {
	font-size: .92rem;
	color: var(--hd-ink);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.home-dash .hd-stb-q-overview-help {
	display: inline-flex;
	color: var(--hd-blue);
	text-decoration: none;
	font-size: .92rem;
}
.home-dash .hd-stb-q-overview-help:hover,
.home-dash .hd-stb-q-update-help-trigger:hover { color: #1d4d80; }

/* Choices panel inside overview */
.home-dash .hd-stb-q-overview-choices-correct-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-white-a80);
}
.home-dash .hd-stb-q-overview-choices-body {
	gap: .35rem;
}
.home-dash .hd-stb-q-overview-choice-row {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) 3rem;
	gap: .65rem;
	align-items: center;
	padding: .5rem .65rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
}
.home-dash .hd-stb-q-overview-choice-index {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-weight: 700;
	font-size: .85rem;
	color: var(--hd-blue);
	text-align: center;
}
.home-dash .hd-stb-q-overview-choice-text {
	font-size: .92rem;
	color: var(--hd-ink);
	overflow-wrap: break-word;
	min-width: 0;
}
.home-dash .hd-stb-q-overview-choice-correct--yes {
	color: #16a34a;
	font-size: 1.1rem;
}

/* Per-answer image-modal in the overview */

/* ===========================================================================
   STEP QUESTION UPDATE — _step_question_update.html
   ---------------------------------------------------------------------------
   Edit form for a step-question. Header strip with options dropdown,
   then a context section (parent step's purpose/desired outcome/how),
   then the form fields, then the type-specific choices editor.
   =========================================================================== */
.home-dash .hd-stb-q-update-card,
.home-dash .hd-stb-q-survey-update-card,
.home-dash .hd-stb-q-choices-card {
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	overflow: hidden;
}
.home-dash .hd-stb-q-update-head,
.home-dash .hd-stb-q-survey-update-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .85rem;
	padding: .65rem .85rem;
	background: var(--hd-blue);
	color: #fff;
}
.home-dash .hd-stb-q-update-body,
.home-dash .hd-stb-q-survey-update-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem 1.15rem 1.15rem;
}

/* Context section: Current Step / Purpose / Desired Outcome / How */
.home-dash .hd-stb-q-update-context {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	padding: .85rem 1rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.home-dash .hd-stb-q-update-context-field {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
	gap: .65rem;
	align-items: baseline;
}
.home-dash .hd-stb-q-update-context-value {
	font-size: .92rem;
	color: var(--hd-ink);
	overflow-wrap: break-word;
}

/* Field section + grid */
@media (min-width: 768px) {
}

/* Inline help icons on field labels */
.home-dash .hd-stb-q-update-help,
.home-dash .hd-stb-q-survey-update-help,
.hd-modal .hd-su-modal-help {
	margin-left: .35rem;
	color: var(--hd-blue);
	font-size: .92rem;
	cursor: help;
}
.home-dash .hd-stb-q-update-help-trigger {
	display: inline-flex;
	margin-left: .35rem;
	color: var(--hd-blue);
	text-decoration: none;
	font-size: .92rem;
}

/* Toggle row — label + checkbox + optional help text */
.home-dash .hd-stb-q-survey-update-toggle {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: .85rem;
	align-items: center;
	padding: .55rem .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
}
.home-dash .hd-stb-q-survey-update-help-text {
	grid-column: 1 / -1;
	font-size: .78rem;
	color: var(--hd-muted);
}

/* Choices section break */

/* ===========================================================================
   STEP QUESTION SURVEY PAGE — step_survey_question.html
   ---------------------------------------------------------------------------
   Two-column page: steps list left, survey form right. Uses the same
   visual chrome as the regular update card but with a survey hero band.
   =========================================================================== */
.home-dash .hd-stb-q-survey-hero {
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.5rem;
	background:
		radial-gradient(800px 200px at 100% 0%, var(--hd-lime-a25), transparent 60%),
		linear-gradient(135deg, #000 0%, #1a2030 55%, var(--hd-blue) 100%);
	border-radius: var(--hd-radius, 16px);
	color: #fff;
	overflow: hidden;
	position: relative;
}
.home-dash .hd-stb-q-survey-hero-title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
}
.home-dash .hd-stb-q-survey-hero-title .bi {
	color: #d6f366;
	font-size: 1.15rem;
}

@media (min-width: 992px) {
	.home-dash .hd-stb-q-survey-grid,
	.home-dash .hd-inb-grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		align-items: start;
	}
}

/* Steps list panel (left column) */
.home-dash .hd-stb-q-survey-steps-body {
	padding: .65rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	max-height: 60vh;
	overflow-y: auto;
}
.home-dash .hd-stb-q-survey-step-row {
	display: grid;
	grid-template-columns: minmax(2.6rem, max-content) minmax(0, 1fr);
	gap: .55rem;
	align-items: baseline;
	padding: .35rem .55rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-left: 4px solid var(--hd-blue-soft, #c8d8e8);
	border-radius: var(--hd-radius-sm, 8px);
	cursor: default;
}
.home-dash .hd-stb-q-survey-step-seq {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .78rem;
	font-weight: 700;
	color: var(--hd-blue);
}
.home-dash .hd-stb-q-survey-step-title {
	font-size: .88rem;
	color: var(--hd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Survey update card — reuses the update-card chrome but with its own
   namespace for any future-divergence. */
@media (min-width: 768px) {
}

/* Survey choices + step-fields stack below the form card */
.home-dash .hd-stb-q-survey-choices-section,
.home-dash .hd-stb-q-survey-step-fields {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ===========================================================================
   CHOICE EDITORS — shared chrome for _multiple_choice / _true_false /
   _image_target / _matching / _ranking / _range / _number / _upload
   ---------------------------------------------------------------------------
   Single .hd-stb-q-choices-card primitive with a colored head + body.
   The head can carry column labels (Correct / Delete) on the right
   side via .hd-stb-q-{type}-head-cols. Each editor type has its own
   row layout inside the body via .hd-stb-q-{type}-row.
   =========================================================================== */
.home-dash .hd-stb-q-choices-body {
	padding: .85rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

/* ---- Multiple Choice / All That Apply ---- */
.home-dash .hd-stb-q-mc-head-cols {
	display: inline-flex;
	gap: 1.25rem;
	flex: 0 0 auto;
}
.home-dash .hd-stb-q-mc-col-label,
.home-dash .hd-stb-q-img-col-label,
.home-dash .hd-stb-q-match-col-label,
.home-dash .hd-stb-q-rank-col-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-white-a80);
	min-width: 2.5rem;
	text-align: center;
}
.home-dash .hd-stb-q-mc-row {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr) 2.5rem 2.5rem;
	gap: .65rem;
	align-items: center;
	padding: .35rem .5rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
}
.home-dash .hd-stb-q-mc-card--survey .hd-stb-q-mc-row {
	grid-template-columns: 1.5rem minmax(0, 1fr) 2.5rem;
}
.home-dash .hd-stb-q-mc-grip {
	color: var(--hd-muted);
	cursor: grab;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.home-dash .hd-stb-q-mc-text input,
.home-dash .hd-stb-q-mc-text textarea,
.home-dash .hd-stb-q-img-row-answer input,
.home-dash .hd-stb-q-img-row-answer textarea,
.home-dash .hd-stb-q-match-row-fields input,
.home-dash .hd-stb-q-match-row-fields textarea,
.home-dash .hd-stb-q-rank-row-answer input,
.home-dash .hd-stb-q-rank-row-answer textarea,
.home-dash .hd-stb-q-range-row input,
.home-dash .hd-stb-q-num-row input,
.home-dash .hd-stb-q-num-row textarea,
.home-dash .hd-stb-q-upload-row input,
.home-dash .hd-stb-q-upload-row textarea {
	width: 100%;
	padding: .35rem .55rem;
	font-size: .9rem;
	border: 1px solid var(--hd-line);
	border-radius: 6px;
	background: var(--hd-surface, #fff);
}

/* ---- True/False ---- */
.home-dash .hd-stb-q-tf-row,
.home-dash .hd-ob-overview-body {
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
/* True/False answer-key radios: Django renders the RadioSelect as an
   outer <div> containing one <div> per option, stacking vertically by
   default. Flip the inner wrapper to flex so True / False sit side by
   side. Each option's <input>+label gets the inline-flex treatment via
   the shared inline-flex-with-gap selector list above. */
.home-dash .hd-stb-q-tf-options > div {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.home-dash .hd-stb-q-tf-row .hd-field-input,
.home-dash .hd-stb-q-tf-row select,
.home-dash .hd-stb-q-tf-row input {
	width: 100%;
	padding: .42rem .65rem;
	font-size: .92rem;
	border: 1px solid var(--hd-line);
	border-radius: 6px;
	background: var(--hd-surface, #fff);
}

/* ---- Image Target ---- */
.home-dash .hd-stb-q-img-head-cols,
.home-dash .hd-stb-q-match-head-cols,
.home-dash .hd-stb-q-rank-head-cols {
	display: inline-flex;
	gap: 1.25rem;
}
.home-dash .hd-stb-q-img-row {
	display: grid;
	grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr) 2.5rem 2.5rem;
	gap: .65rem;
	align-items: center;
	padding: .35rem .5rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
}
.home-dash .hd-stb-q-img-row-grip,
.home-dash .hd-stb-q-rank-row-grip {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--hd-muted);
	cursor: grab;
}
.home-dash .hd-stb-q-img-row-index,
.home-dash .hd-stb-q-match-row-index,
.home-dash .hd-stb-q-rank-row-index {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .82rem;
	font-weight: 700;
	color: var(--hd-blue);
}

/* ---- Matching ---- */
.home-dash .hd-stb-q-match-row {
	display: grid;
	grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr) 2.5rem;
	gap: .65rem;
	align-items: start;
	padding: .5rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
}
.home-dash .hd-stb-q-match-row-grip {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--hd-muted);
	cursor: grab;
	padding-top: .25rem;
}
.home-dash .hd-stb-q-match-row-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: .25rem;
}

/* Matching preview region */
.home-dash .hd-stb-q-match-preview {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--hd-surface-2);
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.home-dash .hd-stb-q-match-preview-head,
.home-dash .hd-inb-meta-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-stb-q-match-preview-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .85rem;
}
.home-dash .hd-stb-q-match-preview-item {
	padding: .45rem .65rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
	font-size: .88rem;
	color: var(--hd-ink);
	cursor: pointer;
	overflow-wrap: break-word;
}
.home-dash .hd-stb-q-match-preview-item--fixed {
	cursor: default;
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue-a25);
}

/* ---- Ranking ---- */
.home-dash .hd-stb-q-rank-row {
	display: grid;
	grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr) 2.5rem;
	gap: .65rem;
	align-items: center;
	padding: .35rem .5rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
}

/* ---- Range ---- */
.home-dash .hd-stb-q-range-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .65rem;
	padding: .55rem .65rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
}

/* ---- Number ---- */
.home-dash .hd-stb-q-num-row,
.home-dash .hd-stb-q-upload-row {
	padding: .55rem .65rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: 6px;
}

/* ---- Upload ---- */

/* ===========================================================================
   KM LEVELS REFERENCE MODAL — _kmlevels_modal.html
   =========================================================================== */
.hd-modal.hd-stb-q-levels-modal .modal-body {
	max-height: 70vh !important;
	overflow-y: auto !important;
}
.hd-modal .hd-stb-q-levels-list {
	margin: 0;
	padding: 0 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	color: var(--hd-ink);
}
.hd-modal .hd-stb-q-levels-list > li > strong {
	display: block;
	font-size: .95rem;
	color: var(--hd-blue);
	margin-bottom: .25rem;
}
.hd-modal .hd-stb-q-levels-list ul {
	margin: .15rem 0 0;
	padding-left: 1rem;
	list-style: disc;
}

/* ===========================================================================
   STEP QUESTION REMOVE MODAL — page-shell + AJAX-injected contents
   =========================================================================== */

/* ===========================================================================
   EDIT STEP MODAL — _edit_step_modal.html
   ---------------------------------------------------------------------------
   Substantial form modal (Title + Type/Dimension + Owner/View + 3 textareas).
   Uses the suite's default bulletproof-scroll on .modal-body (no opt-out
   marker) since the form is tall enough to warrant internal scrolling.
   The hd-su-modal-* namespace pairs with the read-only hd-su-* panel
   (step display in the middle column of step_builder).
   =========================================================================== */
.home-dash .hd-su-modal { /* marker — no rules needed; opts INTO the suite default scroll */ }

/* Form takes full modal-content width. Display: contents would also
   work, but a real flex column container makes it easier to control
   gap/padding consistently across the body and footer. */


/* Two-column field row at md+ (Step Type + Dimension; Owner + View).
   Single column on narrow viewports. */
@media (min-width: 768px) {
}

/* Inline help-icon next to a field label. Same convention as
   .hd-stb-q-update-help (cursor:help, blue accent). */

/* --------------------------------------------------------------
   REPORTING TREE — org-chart layout (read-only, lazy-loaded)
   Used by user_tree.html + _user_tree_node.html. Boxes connect via
   CSS pseudo-element lines; lazy-loaded children reveal on chevron
   click. Chevron icon rotates 180deg via [aria-expanded] selector.
   -------------------------------------------------------------- */
.home-dash .hd-rt-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.home-dash .hd-rt-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}
.home-dash .hd-rt-hero-actions {
	margin-left: auto;
	display: inline-flex;
	gap: .5rem;
}

/* Ghost buttons sitting on the navy hero gradient need the same white-on-dark
   treatment used by .hd-kra-hero — base .hd-btn-ghost is dark-on-light and
   would render invisible on the hero. */
.home-dash .hd-rt-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	color: var(--hd-muted);
	background: var(--hd-surface, #fff);
	border-radius: var(--hd-radius, 16px);
	border: 1px dashed var(--hd-line);
	font-size: .95rem;
}
.home-dash .hd-rt-empty .bi {
	display: block;
	font-size: 2rem;
	margin-bottom: .75rem;
	color: var(--hd-blue);
}

/* Outer scroll wrapper — orgchart can grow wider than viewport */
.home-dash .hd-orgchart-wrapper {
	overflow-x: auto;
	padding: 1.75rem 1rem 1rem;
	background: var(--hd-surface, #fff);
	border-radius: var(--hd-radius, 16px);
	border: 1px solid var(--hd-line);
}

/* Top-level UL: single flex row centered horizontally */
.home-dash .hd-orgchart {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: max-content;
}

/* Each node = column stack: box on top, children row below */
.home-dash .hd-orgchart-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 .75rem;
	position: relative;
}

/* Children container is a horizontal row (recursive) */
.home-dash .hd-orgchart-children {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	position: relative;
	min-width: max-content;
}

/* Vertical line dropping from parent box to the children row's bar */
.home-dash .hd-orgchart-children::before {
	content: '';
	position: absolute;
	top: -1.25rem;
	left: 50%;
	width: 1px;
	height: 1.25rem;
	background: var(--hd-line, #e8e8ec);
}

/* Vertical line going up from each child box to the horizontal bar */
.home-dash .hd-orgchart-children > .hd-orgchart-item::before {
	content: '';
	position: absolute;
	top: -.75rem;
	left: 50%;
	width: 1px;
	height: .75rem;
	background: var(--hd-line, #e8e8ec);
}

/* Horizontal bar across siblings — half-painted on end-caps so the
   line terminates flush with the outer box centerlines */
.home-dash .hd-orgchart-children > .hd-orgchart-item::after {
	content: '';
	position: absolute;
	top: -.75rem;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hd-line, #e8e8ec);
}
.home-dash .hd-orgchart-children > .hd-orgchart-item:first-child::after {
	left: 50%;
}
.home-dash .hd-orgchart-children > .hd-orgchart-item:last-child::after {
	right: 50%;
}

/* The node box — gradient blue, white text, suite radius. Box grows to
   fit content (name + actions + chevron) on a single line; min-width
   keeps very short names from collapsing to a sliver. */
.home-dash .hd-orgchart-node {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: 9rem;
	padding: .55rem .85rem;
	background: linear-gradient(135deg, var(--hd-blue) 0%, #1a2030 100%);
	color: #fff;
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.home-dash .hd-orgchart-node--inactive {
	opacity: .55;
	filter: grayscale(.4);
}

.home-dash .hd-orgchart-name {
	flex: 1 1 auto;
	color: #fff;
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}
.home-dash .hd-orgchart-name:hover,
.home-dash .hd-orgchart-name:focus-visible {
	color: #fff;
	text-decoration: underline;
	outline: none;
}
.home-dash .hd-orgchart-name--ghost {
	font-style: italic;
	opacity: .85;
}

/* Chevron toggle inside the box (white-on-dark per panel-head pattern) */
.home-dash .hd-orgchart-toggle,
.home-dash .hd-orgchart-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px; height: 22px;
	padding: 0;
	background: var(--hd-white-a12);
	border: 1px solid var(--hd-white-a25);
	border-radius: 50%;
	color: var(--hd-white-a92);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.home-dash .hd-orgchart-toggle:hover,
.home-dash .hd-orgchart-toggle:focus-visible,
.home-dash .hd-orgchart-action:hover,
.home-dash .hd-orgchart-action:focus-visible {
	background: var(--hd-white-a25);
	border-color: var(--hd-white-a50);
	color: #fff;
	outline: none;
}
.home-dash .hd-orgchart-toggle .bi {
	font-size: .82rem;
	transition: transform .2s ease;
}

/* Hover-reveal mini-actions (used by Group Select page for + and pencil
   buttons that open the create-subgroup / rename-group modals). Inline
   in the box's flex row between the name and chevron — they always
   occupy layout space so the box width is stable, but stay invisible
   and unclickable until hover / keyboard focus. */
.home-dash .hd-orgchart-actions {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;
}
.home-dash .hd-orgchart-node:hover .hd-orgchart-actions,
.home-dash .hd-orgchart-actions:focus-within {
	opacity: 1;
	pointer-events: auto;
}
.home-dash .hd-orgchart-action .bi {
	font-size: .82rem;
	line-height: 1;
}

/* Body wrapper for the Group Select page — sits inside group_base.html's
   .hd-grp body, so it just needs vertical rhythm with the back-link. */
.home-dash .hd-grp-modal-target {
	font-style: italic;
	font-weight: 500;
}

/* Participant picker — used by _update_users_form.html across list create/
   update / plan / edit modals. Two-column UI: group members list on the left,
   AJAX search + invitee list on the right. JS hooks defined in
   _update_users_form.js operate on .hd-pp-* classes. */
.hd-participant-picker .hd-pp-members-body,
.hd-participant-picker .hd-pp-invitees {
	max-height: 220px;
	overflow-y: auto;
}
.hd-participant-picker .hd-pp-member {
	cursor: pointer;
	padding: .25rem .5rem;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: .4rem;
	user-select: none;
}
.hd-participant-picker .hd-pp-member:hover:not(.is-selected) {
	background: rgba(0, 0, 0, .04);
}
.hd-participant-picker .hd-pp-member.is-selected {
	opacity: .4;
	cursor: default;
}
.hd-participant-picker .hd-pp-invitee {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .25rem .5rem;
	gap: .5rem;
}
.hd-participant-picker .hd-pp-invitee + .hd-pp-invitee {
	border-top: 1px solid rgba(0, 0, 0, .06);
}
.hd-participant-picker .hd-pp-invitee-remove {
	background: transparent;
	border: 0;
	color: var(--hd-muted);
	padding: 0 .25rem;
	font-size: 1rem;
	line-height: 1;
}
.hd-participant-picker .hd-pp-invitee-remove:hover {
	color: #c33;
}

/* List app — hero + breadcrumb pattern, mirrors hd-stb-* (step builder
   reference). Used by list_builder, list_create, list_update, list_clean,
   list_display, list_export_csv/email, list_plan_form, and the 5 list-import
   pages (kra/task/procedure/foundation/step). */
.home-dash .hd-lst-hero .hd-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	flex: 0 1 auto;
}
/* Inline note shown in place of a suppressed hero action button (e.g.
   "Unfinalize Grouping before re-opening" on the brainstorm summary
   when a downstream phase is finalized). Translucent white text on the
   navy gradient; inline links underline to read as actionable. */
.home-dash .hd-lst-hero .hd-hero-note {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .65rem;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a25);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-white-a80);
	font-size: .85rem;
}
.home-dash .hd-lst-hero .hd-hero-note a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.home-dash .hd-lst-hero .hd-hero-note a:hover {
	color: #fff;
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------
   LIST BUILDER — structural grid + panel-head primitives that
   mirror the TaskBuilder (.hd-tb-*) shell so the two pages read
   visually identical at the top level. CSS Grid (3fr 6fr 3fr at
   lg+) replaces the legacy Bootstrap row/col layout the older
   list_builder.html shipped with.
   -------------------------------------------------------------- */
@media (min-width: 992px) {
}

/* ---- Sidebar list-of-lists panel (was .hd-lb-select) ---- */
.home-dash .hd-lst-list-body {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	padding: .65rem .75rem .75rem;
	min-height: 0;
}/* List-select rows in the left sidebar adopt the same row chrome as
   the brainstorm Items panel (.hd-lst-items-body .hd-kb-list-row):
   white surface, 1px border, .55rem .75rem padding, .9rem text.
   min-height locks the row height so shared-list rows (which have no
   edit/delete actions to reserve space) don't render shorter than
   my-list rows (which carry hidden 32x32 .hd-kb-iconbtn buttons).
   .is-active uses inset box-shadow for the 3px blue accent stripe —
   matches .hd-kb-list-row.is-selected so both row types share the
   same visual treatment. */
.home-dash .hd-lst-list-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 3.25rem;
	padding: .55rem .75rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.home-dash .hd-lst-list-row .hd-lst-list-link {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--hd-ink);
	text-decoration: none;
	font-size: .9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-lst-list-row-actions {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity .15s ease;
}

/* ---- Center column overview panel ---- */
.home-dash .hd-lst-overview-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding: 1rem 1.15rem;
}
@media (min-width: 768px) {
	.home-dash .hd-lst-overview-body {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}
}
.home-dash .hd-lst-overview-prose .hd-field-label {
	margin-bottom: .25rem;
	margin-top: .35rem;
}
.home-dash .hd-lst-overview-prose-text {
	color: var(--hd-ink);
	font-size: .92rem;
	line-height: 1.5;
	margin-bottom: .65rem;
}
.home-dash .hd-lst-overview-meta {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .88rem;
}
.home-dash .hd-lst-overview-meta-item {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	color: var(--hd-ink);
}
.home-dash .hd-lst-overview-meta-label {
	color: var(--hd-muted);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	flex: 0 0 auto;
}
.home-dash .hd-lst-overview-meta-value {
	font-weight: 500;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-lst-overview-cleaned {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .25rem;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: rgba(40, 167, 69, .12);
	color: #1f6f3a;
	font-size: .75rem;
	font-weight: 700;
}

/* ---- Right column plan panel ---- */
.home-dash .hd-lst-plan-body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .65rem .75rem .75rem;
}
.home-dash .hd-lst-plan-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 3.25rem;
	padding: .55rem .65rem;
	border: 1px solid var(--hd-line);
	border-left: 3px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	background: var(--hd-surface-2);
}
.home-dash .hd-lst-plan-row.is-active {
	border-left-color: var(--hd-blue);
	background: var(--hd-blue-soft, #eaf1f8);
}
.home-dash .hd-lst-plan-row.is-done {
	border-left-color: #28a745;
	background: rgba(40, 167, 69, .08);
}
.home-dash .hd-lst-plan-row.is-empty {
	background: transparent;
	opacity: .55;
}
.home-dash .hd-lst-plan-row.is-clickable {
	cursor: pointer;
	transition: background .12s ease, transform .12s ease;
}
.home-dash .hd-lst-plan-row > .stretched-link,
#new-category-list.hd-lst-grouping-newcat-target {
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Status pill pushed to the right end of the row so it sits flush with
   the Cleanup icon button rather than floating in the middle with
   justify-content: space-between leaving a wide gap. */
/* Facilitator-only Cleanup link surfaced on each plan-row whenever the
   phase has produced data (status in active / closed / done). Sits to
   the right of the status pill, above the stretched-link so the editor
   can reach the cleanup surface even when the row is otherwise
   clicking through to the participant room. */
.home-dash .hd-lst-plan-row > .hd-lst-plan-cleanup {
	position: relative;
	z-index: 2;
	width: 1.85rem;
	height: 1.85rem;
	font-size: .85rem;
	flex: 0 0 auto;
}

/* ---- Plan participants manager (list_plan_form.html) ----
   Per-phase section embedded inside each accordion-body when editing
   a plan. A search picker on top, a stacked roster below. Started
   participants get a green pill (no remove button); not-yet-started
   participants get a small × icon button. */
.home-dash .hd-lst-plan-participants {
	margin-top: 1rem;
	padding-top: .85rem;
	border-top: 1px solid var(--hd-line);
}
.home-dash .hd-lst-plan-participants-add {
	position: relative;
	margin-bottom: .65rem;
}
.home-dash .hd-lst-plan-participants-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	max-height: 220px;
	overflow-y: auto;
	margin-top: 4px;
}
.home-dash .hd-lst-plan-participant-search-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .65rem;
	cursor: pointer;
	transition: background .12s ease;
	color: var(--hd-ink, #1f2024);
	font-size: .9rem;
}
.home-dash .hd-lst-plan-participant-search-row:hover {
	background: var(--hd-blue-soft, #eef3f8);
}
.home-dash .hd-lst-plan-participant-search-empty {
	padding: .65rem;
	color: var(--hd-muted);
	font-size: .85rem;
	font-style: italic;
}
.home-dash .hd-lst-plan-participant-row {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .45rem .6rem;
	background: var(--hd-surface-2);
	border-radius: var(--hd-radius-sm, 8px);
}
.home-dash .hd-lst-plan-participant-row.is-started {
	background: rgba(40, 167, 69, .08);
}
.home-dash .hd-lst-plan-participant-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.home-dash .hd-lst-plan-participant-name {
	flex: 1 1 auto;
	font-size: .9rem;
	color: var(--hd-ink, #1f2024);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-lst-plan-participant-started {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(40, 167, 69, .14);
	color: #1f6f3a;
	flex: 0 0 auto;
}
.home-dash .hd-lst-plan-participant-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--hd-line);
	border-radius: 50%;
	color: var(--hd-muted);
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
	flex: 0 0 auto;
}
.home-dash .hd-lst-plan-participant-remove:hover,
.home-dash .hd-lst-plan-participant-remove:focus-visible {
	background: rgba(220, 53, 69, .12);
	border-color: #dc3545;
	color: #dc3545;
	outline: none;
}
.home-dash .hd-lst-plan-participant-empty {
	padding: .75rem;
	text-align: center;
	color: var(--hd-muted);
	font-size: .85rem;
	font-style: italic;
}
.home-dash .hd-lst-plan-row.is-clickable:hover,
.home-dash .hd-lst-plan-row.is-clickable:focus-within {
	background: var(--hd-blue-soft-strong, #dbe7f2);
}
.home-dash .hd-lst-plan-row.is-clickable .hd-lst-plan-status--active .bi {
	transition: transform .12s ease;
}
.home-dash .hd-lst-plan-row.is-clickable:hover .hd-lst-plan-status--active .bi,
.home-dash .hd-lst-plan-row.is-clickable:focus-within .hd-lst-plan-status--active .bi {
	transform: translateX(2px);
}
.home-dash .hd-lst-plan-row-title {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 700;
	font-size: .88rem;
	color: var(--hd-ink);
}
.home-dash .hd-lst-plan-row-subtitle {
	font-size: .76rem;
	color: var(--hd-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.home-dash .hd-lst-plan-status {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	flex: 0 0 auto;
	white-space: nowrap;
}
.home-dash .hd-lst-plan-status--done {
	background: rgba(40, 167, 69, .14);
	color: #1f6f3a;
}
.home-dash .hd-lst-plan-status--active {
	background: var(--hd-blue-soft, #eaf1f8);
	color: var(--hd-blue);
}
.home-dash .hd-lst-plan-status--closed {
	background: rgba(217, 119, 6, .12);
	color: #92400e;
}
.home-dash .hd-lst-plan-status--empty {
	background: transparent;
	color: var(--hd-muted);
	border: 1px dashed var(--hd-line);
	font-weight: 500;
}
.home-dash .hd-lst-plan-empty {
	padding: 1.5rem .75rem;
	text-align: center;
	color: var(--hd-muted);
	font-size: .85rem;
}

/* ---- Items preview panel (rendered list of items) ---- */
.home-dash .hd-lst-items-list-empty {
	padding: 1rem 0;
	color: var(--hd-muted);
	font-size: .85rem;
	font-style: italic;
}
/* Read-only Items panel rows (list_builder.html via list_read_only.html
   and list_display.html). The base .hd-kb-list-row primitive has no
   padding — content gives it height — and reserves a 4px transparent
   border-left as the .is-selected accent slot. For these read-only
   text rows that yields a pill-tight look (text touching the edge,
   visible left-side gap), so paint over the slot with a normal 1px
   line and add the same .55rem .75rem padding + .9rem font-size that
   grouping-item rows use, keeping all suite list rows visually
   consistent. .hd-kb-iconbtn floats right via margin-left:auto for
   list_display.html's info-icon variant. */
.home-dash .hd-lst-items-body .hd-kb-list-row {
	padding: .55rem .75rem;
	font-size: .9rem;
	color: var(--hd-ink, #1f2024);
	align-items: center;
	border-left: 1px solid var(--hd-line);
}

/* ---- Grouping Cleanup board (list_grouping_summary.html) ----
   Editor surface for the per-plan LIST_GROUPING_FINAL container.
   Items render as ordinary .hd-kb-list-row primitives so chrome and
   min-height match every other item-row surface in the suite. Drag
   handle on the left; inline name input inside each cluster head;
   .hd-gc-placeholder is the dashed slot shown while dragging. The
   Unassigned and per-cluster <ul> lists reserve a minimum drop-zone
   height so an empty list still accepts a drag. */
.home-dash .hd-gc-grip {
	color: var(--hd-muted, #8a8a92);
	cursor: grab;
	font-size: 1rem;
}
.home-dash .hd-gc-cluster,
.home-dash .hd-gc-unassigned {
	min-height: 3.25rem;
}
.home-dash .hd-gc-placeholder {
	background: var(--hd-blue-soft, #eaf1f8);
	border: 1px dashed var(--hd-blue) !important;
	border-radius: var(--hd-radius-sm, 8px);
	min-height: 3.25rem;
}
.home-dash .hd-gc-cluster-head {
	gap: .5rem;
}
.home-dash .hd-gc-cluster-name {
	flex: 1 1 auto;
	background: var(--hd-white-a92);
	border: 1px solid var(--hd-white-a25);
	color: var(--hd-ink, #1f2024);
	font-weight: 600;
}
.home-dash .hd-gc-cluster-name:focus {
	outline: 2px solid var(--hd-blue);
	outline-offset: 1px;
}
.home-dash .hd-gc-clusters-empty,
.home-dash .hd-gc-unassigned-empty {
	padding: 1rem .25rem 0;
}

/* ---- Brainstorm response card (list_responses.html) ----
   Avatar pillar + body (response text + meta) + hover-revealed action
   cluster. .is-self tints the row to mark the viewer's own messages. */
.home-dash .hd-lst-response {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem .75rem;
	margin-bottom: .5rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	transition: border-color .15s ease, background .15s ease;
}
.home-dash .hd-lst-response.is-self {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue-a25);
}.home-dash .hd-lst-response-body .response_body {
	font-weight: 400;
	font-size: .9rem;
	color: var(--hd-ink);
	line-height: 1.4;
	overflow-wrap: break-word;
}
.home-dash .hd-lst-response-actions {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	opacity: 0;
	transition: opacity .15s ease;
}
/* Shrink edit/delete icons in the response row to match the compact
   row height (response text is .9rem with no meta line below — the
   canonical 32x32 .hd-kb-iconbtn felt oversized in that context). */
.home-dash .hd-lst-response-actions .hd-kb-iconbtn {
	width: 24px;
	height: 24px;
}
/* On touch / small viewports there's no hover, so always show actions. */
@media (max-width: 991.98px) {
	.home-dash .hd-lst-response-actions {
		opacity: 1;
	}
}

/* ---- Brainstorm summary merge UI (list_brainstorm_summary.html) ----
   Drag-and-drop cleanup chrome for the editor's pre-finalize workflow:
   drop one response onto another to alias it. Rows render in a parent/
   child hierarchy via .hd-bs-canonical-group (one per canonical) +
   .hd-bs-alias (indented children). .hd-bs-droppable + .is-merge-hover
   light up the drop target while a draggable is hovering. */
.home-dash .hd-bs-droppable.is-merge-hover {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue);
	box-shadow: 0 0 0 2px var(--hd-blue-a25);
}

/* ---- Participant roster (respondent_list.html) ----
   Avatar pillar + identity (name + role) + optional finished-status
   icon. .is-inactive mutes the row for users who left/were removed. */
.home-dash .hd-lst-respondent {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .5rem .65rem;
	margin-bottom: .5rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	font-weight: 600;
	color: var(--hd-ink);
	transition: opacity .15s ease, filter .15s ease;
}
.home-dash .hd-lst-respondent.is-inactive {
	opacity: .55;
	filter: grayscale(.4);
	font-weight: 400;
	color: var(--hd-muted);
}
.home-dash .hd-lst-respondent-avatar .hd-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}
.home-dash .hd-lst-respondent-name {
	font-size: .92rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}
.home-dash .hd-lst-respondent-status {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.home-dash .hd-lst-respondent-status .bi {
	color: #1f6f3a;
	font-size: 1.1rem;
}
.home-dash .hd-lst-respondent-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: .25rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--hd-line);
	border-radius: 50%;
	color: var(--hd-muted);
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
	flex: 0 0 auto;
}
.home-dash .hd-lst-respondent-reset:hover,
.home-dash .hd-lst-respondent-reset:focus-visible {
	background: var(--hd-blue-soft, #eef3f8);
	border-color: var(--hd-blue);
	color: var(--hd-blue);
	outline: none;
}

/* ===========================================================================
   BRAINSTORM ROOM PAGE — single class .hd-lst-brainstorm-page on the
   <section> wrapper of list_brainstorm.html owns the page-level layout
   rules previously parked in static/styles/list_brainstorm.css. The
   :has selector lifts the page-scroll lock up to html/body without
   needing an extra body class — visualViewport math in
   list_brainstorm.js relies on a stable outer viewport, so allowing
   the page itself to scroll lets the keyboard-aware shrink kick the
   submit form off-screen on mobile.
   =========================================================================== */
html:has(.hd-lst-brainstorm-page),
body:has(.hd-lst-brainstorm-page) {
	overscroll-behavior: none !important;
	max-height: 100% !important;
	overflow: hidden !important;
}

/* Desktop response card — flex column from the card root through the
   body to the stream, so the inner stream owns the overflow and the
   form-bar sits at the bottom in normal flow. min-height: 0 at each
   nested flex level lets overflow: auto on the stream actually
   trigger; without it the flex item's intrinsic min-size matches its
   content and the body bleeds past the card edge. */
.hd-lst-brainstorm-page #response-card-stream,
.hd-lst-brainstorm-page #mobile-response-div {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.hd-lst-brainstorm-page .hd-lst-response-form-bar {
	flex: 0 0 auto;
	margin: 0;
	padding: .55rem .75rem;
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface, #fff);
}

/* Mobile response panel — flex-grow on the stream div so it claims
   the leftover space inside the JS-sized #mobile-response-body.
   Without it, the stream sizes to content height and overflows past
   the form (its flex sibling) on long lists, which clipped the
   submit input on small screens. */

/* ---- Grouping room "New Group" placeholder drop target ----
   The plus-icon + "New Group" label is the visual; the empty
   <ul#new-category-list> overlays the placeholder card so jQuery UI
   sortable can use it as a drop target. The legacy d-none on the ul
   meant display:none which made it invisible to sortable, so dragging
   onto the card never triggered the receive event. The placeholder
   already has cursor-pointer and a JS click handler bound to
   #new-category — the inline onclick that used to live on this div
   was removed because it duplicated the JS handler and fired both
   listeners on every click, creating two groups. */

/* ---- Grouping room: per-user group cards ----
   Both the server-rendered .category cards (existing groups) and the
   JS-built ones (new groups) use .hd-panel + .hd-panel-head +
   .hd-panel-body. The category-list <ul> is the sortable drop zone;
   give it a visible min-height + dashed inset border via :empty so an
   empty group still reads as a drop area. Once items land in it the
   :empty rule stops matching and the dashed hint goes away. */
#category-container .category-list {
	min-height: 6rem;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	list-style: none;
	overflow-x: hidden;
	overflow-y: auto;
}
#category-container .category-list:empty {
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	display: block;
	position: relative;
}
#category-container .category-list:empty::before {
	content: "Drop items here";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hd-muted);
	font-size: .8rem;
	font-style: italic;
	pointer-events: none;
}

/* The group panel-head houses the editable Group Title input + a
   close button. Force the same 4rem min-height + padding as a
   regular .hd-panel-head so a JS-built group's header isn't shorter
   than the static-rendered ones. !important is needed because some
   tighter rule elsewhere was beating the .hd-panel-head min-height
   in this nested context. */
#category-container .category .hd-panel-head {
	min-height: 4rem !important;
	padding: 1rem 1.15rem;
}

/* The group title is a real text-input (required), but on the dark
   panel-head we want it to read as a writeable field, not a
   placeholder-only label. Soft white-translucent fill + a 1px white
   border tells the user "edit me here"; on focus we tighten the
   border to full white for clear focus feedback. */
.hd-lst-grouping-name-input {
	background: var(--hd-white-a12);
	border: 1px solid var(--hd-white-a35);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	padding: .35rem .6rem;
	border-radius: 6px;
	outline: none;
	transition: background .15s ease, border-color .15s ease;
}
.hd-lst-grouping-name-input:hover {
	background: var(--hd-white-a18);
}
.hd-lst-grouping-name-input:focus {
	background: var(--hd-white-a25);
	border-color: var(--hd-white-a80);
}
.hd-lst-grouping-name-input::placeholder {
	color: var(--hd-white-a65);
	font-weight: 500;
}

/* The close button on group cards uses .hd-modal-close in the
   markup, but the suite's .hd-modal-close rule is scoped to inside
   .hd-modal — so without this re-bind the X falls back to default
   browser button chrome. Mirror the modal styling here so the group
   X reads identical to the modal close in dark headers (white-tint
   pill, rotates on hover). */
#category-container .category .hd-panel-head .hd-modal-close {
	position: relative;
	margin-left: auto;
	flex-shrink: 0;
	background: var(--hd-white-a06);
	border: 1px solid var(--hd-white-a12);
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

/* ---- Group-naming custom dropdown (list_group_naming.html) ----
   Native <select> options can't be styled past background/color/font,
   so the naming view's per-cluster pick uses a Bootstrap dropdown
   widget here. The toggle button keeps the .hd-field-input chrome
   so the closed state matches form-field rhythm; the open menu's
   items are painted to look like the .hd-kb-list-row.grouping-item
   rows that appear below (same border, radius, padding, font-size)
   so the dropdown reads as "more rows of this cluster's candidates."
   A hidden input sibling carries the form value so the POST contract
   (group-<rep_id>=<chosen_name_id>) is unchanged. JS in
   list_group_naming.html wires the click handler. */
.home-dash .hd-lst-naming-toggle {
	text-align: left;
	font-weight: 600;
	cursor: pointer;
}
.home-dash .hd-lst-naming-toggle .hd-lst-naming-toggle-text {
	display: inline-block;
	pointer-events: none;
}
.home-dash .hd-lst-naming-menu {
	padding: .35rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	min-width: 100%;
}
.home-dash .hd-lst-naming-option {
	display: block;
	padding: .55rem .75rem;
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	color: var(--hd-ink, #1f2024);
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease;
}
.home-dash .hd-lst-naming-option:hover,
.home-dash .hd-lst-naming-option:focus {
	background: var(--hd-blue-soft, #eef3f8);
	border-color: var(--hd-blue);
	color: var(--hd-ink, #1f2024);
	text-decoration: none;
}
.home-dash .hd-lst-naming-option.is-selected {
	background: var(--hd-blue-soft, #eef3f8);
	border-color: var(--hd-blue);
	font-weight: 600;
}

/* ---- Grouping room: item rows (Task Builder feel) ----
   The base .hd-kb-list-row has no padding — content gives it height.
   Grouping items render <span>{{ text }}</span> inside, which would
   otherwise make rows look pill-tight. Add Task Builder–style padding
   so items read as proper draggable rows in BOTH the source #list
   panel and inside the group .category-list panels. cursor: grab is
   the visual cue that they're draggable.
   The base also reserves a 4px transparent border-left as a slot for
   the .is-selected accent stripe — that slot reads as a missing
   border in the unselected grouping state, so override it back to a
   normal 1px line that matches the other three edges. */
/* Visual chrome — applies wherever .grouping-item lands (active
   grouping room, post-submit summary, naming view). Forces full-
   width inside any flex-column parent so the LI doesn't collapse
   to content-width as a tight pill. */
.home-dash .hd-kb-list-row.grouping-item {
	padding: .55rem .75rem;
	font-size: .9rem;
	color: var(--hd-ink, #1f2024);
	align-items: center;
	border-left: 1px solid var(--hd-line);
	width: 100%;
	box-sizing: border-box;
	align-self: stretch;
	flex: 0 0 auto;
}
/* Drag affordances only inside the live grouping room (where
   sortable is wired). Hover + click-selected accent live here too
   so they don't fire on the read-only naming/post-submit views. */
#list-grouping-container .hd-kb-list-row.grouping-item.list-group-item-danger {
	background: var(--hd-blue-soft, #eaf1f8);
	border-color: var(--hd-blue);
	box-shadow: 0 0 0 2px var(--hd-blue-a18);
}

/* ---- Group heading inside an items list ----
   Used by _assembled_items.html and _render_grouped_list_items.html as the
   per-group label above its <ul class="hd-lst-items-list">. */
.home-dash .hd-lst-items-group-title {
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin: 0 0 .4rem;
	padding: 0;
}

/* ---- Import preview loader overlay ----
   Translucent veil that fills the example panel-body while AJAX repopulates
   #example-list. Toggled by the import scripts via .d-none. The hd-panel-body
   needs `position: relative` for this to anchor correctly. */
.home-dash .hd-lst-import-loader {
	position: absolute;
	inset: 0;
	background: var(--hd-white-a50);
	z-index: 5;
	pointer-events: none;
}

/* ---- Assembled-list output (_assembled_items.html) ----
   Stack of grouped items emitted by ListBuilder.assemble(). Each item is a
   click target that opens a per-item details modal. */
.home-dash .hd-lst-assembled-item-link {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .5rem .65rem;
	color: inherit;
	text-decoration: none;
	border-radius: var(--hd-radius-sm, 8px);
	transition: background .15s ease, color .15s ease;
}
.home-dash .hd-lst-assembled-item-link:hover,
.home-dash .hd-lst-assembled-item-link:focus-visible {
	background: var(--hd-surface-2, #f4f4f7);
	color: var(--hd-ink, #1f2024);
	text-decoration: none;
}

/* ---- Grouped-items output (_render_grouped_list_items.html) ----
   AJAX fragment rendered for the dashboard's grouped-by-X view. */
.home-dash .hd-lst-grouped-item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .65rem;
}

/* ---- hd-meta-grid: definition list with two-column layout ----
   Used inside modals that show metadata (added_by / created / modified).
   First column is the label (muted); second column is the value. */
.home-dash .hd-meta-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .35rem 1rem;
	margin: 0;
	padding: 0;
}
.home-dash .hd-meta-grid dt {
	color: var(--hd-muted);
	font-weight: 500;
	font-size: .85rem;
	margin: 0;
}
.home-dash .hd-meta-grid dd {
	color: var(--hd-ink, #1f2024);
	font-size: .9rem;
	margin: 0;
}

/* ---- CSV export preview grid (list_export_csv.html) ----
   Two-column tabular preview: Group | Item. Header row uses muted
   uppercase labels, body rows use regular weight. */
.home-dash .hd-csv-preview-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 0;
}
.home-dash .hd-csv-preview-head {
	background: var(--hd-surface-2, #f4f4f7);
}
.home-dash .hd-csv-preview-head .hd-csv-preview-cell {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hd-muted);
}
.home-dash .hd-csv-preview-cell {
	padding: .45rem .65rem;
	font-size: .9rem;
	color: var(--hd-ink, #1f2024);
	min-width: 0;
	overflow-wrap: anywhere;
}
.home-dash .hd-csv-preview-cell--group {
	border-right: 1px solid var(--hd-line);
}

/* ---- Email export preview surfaces (list_export_email.html) ----
   Subject row + body block, both stacked on top of the panel-body. */
.home-dash .hd-email-preview-subject {
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	padding: .5rem .75rem;
	margin-bottom: .5rem;
	font-weight: 600;
	color: var(--hd-ink, #1f2024);
}
.home-dash .hd-email-preview-body {
	background: var(--hd-surface, #fff);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm, 8px);
	padding: .65rem .75rem;
	margin: 0;
	white-space: pre-wrap;
	color: var(--hd-ink, #1f2024);
	font-size: .9rem;
}

/* ===========================================================================
   TRAFFIC LOG DASHBOARD — stat tiles, file table, activity feed
   ---------------------------------------------------------------------------
   .hd-tl-stat carries the 2px border so the six dashboard tiles read as a
   clean group on both light and dark surfaces. Icon-tint variants follow
   the standard semantic palette (total / success / info / danger / warning
   / secondary). The Log Files mini-table and the activity feed below use
   plain flex layouts inside the standard .hd-panel chrome.
   =========================================================================== */
.home-dash .hd-tl-stat {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .9rem 1rem;
	background: var(--hd-surface);
	border: 2px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	height: 100%;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.home-dash .hd-tl-stat:hover {
	border-color: var(--hd-blue-a35);
	box-shadow: var(--hd-shadow-xs);
}
.home-dash .hd-tl-stat-icon {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: 1.4rem;
}
.home-dash .hd-tl-stat-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.home-dash .hd-tl-stat-value {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin: .2rem 0 0;
	line-height: 1;
}
.home-dash .hd-tl-stat--success .hd-tl-stat-icon {
	background: rgba(31, 122, 58, .12);
	color: #1f7a3a;
}
.home-dash .hd-tl-stat--info .hd-tl-stat-icon {
	background: rgba(13, 153, 198, .12);
	color: #0d99c6;
}
.home-dash .hd-tl-stat--warning .hd-tl-stat-icon {
	background: rgba(245, 158, 11, .14);
	color: #b45309;
}
.home-dash .hd-tl-files-head,
.home-dash .hd-tl-files-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	gap: .5rem;
	padding: .35rem .5rem;
}
.home-dash .hd-tl-files-head {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-tl-files-row {
	font-size: .87rem;
	color: var(--hd-ink);
	border-radius: 6px;
	transition: background .15s ease;
}
.home-dash .hd-tl-files-count {
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--hd-ink);
}
.home-dash .hd-tl-activity {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	max-height: 520px;
	overflow-y: auto;
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: .78rem;
	color: var(--hd-ink);
}
.home-dash .hd-tl-activity-row {
	padding: .35rem .55rem;
	border-bottom: 1px dashed var(--hd-line);
	white-space: pre-wrap;
	word-break: break-word;
}

/* ===========================================================================
   LEARNING BUILDER (course/learning_builder)
   Two-column "Group Memberships" page: user's groups on the left, the
   selected group's Requirements on the right. Row chrome, panel
   wrappers, hero spacing, and edit-state tints (.is-add / .is-move /
   .is-pending) all reuse the .hd-dept-list-* / .hd-maint-panel /
   .hd-su-modal-grid / .hd-kb-list-row.item_* primitives (joined to those
   chains where bodies match — see lines 9233, 19950, 22088, 22291, 25429,
   30924, 36609-36621, 39271, 31479). The block below covers only the
   deltas unique to this screen:
     • panel-body scrollable column with screen-specific viewport budget
     • row order pill + sortable grip slot + in-edit indicator
     • removed-row opacity + dashed separator above the removed list
     • themed search-results dropdown (overrides .search-container chrome)
     • modal field-info icon
   =========================================================================== */
.home-dash .hd-lb-panel-body {
	flex: 1 1 auto;
	overflow-y: auto;
	max-height: calc(100vh - 18rem);
	padding: .5rem .65rem .75rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.home-dash .hd-lb-panel-actions {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}
.home-dash .hd-lb-list--removed,
.home-dash .hd-rb-courses-list--removed,
.home-dash .hd-crb-courses-list--removed,
.home-dash .hd-crb-objectives-list--removed {
	margin-top: .65rem;
	padding-top: .65rem;
	border-top: 1px dashed var(--hd-line);
}
.home-dash .hd-lb-list-grip {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--hd-muted);
	cursor: grab;
	padding-left: .35rem;
}
.home-dash .hd-lb-list-order {
	flex-shrink: 0;
	min-width: 1.75rem;
	padding: 0 .4rem;
	margin-right: .15rem;
	border-radius: var(--hd-radius-sm);
	background: var(--hd-blue-a06);
	color: var(--hd-muted);
	font-size: .72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	line-height: 1.5;
}
.home-dash .hd-lb-list-editing {
	flex-shrink: 0;
	color: var(--hd-blue);
	font-size: .85rem;
}
.home-dash .hd-lb-list-item.is-removed { opacity: .65; }
.home-dash .hd-lb-search-results {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	box-shadow: var(--hd-shadow-md);
}
.home-dash .hd-lb-field-info,
.home-dash .hd-rb-field-info {
	color: var(--hd-muted);
	font-size: .85rem;
	margin-left: .25rem;
}

/* ===========================================================================
   REQUIREMENT BUILDER (course/requirement_builder)
   Three-column screen: left reuses the .hd-lb-panel from learning_builder;
   middle is the Requirement edit form + retake schedule; right is the
   Equivalent Courses list with per-row Reason + Default inline form.
   Panel wrappers, list rows, action icons, search wraps, edit-state
   tints, section heads, field-info, removed-list separators, italic
   labels, .85rem margin-bottom, and bare `margin: 0` reset all reuse
   existing chains (.hd-panel*, .hd-dept-list*, .hd-lb-list*,
   .hd-inline-search*, .hd-kb-list-row.is-selected, .item_*,
   .hd-wsch-fact-value / .hd-pb-step-survey-head / .hd-mr-fullsize-tools
   / .hd-lst-list-section / .hd-curriculum-assign-cell-due /
   .hd-stb-q-num-list / .hd-tl-stat-body / .hd-cl-current-none /
   .hd-licmgr-search / .hd-lp-accordion .accordion-item + .accordion-item).
   The rules below cover only the deltas unique to this screen:
     • middle column section dividers (Objective + Schedule)
     • retake schedule row layout primitives
     • course-row item layout (grip + main column)
     • objective text + read-only display
     • course-row reason + meta + default-label slots
   =========================================================================== */
.home-dash .hd-rb-section {
	border-top: 1px solid var(--hd-line);
	padding-top: .85rem;
	margin-top: .85rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.home-dash .hd-rb-update-textarea {
	min-height: 12rem;
}
.home-dash .hd-rb-section-title {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.home-dash .hd-rb-objective-text {
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-ink);
	font-size: .92rem;
	line-height: 1.5;
}
.home-dash .hd-rb-objective-readonly {
	padding: .55rem .75rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-muted);
	font-size: .9rem;
	line-height: 1.5;
	min-height: 5rem;
	white-space: pre-wrap;
}
.home-dash .hd-rb-sched-group-label {
	font-size: .78rem;
	font-weight: 600;
	color: var(--hd-muted);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-top: .25rem;
}
.home-dash .hd-rb-sched-row {
	display: flex;
	align-items: center;
	gap: .65rem;
	flex-wrap: nowrap;
}
.home-dash .hd-rb-sched-row--type {
	justify-content: space-between;
}
.home-dash .hd-rb-sched-input {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}
.home-dash .hd-rb-sched-input--date {
	flex: 0 1 14rem;
	max-width: 16rem;
}
.home-dash .hd-rb-sched-radio-text {
	font-size: .9rem;
	color: var(--hd-ink);
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
}
.home-dash .hd-rb-sched-input:disabled,
.home-dash .hd-rb-sched-row:has(.hd-cat-toggle-input:not(:checked)) .hd-rb-sched-input,
.home-dash .hd-rb-sched-row:has(.hd-cat-toggle-input:not(:checked)) .hd-rb-sched-unit,
.home-dash .hd-crb-marketplace-card:not(:has(.hd-toggle-input:checked)) .hd-crb-marketplace-cost {
	opacity: .55;
}
.home-dash .hd-rb-sched-input--num {
	flex: 0 0 5rem;
	width: 5rem;
	max-width: 5rem;
}
.home-dash .hd-rb-sched-unit {
	font-size: .85rem;
	color: var(--hd-muted);
	flex: 0 0 auto;
}
.home-dash .hd-rb-course-item,
.home-dash .hd-crb-objective-item {
	display: flex;
	align-items: flex-start;
	gap: .35rem;
	padding: .55rem .75rem;
}
.home-dash .hd-rb-course-grip {
	display: inline-flex;
	align-items: center;
	color: var(--hd-muted);
	cursor: grab;
	padding-top: .15rem;
}
.home-dash .hd-rb-course-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.home-dash .hd-rb-course-row,
.home-dash .hd-ob-q-head {
	display: flex;
	align-items: center;
	gap: .35rem;
	min-width: 0;
}
.home-dash .hd-rb-course-link,
.home-dash .hd-crb-objective-link,
.home-dash .hd-ob-q-link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}
.home-dash .hd-rb-course-meta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	color: var(--hd-muted);
	font-style: italic;
}
.home-dash .hd-rb-course-reason {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding-top: .25rem;
}
.home-dash .hd-rb-course-reason-row {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	color: var(--hd-ink);
}
.home-dash .hd-rb-course-reason-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-style: italic;
}
.home-dash .hd-rb-course-reason-input-wrap {
	display: flex;
	align-items: center;
	gap: .35rem;
}
.hd-modal.hd-rb-course-delete-modal .hd-rb-course-delete-heading {
	font-size: .9rem;
	font-weight: 700;
	color: var(--hd-ink);
	margin-bottom: .25rem;
}

/* ===========================================================================
   COURSE BUILDER (course/course_builder)
   Three-column screen mirroring kra_builder / requirement_builder. Heavy
   middle column with 11+ form sections including 5 Summernote rich-text
   editors, category checkbox grid, and dual poster/background image
   pickers with media-library modals. Right column: Objectives list
   (TYPE_INTERNAL) or Requirements list (course_manager).
   .hd-crb-grid / .hd-crb-col / .hd-crb-grid--2 / .hd-crb-hero* /
   .hd-crb-cat-item / .hd-crb-image-file / .hd-crb-image-picker /
   .hd-crb-image-picker > .dropdown / .hd-crb-image-preview-new /
   .hd-crb-objective-main / .hd-crb-objective-link / .hd-crb-objective-item /
   .hd-crb-courses-list--removed / .hd-crb-objectives-list--removed /
   .hd-crb-marketplace-help:last-of-type / .hd-crb-media-grid /
   .hd-crb-update-toggle all join existing chains. The rules below cover
   only deltas unique to this screen.
   =========================================================================== */
.home-dash .hd-crb-marketplace-row {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: .75rem .85rem;
	margin: 0;
	cursor: pointer;
}
.home-dash .hd-crb-marketplace-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.home-dash .hd-crb-marketplace-cost {
	padding: 0 .85rem .85rem;
	max-width: 16rem;
}
.home-dash .hd-crb-cost-prefix {
	position: absolute;
	left: .85rem;
	font-size: .95rem;
	color: var(--hd-muted);
	font-weight: 600;
	pointer-events: none;
}
.home-dash .hd-crb-cost-input {
	padding-left: 1.85rem;
	font-family: inherit;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}
.home-dash .hd-crb-cost-input[readonly] {
	background: var(--hd-surface-2);
	cursor: not-allowed;
}
.home-dash .hd-crb-cat-count {
	font-size: .72rem;
	font-weight: 500;
	color: var(--hd-muted);
	margin-left: .35rem;
	letter-spacing: 0;
	text-transform: none;
}
.home-dash .hd-crb-cat-search {
	margin-bottom: .65rem;
}
.home-dash .hd-crb-cat-grid {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .75rem;
	max-height: 260px;
	overflow-y: auto;
	padding: .5rem .25rem;
}
.home-dash .hd-crb-cat-label,
.home-dash .hd-crb-image-remove-label {
	font-size: .88rem;
	color: var(--hd-ink);
	cursor: pointer;
	margin: 0;
}
.home-dash .hd-crb-image-preview,
.home-dash .hd-crb-image-remove {
	align-items: center;
	margin-bottom: .65rem;
}
.home-dash .hd-crb-image-preview {
	display: flex;
	justify-content: flex-start;
}
.home-dash .hd-crb-image-preview img,
.home-dash .hd-crb-image-preview-new img,
.home-dash .hd-crb-image-preview-thumb {
	max-width: 240px;
	max-height: 160px;
	border-radius: var(--hd-radius-sm);
	border: 1px solid var(--hd-line);
	object-fit: cover;
}
.home-dash .hd-crb-image-filename {
	flex: 1 1 12rem;
	min-width: 0;
	background: var(--hd-surface-2);
	color: var(--hd-muted);
}
.hd-modal.hd-crb-media-modal .hd-crb-media-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 0;
}
.hd-modal.hd-crb-media-modal .hd-crb-media-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .65rem;
	flex-wrap: wrap;
}
.hd-modal.hd-crb-media-modal .hd-crb-media-pager-actions,
.hd-cpv-footer-controls {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	/* Anchor to the right edge of the footer's interior regardless of
	   how many other flex children are visible — `justify-content:
	   space-between` on .hd-cpv-footer falls back to flex-start when
	   only one item is visible (the timer is .d-none for reporting),
	   which was leaving the controls on the left and colliding with
	   the absolutely-positioned narration band. */
	margin-left: auto;
}
.home-dash .hd-crb-objective-row {
	display: flex;
	align-items: center;
	gap: .4rem;
	min-width: 0;
}
.home-dash .hd-crb-objective-meta {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	font-size: .8rem;
	color: var(--hd-muted);
	padding-left: 2.1rem;
}
.home-dash .hd-crb-objective-meta-row {
	display: flex;
	gap: .35rem;
	min-width: 0;
}
.home-dash .hd-crb-objective-meta-row dt {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--hd-ink);
}
.home-dash .hd-crb-objective-meta-row dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.home-dash .hd-crb-section--rich .note-editor {
	border-radius: var(--hd-radius-sm);
	border-color: var(--hd-line);
}

/* ===========================================================================
   OBJECTIVE BUILDER (course/objective_builder)
   Three-column screen: left reuses the Objectives list (_objective_select),
   middle is the Objective edit form / overview, right is the Questions
   panel with each question's answers rendered inline. .hd-ob-grid /
   .hd-ob-col / .hd-ob-hero / .hd-ob-update-grid join the existing grid +
   hero chains. The rules below cover deltas unique to this screen.
   =========================================================================== */
.home-dash .hd-ob-overview-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hd-muted);
	margin-bottom: .15rem;
}
.home-dash .hd-ob-overview-meta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .82rem;
	font-style: italic;
	color: var(--hd-muted);
	margin-top: .25rem;
}
.home-dash .hd-ob-perf-objective {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .55rem .75rem;
	margin-bottom: .85rem;
	background: var(--hd-surface-2);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.home-dash .hd-ob-perf-objective-value {
	font-size: .9rem;
	font-style: italic;
	color: var(--hd-ink);
}
.home-dash .hd-ob-field-info {
	color: var(--hd-muted);
	font-size: .85rem;
	margin-left: .25rem;
	cursor: pointer;
}
.hd-modal .hd-ob-levels-list dt {
	font-weight: 700;
	color: var(--hd-ink);
	margin-top: .65rem;
}
.hd-modal .hd-ob-levels-list dd {
	margin: .15rem 0 0;
	color: var(--hd-ink);
	line-height: 1.5;
}
.hd-modal .hd-ob-km-list > li {
	margin-bottom: .65rem;
	color: var(--hd-ink);
}
.home-dash .hd-ob-question-item {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	overflow: hidden;
}
.home-dash .hd-ob-q-type {
	flex: 0 0 auto;
	font-size: .72rem;
	font-weight: 600;
	color: var(--hd-blue);
}
.home-dash .hd-ob-q-body {
	margin-top: .35rem;
	padding-left: 2.1rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.home-dash .hd-ob-q-answer {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	padding: .2rem .4rem;
	border-radius: var(--hd-radius-sm);
	background: var(--hd-surface-2);
	font-size: .82rem;
	color: var(--hd-ink);
}
.home-dash .hd-ob-q-answer.is-correct {
	background: rgba(22, 163, 74, .1);
}
.home-dash .hd-ob-q-answer--match {
	flex-direction: column;
	gap: 0;
}
.home-dash .hd-ob-q-answer-num {
	flex: 0 0 auto;
	color: var(--hd-muted);
	font-variant-numeric: tabular-nums;
}
.home-dash .hd-ob-q-answer-check {
	flex: 0 0 auto;
	color: #16a34a;
}
.home-dash .hd-ob-q-canvas {
	max-width: 100%;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}

/* ===========================================================================
   TEST BUILDER (test_builder.html) — hd-teb-* namespace. Stacked layout:
   Test Options panel full-width on top, then the two question lists
   side-by-side (jQuery UI sortables that drag between each other).
   Question cards reuse the .hd-ob-q-* primitives.
   =========================================================================== */
/* .hd-teb-q:hover joins the .hd-toggle:hover chrome chain; .hd-teb-q:active
   / .ui-sortable-helper join the grabbing-cursor chain — both elsewhere to
   avoid duplicate bodies. */
/* Options grid: every setting is a uniform bordered card (toggles +
   number fields share the same chrome + min-height, content centered).
   Grid rows stretch so cards in a row line up even when a label wraps. */
.home-dash .hd-teb-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: .6rem;
}
.home-dash .hd-teb-toggle {
	align-items: center;
	min-height: 3.5rem;
	margin: 0;
}
.home-dash .hd-teb-field,
.home-dash .hd-teb-combo {
	display: flex;
	align-items: center;
	gap: .65rem;
	min-height: 3.5rem;
	margin: 0;
	padding: .55rem .85rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: 10px;
}
.home-dash .hd-teb-field .hd-field-input,
.home-dash .hd-teb-combo .hd-field-input {
	flex: 0 0 auto;
	width: 5.5rem;
	padding: .35rem .55rem;
	text-align: center;
	font-size: .9rem;
}
/* Combined toggle + number card: the switch (+ title) takes the row and
   the number sits at the right. .hd-teb-combo shares the .hd-teb-field
   card chrome; .hd-teb-combo-value joins the flex:0 0 auto / margin:0
   chain; the toggle-off greyed state joins the select:disabled chain
   (JS also flips the number's readOnly). */
.home-dash .hd-teb-combo-switch {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	cursor: pointer;
}
.home-dash .hd-teb-instructions {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 1rem 0;
	padding: .6rem .85rem;
	background: var(--hd-blue-a06);
	border: 1px solid var(--hd-blue-soft);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-ink);
	font-size: .85rem;
}
.home-dash .hd-teb-qlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-height: 3rem;
}
.home-dash .hd-teb-q {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .55rem .65rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	cursor: grab;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.home-dash .hd-teb-q.ui-sortable-helper {
	box-shadow: 0 8px 24px var(--hd-blue-a25);
}
.home-dash .hd-teb-grip {
	flex: 0 0 auto;
	color: var(--hd-muted);
	display: inline-flex;
	align-items: center;
}
.home-dash .hd-teb-q-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .85rem;
	color: var(--hd-ink);
}
.home-dash .hd-teb-empty {
	padding: 1rem;
	text-align: center;
	color: var(--hd-muted);
	font-size: .85rem;
	font-style: italic;
}

/* ===========================================================================
   INSTRUCTION BUILDER (instruction_builder.html) — hd-inb-* namespace.
   Questions panel + a build area (thumbnail screens rail + content editor).
   Grid/col/hero join the shared chains elsewhere; the 992 column ratios live
   in the responsive block.
   =========================================================================== */
.home-dash .hd-inb-screens {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.home-dash .hd-inb-thumb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	overflow: hidden;
	background: var(--hd-surface-2);
}
.home-dash .hd-inb-thumb-link {
	position: absolute;
	inset: 0;
}
.home-dash .hd-inb-thumb--selected {
	border: 2px solid var(--hd-blue);
	box-shadow: 0 0 0 3px var(--hd-blue-a18);
}
.home-dash .hd-inb-thumb--remove {
	border-color: #dc2626;
}
.home-dash .hd-inb-thumb--new {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hd-muted);
	font-size: 1.4rem;
	text-decoration: none;
	border-style: dashed;
}
.home-dash .hd-inb-thumb--new:hover {
	border-color: var(--hd-blue);
	color: var(--hd-blue);
	background: var(--hd-surface);
}
.home-dash .hd-inb-thumb-actions {
	position: absolute;
	top: .35rem;
	right: .35rem;
	display: inline-flex;
	gap: .25rem;
}
.home-dash .hd-inb-thumb-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 6px;
	background: var(--hd-white-a80);
	border: 1px solid var(--hd-line);
	color: var(--hd-ink);
	text-decoration: none;
}
.home-dash .hd-inb-thumb-action:hover {
	background: #fff;
	border-color: var(--hd-blue);
	color: var(--hd-blue);
}
.home-dash .hd-inb-meta {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-inb-meta-value {
	font-size: .9rem;
	color: var(--hd-ink);
}
.home-dash .hd-inb-segment {
	display: inline-flex;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	overflow: hidden;
}
.home-dash .hd-inb-segment-btn {
	margin: 0;
	padding: .4rem .9rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--hd-ink);
	background: var(--hd-surface);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.home-dash .hd-inb-segment-btn:last-of-type {
	border-left: 1px solid var(--hd-line);
}
.home-dash .hd-inb-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .65rem;
}
.home-dash .hd-inb-activity-preview {
	margin-bottom: .65rem;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	overflow: hidden;
}
.home-dash .hd-inb-activity-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .5rem .65rem;
	background: var(--hd-surface-2);
	font-weight: 600;
	font-size: .85rem;
}
.home-dash .hd-inb-activity-iframe {
	width: 100%;
	height: 400px;
	border: 0;
	display: block;
}
/* Narration upload row in the instruction builder. Header label gets a
   volume icon, the preview (audio + remove button) sits inline when a
   narration is already attached, the file input follows for replacing
   it, and the hint below tells authors that the instruction text is
   the transcript. Mirrors the .hd-inb-activity-preview pattern. */
.home-dash .hd-inb-narration {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--hd-line);
}
.home-dash .hd-inb-narration-preview {
	display: flex;
	align-items: center;
	gap: .65rem;
	flex-wrap: wrap;
	margin-bottom: .5rem;
}
.home-dash .hd-inb-narration-audio {
	flex: 1 1 240px;
	min-width: 0;
	max-width: 100%;
}
.home-dash .hd-field-hint {
	display: block;
	margin-top: .35rem;
	color: var(--hd-muted);
	font-size: .78rem;
	line-height: 1.35;
}
/* Lesson player narration — audios live directly inside .hd-cpv-footer
   via the _footer_narration.html partial (one <audio> per instruction
   with a narration_media join). Only one is .d-none-free at a time,
   driven server-side by the bookmark + client-side by the page-change
   observer. The slot grows to fill the footer between its margins and
   the Back/Continue controls, so the timeline reads as full-width on
   the left side of the footer. No own chrome — the footer's existing
   background/border/shadow wraps the audio + controls together. */
.home-dash .hd-cpv-footer-narration {
	flex: 1 1 auto;
	min-width: 0;
	margin-right: 1rem;
}
.home-dash .hd-cpv-narration-audio {
	width: 100%;
	height: 38px;
	display: block;
	vertical-align: middle;
}
.home-dash .hd-inb-editor-footer {
	display: flex;
	justify-content: flex-end;
	padding-top: .5rem;
}

/* ===========================================================================
   INTERNAL COURSE PREVIEW (course_run_preview.html) — hd-cpv-* namespace.
   Standalone learner-facing player page; body content is wrapped in
   .home-dash so the hero / panel / empty primitives apply. These rules are
   NOT .home-dash-scoped because the page also needs the page-level shell
   (body bg, centered container) to read on a bare standalone document.
   =========================================================================== */
.hd-cpv-page {
	margin: 0;
	min-height: 100vh;
	padding: 1.25rem;
	background: var(--hd-surface-2);
	color: var(--hd-ink);
	font-family: 'Inter', system-ui, sans-serif;
}
.hd-cpv-main {
	max-width: 880px;
	margin: 0 auto;
}
/* Two-pane course preview: persistent left lesson menu + right iframe stage.
   .hd-cpv-page--split joins the shared flex-column chain elsewhere. */
.hd-cpv-split {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 1rem;
}
.hd-cpv-menu {
	min-width: 0;
	min-height: 0;
}
.hd-cpv-menu-panel {
	display: flex;
	flex-direction: column;
	max-height: 100%;
}
/* Menu panel head — two-row layout. Top row centers the company logo
   (or ExxTend People fallback); bottom row left-aligns "Menu" with a
   visible white-alpha border on top acting as the separator. Each row
   uses its own padding so the rows can press against the head's edges
   and the border spans cleanly between them. Default .hd-panel-head
   padding is stripped on the menu variant because the rows own
   horizontal padding instead. */
.home-dash .hd-cpv-menu-head {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}
.home-dash .hd-cpv-menu-head-row {
	display: flex;
	align-items: center;
	padding: .75rem 1.15rem;
}
.home-dash .hd-cpv-menu-head-row--logo {
	justify-content: center;
	min-height: 5rem;
}
.home-dash .hd-cpv-menu-head-row--title {
	justify-content: flex-start;
	min-height: 3rem;
	border-top: 1px solid var(--hd-white-a50);
}
.home-dash .hd-cpv-menu-logo img {
	max-height: 64px;
	max-width: 100%;
	object-fit: contain;
}
/* Sticky footer slot at the bottom of the lesson menu — holds the
   "Lessons Completed: X/M" pill that used to live in the course hero
   before the hero was removed. margin-top:auto pushes the foot to the
   bottom of the panel's flex column regardless of how short the lesson
   list is, so the pill stays anchored. Border-top separates it from
   the scrollable list above. */
.hd-cpv-menu-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-top: auto;
	padding: .75rem 1.15rem;
	border-top: 1px solid var(--hd-line);
	background: var(--hd-surface);
}
.hd-cpv-stage {
	min-width: 0;
	display: flex;
	position: relative;
}
.hd-cpv-frame {
	width: 100%;
	height: 100%;
	min-height: 70vh;
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	background: var(--hd-surface);
}
.hd-cpv-placeholder {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 70vh;
	color: var(--hd-muted);
	border: 1px dashed var(--hd-line);
	border-radius: var(--hd-radius-sm);
	font-size: .95rem;
}
/* Hamburger + course title bar pinned to the top-left of the iframe stage
   placeholder. Sits inside the placeholder so it disappears automatically
   when a lesson loads (placeholder gets .d-none) — at which point the
   lesson player's own .hd-cpv-embed-bar takes over with its own toggle.
   Absolute-positioned so it doesn't disturb the placeholder's centered
   layout (icon+text or hero-band). z-index above the blurred background
   image so the button stays clickable. */
.hd-cpv-stage-bar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1.25rem;
}
.hd-cpv-placeholder .bi {
	font-size: 1.8rem;
}
/* Image variant — when the course has a BACKGROUND_COURSE media row, the
   placeholder swaps from the dashed empty-state card to a flush course-art
   panel. The dashed border/padding are dropped and the image fills the
   stage via object-fit so it works for any aspect ratio. The title hero
   sits absolutely-positioned across the centre. */
.hd-cpv-placeholder--image {
	position: relative;
	border: none;
	padding: 0;
	overflow: hidden;
}
.hd-cpv-placeholder-bg {
	/* Absolute-positioned inside the .hd-cpv-placeholder (which is
	   position:relative) so the image always fills the placeholder's
	   actual rendered box regardless of its natural aspect ratio. When
	   the image was a normal flex child, a portrait-ish source forced the
	   placeholder taller than the viewport — a problem only visible once
	   the menu was hidden and the stage went full width. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--hd-radius-sm);
	/* Ambient backdrop treatment — author-uploaded course backgrounds are
	   often smaller than the iframe stage they fill, and stretching them
	   sharp produced a pixelated result. Blurring lets the image act as
	   colour/mood under the hero band (Spotify / Netflix pattern) instead
	   of pretending to be a crisp full-bleed photo. The 1.05 scale pushes
	   the blur fringe outside the visible area so the parent's
	   overflow:hidden clips it cleanly — without it you'd see soft
	   transparent edges where the blur kernel runs off the element box. */
	filter: blur(12px);
	transform: scale(1.05);
}
.hd-cpv-placeholder-hero {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: 1.25rem 2rem;
	background: linear-gradient(135deg, rgba(13, 27, 62, .88) 0%, rgba(33, 78, 156, .88) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	flex-wrap: wrap;
}
.hd-cpv-placeholder-hero-title {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
}
/* Quick-start play button in the hero band — the bi-play-circle glyph
   itself acts as the affordance; no surrounding disc or border. Hover/
   focus brightens the icon from slightly-muted white to full white and
   adds a soft white drop-shadow halo for a tactile "this is clickable"
   response. NO transform:scale — Bootstrap Icons' glyph isn't pixel-
   centered within its font em-box, so scaling produces a perceived
   downward shift that reads as a layout glitch. The drop-shadow glow
   provides the same affordance without moving the rendered glyph. */
.home-dash .hd-cpv-play-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 4rem;
	line-height: 1;
	opacity: .85;
	cursor: pointer;
	transition: opacity .18s ease, filter .18s ease;
}
.home-dash .hd-cpv-play-btn:hover,
.home-dash .hd-cpv-play-btn:focus-visible {
	opacity: 1;
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, .55));
	outline: none;
}
/* Override .hd-cpv-placeholder .bi (which sets 1.8rem for the empty-
   state arrow icon) so the play button's larger font-size on the parent
   actually reaches the glyph. inherit so future size changes on the
   button propagate without touching this rule. */
.home-dash .hd-cpv-play-btn .bi {
	font-size: inherit;
}
@media (max-width: 860px) {
	.hd-cpv-split {
		grid-template-columns: 1fr;
	}
}
/* Toggleable lesson menu — the embedded player's "Lessons" button calls
   window.parent.toggleLessonMenu() which flips this class so the stage
   takes the full width while the menu is hidden (the menu itself uses
   Bootstrap's .d-none utility via JS to avoid duplicating display rules). */
/* Embedded lesson player (inside the course-preview iframe). The iframe
   interior becomes ONE card: bg white, padding 0 on body so it fills edge
   to edge; count-pill at the top, question content (flex:1) in the middle,
   timer + Continue at the bottom. The inner .question-page card chrome is
   stripped so we don't get a card-within-a-card. */
.hd-cpv-page--embed {
	background: var(--hd-surface);
	padding: 0;
}
.hd-cpv-embed-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1.25rem;
}
.hd-cpv-count-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--hd-blue-a06);
	color: var(--hd-blue);
	font-size: .78rem;
	font-weight: 700;
	text-decoration: none;
}
/* When the pill chrome is used on an interactive anchor (the menu-foot
   Home link), darken the soft-blue surface on hover/focus so it reads as
   clickable. Static span instances (the lessons-completed counter) are
   unaffected because the selector requires an <a> tag. */
a.hd-cpv-count-pill:hover,
a.hd-cpv-count-pill:focus-visible {
	background: var(--hd-blue-a12);
	color: var(--hd-blue);
	text-decoration: none;
}
.hd-cpv-page--embed .hd-cpv-player {
	flex: 1 1 auto;
	max-width: none;
	margin: 0;
	padding: 0 1.25rem;
}
.hd-cpv-page--embed .question-container {
	max-width: none;
	padding: 0;
}
.hd-cpv-page--embed .question-page {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
}
.hd-cpv-page--embed .instruction-page {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}
/* The base .question-screens is a flex column with justify-content:center,
   AND it forces .question-screens > * to display:flex column / justify-center
   too — both layers were vertically-centering the lesson content. In the
   embed we drop the flex entirely so content flows top-down as plain blocks. */
.hd-cpv-page--embed .question-screens {
	display: block;
	padding: 0;
	height: auto;
}
.hd-cpv-page--embed .question-screens > * {
	display: block;
	flex: 0 0 auto;
}
.hd-cpv-page--embed .hd-cpv-footer {
	margin: 0;
	border: none;
	border-top: 1px solid var(--hd-line);
	border-radius: 0;
}
/* Footer is inset to match the shared .question-container (max-width 900 +
   48px horizontal padding) so it lines up with the question/answer cards. */
.hd-cpv-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 48px;
	padding: .85rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
}
.hd-cpv-toast {
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	box-shadow: var(--hd-shadow-md);
}
.hd-cpv-toast .toast-header {
	background: var(--hd-surface);
	color: var(--hd-ink);
	border-bottom: 1px solid var(--hd-line);
}
.hd-cpv-footer-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.hd-cpv-timer {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	font-size: .85rem;
	color: var(--hd-ink);
}
.hd-cpv-footer-note {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .78rem;
	color: var(--hd-muted);
}
.home-dash .hd-cpv-lesson-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: .85rem;
	width: 100%;
	text-align: left;
	font: inherit;
	cursor: pointer;
	padding: .8rem 1rem;
	background: var(--hd-surface);
	border: 1px solid var(--hd-line);
	border-radius: var(--hd-radius-sm);
	color: var(--hd-ink);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.home-dash .hd-cpv-lesson-row:hover {
	border-color: var(--hd-blue);
	background: var(--hd-surface-2);
	box-shadow: 0 2px 8px var(--hd-blue-a18);
}
.home-dash .hd-cpv-lesson-head {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: .35rem;
	line-height: 1.4;
}
.home-dash .hd-cpv-lesson-num {
	flex-shrink: 0;
	font-size: .82rem;
	font-weight: 400;
	color: var(--hd-blue);
}
.home-dash .hd-cpv-lesson-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 400;
	font-size: .82rem;
	color: var(--hd-ink);
}
.home-dash .hd-cpv-menu-panel .hd-panel-title {
	font-weight: 400;
}
.home-dash .hd-cpv-lesson-status {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--hd-blue);
}
.home-dash .hd-cpv-lesson-chevron {
	flex: 0 0 auto;
	font-size: 1.25rem;
	color: var(--hd-blue);
}
.home-dash .hd-cpv-progress {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: var(--hd-white-a18);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
}

/* Question-modal radio row (True/False answer key). The .hd-cat-toggle-wrap
   + .hd-cat-default-radio visual-swap rules are .home-dash-scoped; the
   AJAX-loaded question modals render inside .home-dash on the reimagined
   builder screens, so they inherit the swap. These rules only add the
   row layout + clickable text label. */
.home-dash .hd-q-radio-group {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.home-dash .hd-q-radio-label {
	margin: 0;
	font-size: .9rem;
	color: var(--hd-ink);
	cursor: pointer;
}