/* ==========================================================================
   ToolbarWidget — DateTime Header, Search Bar, Pomodoro Timer
   Extracted from: task_tracker_datetime.css, task_tracker_widgets.css, touchpoint-styles.css
   ========================================================================== */

/* Task Tracker DateTime Header Styles */

.task_tracker_datetime_divider_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 60%;
    background-color: #e0e0e0;
}

.task_tracker_datetime_divider_bottom {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background-color: #e0e0e0;
}

/* DateTime Header Styles */
.task_tracker_datetime_header{position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:960px;margin:0 auto;padding:2rem 2rem 3rem;margin-bottom:1.5rem;z-index:100;box-sizing:border-box}
.task_tracker_datetime_header_left{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-right:2rem;cursor:pointer;transition:opacity 0.15s ease}
.task_tracker_datetime_header_left:hover{opacity:0.85}
.task_tracker_datetime_header_row_1{font-size:1.2rem;font-weight:400;color:#282d3b;margin-bottom:0.25rem;text-align:center}
.task_tracker_datetime_header_row_2{font-size:4rem;font-weight:700;color:#282d3b;line-height:1;text-align:center;margin-bottom:0.25rem;transition:opacity 0.15s ease}
.task_tracker_datetime_header_row_2:hover{opacity:0.7}
.task_tracker_datetime_header_row_3{font-size:1.2rem;font-weight:400;color:#282d3b;text-transform:uppercase;text-align:center;margin-top:0.25rem;transition:opacity 0.15s ease}
.task_tracker_datetime_header_row_3:hover{opacity:0.7}
.task_tracker_datetime_header_vertical_divider{width:1px;align-self:stretch;background-color:#e5e7eb;flex-shrink:0;margin:0 1.5rem}
.task_tracker_datetime_header_right{flex:1;display:flex;justify-content:center;align-items:center;padding-left:2rem}
.task_tracker_datetime_header_right_content{display:flex;align-items:center;gap:3rem;width:100%;justify-content:center}
.task_tracker_datetime_header_time_location{display:flex;flex-direction:column;justify-content:center;align-items:center}
.task_tracker_datetime_header_time{font-size:4rem;font-weight:700;color:#282d3b;line-height:1;margin-bottom:0.25rem}
.task_tracker_datetime_header_location{font-size:1rem;font-weight:300;color:#6c757d}
.task_tracker_datetime_header_icons{display:flex;flex-direction:column;gap:1.5rem;align-items:center;flex-shrink:0;margin-left:auto;margin-right:0}
.task_tracker_datetime_header_icon{font-size:1.2rem;cursor:pointer;transition:0.15s ease;display:flex;align-items:center;justify-content:center}
.task_tracker_datetime_header_icon img{width:1.2rem;height:1.2rem;transition:0.15s ease}
.task_tracker_datetime_header_icon:hover{filter:drop-shadow(0 0 6px rgba(40,45,59,0.4));opacity:1}
.task_tracker_datetime_header_icon:hover img{opacity:0.8}
.task_tracker_datetime_header_bottom_line{position:absolute;bottom:0;left:10%;right:10%;height:1px;background-color:#e0e0e0}

@media (max-width: 768px) {
    .task_tracker_datetime_header{padding:1rem 1rem}
    .task_tracker_datetime_header_left{padding-right:0}
    .task_tracker_datetime_header_right_content{gap:1.5rem}
    .task_tracker_datetime_header_time,.task_tracker_datetime_header_row_2{font-size:3rem}
    .task_tracker_datetime_header_icons{margin-left:auto;margin-right:2rem;flex-shrink:0}
    .task_tracker_datetime_header_right{padding-right:2.5rem}
    .task_tracker_datetime_header_vertical_divider{margin:0 1rem}
    .task_tracker_search_container--centered{position:relative;left:auto;transform:none;flex:1;margin:1rem 3rem 1rem 0}
    .task_tracker_search_fields_wrapper{width:100%;position:relative}
    .task_tracker_search_icon_inside{right:16px;width:20px;height:20px}
}

@media (max-width: 576px) {
    .task_tracker_datetime_header{padding:1rem 0.5rem}
    .task_tracker_datetime_header_left{padding-right:0}
    .task_tracker_datetime_header_row_1,.task_tracker_datetime_header_row_3{font-size:0.875rem}
    .task_tracker_datetime_header_location{font-size:0.875rem}
    .task_tracker_datetime_header_icons{gap:0.5rem;margin-left:auto;margin-right:1rem}
    .task_tracker_datetime_header_right{padding-right:2rem}
    .task_tracker_datetime_header_icon{font-size:1.1rem}
    .task_tracker_datetime_header_icon img{width:1.1rem;height:1.1rem}
    .task_tracker_datetime_header_right_content{gap:1rem}
    .task_tracker_datetime_header_time,.task_tracker_datetime_header_row_2{font-size:2.5rem}
    .task_tracker_datetime_header_vertical_divider{margin:0 0.75rem}
    .task_tracker_search_container--centered{position:relative;left:auto;transform:none;flex:1;margin:1rem 2rem 1rem 0}
    .task_tracker_search_icon_inside{right:12px;width:18px;height:18px}
}

@media (max-width: 480px) {
    .task_tracker_datetime_header{padding:0.75rem 0.5rem}
    .task_tracker_datetime_header_left{padding-right:0}
    .task_tracker_datetime_header_time,.task_tracker_datetime_header_row_2{font-size:2rem}
    .task_tracker_datetime_header_right{padding-right:1rem}
    .task_tracker_datetime_header_icons{margin-right:0.75rem;gap:0.4rem}
    .task_tracker_datetime_header_icon img{width:1rem;height:1rem}
    .task_tracker_datetime_header_vertical_divider{margin:0 0.5rem}
}

/* ==========================================================================
   Search Container Styles
   ========================================================================== */

.task_tracker_search_container{position:relative;display:flex;align-items:center;width:100%;max-width:300px}
.task_tracker_search_container--centered{position:absolute;left:50%;transform:translateX(-50%);max-width:600px;z-index:100}
.task_tracker_search_fields_wrapper{display:flex;align-items:center;width:100%;background:#ffffff;border:1.5px solid #e5e7eb;border-radius:25px;overflow:hidden;transition:border-color 0.2s ease, box-shadow 0.2s ease}
.task_tracker_search_fields_wrapper:focus-within{border-color:#282D3B;box-shadow:0 2px 8px rgba(40,45,59,0.1)}
.task_tracker_search_divider{width:1px;height:24px;background-color:#e5e7eb;flex-shrink:0}
.task_tracker_search_input{padding:0.625rem 1rem;font-family:'Roboto',sans-serif;font-size:0.95rem;font-weight:400;color:#282d3b;background:transparent;border:none;outline:none;box-sizing:border-box}
.task_tracker_search_input--title{flex:0 0 80%;padding-right:0.5rem}
.task_tracker_search_input--location{flex:0 0 20%;padding-left:0.5rem;padding-right:2.5rem}
.task_tracker_search_input:focus{border-color:#282D3B;box-shadow:0 2px 8px rgba(40,45,59,0.1)}
.task_tracker_search_icon_inside{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);width:20px;height:20px;cursor:pointer;opacity:0.6;transition:opacity 0.2s ease, transform 0.2s ease;display:flex;align-items:center;justify-content:center;z-index:2}
.task_tracker_search_container--centered .task_tracker_search_icon_inside{right:0.75rem}
.task_tracker_search_icon_inside:hover{transform:translateY(-50%) scale(1.1);opacity:1}
.task_tracker_search_input::placeholder{color:#999}
.task_tracker_search_container--centered .task_tracker_search_message{position:absolute;top:calc(100% + 0.5rem);left:50%;transform:translateX(-50%);width:100%}
.task_tracker_search_icon_inside svg,.task_tracker_search_icon_inside img{width:20px;height:20px;transition:transform 0.2s ease}
.task_tracker_search_message_icon{font-size:16px;flex-shrink:0;margin-top:1px}
.task_tracker_search_message_text{line-height:1.4;font-weight:500}

@keyframes searchMessageSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
    .task_tracker_search_container--centered { max-width: 500px; }
}

@media (max-width: 768px) {
    .task_tracker_search_container--centered { max-width: 90%; padding: 0 1rem; }
    .task_tracker_search_input--title { flex: 1; }
    .task_tracker_search_input--location { flex: 0 0 80px; }
}

@media (max-width: 420px) {
    .task_tracker_search_input--title, .task_tracker_search_input--location { flex: 1; min-width: 0; font-size: 0.8rem; }
    .task_tracker_search_input--title { padding-right: 0.25rem; }
    .task_tracker_search_input--location { padding-left: 0.25rem; padding-right: 2rem; }
}

/* ==========================================================================
   Pomodoro Timer Styles
   ========================================================================== */

.pomodoro_timer_container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:0 20px;flex:1}
.pomodoro_timer_left{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:120px}
.pomodoro_timer_right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.pomodoro_timer_display{font-family:'Roboto',sans-serif;font-size:4rem;font-weight:700;color:#282D3B;line-height:1;letter-spacing:2px}
.pomodoro_timer_mode_selector{position:relative;width:100%}
.pomodoro_timer_mode_dropdown{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;padding:8px 0}
.pomodoro_timer_chevron{display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease;margin-left:8px;width:14px;height:14px;color:#282D3B}
.pomodoro_timer_chevron svg,.pomodoro_timer_chevron img{width:14px;height:14px}
.pomodoro_timer_mode_list{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid #E0E0E0;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:1000;margin-top:4px}
.pomodoro_timer_mode_item{padding:12px 16px;font-family:'Roboto',sans-serif;font-size:1rem;font-weight:400;color:#282D3B;cursor:pointer;transition:background-color 0.2s ease}
.pomodoro_timer_mode_item:hover{background-color:#f5f5f5}
.pomodoro_timer_mode_item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}
.pomodoro_timer_mode_item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}
.pomodoro_timer_start_button{font-family:'Roboto',sans-serif;font-size:1rem;font-weight:600;color:white;background-color:#282D3B;border:none;border-radius:8px;padding:12px 32px;cursor:pointer;transition:opacity 0.2s ease}
.pomodoro_timer_start_button:hover{opacity:0.9}
.pomodoro_timer_development_message{font-family:'Roboto',sans-serif;font-size:1.5rem;font-weight:400;color:#6c757d;text-align:center}
.pomodoro_timer_display_input{background:transparent;border:2px solid #282D3B;border-radius:8px;padding:10px;text-align:center;outline:none;width:250px}
.pomodoro_timer_display_input:focus{border-color:#282D3B;box-shadow:0 0 0 3px rgba(40,45,59,0.1)}
.pomodoro_timer_controls{display:flex;align-items:center;gap:16px}
.pomodoro_timer_set_button{font-family:'Roboto',sans-serif;font-size:1rem;font-weight:600;color:#282D3B;background-color:white;border:none;border-radius:8px;padding:12px 32px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:box-shadow 0.2s ease}
.pomodoro_timer_set_button:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.pomodoro_timer_speaker_container{position:relative}
.pomodoro_timer_speaker_icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:24px;height:24px}
.pomodoro_timer_speaker_icon svg,.pomodoro_timer_speaker_icon img{width:24px;height:24px}
.pomodoro_timer_sound_list{position:absolute;bottom:100%;right:0;margin-bottom:8px;background:white;border:1px solid #E0E0E0;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:1000;min-width:180px}
.pomodoro_timer_sound_item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background-color 0.2s ease;border-bottom:1px solid #f0f0f0}
.pomodoro_timer_sound_item:last-child{border-bottom:none}
.pomodoro_timer_sound_item:hover{background-color:#f5f5f5}
.pomodoro_timer_sound_item svg,.pomodoro_timer_sound_item img{width:20px;height:20px;flex-shrink:0}
.pomodoro_timer_sound_item_add{border-top:1px solid #E0E0E0;margin-top:4px;padding-top:12px}
.pomodoro_timer_sound_item_add:hover{background-color:#f5f5f5}
.pomodoro_timer_sound_name{flex:1;font-family:'Roboto',sans-serif;font-size:0.95rem;font-weight:400;color:#282D3B}
.pomodoro_timer_sound_checkmark{font-family:'Roboto',sans-serif;font-size:1rem;font-weight:600;color:#282D3B;flex-shrink:0}

/* Responsive Pomodoro */
@media (max-width: 768px) {
    .pomodoro_timer_container { gap: 15px; padding: 0 15px; }
    .pomodoro_timer_display { font-size: 3rem; }
}

@media (max-width: 576px) {
    .pomodoro_timer_container { gap: 10px; padding: 0 10px; }
    .pomodoro_timer_display { font-size: 2.5rem; }
    .pomodoro_timer_controls { gap: 8px; }
    .pomodoro_timer_set_button, .pomodoro_timer_start_button { padding: 8px 16px; font-size: 0.875rem; }
}

/* ==========================================================================
   Countdown Timer Styles (from CountdownTimer.css)
   ========================================================================== */

.countdown-timer{flex:1;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;padding-left:20px}
.timer-display{font-family:'Roboto',sans-serif;font-size:5rem;font-weight:700;color:#282D3B;line-height:1;text-align:center}
.timer-display.warning{color:#f39c12}
.timer-display.danger{color:#e74c3c}
.timer-controls{display:flex;align-items:center;gap:16px}
.timer-button{font-family:'Roboto',sans-serif;font-size:1rem;font-weight:600;border:none;border-radius:8px;padding:12px 32px;cursor:pointer;transition:all 0.2s ease}
.timer-button:hover{opacity:0.9}
.timer-button.start{color:white;background-color:#282D3B}
.timer-button.pause{color:white;background-color:#ffc107}
.timer-button.reset{color:#282D3B;background-color:white;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.timer-button.reset:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15)}

@media (max-width: 768px) {
    .countdown-timer { padding-left: 10px; gap: 15px; }
    .timer-display { font-size: 3.5rem; }
    .timer-button { padding: 10px 24px; font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .timer-display { font-size: 3rem; }
    .timer-button { padding: 8px 20px; font-size: 0.8rem; }
}

/* ==========================================================================
   Stopwatch Styles (from Stopwatch.css)
   ========================================================================== */

.stopwatch{flex:1;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;padding-left:20px}
.stopwatch-display{font-family:'Roboto',sans-serif;font-size:5rem;font-weight:700;color:#282D3B;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.stopwatch-controls{display:flex;align-items:center;gap:16px}
.stopwatch-button{font-family:'Roboto',sans-serif;font-size:1rem;font-weight:600;border:none;border-radius:8px;padding:12px 32px;cursor:pointer;transition:all 0.2s ease}
.stopwatch-button:hover{opacity:0.9}
.stopwatch-button:disabled{opacity:0.5;cursor:not-allowed}
.stopwatch-button.start{color:white;background-color:#282D3B}
.stopwatch-button.stop{color:white;background-color:#dc3545}
.stopwatch-button.lap{color:#282D3B;background-color:white;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.stopwatch-button.lap:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.stopwatch-laps{width:100%;max-width:400px;margin-top:20px;contain:layout style paint}
.stopwatch-laps-header{display:grid;grid-template-columns:80px 120px 120px;justify-content:space-between;gap:16px;padding:12px 16px;background-color:#6c757d;color:white;font-family:'Roboto',sans-serif;font-weight:600;font-size:0.9rem;border-radius:8px 8px 0 0;position:sticky;top:0;z-index:1}
.stopwatch-laps-list{background-color:#f8f9fa;border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;contain:layout style paint}
.stopwatch-lap-item{display:grid;grid-template-columns:80px 120px 120px;justify-content:space-between;gap:16px;padding:10px 16px;font-family:'Roboto',sans-serif;font-size:0.9rem;color:#282D3B;border-bottom:1px solid #e9ecef;will-change:auto;font-variant-numeric:tabular-nums}
.stopwatch-laps-header span:nth-child(2),.stopwatch-laps-header span:nth-child(3),.stopwatch-lap-item span:nth-child(2),.stopwatch-lap-item span:nth-child(3){text-align:right}
.stopwatch-lap-item:last-child{border-bottom:none}
.stopwatch-lap-item:nth-child(even){background-color:#ffffff}

@media (max-width: 768px) {
    .stopwatch { padding-left: 10px; gap: 15px; }
    .stopwatch-display { font-size: 3.5rem; }
    .stopwatch-button { padding: 10px 24px; font-size: 0.9rem; }
    .stopwatch-laps { max-width: 300px; }
    .stopwatch-laps-header, .stopwatch-lap-item { font-size: 0.8rem; gap: 12px; padding: 8px 12px; grid-template-columns: 60px 100px 100px; }
}

@media (max-width: 480px) {
    .stopwatch-display { font-size: 3rem; }
    .stopwatch-button { padding: 8px 20px; font-size: 0.8rem; }
    .stopwatch-laps { max-width: 250px; }
    .stopwatch-laps-header, .stopwatch-lap-item { font-size: 0.7rem; gap: 8px; padding: 6px 10px; grid-template-columns: 50px 80px 80px; }
}