/**
 * TM Event Calendar - shared design system.
 *
 * Design tokens (--tec-*) and reusable primitives (cards, buttons, badges,
 * alerts, notices, modal, sidebar, form controls, skeletons, states) used
 * across the frontend calendar, single event page, admin dashboard, and
 * settings screen. Loaded first; every other TMEC stylesheet depends on
 * it. Bridges into the pre-existing --tmec-* tokens (see
 * assets/css/calendar/variables.css) via aliasing so nothing already
 * reading --tmec-* breaks.
 *
 * Architecture: BEM (`.tec-block__element--modifier`), one selector per
 * rule set where practical, tokens consumed via var() everywhere so no
 * color/spacing/shadow/radius value is ever hard-coded twice.
 */

/* ---------------------------------------------------------------------- */
/* 1. Color system                                                        */
/* ---------------------------------------------------------------------- */

:root {
	/* Brand palette */
	--tec-primary: #4f46e5;
	--tec-primary-hover: #4338ca;
	--tec-primary-soft: rgba(79, 70, 229, 0.1);
	--tec-secondary: #0ea5e9;
	--tec-secondary-soft: rgba(14, 165, 233, 0.1);

	/* Surface & text */
	--tec-bg: #ffffff;
	--tec-bg-subtle: #f8fafc;
	--tec-bg-muted: #f1f5f9;
	--tec-text: #0f172a;
	--tec-muted: #64748b;
	--tec-subtle: #94a3b8;
	--tec-border: #e2e8f0;
	--tec-border-strong: #cbd5e1;
	--tec-on-primary: #ffffff;

	/* Status colors: shared by alerts, notices, form validation, badges */
	--tec-success: #16a34a;
	--tec-success-soft: rgba(22, 163, 74, 0.1);
	--tec-success-border: rgba(22, 163, 74, 0.3);
	--tec-warning: #d97706;
	--tec-warning-soft: rgba(217, 119, 6, 0.1);
	--tec-warning-border: rgba(217, 119, 6, 0.3);
	--tec-danger: #dc2626;
	--tec-danger-soft: rgba(220, 38, 38, 0.1);
	--tec-danger-border: rgba(220, 38, 38, 0.3);
	--tec-info: #0284c7;
	--tec-info-soft: rgba(2, 132, 199, 0.1);
	--tec-info-border: rgba(2, 132, 199, 0.3);

	/* Category badge / event badge palette (cycled by index via
	   TMEC_Frontend::get_category_badge_slot() in PHP) */
	--tec-category-1: #4f46e5;
	--tec-category-1-soft: rgba(79, 70, 229, 0.12);
	--tec-category-2: #0891b2;
	--tec-category-2-soft: rgba(8, 145, 178, 0.12);
	--tec-category-3: #c026d3;
	--tec-category-3-soft: rgba(192, 38, 211, 0.12);
	--tec-category-4: #ea580c;
	--tec-category-4-soft: rgba(234, 88, 12, 0.12);
	--tec-category-5: #16a34a;
	--tec-category-5-soft: rgba(22, 163, 74, 0.12);
	--tec-category-6: #db2777;
	--tec-category-6-soft: rgba(219, 39, 119, 0.12);

	/* Skeleton loading tones */
	--tec-skeleton-base: #e2e8f0;
	--tec-skeleton-shine: #f1f5f9;

	/* ---------------------------------------------------------------- */
	/* 2. Typography system                                              */
	/* ---------------------------------------------------------------- */

	--tec-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tec-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--tec-font-size-xs: 0.75rem;
	--tec-font-size-sm: 0.875rem;
	--tec-font-size-base: 1rem;
	--tec-font-size-lg: 1.125rem;
	--tec-font-size-xl: 1.5rem;
	--tec-font-size-2xl: 1.875rem;
	--tec-font-size-3xl: 2.25rem;
	--tec-font-weight-regular: 400;
	--tec-font-weight-medium: 500;
	--tec-font-weight-semibold: 600;
	--tec-font-weight-bold: 700;
	--tec-font-weight-extrabold: 800;
	--tec-line-height-tight: 1.25;
	--tec-line-height-base: 1.6;

	/* ---------------------------------------------------------------- */
	/* 3. Spacing system                                                 */
	/* ---------------------------------------------------------------- */

	--tec-space-0: 0;
	--tec-space-1: 0.25rem;
	--tec-space-2: 0.5rem;
	--tec-space-3: 0.75rem;
	--tec-space-4: 1rem;
	--tec-space-5: 1.5rem;
	--tec-space-6: 2rem;
	--tec-space-8: 3rem;
	--tec-space-10: 4rem;

	/* ---------------------------------------------------------------- */
	/* 4. Border radius system                                           */
	/* ---------------------------------------------------------------- */

	--tec-radius-sm: 6px;
	--tec-radius-md: 10px;
	--tec-radius-lg: 16px;
	--tec-radius-xl: 20px;
	--tec-radius-pill: 999px;

	/* ---------------------------------------------------------------- */
	/* 5. Shadow (elevation) system                                      */
	/* ---------------------------------------------------------------- */

	--tec-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--tec-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
	--tec-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--tec-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
	--tec-shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.18);
	--tec-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.28);

	/* ---------------------------------------------------------------- */
	/* 6. Animation / motion system                                      */
	/* ---------------------------------------------------------------- */

	--tec-transition-fast: 140ms ease;
	--tec-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
	--tec-transition-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1);
	--tec-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* z-index scale, used by Modal/Sidebar */
	--tec-z-dropdown: 30;
	--tec-z-sidebar: 40;
	--tec-z-modal-backdrop: 50;
	--tec-z-modal: 51;

	/* Bridge: keep pre-existing --tmec-* tokens in sync with the design
	   system so calendar.css/components.css continue to work unmodified
	   in spirit while visually matching the new palette. */
	--tmec-color-primary: var(--tec-primary);
	--tmec-color-primary-dark: var(--tec-primary-hover);
	--tmec-color-primary-soft: var(--tec-primary-soft);
	--tmec-color-secondary: var(--tec-bg-muted);
	--tmec-color-border: var(--tec-border);
	--tmec-color-border-strong: var(--tec-border-strong);
	--tmec-color-today: var(--tec-primary-soft);
	--tmec-color-today-border: var(--tec-primary);
	--tmec-color-weekend: var(--tec-bg-subtle);
	--tmec-color-white: var(--tec-bg);
	--tmec-color-text: var(--tec-text);
	--tmec-color-text-muted: var(--tec-muted);
	--tmec-color-text-subtle: var(--tec-subtle);
	--tmec-color-danger: var(--tec-danger);
	--tmec-font-family: var(--tec-font-family);
	--tmec-font-size-sm: var(--tec-font-size-xs);
	--tmec-font-size-base: var(--tec-font-size-sm);
	--tmec-font-size-md: var(--tec-font-size-base);
	--tmec-font-size-lg: var(--tec-font-size-lg);
	--tmec-font-size-xl: var(--tec-font-size-xl);
	--tmec-space-1: var(--tec-space-1);
	--tmec-space-2: var(--tec-space-2);
	--tmec-space-3: var(--tec-space-3);
	--tmec-space-4: var(--tec-space-4);
	--tmec-space-5: var(--tec-space-5);
	--tmec-space-6: var(--tec-space-6);
	--tmec-radius-sm: var(--tec-radius-sm);
	--tmec-radius-md: var(--tec-radius-md);
	--tmec-radius-lg: var(--tec-radius-lg);
	--tmec-radius-pill: var(--tec-radius-pill);
	--tmec-shadow-sm: var(--tec-shadow-xs);
	--tmec-shadow-md: var(--tec-shadow-md);
	--tmec-shadow-focus: var(--tec-shadow-focus);
	--tmec-transition-fast: var(--tec-transition-fast);
	--tmec-transition-base: var(--tec-transition-base);
}

