/* Fullscreen Time */
/* Created on 2025-08-06, by yuhang */

/* Clickable Time */
.clickable-time {
    cursor: pointer;
    text-decoration: underline;
    position: relative;
}

.clickable-time:hover {
    color: white;
    background-color: black;
}

/* Cancel Button */
.fullscreen-cancel-btn {
    position: fixed;
    bottom: 2em;
    left: 2em;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1001;
    width: 40px;
    height: 40px;
}

.fullscreen-cancel-btn .button-icon {
    width: 40px;
    height: 40px;
    filter: invert(1); /* Invert white SVG to black for default white background */
}

/* Bottom Controls Group */
.bottom-controls-group {
    position: fixed;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1em;
    z-index: 1001;
}

/* Time Format Button */
.time-format-btn {
    background: transparent;
    border: none;
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    font-size: 1em;
    cursor: pointer;
    color: black;
    text-decoration: underline;
}

.time-format-btn:hover {
    color: white;
    background-color: black;
}

/* Vertical Divider */
.vertical-divider {
    width: 2.5px;
    height: 2.5px;
    background-color: black;
    border-radius: 50%;
}

/* Background Toggle Button */
.background-toggle-btn {
    background: transparent;
    border: none;
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    font-size: 1em;
    cursor: pointer;
    color: black;
    text-decoration: underline;
}

.background-toggle-btn:hover {
    color: white;
    background-color: black;
}

/* Set Timer Button */
.set-timer-btn {
    background: transparent;
    border: none;
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    font-size: 1em;
    cursor: pointer;
    color: black;
    text-decoration: underline;
}

.set-timer-btn:hover {
    color: white;
    background-color: black;
}

/* Timer Controls Group */
.timer-controls-group {
    position: fixed;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* Always flex, controlled by visibility and opacity */
    align-items: center;
    gap: 1em;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
}

/* Show timer controls during countdown (but not when complete or adjusting) */
.fullscreen-time-overlay:has(.countdown-active) .timer-controls-group {
    opacity: 1;
    visibility: visible;
}

/* Hide bottom controls during timer adjustment */
.fullscreen-time-overlay:has(.adjusting-timer) .bottom-controls-group {
    display: none !important;
}

/* Pause/Resume Button */
.pause-resume-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.pause-resume-btn .button-icon {
    width: 40px;
    height: 40px;
    filter: invert(1); /* Invert white SVG to black for default white background */
}

/* Timer button text span */
.timer-btn-text {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: inherit;
}

/* Full Screen Button */
.fullscreen-mode-btn {
    position: fixed;
    bottom: 2em;
    right: 2em;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    width: 40px;
    height: 40px;
}

.fullscreen-mode-btn .button-icon {
    width: 40px;
    height: 40px;
    filter: invert(1); /* Invert white SVG to black for default white background */
}

/* Dark mode hover effect for clickable-time */
body.dark-mode .clickable-time:hover {
    color: black;
    background-color: white;
}

/* Dark mode for bottom controls group */
body.dark-mode .bottom-controls-group .time-format-btn:hover,
body.dark-mode .bottom-controls-group .background-toggle-btn:hover,
body.dark-mode .bottom-controls-group .set-timer-btn:hover {
    color: black;
    background-color: white;
}

body.dark-mode .bottom-controls-group .vertical-divider {
    background-color: white;
}


.fullscreen-time-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    cursor: default;
}

.fullscreen-time-overlay.active {
    opacity: 1;
    visibility: visible;
}

.fullscreen-time-content {
    text-align: center;
    color: black;
    user-select: none;
}

/* Clock Number */
.fullscreen-clock {
    font-family: 'ABCDiatypeSemi-Mono', monospace;
    font-size: 2rem; /* font size */
    cursor: pointer;
    width: 360px;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
}



/* Countdown states */
.fullscreen-clock.countdown-active {
    color: black;
    font-size: 2rem; /* font size */
    outline: 1px solid black;
}

.fullscreen-clock.countdown-complete {
    color: black;
    outline: 1px solid black;
}

/* Timer adjustment state */
.fullscreen-clock.adjusting-timer {
    color: black;
    font-size: 2rem; /* font size */
    outline: 1px solid black;
}

/* Hide history button when countdown is active, complete, or adjusting */
.fullscreen-time-overlay:has(.countdown-active) .history-btn,
.fullscreen-time-overlay:has(.countdown-complete) .history-btn,
.fullscreen-time-overlay:has(.adjusting-timer) .history-btn {
    display: none;
}


/* Fullscreen time has its own color rules independent of site theme */
/* Text colors are handled by background-selector.css based on selected background */

/* Text colors for light backgrounds */
.fullscreen-time-overlay.bg-1 .bottom-controls-group .set-timer-btn,
.fullscreen-time-overlay.bg-2 .bottom-controls-group .set-timer-btn,
.fullscreen-time-overlay.bg-3 .bottom-controls-group .set-timer-btn,
.fullscreen-time-overlay.bg-4 .bottom-controls-group .set-timer-btn {
    color: black;
}

/* Hover styles for light backgrounds */
/* Hover effects removed for cancel and fullscreen buttons */

