/* ForClub theme components — token-backed styles (replaces dark-theme.css) */

/* Text utilities */
.fc-text-primary {
  color: var(--fc-text-primary);
}

.fc-text-secondary {
  color: var(--fc-text-secondary);
}

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

.fc-text-on-accent {
  color: var(--fc-text-on-accent);
}

[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page, .attendance-session-page) .fc-text-on-accent {
  color: var(--fc-text-on-accent) !important;
}

.fc-bg-page {
  background: var(--fc-bg-page-gradient);
}

.fc-surface-tile {
  background: var(--fc-bg-glass-subtle);
  border: 1px solid var(--fc-border);
  border-radius: 0.75rem;
}

.fc-stat-value {
  color: var(--fc-text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fc-stat-label {
  color: var(--fc-text-muted);
  font-size: 0.875rem;
}

.fc-stat-accent-emerald { color: var(--fc-stat-positive); }
.fc-stat-accent-red { color: var(--fc-stat-negative); }
.fc-stat-accent-amber { color: var(--fc-stat-warning); }
.fc-stat-accent-blue { color: var(--fc-stat-info); }
.fc-stat-accent-cyan { color: var(--fc-accent); }

.fc-alert-warning {
  background: color-mix(in srgb, var(--fc-warning) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-warning) 35%, transparent);
  color: var(--fc-stat-warning);
}

[data-theme="light"] .fc-alert-warning {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

.fc-alert-danger {
  background: color-mix(in srgb, var(--fc-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-danger) 40%, transparent);
  color: var(--fc-stat-negative);
}

[data-theme="light"] .fc-alert-danger {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fca5a5;
}

.fc-alert-success {
  background: color-mix(in srgb, var(--fc-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-accent) 40%, transparent);
  color: var(--fc-stat-positive);
}

[data-theme="light"] .fc-alert-success {
  color: #065f46;
  background: #d1fae5;
  border-color: #6ee7b7;
}

/* Dashed «create» actions — readable in both themes */
.fc-btn-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 2px dashed var(--fc-border-accent);
  border-radius: 0.75rem;
  color: var(--fc-accent-strong);
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fc-btn-create:hover {
  background: var(--fc-accent-muted);
  border-color: var(--fc-accent);
}

/* Secondary CTA beside a solid accent button — readable on light and dark glass */
.fc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 700;
  background: color-mix(in srgb, #334155 80%, transparent);
  border: 1px solid color-mix(in srgb, #64748b 40%, transparent);
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fc-btn-secondary:hover {
  background: #475569;
  color: #fff;
}

[data-theme="light"] .fc-btn-secondary {
  background: var(--fc-bg-surface);
  color: var(--fc-text-primary);
  border-color: var(--fc-border-strong);
}

[data-theme="light"] .fc-btn-secondary:hover {
  background: var(--fc-bg-hover);
  border-color: var(--fc-accent);
  color: var(--fc-accent-strong);
}

/* Auth / standalone forms — typed text readable in light mode */
[data-theme="light"] .auth-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
  color: var(--fc-text-primary) !important;
  background: var(--fc-input-bg) !important;
  border-color: var(--fc-input-border) !important;
}

[data-theme="light"] .auth-page :is(input, select, textarea)::placeholder {
  color: var(--fc-input-placeholder) !important;
  opacity: 1;
}

[data-theme="public"] .public-form :is(input, select, textarea).form-input,
.public-form .form-input {
  color: var(--fc-text-primary);
}
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) :is(p, dd, dt, span, li, h1, h2, h3, h4, td, th, label, div, button).text-white:not([class*="bg-gradient"]):not([class*="from-emerald"]):not([class*="from-cyan"]):not([class*="from-purple"]):not([class*="from-rose"]):not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-blue"]):not([class*="bg-cyan"]):not([class*="bg-purple"]),
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) :is(p, dd, dt, span, li, h1, h2, h3, h4, td, th, label, div).text-white:not([class*="bg-gradient"]):not([class*="from-emerald"]):not([class*="from-cyan"]):not([class*="from-purple"]):not([class*="from-rose"]):not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-blue"]):not([class*="bg-cyan"]):not([class*="bg-purple"]) {
  color: var(--fc-text-primary);
}

/* Filled solid CTAs only — do not match translucent washes (bg-emerald-500/20)
   or hover:* class names, or pale-on-white labels become unreadable. */
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page, .attendance-session-page)
  :is(a, button, div)[class*="bg-gradient"]:not([class*="/"]),
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page, .attendance-session-page)
  :is(a, button, div)[class*="from-emerald"]:not([class*="/"]),
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page, .attendance-session-page)
  :is(a, button, div)[class*="from-cyan"]:not([class*="/"]),
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page, .attendance-session-page)
  :is(a, button, div)[class*="from-purple"]:not([class*="/"]),
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page, .attendance-session-page)
  :is(a, button)[class*="bg-emerald"]:not([class*="/"]):not([class*="hover:bg-"]),
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page, .attendance-session-page)
  :is(a, button)[class*="bg-cyan"]:not([class*="/"]):not([class*="hover:bg-"]) {
  color: var(--fc-text-on-accent) !important;
}

[data-theme="light"] .help-page-trigger {
  color: var(--fc-text-secondary);
}

[data-theme="light"] .help-page-trigger:hover {
  color: var(--fc-accent-strong);
}

[data-theme="light"] .manager-dash-page :is(.text-cyan-200, .text-cyan-300, .text-emerald-400) {
  color: var(--fc-accent-strong);
}

[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) a.text-white:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-blue"]):not([class*="bg-cyan"]):not([class*="from-emerald"]):not([class*="from-cyan"]):not([class*="from-purple"]):not([class*="bg-gradient"]),
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) button.text-white:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-blue"]):not([class*="bg-cyan"]):not([class*="from-emerald"]):not([class*="from-cyan"]):not([class*="from-purple"]):not([class*="bg-gradient"]) {
  color: var(--fc-text-primary);
}