/* Dark mode ready: respects OS preference by default, and an explicit
   [data-theme] attribute (as used by admin color schemes / theme
   switchers) always wins over the media query. Light mode (the default
   above) remains fully supported and unaffected when neither applies. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--tec-bg: #0f172a;
		--tec-bg-subtle: #16213c;
		--tec-bg-muted: #1e293b;
		--tec-text: #e2e8f0;
		--tec-muted: #94a3b8;
		--tec-subtle: #64748b;
		--tec-border: #293548;
		--tec-border-strong: #3a4a63;
		--tec-skeleton-base: #1e293b;
		--tec-skeleton-shine: #29354a;
		--tec-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
		--tec-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
		--tec-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
		--tec-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
		--tec-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
	}
}

:root[data-theme="dark"] {
	--tec-bg: #0f172a;
	--tec-bg-subtle: #16213c;
	--tec-bg-muted: #1e293b;
	--tec-text: #e2e8f0;
	--tec-muted: #94a3b8;
	--tec-subtle: #64748b;
	--tec-border: #293548;
	--tec-border-strong: #3a4a63;
	--tec-skeleton-base: #1e293b;
	--tec-skeleton-shine: #29354a;
	--tec-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
	--tec-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
	--tec-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
	--tec-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
	--tec-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------------- */
