/* Shared theme overrides.
 *
 * This file is loaded last by every page shell.  Keeping the dark palette in
 * one place prevents a new member/admin component from accidentally bringing
 * a white card or low-contrast form into dark mode.  Gradients used for the
 * reward and level cards intentionally remain vibrant; only their surrounding
 * surfaces and semantic states are adapted here.
 */

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1020;
    --surface: #141c34;
    --surface-2: #1d2946;
    --ink: #f5f7ff;
    --muted: #aeb9d6;
    --line: #344363;
    --shadow: 0 20px 58px rgba(0, 0, 0, .34);
    --mint-soft: #173d3d;
    --ink-faint: #8794b7;
    --game-ink: #f4f1ff;
    --xp-track: #2c3859;
}

/* Plus Jakarta Sans and Outfit are Google Fonts distributed under the SIL
 * Open Font License 1.1.  They keep the gamified UI friendly while remaining
 * readable in dense admin tables and forms. */
:root {
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display: 'Outfit', var(--font-body);
}

/* Lucide replaces the original <i> nodes with SVG elements after the page
 * has loaded.  Keep the active theme icon visible even if that replacement
 * drops an inline display style or the cached script runs in a different
 * order. */
.theme-toggle .theme-icon--light { display: block !important; }
.theme-toggle .theme-icon--dark { display: none !important; }
[data-theme="dark"] .theme-toggle .theme-icon--light { display: none !important; }
[data-theme="dark"] .theme-toggle .theme-icon--dark { display: block !important; }

.brand__mark--image { overflow:hidden; padding:4px; background:var(--surface-2); }
.brand__mark--image img { display:block; width:100%; height:100%; object-fit:contain; border-radius:7px; }

.maintenance-body { min-height:100vh; background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--violet) 13%,transparent),transparent 45%),var(--bg); }
.maintenance-shell { display:grid; min-height:100vh; place-items:center; padding:24px; }
.maintenance-card { width:min(620px,100%); padding:38px clamp(22px,6vw,58px) 30px; text-align:center; }
.maintenance-card > .brand { justify-content:center; }
.maintenance-card h1 { margin:22px 0 10px; font-size:clamp(31px,6vw,50px); }
.maintenance-card h1 em { color:var(--violet); font-style:normal; }
.maintenance-card p { max-width:480px; margin:0 auto; color:var(--muted); font-size:14px; }
.maintenance-art { position:relative; display:grid; width:94px; height:94px; place-items:center; margin:34px auto 20px; border-radius:28px; background:linear-gradient(135deg,var(--violet),var(--violet-2)); color:#fff; box-shadow:0 18px 38px color-mix(in srgb,var(--violet) 30%,transparent); }
.maintenance-art > svg { width:39px; height:39px; }
.maintenance-art b { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent-color,var(--mint)); }
.maintenance-art b:first-of-type { top:13px; right:14px; }.maintenance-art b:last-of-type { bottom:13px; left:14px; }
.maintenance-actions { display:flex; justify-content:center; gap:9px; margin-top:24px; }.maintenance-actions .button { min-width:160px; }
.maintenance-release { display:block; margin-top:25px; color:var(--muted); font-size:10px; }

[data-theme="dark"] body,
[data-theme="dark"] .landing-body,
[data-theme="dark"] .auth-body {
    background: var(--bg);
    color: var(--ink);
}

