/* carlender.php - public activity calendar page (prefix kev-). Widget styles: km-calendar.css */
.kev-page {
	--kev-p: var(--km-primary, #2563eb);
	--kev-soft: color-mix(in srgb, var(--kev-p) 11%, transparent);
	--kev-line: var(--km-border, #e4e7ec);
	--kev-muted: var(--km-muted, #667085);
	--kev-text: var(--km-text, #1d2433);
	--kev-surface: var(--km-surface, #fff);
	--kev-radius: var(--km-radius, 14px);
	font-family: var(--km-font, "Kanit"), Helvetica, Arial, sans-serif;
	color: var(--kev-text);
	padding-top: 20px;
}
.kev-page a { text-decoration: none; }

/* hero */
.kev-hero {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 20px 22px; margin-bottom: 18px;
	border-radius: 18px; color: #fff;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .18), transparent 55%),
		linear-gradient(135deg, var(--kev-p), color-mix(in srgb, var(--kev-p) 68%, #0b1220));
	box-shadow: 0 10px 30px -14px var(--kev-p);
}
.kev-hero-icon {
	width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .18); font-size: 24px;
}
.kev-hero-text { flex: 1 1 200px; min-width: 0; }
.kev-hero h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; color: #fff; }
.kev-hero p { margin: 2px 0 0; opacity: .85; font-size: 14px; }
.kev-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.kev-stat {
	min-width: 86px; padding: 8px 12px; border-radius: 12px; text-align: center;
	background: rgba(255, 255, 255, .14); color: #fff !important;
	transition: background .15s, transform .15s;
}
.kev-stat:hover, .kev-stat:focus-visible { background: rgba(255, 255, 255, .26); transform: translateY(-1px); outline: none; }
.kev-stat b { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.kev-stat span { font-size: 12px; opacity: .9; }
.kev-hero .kev-admin { border-radius: 10px; border: 0; background: #fff; color: var(--kev-p); font-weight: 500; }

/* layout */
.kev-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
.kev-card {
	background: var(--kev-surface); border: 1px solid var(--kev-line);
	border-radius: var(--kev-radius); box-shadow: var(--km-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
	padding: 16px;
}
.kev-side { position: sticky; top: 70px; }
.kev-widget #calendars { min-height: 300px; }
.kev-month-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 12px; padding: 9px 12px; border-radius: 10px;
	background: var(--kev-soft); color: var(--kev-p) !important; font-weight: 500; font-size: 14px;
	transition: background .15s, color .15s;
}
.kev-month-btn:hover, .kev-month-btn:focus-visible { background: var(--kev-p); color: #fff !important; outline: none; }
.km-cal-day.is-selected { box-shadow: 0 0 0 2px var(--kev-p) inset; }

/* toolbar */
.kev-main { min-width: 0; transition: opacity .15s; }
.kev-main.is-loading { opacity: .5; pointer-events: none; }
.kev-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.kev-tabs {
	display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
	background: var(--km-surface-2, #f1f3f7); border: 1px solid var(--kev-line);
}
.kev-tab {
	padding: 7px 14px; border-radius: 9px; font-size: 14px; color: var(--kev-muted) !important;
	white-space: nowrap; transition: background .15s, color .15s;
}
.kev-tab:hover { color: var(--kev-text) !important; }
.kev-tab.is-on { background: var(--kev-surface); color: var(--kev-p) !important; font-weight: 500; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.kev-search { position: relative; flex: 1 1 200px; margin: 0; }
.kev-search .fa { position: absolute; left: 12px; top: 50%; margin-top: -7px; color: var(--kev-muted); font-size: 14px; }
.kev-search input {
	width: 100%; height: 40px; padding: 0 12px 0 36px; font: inherit; font-size: 14px;
	border: 1px solid var(--kev-line); border-radius: 12px; background: var(--kev-surface);
	transition: border-color .15s, box-shadow .15s;
}
.kev-search input:focus { outline: none; border-color: var(--kev-p); box-shadow: 0 0 0 3px var(--kev-soft); }

.kev-types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kev-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px; font-size: 13px;
	border: 1px solid var(--kev-line); background: var(--kev-surface); color: var(--kev-text) !important;
	transition: border-color .15s, background .15s, color .15s;
}
.kev-chip span { font-size: 11.5px; padding: 0 7px; border-radius: 999px; background: var(--km-surface-2, #f1f3f7); color: var(--kev-muted); }
.kev-chip:hover { border-color: var(--kev-p); color: var(--kev-p) !important; }
.kev-chip.is-on { background: var(--kev-p); border-color: var(--kev-p); color: #fff !important; }
.kev-chip.is-on span { background: rgba(255, 255, 255, .22); color: #fff; }

.kev-summary {
	display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: 13.5px; color: var(--kev-muted); margin-bottom: 6px;
}
.kev-summary b { color: var(--kev-text); }
.kev-clear { color: var(--km-danger, #f04438) !important; font-size: 13px; }
.kev-clear:hover { text-decoration: underline; }

/* list */
.kev-group {
	margin: 18px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
	color: var(--kev-muted); display: flex; align-items: center; gap: 10px;
}
.kev-group::after { content: ""; flex: 1; height: 1px; background: var(--kev-line); }
.kev-ev {
	display: flex; gap: 16px; padding: 16px; margin-bottom: 10px;
	background: var(--kev-surface); border: 1px solid var(--kev-line); border-radius: var(--kev-radius);
	box-shadow: var(--km-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
	transition: border-color .15s, box-shadow .15s, transform .15s;
	scroll-margin-top: 80px;
}
.kev-ev:hover { border-color: color-mix(in srgb, var(--kev-p) 35%, var(--kev-line)); box-shadow: var(--km-shadow, 0 6px 20px rgba(16, 24, 40, .06)); }
.kev-ev:target { border-color: var(--kev-p); box-shadow: 0 0 0 3px var(--kev-soft); }
.kev-date {
	flex: 0 0 64px; height: 72px; border-radius: 12px; text-align: center;
	display: flex; flex-direction: column; justify-content: center; line-height: 1.1;
	background: var(--kev-soft); color: var(--kev-p);
}
.kev-d { font-size: 26px; font-weight: 600; }
.kev-m { font-size: 13px; font-weight: 500; }
.kev-y { font-size: 11px; opacity: .75; }
.kev-ev.is-now .kev-date { background: var(--kev-p); color: #fff; }
.kev-ev.is-past { background: var(--km-surface-2, #fafbfc); }
.kev-ev.is-past .kev-date { background: #eef0f3; color: #8a93a3; }
.kev-ev.is-past .kev-title { color: #5b6475; }

.kev-body { flex: 1 1 auto; min-width: 0; }
.kev-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.kev-status, .kev-type {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11.5px; padding: 2px 9px; border-radius: 999px; line-height: 1.6;
}
.kev-status { background: var(--kev-soft); color: var(--kev-p); font-weight: 500; }
.kev-ev.is-now .kev-status { background: #dcfce7; color: #15803d; }
.kev-ev.is-now .kev-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: kevPulse 1.6s infinite; }
.kev-ev.is-past .kev-status { background: #eef0f3; color: #8a93a3; }
.kev-type { background: var(--km-surface-2, #f1f3f7); color: var(--kev-muted); }
@keyframes kevPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.kev-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--kev-text); word-wrap: break-word; }
.kev-when { font-size: 13.5px; color: var(--kev-muted); }
.kev-when .fa { width: 14px; }

.kev-detail { margin-top: 8px; }
.kev-detail summary {
	display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
	font-size: 13px; color: var(--kev-p); font-weight: 500; user-select: none;
}
.kev-detail summary::-webkit-details-marker { display: none; }
.kev-detail summary .fa { transition: transform .2s; }
.kev-detail[open] summary .fa { transform: rotate(180deg); }
.kev-detail .kev-less, .kev-detail[open] .kev-more { display: none; }
.kev-detail[open] .kev-less { display: inline; }
.kev-detail-body {
	margin-top: 8px; padding: 12px 14px; border-radius: 10px;
	background: var(--km-surface-2, #f8fafc); border: 1px solid var(--kev-line);
	font-size: 14px; line-height: 1.7; overflow-x: auto; word-wrap: break-word;
}
.kev-detail-body img, .kev-detail-body iframe, .kev-detail-body video { max-width: 100%; height: auto; }
.kev-detail-body > :last-child { margin-bottom: 0; }

.kev-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.kev-actions a { font-size: 12.5px; color: var(--kev-muted) !important; }
.kev-actions a:hover { color: var(--kev-p) !important; }
.kev-actions a.is-done { color: #15803d !important; }

.kev-empty {
	display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
	padding: 48px 16px; margin-top: 10px; border-radius: var(--kev-radius);
	border: 1px dashed var(--km-border-strong, #cfd4dc); color: var(--kev-muted);
}
.kev-empty .fa { font-size: 40px; opacity: .5; margin-bottom: 4px; }
.kev-empty b { color: var(--kev-text); font-size: 16px; font-weight: 600; }
.kev-empty .btn { margin-top: 8px; border-radius: 10px; }
.kev-main .km-pager { border: 0; padding: 8px 0 0; background: transparent; }

@media (max-width: 991px) {
	.kev-layout { grid-template-columns: 1fr; }
	.kev-side { position: static; }
	.kev-widget { max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
	.kev-page { padding: 10px 0 0; }
	.kev-hero { padding: 16px; gap: 12px; }
	.kev-hero h1 { font-size: 20px; }
	.kev-stats { width: 100%; }
	.kev-stat { flex: 1 1 0; min-width: 0; }
	.kev-tabs { width: 100%; }
	.kev-tab { flex: 1 1 0; text-align: center; padding: 7px 6px; font-size: 13px; }
	.kev-ev { gap: 12px; padding: 14px 12px; }
	.kev-date { flex-basis: 54px; height: 64px; }
	.kev-d { font-size: 22px; }
}
@media print {
	.kev-side, .kev-toolbar, .kev-types, .kev-actions, .kev-hero .kev-admin, .km-pager { display: none !important; }
	.kev-layout { display: block; }
	.kev-hero { color: #000; background: none; box-shadow: none; border: 1px solid #ccc; }
	.kev-hero h1, .kev-stat { color: #000 !important; }
	.kev-detail-body { display: block; }
	.kev-ev { break-inside: avoid; box-shadow: none; }
}