/**
 * Qrxs — base visual layer.
 *
 * Design intent: a clean, functional dashboard look — this is a utility
 * tool (RSVP management), not a brand moment, so one type family carries
 * both display and body roles with weight variation doing the work.
 * Indigo/slate palette chosen deliberately over the near-cream+terracotta
 * or near-black+neon defaults — this is a daytime, form-heavy admin tool,
 * not a marketing page.
 *
 * Token system:
 *   --qrxs-primary       #4F46E5  (indigo — buttons, active states, links)
 *   --qrxs-primary-dark  #3730A3  (hover)
 *   --qrxs-success       #059669
 *   --qrxs-error         #DC2626
 *   --qrxs-bg            #F8FAFC  (page background)
 *   --qrxs-surface       #FFFFFF  (cards/panels)
 *   --qrxs-border        #E2E8F0
 *   --qrxs-text          #0F172A
 *   --qrxs-text-muted    #64748B
 */

:root {
	--qrxs-primary: #4F46E5;
	--qrxs-primary-dark: #3730A3;
	--qrxs-success: #059669;
	--qrxs-success-bg: #ECFDF5;
	--qrxs-error: #DC2626;
	--qrxs-error-bg: #FEF2F2;
	--qrxs-bg: #F8FAFC;
	--qrxs-surface: #FFFFFF;
	--qrxs-border: #E2E8F0;
	--qrxs-text: #0F172A;
	--qrxs-text-muted: #64748B;
	--qrxs-radius: 10px;
	--qrxs-radius-sm: 6px;
	--qrxs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------
   Shared base — applies inside the Client Panel container and the
   standalone invitation page body alike.
   --------------------------------------------------------------------- */

.qrxs-client-panel,
.qrxs-invitation-page {
	font-family: var(--qrxs-font);
	color: var(--qrxs-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.qrxs-invitation-page {
	margin: 0;
	background: var(--qrxs-bg);
	min-height: 100vh;
	padding: 32px 16px;
	box-sizing: border-box;
}

.qrxs-client-panel * ,
.qrxs-invitation-page * {
	box-sizing: border-box;
}

.qrxs-client-panel h3,
.qrxs-invitation-page h1 {
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}

.qrxs-client-panel h3 { font-size: 20px; }
.qrxs-client-panel h4 { font-size: 15px; font-weight: 600; margin: 24px 0 8px; }

.qrxs-hint {
	color: var(--qrxs-text-muted);
	font-size: 13px;
	margin: 4px 0 16px;
}

.qrxs-notice {
	padding: 10px 14px;
	border-radius: var(--qrxs-radius-sm);
	font-size: 14px;
	margin-bottom: 16px;
}
.qrxs-notice.qrxs-success { background: var(--qrxs-success-bg); color: var(--qrxs-success); }
.qrxs-notice.qrxs-error { background: var(--qrxs-error-bg); color: var(--qrxs-error); }

/* ---------------------------------------------------------------------
   Forms — one consistent style used across every tab and the public
   RSVP form, so filling out an event's own RSVP form and managing it
   in the panel feel like the same product.
   --------------------------------------------------------------------- */

.qrxs-client-panel form,
.qrxs-rsvp-form {
	max-width: 480px;
}

.qrxs-client-panel label,
.qrxs-rsvp-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--qrxs-text);
	margin-bottom: 14px;
}

.qrxs-client-panel input[type="text"],
.qrxs-client-panel input[type="email"],
.qrxs-client-panel input[type="tel"],
.qrxs-client-panel input[type="date"],
.qrxs-client-panel input[type="time"],
.qrxs-client-panel input[type="file"],
.qrxs-client-panel select,
.qrxs-client-panel textarea,
.qrxs-rsvp-form input[type="text"],
.qrxs-rsvp-form input[type="email"],
.qrxs-rsvp-form input[type="tel"],
.qrxs-rsvp-form select,
.qrxs-rsvp-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	color: var(--qrxs-text);
	background: var(--qrxs-surface);
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius-sm);
	transition: border-color 0.15s ease;
}

.qrxs-client-panel input[type="color"] {
	margin-top: 6px;
	width: 60px;
	height: 36px;
	padding: 2px;
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius-sm);
	cursor: pointer;
}