[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) a.text-white:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-blue"]):not([class*="bg-cyan"]):not([class*="from-emerald"]):not([class*="from-cyan"]):not([class*="from-purple"]):not([class*="bg-gradient"]) {
  color: var(--fc-accent-strong);
}

[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) .text-gray-300,
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) .text-gray-400,
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) .text-gray-500,
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) .text-slate-300,
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page, .marketplace-page) .text-slate-400 {
  color: var(--fc-text-muted);
}

/* Manager list operation icons — iconify mask/svg modes use currentColor */
.manager-page iconify-icon,
.manager-page [class*="icon-["] {
  display: inline-block;
  vertical-align: middle;
  color: inherit;
}

[data-theme="light"] .manager-page :is(a, button).text-slate-300 {
  color: var(--fc-text-secondary);
}

[data-theme="light"] .manager-page :is(a, button).text-slate-300:hover,
[data-theme="light"] .manager-page :is(a, button)[class*="hover:text-emerald"]:hover {
  color: var(--fc-accent-strong);
}

[data-theme="light"] .manager-page :is(a, button).text-amber-400 {
  color: var(--fc-stat-warning);
}

[data-theme="light"] .manager-page :is(a, button).text-amber-400:hover {
  color: #b45309;
}

[data-theme="light"] .manager-page :is(a, button).text-rose-400 {
  color: var(--fc-stat-negative);
}

[data-theme="light"] .manager-page td :is(a, button).text-yellow-400 {
  color: var(--fc-stat-warning);
}

[data-theme="light"] .manager-page td :is(a, button).text-yellow-400:hover {
  color: #b45309;
}

[data-theme="light"] .manager-page td :is(a, button).text-blue-400 {
  color: var(--fc-stat-info);
}

[data-theme="light"] .manager-page td :is(a, button).text-emerald,
[data-theme="light"] .manager-page td :is(a, button)[class*="text-emerald"]:not([class*="bg-"]) {
  color: var(--fc-accent-strong);
}

[data-theme="light"] .manager-page td :is(a, button).text-emerald:hover,
[data-theme="light"] .manager-page td :is(a, button)[class*="hover:text-emerald"]:hover {
  color: var(--fc-accent);
}

/* Light mode — table chips, balance amounts, legacy thead */
[data-theme="light"] :is(.manager-page, .manager-dash-page) :is(span, a)[class*="bg-emerald-500/10"] {
  color: var(--fc-accent-strong) !important;
}

[data-theme="light"] :is(.manager-page, .manager-dash-page) :is(td, p)[class*="text-amber-300"] {
  color: var(--fc-stat-warning) !important;
}

[data-theme="light"] :is(.manager-page, .manager-dash-page) :is(td, p).text-rose-400,
[data-theme="light"] :is(.manager-page, .manager-dash-page) :is(td, p)[class*="text-rose-400"] {
  color: var(--fc-stat-negative) !important;
}

[data-theme="light"] :is(.manager-page, .manager-dash-page) thead[class*="bg-gray"] {
  background: var(--fc-manager-table-bg) !important;
  border-color: var(--fc-border-accent) !important;
}

[data-theme="light"] :is(.manager-page, .manager-dash-page) thead.text-emerald-400 th,
[data-theme="light"] :is(.manager-page, .manager-dash-page) thead[class*="text-emerald"] th {
  color: var(--fc-accent-strong) !important;
}

[data-theme="light"] :is(.manager-page, .manager-dash-page) :is(a, button)[class*="border-dashed"] span.text-white {
  color: var(--fc-text-primary);
}

[data-theme="light"] :is(.manager-page, .manager-dash-page) :is(input, select, textarea).text-white,
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page) :is(input, select, textarea)[class*="bg-gray-800"],
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page) :is(input, select, textarea)[class*="bg-white/"],
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page) :is(input, select, textarea)[class*="bg-[var(--fc-bg-surface)]"] {
  color: var(--fc-text-primary) !important;
  background: var(--fc-input-bg) !important;
  border-color: var(--fc-input-border) !important;
}

[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page) input.bg-dark,
[data-theme="light"] :is(.manager-page, .manager-dash-page, .manager-standalone, .portal-page, .student-dash-page) select.bg-dark {
  background: var(--fc-input-bg) !important;
}

/* Placeholder text in manager panel inputs (legacy text-white / missing ::placeholder rules) */
:is(.manager-page, .manager-dash-page, #creat-newplayer, #coach-create-modal, #student-edit-view-modal, #coach-edit-view-modal, #profile-modal, #normal-profile-modal, #basic-profile-modal) :is(input, select, textarea)::placeholder {
  color: var(--fc-input-placeholder) !important;
  opacity: 1 !important;
}

:is(.manager-page, .manager-dash-page, .portal-page, .student-dash-page) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
  color: var(--fc-text-primary);
}

[data-theme="light"] :is(.manager-page, .manager-dash-page, .portal-page, .student-dash-page) :is(input, select, textarea)[class*="bg-[var(--fc-bg-glass-subtle)]"],
[data-theme="light"] :is(.manager-page, .manager-dash-page, .portal-page, .student-dash-page) :is(input, select, textarea).amount-formatted-input {
  background: var(--fc-input-bg) !important;
  border-color: var(--fc-input-border) !important;
  color: var(--fc-text-primary) !important;
}

.manager-filter-panel :is(input, select, textarea),
.payment-list-filter :is(input, select, textarea),
.student-list-filter :is(input, select, textarea),
.class-list-filter :is(input, select, textarea),
.absence-alert-list-filter :is(input, select, textarea) {
  background: var(--fc-input-bg) !important;
  border: 1px solid var(--fc-input-border) !important;
  color: var(--fc-text-primary) !important;
}