/* Base typography (opt-in scope; only applies inside .tec-* containers  */
/* so it never leaks into unrelated theme/admin markup)                  */
/* ---------------------------------------------------------------------- */

.tec-scope {
	font-family: var(--tec-font-family);
	color: var(--tec-text);
	line-height: var(--tec-line-height-base);
}

.tec-heading {
	margin: 0;
	font-weight: var(--tec-font-weight-bold);
	line-height: var(--tec-line-height-tight);
	letter-spacing: -0.02em;
	color: var(--tec-text);
}

.tec-heading--xl { font-size: var(--tec-font-size-3xl); }
.tec-heading--lg { font-size: var(--tec-font-size-2xl); }
.tec-heading--md { font-size: var(--tec-font-size-xl); }
.tec-heading--sm { font-size: var(--tec-font-size-lg); }

.tec-text-muted { color: var(--tec-muted); }
.tec-text-subtle { color: var(--tec-subtle); }

/* ---------------------------------------------------------------------- */
/* 7. Hover system (shared lift/brighten patterns)                       */
/* ---------------------------------------------------------------------- */

.tec-hover-lift {
	transition: box-shadow var(--tec-transition-base), transform var(--tec-transition-base);
}

.tec-hover-lift:hover {
	box-shadow: var(--tec-shadow-md);
	transform: translateY(-2px);
}

.tec-hover-brighten {
	transition: filter var(--tec-transition-fast), transform var(--tec-transition-fast);
}

.tec-hover-brighten:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------- */
/* 8. Focus states (shared across all interactive primitives)           */
/* ---------------------------------------------------------------------- */

.tec-focusable:focus-visible,
.tec-btn:focus-visible,
.tec-card--interactive:focus-visible,
.tec-modal__close:focus-visible {
	outline: none;
	box-shadow: var(--tec-shadow-focus);
}

/* ---------------------------------------------------------------------- */
/* Card                                                                  */
/* ---------------------------------------------------------------------- */

/* .tmec-dashboard__section (admin-dashboard.css) shares this rule so its
   background/border/radius/shadow aren't redeclared there — only its
   section-specific padding lives in that file. */
.tec-card,
.tmec-dashboard__section {
	background: var(--tec-bg);
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius-lg);
	box-shadow: var(--tec-shadow-sm);
	transition: box-shadow var(--tec-transition-base), transform var(--tec-transition-base);
}