.qrxs-client-panel input:focus,
.qrxs-client-panel select:focus,
.qrxs-client-panel textarea:focus,
.qrxs-rsvp-form input:focus,
.qrxs-rsvp-form select:focus,
.qrxs-rsvp-form textarea:focus {
	outline: none;
	border-color: var(--qrxs-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.qrxs-rsvp-form textarea,
.qrxs-client-panel textarea {
	min-height: 80px;
	resize: vertical;
}

/* Buttons */
.qrxs-client-panel button,
.qrxs-rsvp-form button,
.qrxs-landing-cta-btn {
	display: inline-block;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--qrxs-radius-sm);
	border: none;
	cursor: pointer;
	background: var(--qrxs-primary);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.qrxs-client-panel button:hover,
.qrxs-rsvp-form button:hover,
.qrxs-landing-cta-btn:hover {
	background: var(--qrxs-primary-dark);
}

.qrxs-client-panel button[type="button"] {
	background: var(--qrxs-surface);
	color: var(--qrxs-primary);
	border: 1px solid var(--qrxs-border);
}
.qrxs-client-panel button[type="button"]:hover {
	background: var(--qrxs-bg);
}

.qrxs-delete-btn,
.qrxs-client-panel button.qrxs-delete-btn {
	background: var(--qrxs-error-bg);
	color: var(--qrxs-error);
	margin-top: 24px;
}
.qrxs-delete-btn:hover { background: #FEE2E2; }

.qrxs-landing-cta-btn {
	padding: 14px 28px;
	font-size: 15px;
	border-radius: var(--qrxs-radius);
}

/* ---------------------------------------------------------------------
   Client Panel shell — topbar, profile widget, tabs
   --------------------------------------------------------------------- */

.qrxs-client-panel {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 16px 64px;
}

.qrxs-panel-topbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.qrxs-profile-widget {
	position: relative;
}

.qrxs-profile-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--qrxs-surface);
	border: 1px solid var(--qrxs-border);
	border-radius: 999px;
	padding: 6px 14px 6px 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--qrxs-text);
	cursor: pointer;
}

.qrxs-avatar-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
}

.qrxs-profile-dropdown {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	background: var(--qrxs-surface);
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	padding: 16px;
	width: 260px;
	z-index: 20;
}
.qrxs-profile-dropdown.is-open { display: block; }
.qrxs-profile-dropdown a {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	color: var(--qrxs-text-muted);
	text-decoration: none;
}
.qrxs-profile-dropdown a:hover { color: var(--qrxs-error); }

.qrxs-event-switcher {
	margin-bottom: 16px;
}
.qrxs-event-switcher select {
	margin-left: 8px;
	padding: 6px 10px;
	border-radius: var(--qrxs-radius-sm);
	border: 1px solid var(--qrxs-border);
	font-family: inherit;
	font-size: 13px;
}

.qrxs-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--qrxs-border);
	margin-bottom: 24px;
	overflow-x: auto;
}

.qrxs-tab {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--qrxs-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.qrxs-tab:hover { color: var(--qrxs-text); }
.qrxs-tab.is-active {
	color: var(--qrxs-primary);
	border-bottom-color: var(--qrxs-primary);
}

.qrxs-tab-content {
	background: var(--qrxs-surface);
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius);
	padding: 24px;
}

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */

.qrxs-events-table,
.qrxs-rsvp-table,
.qrxs-team-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-bottom: 8px;
}

.qrxs-events-table th,
.qrxs-rsvp-table th,
.qrxs-team-table th {
	text-align: left;
	font-weight: 600;
	color: var(--qrxs-text-muted);
	padding: 8px 10px;
	border-bottom: 1px solid var(--qrxs-border);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.qrxs-events-table td,
.qrxs-rsvp-table td,
.qrxs-team-table td {
	padding: 10px;
	border-bottom: 1px solid var(--qrxs-border);
}

.qrxs-events-table tr.is-selected {
	background: rgba(79, 70, 229, 0.05);
}

.qrxs-events-table a,
.qrxs-team-table a {
	color: var(--qrxs-primary);
	font-weight: 600;
	text-decoration: none;
}
.qrxs-events-table a:hover,
.qrxs-team-table a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Analytics
   --------------------------------------------------------------------- */

.qrxs-analytics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.qrxs-stat {
	background: var(--qrxs-bg);
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius-sm);
	padding: 16px;
	text-align: center;
}

.qrxs-stat-value {
	display: block;
	font-size: 28px;
	font-weight: 700;
	color: var(--qrxs-primary);
}