.manager-filter-panel :is(input, textarea)::placeholder,
.payment-list-filter :is(input, textarea)::placeholder,
.student-list-filter :is(input, textarea)::placeholder,
.class-list-filter :is(input, textarea)::placeholder {
  color: var(--fc-input-placeholder) !important;
  opacity: 1;
}

.fc-form-label {
  color: var(--fc-accent-strong);
  font-weight: 500;
}

.fc-form-help-danger {
  color: var(--fc-stat-negative);
}

.fc-search-input {
  background: var(--fc-input-bg);
  border: 1px solid var(--fc-input-border);
  color: var(--fc-text-primary);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fc-search-input::placeholder {
  color: var(--fc-input-placeholder);
}

.fc-search-input:focus {
  outline: none;
  border-color: var(--fc-accent);
  box-shadow: 0 0 0 4px var(--fc-accent-muted);
}

.class-list-filter {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.class-list-search {
  padding-inline-start: 2.75rem !important;
}

.class-list-search-icon {
  inset-inline-start: 0.75rem;
}

.class-list-table,
.student-roster-table {
  border: 1px solid var(--fc-border);
  border-radius: 1rem;
  overflow: hidden;
}

.class-list-table thead,
.student-roster-table thead {
  background: var(--fc-bg-glass-subtle);
  color: var(--fc-text-primary);
}

.class-list-table th,
.class-list-table td,
.student-roster-table th,
.student-roster-table td {
  border-bottom: 1px solid var(--fc-border);
}

.class-list-table tbody tr:hover,
.student-roster-table tbody tr:hover {
  background: var(--fc-bg-hover);
}

.student-roster-avatar {
  box-shadow: 0 0 0 2px var(--fc-border);
}

.roster-icon-pay {
  color: #047857 !important;
}

.roster-icon-extra {
  color: #7c3aed !important;
}

.roster-icon-phone {
  color: #34d399 !important;
}

[data-theme="dark"] .roster-icon-pay,
html:not([data-theme]) .roster-icon-pay {
  color: #34d399 !important;
}

[data-theme="dark"] .roster-icon-extra,
html:not([data-theme]) .roster-icon-extra {
  color: #c4b5fd !important;
}

[data-theme="dark"] .roster-icon-phone,
html:not([data-theme]) .roster-icon-phone {
  color: #6ee7b7 !important;
}

.student-roster-pager {
  border-color: var(--fc-border);
}

.class-list-badge-active {
  background: var(--fc-accent-muted);
  color: var(--fc-accent-strong);
}

.class-list-badge-archived {
  background: var(--fc-bg-hover);
  color: var(--fc-text-muted);
}

.class-list-pagination {
  border-top: 1px solid var(--fc-border);
}

.class-list-chip,
.class-list-clear {
  border: 1px solid var(--fc-border);
  color: var(--fc-text-primary);
}

.class-list-chip:hover,
.class-list-clear:hover {
  background: var(--fc-bg-hover);
}

.class-list-card {
  border: 1px solid var(--fc-border);
}

/* Theme-aware form controls (manager modals, standalone forms, inline modals) */
.form-input,
input.form-input,
select.form-input,
textarea.form-input,
#profile-modal .form-input,
#basic-profile-modal .form-input {
  background: var(--fc-input-bg) !important;
  border: 1px solid var(--fc-input-border) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  color: var(--fc-text-primary) !important;
  width: 100%;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.form-input:focus,
#profile-modal .form-input:focus,
#basic-profile-modal .form-input:focus {
  outline: none !important;
  border-color: var(--fc-accent) !important;
  box-shadow: 0 0 0 3px var(--fc-accent-muted) !important;
}

.form-input::placeholder,
#profile-modal .form-input::placeholder,
#basic-profile-modal .form-input::placeholder,
.manager-page .amount-formatted-input::placeholder,
.manager-dash-page .amount-formatted-input::placeholder {
  color: var(--fc-input-placeholder);
}

.form-input:disabled,
.form-input[readonly],
#profile-modal .form-input:disabled,
#profile-modal .form-input[readonly],
#basic-profile-modal .form-input:disabled,
#basic-profile-modal .form-input[readonly] {
  opacity: 0.7;
  cursor: not-allowed;
}

select.form-input,
#profile-modal select.form-input,
#basic-profile-modal select.form-input {
  appearance: none;
  color-scheme: light dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 1.25rem;
  padding-left: 2.5rem !important;
}

[data-theme="light"] select.form-input {
  color-scheme: light;
}

[data-theme="dark"] select.form-input,
html:not([data-theme]) select.form-input {
  color-scheme: dark;
}

select.form-input option {
  background: var(--fc-bg-surface);
  color: var(--fc-text-primary);
}

.fc-border {
  border-color: var(--fc-border);
}

/* Background gradients */
.bg-dark {
  background: var(--fc-bg-page-gradient);
}

.bg-dark-solid {
  background: var(--fc-bg-page);
}

/* Glass-morphism effects */
.glass-presence {
  background: var(--fc-bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--fc-border);
  border-radius: 1.5rem;
}

[data-theme="light"] .glass-presence {
  backdrop-filter: none;
  background: var(--fc-bg-surface);
  box-shadow: var(--fc-shadow-glass);
}

