/* --- THEME DEFINITIONS --- */

/* 1. Default (Light Mode) */
:root {
    --bg-color: #F9FAFB;
    --card-bg: #FFFFFF;
    --text-main: #111827;
    --text-muted: #6B7280;
    --text-muted2: #CCCCCC;
    --btn-gray: #F3F4F6;
    --primary: #2563EB; /* Royal Blue */
    --primary-shadow: rgba(37, 99, 235, 0.3);
    --btn-text: #FFFFFF;

    --danger: #444444;
    --danger-shadow: rgba(68, 68, 68, 0.3);
    --state-stopped: #FF0000;
    --state-working: #009900;
    --state-resting: #0000FF;
    --state-settings: #F9FAFB;
}

/* 2. Dark Mode (OLED Friendly) */
[data-theme="dark"] {
    --bg-color: #0F172A; /* Deep Slate */
    --card-bg: #1E293B;  /* Lighter Slate */
    --text-main: #F8FAFC; /* Off-White */
    --text-muted: #94A3B8; /* Cool Gray */
    --btn-gray: #334155;
    --primary: #3B82F6; /* Brighter Blue for dark backgrounds */
    --primary-shadow: rgba(59, 130, 246, 0.2);
    --btn-text: #FFFFFF;

    --danger: #444444;
    --danger-shadow: rgba(68, 68, 68, 0.3);
    --state-stopped: #FF0000;
    --state-working: #009900;
    --state-resting: #0000FF;
    --state-settings: #0F172A; /* Deep Slate */
}

/* 3. Neon High Contrast (Outdoor/Cyberpunk) */
[data-theme="neon"] {
    --bg-color: #000000; /* Pure Black */
    --card-bg: #171717;  /* Dark Gray */
    --text-main: #FFFFFF; /* Pure White */
    --text-muted: #A3A3A3;
    --btn-gray: #262626;
    --primary: #39FF14; /* Neon Green */
    --primary-shadow: rgba(57, 255, 20, 0.4);
    --btn-text: #000000; /* Black text for contrast against Neon Green */

    --danger: #444444;
    --danger-shadow: rgba(68, 68, 68, 0.3);
    --state-stopped: #FF0000;
    --state-working: #009900;
    --state-resting: #0000FF;
    --state-settings: #000000; /* Pure Black */
}

/* Update your existing .btn-start class to use the new text variable */
.btn-start {
    background-color: var(--primary);
    color: var(--btn-text);
    box-shadow: 0 8px 24px var(--primary-shadow);
}

/* Optional: Add a smooth transition when switching themes */
body, .card, .stepper-btn, .pro-section, .pro-select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* CSS Reset & Variables */
/*:root {
    --card-bg: #FFFFFF;
    --text-neon: #FFFFFF;
    --text-main: #111827;
    --text-muted: #6B7280;
    --text-muted2: #CCCCCC;
    --btn-gray: #F3F4F6;
    --primary: #2563EB;
    --primary-shadow: rgba(37, 99, 235, 0.3);
    --danger: #444444;
    --danger-shadow: rgba(68, 68, 68, 0.3);
    --state-stopped: #FF0000;
    --state-working: #009900;
    --state-resting: #0000FF;
    --state-settings: #F9FAFB;
}*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--state-settings);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Prevents pull-to-refresh on mobile */
    overscroll-behavior-y: none;

    /* Prevent select button text on long press */
    -webkit-user-select: none; /* Safari and Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */

    /* Prevents mobile context menu (iOS Safari) */
    -webkit-touch-callout: none;
}

.container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
    /* Max width keeps it looking like a phone even on desktop */
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.hidden {
    display: none !important;
}

/* --- SETTINGS MODE --- */
.header {
    margin-bottom: 32px;
    text-align: center;
}

.header h1 {
    font-size: 24px;
    font-weight: 600;
}

.card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.stepper-btn {
    background: var(--btn-gray);
    border: none;
    border-radius: 14px;
    width: 56px;
    height: 56px;
    font-size: 24px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s;
    touch-action: manipulation;

    /* Prevent select button text on long press */
    -webkit-user-select: none; /* Safari and Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */

    /* Prevents mobile context menu (iOS Safari) */
    -webkit-touch-callout: none;
}