.tec-card__header {
	display: flex;
	align-items: center;
	gap: var(--tec-space-2);
	padding: var(--tec-space-5) var(--tec-space-6) var(--tec-space-4);
	border-bottom: 1px solid var(--tec-border);
	font-size: var(--tec-font-size-lg);
	font-weight: var(--tec-font-weight-bold);
	color: var(--tec-text);
}

.tec-card__body {
	padding: var(--tec-space-5) var(--tec-space-6);
}

.tec-card__footer {
	padding: var(--tec-space-4) var(--tec-space-6);
	border-top: 1px solid var(--tec-border);
}

.tec-card--hoverable:hover,
.tec-card--interactive:hover {
	box-shadow: var(--tec-shadow-md);
	transform: translateY(-2px);
}

.tec-card--interactive {
	cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Settings Card                                                         */
/*                                                                        */
/* Declared in settings.css as a combined selector alongside the existing */
/* .tmec-settings__card BEM class, e.g.:                                  */
/*   .tec-settings-card, .tmec-settings__card { ... }                    */
/* (Dashboard Card's shared background/border/radius/shadow live above   */
/* on the .tec-card rule, combined with .tmec-dashboard__section; see     */
/* admin-dashboard.css for its section-specific padding override.)       */
/* This keeps one declaration block per rule set (no duplicate CSS       */
/* across files) while still exposing .tec-settings-card as a generic,   */
/* reusable primitive name for any future markup.                        */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Button                                                                */
/* ---------------------------------------------------------------------- */

.tec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tec-space-2);
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--tec-border-strong);
	border-radius: var(--tec-radius-md);
	background: var(--tec-bg);
	color: var(--tec-text);
	font-family: var(--tec-font-family);
	font-size: var(--tec-font-size-sm);
	font-weight: var(--tec-font-weight-semibold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tec-transition-fast), border-color var(--tec-transition-fast), color var(--tec-transition-fast), transform var(--tec-transition-fast), box-shadow var(--tec-transition-fast);
}

.tec-btn:hover {
	border-color: var(--tec-primary);
	color: var(--tec-primary);
	transform: translateY(-1px);
}

.tec-btn:active {
	transform: translateY(0);
}

.tec-btn--primary {
	background: var(--tec-primary);
	border-color: var(--tec-primary);
	color: var(--tec-on-primary);
	box-shadow: var(--tec-shadow-xs);
}

.tec-btn--primary:hover {
	background: var(--tec-primary-hover);
	border-color: var(--tec-primary-hover);
	color: var(--tec-on-primary);
	box-shadow: var(--tec-shadow-sm);
}

.tec-btn--danger {
	background: var(--tec-danger);
	border-color: var(--tec-danger);
	color: var(--tec-on-primary);
}

.tec-btn--danger:hover {
	filter: brightness(0.92);
	color: var(--tec-on-primary);
}

.tec-btn--ghost {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.tec-btn--sm {
	padding: 0.35rem 0.75rem;
	font-size: var(--tec-font-size-xs);
}

.tec-btn--lg {
	padding: 0.85rem 1.5rem;
	font-size: var(--tec-font-size-base);
}

.tec-btn--block {
	display: flex;
	width: 100%;
}

.tec-btn:disabled,
.tec-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------- */
/* Badge                                                                 */
/* ---------------------------------------------------------------------- */

.tec-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--tec-space-1);
	padding: 0.2rem 0.65rem;
	border-radius: var(--tec-radius-pill);
	font-size: var(--tec-font-size-xs);
	font-weight: var(--tec-font-weight-semibold);
	line-height: 1.5;
	white-space: nowrap;
	background: var(--tec-primary-soft);
	color: var(--tec-primary);
}

.tec-badge--success { background: var(--tec-success-soft); color: var(--tec-success); }
.tec-badge--warning { background: var(--tec-warning-soft); color: var(--tec-warning); }
.tec-badge--danger { background: var(--tec-danger-soft); color: var(--tec-danger); }
.tec-badge--info { background: var(--tec-info-soft); color: var(--tec-info); }