form.attendance-manager-filters {
  position: relative;
  z-index: 20;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.attendance-manager-filters .fc-search-input,
.attendance-manager-filters select.form-input {
  border-color: var(--fc-input-border) !important;
  outline: none;
  box-shadow: none;
}

.attendance-manager-filters .fc-search-input:focus,
.attendance-manager-filters select.form-input:focus {
  border-color: var(--fc-accent) !important;
  box-shadow: 0 0 0 4px var(--fc-accent-muted) !important;
}

/* Standalone session attendance (coach/manager QR page) */
.attendance-session-page {
  background: var(--fc-bg-page-gradient);
  color: var(--fc-text-primary);
  font-family: 'Vazirmatn', sans-serif;
}

.attendance-session-page .skill-slider {
  background: var(--fc-input-border);
}

.attendance-session-page .row-even {
  background: var(--fc-manager-table-row-stripe);
}

.attendance-session-page .row-odd {
  background: color-mix(in oklab, var(--fc-info) 4%, transparent);
}

.attendance-session-page .row-hover:hover {
  background: var(--fc-manager-table-row-hover) !important;
}

.attendance-session-page .mobile-action-bar {
  background: color-mix(in oklab, var(--fc-bg-surface) 96%, transparent);
  border-top: 1px solid var(--fc-border-accent);
}

.attendance-session-page .attendance-modal-panel {
  background: var(--fc-bg-surface);
  border: 1px solid var(--fc-border-accent);
}

.attendance-session-page .qr-scanner-loading {
  background: color-mix(in oklab, var(--fc-bg-page) 88%, transparent);
  color: var(--fc-text-muted);
}

[data-theme="light"] .attendance-session-page .text-emerald-300,
[data-theme="light"] .attendance-session-page .text-emerald-400 {
  color: var(--fc-stat-positive);
}

[data-theme="light"] .attendance-session-page .text-cyan-400 {
  color: var(--fc-stat-info);
}

[data-theme="light"] .attendance-session-page .text-yellow-300,
[data-theme="light"] .attendance-session-page .text-yellow-400 {
  color: var(--fc-stat-warning);
}

[data-theme="light"] .attendance-session-page .text-purple-400 {
  color: #7c3aed;
}

[data-theme="light"] .attendance-session-page .text-red-300,
[data-theme="light"] .attendance-session-page .text-red-400 {
  color: var(--fc-stat-negative);
}

[data-theme="light"] .attendance-session-page .avg-bar-track {
  background: var(--fc-input-border);
}

[data-theme="light"] .attendance-session-page .dim-slider {
  background: linear-gradient(to right, var(--fc-input-border), var(--dim-color, #64748b));
}

[data-theme="light"] .manager-page .fc-chip-emerald {
  color: var(--fc-accent-strong) !important;
}

.glass-panel,
.glass-manager,
.glass-coach,
.glass {
  background: var(--fc-bg-glass);
  backdrop-filter: blur(20px);
  border-radius: 1.5rem;
}

.glass-card {
  background: var(--fc-bg-glass-subtle);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  border: 1px solid var(--fc-border);
}

/* Public light surface: flat cards instead of glass blur */
[data-surface="public"][data-theme="light"] .glass-manager,
[data-surface="public"][data-theme="light"] .glass {
  backdrop-filter: none;
  background: var(--fc-bg-surface);
  box-shadow: var(--fc-shadow-glass);
  border: 1px solid var(--fc-border);
}

/* Dashboard light mode — Cal flat cards on parchment canvas */
[data-theme="light"] .glass-manager,
[data-theme="light"] .glass-coach,
[data-theme="light"] .glass-panel,
[data-theme="light"] .glass {
  backdrop-filter: none;
  background: var(--fc-bg-surface);
  box-shadow: var(--fc-shadow-glass);
  border: 1px solid var(--fc-border);
}

[data-theme="light"] .glass-card {
  backdrop-filter: none;
  background: var(--fc-bg-glass-subtle);
}

/* Multi-club dashboard switcher dropdown — opaque + blur so sidebar/header text does not bleed through */
.fc-club-switcher-panel {
  background: color-mix(in oklab, var(--fc-bg-page) 92%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--fc-border-accent);
  box-shadow: var(--fc-shadow-glass);
}

[data-theme="light"] .fc-club-switcher-panel {
  background: var(--fc-bg-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.club-name-marquee {
  display: flex;
  direction: ltr;
  justify-content: flex-end;
  overflow: hidden;
  min-width: 0;
}

.club-name-marquee__text {
  direction: rtl;
  flex: none;
  white-space: nowrap;
}

.club-name-marquee__text--active {
  animation: fc-club-name-marquee 6s linear infinite;
}

@keyframes fc-club-name-marquee {
  0%,
  16.67% {
    transform: translateX(0);
  }

  83.33%,
  100% {
    transform: translateX(var(--club-name-shift));
  }
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--fc-shadow-hover);
}

/* Icon circle for collapsed sidebar */
.icon-circle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-bg-glass-subtle);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.icon-circle:hover {
  background: var(--fc-bg-accent-hover);
  transform: scale(1.05);
}

.icon-circle.active {
  background: color-mix(in srgb, var(--fc-accent) 30%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--fc-accent) 30%, transparent);
}

.icon-circle .tooltip {
  position: absolute;
  left: 100%;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--fc-bg-page) 95%, transparent);
  border: 1px solid var(--fc-border-accent);
  border-radius: 0.5rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 100;
  font-size: 0.875rem;
  color: var(--fc-text-primary);
  box-shadow: var(--fc-shadow-glass);
}

.icon-circle:hover .tooltip {
  opacity: 1;
}

/* Tab styles */
.tab-active {
  color: var(--fc-text-primary);
  border-bottom: 3px solid var(--fc-accent);
  background: linear-gradient(to top, var(--fc-accent-muted), transparent);
}

.tab-inactive {
  color: var(--fc-text-muted);
  border-bottom: 3px solid transparent;
}

.tab-inactive:hover {
  color: var(--fc-text-secondary);
  background: var(--fc-bg-hover);
}

/* Neon glow effect */
.neon-glow {
  box-shadow: 0 0 20px color-mix(in srgb, var(--fc-accent) 30%, transparent);
}

