/* --- DEEP TIME (formerly Standby Mode) STYLES --- */

/* Only active when body has .standby-mode-active class */
body.standby-mode-active,
body.idle-clock-active {
    background-color: #000;
    /* Hide standard elements */
    overflow: hidden;
}

/* Dim mode - reduces brightness of clock digits for night use */
body.dim-mode.standby-mode-active #standby-clock-container,
body.dim-mode.idle-clock-active #standby-clock-container {
    opacity: 0.35;
    filter: brightness(0.6);
}

/* Smooth transition for idle clock */
body.idle-clock-transitioning {
    transition: background-color 0.5s ease;
}

#standby-clock-container {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.idle-clock-active #standby-clock-container,
body.standby-mode-active #standby-clock-container {
    opacity: 1;
}

/* Hide elements when standby/idle clock is active */
body.standby-mode-active #timer-display,
body.standby-mode-active #quote-container,
body.idle-clock-active #timer-display,
body.idle-clock-active #quote-container {
    display: none !important;
}

/* Make sure the standby container is visible when active */
body.standby-mode-active #standby-clock-container,
body.idle-clock-active #standby-clock-container {
    display: flex !important;
}

/* --- THEME DEFINITIONS --- */
:root {
    /* Default Blue Theme */
    --sb-c1: #5ac8fa;
    --sb-c2: #007aff;
    --sb-c3: #005ecb;
    --sb-c4: #00307d;
    --sb-colon-bg: rgba(255, 255, 255, 0.45);
}

/* Green Theme */
body.standby-theme-green {
    --sb-c1: #63e6e2;
    /* Mint/Cyan */
    --sb-c2: #34c759;
    /* Apple Green */
    --sb-c3: #009943;
    /* Forest */
    --sb-c4: #03451e;
    /* Deep Green */
}

/* Pink/Purple Theme */
body.standby-theme-purple {
    --sb-c1: #ff6ea9;
    /* Hot Pink */
    --sb-c2: #d64ef0;
    /* Orchid */
    --sb-c3: #9b4cf0;
    /* Purple */
    --sb-c4: #5f1eb5;
    /* Deep Violet */
}

/* Orange/Red Theme */
body.standby-theme-orange {
    --sb-c1: #ffcf54;
    /* Sunny Yellow */
    --sb-c2: #ff9500;
    /* Apple Orange */
    --sb-c3: #ff3b30;
    /* Apple Red */
    --sb-c4: #a80800;
    /* Deep Red */
}

/* Midnight Theme */
body.standby-theme-midnight {
    --sb-c1: #8e8e93;
    --sb-c2: #48484a;
    --sb-c3: #2c2c2e;
    --sb-c4: #1c1c1e;
    --sb-colon-bg: rgba(255, 255, 255, 0.2);
}

/* --- CONTAINER & DIGITS --- */
#standby-clock-container {
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    /* Let clicks pass through if needed, though mostly overlay */
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.sb-digit {
    font-size: 42vw;
    /* Massive Size */
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -2vw;
    transition: color 0.4s ease;
    font-variant-numeric: tabular-nums;
}

/* Specific Color & Overlap Logic per digit (Refined for M PLUS Rounded) */

/* Hour 1 overlaps Hour 2 */
#sb-h1 {
    color: var(--sb-c1);
    z-index: 5;
    margin-right: -4.5vw;
}

/* Hour 2 overlaps Colon */
#sb-h2 {
    color: var(--sb-c2);
    z-index: 4;
    opacity: 0.9;
    margin-right: -2.0vw;
}

/* Minute 1 overlaps Colon */
#sb-m1 {
    color: var(--sb-c3);
    z-index: 4;
    margin-left: -2.0vw;
}

/* Minute 2 overlaps Minute 1 */
#sb-m2 {
    color: var(--sb-c4);
    z-index: 3;
    opacity: 0.9;
    margin-left: -5.5vw;
}

/* --- THE DOTS (COLON) --- */
.sb-colon-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw;
    height: 25vw;
    z-index: 10;
    margin: 0 -1vw;
}

.sb-dot {
    width: 6vw;
    height: 6vw;
    background-color: var(--sb-colon-bg);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Mobile Adjustments */
@media (orientation: portrait) {
    .sb-digit {
        font-size: 28vw;
    }

    .sb-dot {
        width: 4.5vw;
        height: 4.5vw;
    }

    #sb-h2 {
        margin-right: -2vw;
    }

    #sb-m1 {
        margin-left: -2vw;
    }
}

/* Settings UI for Theme Switcher */
.standby-theme-selector {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    justify-content: flex-start;
}

.sb-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s;
    position: relative;
}

.sb-swatch:hover {
    transform: scale(1.1);
}

.sb-swatch.active {
    border-color: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.sb-s-blue {
    background: linear-gradient(135deg, #5ac8fa, #00307d);
}

.sb-s-green {
    background: linear-gradient(135deg, #63e6e2, #03451e);
}

.sb-s-purple {
    background: linear-gradient(135deg, #ff6ea9, #5f1eb5);
}

.sb-s-orange {
    background: linear-gradient(135deg, #ffcf54, #a80800);
}

.sb-s-midnight {
    background: linear-gradient(135deg, #8e8e93, #1c1c1e);
}

/* Running Indicator Glow for Standby Mode - Mode Specific Colors */

/* Stopwatch Mode - Green Glow */
@keyframes standby-pulse-green {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.4), 0 0 16px rgba(74, 222, 128, 0.2);
    }

    50% {
        box-shadow: 0 0 16px rgba(74, 222, 128, 0.6), 0 0 32px rgba(74, 222, 128, 0.3);
    }
}

/* Timer Mode - Blue Glow */
@keyframes standby-pulse-blue {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(96, 165, 250, 0.4), 0 0 16px rgba(96, 165, 250, 0.2);
    }

    50% {
        box-shadow: 0 0 16px rgba(96, 165, 250, 0.6), 0 0 32px rgba(96, 165, 250, 0.3);
    }
}

/* Pomodoro Mode - Red Glow */
@keyframes standby-pulse-red {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(248, 113, 113, 0.4), 0 0 16px rgba(248, 113, 113, 0.2);
    }

    50% {
        box-shadow: 0 0 16px rgba(248, 113, 113, 0.6), 0 0 32px rgba(248, 113, 113, 0.3);
    }
}

.mode-indicator-box.standby-glow-stopwatch {
    animation: standby-pulse-green 2s ease-in-out infinite;
    border-color: rgba(74, 222, 128, 0.4);
}

.mode-indicator-box.standby-glow-timer {
    animation: standby-pulse-blue 2s ease-in-out infinite;
    border-color: rgba(96, 165, 250, 0.4);
}

.mode-indicator-box.standby-glow-pomodoro {
    animation: standby-pulse-red 2s ease-in-out infinite;
    border-color: rgba(248, 113, 113, 0.4);
}