/* 
    Custom Styles for Countdown Timer Tool
    - Supplements Bootstrap 5.3.3 styles
    - Mobile/desktop optimizations, hidden video, UX enhancements
*/

/* Ensure top-aligned, minimal vertical scrollbar on mobile */
body {
    padding-bottom: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: #f8fafc;
}

/* Countdown display: Large, bold, highly visible */
.timer-display {
    font-size: clamp(4.0rem, 8vw, 7rem);
    letter-spacing: 0.05em;
    line-height: 1.1;
    min-height: 1.0em;
    user-select: none;
    font-family: 'Segoe UI', 'Arial', 'sans-serif';
    background: #fff;
    border: 2px solid #e5e5e5;
    transition: color 0.2s, background 0.2s;
    margin: 0 auto;
    max-width: 560px;
}

/* Red style when overtime */
.timer-display.overtime {
    color: #be1e22 !important;
    background: #fff5f5;
    border-color: #ffdddd;
}

/* Time's Up Notice: always reserved height */
#timesUpNotice {
    min-height: 2.2em;
    font-size: 1.5rem;
    letter-spacing: 0.13em;
}

/* Time input: style to avoid text selection and improve number picker, limit width */
.time-input[type="number"]::-webkit-outer-spin-button,
.time-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.time-input {
    appearance: textfield;
    min-width: 40px;
    max-width: 70px;
    font-size: 2.1rem;
    background: #f9f9f9;
}

/* Input group vertical alignment fix (for time inputs) */
.input-group > .form-control,
.input-group > .input-group-text {
    height: 2.6rem;
}

@media (max-width: 575.98px) {
    .timer-display { font-size: 4.0rem; min-height: 1.1em; }
    .form-control, .form-control-lg { font-size: 1.8rem; }
    #timer-title { font-size: 1.08rem !important; }
    .btn-lg { font-size:1.06rem; }
    .row.mb-3 { margin-bottom: 0.7rem!important; }
    .row.mb-2 { margin-bottom: 0.45rem!important; }
}

/* Add Time Buttons: Slightly bigger click/tap targets on mobile */
.add-time-btn {
    min-width: 60px;
    min-height: 50px; 
    margin-right: 2px;
    margin-bottom: 2px;
}

@media (hover: hover) {
    .add-time-btn:hover, .add-time-btn:focus {
        background: #eee;
        border-color: #333;
    }
}

/* Pulse animation for Stop button when time's up */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(211,41,52,0.59); }
    50% { box-shadow: 0 0 0 10px rgba(211,41,52,0.128);}
    100% { box-shadow: 0 0 0 0 rgba(211,41,52,0.0);}
}
.pulse-target.pulsing {
    animation: pulse 1.3s infinite;
}

/* Custom visually-hidden helper for times-up notice (so row stays at min-height) */
.visually-hidden:not(.force-visible) {
    display: none !important;
}

/* Hidden video for wake lock: No visible/audio impact, ignore by screen readers */
.hidden-wake-video {
    width: 0 !important;
    height: 0 !important;
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
    z-index: -2;
}

/* Volume slider styling */
input[type="range"].form-range {
    accent-color: #252525;
}

@media (max-width: 480px) {
    .timer-display {
        font-size: 4.0rem;
    }
    .add-time-btn { 
        min-width: 55px;
        min-height: 45px; 
    }
}

/* Reduce margin on last controls for space */
.mb-2:last-child {
    margin-bottom: 0 !important;
}