/**
 * MX Live Timing — light / dark themes (toggle via html[data-theme]).
 * Default: dark (:root in page1_main.css). Light: html[data-theme="light"].
 */

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;

    --bg-0: #eef1f6;
    --bg-1: #ffffff;
    --bg-2: #e2e7ef;
    --text-main: #1a1f28;
    --text-muted: #5a6472;
    --line: #c8d0dc;
    --accent: #0a7a52;
    --accent-2: #056b47;
    --danger: #c62828;

    --mx-lap-text: #1a1f28;
    --mx-lap-muted: #5a6472;
    --mx-lap-dim: #6b7280;
    --mx-lap-faint: #8a939f;
    --mx-lap-sector: #5a6472;
    --mx-lap-tel-hi: #1a1f28;
    --mx-lap-tel-lo: #6b7280;
    --mx-lap-session: #5a6472;
    --mx-session-row-bg: #e8edf4;
    --mx-session-row-text: #5a6472;
    --mx-atp-sticky-bg: #f4f7fb;
    --mx-atp-sticky-head: linear-gradient(180deg, #e8edf4 0%, #dde4ee 100%);

    --mx-sw-btn-bg: rgba(255, 255, 255, 0.98);
    --mx-sw-btn-bg-hover: #f0f3f8;
    --mx-sw-btn-border: #b8c4d4;
    --mx-sw-btn-border-hover: #8a9ab0;
    --mx-sw-btn-border-active: #6b7c92;
    --mx-sw-btn-shadow: 0 4px 16px rgba(30, 45, 80, 0.12);
    --mx-sw-btn-shadow-hover: 0 8px 22px rgba(30, 45, 80, 0.16);
    --mx-sw-driver: #1a1f28;
    --mx-sw-time: #1a1f28;
    --mx-sw-reset-hint: #5a6472;
    --mx-sw-input-bg: #ffffff;
    --mx-sw-input-border: #c8d0dc;

    --mx-atp-card-bg: #ffffff;
    --mx-atp-card-border: #c8d0dc;
    --mx-atp-card-label: #5a6472;
    --mx-atp-card-divider: #dce1e9;

    --mx-slider-track-rest: #dce1e9;
    --mx-slider-pos-none: #e2e7ef;
    --mx-slider-pos-mid: #0a9e6e;
    --mx-slider-pos-max: #d64545;
    --mx-settings-card-bg: #ffffff;
    --mx-settings-card-border: #c8d0dc;

    --mx-header-bg: rgba(255, 255, 255, 0.92);
    --mx-table-bg: rgba(255, 255, 255, 0.96);
    --mx-thead-bg: linear-gradient(180deg, #f0f3f8 0%, #e4e9f0 100%);
    --mx-body-gradient: radial-gradient(900px 500px at 80% -5%, #dce4f0 0%, transparent 55%), var(--bg-0);
    --mx-btn-bg: linear-gradient(180deg, #ffffff 0%, #e8ecf2 100%);
    --mx-btn-border: #b8c4d4;
    --mx-btn-text: #1a1f28;
    --mx-shadow-soft: 0 8px 24px rgba(30, 45, 80, 0.12);
    --mx-dropdown-bg: #ffffff;
    --mx-modal-bg: #ffffff;
    --mx-modal-backdrop: rgba(20, 32, 56, 0.45);
}

html[data-theme="dark"] {
    --mx-header-bg: rgba(20, 20, 20, 0.9);
    --mx-table-bg: rgba(15, 15, 15, 0.9);
    --mx-thead-bg: linear-gradient(180deg, #1f1f1f 0%, #171717 100%);
    --mx-body-gradient: radial-gradient(900px 500px at 80% -5%, #1b1b1b 0%, transparent 55%), var(--bg-0);
    --mx-btn-bg: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
    --mx-btn-border: #3c3c3c;
    --mx-btn-text: #ffffff;
    --mx-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.48);
    --mx-dropdown-bg: #161616;
    --mx-modal-bg: #121212;
    --mx-modal-backdrop: rgba(4, 8, 16, 0.82);
}

/* ——— Theme toggle (in .header-buttons, рядом с профилем) ——— */
.header-buttons .mx-theme-toggle {
    margin-right: 2px;
    flex-shrink: 0;
}

.mx-theme-topbar {
    max-width: 1200px;
    width: calc(100% - 32px);
    margin: max(12px, env(safe-area-inset-top, 0px)) auto 0;
    justify-content: flex-start;
    min-height: 0;
}

.mx-theme-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line, #2c2c2c);
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--bg-2, #1a1a1a) 0%, var(--bg-1, #121212) 55%, var(--bg-0, #070707) 100%);
    color: var(--text-main, #ececec);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform 0.2s cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .mx-theme-toggle:hover {
        transform: translateY(-2px);
        box-shadow:
            0 10px 22px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border-color: var(--accent-2, #b8b8b8);
    }
}

.mx-theme-toggle:active {
    transform: translateY(0) scale(0.96);
}

.mx-theme-toggle__icon {
    font-size: 1.25rem;
    line-height: 1;
    pointer-events: none;
}

.mx-theme-toggle__icon--moon {
    display: none;
}

html[data-theme="light"] .mx-theme-toggle__icon--sun {
    display: none;
}

html[data-theme="light"] .mx-theme-toggle__icon--moon {
    display: block;
}

/* ——— Light theme: core layout ——— */
html[data-theme="light"] body {
    background: var(--mx-body-gradient);
    color: var(--text-main);
}

html[data-theme="light"] h1 {
    color: var(--text-main);
}

html[data-theme="light"] .header-row {
    background: var(--mx-header-bg);
    border-color: var(--line);
    box-shadow: var(--mx-shadow-soft);
}

html[data-theme="light"] table {
    background: var(--mx-table-bg);
    border-color: var(--line);
}

html[data-theme="light"] thead {
    background: var(--mx-thead-bg);
}

html[data-theme="light"] td {
    border-bottom-color: var(--line);
}

html[data-theme="light"] .clickable:hover {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] #timing-table tbody tr.clickable:hover td {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .btn-demo,
html[data-theme="light"] .btn-save,
html[data-theme="light"] .btn-settings,
html[data-theme="light"] .mx-gps-track-btn {
    background: var(--mx-btn-bg) !important;
    color: var(--mx-btn-text) !important;
    border-color: var(--mx-btn-border) !important;
}

html[data-theme="light"] .btn-demo:hover,
html[data-theme="light"] .btn-save:hover,
html[data-theme="light"] .btn-settings:hover {
    box-shadow: var(--mx-shadow-soft);
    border-color: var(--accent-2) !important;
    filter: none;
}

html[data-theme="light"] .header-profile-dropdown,
html[data-theme="light"] .header-profile-dropdown--portal {
    background: var(--mx-dropdown-bg);
    border-color: var(--line);
    box-shadow: var(--mx-shadow-soft);
}

html[data-theme="light"] .header-profile-dd-item {
    color: var(--text-main);
}

html[data-theme="light"] .header-profile-dd-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .admin-input,
html[data-theme="light"] #settings-admin-table .admin-input,
html[data-theme="light"] .settings-container .account-field input,
html[data-theme="light"] .settings-container .account-field textarea,
html[data-theme="light"] .settings-container .account-field select,
html[data-theme="light"] .settings-container .account-field .admin-input,
html[data-theme="light"] .atp-filter-input,
html[data-theme="light"] .atp-dense-table input:not(.triple-range),
html[data-theme="light"] .atp-dense-table select {
    background: var(--bg-1) !important;
    border-color: var(--line) !important;
    color: var(--text-main) !important;
}

html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset !important;
    -webkit-text-fill-color: var(--accent) !important;
}

html[data-theme="light"] .live-sync-indicator--offline {
    color: var(--text-muted);
    border-color: var(--line);
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .live-sync-indicator--live {
    color: #0a7a52;
    border-color: rgba(10, 122, 82, 0.35);
    background: rgba(10, 122, 82, 0.1);
}

html[data-theme="light"] .modal {
    background: var(--mx-modal-backdrop);
}

html[data-theme="light"] .modal-content {
    background: var(--mx-modal-bg);
    border-color: var(--line);
    box-shadow: var(--mx-shadow-soft);
}

html[data-theme="light"] .mx-gps-track-title {
    color: var(--text-main);
}

html[data-theme="light"] .mx-gps-track-text {
    color: var(--text-muted);
}

html[data-theme="light"] .input-date {
    color-scheme: light;
    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    border-color: var(--line);
    color: var(--text-main) !important;
}

html[data-theme="light"] .input-date::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.75;
}

html[data-theme="light"] .narrow-doc-page {
    color: var(--text-muted);
}

html[data-theme="light"] .narrow-doc-page h1,
html[data-theme="light"] .narrow-doc-page a {
    color: var(--accent);
}

html[data-theme="light"] .login-page-root {
    background: var(--bg-0) !important;
}

html[data-theme="light"] .login-page-root h1 {
    color: var(--accent) !important;
}

html[data-theme="light"] .settings-container .account-sub,
html[data-theme="light"] .settings-container .account-field label,
html[data-theme="light"] .atp-intro,
html[data-theme="light"] .atp-filter-count,
html[data-theme="light"] .atp-filter-label {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .atp-filters {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) 85%, transparent 100%);
    border-bottom-color: var(--line);
}

html[data-theme="light"] .atp-dense-table thead th {
    background: linear-gradient(180deg, #e8edf4 0%, #dde4ee 100%);
    color: var(--text-muted);
    border-color: var(--line);
}

html[data-theme="light"] .atp-dense-table tbody td {
    border-color: var(--line);
    color: var(--text-main);
}

html[data-theme="light"] .atp-dense-table tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .atp-dense-table tbody tr:hover td {
    background: rgba(10, 122, 82, 0.06);
}

html[data-theme="light"] .atp-dense-table tbody td:first-child {
    background: #f4f7fb;
}

html[data-theme="light"] .atp-banner--muted {
    color: var(--text-muted);
    border-color: var(--line);
}

html[data-theme="light"] .settings_sliders-wrap,
html[data-theme="light"] .slider-card {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-color: var(--line);
}

html[data-theme="light"] .mobile-lap-timer-btn {
    background: var(--mx-sw-btn-bg) !important;
    border-color: var(--mx-sw-btn-border) !important;
    box-shadow: var(--mx-sw-btn-shadow) !important;
}

html[data-theme="light"] .mobile-lap-timer-btn:hover {
    background: var(--mx-sw-btn-bg-hover) !important;
    border-color: var(--mx-sw-btn-border-hover) !important;
    box-shadow: var(--mx-sw-btn-shadow-hover) !important;
    filter: none;
}

html[data-theme="light"] .mobile-lap-timer-btn:active {
    box-shadow: inset 0 4px 12px rgba(30, 45, 80, 0.12) !important;
}

html[data-theme="light"] .mobile-lap-timer-value,
html[data-theme="light"] .mobile-lap-timer-driver,
html[data-theme="light"] .mobile-lap-timer-driver-input {
    color: var(--mx-sw-driver) !important;
}

html[data-theme="light"] .mobile-lap-timer-driver-input {
    background: var(--mx-sw-input-bg) !important;
    border-color: var(--mx-sw-input-border) !important;
}

html[data-theme="light"] .mobile-lap-timer-reset-hint {
    color: var(--mx-sw-reset-hint) !important;
    opacity: 0.62 !important;
}

html[data-theme="light"] .mobile-lap-timer-value--tap {
    opacity: 0.68 !important;
}

html[data-theme="light"] .mobile-lap-timer-lap-line {
    color: rgba(22, 32, 48, 0.82) !important;
}

/* ——— Light theme: lap modal ——— */
html[data-theme="light"] .modal-laps-col-head-wrap {
    background: #e8edf4 !important;
}

html[data-theme="light"] .modal-laps-col-head span {
    color: var(--text-muted) !important;
    border-bottom-color: var(--line) !important;
}

html[data-theme="light"] .modal-header {
    background: linear-gradient(180deg, #f4f7fb 0%, #e8edf4 100%) !important;
    border-bottom-color: var(--line) !important;
}

html[data-theme="light"] .modal-header #modal-driver,
html[data-theme="light"] .modal-header h2 {
    color: var(--text-main) !important;
}

html[data-theme="light"] .modal-header button {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .modal-header button:hover {
    color: var(--text-main) !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .laps-table-container {
    background: var(--bg-1) !important;
}

html[data-theme="light"] .laps-table thead th {
    background: #e8edf4 !important;
    color: var(--text-muted) !important;
    border-bottom-color: var(--line) !important;
}

html[data-theme="light"] .laps-table td {
    color: var(--mx-lap-text) !important;
    border-bottom-color: var(--line) !important;
}

html[data-theme="light"] .laps-table .lap-num {
    color: var(--mx-lap-dim) !important;
}

html[data-theme="light"] .laps-table .lap-time {
    color: var(--mx-lap-text);
}

html[data-theme="light"] .laps-table .sector-td {
    color: var(--mx-lap-sector);
}

html[data-theme="light"] .laps-table .lap-delta {
    color: var(--text-main);
}

html[data-theme="light"] .laps-table .tel-row:first-child span {
    color: var(--mx-lap-tel-hi) !important;
}

html[data-theme="light"] .laps-table .tel-row:last-child span {
    color: var(--mx-lap-tel-lo) !important;
}

html[data-theme="light"] #laps-body .session-separator td,
html[data-theme="light"] .laps-table .session-separator td {
    background: var(--mx-session-row-bg) !important;
    color: var(--mx-session-row-text) !important;
    border-bottom-color: var(--line) !important;
}

/* Admin: sticky ID column + filter/sort header row */
html[data-theme="light"] .atp-dense-table tbody td.atp-td-id,
html[data-theme="light"] .atp-dense-table tbody td:first-child {
    background: var(--mx-atp-sticky-bg) !important;
    box-shadow: 6px 0 10px rgba(30, 45, 80, 0.08);
}

html[data-theme="light"] .atp-dense-table thead tr.atp-column-header-row th.atp-td-id,
html[data-theme="light"] .atp-dense-table thead tr.atp-column-header-row th:first-child {
    background: var(--mx-atp-sticky-head) !important;
    color: var(--text-muted) !important;
    box-shadow: 6px 0 10px rgba(30, 45, 80, 0.08);
}

html[data-theme="light"] .atp-dense-table thead tr.atp-filter-data-row th.atp-td-id,
html[data-theme="light"] .atp-dense-table thead tr.atp-filter-data-row th.atp-filter-th.atp-filter-td,
html[data-theme="light"] .atp-dense-table thead th.atp-filter-th.atp-filter-td.atp-td-id {
    background: var(--mx-atp-sticky-head) !important;
    border-bottom-color: var(--line) !important;
    box-shadow: 6px 0 10px rgba(30, 45, 80, 0.08);
}

html[data-theme="light"] .atp-dense-table thead tr.atp-filter-data-row th:first-child {
    background: var(--mx-atp-sticky-head) !important;
}

html[data-theme="light"] .atp-td-id {
    color: #0a7a52 !important;
}

html[data-theme="light"] .atp-dense-table th.atp-th-sortable.atp-td-id {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .atp-dense-table th.atp-th-sortable.atp-td-id:hover {
    color: var(--text-main) !important;
}

html[data-theme="light"] .atp-dense-table th.atp-th-sortable.atp-td-id.atp-th-sorted,
html[data-theme="light"] .atp-dense-table th.atp-th-sorted.atp-td-id {
    color: #0d5c9e !important;
}

html[data-theme="light"] .atp-page .atp-dense-table tbody td.atp-td-id {
    border-bottom-color: var(--line) !important;
}

html[data-theme="light"] .atp-page .atp-dense-table.atp-data-table tbody td::before {
    color: var(--text-muted) !important;
}

/* Admin mobile cards (≤900px): transponders & users */
@media (max-width: 900px) {
    html[data-theme="light"] .atp-page .atp-dense-table.atp-data-table tbody tr.atp-data-row {
        background: var(--mx-atp-card-bg) !important;
        border-color: var(--mx-atp-card-border) !important;
        box-shadow: 0 2px 12px rgba(30, 45, 80, 0.08);
    }

    html[data-theme="light"] .atp-page .atp-dense-table.atp-data-table tbody td {
        color: var(--text-main) !important;
    }

    html[data-theme="light"] .atp-page .atp-dense-table.atp-data-table tbody td::before {
        color: var(--mx-atp-card-label) !important;
    }

    html[data-theme="light"] .atp-page .atp-dense-table tbody td.atp-td-id {
        color: #0a7a52 !important;
        border-bottom-color: var(--mx-atp-card-divider) !important;
    }

    html[data-theme="light"] .atp-page .atp-dense-table tbody td.atp-actions-cell {
        border-top-color: var(--mx-atp-card-divider) !important;
    }
}

html[data-theme="light"] .atp-chip-sm {
    color: #0a7a52 !important;
    border-color: rgba(10, 122, 82, 0.35) !important;
    background: rgba(10, 122, 82, 0.1) !important;
}

html[data-theme="light"] .atp-chip-sm.atp-chip--offline {
    color: var(--text-muted) !important;
    border-color: var(--line) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .atp-chip-sm.atp-chip--shipping {
    color: #9a6b12 !important;
    border-color: rgba(154, 107, 18, 0.4) !important;
    background: rgba(230, 180, 80, 0.14) !important;
}

html[data-theme="light"] .atp-chip-sm.atp-chip--live {
    color: #0a7a52 !important;
    border-color: rgba(10, 122, 82, 0.35) !important;
    background: rgba(10, 122, 82, 0.1) !important;
}

html[data-theme="light"] .atp-btn-mini {
    color: var(--text-main) !important;
}

/* Main timing table */
html[data-theme="light"] #timing-table td,
html[data-theme="light"] #timing-table .driver,
html[data-theme="light"] #timing-table .best {
    color: var(--text-main);
}

html[data-theme="light"] th {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .best {
    color: var(--accent) !important;
}

html[data-theme="light"] .driver {
    color: var(--text-main) !important;
}

/* Settings / sliders */
html[data-theme="light"] .settings-card,
html[data-theme="light"] .slider-block {
    color: var(--text-main);
}

html[data-theme="light"] .settings-card h2,
html[data-theme="light"] .slider-block h3 {
    color: var(--text-main) !important;
}

html[data-theme="light"] .slider-block .slider-hint,
html[data-theme="light"] .settings-card .hint {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .id-label {
    color: var(--text-muted) !important;
}

/* Admin chips / misc text */
html[data-theme="light"] .atp-chip-sm,
html[data-theme="light"] .atp-dense-table .atp-cell-muted {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .atp-dense-table tbody td {
    color: var(--text-main) !important;
}

html[data-theme="light"] .modal-atp-firmware .modal-header h2 {
    color: var(--text-main) !important;
}

@media (max-width: 900px) and (orientation: portrait) {
    html[data-theme="light"] #settings-admin-table tbody tr {
        background: var(--mx-settings-card-bg) !important;
        border-color: var(--mx-settings-card-border) !important;
        box-shadow: 0 2px 12px rgba(30, 45, 80, 0.08);
    }

    html[data-theme="light"] #settings-admin-table tbody td:nth-child(1) .id-label {
        color: var(--text-muted) !important;
    }

html[data-theme="light"] .settings-device-type-icon--physical {
    color: #5f6b79;
}

html[data-theme="light"] .settings-device-type-icon--stopwatch {
    color: #0aa56b;
}

    html[data-theme="light"] .atp-page.admin-teams-page .atp-dense-table tbody tr.atp-data-row {
        background: var(--mx-settings-card-bg) !important;
        border-color: var(--mx-settings-card-border) !important;
        box-shadow: 0 2px 12px rgba(30, 45, 80, 0.08);
    }

    html[data-theme="light"] .atp-page.admin-teams-page .atp-data-row td.atp-td-id {
        color: var(--text-muted) !important;
        border-bottom-color: var(--mx-atp-card-divider) !important;
    }
}

html[data-theme="light"] .triple-range::-webkit-slider-thumb,
html[data-theme="light"] .triple-range::-moz-range-thumb {
    border-color: var(--line);
}

html[data-theme="light"] .range-labels span {
    color: var(--text-muted);
}

html[data-theme="light"] .stopwatch-count-settings {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-color: var(--line);
}

@media (hover: none) {
    .mx-theme-toggle:hover {
        transform: none;
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        border-color: var(--line, #2c2c2c);
    }

    html[data-theme="light"] .btn-demo:hover,
    html[data-theme="light"] .btn-save:hover,
    html[data-theme="light"] .btn-settings:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--mx-btn-border) !important;
        filter: none;
    }

    html[data-theme="light"] .mx-theme-toggle:hover {
        transform: none;
        box-shadow: var(--mx-shadow-soft);
        border-color: var(--line);
    }
}

html[data-theme="light"] .atp-page.admin-transponders-page .atp-actions-inner .atp-btn-mini {
    background: var(--mx-btn-bg) !important;
    color: var(--mx-btn-text) !important;
    border-color: var(--mx-btn-border) !important;
}

html[data-theme="light"] .atp-page.admin-transponders-page .atp-actions-inner .atp-btn-mini:disabled,
html[data-theme="light"] .atp-page.admin-transponders-page .atp-actions-inner .atp-btn-mini[disabled] {
    opacity: 0.72;
    filter: none !important;
    background: #e2e7ef !important;
    color: #8a939f !important;
    border-color: #c8d0dc !important;
    box-shadow: none !important;
}

html[data-theme="light"] .settings-section-title {
    color: var(--text-main) !important;
}

html[data-theme="light"] .settings-section-hint,
html[data-theme="light"] .public-header,
html[data-theme="light"] .stopwatch-count-value {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .atp-filter-cell--in-table .atp-filter-label {
    color: var(--text-muted) !important;
}