.qrxs-stat-label {
	display: block;
	font-size: 12px;
	color: var(--qrxs-text-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------------
   Form Setup field builder
   --------------------------------------------------------------------- */

.qrxs-field-row {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}
.qrxs-field-row input { margin-top: 0; flex: 2; }
.qrxs-field-row select { margin-top: 0; flex: 1; }

/* ---------------------------------------------------------------------
   Share buttons — used on both the panel (Manage Event) and the public
   invitation page
   --------------------------------------------------------------------- */

.qrxs-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 8px;
}

.qrxs-share-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--qrxs-radius-sm);
	text-decoration: none;
	border: 1px solid var(--qrxs-border);
	background: var(--qrxs-surface);
	color: var(--qrxs-text);
	cursor: pointer;
	font-family: inherit;
}
.qrxs-share-btn:hover { background: var(--qrxs-bg); }
.qrxs-share-whatsapp { border-color: #25D366; color: #128C4A; }
.qrxs-share-email { border-color: var(--qrxs-border); }
.qrxs-share-facebook { border-color: #1877F2; color: #1877F2; }
.qrxs-share-telegram { border-color: #229ED9; color: #229ED9; }

/* ---------------------------------------------------------------------
   Carousel previews (Manage Event editor + public invitation page)
   --------------------------------------------------------------------- */

.qrxs-carousel-preview {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 8px 0 16px;
}
.qrxs-carousel-preview img {
	border-radius: var(--qrxs-radius-sm);
	border: 1px solid var(--qrxs-border);
	object-fit: cover;
}

.qrxs-invitation-card-image {
	width: 100%;
	max-width: 500px;
	border-radius: var(--qrxs-radius);
	margin-bottom: 16px;
	display: block;
}

.qrxs-invitation-carousel {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	margin: 16px 0;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
}
.qrxs-carousel-image {
	width: 100%;
	max-width: 320px;
	border-radius: var(--qrxs-radius);
	scroll-snap-align: start;
	flex-shrink: 0;
	object-fit: cover;
}

.qrxs-invitation-designer-placeholder {
	background: var(--qrxs-bg);
	border: 1px dashed var(--qrxs-border);
	border-radius: var(--qrxs-radius-sm);
	padding: 14px;
	margin: 12px 0;
}
.qrxs-invitation-designer-placeholder p { margin: 0; font-size: 13px; color: var(--qrxs-text-muted); }

/* ---------------------------------------------------------------------
   Public invitation page — the standalone card
   --------------------------------------------------------------------- */

.qrxs-invitation-card {
	max-width: 480px;
	margin: 0 auto;
	background: var(--qrxs-surface);
	border-radius: var(--qrxs-radius);
	border: 1px solid var(--qrxs-border);
	padding: 32px 24px;
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
	text-align: center;
}

.qrxs-invitation-logo {
	max-width: 96px;
	max-height: 96px;
	object-fit: contain;
	margin: 0 auto 16px;
	display: block;
}

.qrxs-invitation-card h1 {
	font-size: 24px;
}

.qrxs-invitation-date {
	color: var(--qrxs-text-muted);
	font-size: 14px;
	margin-bottom: 24px;
}

.qrxs-invitation-card .qrxs-rsvp-form {
	max-width: none;
	text-align: left;
	margin-top: 16px;
}

.qrxs-closed-notice {
	background: var(--qrxs-bg);
	border-radius: var(--qrxs-radius-sm);
	padding: 16px;
	color: var(--qrxs-text-muted);
	font-size: 14px;
}

.qrxs-invitation-share {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--qrxs-border);
}
.qrxs-invitation-share p {
	font-size: 13px;
	color: var(--qrxs-text-muted);
	margin-bottom: 4px;
}
.qrxs-invitation-share .qrxs-share-buttons {
	justify-content: center;
}

.qrxs-success { color: var(--qrxs-success); font-weight: 600; }
.qrxs-error { color: var(--qrxs-error); font-weight: 600; }

/* ---------------------------------------------------------------------
   Login / register prompt
   --------------------------------------------------------------------- */

.qrxs-login-prompt {
	max-width: 360px;
	margin: 40px auto;
	background: var(--qrxs-surface);
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius);
	padding: 32px 24px;
	text-align: center;
}
.qrxs-login-prompt h2 { font-size: 18px; margin-bottom: 20px; }
.qrxs-login-prompt form { text-align: left; margin: 0 auto; }
.qrxs-login-prompt p { font-size: 13px; margin-top: 16px; }
.qrxs-login-prompt a { color: var(--qrxs-primary); font-weight: 600; text-decoration: none; }
.qrxs-social-login-slot { margin: 16px 0; }

/* ---------------------------------------------------------------------
   Hub — 3 action cards + created events list
   --------------------------------------------------------------------- */

.qrxs-welcome {
	font-size: 14px;
	font-weight: 600;
	color: var(--qrxs-text);
}

.qrxs-logout-link {
	font-size: 13px;
	color: var(--qrxs-text-muted);
	text-decoration: none;
}
.qrxs-logout-link:hover { color: var(--qrxs-error); }

.qrxs-back-link {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--qrxs-text-muted);
	text-decoration: none;
	margin-bottom: 12px;
}
.qrxs-back-link:hover { color: var(--qrxs-primary); }

