/* =========================
   Icon Button System
   ========================= */

.icon-btn {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0.25rem;
	border-radius: 0.375rem;
	line-height: 0;
	cursor: pointer;
	color: currentColor;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.icon-btn.btn-action {
	width: var(--action-btn-height);
	height: var(--action-btn-height);
	padding: var(--action-icon-btn-padding);

	border: var(--action-btn-border) solid var(--myweek-green-dark);
	border-radius: var(--action-btn-radius);
	background: var(--myweek-bg);

	flex-shrink: 0;
}

/* Standard size, overridable per button */
.icon-btn.btn-action .icon {
	width: var(--action-icon-size-current, var(--action-icon-size));
	height: var(--action-icon-size-current, var(--action-icon-size));
}

.icon-btn--delete:hover {
	color: var(--income-red);
}

/* Animation (optional global) */
.icon-btn:hover .icon {
	transform: translateY(-1px);
	opacity: 0.9;
}

.icon-btn:active .icon {
	transform: scale(0.96);
	opacity: 0.7;
}

.icon-btn:focus-visible {
	outline: 0.1875rem solid var(--myweek-green-dark);
	outline-offset: 0.125rem;
}

/* Dark Mode */
[data-bs-theme="dark"] .icon-btn {
	color: #fff;
}