/**
 * VeloLog v5.0 — Frontend Stylesheet
 * Native system font stack, fully responsive, zero external CDN dependencies (KA-11).
 *
 * @package VeloLog
 */

:root {
	--velolog-primary: #1a73e8;
	--velolog-primary-hover: #1557b0;
	--velolog-success: #188038;
	--velolog-warning: #f2994a;
	--velolog-bg: #f8f9fa;
	--velolog-card-bg: #ffffff;
	--velolog-border: #e0e0e0;
	--velolog-text: #202124;
	--velolog-text-secondary: #5f6368;
	--velolog-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Base Container */
.velolog-container,
.statpress-md-container,
.statpress-shortcode-container {
	font-family: var(--velolog-font-stack);
	color: var(--velolog-text);
	margin: 20px 0;
	box-sizing: border-box;
}

.velolog-container *,
.statpress-shortcode-container * {
	box-sizing: border-box;
}

.velolog-section-title {
	color: var(--velolog-text);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 24px 0 16px 0;
}

/* ========================================================
   1. Summary Cards
   ======================================================== */
.velolog-summary-cards,
.statpress-summary-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.velolog-summary-card,
.statpress-summary-card {
	background: var(--velolog-card-bg);
	border-radius: 8px;
	padding: 16px 20px;
	border: 1px solid var(--velolog-border);
	border-left: 4px solid var(--velolog-primary);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: transform 0.2s, box-shadow 0.2s;
}

.velolog-summary-card:hover,
.statpress-summary-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.velolog-summary-card.card-success {
	border-left-color: var(--velolog-success);
}

.velolog-summary-card.card-warning {
	border-left-color: var(--velolog-warning);
}

.velolog-summary-card-title,
.statpress-summary-card-title {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--velolog-text-secondary);
	font-weight: 600;
	margin-bottom: 6px;
}

.velolog-summary-card-value,
.statpress-summary-card-value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--velolog-text);
	line-height: 1.2;
}

/* ========================================================
   2. Activity List
   ======================================================== */
.velolog-activity-list,
.statpress-activity-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.velolog-activity-card,
.statpress-activity-card {
	background: var(--velolog-card-bg);
	border-radius: 8px;
	border: 1px solid var(--velolog-border);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
	transition: transform 0.2s, box-shadow 0.2s;
	flex-wrap: wrap;
}

.velolog-activity-card:hover,
.statpress-activity-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.velolog-activity-info,
.statpress-activity-info {
	flex: 1;
	min-width: 200px;
}

.velolog-activity-title,
.statpress-activity-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--velolog-text);
	margin: 0 0 4px 0;
}

.velolog-activity-meta,
.statpress-activity-meta {
	font-size: 0.8125rem;
	color: var(--velolog-text-secondary);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.velolog-activity-meta-dot,
.statpress-activity-meta-dot {
	color: #ccc;
}

.velolog-activity-stats,
.statpress-activity-stats {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.velolog-stat-item,
.statpress-stat-item {
	display: flex;
	flex-direction: column;
}

.velolog-stat-label,
.statpress-stat-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	color: var(--velolog-text-secondary);
	font-weight: 600;
	margin-bottom: 2px;
}

.velolog-stat-value,
.statpress-stat-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--velolog-text);
}

/* ========================================================
   3. Single Activity Card & Map
   ======================================================== */
.velolog-single-card,
.statpress-single-card {
	background: var(--velolog-card-bg);
	border-radius: 8px;
	border: 1px solid var(--velolog-border);
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	margin-bottom: 24px;
}

.velolog-single-header,
.statpress-single-header {
	border-bottom: 1px solid var(--velolog-border);
	padding-bottom: 14px;
	margin-bottom: 18px;
}

.velolog-single-header h4,
.statpress-single-header h4 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 6px 0;
	color: var(--velolog-text);
}

.velolog-single-header p,
.statpress-single-header p {
	font-size: 0.875rem;
	color: var(--velolog-text-secondary);
	margin: 0;
}

.velolog-single-grid,
.statpress-single-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.velolog-single-data-item,
.statpress-single-data-item {
	display: flex;
	flex-direction: column;
}

.velolog-single-data-label,
.statpress-single-data-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--velolog-text-secondary);
	font-weight: 600;
	margin-bottom: 4px;
}

.velolog-single-data-value,
.statpress-single-data-value {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--velolog-text);
}

.velolog-activity-map,
.statpress-single-map {
	height: 380px;
	width: 100%;
	border-radius: 6px;
	margin-top: 18px;
	border: 1px solid var(--velolog-border);
}

/* ========================================================
   4. Personal Records Grid
   ======================================================== */
.velolog-records-grid,
.statpress-records-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin-top: 16px;
}

.velolog-record-card,
.statpress-record-card,
.frontend-record-card {
	background: var(--velolog-card-bg);
	border-radius: 8px;
	padding: 18px;
	border: 1px solid var(--velolog-border);
	border-left: 4px solid var(--velolog-primary);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
	gap: 16px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.velolog-record-card:hover,
.statpress-record-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.velolog-record-badge {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e8f0fe;
	color: var(--velolog-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.velolog-record-details,
.statpress-record-details {
	flex: 1;
}

.velolog-record-details h3,
.statpress-record-details h3 {
	margin: 0 0 4px 0;
	font-size: 0.75rem;
	color: var(--velolog-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.velolog-record-value,
.statpress-record-value {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--velolog-text);
	margin-bottom: 4px;
}

.velolog-record-meta,
.statpress-record-meta {
	font-size: 0.8125rem;
	color: var(--velolog-text-secondary);
}

.velolog-record-meta strong {
	color: var(--velolog-primary);
	font-weight: 600;
}

/* ========================================================
   5. Athlete Profile Card
   ======================================================== */
.velolog-profile-card,
.statpress-profile-card {
	background: var(--velolog-card-bg);
	border-radius: 12px;
	border: 1px solid var(--velolog-border);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	overflow: hidden;
	max-width: 420px;
	margin: 24px auto;
}

.velolog-profile-header,
.statpress-profile-header {
	background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
	color: #fff;
	padding: 28px 20px;
	text-align: center;
}

.velolog-profile-avatar,
.statpress-profile-avatar {
	margin-bottom: 12px;
}

.velolog-profile-avatar img,
.statpress-profile-avatar img {
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.velolog-profile-header h3,
.statpress-profile-header h3 {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
}

.velolog-profile-body,
.statpress-profile-body {
	padding: 20px;
}

.velolog-profile-grid,
.statpress-profile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	text-align: center;
}

.velolog-profile-item,
.statpress-profile-item {
	background: var(--velolog-bg);
	border-radius: 8px;
	padding: 12px 10px;
	border: 1px solid #edf2f7;
}

.velolog-profile-item-label,
.statpress-profile-item-label {
	display: block;
	font-size: 0.6875rem;
	text-transform: uppercase;
	color: var(--velolog-text-secondary);
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.velolog-profile-item-value,
.statpress-profile-item-value {
	display: block;
	font-size: 1.15rem;
	color: var(--velolog-text);
	font-weight: 700;
}

.velolog-profile-item-value.highlight {
	color: var(--velolog-success);
}

.velolog-profile-item-value.highlight-blue {
	color: var(--velolog-primary);
}

/* Responsiveness */
@media (max-width: 640px) {
	.velolog-activity-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.velolog-activity-stats {
		width: 100%;
		justify-content: space-between;
		border-top: 1px solid var(--velolog-border);
		padding-top: 10px;
	}
}