/* ============================================================================
   VEZILKA — KPI Tracker page
   Dashboard styles, scoped under `.vezilka-kpi`. Palette inherits from the
   theme (main.css :root) and layers the KPI-specific accent tokens on top.
   Responsive via a container query on the dashboard itself (works inside
   narrow columns) with a media-query fallback for older engines.
   ============================================================================ */

/* ---------- Hero ---------- */
.kpi-hero__intro {
	color: var(--color-muted);
	font-size: 19px;
	line-height: 1.75;
	max-width: 760px;
}
.kpi-hero__intro p { margin: 0 0 1em; }
.kpi-hero__intro p:last-child { margin-bottom: 0; }

/* ---------- Dashboard shell ---------- */
.vezilka-kpi {
	/* KPI accent tokens, aligned with the theme's brand palette */
	--vk-linen:    var(--color-bg-alt, #FBF6EE);
	--vk-linen-2:  #F3F1E9;
	--vk-ink:      var(--color-text, #211C1A);
	--vk-muted:    var(--color-muted, #726A62);
	--vk-line:     var(--color-border, #E6DFD2);
	--vk-thread:   var(--color-red, #D7263D);
	--vk-thread-deep: var(--color-red-dark, #B61E32);
	--vk-indigo:   #0C0D5A;
	--vk-gold:     var(--color-yellow-dark, #C08A2D);
	--vk-white:    var(--color-surface, #FFFFFF);
	--vk-radius:   var(--radius-md, 16px);
	--vk-shadow:   var(--shadow-md, 0 1px 2px rgba(33,28,26,.04), 0 12px 30px -18px rgba(33,28,26,.22));

	container-type: inline-size;
	container-name: vezkpi;
	color: var(--vk-ink);
}
.vezilka-kpi * { box-sizing: border-box; }
.vezilka-kpi ol { list-style: none; margin: 0; padding: 0; }

.vezilka-kpi .vk-inner { padding-top: 8px; }

/* ---------- Filter (chips) ---------- */
.vk-filter {
	display: flex; gap: 8px; margin: 0 0 26px;
	overflow-x: auto; padding-bottom: 4px;
	scrollbar-width: none;
}
.vk-filter::-webkit-scrollbar { display: none; }
.vk-chip {
	flex: 0 0 auto;
	font-family: inherit; font-size: .82rem; font-weight: 500;
	color: #5b544e; background: var(--vk-white);
	border: 1px solid var(--vk-line); border-radius: 999px;
	padding: 9px 16px; cursor: pointer; white-space: nowrap;
	transition: border-color .18s, color .18s, background .18s;
	display: inline-flex; align-items: center; gap: 8px;
}
.vk-chip:hover { border-color: #cdbfa8; color: var(--vk-ink); }
.vk-chip__n { font-size: .72rem; color: var(--vk-muted); font-variant-numeric: tabular-nums; }
.vk-chip.is-active { background: var(--vk-ink); border-color: var(--vk-ink); color: #fff; }
.vk-chip.is-active .vk-chip__n { color: rgba(255,255,255,.6); }
.vk-chip:focus-visible { outline: 2px solid var(--vk-thread); outline-offset: 2px; }

/* ---------- Filter (mobile dropdown) ---------- */
.vk-filter-select { display: none; margin: 0 0 26px; }
.vk-fs-label {
	display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--vk-muted); margin: 0 0 8px;
}
.vk-fs-select {
	width: 100%; font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--vk-ink);
	background-color: var(--vk-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23D7263D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
	border: 1px solid var(--vk-line); border-radius: 12px;
	padding: 14px 42px 14px 16px; line-height: 1.2;
	appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
}
.vk-fs-select:focus-visible { outline: 2px solid var(--vk-thread); outline-offset: 2px; border-color: var(--vk-thread); }

/* ---------- Groups ---------- */
.vk-group { margin-bottom: 38px; scroll-margin-top: 24px; }
.vk-group[hidden] { display: none; }
.vk-group__head {
	display: flex; align-items: flex-end; gap: 16px;
	padding-bottom: 16px; margin-bottom: 22px;
	border-bottom: 1px solid var(--vk-line);
}
.vk-group__code {
	font-weight: 800; font-size: 1.35rem; color: var(--vk-thread);
	line-height: 1; letter-spacing: -.02em;
}
.vk-group__name { font-size: 1.05rem; font-weight: 600; color: var(--vk-ink); line-height: 1.2; }
.vk-group__count { margin-left: auto; font-size: .8rem; color: var(--vk-muted); white-space: nowrap; padding-bottom: 2px; }

.vk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ---------- KPI card ---------- */
.vk-card {
	background: var(--vk-white); border: 1px solid var(--vk-line);
	border-radius: var(--vk-radius); padding: 20px 20px 18px;
	box-shadow: 0 1px 2px rgba(33,28,26,.03);
	transition: box-shadow .2s, border-color .2s, transform .2s;
	display: flex; flex-direction: column;
}
.vk-card:hover { box-shadow: var(--vk-shadow); border-color: #dccfb8; transform: translateY(-1px); }
.vk-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.vk-tag {
	font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	padding: 3px 7px; border-radius: 5px;
	background: rgba(12,13,90,.07); color: var(--vk-indigo);
}
.vk-code { font-size: .9rem; font-weight: 700; color: var(--vk-muted); letter-spacing: .01em; }
.vk-pct { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--vk-muted); font-variant-numeric: tabular-nums; }
.vk-card.is-met .vk-pct { color: var(--vk-gold); }
.vk-desc { font-size: .9rem; line-height: 1.42; color: #3d3733; margin: 0 0 16px; flex: 1; }

/* ---------- Progress meter ---------- */
.vk-meter {
	position: relative; height: 16px; border-radius: 999px;
	background: var(--vk-linen-2); border: 1px solid var(--vk-line); overflow: hidden;
}
.vk-meter__fill {
	position: absolute; inset: 0; width: 0;
	background: linear-gradient(180deg, #a52334, var(--vk-thread) 55%, var(--vk-thread-deep));
	border-radius: 999px;
	transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.vk-meter__node {
	position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
	transform: translate(-50%,-50%) rotate(45deg);
	background: var(--vk-thread-deep); border: 2px solid var(--vk-linen);
	border-radius: 2px; transition: left 1.1s cubic-bezier(.22,.61,.36,1); z-index: 2;
}
.vk-card.is-met .vk-meter__fill { background: linear-gradient(180deg, #d9a640, var(--vk-gold) 60%, #a9761f); }
.vk-card.is-met .vk-meter__node { background: #8f6318; }

.vk-card__foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 13px; gap: 12px; }
.vk-value { font-size: .9rem; color: var(--vk-ink); font-variant-numeric: tabular-nums; }
.vk-value b { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.vk-value span { color: var(--vk-muted); }
.vk-unit { font-size: .76rem; color: var(--vk-muted); text-align: right; }

/* ---------- Footer timeline ---------- */
.vk-foot { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--vk-line); }
.vk-foot__label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vk-thread); margin: 0 0 22px; }
.vk-timeline { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; gap: 8px; margin-bottom: 22px; }
.vk-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 0; border-top: 2px solid var(--vk-line); z-index: 0; }
.vk-tl { position: relative; padding-top: 22px; }
.vk-tl__knot {
	position: absolute; top: 0; left: 0; width: 13px; height: 13px;
	background: var(--vk-linen); border: 2px solid var(--vk-thread);
	transform: rotate(45deg); border-radius: 2px; z-index: 1;
}
.vk-tl--current .vk-tl__knot { background: var(--vk-thread); box-shadow: 0 0 0 4px rgba(215,38,61,.14); }
.vk-tl--current .vk-tl__m { color: var(--vk-thread); }
.vk-tl__badge {
	display: inline-block; margin-top: 6px; font-size: .6rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--vk-thread); background: rgba(215,38,61,.09); border-radius: 5px; padding: 2px 7px;
}
.vk-tl__m { display: block; font-weight: 700; font-size: 1rem; color: var(--vk-ink); letter-spacing: -.01em; }
.vk-tl__d { display: block; font-size: .74rem; color: var(--vk-muted); margin-top: 2px; }
.vk-foot__note { font-size: .8rem; color: var(--vk-muted); margin: 0; }
.vk-noscript { color: var(--vk-muted); padding: 30px 0; }

/* ---------- Reveal animation ---------- */
.vk-card { opacity: 0; transform: translateY(14px); }
.vk-card.is-in { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }

/* ---------- Responsive (container query, driven by the dashboard width) --- */
@container vezkpi (max-width: 768px) {
	.vk-filter { display: none; }
	.vk-filter-select { display: block; }
	.vk-grid { grid-template-columns: 1fr; }
	.vk-group__head { flex-wrap: wrap; gap: 8px; }
	.vk-group__count { margin-left: 0; width: 100%; }
	.vk-timeline { display: block; margin-bottom: 18px; }
	.vk-timeline::before { display: none; }
	.vk-tl { padding: 0 0 22px 30px; }
	.vk-tl:last-child { padding-bottom: 0; }
	.vk-tl::before { content: ""; position: absolute; left: 6px; top: 9px; bottom: -2px; width: 2px; background: var(--vk-line); }
	.vk-tl:last-child::before { display: none; }
	.vk-tl__knot { top: 4px; left: 0; }
	.vk-tl__badge { margin-top: 8px; }
}
/* Fallback for engines without container-query support */
@supports not (container-type: inline-size) {
	@media (max-width: 768px) {
		.vk-filter { display: none; }
		.vk-filter-select { display: block; }
		.vk-grid { grid-template-columns: 1fr; }
		.vk-group__head { flex-wrap: wrap; gap: 8px; }
		.vk-group__count { margin-left: 0; width: 100%; }
		.vk-timeline { display: block; margin-bottom: 18px; }
		.vk-timeline::before { display: none; }
		.vk-tl { padding: 0 0 22px 30px; }
		.vk-tl:last-child { padding-bottom: 0; }
		.vk-tl::before { content: ""; position: absolute; left: 6px; top: 9px; bottom: -2px; width: 2px; background: var(--vk-line); }
		.vk-tl:last-child::before { display: none; }
		.vk-tl__knot { top: 4px; left: 0; }
		.vk-tl__badge { margin-top: 8px; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.vezilka-kpi *, .vk-card { transition: none !important; animation: none !important; }
	.vk-card { opacity: 1; transform: none; }
}

.page-id-879 section,
.postid-879 section {
    padding: 0 !important;
}