.qrxs-hub-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 24px 0 40px;
}

.qrxs-hub-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	background: var(--qrxs-surface);
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius);
	padding: 24px 20px;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qrxs-hub-card:hover {
	border-color: var(--qrxs-primary);
	box-shadow: 0 4px 16px rgba(79, 70, 229, 0.1);
}

.qrxs-hub-card-icon {
	font-size: 22px;
	font-weight: 700;
	color: var(--qrxs-primary);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(79, 70, 229, 0.08);
	border-radius: 999px;
	margin-bottom: 8px;
}

.qrxs-hub-card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--qrxs-text);
}

.qrxs-hub-card-desc {
	font-size: 12px;
	color: var(--qrxs-text-muted);
}

.qrxs-event-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.qrxs-event-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--qrxs-surface);
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius);
	padding: 18px;
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.qrxs-event-card:hover { border-color: var(--qrxs-primary); }

.qrxs-event-card-logo {
	width: 36px;
	height: 36px;
	object-fit: contain;
	margin-bottom: 6px;
}

.qrxs-event-card-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--qrxs-text);
}

.qrxs-event-card-date,
.qrxs-event-card-meta {
	font-size: 13px;
	color: var(--qrxs-text-muted);
}

.qrxs-event-card-expiry {
	font-size: 11px;
	color: var(--qrxs-text-muted);
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--qrxs-border);
}

/* Sub-tabs (inside an event's own panel) — same visual language as the
   top-level tabs, just nested one level deeper. */
.qrxs-subtabs { margin-top: 16px; }

.qrxs-rsvp-list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.qrxs-export-btn {
	display: inline-block;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	background: var(--qrxs-surface);
	color: var(--qrxs-primary);
	border: 1px solid var(--qrxs-primary);
	border-radius: var(--qrxs-radius-sm);
	text-decoration: none;
}
.qrxs-export-btn:hover { background: rgba(79, 70, 229, 0.06); }

.qrxs-avatar-preview {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   Auth toggle (Sign In / Create Free Account)
   --------------------------------------------------------------------- */

.qrxs-auth-toggle {
	display: flex;
	border: 1px solid var(--qrxs-border);
	border-radius: var(--qrxs-radius-sm);
	overflow: hidden;
	margin-bottom: 20px;
}

.qrxs-auth-toggle-btn {
	flex: 1;
	text-align: center;
	padding: 10px 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--qrxs-text-muted);
	text-decoration: none;
	background: var(--qrxs-bg);
}
.qrxs-auth-toggle-btn.is-active {
	background: var(--qrxs-primary);
	color: #fff;
}

.qrxs-auth-divider {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--qrxs-text-muted);
	font-size: 12px;
	margin: 16px 0;
}
.qrxs-auth-divider::before,
.qrxs-auth-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--qrxs-border);
}
.qrxs-auth-divider span { padding: 0 10px; }

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

@media (max-width: 600px) {
	.qrxs-tab-content { padding: 16px; }
	.qrxs-panel-topbar { justify-content: space-between; }
	.qrxs-field-row { flex-direction: column; }
	.qrxs-invitation-card { padding: 24px 16px; }
}

/* Respect reduced-motion preference — the only "animation" in this pass
   is the profile dropdown toggle, which is instant (display:none/block),
   so there's nothing to disable here yet, but this is left as a hook for
   any future transitions. */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}