[data-theme="dark"] ::selection {
    color: #fff;
    background: color-mix(in srgb, var(--violet) 70%, #141c34);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    color-scheme: dark;
}

[data-theme="dark"] .button--light {
    color: #332575;
    background: #f3f5ff;
    border-color: #fff;
}

[data-theme="dark"] .button--social,
[data-theme="dark"] .global-search,
[data-theme="dark"] .search-box,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal__card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .task-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .profile-hero,
[data-theme="dark"] .safety-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .admin-video-row,
[data-theme="dark"] .admin-video-list-card,
[data-theme="dark"] .admin-video-editor {
    background-color: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .auth-panel {
    background-color: color-mix(in srgb, var(--surface) 95%, var(--bg));
    border-color: var(--line);
}

[data-theme="dark"] .sidebar__section-label,
[data-theme="dark"] .empty-state svg {
    color: var(--muted);
}

[data-theme="dark"] .nav-badge,
[data-theme="dark"] .metric-icon,
[data-theme="dark"] .quick-icon,
[data-theme="dark"] .task-row__icon,
[data-theme="dark"] .notification-row__icon,
[data-theme="dark"] .generic-panel__icon,
[data-theme="dark"] .detail-section h2 span,
[data-theme="dark"] .plan-icon,
[data-theme="dark"] .update-icon {
    background: color-mix(in srgb, var(--violet) 22%, var(--surface-2));
    color: #bdb3ff;
}

[data-theme="dark"] .metric-icon--mint,
[data-theme="dark"] .quick-icon--mint,
[data-theme="dark"] .transaction-icon.is-credit,
[data-theme="dark"] .update-icon--mint {
    background: color-mix(in srgb, var(--mint) 20%, var(--surface-2));
    color: #75e7c7;
}

[data-theme="dark"] .metric-icon--amber,
[data-theme="dark"] .quick-icon--amber {
    background: color-mix(in srgb, var(--amber) 22%, var(--surface-2));
    color: #ffd27c;
}

[data-theme="dark"] .transaction-icon.is-debit,
[data-theme="dark"] .form-alert,
[data-theme="dark"] .toast--error .toast__icon {
    background: color-mix(in srgb, var(--red) 18%, var(--surface-2));
    color: #ff9cab;
}

[data-theme="dark"] .status-chip.is-success,
[data-theme="dark"] .status-pill.is-success,
[data-theme="dark"] .is-success,
[data-theme="dark"] .active-plan {
    border-color: color-mix(in srgb, var(--mint) 38%, var(--line));
    background: color-mix(in srgb, var(--mint) 17%, var(--surface));
    color: #86ecd1;
}

[data-theme="dark"] .status-chip.is-warning,
[data-theme="dark"] .status-pill.is-warning,
[data-theme="dark"] .is-warning {
    background: color-mix(in srgb, var(--amber) 19%, var(--surface));
    color: #ffd184;
}

[data-theme="dark"] .status-chip.is-danger,
[data-theme="dark"] .status-pill.is-danger,
[data-theme="dark"] .is-danger {
    background: color-mix(in srgb, var(--red) 18%, var(--surface));
    color: #ff9eac;
}

[data-theme="dark"] .toast__icon {
    background: color-mix(in srgb, var(--mint) 18%, var(--surface-2));
    color: #83e9d0;
}

[data-theme="dark"] .filter-pill,
[data-theme="dark"] .filter-pill.is-active,
[data-theme="dark"] .settings-tabs a.is-active,
[data-theme="dark"] .settings-tabs a:hover,
[data-theme="dark"] .popular-tag,
[data-theme="dark"] .discount-tag {
    border-color: color-mix(in srgb, var(--violet) 38%, var(--line));
    background: color-mix(in srgb, var(--violet) 20%, var(--surface-2));
    color: #d0c7ff;
}

[data-theme="dark"] .topbar-xp,
[data-theme="dark"] .task-card__xp {
    border-color: color-mix(in srgb, var(--amber) 46%, var(--line));
    background: color-mix(in srgb, var(--amber) 18%, var(--surface));
    color: #ffd27c;
}

[data-theme="dark"] .task-progress,
[data-theme="dark"] .badge-tile__progress,
[data-theme="dark"] .profile-goal__bar {
    background: color-mix(in srgb, var(--violet) 17%, var(--surface-2));
}

[data-theme="dark"] .streak-card {
    border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
    background: linear-gradient(120deg, color-mix(in srgb, var(--amber) 18%, var(--surface)), color-mix(in srgb, var(--red) 12%, var(--surface)));
}

[data-theme="dark"] .streak-card strong {
    color: #ffd184;
}

[data-theme="dark"] .streak-card small {
    color: #d6b77e;
}

[data-theme="dark"] .badge-tile__icon,
[data-theme="dark"] .hero-card__badge-icon {
    color: #ffd37c;
    background: linear-gradient(145deg, #6a4e26, #8d5f2c);
}

[data-theme="dark"] .badge-tile__status {
    background: color-mix(in srgb, var(--mint) 18%, var(--surface-2));
    color: #86ecd1;
}

[data-theme="dark"] .badge-tile.is-locked .badge-tile__status {
    background: color-mix(in srgb, var(--violet) 18%, var(--surface-2));
    color: #c8bcff;
}

[data-theme="dark"] .task-quest-banner__xp {
    border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
    background: color-mix(in srgb, var(--amber) 17%, var(--surface));
    color: #ffd27c;
}

[data-theme="dark"] .task-difficulty--fast {
    background: color-mix(in srgb, var(--mint) 18%, var(--surface-2));
    color: #86ecd1;
}

[data-theme="dark"] .task-difficulty--steady {
    background: color-mix(in srgb, var(--violet) 20%, var(--surface-2));
    color: #c8bcff;
}

[data-theme="dark"] .task-difficulty--focus {
    background: color-mix(in srgb, var(--amber) 18%, var(--surface-2));
    color: #ffd184;
}

[data-theme="dark"] .data-table th {
    color: #b7c1dd;
    background: color-mix(in srgb, var(--surface-2) 78%, var(--surface));
    border-color: var(--line);
}

[data-theme="dark"] .data-table td,
[data-theme="dark"] .data-table tr,
[data-theme="dark"] .table-card__header,
[data-theme="dark"] .notification-row,
[data-theme="dark"] .security-item {
    border-color: var(--line);
}

[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .notification-row.is-unread,
[data-theme="dark"] .quick-links a:hover,
[data-theme="dark"] .task-row:hover {
    background: color-mix(in srgb, var(--violet) 11%, var(--surface));
}

[data-theme="dark"] .auth-form input,
[data-theme="dark"] .auth-form textarea,
[data-theme="dark"] .auth-form select,
[data-theme="dark"] .modal input,
[data-theme="dark"] .modal textarea,
[data-theme="dark"] .modal select,
[data-theme="dark"] .settings-panel input,
[data-theme="dark"] .settings-panel select,
[data-theme="dark"] .settings-panel textarea,
[data-theme="dark"] .admin-editor-grid .form-field input,
[data-theme="dark"] .admin-editor-grid .form-field select,
[data-theme="dark"] .admin-editor-grid .form-field textarea,
[data-theme="dark"] .admin-video-editor .form-field input,
[data-theme="dark"] .admin-video-editor .form-field select,
[data-theme="dark"] .admin-video-editor .form-field textarea {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
}

[data-theme="dark"] .auth-form input::placeholder,
[data-theme="dark"] .modal input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #8390b1;
}

[data-theme="dark"] .update-dropzone {
    border-color: color-mix(in srgb, var(--violet) 58%, var(--line));
    background: color-mix(in srgb, var(--violet) 9%, var(--surface));
}

[data-theme="dark"] .update-notice {
    border-color: color-mix(in srgb, var(--violet) 42%, var(--line));
    background: color-mix(in srgb, var(--violet) 17%, var(--surface));
}

[data-theme="dark"] .update-notice--error {
    border-color: color-mix(in srgb, var(--red) 46%, var(--line));
    background: color-mix(in srgb, var(--red) 16%, var(--surface));
    color: #ff9eac;
}

/* Landing and public information pages. */
[data-theme="dark"] .landing-nav,
[data-theme="dark"] .landing-footer,
[data-theme="dark"] .trust-row {
    border-color: var(--line);
}

[data-theme="dark"] .hero-card:not(.hero-card--balance),
[data-theme="dark"] .steps-grid article,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .faq-list details {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .hero-card--task .hero-card__icon,
[data-theme="dark"] .hero-card--secure {
    color: var(--muted);
}

[data-theme="dark"] .hero-card--task .hero-card__icon {
    background: color-mix(in srgb, var(--mint) 18%, var(--surface-2));
    color: #7ce5ca;
}

[data-theme="dark"] .hero-card--secure b {
    color: var(--ink);
}

[data-theme="dark"] .app-body:not(.app-body--admin) .profile-hero {
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .app-body:not(.app-body--admin) .profile-avatar {
    border-color: var(--surface);
}

[data-theme="dark"] .hero-orbit {
    border-color: color-mix(in srgb, var(--violet) 40%, var(--line));
}

[data-theme="dark"] .avatar-stack span {
    border-color: var(--bg);
}

[data-theme="dark"] .public-copy__body {
    border-color: var(--line);
    background: var(--surface);
}

/* Admin command centre.  Pastel KPI/alert chips are the main source of glare
 * in dark mode, so keep their semantic colours but move them onto deep tints. */
[data-theme="dark"] .app-body--admin {
    --admin-violet: #a18eff;
    --admin-purple: #c27dff;
    --admin-cyan: #55dce8;
    --admin-green: #4bd8b7;
}

[data-theme="dark"] .app-body--admin .admin-mode-chip {
    color: #8cefd5;
    background: color-mix(in srgb, var(--admin-green) 14%, var(--surface));
}

[data-theme="dark"] .app-body--admin .admin-kpi__icon,
[data-theme="dark"] .app-body--admin .admin-quest--pink .admin-quest__icon,
[data-theme="dark"] .app-body--admin .admin-quest--amber .admin-quest__icon,
[data-theme="dark"] .app-body--admin .admin-quest--cyan .admin-quest__icon,
[data-theme="dark"] .app-body--admin .admin-alert__icon,
[data-theme="dark"] .app-body--admin .admin-badge--violet,
[data-theme="dark"] .app-body--admin .admin-badge--green {
    background: color-mix(in srgb, var(--admin-violet) 21%, var(--surface-2));
    color: #c8bfff;
}

[data-theme="dark"] .app-body--admin .admin-kpi:nth-child(2) .admin-kpi__icon,
[data-theme="dark"] .app-body--admin .admin-badge--green {
    background: color-mix(in srgb, var(--admin-green) 20%, var(--surface-2));
    color: #8cf0d5;
}

[data-theme="dark"] .app-body--admin .admin-kpi:nth-child(3) .admin-kpi__icon,
[data-theme="dark"] .app-body--admin .admin-quest--amber .admin-quest__icon {
    background: color-mix(in srgb, var(--amber) 20%, var(--surface-2));
    color: #ffd37c;
}

[data-theme="dark"] .app-body--admin .admin-kpi:nth-child(4) .admin-kpi__icon,
[data-theme="dark"] .app-body--admin .admin-quest--pink .admin-quest__icon,
[data-theme="dark"] .app-body--admin .admin-alert__icon {
    background: color-mix(in srgb, var(--red) 19%, var(--surface-2));
    color: #ff9dad;
}

[data-theme="dark"] .app-body--admin .admin-quest--cyan .admin-quest__icon {
    background: color-mix(in srgb, var(--admin-cyan) 20%, var(--surface-2));
    color: #82eaf2;
}

[data-theme="dark"] .app-body--admin .status-pill.is-success {
    background: color-mix(in srgb, var(--admin-green) 18%, var(--surface));
    color: #8cf0d5;
}

[data-theme="dark"] .app-body--admin .status-pill.is-warning {
    background: color-mix(in srgb, var(--amber) 18%, var(--surface));
    color: #ffd184;
}

[data-theme="dark"] .app-body--admin .status-pill.is-danger {
    background: color-mix(in srgb, var(--red) 18%, var(--surface));
    color: #ff9eac;
}

[data-theme="dark"] .app-body--admin .admin-video-channel-fields,
[data-theme="dark"] .app-body--admin .admin-video-preview {
    background: color-mix(in srgb, var(--admin-cyan) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--admin-cyan) 26%, var(--line));
}

[data-theme="dark"] .app-body--admin .admin-video-list-card .table-card__header {
    background: color-mix(in srgb, var(--admin-violet) 10%, var(--surface));
}

[data-theme="dark"] .app-body--admin .admin-video-row:hover,
[data-theme="dark"] .app-body--admin .admin-alert:hover {
    background: color-mix(in srgb, var(--admin-violet) 10%, var(--surface));
}

[data-theme="dark"] .app-body--admin .btn--secondary:hover {
    background: color-mix(in srgb, var(--admin-violet) 17%, var(--surface));
}

/* Keep reward-led member cards vivid without leaving light pastel panels in
 * a dark workspace.  The extra scope wins over the play-theme gradients while
 * preserving the semantic mint/amber/pink colour coding. */
[data-theme="dark"] .app-body:not(.app-body--admin) .metric-grid .metric-card:nth-child(2) {
    color: var(--ink);
    background: linear-gradient(135deg, #123b3a, #185448);
}

[data-theme="dark"] .app-body:not(.app-body--admin) .metric-grid .metric-card:nth-child(3) {
    color: var(--ink);
    background: linear-gradient(135deg, #493516, #6a4a1e);
}

[data-theme="dark"] .app-body:not(.app-body--admin) .metric-grid .metric-card:nth-child(4),
[data-theme="dark"] .app-body:not(.app-body--admin) .profile-metric-grid .metric-card:nth-child(4) {
    color: var(--ink);
    background: linear-gradient(135deg, #49233d, #6b2d54);
}

[data-theme="dark"] .app-body:not(.app-body--admin) .eyebrow:not(.eyebrow--light) {
    color: #bcaeff;
}

[data-theme="dark"] .app-body:not(.app-body--admin) .page-intro h1 {
    background-image: linear-gradient(100deg, #bbaaff 5%, #ff9bd8 56%, #ffc46d 100%);
}

[data-theme="dark"] .app-body:not(.app-body--admin) .task-card__bottom strong,
[data-theme="dark"] .app-body:not(.app-body--admin) .task-row__reward,
[data-theme="dark"] .app-body:not(.app-body--admin) .watch-video-card__bottom strong,
[data-theme="dark"] .app-body:not(.app-body--admin) .task-capacity b,
[data-theme="dark"] .app-body:not(.app-body--admin) .task-quest-banner__level b {
    color: #c4b8ff;
}

[data-theme="dark"] .app-body:not(.app-body--admin) .profile-goal > b,
[data-theme="dark"] .app-body:not(.app-body--admin) .watch-player-meta span:last-child,
[data-theme="dark"] .app-body:not(.app-body--admin) .amount-positive,
[data-theme="dark"] .app-body:not(.app-body--admin) .text-success {
    color: #7ce6c8;
}

[data-theme="dark"] .app-body--admin .nav-badge--danger {
    color: #ff9eac;
    background: color-mix(in srgb, var(--red) 19%, var(--surface-2));
}

[data-theme="dark"] .app-body--admin .admin-kpi__copy span {
    color: #8cefd5;
}