/* Tree: wrap long labels below text start, not below icons */
.z-treecell-content {
	display: flex;
	align-items: flex-start;
}

.z-treecell-text {
	flex: 1;
	min-width: 0;
}

/* Always show vertical scrollbar so columns don't shift when filtering */
.z-listbox-body {
	overflow-y: scroll !important;
}

.inner-grid, .inner-grid .z-cell, .inner-grid .z-row-inner {
	background: inherit;
}

.inner-grid.z-grid {
/* 	border: 0px */
}

.outer-grid.odd-row, .outer-grid.odd-row>.z-cell:not(:hover) {
	background: #f5fbf5
}

.outer-grid .z-cell:not(.inner-grid *) {
	padding: 0px;
}

/* buttons with only icons are generally to high and destroy layouts */
.z-button.icon-only {
	margin-top: -10px;
	margin-bottom: -10px;
	color: white;
}

/* CUSTOM CLASSES */

/* add icon to textbox */
.textbox-icon {
	display: FLEX;
    position: relative;
}

.textbox-icon input {
	padding-right: 20px;
}

.textbox-icon i:first-child{
	color: #0093F9;
	position: absolute;
    right: 5px;
    align-self: center
}

.textbox-icon i:last-child{
	color: #0093F9;
	position: absolute;
    right: 5px;
    align-self: center
}
/* clear filter icon (absolute positioned, no layout shift) */
.filter-clear {
	position: absolute;
	color: red;
	cursor: pointer;
	z-index: 1;
	background: white;
	padding: 0 2px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
}

.textbox-icon .filter-clear {
	right: 5px;
	align-self: center;
}

.combo-filter {
	position: relative;
}

.combo-filter .filter-clear {
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
}
/* end add icon to tetbox */

/* Creates a badge behind an element. */
[data-badge] {
  /* makes the element widder */
  position: relative;
  margin-right: 15px;
}

[data-badge]:after {
	content: attr(data-badge);
    background: red;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    /* margin-top: -10px; */
    top: 0px;
/*     right: -5px; */
    min-width: 14px;
    padding: 2px;
    position: absolute;
    text-align: center;
    line-height: 1;
    z-index: 1;
}

[data-badge^="-"]:after,
[data-badge=""]:after {
   display: none;
}

[data-badge="0"]:after {
   background: #6c757d;
}

#openTaskCountBadge {
	font-size: 16px;
	font-weight: bold;
}

/* Workflow task completion buttons */
.workflow-complete-button.z-button {
	background-color: #28a745;
	border-color: #28a745;
	color: white;
}

.workflow-complete-button.z-button:hover {
	background-color: #218838;
	border-color: #1e7e34;
}

.workflow-complete-button.z-button:active,
.workflow-complete-button.z-button:focus {
	background-color: #1e7e34;
	border-color: #1c7430;
}

.workflow-complete-button.z-button:disabled {
	background-color: #94d3a2;
	border-color: #94d3a2;
	color: #e0e0e0;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Workflow task rejection buttons */
.workflow-reject-button.z-button {
	background-color: #dc3545;
	border-color: #dc3545;
	color: white;
}

.workflow-reject-button.z-button:hover {
	background-color: #b02a37;
	border-color: #a02530;
}

.workflow-reject-button.z-button:active,
.workflow-reject-button.z-button:focus {
	background-color: #9a2530;
	border-color: #8a2028;
}

.workflow-reject-button.z-button:disabled {
	background-color: #f5a3a8;
	border-color: #f5a3a8;
	color: #e0e0e0;
	cursor: not-allowed;
	opacity: 0.6;
}

/* Assessment status buttons - not started (red) */
.assessment-not-started.z-button,
.assessment-not-started.z-combobutton .z-combobutton-button {
	background-color: #dc3545;
	border-color: #dc3545;
	color: white;
}

.assessment-not-started.z-button:hover,
.assessment-not-started.z-combobutton .z-combobutton-button:hover {
	background-color: #b02a37;
	border-color: #a02530;
}

/* Assessment status buttons - in progress (amber) */
.assessment-in-progress.z-button,
.assessment-in-progress.z-combobutton .z-combobutton-button {
	background-color: #ffc107;
	border-color: #ffc107;
	color: black;
}

.assessment-in-progress.z-button:hover,
.assessment-in-progress.z-combobutton .z-combobutton-button:hover {
	background-color: #e0a800;
	border-color: #d39e00;
}

/* Assessment status buttons - completed (green) */
.assessment-completed.z-button,
.assessment-completed.z-combobutton .z-combobutton-button {
	background-color: #28a745;
	border-color: #28a745;
	color: white;
}

.assessment-completed.z-button:hover,
.assessment-completed.z-combobutton .z-combobutton-button:hover {
	background-color: #218838;
	border-color: #1e7e34;
}

/* Assessment status on menuitems */
.assessment-not-started.z-menuitem > .z-menuitem-content {
	background-color: #f8d7da;
}

.assessment-in-progress.z-menuitem > .z-menuitem-content {
	background-color: #fff3cd;
}

.assessment-completed.z-menuitem > .z-menuitem-content {
	background-color: #d4edda;
}

/* Groupbox caption hover effect */
.z-groupbox-header {
	transition: background-color 0.2s ease;
}

.z-groupbox-header:hover {
	opacity: 0.9;
}

/* Info icon and popup styles */
.info-icon {
	cursor: help;
	color: #0066cc;
	font-size: 14px;
	margin-left: 5px;
	vertical-align: middle;
}

.info-popup {
	max-width: 400px;
	padding: 10px;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.info-popup-content {
	font-size: 13px;
	line-height: 1.5;
	color: #495057;
}

/* Red background messagebox (not-admitted confirmation) */
.messagebox-red.z-window .z-window-content {
	background-color: #f8d7da;
}

.messagebox-red.z-window .z-window-header {
	background-color: #dc3545;
	color: white;
}

/* Green background messagebox (admitted confirmation) */
.messagebox-green.z-window .z-window-content {
	background-color: #d4edda;
}

.messagebox-green.z-window .z-window-header {
	background-color: #28a745;
	color: white;
}

/* Make disabled form elements more readable */
.z-textbox[disabled], .z-intbox[disabled], .z-longbox[disabled],
.z-datebox-input[disabled], .z-timebox-input[disabled],
.z-combobox-input[disabled],
.z-textbox[readonly] {
	color: #555 !important;
}

.z-checkbox-disabled > .z-checkbox-content {
	opacity: 0.8;
	color: #555;
}

/* Edit absence button: user-times icon with small pencil overlay */
.icon-edit-absence .z-icon-user-times {
	position: relative;
}

.icon-edit-absence .z-icon-user-times::after {
	content: '\f040';
	font-family: FontAwesome;
	font-size: 0.55em;
	position: absolute;
	bottom: -2px;
	right: -6px;
}

/* Edit cancellation button: ban icon with small pencil overlay */
.icon-edit-cancel .z-icon-ban {
	position: relative;
}

.icon-edit-cancel .z-icon-ban::after {
	content: '\f040';
	font-family: FontAwesome;
	font-size: 0.55em;
	position: absolute;
	bottom: -2px;
	right: -6px;
}