/* ═══════════════════════════════════════════════════════════
   ADMIN THEME - Component Styles (uses --t-* theme variables)
   ═══════════════════════════════════════════════════════════
   All colors use CSS custom properties from :root / [data-theme].
   These styles automatically adapt to light/dark mode.
   No body.admin-dark scoping needed for generic components.
   ═══════════════════════════════════════════════════════════ */

/* ── Admin Nav ─────────────────────────────────────────── */
.admin-nav-inner {
    background: var(--t-surface-elevated);
    border-color: var(--t-border);
    box-shadow: none;
}
.admin-nav-item { color: var(--t-text-muted); }
.admin-nav-item:hover {
    background: var(--t-hover-bg);
    color: var(--t-text);
}
.admin-nav-item--active { background: var(--primary); color: white; }
.admin-nav-item--active:hover { background: var(--primary); color: white; }

/* ── Admin Page Header ─────────────────────────────────── */
.admin-page-header { border-bottom-color: var(--t-border-strong); }
.admin-page-title { color: var(--t-text); }
.admin-page-subtitle { color: var(--t-text-muted); }

/* ── Admin Metric Cards ────────────────────────────────── */
.admin-metric-card {
    background: var(--t-surface);
    border-color: var(--t-border);
    box-shadow: none;
}
.admin-metric-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.admin-metric-icon--users { background: rgba(59,130,246,0.12); }
.admin-metric-icon--revenue { background: rgba(117,201,167,0.12); }
.admin-metric-icon--content { background: rgba(139,92,246,0.12); }
.admin-metric-icon--market { background: rgba(20,184,166,0.12); }
.admin-metric-icon--games { background: rgba(245,158,11,0.12); }
.admin-metric-value { color: var(--t-text); }
.admin-metric-label { color: var(--t-text-muted); }
.admin-section-title { color: var(--t-heading-section); }

/* ── Admin Chips ───────────────────────────────────────── */
.admin-chip {
    background: var(--t-surface-elevated);
    color: var(--t-text-secondary);
    border-color: var(--t-border);
    box-shadow: none;
}