.fullscreen-time-overlay.bg-1 .bottom-controls-group .time-format-btn:hover,
.fullscreen-time-overlay.bg-2 .bottom-controls-group .time-format-btn:hover,
.fullscreen-time-overlay.bg-3 .bottom-controls-group .time-format-btn:hover,
.fullscreen-time-overlay.bg-4 .bottom-controls-group .time-format-btn:hover {
    color: white;
    background-color: black;
}

.fullscreen-time-overlay.bg-1 .bottom-controls-group .background-toggle-btn:hover,
.fullscreen-time-overlay.bg-2 .bottom-controls-group .background-toggle-btn:hover,
.fullscreen-time-overlay.bg-3 .bottom-controls-group .background-toggle-btn:hover,
.fullscreen-time-overlay.bg-4 .bottom-controls-group .background-toggle-btn:hover {
    color: white;
    background-color: black;
}

.fullscreen-time-overlay.bg-1 .bottom-controls-group .set-timer-btn:hover,
.fullscreen-time-overlay.bg-2 .bottom-controls-group .set-timer-btn:hover,
.fullscreen-time-overlay.bg-3 .bottom-controls-group .set-timer-btn:hover,
.fullscreen-time-overlay.bg-4 .bottom-controls-group .set-timer-btn:hover {
    color: white;
    background-color: black;
}



/* Dark background icon styles - remove invert filter for white icons on dark backgrounds */
.fullscreen-time-overlay.bg-5 .button-icon,
.fullscreen-time-overlay.bg-6 .button-icon,
.fullscreen-time-overlay.bg-7 .button-icon {
    filter: none; /* Keep original white color for dark backgrounds */
}

/* Dark background styles for pause/resume button */
.fullscreen-time-overlay.bg-5 .pause-resume-btn .button-icon,
.fullscreen-time-overlay.bg-6 .pause-resume-btn .button-icon,
.fullscreen-time-overlay.bg-7 .pause-resume-btn .button-icon {
    filter: none; /* Keep original white color for dark backgrounds */
}

/* Text colors for dark backgrounds */
.fullscreen-time-overlay.bg-5 .bottom-controls-group .set-timer-btn,
.fullscreen-time-overlay.bg-6 .bottom-controls-group .set-timer-btn,
.fullscreen-time-overlay.bg-7 .bottom-controls-group .set-timer-btn {
    color: white;
}

/* Hover styles for dark backgrounds */
/* Hover effects removed for cancel and fullscreen buttons */

.fullscreen-time-overlay.bg-5 .bottom-controls-group .time-format-btn:hover,
.fullscreen-time-overlay.bg-6 .bottom-controls-group .time-format-btn:hover,
.fullscreen-time-overlay.bg-7 .bottom-controls-group .time-format-btn:hover {
    color: black;
    background-color: white;
}

.fullscreen-time-overlay.bg-5 .bottom-controls-group .background-toggle-btn:hover,
.fullscreen-time-overlay.bg-6 .bottom-controls-group .background-toggle-btn:hover,
.fullscreen-time-overlay.bg-7 .bottom-controls-group .background-toggle-btn:hover {
    color: black;
    background-color: white;
}

.fullscreen-time-overlay.bg-5 .bottom-controls-group .set-timer-btn:hover,
.fullscreen-time-overlay.bg-6 .bottom-controls-group .set-timer-btn:hover,
.fullscreen-time-overlay.bg-7 .bottom-controls-group .set-timer-btn:hover {
    color: black;
    background-color: white;
}



.fullscreen-time-overlay.bg-5 .clickable-time:hover,
.fullscreen-time-overlay.bg-6 .clickable-time:hover,
.fullscreen-time-overlay.bg-7 .clickable-time:hover {
    color: black;
    background-color: white;
}

/* Clock hover for dark backgrounds */
.fullscreen-time-overlay.bg-5 .fullscreen-clock:hover,
.fullscreen-time-overlay.bg-6 .fullscreen-clock:hover,
.fullscreen-time-overlay.bg-7 .fullscreen-clock:hover {
    outline: 1px solid white;
}

/* Countdown active state for dark backgrounds */
.fullscreen-time-overlay.bg-5 .fullscreen-clock.countdown-active,
.fullscreen-time-overlay.bg-6 .fullscreen-clock.countdown-active,
.fullscreen-time-overlay.bg-7 .fullscreen-clock.countdown-active {
    outline: 1px solid white;
}

/* Countdown complete state for dark backgrounds */
.fullscreen-time-overlay.bg-5 .fullscreen-clock.countdown-complete,
.fullscreen-time-overlay.bg-6 .fullscreen-clock.countdown-complete,
.fullscreen-time-overlay.bg-7 .fullscreen-clock.countdown-complete {
    outline: 1px solid white;
}

/* Timer adjustment state for dark backgrounds */
.fullscreen-time-overlay.bg-5 .fullscreen-clock.adjusting-timer,
.fullscreen-time-overlay.bg-6 .fullscreen-clock.adjusting-timer,
.fullscreen-time-overlay.bg-7 .fullscreen-clock.adjusting-timer {
    outline: 1px solid white;
}

/* Mobile Responsive Overrides - Remove underline from time display */
@media screen and (max-width: 768px) {
    .clickable-time,
    #localTime,
    #localTime.clickable-time,
    .clickable-time.tooltip-link,
    #localTime.clickable-time.tooltip-link {
        text-decoration: none !important;
    }
}