.tec-badge--1 { background: var(--tec-category-1-soft); color: var(--tec-category-1); }
.tec-badge--2 { background: var(--tec-category-2-soft); color: var(--tec-category-2); }
.tec-badge--3 { background: var(--tec-category-3-soft); color: var(--tec-category-3); }
.tec-badge--4 { background: var(--tec-category-4-soft); color: var(--tec-category-4); }
.tec-badge--5 { background: var(--tec-category-5-soft); color: var(--tec-category-5); }
.tec-badge--6 { background: var(--tec-category-6-soft); color: var(--tec-category-6); }

/* ---------------------------------------------------------------------- */
/* Event Badge (calendar cell event indicator; category-colored)        */
/* ---------------------------------------------------------------------- */

.tec-event-badge {
	display: block;
	width: 100%;
	padding: 0.2rem 0.5rem;
	border-radius: var(--tec-radius-sm);
	font-size: var(--tec-font-size-xs);
	font-weight: var(--tec-font-weight-semibold);
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: var(--tec-primary-soft);
	color: var(--tec-primary);
	transition: transform var(--tec-transition-fast), box-shadow var(--tec-transition-fast), filter var(--tec-transition-fast);
}

.tec-event-badge:hover,
.tec-event-badge:focus-visible {
	transform: translateY(-1px);
	filter: brightness(0.97);
}

.tec-event-badge:focus-visible {
	outline: none;
	box-shadow: var(--tec-shadow-focus);
}

.tec-event-badge--1 { background: var(--tec-category-1-soft); color: var(--tec-category-1); }
.tec-event-badge--2 { background: var(--tec-category-2-soft); color: var(--tec-category-2); }
.tec-event-badge--3 { background: var(--tec-category-3-soft); color: var(--tec-category-3); }
.tec-event-badge--4 { background: var(--tec-category-4-soft); color: var(--tec-category-4); }
.tec-event-badge--5 { background: var(--tec-category-5-soft); color: var(--tec-category-5); }
.tec-event-badge--6 { background: var(--tec-category-6-soft); color: var(--tec-category-6); }

/* ---------------------------------------------------------------------- */
/* Calendar Cell (generic date-cell primitive)                          */
/* ---------------------------------------------------------------------- */

.tec-calendar-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tec-space-1);
	padding: var(--tec-space-2);
	background: var(--tec-bg);
	transition: background-color var(--tec-transition-fast);
}

.tec-calendar-cell:hover {
	background: var(--tec-bg-subtle);
}

.tec-calendar-cell--outside {
	background: var(--tec-bg-subtle);
	color: var(--tec-subtle);
}

.tec-calendar-cell--weekend {
	background: var(--tec-bg-subtle);
}

.tec-calendar-cell--today {
	background: var(--tec-primary-soft);
}

.tec-calendar-cell__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.85rem;
	height: 1.85rem;
	border-radius: var(--tec-radius-pill);
	font-size: var(--tec-font-size-sm);
	font-weight: var(--tec-font-weight-semibold);
	color: var(--tec-text);
	transition: background-color var(--tec-transition-fast), color var(--tec-transition-fast);
}

.tec-calendar-cell--today .tec-calendar-cell__number {
	background: var(--tec-primary);
	color: var(--tec-on-primary);
	box-shadow: var(--tec-shadow-xs);
}

/* ---------------------------------------------------------------------- */
/* Alert (persistent, inline; dismissible or not)                       */
/* ---------------------------------------------------------------------- */

.tec-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--tec-space-3);
	padding: var(--tec-space-4) var(--tec-space-5);
	border: 1px solid var(--tec-border);
	border-left-width: 4px;
	border-radius: var(--tec-radius-md);
	background: var(--tec-bg-subtle);
	color: var(--tec-text);
	font-size: var(--tec-font-size-sm);
	line-height: var(--tec-line-height-base);
}

.tec-alert__icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 0.1em;
}