.neon-glow-blue {
  box-shadow: 0 0 20px color-mix(in srgb, var(--fc-info) 30%, transparent);
}

.neon-glow-purple {
  box-shadow: 0 0 20px color-mix(in srgb, #a855f7 30%, transparent);
}

/* Profile menu + modals — plain CSS (Tailwind arbitrary z-* may not be in build) */
.user-profile-dropdown {
  z-index: 9998;
  pointer-events: auto;
}

.fc-modal-backdrop {
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[data-theme="light"] .fc-modal-backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.profile-modal-overlay,
#profile-modal,
#basic-profile-modal,
#creat-newplayer,
#student-edit-view-modal,
#term-inline-modal {
  position: fixed !important;
  z-index: 9999 !important;
  pointer-events: auto;
}

#existing-user-confirm-modal {
  position: fixed !important;
  z-index: 10000 !important;
  pointer-events: auto;
}

.profile-modal-overlay > .absolute.inset-0 {
  z-index: 0;
}

.profile-modal-overlay .profile-modal-panel {
  position: relative;
  z-index: 1;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--fc-scrollbar-track);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--fc-scrollbar-thumb);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--fc-accent-strong);
}

/* Global scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--fc-bg-page);
}

::-webkit-scrollbar-thumb {
  background: var(--fc-scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fc-accent-strong);
}

/* Gradient backgrounds */
.gradient-emerald {
  background: linear-gradient(135deg, var(--fc-accent) 0%, var(--fc-accent-strong) 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.gradient-purple {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

/* Button styles */
.btn-emerald {
  background: linear-gradient(135deg, var(--fc-accent) 0%, var(--fc-accent-strong) 100%);
  color: var(--fc-text-on-accent);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-emerald:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--fc-accent) 30%, transparent);
}

.btn-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: var(--fc-text-on-accent);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--fc-info) 30%, transparent);
}

.btn-outline {
  background: transparent;
  color: var(--fc-accent);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  border: 2px solid var(--fc-accent);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--fc-accent);
  color: var(--fc-text-on-accent);
}

/* Form input styles */
.input-dark {
  background: var(--fc-input-bg);
  border: 1px solid var(--fc-input-border);
  border-radius: 0.75rem;
  color: var(--fc-text-primary);
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.input-dark:focus {
  outline: none;
  border-color: var(--fc-accent);
  box-shadow: 0 0 0 3px var(--fc-accent-muted);
  background: var(--fc-input-bg);
}

.input-dark::placeholder {
  color: var(--fc-input-placeholder);
}

/* Select dark */
.select-dark {
  background: var(--fc-input-bg);
  border: 1px solid var(--fc-input-border);
  border-radius: 0.75rem;
  color: var(--fc-text-primary);
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.select-dark:focus {
  outline: none;
  border-color: var(--fc-accent);
  box-shadow: 0 0 0 3px var(--fc-accent-muted);
}

.select-dark option {
  background: var(--fc-bg-page);
  color: var(--fc-text-primary);
}

/* Table styles */
.table-dark {
  background: var(--fc-manager-table-bg);
  border: 1px dashed var(--fc-manager-table-border);
  border-radius: 1rem;
  overflow: hidden;
}

.table-dark thead {
  background: var(--fc-manager-table-bg);
}

.table-dark thead th {
  color: var(--fc-accent-strong);
  font-weight: 600;
  padding: 1rem;
  text-align: right;
}

.table-dark tbody tr {
  border-bottom: 1px solid var(--fc-border);
  transition: background 0.2s ease;
  background: transparent;
}

.table-dark tbody tr:nth-child(even) {
  background: var(--fc-manager-table-row-stripe);
}

.table-dark tbody tr:hover {
  background: var(--fc-manager-table-row-hover);
}

.table-dark tbody td {
  padding: 1rem;
  color: var(--fc-text-secondary);
}

/* Manager panel list tables — subtle emerald tint (club settings «افزودن فیلد سفارشی» box) */
:is(.manager-page, .manager-dash-page) :is(.relative.overflow-x-auto, .glass-manager):has(> table):not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) {
  background-color: var(--fc-manager-table-bg) !important;
  border: 1px dashed var(--fc-manager-table-border) !important;
  border-radius: 0.75rem;
}

:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) table {
  background-color: transparent;
}

:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) table thead {
  background-color: var(--fc-manager-table-bg) !important;
}

:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) table thead th {
  color: var(--fc-accent-strong) !important;
  border-bottom: 1px solid var(--fc-border-accent);
}

:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) :is(.class-list-table, .student-roster-table) table thead th,
:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) :is(.class-list-table, .student-roster-table) table thead th button {
  color: var(--fc-text-primary) !important;
  font-weight: 700 !important;
}

:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) table tbody tr {
  background-color: transparent;
  border-color: var(--fc-border);
}

:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) table tbody tr:nth-child(even) {
  background-color: var(--fc-manager-table-row-stripe);
}

:is(.manager-page, .manager-dash-page) :not(#creat-newplayer):not(#coach-create-modal):not(#student-edit-view-modal):not(#coach-edit-view-modal) table tbody tr:hover {
  background-color: var(--fc-manager-table-row-hover) !important;
}

