/* ITSM Portal Styles */

/* Only apply on portal pages (not desk) */
.itsm-portal {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}

/* ── Catalog Browse ── */

.itsm-search-bar {
	margin-bottom: 1.5rem;
	position: relative;
}

.itsm-search-bar input {
	width: 100%;
	padding: 10px 15px;
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 6px;
	font-size: 14px;
}

.itsm-search-bar input:focus {
	outline: none;
	border-color: #2490ef;
	box-shadow: 0 0 0 2px rgba(36, 144, 239, 0.15);
}

.itsm-catalog-section {
	margin-bottom: 2rem;
}

.itsm-catalog-title {
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 0.5rem;
}

.itsm-catalog-desc {
	font-size: 13px;
	color: var(--text-muted, #8d99a6);
	margin-bottom: 1rem;
}

.itsm-item-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	padding-bottom: 10px;
}

/* ── Catalog Item Card ── */

.itsm-item-card {
	border-radius: 8px;
	padding: 1.25rem;
	min-height: 170px;
	background: #fff;
	border: 1px solid #d7e4f4;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.itsm-item-card:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-color: rgba(36, 144, 239, 0.35);
	transform: translateY(-1px);
}

.itsm-item-card-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--text-color, #1c2634);
}

.itsm-item-card-desc {
	font-size: 13px;
	color: var(--text-color, #1c2634);
	flex-grow: 1;
	margin-bottom: 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.itsm-item-card-meta {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-size: 12px;
	color: var(--text-color, #1c2634);
}

.itsm-item-card-meta > * {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: rgba(237, 245, 255, 0.58);
	border: 1px solid rgba(200, 221, 247, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #1857a4;
	font-weight: 600;
	line-height: 1.2;
}

/* ── Status Badges ── */

.itsm-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.itsm-badge-draft,
.itsm-badge-pending,
.itsm-badge-cancelled {
	background: #4b5563;
	color: #fff;
}

.itsm-badge-submitted,
.itsm-badge-open {
	background: #0b63d9;
	color: #fff;
}

.itsm-badge-approval-pending,
.itsm-badge-waiting,
.itsm-badge-paused,
.itsm-badge-partially-fulfilled {
	background: #b45309;
	color: #fff;
}

.itsm-badge-approved {
	background: #0f766e;
	color: #fff;
}

.itsm-badge-completed,
.itsm-badge-fulfilled,
.itsm-badge-done,
.itsm-badge-on-time {
	background: #166534;
	color: #fff;
}

.itsm-badge-in-fulfillment,
.itsm-badge-in-progress {
	background: #0b63d9;
	color: #fff;
}

.itsm-badge-rejected,
.itsm-badge-breached {
	background: #b91c1c;
	color: #fff;
}

/* ── Item Detail Page ── */

.itsm-item-detail {
	max-width: 720px;
}

.itsm-item-detail-header {
	margin-bottom: 1.5rem;
}

.itsm-item-detail-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 0.25rem;
}

.itsm-item-detail-catalog {
	font-size: 13px;
	color: var(--text-muted, #8d99a6);
}

.itsm-item-detail-desc {
	font-size: 14px;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

/* ── Variable Form ── */

.itsm-var-form {
	margin-bottom: 1.5rem;
}

.itsm-var-group {
	margin-bottom: 1.5rem;
}

.itsm-var-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--text-color, #1c2634);
}

.itsm-var-group label .itsm-required {
	color: var(--red, #e24c4c);
}

.itsm-var-group input,
.itsm-var-group select,
.itsm-var-group textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 6px;
	font-size: 13px;
	background: var(--card-bg, #fff);
	color: var(--text-color, #1c2634);
	transition: border-color 0.15s;
}

.itsm-var-group input:focus,
.itsm-var-group select:focus,
.itsm-var-group textarea:focus {
	outline: none;
	border-color: #2490ef;
	box-shadow: 0 0 0 3px rgba(36, 144, 239, 0.12);
}

.itsm-var-group select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238d99a6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	cursor: pointer;
}

.itsm-var-group textarea {
	min-height: 80px;
	resize: vertical;
}

.itsm-var-group .itsm-check-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.itsm-var-group .itsm-check-row input[type="checkbox"] {
	width: auto;
}

.itsm-var-group.itsm-var-hidden {
	display: none;
}

/* ── Pill/card radio options ── */

.itsm-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.itsm-pill {
	padding: 6px 16px;
	border: 1.5px solid var(--border-color, #d1d8dd);
	border-radius: 20px;
	background: var(--card-bg, #fff);
	color: var(--text-color, #1c2634);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	line-height: 1.4;
}

.itsm-pill:hover {
	border-color: #2490ef;
	color: #2490ef;
}

.itsm-pill.itsm-pill-selected,
.itsm-pill.itsm-pill-selected:hover {
	border-color: #2490ef;
	background: #2490ef;
	color: #fff;
}

.itsm-var-group .itsm-var-error {
	font-size: 12px;
	color: var(--red, #e24c4c);
	margin-top: 4px;
}

/* ── Quantity / Requested For Row ── */

.itsm-form-row {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.itsm-form-row .itsm-form-field {
	flex: 1;
	min-width: 150px;
}

.itsm-form-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.itsm-form-field input,
.itsm-form-field select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 6px;
	font-size: 13px;
	transition: border-color 0.15s;
}

.itsm-form-field input:focus,
.itsm-form-field select:focus {
	outline: none;
	border-color: #2490ef;
	box-shadow: 0 0 0 3px rgba(36, 144, 239, 0.12);
}

/* ── Cart Page ── */

.itsm-cart-empty {
	text-align: center;
	padding: 3rem 0;
	color: var(--text-muted, #8d99a6);
}

.itsm-cart-item {
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	background: #fff;
	border: 1px solid #d7e4f4;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.itsm-cart-item:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-color: rgba(36, 144, 239, 0.35);
	transform: translateY(-1px);
}

.itsm-cart-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.itsm-cart-item-title {
	font-size: 15px;
	font-weight: 600;
	color:var(--text-color, #1c2634);
}

.itsm-cart-item-actions {
	display: flex;
	gap: 0.5rem;
}

.itsm-cart-item-vars {
	font-size: 12px;
	color: var(--text-muted, #8d99a6);
}

.itsm-cart-item-vars span {
	margin-right: 1rem;
}

.itsm-cart-footer {
	margin-top: 1.5rem;
}

.itsm-cart-footer textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 6px;
	font-size: 13px;
	min-height: 60px;
	margin-bottom: 1rem;
}

.itsm-cart-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

/* ── My Requests List ── */

.itsm-filter-bar {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.itsm-filter-btn {
	padding: 6px 14px;
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 20px;
	background: var(--card-bg, #fff);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s;
}

.itsm-filter-btn:hover,
.itsm-filter-btn.active {
	border-color: #2490ef;
	color: #2490ef;
	background: #e3f2fd;
}

.itsm-page-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-color, #1c2634);
	margin: 0 0 1rem;
}

.itsm-request-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.itsm-request-row {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	min-height: 170px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #d7e4f4;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.itsm-request-row:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-color: rgba(36, 144, 239, 0.35);
	transform: translateY(-1px);
}

.itsm-request-row-left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.itsm-request-row-name {
	font-weight: 600;
	font-size: 14px;
	color:var(--text-color, #1c2634);
}

.itsm-request-row-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: auto;
	font-size: 12px;
	color: var(--text-muted, #8d99a6);
	font-weight: 500;
}

.itsm-request-row-right > span {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: rgba(237, 245, 255, 0.58);
	border: 1px solid rgba(200, 221, 247, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #1857a4;
	font-weight: 600;
	line-height: 1.2;
}

.itsm-item-card > *,
.itsm-request-row > *,
.itsm-cart-item > * {
	position: relative;
	z-index: 1;
}


.itsm-cart-item::after {
	content: "";
	position: absolute;
	top: -18%;
	right: -6%;
	width: 40%;
	height: 136%;
	transform: rotate(45deg);
	z-index: 0;
	opacity: 0.5;
	pointer-events: none;
	background: none;
}

.itsm-cart-item::before,
.itsm-cart-item::after {
	top: 0;
	right: 0;
	width: 40%;
	height: 100%;
	transform: none;
}

.itsm-cart-item::before {
	background:
		radial-gradient(circle, #deefff 0 55%, transparent 61%) 6% 8% / 7px 7px no-repeat,
		linear-gradient(#d3e9ff 0 0) 12% 28% / 6px 6px no-repeat,
		conic-gradient(from 180deg, #c1e0ff 0 33%, transparent 0) 18% 52% / 7px 7px no-repeat,
		radial-gradient(circle, #a8d2ff 0 56%, transparent 62%) 24% 78% / 8px 8px no-repeat,
		linear-gradient(#8dc4ff 0 0) 30% 18% / 7px 7px no-repeat,
		radial-gradient(circle, #72b5ff 0 56%, transparent 62%) 36% 40% / 8px 8px no-repeat,
		conic-gradient(from 0deg, #9fd0ff 0 33%, transparent 0) 40% 66% / 8px 8px no-repeat,
		linear-gradient(#5ca9ff 0 0) 46% 88% / 8px 8px no-repeat,
		radial-gradient(circle, #4b9eff 0 57%, transparent 63%) 52% 12% / 9px 9px no-repeat,
		linear-gradient(#3f95ff 0 0) 56% 32% / 8px 8px no-repeat,
		radial-gradient(circle, #2f89fa 0 57%, transparent 63%) 60% 54% / 9px 9px no-repeat,
		conic-gradient(from 180deg, #82bcff 0 33%, transparent 0) 64% 74% / 8px 8px no-repeat,
		linear-gradient(#257deb 0 0) 68% 94% / 8px 8px no-repeat,
		radial-gradient(circle, #1d74e6 0 58%, transparent 64%) 72% 22% / 9px 9px no-repeat,
		linear-gradient(#176ddb 0 0) 76% 44% / 8px 8px no-repeat,
		radial-gradient(circle, #1064d2 0 58%, transparent 64%) 80% 64% / 9px 9px no-repeat,
		conic-gradient(from 0deg, #6caeff 0 33%, transparent 0) 84% 84% / 8px 8px no-repeat,
		linear-gradient(#0f5fca 0 0) 88% 14% / 9px 9px no-repeat,
		radial-gradient(circle, #0f61d4 0 58%, transparent 64%) 91% 34% / 9px 9px no-repeat,
		linear-gradient(#0f63d9 0 0) 93% 54% / 9px 9px no-repeat,
		radial-gradient(circle, #1067df 0 58%, transparent 64%) 95% 74% / 10px 10px no-repeat,
		conic-gradient(from 180deg, #76b5ff 0 33%, transparent 0) 97% 92% / 9px 9px no-repeat;
}

.itsm-cart-item::after {
	opacity: 0.5;
	background:
		radial-gradient(circle, #b7dcff 0 56%, transparent 62%) 44% 6% / 7px 7px no-repeat,
		linear-gradient(#95c9ff 0 0) 50% 22% / 7px 7px no-repeat,
		conic-gradient(from 180deg, #77b7ff 0 33%, transparent 0) 56% 38% / 7px 7px no-repeat,
		radial-gradient(circle, #5ca9ff 0 57%, transparent 63%) 62% 52% / 8px 8px no-repeat,
		linear-gradient(#4398ff 0 0) 66% 68% / 8px 8px no-repeat,
		radial-gradient(circle, #2b86f6 0 57%, transparent 63%) 70% 84% / 9px 9px no-repeat,
		conic-gradient(from 0deg, #8bc2ff 0 33%, transparent 0) 74% 14% / 8px 8px no-repeat,
		linear-gradient(#1f79ea 0 0) 76% 30% / 8px 8px no-repeat,
		radial-gradient(circle, #176fdf 0 58%, transparent 64%) 79% 46% / 9px 9px no-repeat,
		linear-gradient(#1268d6 0 0) 82% 62% / 9px 9px no-repeat,
		radial-gradient(circle, #0e63d0 0 58%, transparent 64%) 84% 78% / 9px 9px no-repeat,
		conic-gradient(from 180deg, #6bafff 0 33%, transparent 0) 86% 94% / 8px 8px no-repeat,
		linear-gradient(#0e60cc 0 0) 88% 10% / 9px 9px no-repeat,
		radial-gradient(circle, #0f62d2 0 58%, transparent 64%) 90% 26% / 9px 9px no-repeat,
		linear-gradient(#1064d8 0 0) 92% 42% / 9px 9px no-repeat,
		radial-gradient(circle, #1068de 0 58%, transparent 64%) 93% 58% / 10px 10px no-repeat,
		linear-gradient(#126ce4 0 0) 94% 74% / 9px 9px no-repeat,
		radial-gradient(circle, #1470ea 0 58%, transparent 64%) 95% 90% / 10px 10px no-repeat,
		conic-gradient(from 0deg, #72b4ff 0 33%, transparent 0) 96% 18% / 8px 8px no-repeat,
		linear-gradient(#4e9fff 0 0) 97% 34% / 8px 8px no-repeat,
		radial-gradient(circle, #2f8bf9 0 57%, transparent 63%) 98% 50% / 9px 9px no-repeat,
		linear-gradient(#1975eb 0 0) 98% 66% / 8px 8px no-repeat,
		radial-gradient(circle, #1168dd 0 58%, transparent 64%) 98% 82% / 9px 9px no-repeat;
}

.itsm-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

/* ── Request Detail ── */

.itsm-detail-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.itsm-detail-section {
	margin-bottom: 1.5rem;
}

.itsm-detail-section-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 0.75rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
}

.itsm-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.itsm-detail-header-left h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.itsm-detail-title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.itsm-detail-title-row h2 {
	margin: 0;
}

.itsm-detail-page-title {
	margin-bottom: 0.5rem;
}

.itsm-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 13px;
	color: var(--text-muted, #8d99a6);
	margin-top: 0.5rem;
}

.itsm-detail-meta strong {
	color: var(--text-color, #1c2634);
}

/* Items table */
.itsm-items-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.itsm-items-table th {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 2px solid var(--border-color, #d1d8dd);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--text-muted, #8d99a6);
}

.itsm-items-table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
	vertical-align: top;
}

/* Approval list */
.itsm-approval-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
	font-size: 13px;
}

/* Fulfillment timeline */
.itsm-task-timeline {
	padding-left: 0;
	list-style: none;
}

.itsm-task-step {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
	font-size: 13px;
}

.itsm-task-seq {
	background: var(--border-color, #d1d8dd);
	color: var(--text-color, #1c2634);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
}

.itsm-task-step.itsm-task-done .itsm-task-seq {
	background: #2e7d32;
	color: #fff;
}

.itsm-task-step.itsm-task-active .itsm-task-seq {
	background: #e65100;
	color: #fff;
}

.itsm-task-info {
	flex-grow: 1;
}

.itsm-task-title {
	font-weight: 600;
}

.itsm-task-detail {
	font-size: 12px;
	color: var(--text-muted, #8d99a6);
}

/* ── Timeline (Timestamps) ── */

.itsm-timeline {
	position: relative;
	padding-left: 20px;
}

.itsm-timeline::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: var(--border-color, #d1d8dd);
}

.itsm-timeline-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.4rem 0;
	position: relative;
}

.itsm-timeline-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2490ef;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #2490ef;
	flex-shrink: 0;
	margin-top: 4px;
	margin-left: -19px;
}

.itsm-timeline-content {
	display: flex;
	justify-content: space-between;
	flex: 1;
	font-size: 13px;
	gap: 1rem;
}

.itsm-timeline-label {
	font-weight: 600;
	color: var(--text-color, #1c2634);
}

.itsm-timeline-time {
	color: var(--text-muted, #8d99a6);
	white-space: nowrap;
}

/* ── SLA Section ── */

.itsm-sla-block {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
}

.itsm-sla-block:last-child {
	border-bottom: none;
}

.itsm-sla-block-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--text-color, #1c2634);
}

.itsm-sla-details {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 13px;
	color: var(--text-muted, #8d99a6);
}

.itsm-sla-details strong {
	color: var(--text-color, #1c2634);
}

/* ── Evidence Section ── */

.itsm-evidence-empty {
	font-size: 13px;
	color: var(--text-muted, #8d99a6);
	padding: 0.5rem 0;
}

/* ── Cart Badge ── */

.itsm-cart-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--text-color, #1c2634);
}

.itsm-cart-badge:hover {
	text-decoration: none;
	background: rgba(36, 144, 239, 0.07);
}

.itsm-cart-count {
	background: #2490ef;
	color: #fff;
	border-radius: 10px;
	padding: 0 6px;
	font-size: 11px;
	min-width: 18px;
	text-align: center;
	line-height: 18px;
}

.itsm-cart-count:empty,
.itsm-cart-count[data-count="0"] {
	display: none;
}

/* ── Buttons ── */

.itsm-btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.itsm-btn:hover {
	text-decoration: none;
}

.itsm-btn-primary {
	background: #2490ef;
	color: #fff;
	border-color: #2490ef;
}

.itsm-btn-primary:hover {
	background-color: #1a7dd6;
	color: #fff;
	box-shadow: 0 2px 8px rgba(36, 144, 239, 0.35);
}

.itsm-btn-default {
	background: var(--card-bg, #fff);
	color: var(--text-color, #1c2634);
	border-color: var(--border-color, #d1d8dd);
}

.itsm-btn-default:hover {
	background: #eff6ff;
	border-color: rgba(36, 144, 239, 0.35);
	color: #2490ef;
}

.itsm-btn-danger {
	background: #fff;
	color: #c62828;
	border-color: #c62828;
}

.itsm-btn-danger:hover {
	background: #ffebee;
}

.itsm-btn-sm {
	padding: 4px 10px;
	font-size: 12px;
}

.itsm-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Loading ── */

.itsm-loading {
	text-align: center;
	padding: 2rem;
	color: var(--text-muted, #8d99a6);
}

/* ── Alert ── */

.itsm-alert {
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	margin-bottom: 1rem;
}

.itsm-alert-warning {
	background: #fff8e1;
	color: #f57f17;
	border: 1px solid #ffe082;
}

.itsm-alert-danger {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef9a9a;
}

.itsm-alert-success {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

/* ── Responsive ── */

@media (max-width: 768px) {
	.itsm-item-grid {
		grid-template-columns: 1fr;
	}

	.itsm-request-list {
		grid-template-columns: 1fr;
	}

	.itsm-request-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.itsm-detail-header {
		flex-direction: column;
	}

	.itsm-detail-topbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.itsm-form-row {
		flex-direction: column;
	}
}

/* ============================================================
   Knowledge Base Portal – Additional Styles
   ============================================================ */

/* Article type badge */
.km-type-badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 0.75rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--bg-color, #f3f6f8);
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	white-space: nowrap;
}
.km-type-how-to    { background: #e7f5ff; color: #1864ab; border-color: #a5d8ff; }
.km-type-faq       { background: #e6fcf5; color: #087f5b; border-color: #96f2d7; }
.km-type-known-error { background: #fff4e6; color: #e67700; border-color: #ffd8a8; }
.km-type-reference { background: #f3f0ff; color: #5f3dc4; border-color: #d0bfff; }
.km-type-policy    { background: #fff0f6; color: #a61e4d; border-color: #faa2c1; }

/* Article card variant – overlays on top of .itsm-item-card */
.km-article-card {
	cursor: pointer;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.km-article-card::before {
	background: linear-gradient(135deg, #2490ef18 0%, transparent 60%);
}

.km-article-card:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

/* Article meta row on the listing card */
.km-article-meta {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Pagination row */
.km-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
}

/* Article detail – content sections */
.km-article-header {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

.km-content-section {
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
}

.km-content-section-workaround {
	border-color: #ffd8a8;
	background: #fff9f0;
}

.km-content-section-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}

.km-content-section-body {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--text-color);
	white-space: pre-wrap;
	word-break: break-word;
}

.km-steps-body {
	counter-reset: step-counter;
}

/* Feedback block */
.km-feedback-block {
	border-top: 1px solid var(--border-color);
	padding: 1.5rem 0 0.5rem;
	margin-top: 2rem;
}

.km-feedback-prompt {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin: 0 0 0.5rem;
}

.km-feedback-textarea {
	width: 100%;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--text-color);
	background: var(--control-bg, #f8f8f8);
	resize: vertical;
	box-sizing: border-box;
	font-family: inherit;
	transition: border-color 0.15s;
}

.km-feedback-textarea:focus {
	outline: none;
	border-color: var(--primary);
	background: var(--white, #fff);
}

.km-feedback-question {
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 0.75rem;
	color: var(--text-color);
}

.km-feedback-actions {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.km-feedback-btn {
	min-width: 5rem;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.km-feedback-thanks {
	font-size: 0.875rem;
	color: #2b8a3e;
	font-weight: 500;
}

.km-feedback-thanks.hidden {
	display: none;
}

.km-feedback-btn.hidden {
	display: none;
}

@media (max-width: 768px) {
	.km-pagination {
		flex-wrap: wrap;
	}
	.km-content-section {
		padding: 1rem;
	}
}

/* ======================================================= */
/* Knowledge Portal — Tab Bar                              */
/* ======================================================= */

.km-tab-bar {
	display: flex;
	border-bottom: 1px solid var(--border-color);
	margin: 1.25rem 0 0;
	flex-wrap: wrap;
}

.km-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.6rem 1.25rem;
	margin-bottom: -1px;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--text-muted);
	transition: color 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.km-tab:hover {
	color: var(--text-color);
}

.km-tab.active {
	color: var(--primary);
	border-bottom-color: var(--primary);
	font-weight: 600;
}

/* ======================================================= */
/* Knowledge Portal — Type Cards (All KBs tab)             */
/* ======================================================= */

.km-type-card {
	text-align: center;
	cursor: pointer;
	padding: 2rem 1rem;
	transition: box-shadow 0.15s, transform 0.1s;
	align-items: center;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

/* Remove the inherited geometric dot/gradient pattern */
.km-type-card::before {
	content: none;
}

.km-type-card:hover {
	transform: translateY(-2px);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.km-type-card-icon {
	font-size: 2.5rem;
	margin-bottom: 0.75rem;
	line-height: 1;
}

.km-type-card-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 0.5rem;
}

.km-type-card-badge {
	display: inline-block;
	font-size: 0.75rem;
	background: #e7f5ff;
	color: #065187;
	padding: 0.2rem 0.65rem;
	border-radius: 1rem;
	width: fit-content;
}

@media (max-width: 768px) {
	.km-tab {
		padding: 0.5rem 0.75rem;
		font-size: 0.8rem;
	}
	.km-type-card {
		padding: 1.25rem 0.75rem;
	}
	.km-type-card-icon {
		font-size: 2rem;
	}
}

/* ======================================================= */
/* Knowledge Portal — Anchor reset for <a.km-type-card>    */
/* ======================================================= */

a.km-type-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.km-type-card:hover {
	text-decoration: none;
	color: inherit;
}

/* ======================================================= */
/* Knowledge Portal — Search suggestions dropdown          */
/* ======================================================= */

.km-search-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	max-height: 280px;
	overflow-y: auto;
}

.km-suggestion-item {
	display: block;
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	color: var(--text-color);
	text-decoration: none;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.km-suggestion-item:hover {
	background: var(--bg-color, #f8f9fa);
	color: var(--primary);
	text-decoration: none;
}

/* ======================================================= */
/* Knowledge Article — Root Cause section variant          */
/* ======================================================= */

.km-content-section-root-cause {
	background: #fffbeb;
}

.km-content-section-root-cause .km-content-section-label {
	color: #92400e;
}

/* ======================================================= */
/* Knowledge Portal — Grid card: type icon + title row     */
/* ======================================================= */

.km-card-title-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.km-card-title-row .itsm-item-card-title {
	margin-bottom: 0;
	flex: 1;
}

.km-card-type-icon {
	flex-shrink: 0;
	line-height: 1;
	margin-top: 0.1rem;
	color: var(--text-muted);
}

/* Icon colour is set via inline style matching the corresponding km-type-badge colour */

/* ======================================================= */
/* Knowledge Portal — Article list cards (search state)    */
/* ======================================================= */

.km-article-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.km-article-list-card {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid #d7e4f4;
	border-radius: 8px;
	cursor: pointer;
	transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.km-article-list-card:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border-color: rgba(36, 144, 239, 0.35);
	background: #f6fbff;
}

/* Knowledge portal page chrome */
.km-portal-page {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-top: 30px;
}

.km-portal-page > * {
	position: relative;
	z-index: 1;
}

.km-list-icon {
	flex-shrink: 0;
	margin-top: 0.15rem;
	color: var(--text-muted);
	line-height: 1;
}

/* Icon colour is set via inline style matching the corresponding km-type-badge colour */

.km-list-body {
	flex: 1;
	min-width: 0;
}

.km-list-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-color, #1c2634);
	margin-bottom: 0.25rem;
}

.km-article-list-card:hover .km-list-title {
	color: var(--primary, #2490ef);
}

.km-list-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
	flex-wrap: wrap;
}

.km-list-category {
	font-size: 0.75rem;
	color: var(--text-muted, #8d99a6);
}

.km-list-excerpt {
	font-size: 0.875rem;
	color: var(--text-muted, #8d99a6);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Keyword highlight */
mark.km-highlight {
	background: #fff3bf;
	color: inherit;
	font-weight: 600;
	border-radius: 2px;
	padding: 0 1px;
}

/* ======================================================= */
/* Knowledge Portal — "Call Support" card                  */
/* ======================================================= */

.km-support-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1.25rem;
	background: #f8faff;
	border: 1px dashed #b0cff5;
	border-radius: 8px;
	margin-top: 0.25rem;
}

.km-support-text {
	font-size: 0.875rem;
	color: var(--text-muted, #8d99a6);
}

.km-support-link {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #2490ef;
	text-decoration: none;
	padding: 0.35rem 0.9rem;
	border: 1px solid #2490ef;
	border-radius: 5px;
	transition: background 0.15s, color 0.15s;
}

.km-support-link:hover {
	background: #2490ef;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 480px) {
	.km-support-card {
		flex-direction: column;
		align-items: flex-start;
	}
}