/*
 * AI API Gateway — Yearly activity heatmap
 * (public/views/partials/model-activity.php, model-activity.js)
 *
 * Fully self-contained: every rule below only touches classes
 * prefixed "aiapi-act-" and only reads the site's existing
 * --aiapih-* custom properties (already defined by home.css) for
 * color/spacing/radius, so this file can be dropped in or removed
 * without affecting any other page or component.
 *
 * Layout matches a GitHub-style contribution graph: a card with a
 * heading + date range, a legend, a grid of week columns (7 rows,
 * Saturday→Friday for Persian, Sunday→Saturday otherwise — see
 * class-aiapi-model-activity.php) with month labels above and full
 * weekday-name labels down the side, and a small custom tooltip that
 * appears on hover/focus.
 */

:root {
	--aiapi-act-cell: 15px;
	--aiapi-act-gap: 5px;
	--aiapi-act-monthrow: 20px;
}

.aiapi-act-card {
	position: relative;
	background: var(--aiapih-surface-solid);
	border: 1px solid var(--aiapih-border);
	border-radius: var(--aiapih-radius);
	padding: 20px 22px 18px;
	box-shadow: var(--aiapih-shadow-sm);
}

.aiapi-act-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.aiapi-act-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	color: var(--aiapih-text);
}
.aiapi-act-title svg { color: var(--aiapih-primary); opacity: .9; }

.aiapi-act-range {
	font-size: 12.5px;
	color: var(--aiapih-text-faint);
	white-space: nowrap;
}

.aiapi-act-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 6px 0 18px;
}

.aiapi-act-caption {
	font-size: 13px;
	font-weight: 600;
	color: var(--aiapih-text-muted);
}

.aiapi-act-active {
	font-size: 12.5px;
	color: var(--aiapih-text-faint);
}

.aiapi-act-legend {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--aiapih-text-faint);
}
.aiapi-act-legend-cells { display: flex; align-items: center; gap: 3px; }

/* ------------------------------------------------------------------ */
/* Grid                                                                 */
/* ------------------------------------------------------------------ */

.aiapi-act-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 20px;
	position: relative;
}

.aiapi-act-body {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: max-content;
	position: relative;
}

.aiapi-act-rowlabels {
	display: grid;
	grid-template-rows: var(--aiapi-act-monthrow, 16px) repeat(7, var(--aiapi-act-cell, 11px));
	gap: var(--aiapi-act-gap, 3px);
	flex: none;
}
.aiapi-act-rowlabels span {
	font-size: 10.5px;
	line-height: var(--aiapi-act-cell, 11px);
	color: var(--aiapih-text-faint);
	white-space: nowrap;
	align-self: center;
}

.aiapi-act-weeks {
	display: flex;
	gap: var(--aiapi-act-gap, 3px);
	flex: 1;
	position: relative;
}

.aiapi-act-week {
	display: grid;
	grid-template-columns: var(--aiapi-act-cell, 11px);
	grid-template-rows: var(--aiapi-act-monthrow, 16px) repeat(7, var(--aiapi-act-cell, 11px));
	gap: var(--aiapi-act-gap, 3px);
	position: relative;
	flex: none;
}

.aiapi-act-month {
	align-self: end;
	font-size: 10.5px;
	line-height: 1;
	color: var(--aiapih-text-faint);
	white-space: nowrap;
	overflow: visible;
}

.aiapi-act-cell {
	width: var(--aiapi-act-cell, 11px);
	height: var(--aiapi-act-cell, 11px);
	border-radius: 3px;
	background: var(--aiapih-bg-soft);
	border: 1px solid var(--aiapih-border);
}
.aiapi-act-cell[data-lvl] { cursor: pointer; }
.aiapi-act-cell[data-lvl]:focus-visible {
	outline: 2px solid var(--aiapih-primary);
	outline-offset: 1px;
}

.aiapi-act-cell--pad {
	visibility: hidden;
}

.aiapi-act-cell.is-lvl-1 { background: color-mix(in srgb, var(--aiapih-success) 28%, var(--aiapih-bg-soft)); border-color: transparent; }
.aiapi-act-cell.is-lvl-2 { background: color-mix(in srgb, var(--aiapih-success) 52%, var(--aiapih-bg-soft)); border-color: transparent; }
.aiapi-act-cell.is-lvl-3 { background: color-mix(in srgb, var(--aiapih-success) 76%, var(--aiapih-bg-soft)); border-color: transparent; }
.aiapi-act-cell.is-lvl-4 { background: var(--aiapih-success); border-color: transparent; }

.aiapi-act-legend-cells .aiapi-act-cell { cursor: default; }

.aiapi-act-empty {
	font-size: 13px;
	color: var(--aiapih-text-faint);
	padding: 10px 2px 4px;
}

/* ------------------------------------------------------------------ */
/* Tooltip — small, self-contained "pro" hover card                    */
/* ------------------------------------------------------------------ */

.aiapi-act-tip {
	position: absolute;
	z-index: 30;
	transform: translate(-50%, calc(-100% - 10px));
	background: var(--aiapih-text);
	color: var(--aiapih-bg);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 12.5px;
	line-height: 1.45;
	white-space: nowrap;
	box-shadow: var(--aiapih-shadow-md);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
}
.aiapi-act-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--aiapih-text);
}
.aiapi-act-tip.is-visible { opacity: 1; visibility: visible; }
.aiapi-act-tip.aiapi-act-tip--flip {
	transform: translate(-50%, 10px);
}
.aiapi-act-tip.aiapi-act-tip--flip::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--aiapih-text);
}
.aiapi-act-tip b { display: block; font-weight: 700; }
.aiapi-act-tip span { display: block; opacity: .75; margin-top: 1px; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
	.aiapi-act-card { padding: 16px 14px; }
	:root { --aiapi-act-cell: 11px; --aiapi-act-gap: 4.5px; }
}