/* Badge styles */
.badge-success {
  background: color-mix(in srgb, var(--fc-accent) 20%, transparent);
  color: var(--fc-accent);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.badge-warning {
  background: color-mix(in srgb, var(--fc-warning) 20%, transparent);
  color: var(--fc-warning);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.badge-error {
  background: color-mix(in srgb, var(--fc-danger) 20%, transparent);
  color: var(--fc-danger);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

.badge-info {
  background: color-mix(in srgb, var(--fc-info) 20%, transparent);
  color: var(--fc-info);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Alert styles */
.alert-success {
  background: color-mix(in srgb, var(--fc-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-accent) 30%, transparent);
  border-radius: 0.75rem;
  padding: 1rem;
  color: var(--fc-accent);
}

.alert-error {
  background: color-mix(in srgb, var(--fc-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-danger) 30%, transparent);
  border-radius: 0.75rem;
  padding: 1rem;
  color: var(--fc-danger);
}

.alert-warning {
  background: color-mix(in srgb, var(--fc-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-warning) 30%, transparent);
  border-radius: 0.75rem;
  padding: 1rem;
  color: var(--fc-warning);
}

.alert-info {
  background: color-mix(in srgb, var(--fc-info) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-info) 30%, transparent);
  border-radius: 0.75rem;
  padding: 1rem;
  color: var(--fc-info);
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Stat card */
.stat-card {
  background: var(--fc-bg-glass-subtle);
  border-radius: 1.5rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fc-shadow-hover);
}

.stat-card .icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.stat-card .value {
  font-size: 3rem;
  font-weight: 700;
  color: var(--fc-text-primary);
}

.stat-card .label {
  font-size: 1.125rem;
  color: var(--fc-accent);
  margin-top: 0.5rem;
}

/* Announcement unread count badge */
.announcement-unread-count {
  z-index: 1;
}

.announcements-dropdown {
  z-index: 9998;
  pointer-events: auto;
}

.announcement-detail-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Standalone public pages (landing, blog, club public, legal) */
.bg-dark {
  background: var(--fc-bg-page-gradient);
}

.glass-effect {
  background: var(--fc-bg-surface);
  border: 1px solid var(--fc-border);
  box-shadow: var(--fc-shadow-glass);
  border-radius: 1rem;
}

[data-theme="dark"] .glass-effect,
html:not([data-theme]) .glass-effect {
  background: var(--fc-bg-glass);
  backdrop-filter: blur(20px);
  border-color: transparent;
  box-shadow: none;
}

.post-body img {
  max-width: 100%;
  border-radius: 0.75rem;
  margin: 1rem 0;
}

.post-body h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  color: var(--fc-text-primary);
}

.post-body p {
  margin: 0.5rem 0;
  color: var(--fc-text-secondary);
}

.post-body a {
  color: var(--fc-accent-strong);
}

/* Public class marketplace listing (/courses/marketplace/) */
.marketplace-page .mk-card {
  background: var(--fc-bg-surface);
  border: 1px solid var(--fc-border);
  border-radius: 1rem;
  box-shadow: var(--fc-shadow-glass);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .marketplace-page .mk-card,
html:not([data-theme]) .marketplace-page .mk-card {
  background: var(--fc-bg-glass);
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.marketplace-page .mk-card:hover {
  border-color: var(--fc-border-accent);
  box-shadow: var(--fc-shadow-hover);
}

.marketplace-page .mk-input {
  background: var(--fc-input-bg);
  border: 1px solid var(--fc-input-border);
  border-radius: 0.75rem;
  color: var(--fc-text-primary);
  padding: 0.6rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.marketplace-page .mk-input::placeholder {
  color: var(--fc-input-placeholder);
}

.marketplace-page .mk-input:focus {
  outline: none;
  border-color: var(--fc-accent);
  box-shadow: 0 0 0 3px var(--fc-accent-muted);
}

.marketplace-page .mk-input option {
  background: var(--fc-bg-surface);
  color: var(--fc-text-primary);
}

.marketplace-page .mk-club-avatar {
  background: color-mix(in srgb, var(--fc-accent) 15%, transparent);
  color: var(--fc-accent-strong);
}

.marketplace-page .mk-pill-emerald {
  background: color-mix(in srgb, var(--fc-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-accent) 30%, transparent);
  color: var(--fc-accent-strong);
}

.marketplace-page .mk-pill-amber {
  background: color-mix(in srgb, var(--fc-warning) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-warning) 35%, transparent);
  color: var(--fc-stat-warning);
}

[data-theme="light"] .marketplace-page .mk-pill-amber {
  color: #92400e;
}

.marketplace-page .mk-pill-red {
  background: color-mix(in srgb, var(--fc-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-danger) 30%, transparent);
  color: var(--fc-stat-negative);
}

.marketplace-page .mk-btn-clear {
  border: 1px solid var(--fc-border-strong);
  color: var(--fc-text-secondary);
}

.marketplace-page .mk-btn-clear:hover {
  background: var(--fc-bg-hover);
}

.marketplace-page .mk-btn-disabled {
  background: var(--fc-bg-glass-subtle);
  border: 1px solid var(--fc-border);
  color: var(--fc-text-muted);
  cursor: not-allowed;
}

/* Class detail standalone page — replace legacy dark-only utility colors in light mode. */
[data-theme="light"] .class-detail-page :is(.text-emerald-300, .text-emerald-400) {
  color: var(--fc-accent-strong) !important;
}

[data-theme="light"] .class-detail-page :is(.text-cyan-300, .text-cyan-400) {
  color: var(--fc-stat-info) !important;
}

[data-theme="light"] .class-detail-page :is(.text-yellow-300, .text-yellow-400) {
  color: var(--fc-stat-warning) !important;
}

[data-theme="light"] .class-detail-page :is(.text-purple-400) {
  color: #7c3aed !important;
}

[data-theme="light"] .class-detail-page :is(.text-red-300, .text-red-400) {
  color: var(--fc-stat-negative) !important;
}

[data-theme="light"] .class-detail-page :is([class*="bg-slate-700"], [class*="bg-slate-500"]) {
  background: var(--fc-bg-glass-subtle) !important;
}

[data-theme="light"] .class-detail-page :is([class*="border-slate-500"], [class*="divide-slate-700"]) {
  border-color: var(--fc-border) !important;
}

[data-theme="light"] .class-detail-page .class-detail-table {
  color: var(--fc-text-secondary);
}

[data-theme="light"] .class-detail-page .class-detail-table thead {
  background: var(--fc-manager-table-bg) !important;
}

[data-theme="light"] .class-detail-page .class-detail-table tbody tr {
  border-color: var(--fc-border);
}

[data-theme="light"] .class-detail-page .class-detail-table tbody tr:nth-child(even) {
  background: var(--fc-manager-table-row-stripe);
}

[data-theme="light"] .class-detail-page .class-detail-table tbody tr:hover {
  background: var(--fc-manager-table-row-hover) !important;
}

[data-theme="light"] .class-detail-page .class-detail-table :is(th, td) {
  border-color: var(--fc-border);
}

/* Shared ops CTA — wash in dark, solid accent + on-accent text in light. */
.ops-accent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--fc-accent) 40%, transparent);
  background: color-mix(in oklab, var(--fc-accent) 18%, transparent);
  color: var(--fc-stat-positive);
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ops-accent-btn:hover {
  background: color-mix(in oklab, var(--fc-accent) 28%, transparent);
}

[data-theme="light"] .ops-accent-btn {
  background: var(--fc-accent);
  border-color: var(--fc-accent);
  color: var(--fc-text-on-accent) !important;
}

[data-theme="light"] .ops-accent-btn:hover {
  background: var(--fc-accent-strong);
  border-color: var(--fc-accent-strong);
  color: var(--fc-text-on-accent) !important;
}

/* Ops bulk outreach (/ops/demos/outreach/) */
.ops-outreach-page .ops-outreach-filter-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="light"] .ops-outreach-page :is(.text-emerald-300, .text-emerald-400) {
  color: var(--fc-accent-strong) !important;
}

[data-theme="light"] .ops-outreach-page :is(.text-rose-200, .text-rose-400) {
  color: var(--fc-stat-negative);
}

[data-theme="light"] .ops-outreach-page :is(strong, p, span, li).text-white {
  color: var(--fc-text-primary);
}

/* Ops demo detail (/ops/demos/<pk>/) — leftover dark-only utilities. */
[data-theme="light"] .ops-demo-detail :is(.text-white) {
  color: var(--fc-text-primary) !important;
}

[data-theme="light"] .ops-demo-detail :is(.text-emerald-300, .text-emerald-400) {
  color: var(--fc-accent-strong) !important;
}

[data-theme="light"] .ops-demo-detail :is(.text-sky-200, .text-sky-300) {
  color: var(--fc-stat-info) !important;
}

[data-theme="light"] .ops-demo-detail :is(.text-amber-200, .text-amber-300, .text-amber-300\/90) {
  color: var(--fc-stat-warning) !important;
}

[data-theme="light"] .ops-demo-detail :is(.text-rose-200, .text-rose-300, .text-rose-400) {
  color: var(--fc-stat-negative) !important;
}

[data-theme="light"] .ops-demo-detail :is(.text-violet-300) {
  color: #6d28d9 !important;
}

[data-theme="light"] .ops-demo-detail :is(.text-slate-300, .text-slate-400, .text-slate-500) {
  color: var(--fc-text-muted) !important;
}

[data-theme="light"] .ops-demo-detail :is(input, select, textarea).text-white,
[data-theme="light"] .ops-demo-detail :is(input, select, textarea)[class*="bg-slate"],
[data-theme="light"] .ops-demo-detail :is(input, select, textarea)[class*="bg-[var(--fc-bg-surface)]"] {
  color: var(--fc-text-primary) !important;
  background: var(--fc-input-bg) !important;
  border-color: var(--fc-input-border) !important;
}

[data-theme="light"] .ops-demo-list :is(button, a).text-emerald-300 {
  color: var(--fc-text-on-accent) !important;
  background: var(--fc-accent);
  border-color: var(--fc-accent);
}

[data-theme="light"] .ops-demo-list :is(button, a).text-emerald-300:hover {
  background: var(--fc-accent-strong);
  border-color: var(--fc-accent-strong);
}

/* Public class marketplace detail (/courses/marketplace/<slug>/) */
.marketplace-page .mk-detail-section {
  background: var(--fc-bg-surface);
  border: 1px solid var(--fc-border);
  border-radius: 1.25rem;
  box-shadow: var(--fc-shadow-glass);
}

[data-theme="dark"] .marketplace-page .mk-detail-section,
html:not([data-theme]) .marketplace-page .mk-detail-section {
  background: var(--fc-bg-glass);
  box-shadow: none;
}

.marketplace-page .mk-section {
  margin-top: 2rem;
}

.marketplace-page .mk-heading {
  color: var(--fc-text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.marketplace-page .mk-copy {
  color: var(--fc-text-secondary);
  line-height: 1.9;
}

.marketplace-page .mk-fact {
  border: 1px solid var(--fc-border);
  border-radius: 0.9rem;
  padding: 0.75rem;
  background: var(--fc-bg-glass-subtle);
}

.marketplace-page .mk-fact dt {
  color: var(--fc-text-muted);
  font-size: 0.75rem;
}

.marketplace-page .mk-fact dd {
  color: var(--fc-text-primary);
  font-weight: 600;
  margin-top: 0.25rem;
}

.marketplace-page .mk-image-frame {
  aspect-ratio: 16 / 9;
  max-height: 20rem;
  background: var(--fc-bg-glass-subtle);
}

.marketplace-page .mk-gallery-frame {
  aspect-ratio: 16 / 9;
  max-height: 24rem;
  background: var(--fc-bg-glass-subtle);
  border: 1px solid var(--fc-border);
}

.marketplace-page .mk-list-item {
  border: 1px solid var(--fc-border);
  background: var(--fc-bg-glass-subtle);
  color: var(--fc-text-primary);
}

.marketplace-page .mk-faq {
  border: 1px solid var(--fc-border);
  background: var(--fc-bg-glass-subtle);
}

.marketplace-page .mk-faq summary {
  color: var(--fc-text-primary);
}

.marketplace-page .mk-thumb {
  border: 1px solid var(--fc-border);
  background: var(--fc-bg-glass-subtle);
}

.marketplace-page .mk-sticky-bar {
  background: var(--fc-bg-surface);
  border-top: 1px solid var(--fc-border);
  box-shadow: var(--fc-shadow-glass);
}

[data-theme="dark"] .marketplace-page .mk-sticky-bar,
html:not([data-theme]) .marketplace-page .mk-sticky-bar {
  background: color-mix(in oklab, var(--fc-bg-page) 92%, transparent);
  backdrop-filter: blur(12px);
}

.marketplace-page .mk-pill-info {
  background: color-mix(in srgb, var(--fc-info) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-info) 30%, transparent);
  color: var(--fc-stat-info);
}

.marketplace-page .mk-link-info {
  color: var(--fc-stat-info);
}

.marketplace-page .mk-pill-audience {
  background: color-mix(in srgb, #8b5cf6 12%, transparent);
  border: 1px solid color-mix(in srgb, #8b5cf6 30%, transparent);
  color: #6d28d9;
}

[data-theme="dark"] .marketplace-page .mk-pill-audience,
html:not([data-theme]) .marketplace-page .mk-pill-audience {
  color: #c4b5fd;
}

@media (max-width: 767px) {
  .marketplace-page .mk-detail-content {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Class form — public marketplace profile editor. */
.class-marketplace-profile {
  background: var(--fc-bg-glass-subtle);
  border: 1px solid var(--fc-border);
  color: var(--fc-text-primary);
  box-shadow: var(--fc-shadow-glass);
}

.class-marketplace-title,
.class-marketplace-subtitle {
  color: var(--fc-text-primary);
}

.class-marketplace-description,
.class-marketplace-label {
  color: var(--fc-text-secondary);
}

.class-marketplace-status {
  background: color-mix(in oklab, var(--fc-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--fc-accent) 30%, transparent);
  color: var(--fc-accent-strong);
}

.class-marketplace-faq {
  background: var(--fc-bg-surface);
  border: 1px solid var(--fc-border);
}

.class-marketplace-faq-row,
.class-marketplace-image-row {
  background: var(--fc-bg-glass-subtle);
  border: 1px solid var(--fc-border);
}

.class-marketplace-images {
  border-top: 1px solid var(--fc-border);
}

.class-marketplace-profile .class-marketplace-amenities {
  color: var(--fc-text-secondary);
}

.class-marketplace-profile .class-marketplace-amenities label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fc-border);
  border-radius: 0.75rem;
  color: var(--fc-text-secondary);
}

.class-marketplace-profile .class-marketplace-image-preview {
  border: 1px dashed var(--fc-border-strong);
  background: var(--fc-bg-surface);
  color: var(--fc-text-muted);
}

.class-marketplace-image-controls {
  color: var(--fc-text-secondary);
}

.class-marketplace-secondary-action {
  border: 1px solid color-mix(in oklab, var(--fc-accent) 45%, transparent);
  background: color-mix(in oklab, var(--fc-accent) 10%, transparent);
  color: var(--fc-accent-strong);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.class-marketplace-secondary-action:hover {
  background: color-mix(in oklab, var(--fc-accent) 18%, transparent);
  border-color: var(--fc-accent);
}

.class-marketplace-muted-action {
  color: var(--fc-text-muted);
}

.class-marketplace-muted-action:hover {
  color: var(--fc-text-secondary);
}

.class-marketplace-icon-action {
  border: 1px solid var(--fc-border-strong);
  color: var(--fc-text-secondary);
}

.class-marketplace-icon-action:hover {
  border-color: var(--fc-accent);
  color: var(--fc-accent-strong);
}

.class-marketplace-danger-action,
.class-marketplace-error-text {
  color: var(--fc-stat-negative);
}

.class-marketplace-error {
  border: 1px solid color-mix(in oklab, var(--fc-danger) 35%, transparent);
  background: color-mix(in oklab, var(--fc-danger) 10%, transparent);
  color: var(--fc-stat-negative);
}

[data-theme="light"] .class-form-page .class-marketplace-profile {
  background: var(--fc-bg-surface);
  border-color: var(--fc-border-accent);
  box-shadow: var(--fc-shadow-glass);
}

[data-theme="light"] .class-form-page .class-marketplace-faq,
[data-theme="light"] .class-form-page .class-marketplace-faq-row,
[data-theme="light"] .class-form-page .class-marketplace-image-row {
  background: var(--fc-bg-glass-subtle);
  border-color: var(--fc-border);
}

[data-theme="light"] .class-form-page .class-marketplace-profile :is(input, select, textarea) {
  background: var(--fc-input-bg);
  border-color: var(--fc-input-border);
  color: var(--fc-text-primary);
}

[data-theme="light"] .class-form-page .class-marketplace-profile :is(input, select, textarea)::placeholder {
  color: var(--fc-input-placeholder);
  opacity: 1;
}

[data-theme="light"] .class-form-page .class-form-actions {
  border-color: var(--fc-border);
}

@media (max-width: 639px) {
  .class-form-page .class-marketplace-profile {
    border-radius: 1rem;
  }

  .class-form-page .class-marketplace-image-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
  }

  .class-form-page .class-marketplace-image-controls > label,
  .class-form-page .class-marketplace-image-controls > button {
    min-height: 2.75rem;
  }

  .class-form-page .class-marketplace-image-controls > div {
    grid-column: 1 / -1;
  }
}