.tec-alert__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tec-alert__title {
	margin: 0 0 var(--tec-space-1);
	font-weight: var(--tec-font-weight-bold);
}

.tec-alert__close {
	flex: 0 0 auto;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	line-height: 1;
	transition: opacity var(--tec-transition-fast);
}

.tec-alert__close:hover {
	opacity: 1;
}

.tec-alert--info {
	border-left-color: var(--tec-info);
	background: var(--tec-info-soft);
}

.tec-alert--success {
	border-left-color: var(--tec-success);
	background: var(--tec-success-soft);
}

.tec-alert--warning {
	border-left-color: var(--tec-warning);
	background: var(--tec-warning-soft);
}

.tec-alert--danger {
	border-left-color: var(--tec-danger);
	background: var(--tec-danger-soft);
}

/* ---------------------------------------------------------------------- */
/* Notice (compact, top-of-screen transient message; WP admin-notice     */
/* shaped but themeable independently of core's .notice)                */
/* ---------------------------------------------------------------------- */

.tec-notice {
	display: flex;
	align-items: center;
	gap: var(--tec-space-2);
	padding: var(--tec-space-3) var(--tec-space-4);
	border-radius: var(--tec-radius-sm);
	background: var(--tec-bg-muted);
	color: var(--tec-text);
	font-size: var(--tec-font-size-sm);
	font-weight: var(--tec-font-weight-medium);
}

.tec-notice--success { background: var(--tec-success-soft); color: var(--tec-success); }
.tec-notice--warning { background: var(--tec-warning-soft); color: var(--tec-warning); }
.tec-notice--danger { background: var(--tec-danger-soft); color: var(--tec-danger); }
.tec-notice--info { background: var(--tec-info-soft); color: var(--tec-info); }

/* ---------------------------------------------------------------------- */
/* Modal                                                                 */
/* ---------------------------------------------------------------------- */

.tec-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--tec-z-modal-backdrop);
	background: rgba(15, 23, 42, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tec-transition-base);
}

.tec-modal-backdrop--open {
	opacity: 1;
	pointer-events: auto;
}

.tec-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: var(--tec-z-modal);
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	background: var(--tec-bg);
	border-radius: var(--tec-radius-xl);
	box-shadow: var(--tec-shadow-xl);
	transform: translate(-50%, -48%) scale(0.98);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tec-transition-base), transform var(--tec-transition-base);
}

.tec-modal--open {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.tec-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tec-space-3);
	padding: var(--tec-space-5) var(--tec-space-6);
	border-bottom: 1px solid var(--tec-border);
}

.tec-modal__title {
	margin: 0;
	font-size: var(--tec-font-size-lg);
	font-weight: var(--tec-font-weight-bold);
	color: var(--tec-text);
}

.tec-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	border-radius: var(--tec-radius-md);
	background: transparent;
	color: var(--tec-muted);
	cursor: pointer;
	transition: background-color var(--tec-transition-fast), color var(--tec-transition-fast);
}

.tec-modal__close:hover {
	background: var(--tec-bg-subtle);
	color: var(--tec-text);
}

.tec-modal__body {
	padding: var(--tec-space-6);
}

.tec-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--tec-space-3);
	padding: var(--tec-space-4) var(--tec-space-6);
	border-top: 1px solid var(--tec-border);
}