.stepper-btn:active {
    transform: scale(0.92);
    background: #E5E7EB;
}

.card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.card-value {
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/*.footer {
    font-size: 12px;
    text-align: center;
}

.footer a {
    font-size: 14px;
    text-decoration: none;
}*/

.footer {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.legal-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    margin: 0 6px;
}

.legal-links a:hover {
    color: var(--text-main);
    text-decoration: underline;
}

.copyright {
    color: var(--text-muted);
    font-size: 12px;
}

/* --- PRO SETTINGS SECTION --- */
.pro-section {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 2px solid var(--primary); /* Subtle colored border to indicate premium */
}

.pro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.pro-header h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
}

.pro-badge {
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.pro-group {
    margin-bottom: 24px;
}

.pro-group:last-child {
    margin-bottom: 0;
}

.pro-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Preset Buttons */
.preset-buttons {
    display: flex;
    gap: 12px;
}

.preset-btn {
    flex: 1;
    padding: 12px 0;
    background: var(--btn-gray);
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s;
    touch-action: manipulation;
}

.preset-btn:active {
    transform: scale(0.95);
    background: #E5E7EB;
}

/* Modern Select Dropdown */
.pro-select {
    width: 100%;
    padding: 16px;
    background: var(--btn-gray);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    appearance: none; /* Removes default browser styling */
    /* Custom SVG Arrow for consistency across browsers */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px top 50%;
    background-size: 12px auto;
    cursor: pointer;
}

/* Modern iOS-Style Toggle Switch */
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-group label {
    margin-bottom: 0; /* Override default label margin for inline alignment */
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E5E7EB;
    transition: .3s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

input:checked + .slider {
    background-color: var(--primary);
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* --- ACTIVE MODE --- */
#active-mode {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 40px;
}

.reps-display {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-muted2);
    margin-bottom: 24px;
}

.timer-display {
    font-size: 24vw; /* Scales with screen width */
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 16px;
    color: var(--text-neon);
}

/* Cap the max size of the timer for larger screens */
@media (min-width: 480px) {
    .timer-display { font-size: 110px; }
}

.state-display {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-neon);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- BOTTOM BUTTONS --- */
.bottom-action {
    margin-top: auto; /* Pushes button to bottom */
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
}

.main-btn {
    width: 100%;
    height: 64px;
    border-radius: 20px;
    border: none;
    font-size: 20px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: transform 0.1s ease;
    touch-action: manipulation;

    /* Prevent select button text on long press */
    -webkit-user-select: none; /* Safari and Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */

    /* Prevents mobile context menu (iOS Safari) */
    -webkit-touch-callout: none;
}

.main-btn:active {
    transform: scale(0.96);
}

.btn-start {
    background-color: var(--primary);
    box-shadow: 0 8px 24px var(--primary-shadow);
}

.btn-cancel {
    background-color: var(--danger);
    box-shadow: 0 8px 24px var(--danger-shadow);
}

/* Popup help */
/* The semi-transparent background */
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    transition: opacity 500ms;
}

/* Show the popup when it's the 'target' */
.overlay:target {
    visibility: visible;
    opacity: 1;
}

/* The white box in the center */
.popup {
    margin: 10px auto;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    width: 90%;
    position: relative;
    font-size: 12px;
}

/* The close button */
.popup .close {
    position: absolute;
    top: 0px;
    right: 10px;
    text-decoration: none;
    font-size: 30px;
}

ul, ol {
    padding-left: 20px; /* Standard browser default */
    margin-left: 0;
}

.tiplink {
    fill: none;
    cursor: pointer;
}

.tiplink circle {
    fill: var(--text-muted);
}

.tiplink text {
    fill: var(--card-bg);
    font-weight: bold;
}

/*.circled-question {
    display: inline-block;
    width: 16px;
    height: 15px;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    font-weight: bold;
    font-family: monospace;
    cursor: pointer;
}*/