@charset "UTF-8";
/*
 * style.css — минимален стартов стил на ядрото.
 * Стъпва върху Bootstrap 5 + Bootstrap Icons (зареждат се преди този файл).
 * Тук са само нещата, които Bootstrap не покрива: header/footer лейаут,
 * тостове, flash съобщения и няколко помощни класа.
 */

/* ── Помощни класове ─────────────────────────────── */
.fs-7    { font-size: .75rem; }
.fs-6-5  { font-size: .85rem; }

.form-label.required::after,
.form-label.req::after {
	content: "*";
	color: var(--bs-danger);
	margin-left: .2rem;
}

.badge-soft         { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary); }
.badge-soft-success { background: color-mix(in srgb, var(--bs-success) 12%, transparent); color: var(--bs-success); }
.badge-soft-danger  { background: color-mix(in srgb, var(--bs-danger)  12%, transparent); color: var(--bs-danger); }

/* ── Header / навигация ──────────────────────────── */
header {
	position: relative;
	padding: .75rem 0;
	border-bottom: 1px solid var(--bs-border-color);
	background: var(--bs-body-bg);
	z-index: 1020;
}
header nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.logo-box { text-decoration: none; min-width: 0; }
.logo {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 9px;
	overflow: hidden;
}
.logo img { width: 100%; height: 100%; display: block; }
.logo-text {
	color: var(--bs-body-color);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

header .menu ul {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
header .menu .nav-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--bs-body-color);
	padding: .4rem .65rem;
	border-radius: .5rem;
}
header .menu .nav-link:hover { background: var(--bs-tertiary-bg); }
header .menu .nav-link.active { color: var(--bs-success); background: color-mix(in srgb, var(--bs-success) 10%, transparent); }

/* бутон за менюто — само под lg (992px) */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	padding: 0;
	font-size: 1.75rem;
	color: var(--bs-body-color);
	background: transparent;
	border: 1px solid var(--bs-border-color);
	border-radius: .5rem;
}
.menu-toggle:hover { background: var(--bs-tertiary-bg); }
.menu-toggle:focus-visible { outline: 2px solid var(--bs-success); outline-offset: 2px; }

@media (max-width: 991.98px) {
	/* падащо меню под хедъра, на цялата ширина */
	header .menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: .5rem .75rem .75rem;
		background: var(--bs-body-bg);
		border-bottom: 1px solid var(--bs-border-color);
		box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
	}
	header .menu.open { display: block; }
	header .menu ul { flex-direction: column; align-items: stretch; gap: .25rem; }
	header .menu .nav-link { display: flex; padding: .65rem .75rem; }
}

/* ── Drop-зони за файлове (public/assets/js/upload-dropzone.js) ── */
.dropzone {
	position: relative;
	display: block;
	margin: 0;
	padding: 1.25rem 1rem;
	text-align: center;
	cursor: pointer;
	background: var(--bs-tertiary-bg);
	border: 2px dashed var(--bs-border-color);
	border-radius: .75rem;
	transition: border-color .15s, background-color .15s;
}
.dropzone:hover,
.dropzone.is-dragover {
	border-color: var(--bs-success);
	background: color-mix(in srgb, var(--bs-success) 7%, var(--bs-body-bg));
}
.dropzone.is-dragover { border-style: solid; }
.dropzone:has(.dz-input:focus-visible) { outline: 2px solid var(--bs-success); outline-offset: 2px; }
.dropzone.is-invalid { border-color: var(--bs-danger); background: color-mix(in srgb, var(--bs-danger) 5%, var(--bs-body-bg)); }
.dropzone.is-disabled { pointer-events: none; opacity: .65; }

/* input-ът остава във формата (required, валидация, клавиатура), но не се вижда */
.dropzone .dz-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.dz-empty { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.dz-icon { font-size: 2rem; line-height: 1; color: var(--bs-success); margin-bottom: .25rem; }
.dropzone.is-dragover .dz-icon { transform: translateY(-2px); }
.dz-title { font-weight: 600; }
.dz-hint { font-size: .8rem; color: var(--bs-secondary-color); }

.dz-file { display: none; align-items: center; gap: .75rem; text-align: left; }
.dropzone.has-file { border-style: solid; background: var(--bs-body-bg); }
.dropzone.has-file .dz-empty { display: none; }
.dropzone.has-file .dz-file { display: flex; }
.dz-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	overflow: hidden;
	font-size: 1.4rem;
	color: var(--bs-success);
	background: color-mix(in srgb, var(--bs-success) 10%, transparent);
	border-radius: .5rem;
}
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dz-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dz-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-size { font-size: .8rem; color: var(--bs-secondary-color); }
.dz-clear { color: var(--bs-secondary-color); text-decoration: none; }
.dz-clear:hover { color: var(--bs-danger); }
.dz-error:empty { display: none; }
.dz-error { margin-top: .5rem; font-size: .8rem; color: var(--bs-danger); }

/* компактна — на един ред (напр. иконата) */
.dropzone-compact { padding: .75rem 1rem; }
.dropzone-compact .dz-empty { flex-direction: row; justify-content: center; gap: .6rem; }
.dropzone-compact .dz-icon { font-size: 1.4rem; margin: 0; }
.dropzone-compact .dz-hint::before { content: "— "; }

.upload-progress { margin-top: .75rem; }
.upload-progress .progress { height: .6rem; }

/* ── Footer ──────────────────────────────────────── */
footer { padding-bottom: 1.5rem; }

/* „GG" знак на gg-webapp.com в подвала */
.striped-text {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .5px;
	color: var(--bs-emphasis-color);
	user-select: none;
}

/* ── Профил ──────────────────────────────────────── */
.profile-nav .nav-link.active {
	background: var(--bs-primary);
	color: #fff;
}

/* ── Flash съобщения (@feedback) ─────────────────── */
.js-flash { position: relative; overflow: hidden; }
.flash-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: currentColor;
	opacity: .35;
	animation-name: flash-shrink;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes flash-shrink { from { width: 100%; } to { width: 0; } }

/* ── Тостове (assets/js/script.js → showToast) ───── */
.toaster {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1080;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	max-width: min(360px, 92vw);
}
.toastx {
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color);
	border-left: 4px solid var(--bs-secondary);
	border-radius: .5rem;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
	padding: .6rem .8rem;
}
.toastx.success { border-left-color: var(--bs-success); }
.toastx.danger  { border-left-color: var(--bs-danger); }
.toastx.warning,
.toastx.offline { border-left-color: var(--bs-warning); }
.toastx.info    { border-left-color: var(--bs-info); }
.toastx.online  { border-left-color: var(--bs-success); }
.toastx .hdr { margin-bottom: .15rem; }
.toastx .hdr button { background: none; color: var(--bs-secondary-color); }
.toastx .body { font-size: .9rem; }
.toastx .progress {
	height: 3px;
	margin-top: .5rem;
	background: var(--bs-border-color);
	border-radius: 2px;
	overflow: hidden;
}
.toastx .progress .bar { height: 100%; width: 100%; background: var(--bs-primary); }