/*!
 * AckItsADate styles. Everything is driven by the CSS variables declared on .aiad below,
 * each with a light-theme fallback, so the picker looks complete on any site as-is. To match a
 * host theme (including dark mode), redeclare these variables on .aiad in your own stylesheet -
 * no need to touch the rules here. Example:
 *     .aiad { --aiad-bg: #0F172A; --aiad-fg: #F8FAFC; --aiad-border: #1E293B; ... }
 */
.aiad {
	--aiad-bg: #ffffff;
	--aiad-fg: #0f172a;
	--aiad-muted: #64748b;
	--aiad-border: #e2e8f0;
	--aiad-shadow: 0 12px 40px rgba(15, 23, 42, .22);
	--aiad-hover: #eef2f6;
	--aiad-head-fg: #334155;
	--aiad-accent: #0b7a94;
	--aiad-accent-fg: #ffffff;
	--aiad-today: #d5160c;
	--aiad-radius: 10px;
	--aiad-font: inherit;

	position: fixed;
	z-index: 100000;
	width: 236px;
	box-sizing: border-box;
	padding: 8px;
	background: var(--aiad-bg);
	color: var(--aiad-fg);
	border: 1px solid var(--aiad-border);
	border-radius: var(--aiad-radius);
	box-shadow: var(--aiad-shadow);
	font-family: var(--aiad-font);
	font-size: 13px;
	line-height: 1.2;
	user-select: none;
	-webkit-user-select: none;
}
.aiad *, .aiad *::before, .aiad *::after { box-sizing: border-box; }

/* Header: prev / title / next */
.aiad-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.aiad-nav, .aiad-title, .aiad-btn {
	font-family: inherit; color: var(--aiad-fg); background: transparent;
	border: 0; cursor: pointer; border-radius: 6px; padding: 0;
}
.aiad-nav {
	width: 30px; height: 30px; flex: 0 0 auto; font-size: 18px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.aiad-title {
	flex: 1 1 auto; height: 30px; font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.aiad-nav:hover, .aiad-title:hover { background: var(--aiad-hover); }
.aiad-nav:focus-visible, .aiad-title:focus-visible, .aiad-day:focus-visible,
.aiad-cell:focus-visible, .aiad-btn:focus-visible { outline: 2px solid var(--aiad-accent); outline-offset: 1px; }

/* Grids */
.aiad-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.aiad-dow { margin-bottom: 2px; }
.aiad-dowcell {
	text-align: center; font-size: 11px; font-weight: 600; color: var(--aiad-muted);
	padding: 4px 0; text-transform: uppercase; letter-spacing: .02em;
}
.aiad-day {
	text-align: center; padding: 0; height: 28px; line-height: 28px; cursor: pointer;
	border-radius: 7px; color: var(--aiad-fg);
}
.aiad-day:hover:not(.aiad-blank):not(.aiad-disabled) { background: var(--aiad-hover); }
.aiad-blank { cursor: default; }
.aiad-disabled { color: var(--aiad-muted); opacity: .4; cursor: default; }
.aiad-today-cell { box-shadow: inset 0 0 0 1px var(--aiad-today); font-weight: 600; }
.aiad-sel, .aiad-sel:hover { background: var(--aiad-accent) !important; color: var(--aiad-accent-fg) !important; font-weight: 600; }

/* Month / year grids */
.aiad-cells { grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 2px; }
.aiad-cell {
	text-align: center; height: 40px; line-height: 40px; cursor: pointer;
	border-radius: 7px; color: var(--aiad-fg); font-weight: 500;
}
.aiad-cell:hover:not(.aiad-disabled) { background: var(--aiad-hover); }
.aiad-years .aiad-cell { height: 36px; line-height: 36px; }
.aiad-muted { color: var(--aiad-muted); opacity: .55; }

/* Footer */
.aiad-foot { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--aiad-border); }
.aiad-btn {
	flex: 1 1 0; height: 28px; font-size: 12px; font-weight: 600;
	border: 1px solid var(--aiad-border); color: var(--aiad-head-fg);
}
.aiad-btn:hover { background: var(--aiad-hover); }