@media (prefers-reduced-motion: reduce) {
	.tec-modal,
	.tec-modal-backdrop {
		transition: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Sidebar (sticky content rail; used by the single event page)         */
/* ---------------------------------------------------------------------- */

.tec-sidebar {
	position: sticky;
	top: var(--tec-space-6);
	z-index: var(--tec-z-sidebar);
	display: flex;
	flex-direction: column;
	gap: var(--tec-space-5);
}

.tec-sidebar__section {
	background: var(--tec-bg);
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius-lg);
	box-shadow: var(--tec-shadow-sm);
	padding: var(--tec-space-5);
}

@media (max-width: 960px) {
	.tec-sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------------- */
/* Form Controls                                                        */
/* ---------------------------------------------------------------------- */

.tec-field {
	display: flex;
	flex-direction: column;
	gap: var(--tec-space-1);
	margin-bottom: var(--tec-space-4);
}

.tec-field__label {
	font-size: var(--tec-font-size-sm);
	font-weight: var(--tec-font-weight-semibold);
	color: var(--tec-text);
}

.tec-field__hint {
	font-size: var(--tec-font-size-xs);
	color: var(--tec-muted);
}

.tec-field__error {
	font-size: var(--tec-font-size-xs);
	color: var(--tec-danger);
	font-weight: var(--tec-font-weight-medium);
}

.tec-input,
.tec-select,
.tec-textarea {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--tec-border-strong);
	border-radius: var(--tec-radius-sm);
	background: var(--tec-bg);
	color: var(--tec-text);
	font-family: var(--tec-font-family);
	font-size: var(--tec-font-size-sm);
	line-height: var(--tec-line-height-base);
	transition: border-color var(--tec-transition-fast), box-shadow var(--tec-transition-fast);
}

.tec-input:focus,
.tec-select:focus,
.tec-textarea:focus {
	outline: none;
	border-color: var(--tec-primary);
	box-shadow: var(--tec-shadow-focus);
}

.tec-input--error,
.tec-select--error,
.tec-textarea--error {
	border-color: var(--tec-danger);
}

.tec-input--error:focus,
.tec-select--error:focus,
.tec-textarea--error:focus {
	box-shadow: 0 0 0 3px var(--tec-danger-soft);
}

.tec-checkbox,
.tec-radio {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--tec-primary);
}

.tec-checkbox:focus-visible,
.tec-radio:focus-visible {
	outline: none;
	box-shadow: var(--tec-shadow-focus);
}

/* ---------------------------------------------------------------------- */
/* Loading skeleton                                                     */
/* ---------------------------------------------------------------------- */

.tec-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--tec-skeleton-base);
	border-radius: var(--tec-radius-sm);
	color: transparent;
}

.tec-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--tec-skeleton-shine), transparent);
	animation: tec-skeleton-shimmer 1.4s ease-in-out infinite;
}

.tec-skeleton--text {
	height: 0.9em;
	margin: 0.25em 0;
	border-radius: var(--tec-radius-sm);
}

.tec-skeleton--title {
	height: 1.5em;
	width: 60%;
}

.tec-skeleton--circle {
	border-radius: 50%;
}

.tec-skeleton--card {
	height: 120px;
	border-radius: var(--tec-radius-lg);
}

@keyframes tec-skeleton-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.tec-skeleton::after {
		animation: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Empty / Success / Error states                                       */
/* ---------------------------------------------------------------------- */

.tec-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--tec-space-3);
	padding: var(--tec-space-8) var(--tec-space-5);
	text-align: center;
	color: var(--tec-muted);
}

.tec-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--tec-bg-subtle);
	color: var(--tec-subtle);
}

.tec-state__title {
	margin: 0;
	font-size: var(--tec-font-size-base);
	font-weight: var(--tec-font-weight-semibold);
	color: var(--tec-text);
}

.tec-state__description {
	margin: 0;
	max-width: 40ch;
	font-size: var(--tec-font-size-sm);
}

.tec-state--success .tec-state__icon {
	background: var(--tec-success-soft);
	color: var(--tec-success);
}

.tec-state--error .tec-state__icon {
	background: var(--tec-danger-soft);
	color: var(--tec-danger);
}

/* ---------------------------------------------------------------------- */
/* Utility                                                               */
/* ---------------------------------------------------------------------- */

.tec-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tec-card,
	.tec-dashboard-card,
	.tec-settings-card,
	.tec-btn,
	.tec-event-badge,
	.tec-calendar-cell__number,
	.tec-hover-lift,
	.tec-hover-brighten {
		transition: none;
	}
}