/* BEM CSS — Dashboard obchodníka (kanban) */

/* ========== STICKY QUICKBAR ========== */
.quickbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
	margin: -32px -24px 24px -24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.quickbar__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.quickbar__title {
	display: flex;
	align-items: center;
	gap: 14px;
}

.quickbar__back {
	color: #64748b;
	font-size: 13px;
	font-weight: 500;
}

.quickbar__back:hover {
	color: #1e3a8a;
}

.quickbar__firma {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	border-left: 1px solid #e2e8f0;
	padding-left: 14px;
}

.quickbar__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.quickbar__btn {
	padding: 8px 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 7px;
	color: #475569;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
	font-family: inherit;
}

.quickbar__btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #0f172a;
}

.quickbar__btn--primary {
	background: #1e3a8a;
	color: #fff;
	border-color: #1e3a8a;
}

.quickbar__btn--primary:hover {
	background: #1e40af;
	color: #fff;
	border-color: #1e40af;
}

/* ========== HLAVIČKA DASHBOARDU ========== */
.dashboard-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.dashboard-head__title {
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 4px;
}

.dashboard-head__subtitle {
	font-size: 14px;
	color: #64748b;
}

.dashboard-head__period {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 4px 4px 4px 4px;
}

.period-btn {
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: #475569;
	font-size: 14px;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.15s;
}

.period-btn:hover {
	background: #f1f5f9;
}

.period-current {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	padding: 0 12px;
}

/* ========== MINI STATS ========== */
.ministats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}

.ministats__card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-top: 3px solid #94a3b8;
	border-radius: 12px;
	padding: 18px 20px;
}