/* ── Admin Filter Toolbar ──────────────────────────────── */
.admin-filter-toolbar {
    background: var(--t-surface);
    border-color: var(--t-border);
    box-shadow: none;
}
.admin-filter-label { color: var(--t-text-muted); }
.admin-filter-input,
.admin-filter-select {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.admin-filter-input::placeholder { color: var(--t-placeholder); }
.admin-filter-input:focus,
.admin-filter-select:focus {
    border-color: var(--t-focus-border);
    box-shadow: 0 0 0 3px var(--t-focus-ring);
    background: var(--t-surface-elevated);
}

/* ── Admin Tables ──────────────────────────────────────── */
.admin-table-wrap {
    background: var(--t-surface);
    border-color: var(--t-border);
    box-shadow: none;
}
.admin-table tbody tr { border-bottom-color: var(--t-table-border); }
.admin-table tbody tr:nth-child(even) { background: var(--t-table-row-alt); }
.admin-table tbody tr:hover { background: var(--t-table-row-hover); }
.admin-table td { color: var(--t-text-secondary); }
.admin-td-date { color: var(--t-text-muted); }
.admin-user-name { color: var(--t-text); }
.admin-user-email { color: var(--t-text-subtle); }

/* ── Admin Badges ──────────────────────────────────────── */
.admin-badge--league { background: var(--t-badge-league-bg); color: var(--t-badge-league-text); }
.admin-badge--tournament { background: var(--t-badge-tournament-bg); color: var(--t-badge-tournament-text); }
.admin-badge--ladder { background: var(--t-badge-ladder-bg); color: var(--t-badge-ladder-text); }
.admin-badge--listing { background: var(--t-badge-listing-bg); color: var(--t-badge-listing-text); }
.admin-badge--subscribed { background: var(--t-badge-subscribed-bg); color: var(--t-badge-subscribed-text); }
.admin-badge--premium { background: var(--t-badge-premium-bg); color: var(--t-badge-premium-text); }
.admin-badge--free { background: var(--t-badge-free-bg); color: var(--t-badge-free-text); }
.admin-text-muted { color: var(--t-text-subtle); }

/* ── Admin Limit Inputs ────────────────────────────────── */
.admin-limit-input {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.admin-limit-input:focus {
    border-color: var(--t-focus-border);
    background: var(--t-surface-elevated);
}

/* ── Admin Recent Cards ────────────────────────────────── */
.admin-recent-card {
    background: var(--t-surface);
    border-color: var(--t-border);
    box-shadow: none;
}
.admin-recent-name { color: var(--t-text); }
.admin-recent-email { color: var(--t-text-subtle); }

/* ── Admin Modals ──────────────────────────────────────── */
.admin-modal-overlay { background: rgba(0,0,0,0.6); }
.admin-modal {
    background: var(--t-dropdown-bg);
    border: 1px solid var(--t-border-strong);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.admin-modal-title { color: var(--t-text); }
.admin-modal-subtitle { color: var(--t-text-muted); }
.admin-modal-label { color: var(--t-text-secondary); }
.admin-modal-input {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.admin-modal-input::placeholder { color: var(--t-placeholder); }
.admin-modal-input:focus {
    border-color: var(--t-focus-border);
    box-shadow: 0 0 0 3px var(--t-focus-ring);
    background: var(--t-surface-elevated);
}

/* ── User Cards ────────────────────────────────────────── */
.user-card {
    background: var(--t-surface);
    border-color: var(--t-border);
}
.user-card:hover {
    border-color: var(--t-border-strong);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.user-card-name { color: var(--t-text); }
.user-card-email { color: var(--t-text-subtle); }
.user-card-meta-label { color: var(--t-text-subtle); }
.user-card-meta-value { color: var(--t-text-secondary); }
.user-card-meta-none { color: var(--t-text-subtle); }
.user-card-limit-input {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.user-card-limit-input:focus {
    border-color: var(--t-focus-border);
    background: var(--t-surface-elevated);
}

/* ── Admin League Cards ────────────────────────────────── */
.admin-league-card {
    background: var(--t-surface);
    border-color: var(--t-border);
    box-shadow: none;
}
.admin-league-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.admin-league-card h3 { color: var(--t-text); }
.admin-league-meta .meta-text { color: var(--t-text-muted); }
.admin-league-meta .meta-icon { color: var(--t-text-subtle); }
.admin-league-overview { color: var(--t-text-secondary); }

/* ── Playoff Status ────────────────────────────────────── */
.playoff-status { background: var(--t-surface); }
.playoff-status.success { background: rgba(117,201,167,0.08); border-left-color: #75c9a7; }
.playoff-status.ready { background: rgba(59,130,246,0.08); border-left-color: #3b82f6; }
.playoff-status.warning { background: rgba(245,158,11,0.08); border-left-color: #f59e0b; }
.playoff-status p { color: var(--t-text-secondary); }

/* ── Badges ────────────────────────────────────────────── */
.owner-badge {
    background: var(--t-badge-owner-bg);
    color: var(--t-badge-owner-text);
    border-color: transparent;
}
.free-badge {
    background: var(--t-badge-subscribed-bg);
    color: var(--t-badge-subscribed-text);
    border-color: transparent;
}
.private-badge {
    background: var(--t-badge-private-bg);
    color: var(--t-badge-private-text);
    border-color: transparent;
}

/* ── League Tables ────────────────────────────────────── */
.league-table { width: 100%; border-collapse: collapse; }
.league-table th {
    background: var(--t-surface-elevated);
    color: var(--t-text-muted);
    border-bottom: 1px solid var(--t-border-strong);
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.league-table td {
    border-bottom: 1px solid var(--t-table-border);
    color: var(--t-text-secondary);
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
}
.league-table tbody tr:hover {
    background: var(--t-hover-bg);
}
.standings-table th {
    background: var(--t-surface-elevated);
    color: var(--t-text-muted);
    border-bottom-color: var(--t-border-strong);
}
.standings-table td {
    border-bottom-color: var(--t-table-border);
    color: var(--t-text-secondary);
}
.standings-table tbody tr:hover {
    background: var(--t-hover-bg);
}

/* ── Alerts ────────────────────────────────────────────── */
.alert { background: var(--t-alert-bg); border-color: var(--t-border-strong); color: var(--t-text-secondary); }
.alert-success { background: var(--t-status-success-bg); border-color: var(--t-status-success-border); color: var(--t-status-success-text); }
.alert-danger { background: var(--t-status-danger-bg); border-color: var(--t-status-danger-border); color: var(--t-status-danger-text); }
.alert-warning { background: var(--t-status-warning-bg); border-color: var(--t-status-warning-border); color: var(--t-status-warning-text); }

/* ── Game/Score Forms ──────────────────────────────────── */
.game-form input,
.game-form select {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.game-form label { color: var(--t-text-secondary); }

/* ── Create Option Cards ───────────────────────────────── */
.create-option-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    color: var(--t-text-secondary);
    text-decoration: none;
    transition: all 0.25s;
}
.create-option-card:hover {
    background: var(--t-surface-elevated);
    border-color: var(--t-border-strong);
    transform: translateY(-2px);
}
.create-option-card h3 { color: var(--t-text); }
.create-option-card p { color: var(--t-text-muted); }
.create-option-card li { color: var(--t-text-muted); }
.create-option-icon { color: var(--mint); }

/* ── Bracket/Tournament ────────────────────────────────── */
.bracket-match,
.bracket-slot {
    background: var(--t-surface);
    border-color: var(--t-border);
    color: var(--t-text-secondary);
}
.bracket-match:hover,
.bracket-slot:hover {
    background: var(--t-surface-elevated);
}

/* ── Check-in ──────────────────────────────────────────── */
.checkin-card,
.checkin-player {
    background: var(--t-surface);
    border-color: var(--t-border);
}

/* ── Dark Utility Classes ────────────────────────────────── */
.dark-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: 12px;
}
.dark-card-elevated {
    background: var(--t-surface-elevated);
    border: 1px solid var(--t-border-strong);
    border-radius: 12px;
}
.dark-text-heading { color: var(--t-text); }
.dark-text-body { color: var(--t-text-secondary); }
.dark-text-muted { color: var(--t-text-muted); }
.dark-text-subtle { color: var(--t-text-subtle); }
.dark-text-accent { color: var(--mint); }
.dark-border { border-color: var(--t-border); }
.dark-bg-input {
    background: var(--t-input-bg);
    border: 1px solid var(--t-input-border);
    color: var(--t-input-text);
}

/* ── Pagination ────────────────────────────────────────── */
.pagination a,
.pagination span {
    color: var(--t-text-secondary);
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--t-surface); }
::-webkit-scrollbar-thumb { background: var(--t-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--t-text-muted); }

/* ── Quill Editor (rich text) ──────────────────────────── */
.ql-toolbar.ql-snow {
    border-color: var(--t-input-border);
    background: var(--t-input-bg);
}
.ql-container.ql-snow {
    border-color: var(--t-input-border);
    background: var(--t-surface);
    color: var(--t-text-secondary);
}
.ql-snow .ql-stroke { stroke: var(--t-text-muted); }
.ql-snow .ql-fill { fill: var(--t-text-muted); }
.ql-snow .ql-picker-label { color: var(--t-text-muted); }
.ql-snow .ql-picker-options { background: var(--t-dropdown-bg); border-color: var(--t-input-border); }
.ql-snow .ql-picker-item { color: var(--t-text-secondary); }
.ql-snow .ql-picker-item:hover { color: var(--mint); }
.ql-snow .ql-active .ql-stroke { stroke: var(--mint); }
.ql-snow .ql-active .ql-fill { fill: var(--mint); }
.ql-snow .ql-active { color: var(--mint); }
.ql-editor.ql-blank::before { color: var(--t-placeholder); }

/* ── Form Section Intro ──────────────────────────────────── */
.form-section-intro {
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.2);
    color: var(--t-text-secondary);
}
.form-section-intro strong {
    color: var(--t-text);
}

/* ── Score Input ─────────────────────────────────────────── */
.score-input {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.score-input:focus {
    background: var(--t-surface-elevated);
    border-color: var(--t-focus-border);
}

/* ── Back Link ───────────────────────────────────────────── */
.back-link {
    color: var(--t-text-muted);
}
.back-link:hover {
    color: var(--t-text-secondary);
}

/* ── Badge Pending ───────────────────────────────────────── */
.badge-pending {
    background: var(--t-surface-elevated);
    color: var(--t-text-secondary);
}

/* ── Filters ─────────────────────────────────────────────── */
.filters {
    background: var(--t-surface);
    border-color: var(--t-border);
}

/* ── Sponsor Cards & Page ──────────────────────────────── */
.sponsor-card-body h3 {
    color: var(--t-text);
}
.sponsor-placement-badge {
    background: rgba(30,64,175,0.15);
    color: #93c5fd;
}
.sponsor-desc {
    color: var(--t-text-muted);
}
.sponsor-stat-num {
    color: var(--t-text);
}
.sponsor-stat-label {
    color: var(--t-text-subtle);
}
.sponsor-dates {
    color: var(--t-text-subtle);
}
.sponsor-card-actions {
    background: var(--t-surface);
    border-top-color: var(--t-table-border);
}
.status-active {
    background: var(--t-badge-active-bg);
    color: var(--t-badge-active-text);
}
.status-inactive {
    background: var(--t-badge-inactive-bg);
    color: var(--t-badge-inactive-text);
}

/* ── Sponsor Form ──────────────────────────────────────── */
.sponsor-form-row label {
    color: var(--t-text-secondary);
}
.sponsor-form-row input,
.sponsor-form-row select,
.sponsor-form-row textarea {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}

/* ── Marketplace Form ────────────────────────────────────── */
.marketplace-form {
    background: var(--t-surface);
    box-shadow: var(--t-card-shadow);
    border: 1px solid var(--t-border);
}
.marketplace-form label {
    color: var(--t-text-secondary);
}
.marketplace-form input[type="text"],
.marketplace-form input[type="email"],
.marketplace-form input[type="tel"],
.marketplace-form input[type="number"],
.marketplace-form input[type="url"],
.marketplace-form input[type="file"],
.marketplace-form select,
.marketplace-form textarea {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.marketplace-form input:focus,
.marketplace-form select:focus,
.marketplace-form textarea:focus {
    border-color: var(--t-focus-border);
    box-shadow: 0 0 0 3px var(--t-focus-ring);
}
.marketplace-form input::placeholder,
.marketplace-form textarea::placeholder {
    color: var(--t-placeholder);
}
.marketplace-form .form-help,
.marketplace-form small {
    color: var(--t-text-subtle);
}

/* ── Empty State Cards ─────────────────────────────────── */
.empty-state-card {
    background: var(--t-surface);
    box-shadow: var(--t-card-shadow);
    border: 1px solid var(--t-border);
}
.empty-state-card h3,
.empty-state-card h2 {
    color: var(--t-text);
}
.empty-state-card p {
    color: var(--t-text-muted);
}

/* ── Auth Card ───────────────────────────────────────────── */
.auth-card {
    background: var(--t-surface-elevated);
    border-color: var(--t-border-strong);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auth-card h2 {
    -webkit-text-fill-color: unset;
    background: none;
    color: var(--t-text);
}
.auth-card p {
    color: var(--t-text-muted);
}
.auth-card label {
    color: var(--t-text-secondary);
}
.auth-card input {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}
.auth-card input::placeholder {
    color: var(--t-placeholder);
}
.auth-card input:focus {
    border-color: var(--t-focus-border);
    box-shadow: 0 0 0 3px var(--t-focus-ring);
    background: var(--t-surface-elevated);
}
.auth-card a {
    color: var(--t-link);
}

/* ── Info Tooltip ─────────────────────────────────────────── */
.info-tooltip {
    background: var(--t-surface-elevated);
    color: var(--t-text-secondary);
}
.info-tooltip:hover {
    background: var(--mint);
    color: #fff;
}

/* ── Form Actions Sticky ─────────────────────────────────── */
.form-actions-sticky {
    border-top-color: var(--t-border);
}

/* ── Checkbox Text Small ─────────────────────────────────── */
.checkbox-text small {
    color: var(--t-text-muted);
}

/* ── Action Card Text ────────────────────────────────────── */
.action-card h3 {
    color: var(--t-link);
}
.action-card p {
    color: var(--t-text-muted);
}

/* ── Dropdown Icon ───────────────────────────────────────── */
.dropdown-icon {
    background: var(--t-surface-elevated);
}

/* ── Dropdown Divider ────────────────────────────────────── */
.dropdown-divider {
    background: var(--t-dropdown-divider);
}

/* ── Dropdown Item Desc ──────────────────────────────────── */
.dropdown-item-desc {
    color: var(--t-text-muted);
}

/* ── League Card Content ─────────────────────────────────── */
.league-card-content { color: var(--t-text-secondary); }
