/* yearPicker.css */
/* Diskré popup-årvelger knyttet til .year-label */

.year-picker {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	padding: 8px;

	background: var(--content-bg, #ffffff);
	color: var(--content-text, #000000);

	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	z-index: 100000; /* over cards, tooltips, panels */

	/* 👇 begrens størrelse */
	max-width: min(420px, calc(100vw - 24px));

	/* 👇 grid som pakker seg pent */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: 6px;

	/* valgfritt: ikke la den bli for høy */
	max-height: min(320px, calc(100vh - 180px));
	overflow: auto;

	/* gjør scroll litt mindre “stygg” */
	overscroll-behavior: contain;

	transition:
		top 120ms ease-out,
		left 120ms ease-out;
}

.year-picker button {
	all: unset;
	cursor: pointer;
	text-align: center;

	padding: 6px 6px;
	border-radius: 6px;
	font-size: 0.85rem;
	line-height: 1.1;
}

.year-picker button:hover {
	background: rgba(0, 0, 0, 0.08);
}
body[data-theme="dark"] .year-picker button:hover {
	background: rgba(255, 255, 255, 0.12);
}

body[data-theme="dark"] .year-picker button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.year-picker button.active {
	font-weight: 600;
	text-decoration: underline;
	cursor: default;
}

/* Valgfritt, men pent: subtil indikator */
.year-label {
	cursor: default;
	z-index: 5;
}

.year-label:hover {
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

body[data-theme="dark"] .year-label:hover {
	box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.25);
}