.ministats__card--cyan   { border-top-color: #0891b2; }
.ministats__card--purple { border-top-color: #7c3aed; }
.ministats__card--green  { border-top-color: #059669; }
.ministats__card--amber  { border-top-color: #d97706; }

.ministats__label {
	font-size: 12px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 8px;
}

.ministats__value {
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1;
	margin-bottom: 6px;
}

.ministats__sub {
	font-size: 12px;
	color: #64748b;
	margin-bottom: 10px;
}

.ministats__progress {
	height: 6px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
}

.ministats__progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #1e3a8a, #3b82f6);
	border-radius: 999px;
	transition: width 0.3s;
}

/* ========== KANBAN ========== */
.kanban {
	margin-bottom: 32px;
}

.kanban__board {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.kanban__col {
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px;
	display: flex;
	flex-direction: column;
}

.kanban__col--plan      { border-top: 3px solid #0891b2; }
.kanban__col--dnes      { border-top: 3px solid #dc2626; }
.kanban__col--planovane { border-top: 3px solid #7c3aed; }
.kanban__col--cekam     { border-top: 3px solid #d97706; }

.kanban__col-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.kanban__col-title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.kanban__col-count {
	background: #fff;
	color: #475569;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	border: 1px solid #e2e8f0;
}

.kanban__col-desc {
	font-size: 11px;
	color: #94a3b8;
	margin-bottom: 12px;
	line-height: 1.4;
}

.kanban__cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ========== KARTIČKA KANBANU ========== */
.card-kanban {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 14px;
	cursor: pointer;
	transition: all 0.15s;
	font-size: 13px;
}

.card-kanban:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

.card-kanban__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.card-kanban__title {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 4px;
	line-height: 1.3;
}

.card-kanban__popis {
	font-size: 12px;
	color: #64748b;
	margin-bottom: 8px;
	line-height: 1.4;
}

.card-kanban__meta {
	font-size: 11px;
	color: #94a3b8;
	padding-top: 8px;
	border-top: 1px solid #f1f5f9;
}

/* — barevné varianty (Plán březen) — */
.card-kanban--cyan   { border-left: 3px solid #0891b2; }
.card-kanban--green  { border-left: 3px solid #059669; }
.card-kanban--purple { border-left: 3px solid #7c3aed; }
.card-kanban--amber  { border-left: 3px solid #d97706; }

/* — progress bar uvnitř kartičky — */
.card-kanban__progress {
	position: relative;
	height: 8px;
	background: #f1f5f9;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
}

.card-kanban__progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #0891b2, #06b6d4);
	border-radius: 999px;
}

.card-kanban__progress-label {
	position: absolute;
	right: 0;
	top: -16px;
	font-size: 10px;
	font-weight: 700;
	color: #475569;
}

/* — graf odměny — */
.card-kanban__graf {
	background: #f0fdf4;
	border-radius: 6px;
	padding: 8px;
	margin: 8px 0;
	position: relative;
}

.card-kanban__graf svg {
	width: 100%;
	height: 50px;
	display: block;
}

.card-kanban__castka {
	position: absolute;
	right: 12px;
	top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #047857;
}

/* — Akční kroky dnes — priority — */
.card-kanban__cas {
	font-size: 11px;
	font-weight: 700;
	color: #1e3a8a;
	background: #eff6ff;
	padding: 2px 8px;
	border-radius: 4px;
}

.card-kanban__flag {
	font-size: 14px;
}

.card-kanban__flag--red   { color: #dc2626; }
.card-kanban__flag--amber { color: #d97706; }
.card-kanban__flag--gray  { color: #cbd5e1; }

.card-kanban--prio-vysoka {
	border-left: 3px solid #dc2626;
	background: #fef2f2;
}

.card-kanban--prio-normalni {
	border-left: 3px solid #d97706;
}

.card-kanban--prio-nizka {
	border-left: 3px solid #cbd5e1;
}

.card-kanban__firma {
	font-size: 11px;
	color: #475569;
	padding-top: 6px;
	border-top: 1px solid #f1f5f9;
}

.card-kanban__firma a {
	color: #1e3a8a;
	font-weight: 500;
}

.card-kanban__firma a:hover {
	text-decoration: underline;
}

.card-kanban__system {
	display: inline-block;
	margin-top: 6px;
	font-size: 10px;
	color: #7c3aed;
	background: #f5f3ff;
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 600;
}

/* — Plán (kalendář) — */
.card-kanban--kalendar {
	border-left: 3px solid #7c3aed;
}

.card-kanban--obecny {
	border-left: 3px solid #94a3b8;
}

.card-kanban__zdroj {
	font-size: 10px;
	font-weight: 600;
	color: #64748b;
	background: #f1f5f9;
	padding: 2px 8px;
	border-radius: 4px;
}

.card-kanban__datum {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}

/* — Čekám — */
.card-kanban--cekam {
	border-left: 3px solid #d97706;
	background: #fffbeb;
}

.card-kanban__stav {
	font-size: 12px;
	color: #92400e;
	background: #fef3c7;
	padding: 4px 8px;
	border-radius: 6px;
	font-weight: 600;
	margin-bottom: 8px;
	display: inline-block;
}

.card-kanban__cekam-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	color: #64748b;
	padding-top: 6px;
	border-top: 1px solid #fde68a;
}

.card-kanban__zpet {
	color: #b45309;
	font-weight: 600;
}

/* ========== CENÍK ========== */
.cenik {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
}

.cenik__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.cenik__title {
	font-size: 18px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 4px;
}

.cenik__subtitle {
	font-size: 13px;
	color: #64748b;
}

.cenik__action {
	background: transparent;
	border: 1px solid #1e3a8a;
	color: #1e3a8a;
	padding: 8px 14px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.15s;
}

.cenik__action:hover {
	background: #eff6ff;
}

.cenik__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.cenik__item {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 14px 16px;
	transition: border-color 0.15s, transform 0.15s;
}

.cenik__item:hover {
	border-color: #1e3a8a;
	transform: translateY(-1px);
}

.cenik__item-name {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 4px;
}

.cenik__item-cena {
	font-size: 16px;
	font-weight: 700;
	color: #1e3a8a;
	margin-bottom: 6px;
}

.cenik__item-popis {
	font-size: 11px;
	color: #64748b;
	line-height: 1.4;
}

/* ========== BADGE ========== */
.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.badge--green  { background: #d1fae5; color: #047857; }
.badge--cyan   { background: #cffafe; color: #0e7490; }
.badge--amber  { background: #fef3c7; color: #92400e; }
.badge--purple { background: #ede9fe; color: #6d28d9; }
.badge--red    { background: #fee2e2; color: #b91c1c; }

/* ========== RESPONZIVITA ========== */
@media (max-width: 1100px) {
	.kanban__board {
		grid-template-columns: repeat(2, 1fr);
	}
	.ministats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.kanban__board {
		grid-template-columns: 1fr;
	}
	.quickbar {
		margin: -20px -16px 16px -16px;
	}
	.quickbar__inner {
		padding: 10px 16px;
	}
	.dashboard-head {
		flex-direction: column;
		align-items: stretch;
	}
}