/* =====================================================================
   Swisslogistik · Command-Palette / Schnellsuche (Strg/Cmd+K)
   Eigenständiges Overlay – konsistent mit App-Designsprache.
   ===================================================================== */

.sl-cmd-overlay {
	position: fixed; inset: 0; z-index: 1085;
	display: flex; align-items: flex-start; justify-content: center;
	padding: 12vh 1rem 1rem;
	background: rgba(15, 23, 42, .45);
	backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .16s ease;
}
.sl-cmd-overlay.show { opacity: 1; }

.sl-cmd {
	width: 100%; max-width: 560px;
	background: var(--bs-body-bg, #fff);
	border: 1px solid var(--bs-border-color, #e2e8f0);
	border-radius: 18px;
	box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .35), 0 8px 22px -10px rgba(15, 23, 42, .25);
	overflow: hidden;
	transform: translateY(-10px) scale(.985);
	transition: transform .16s ease;
	display: flex; flex-direction: column;
	max-height: 70vh;
}
.sl-cmd-overlay.show .sl-cmd { transform: none; }

/* --- Suchkopf --- */
.sl-cmd-head {
	display: flex; align-items: center; gap: .65rem;
	padding: .95rem 1.15rem;
	border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
}
.sl-cmd-head .sl-cmd-search-icon {
	color: var(--bs-primary, #f9090c);
	font-size: 1.05rem; line-height: 1; flex: 0 0 auto;
	display: inline-flex; margin-top: 1px;
}
.sl-cmd-input {
	flex: 1 1 auto;
	border: 0; outline: 0; background: transparent;
	font-size: 1.05rem; color: var(--bs-body-color, #1e293b);
	padding: 0;
}
.sl-cmd-input::placeholder { color: var(--bs-secondary-color, #94a3b8); }
.sl-cmd-kbd {
	flex: 0 0 auto;
	font-size: .68rem; font-weight: 600; letter-spacing: .02em;
	color: var(--bs-secondary-color, #64748b);
	background: var(--bs-tertiary-bg, #f1f5f9);
	border: 1px solid var(--bs-border-color, #e2e8f0);
	border-radius: 7px; padding: .12rem .42rem;
}

/* --- Ergebnisliste --- */
.sl-cmd-results {
	overflow-y: auto; padding: .4rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--bs-primary-rgb, 249, 9, 12), .35) transparent;
}
.sl-cmd-results::-webkit-scrollbar { width: 8px; }
.sl-cmd-results::-webkit-scrollbar-thumb {
	background: rgba(var(--bs-primary-rgb, 249, 9, 12), .3); border-radius: 50rem;
}

.sl-cmd-group-label {
	display: flex; align-items: center; gap: .4rem;
	font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--bs-secondary-color, #94a3b8);
	padding: .65rem .8rem .3rem;
}
.sl-cmd-group-label i { font-size: .72rem; line-height: 1; }

.sl-cmd-item {
	display: flex; align-items: center; gap: .7rem;
	padding: .55rem .7rem;
	border-radius: 11px;
	cursor: pointer;
	color: var(--bs-body-color, #1e293b);
	transition: background .12s ease, color .12s ease;
}
.sl-cmd-item:hover,
.sl-cmd-item.active {
	background: var(--bs-primary-bg-subtle, #eef2fe);
	color: var(--bs-primary-text-emphasis, #16306f);
}
.sl-cmd-item.active { box-shadow: inset 0 0 0 1px var(--bs-primary-border-subtle, #cdd9fb); }

.sl-cmd-item-icon {
	flex: 0 0 auto;
	width: 34px; height: 34px; border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--bs-tertiary-bg, #f1f5f9);
	color: var(--bs-primary, #f9090c);
	font-size: .92rem;
}
.sl-cmd-item.active .sl-cmd-item-icon,
.sl-cmd-item:hover .sl-cmd-item-icon {
	background: rgba(var(--bs-primary-rgb, 249, 9, 12), .14);
}
.sl-cmd-item-body { flex: 1 1 auto; min-width: 0; }
.sl-cmd-item-title {
	font-size: .92rem; font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-cmd-item-sub {
	font-size: .74rem; color: var(--bs-secondary-color, #94a3b8);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-cmd-item .sl-cmd-item-enter {
	flex: 0 0 auto; font-size: .7rem; color: var(--bs-secondary-color, #94a3b8);
	opacity: 0; transition: opacity .12s ease;
}
.sl-cmd-item.active .sl-cmd-item-enter { opacity: 1; }

/* --- Treffer-Hervorhebung --- */
.sl-cmd-item-title mark {
	background: transparent; padding: 0;
	color: var(--bs-primary, #f9090c); font-weight: 700;
}

/* --- Leerzustand --- */
.sl-cmd-empty {
	text-align: center; padding: 2.2rem 1rem;
	color: var(--bs-secondary-color, #94a3b8); font-size: .9rem;
}
.sl-cmd-empty i { display: block; font-size: 1.6rem; margin-bottom: .5rem; opacity: .6; }

/* --- Fusszeile --- */
.sl-cmd-foot {
	display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
	padding: .55rem 1.05rem;
	border-top: 1px solid var(--bs-border-color, #e2e8f0);
	background: var(--bs-tertiary-bg, #f8fafc);
	font-size: .72rem; color: var(--bs-secondary-color, #94a3b8);
}
.sl-cmd-foot .sl-cmd-foot-hint { display: inline-flex; align-items: center; gap: .35rem; }
.sl-cmd-foot kbd {
	font-size: .65rem; font-weight: 600;
	background: var(--bs-body-bg, #fff);
	border: 1px solid var(--bs-border-color, #e2e8f0);
	border-radius: 5px; padding: .05rem .32rem; color: inherit;
}

@media (max-width: 575.98px) {
	.sl-cmd-overlay { padding-top: 6vh; }
	.sl-cmd-foot { display: none; }
}