/* =============================================================
   KirkeTjek — Reusable components (buttons, cards, badges, pills)
   ============================================================= */

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.4rem;
	font-size: var(--kt-fs-400);
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--kt-radius-pill);
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--kt-dur-fast) var(--kt-ease),
		box-shadow var(--kt-dur-base) var(--kt-ease),
		background-color var(--kt-dur-fast) var(--kt-ease),
		color var(--kt-dur-fast) var(--kt-ease),
		border-color var(--kt-dur-fast) var(--kt-ease);
}

.btn:active {
	transform: translateY(1px);
}

.btn svg {
	width: 1.15em;
	height: 1.15em;
}

.btn--primary {
	background: var(--kt-primary);
	color: var(--kt-on-primary);
	box-shadow: var(--kt-shadow-primary);
}

.btn--primary:hover {
	background: var(--kt-primary-strong);
	color: var(--kt-on-primary);
	box-shadow: 0 18px 40px rgba(108, 84, 136, 0.4);
	transform: translateY(-2px);
}

.btn--ghost {
	background: var(--kt-surface);
	color: var(--kt-primary);
	border-color: var(--kt-line-strong);
}

.btn--ghost:hover {
	color: var(--kt-primary-strong);
	border-color: var(--kt-primary);
	background: var(--kt-surface-2);
}

.btn--light {
	background: rgba(255, 255, 255, 0.12);
	color: var(--kt-on-dark);
	border-color: rgba(255, 255, 255, 0.28);
}

.btn--light:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--kt-on-dark);
}

.btn--lg {
	padding: 1rem 1.8rem;
	font-size: var(--kt-fs-500);
}

.btn--block {
	width: 100%;
}

/* ---- Pill / tag ---- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	font-size: var(--kt-fs-300);
	font-weight: 600;
	border-radius: var(--kt-radius-pill);
	background: var(--kt-primary-container);
	color: var(--kt-on-primary-container);
}

.pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kt-primary);
}

/* ---- Cards ---- */
.card {
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
	border-radius: var(--kt-radius-lg);
	padding: var(--kt-space-6);
	box-shadow: var(--kt-shadow-sm);
	transition: transform var(--kt-dur-base) var(--kt-ease),
		box-shadow var(--kt-dur-base) var(--kt-ease),
		border-color var(--kt-dur-base) var(--kt-ease);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kt-shadow-md);
	border-color: var(--kt-line-strong);
}

/* ---- Feature icon medallion ---- */
.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--kt-radius-md);
	background: var(--kt-primary-container);
	color: var(--kt-primary);
	margin-bottom: var(--kt-space-4);
}

.feature-icon svg {
	width: 26px;
	height: 26px;
}

/* ---- Status chip (mirrors the registration grid) ---- */
.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.75rem;
	font-size: var(--kt-fs-300);
	font-weight: 600;
	border-radius: var(--kt-radius-pill);
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
}

.status-chip__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: none;
}

.status-chip[data-status="present"]    .status-chip__dot { background: var(--kt-status-present); }
.status-chip[data-status="sick"]       .status-chip__dot { background: var(--kt-status-sick); }
.status-chip[data-status="noshow"]     .status-chip__dot { background: var(--kt-status-noshow); }
.status-chip[data-status="substitute"] .status-chip__dot { background: var(--kt-status-substitute); }
.status-chip[data-status="leave"]      .status-chip__dot { background: var(--kt-status-leave); }