/* Stopwatch & Timer specific styles */

/* Different gradient for this tool page */
body {
    background: linear-gradient(135deg, #fef9c3 0%, #fee2e2 50%, #fce7f3 100%); /* Light Yellow -> Light Red -> Light Pink */
}

/* Style the tool title with a different gradient */
.gradient-text-stopwatch {
    background: linear-gradient(to right, #f59e0b, #ef4444, #ec4899); /* Amber -> Red -> Pink */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem;
}

/* Mode Switcher Styling */
.mode-btn {
    color: #4b5563; /* gray-600 */
}

.mode-btn.active {
    background-color: white;
    color: var(--primary-color); /* Use primary color from common styles */
    font-weight: 600; /* semibold */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Timer Input Styling */
.timer-input {
    font-size: 1.125rem; /* text-lg */
    border-width: 1px;
}

.timer-input:focus {
    /* Focus styles applied via Tailwind */
}

/* Time Display Styling */
.time-display {
    font-family: 'Orbitron', sans-serif;
    background-color: #1f2937; /* Darker gray */
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.4);
    letter-spacing: 0.05em;
    position: relative; /* For potential future elements */
    font-variant-numeric: tabular-nums; /* Ensure numbers have same width */
}

.time-display .milliseconds {
    font-size: 0.5em; /* Smaller milliseconds */
    color: #9ca3af; /* gray-400 */
    margin-left: 0.1em;
    font-weight: 400;
}

/* Control Button Styling */
.control-btn {
    min-width: 120px; /* Ensure buttons have a minimum width */
    border: none;
}

.control-btn.start-btn {
     background-color: #10b981; /* Emerald-500 */
     color: white;
}
.control-btn.start-btn:hover {
     background-color: #059669; /* Emerald-600 */
}

.control-btn.stop-btn {
     background-color: #ef4444; /* Red-500 */
     color: white;
}
.control-btn.stop-btn:hover {
     background-color: #dc2626; /* Red-600 */
}

.control-btn.reset-btn {
    background-color: #6b7280; /* Gray-500 */
    color: white;
}
.control-btn.reset-btn:hover {
    background-color: #4b5563; /* Gray-600 */
}

/* Laps Area Styling (if implemented later) */
#lapsList li {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: #374151;
}
#lapsList li:last-child {
    border-bottom: none;
}