/* SnippetBox – minimales Custom-CSS (alles andere macht Bootstrap 5) */

/* Sprachen-Badge-Leiste */
#lang-bar .lang-badge {
	font-size: .85rem;
	padding: .45em .9em;
	user-select: none;
}

/* Code-Vorschau in den Kacheln: begrenzte Höhe, Fade nach unten */
.code-preview pre {
	max-height: 11rem;
	overflow: hidden;
	padding: .5rem .75rem;
	font-size: .8rem;
}

.code-preview::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 2rem;
	background: linear-gradient(transparent, var(--bs-body-bg));
	pointer-events: none;
	border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

/* Copy/Raw-Buttons erst beim Hover über die Karte zeigen */
.code-preview .btn {
	opacity: 0;
	transition: opacity .15s, background-color .15s;
	background-color: var(--bs-body-bg);
	/* deckend, Code scheint nicht durch */
	color: var(--bs-body-color);
}

/* Kachel-Hover: nur einblenden, KEINE Farbänderung */
.snippet-card:hover .code-preview .btn {
	opacity: 1;
}

/* Hervorhebung erst beim Hover über den Button selbst */
.code-preview .btn:hover {
	background-color: var(--bs-secondary-bg);
	color: var(--bs-body-color);
}

/* Beschreibung auf 2 Zeilen begrenzen */
.desc-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CodeMirror-Editor im Modal */
.frag-editor .cm-editor {
	min-height: 10rem;
	max-height: 24rem;
	font-size: .85rem;
}

.frag-editor .cm-editor.cm-focused {
	outline: none;
}

.frag-editor .cm-scroller {
	overflow: auto;
}

/* Fragment-Leiste über der Vorschau */
.frag-bar {
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-bottom: 0;
}

.code-preview {
	border-top: 0 !important;
}

/* Eigene XXL-Modalbreite (Bootstrap kennt nur bis modal-xl) */
@media (min-width: 1400px) {
	.modal-xxl {
		--bs-modal-width: min(1700px, 95vw);
	}
}

/* Breite Monitore: 5 bzw. 6 Karten nebeneinander */
@media (min-width: 1900px) {
	#cards>.col {
		width: 20%;
	}
}

@media (min-width: 2400px) {
	#cards>.col {
		width: 16.6667%;
	}
}

/* Titel + Meta-Zeile sind klickbar (öffnen den Editor) */
.snippet-card .card-click {
	cursor: pointer;
}

.snippet-card h5.card-click:hover {
	text-decoration: underline;
}

.tag-suggest { top: 100%; left: 0; right: 0; max-height: 16rem; overflow-y: auto; }

/* ---------------------------------------------------------- Drag & Drop */

/* Globales Overlay bei Datei-Drag über das Fenster */
#drop-overlay {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: none;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--bs-primary) 12%, rgba(0, 0, 0, .55));
	backdrop-filter: blur(2px);
}

#drop-overlay.show {
	display: flex;
}

#drop-overlay .drop-box {
	pointer-events: none;
	border: .25rem dashed rgba(255, 255, 255, .85);
	border-radius: var(--bs-border-radius-xl, 1rem);
	padding: 3rem 4rem;
	color: #fff;
	text-align: center;
	background: rgba(0, 0, 0, .25);
}

#drop-overlay .drop-box .bi {
	font-size: 3.5rem;
}

/* Drop-Zone innerhalb des offenen Modals */
#ed-fragments.frag-dragover {
	outline: .2rem dashed var(--bs-primary);
	outline-offset: .35rem;
	border-radius: var(--bs-border-radius);
	background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}