/* Custom styles for Workday Progress Timer */

/* Edge Window Controls Overlay support.
 * The fallback keeps the normal browser header unchanged. In an installed
 * WCO PWA, the timer's status strip becomes the draggable title area and the
 * timeline can start directly below the native window controls. */
.app-titlebar {
    app-region: drag;
    -webkit-app-region: drag;
}

.app-titlebar button,
.app-titlebar a,
.app-titlebar input,
.app-titlebar [role="button"] {
    app-region: no-drag;
    -webkit-app-region: no-drag;
}

@media (display-mode: window-controls-overlay) {
    header {
        position: fixed;
        inset: 0 auto auto 0;
        width: env(titlebar-area-width, 100%);
        height: env(titlebar-area-height, 32px);
        min-height: 75px;
        padding: 0;
        border: 0;
        /*background: transparent !important;*/
        pointer-events: none;
        app-region: drag;
        -webkit-app-region: drag;
        background-color: #1a1a1a !important;
    }

    header > div {
        display: none;
    }

    main {
        padding-top: 0;
        justify-content: flex-start;
    }

    #progress-bar-wrapper {
        max-height: none;
    }

    #timer-titlebar {
        width: 100%;
        max-width: none;
        min-height: 38px;
        margin-bottom: 0;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: max(1rem, calc(env(titlebar-area-x, 0px) + 1rem));
        app-region: drag;
        -webkit-app-region: drag;
    }

    #progress-track {
        min-height: 180px;
    }
}

/* Blinking vertical indicator line */
@keyframes blinkLine {
    0%, 100% {
        opacity: 1;
        background-color: #ffffff;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
    }
    50% {
        opacity: 0.2;
        background-color: #000000;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    }
}

.blinking-time-line {
    animation: blinkLine 1.2s infinite ease-in-out;
}

/* Custom Scrollbar for Settings Drawer */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #131313;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #2c3444;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #52be95;
}

/* Progress bar dynamic viewport height responsiveness */
/* When viewport height lowers below 500px, progress bar resizes smoothly */
@media (max-height: 500px) {
    main {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    #progress-bar-wrapper {
        min-height: 80px !important;
        max-height: calc(100vh - 120px) !important;
    }

    #progress-track {
        min-height: 60px !important;
    }

    #stats-bar {
        display: none !important;
    }
}

@media (max-height: 485px) {
    header {
        display: none !important;
    }

    main {
        padding-bottom: 0 !important;
        justify-content: flex-end !important;
    }

    main > div {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        justify-content: flex-end !important;
    }

    #progress-bar-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        max-height: none !important;
    }

    #bottom-graduated-bar {
        margin-bottom: 0 !important;
    }
}

/* Tooltip animation */
#segment-tooltip {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Range input styling for Scrub mode */
input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #52be95;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(82, 190, 149, 0.5);
}

/* Ensure smooth transition for background colors */
.schedule-segment {
    transition: background-color 0.2s ease;
}

/* --- LIGHT MODE SCHEME OVERRIDES --- */
html.light-mode body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html.light-mode header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e2e8f0 !important;
}

html.light-mode header h1 {
    color: #0f172a !important;
}

html.light-mode header p {
    color: #64748b !important;
}

html.light-mode #stats-toggle-btn,
html.light-mode #theme-toggle-btn {
    color: #64748b !important;
}

html.light-mode #stats-toggle-btn:hover,
html.light-mode #theme-toggle-btn:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

html.light-mode #open-settings-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html.light-mode #scrub-bar {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

html.light-mode #scrub-time-display {
    color: #0f172a !important;
}

html.light-mode #reset-live-btn {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-mode #top-bar-labels,
html.light-mode #bottom-graduated-bar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-mode .top-edge-pill {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html.light-mode .hour-tick-line {
    background-color: #0f172a !important;
}

html.light-mode .hour-tick-label {
    color: #334155 !important;
}

html.light-mode .half-hour-tick-line {
    background-color: #64748b !important;
}

html.light-mode .quarter-hour-tick-line {
    background-color: #cbd5e1 !important;
}

html.light-mode #current-status-text {
    color: #0f172a !important;
}

html.light-mode #progress-track .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

html.light-mode #progress-track .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.12) !important;
}

html.light-mode #stats-bar > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

html.light-mode #stats-bar .text-\[\#87948c\] {
    color: #64748b !important;
}

html.light-mode #stats-bar .text-white {
    color: #0f172a !important;
}

html.light-mode #stats-bar .text-\[\#bdcac1\] {
    color: #475569 !important;
}

html.light-mode #stats-bar .bg-\[\#2c3444\] {
    background-color: #e2e8f0 !important;
}

html.light-mode #settings-modal > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light-mode #settings-modal .bg-\[\#1a1a1a\]\/50,
html.light-mode #settings-modal .bg-\[\#1a1a1a\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light-mode #settings-modal h2,
html.light-mode #settings-modal h3 {
    color: #0f172a !important;
}

html.light-mode #settings-modal label {
    color: #475569 !important;
}

html.light-mode #settings-modal input[type="text"],
html.light-mode #settings-modal input[type="time"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-mode #color-elapsed-hex,
html.light-mode #color-remaining-hex,
html.light-mode #color-pause-hex {
    color: #0f172a !important;
}

html.light-mode #cancel-settings-btn {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}