/*
 * Arena8 skin component mappings
 * -------------------------------
 * This file maps application UI surfaces to the tokens in public/css/skins/{skin}.css.
 * Keep selectors here focused on color, border, shadow, and typography so page
 * templates can keep owning layout and spacing.
 */

@media screen {
    body {
        background: var(--site-bg) !important;
        color: var(--site-text) !important;
        font-family: var(--site-font-family);
    }

    a {
        color: var(--site-link);
    }

    .top-bar {
        background: var(--site-topbar-bg) !important;
        border-bottom-color: var(--site-border) !important;
    }

    .header {
        background: linear-gradient(135deg, var(--site-header-start) 0%, var(--site-header-end) 100%) !important;
        border-bottom-color: var(--site-primary) !important;
    }

    .btn-home,
    .user-menu-link,
    .user-notification-btn,
    .btn-secondary,
    .modal-close,
    .admin-modal-close,
    .btn-disciplines,
    .audit-pagination button,
    .btn-upload-xml,
    .btn-notes-icon,
    .organiser-icon-btn,
    .org-scoreboard-style-option,
    .org-btn,
    .org-modal-close,
    .user-export-btn,
    .participant-filter-btn,
    .participant-btn-preview,
    .doc-manager .coach-btn {
        background: var(--site-panel-alt) !important;
        border-color: var(--site-border-strong) !important;
        color: var(--site-muted) !important;
    }

    .btn-home:hover,
    .user-menu-link:hover,
    .user-notification-btn:hover,
    .btn-secondary:hover,
    .modal-close:hover,
    .admin-modal-close:hover,
    .btn-disciplines:hover,
    .audit-pagination button:hover,
    .btn-upload-xml:hover,
    .btn-notes-icon:hover,
    .organiser-icon-btn:hover,
    .org-scoreboard-style-option:hover,
    .org-scoreboard-style-option:focus,
    .org-btn:not(:disabled):hover,
    .org-modal-close:hover,
    .user-export-btn:hover,
    .participant-filter-btn:hover,
    .participant-btn-preview:hover,
    .doc-manager .coach-btn:hover {
        color: var(--site-text-strong) !important;
        border-color: var(--site-primary) !important;
    }

    .user-menu-admin {
        background: color-mix(in srgb, var(--site-primary) 14%, transparent) !important;
        border-color: var(--site-primary) !important;
        color: var(--site-primary) !important;
    }

    .user-menu-admin:hover,
    .btn-save,
    .btn-reset,
    .btn-send,
    .profile-tab.active,
    .admin-tab .badge,
    .admin-tab.active,
    .btn-upload,
    .btn-generate,
    .audit-pagination button.active,
    .choice-btn.active,
    .sex-btn.active,
    .org-btn.primary,
    .organiser-filter-btn.active,
    .org-discipline-btn.active,
    .org-review-filter-trigger.active,
    .org-inline-option.selected,
    .user-export-btn.primary,
    .participant-filter-btn.active,
    .doc-manager .coach-btn.primary {
        background: var(--site-primary) !important;
        border-color: var(--site-primary) !important;
        color: var(--site-on-primary) !important;
    }

    .btn-save:hover,
    .btn-reset:hover,
    .btn-send:hover,
    .btn-upload:hover,
    .btn-generate:hover,
    .org-btn.primary:not(:disabled):hover,
    .user-export-btn.primary:hover,
    .doc-manager .coach-btn.primary:hover {
        background: var(--site-primary-hover) !important;
        border-color: var(--site-primary-hover) !important;
    }

    .btn-print,
    .btn-approve,
    .organiser-icon-btn.add,
    .org-scoreboard-style-option.active,
    .org-scope-option.active {
        background: var(--site-success) !important;
        border-color: var(--site-success) !important;
        color: var(--site-on-success) !important;
    }

    .btn-print:hover,
    .btn-approve:hover,
    .organiser-icon-btn.add:hover {
        background: var(--site-success-hover) !important;
        border-color: var(--site-success-hover) !important;
    }

    .btn-decline,
    .btn-inline,
    .participant-btn:not(.participant-btn-preview),
    .user-notification-badge,
    .org-btn.danger,
    .doc-manager .coach-btn.danger {
        background: var(--site-danger) !important;
        border-color: var(--site-danger) !important;
        color: var(--site-on-danger) !important;
    }

    .btn-decline:hover,
    .btn-inline:hover,
    .participant-btn:not(.participant-btn-preview):hover,
    .org-btn.danger:not(:disabled):hover,
    .doc-manager .coach-btn.danger:hover {
        background: var(--site-danger-hover) !important;
        border-color: var(--site-danger-hover) !important;
    }

    .header h1,
    .header-info strong,
    .sport-tile-name,
    .profile-title,
    .admin-card-title,
    .user-notification-subject,
    .profile-static-name,
    .org-name-main,
    .organiser-name,
    .org-modal-title,
    .org-section-title,
    .org-columns-title,
    .admin-modal-title,
    .modal-box h3,
    .user-export-title,
    .admin-settings-title,
    .skin-option-title,
    .participant-message-title,
    .participant-measurement-title,
    .participant-stat-value,
    .doc-nav-title,
    .doc-stage-side-title,
    .doc-dropzone-title {
        color: var(--site-text-strong) !important;
    }

    .header h1 span {
        color: var(--site-accent) !important;
    }

    .header-info,
    .header-info strong + *,
    .profile-group label,
    .profile-muted,
    .org-name-meta,
    .organiser-sub,
    .org-modal-subtitle,
    .org-panel-note,
    .org-inline-note,
    .org-static-note,
    .org-info-label,
    .user-menu-name,
    .user-menu-unverified,
    .section-desc,
    .user-notification-meta,
    .user-notification-empty,
    .summary-total,
    .summary-warning,
    .tournament-label,
    .admin-card-meta,
    .admin-card-body,
    .organiser-table th,
    .org-table th,
    .audit-table th,
    .profile-table th,
    .user-notification-title,
    .admin-tab,
    .org-filters label,
    .audit-filters label,
    .organiser-status-line,
    .organiser-empty,
    .skin-option-desc,
    .skin-picker-help,
    .user-export-kicker,
    .user-export-subtitle,
    .user-export-note,
    .user-export-field label,
    .participant-tab,
    .participant-filter-btn,
    .participant-status,
    .participant-message-meta,
    .participant-measurement-meta,
    .participant-measurement-label,
    .participant-stat-label,
    .doc-context-line,
    .doc-manager-note,
    .doc-nav-meta,
    .doc-stage-field label,
    .doc-stage-field-hint,
    .doc-manager-status,
    .doc-dropzone-body,
    .doc-stage-meta {
        color: var(--site-muted) !important;
    }

    .profile-card,
    .admin-card,
    .sport-tile,
    .age-group-row,
    .match-slot,
    .modal-box,
    .admin-modal-card,
    .user-notification-menu,
    .profile-table-wrap,
    .org-table-wrap,
    .organiser-card,
    .organiser-table-wrap,
    .org-modal-card,
    .org-details-box,
    .org-commercial-box,
    .org-panel,
    .org-columns-popover,
    .org-review-filter-popover,
    .org-inline-menu,
    .org-inline-date-popover,
    .org-city-results,
    .org-hover-tooltip,
    .upload-area,
    .summary-table tbody tr:hover,
    .group-tabs-wrapper,
    .toast-msg,
    .discipline-chip,
    .coach-assoc-row,
    .user-export-panel,
    .admin-settings-card,
    .skin-option,
    .participant-card,
    .participant-table-wrap,
    .participant-empty,
    .participant-message-card,
    .participant-measurement-chart,
    .participant-stat-card,
    .doc-manager,
    .doc-nav-btn,
    .doc-stage,
    .doc-stage-preview,
    .doc-stage-side,
    .doc-stage-meta,
    .doc-toast {
        background: var(--site-surface) !important;
        border-color: var(--site-border) !important;
        box-shadow: var(--site-shadow);
    }

    .user-notification-title,
    .organiser-table th,
    .organiser-group-row td,
    .org-review-search-row th,
    .org-table th,
    .audit-table th,
    .profile-table th,
    .summary-table thead th,
    .group-tabs-wrapper,
    .admin-tabs,
    .sport-selection-container h2,
    .setup-section h2,
    .round-header,
    .participant-tabs,
    .participant-table th,
    .doc-manager-note {
        background: var(--site-panel) !important;
        border-color: var(--site-border-strong) !important;
    }

    .admin-tabs,
    .setup-section h2,
    .sport-selection-container h2,
    .round-header,
    .profile-table th,
    .organiser-table th,
    .org-table th,
    .audit-table th,
    .participant-tabs,
    .participant-table th {
        border-color: var(--site-border) !important;
    }

    .profile-group input,
    .profile-group select,
    .profile-group textarea,
    .org-panel-grid input,
    .org-panel-grid select,
    .org-panel-grid textarea,
    .org-form-grid input,
    .org-form-grid select,
    .org-form-grid textarea,
    .org-review-search-input,
    .org-review-filter-trigger,
    .org-review-filter-range-input,
    .org-inline-choice-trigger,
    .org-inline-date-trigger,
    .org-inline-input,
    .org-inline-date-input,
    .org-filters input,
    .org-filters select,
    .audit-filters input,
    .audit-filters select,
    .org-notes,
    .decline-reason-input,
    .modal-box textarea,
    .admin-modal textarea,
    .input-age,
    .input-tournament,
    .user-export-field select,
    .doc-stage-field input,
    input[type="text"],
    input[type="email"],
    input[type="date"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        background: var(--site-panel-alt) !important;
        border-color: var(--site-border-strong) !important;
        color: var(--site-text) !important;
    }

    .profile-group input:focus,
    .profile-group select:focus,
    .profile-group textarea:focus,
    .org-panel-grid input:focus,
    .org-panel-grid select:focus,
    .org-panel-grid textarea:focus,
    .org-form-grid input:focus,
    .org-form-grid select:focus,
    .org-form-grid textarea:focus,
    .org-review-search-input:focus,
    .org-review-filter-trigger:focus,
    .org-review-filter-range-input:focus,
    .org-inline-choice-trigger:focus,
    .org-inline-date-trigger:focus,
    .org-inline-input:focus,
    .org-inline-date-input:focus,
    .org-filters input:focus,
    .org-filters select:focus,
    .audit-filters input:focus,
    .audit-filters select:focus,
    .org-notes:focus,
    .decline-reason-input:focus,
    .modal-box textarea:focus,
    .admin-modal textarea:focus,
    .input-age:focus,
    .input-tournament:focus,
    .doc-stage-field input:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="date"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    input[type="url"]:focus,
    textarea:focus,
    select:focus {
        border-color: var(--site-focus) !important;
        outline: none !important;
    }

    .profile-table td,
    .organiser-table td,
    .org-table td,
    .audit-table td,
    .participant-table td,
    .participant-message-body,
    .summary-table tbody td,
    .admin-card-body,
    .coach-assoc-row span:first-child,
    .org-review-filter-option,
    .org-review-filter-range-field,
    .org-inline-option,
    .org-columns-item,
    .toast-msg {
        color: var(--site-text) !important;
        border-color: var(--site-border) !important;
    }

    .group-tab,
    .profile-tab,
    .participant-tab,
    .participant-filter-btn,
    .choice-btn,
    .sex-btn,
    .btn-add-group,
    .organiser-filter-btn,
    .org-discipline-btn,
    .org-scope-toggle,
    .org-scope-option {
        background: var(--site-panel-alt) !important;
        border-color: var(--site-border-strong) !important;
        color: var(--site-muted) !important;
    }

    .group-tab.active {
        color: var(--site-text-strong) !important;
        border-bottom-color: var(--site-primary) !important;
        background: color-mix(in srgb, var(--site-primary) 12%, transparent) !important;
    }

    .participant-tab.active {
        color: var(--site-text-strong) !important;
        border-color: color-mix(in srgb, var(--site-primary) 26%, transparent) !important;
        border-bottom-color: var(--site-primary) !important;
        background: color-mix(in srgb, var(--site-primary) 14%, transparent) !important;
        box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--site-primary) 38%, transparent) !important;
    }

    .group-tab:hover,
    .profile-tab:hover:not(.active),
    .participant-tab:hover:not(.active),
    .participant-filter-btn:hover:not(.active),
    .choice-btn:hover,
    .sex-btn:hover,
    .btn-add-group:hover,
    .sport-tile:hover,
    .match-slot.clickable:hover,
    .organiser-table tr:hover td,
    .org-table tr:hover td,
    .audit-table tr:hover td,
    .participant-table tr:hover td,
    .user-notification-item:hover,
    .upload-area.drag-over,
    .doc-nav-btn:hover,
    .doc-dropzone:hover,
    .org-discipline-btn:hover,
    .org-scope-option:not(:disabled):hover,
    .org-city-option:hover,
    .org-inline-option:hover,
    .org-inline-option:focus,
    .skin-option:hover {
        background: color-mix(in srgb, var(--site-panel) 84%, var(--site-accent) 16%) !important;
        border-color: var(--site-accent) !important;
    }

    .org-modal {
        background: var(--site-overlay) !important;
    }

    .upload-area p,
    .no-groups-msg,
    .org-inline-display.empty,
    .org-inline-old-value,
    .org-inline-caret,
    .org-review-filter-icon,
    .org-review-filter-empty,
    .org-review-filter-range-title,
    .org-city-option-meta,
    .org-city-empty,
    .org-columns-item.disabled,
    .participant-empty,
    .doc-stage-meta {
        color: var(--site-muted) !important;
    }

    .upload-or {
        color: var(--site-muted) !important;
    }

    .user-notification-item.unread .user-notification-dot {
        background: var(--site-notification-dot) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-notification-dot) 18%, transparent) !important;
    }

    .user-notification-badge {
        box-shadow: 0 0 0 2px var(--site-bg) !important;
    }

    .profile-badge-pending,
    .org-status-badge.pending,
    .organiser-pill.pending {
        border-color: var(--site-warning) !important;
    }

    .organiser-link {
        color: var(--site-link) !important;
    }

    .organiser-status.waiting,
    .organiser-pill.pending,
    .org-review-status-indicator.pending,
    .org-city-highlight {
        color: color-mix(in srgb, var(--site-warning) 72%, var(--site-text-strong) 28%) !important;
    }

    .organiser-status.active,
    .organiser-pill.confirmed,
    .org-review-status-indicator.confirmed,
    .org-wizard-step.done {
        color: color-mix(in srgb, var(--site-success) 72%, var(--site-text-strong) 28%) !important;
    }

    .organiser-status-line.error,
    .organiser-pill.rejected,
    .org-review-status-indicator.rejected {
        color: color-mix(in srgb, var(--site-danger) 56%, var(--site-text-strong) 44%) !important;
    }

    .org-wizard-progress {
        background: var(--site-panel-alt) !important;
        border-color: var(--site-border) !important;
    }

    .org-wizard-progress-fill {
        background: linear-gradient(90deg, var(--site-success), var(--site-primary)) !important;
    }

    .participant-link {
        color: var(--site-link) !important;
    }

    .participant-status.error,
    .doc-manager-status.error,
    .doc-toast.error {
        color: color-mix(in srgb, var(--site-danger) 48%, var(--site-text-strong) 52%) !important;
        border-color: color-mix(in srgb, var(--site-danger) 56%, transparent) !important;
    }

    .participant-badge.pending,
    .doc-status-badge.yellow {
        background: color-mix(in srgb, var(--site-warning) 16%, transparent) !important;
        border-color: color-mix(in srgb, var(--site-warning) 36%, transparent) !important;
        color: color-mix(in srgb, var(--site-warning) 70%, var(--site-text-strong) 30%) !important;
    }

    .participant-badge.confirmed,
    .doc-status-badge.green,
    .doc-toast.success {
        background: color-mix(in srgb, var(--site-success) 16%, transparent) !important;
        border-color: color-mix(in srgb, var(--site-success) 34%, transparent) !important;
        color: color-mix(in srgb, var(--site-success) 60%, var(--site-text-strong) 40%) !important;
    }

    .participant-badge.rejected,
    .doc-status-badge.red {
        background: color-mix(in srgb, var(--site-danger) 16%, transparent) !important;
        border-color: color-mix(in srgb, var(--site-danger) 36%, transparent) !important;
        color: color-mix(in srgb, var(--site-danger) 48%, var(--site-text-strong) 52%) !important;
    }

    .participant-badge.withdrawn {
        background: color-mix(in srgb, var(--site-muted) 16%, transparent) !important;
        border-color: color-mix(in srgb, var(--site-muted) 34%, transparent) !important;
        color: var(--site-muted) !important;
    }

    .participant-live,
    .doc-stage-field.required label::after {
        color: var(--site-notification-dot) !important;
    }

    .participant-live-dot {
        background: var(--site-notification-dot) !important;
    }

    .participant-measurement-axis {
        stroke: var(--site-border-strong) !important;
    }

    .participant-measurement-gridline {
        stroke: color-mix(in srgb, var(--site-muted) 18%, transparent) !important;
    }

    .participant-measurement-line {
        stroke: var(--site-link) !important;
    }

    .participant-measurement-point {
        fill: var(--site-primary) !important;
        stroke: color-mix(in srgb, var(--site-on-primary) 70%, var(--site-text-strong) 30%) !important;
    }

    .participant-measurement-value {
        fill: var(--site-text-strong) !important;
    }

    .doc-nav-btn.active,
    .doc-dropzone.dragover {
        border-color: var(--site-primary) !important;
        background: color-mix(in srgb, var(--site-primary) 10%, var(--site-surface)) !important;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--site-primary) 24%, transparent) inset !important;
    }

    .doc-dropzone {
        background: linear-gradient(180deg, var(--site-surface) 0%, var(--site-panel-alt) 100%) !important;
        border-color: color-mix(in srgb, var(--site-border-strong) 68%, transparent) !important;
        color: var(--site-text) !important;
    }

    .doc-stage-preview.has-preview {
        background: var(--site-panel-alt) !important;
    }

    .skin-option.active {
        border-color: var(--site-primary) !important;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--site-primary) 35%, transparent) !important;
    }

    .skin-preview-card.is-surface {
        background: var(--skin-preview-surface) !important;
        border-color: var(--skin-preview-border) !important;
    }

    .skin-preview-card.is-panel-alt {
        background: var(--skin-preview-panel-alt) !important;
        border-color: var(--skin-preview-border-strong) !important;
    }

    .skin-preview-line.is-text {
        background: var(--skin-preview-text) !important;
    }

    .skin-preview-line.is-muted {
        background: var(--skin-preview-muted) !important;
    }

    .skin-preview-line.is-strong {
        background: var(--skin-preview-text-strong) !important;
    }

    .skin-preview-line.is-accent {
        background: var(--skin-preview-accent) !important;
    }

    .skin-preview-pill.is-primary {
        background: var(--skin-preview-primary) !important;
    }

    .skin-preview-pill.is-success {
        background: var(--skin-preview-success) !important;
    }

    .skin-preview-pill.is-warning {
        background: var(--skin-preview-warning) !important;
    }

    .skin-preview-pill.is-danger {
        background: var(--skin-preview-danger) !important;
    }

    .coach-wrap.n4-shell .cc-cap.user-notification-btn {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--text-dim) !important;
    }

    .coach-wrap.n4-shell .cc-cap.user-notification-btn:hover,
    .coach-wrap.n4-shell .cc-cap.user-notification-btn:focus {
        color: var(--text) !important;
    }

    .coach-wrap.n4-shell .cc-cap.user-notification-btn .cap {
        color: var(--text-mute) !important;
    }

    .coach-wrap.n4-shell .cc-cap.user-notification-btn:hover .cap,
    .coach-wrap.n4-shell .cc-cap.user-notification-btn:focus .cap {
        color: var(--text-dim) !important;
    }

    .coach-wrap.n4-shell .cc-notifications .user-notification-badge {
        box-shadow: 0 0 0 2px var(--bg) !important;
    }
}