/* Clean Modern Timer Button Styling - Simple Tabs Approach */

/* Override the slider completely and use simple tab styling */
.tabs {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 25px !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  justify-content: center !important;
}

.tabs::before {
  display: none !important;
}

/* Clean tab button styling */
.tab {
  padding: 12px 24px !important;
  cursor: pointer !important;
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: #6c757d !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  z-index: auto !important;
  position: relative !important;
}

.tab:hover {
  background: #e9ecef !important;
  border-color: #adb5bd !important;
  color: #495057 !important;
  transform: translateY(-1px) !important;
}

.tab.active {
  background: #293241 !important;
  border-color: #293241 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(41, 50, 65, 0.2) !important;
}

.tab.active:hover {
  background: #1e2330 !important;
  border-color: #1e2330 !important;
  transform: translateY(-1px) !important;
}

/* Clean timer display styling */
#timer-display {
  font-size: 2.8rem !important;
  font-family: 'Segoe UI', monospace, sans-serif !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  text-align: center !important;
  max-width: 320px !important;
  margin: 20px auto !important;
  padding: 16px 24px !important;
  background: #f8f9fa !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  letter-spacing: 2px !important;
}

/* Clean modern timer buttons */
.timer-buttons {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 24px auto !important;
  max-width: 450px !important;
}

.timer-buttons button {
  flex: 1 !important;
  min-width: 110px !important;
  padding: 12px 18px !important;
  border-radius: 6px !important;
  border: 2px solid transparent !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  outline: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.timer-buttons button i {
  font-size: 0.9rem !important;
}

.timer-buttons button:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
}

/* Start button - complementary green */
.timer-buttons button#start-timer {
  background: #10B981 !important;
  color: white !important;
  border-color: #10B981 !important;
}

.timer-buttons button#start-timer:hover:not(:disabled) {
  background: #059669 !important;
  border-color: #047857 !important;
  transform: translateY(-1px) !important;
}

.timer-buttons button#start-timer:active {
  transform: translateY(0) !important;
}

.timer-buttons button#start-timer:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
}

/* Pause button - vibrant site blue with higher specificity */
.timer-buttons button#pause-timer,
button#pause-timer.primary,
#pause-timer {
  background: #2CBEF4 !important;
  background-color: #2CBEF4 !important;
  color: white !important;
  border: 2px solid #2CBEF4 !important;
  border-color: #2CBEF4 !important;
  opacity: 1 !important;
}

.timer-buttons button#pause-timer:hover:not(:disabled),
button#pause-timer.primary:hover:not(:disabled),
#pause-timer:hover:not(:disabled) {
  background: #1AA7E1 !important;
  background-color: #1AA7E1 !important;
  border-color: #1890CE !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

.timer-buttons button#pause-timer:active,
button#pause-timer.primary:active,
#pause-timer:active {
  transform: translateY(0) !important;
  background: #2CBEF4 !important;
  background-color: #2CBEF4 !important;
}

.timer-buttons button#pause-timer:focus,
button#pause-timer.primary:focus,
#pause-timer:focus {
  box-shadow: 0 0 0 3px rgba(44, 190, 244, 0.3) !important;
  background: #2CBEF4 !important;
  background-color: #2CBEF4 !important;
}

/* Stop button - vivid red with higher specificity */
.timer-buttons button#stop-timer,
button#stop-timer.danger,
#stop-timer {
  background: #FF3B30 !important;
  background-color: #FF3B30 !important;
  color: white !important;
  border: 2px solid #FF3B30 !important;
  border-color: #FF3B30 !important;
  opacity: 1 !important;
}

.timer-buttons button#stop-timer:hover:not(:disabled),
button#stop-timer.danger:hover:not(:disabled),
#stop-timer:hover:not(:disabled) {
  background: #E53E3E !important;
  background-color: #E53E3E !important;
  border-color: #C53030 !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

.timer-buttons button#stop-timer:active,
button#stop-timer.danger:active,
#stop-timer:active {
  transform: translateY(0) !important;
  background: #FF3B30 !important;
  background-color: #FF3B30 !important;
}

.timer-buttons button#stop-timer:focus,
button#stop-timer.danger:focus,
#stop-timer:focus {
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.4) !important;
  background: #FF3B30 !important;
  background-color: #FF3B30 !important;
}

/* Disabled button styles */
.timer-buttons button:disabled {
  background: #6c757d !important;
  color: #dee2e6 !important;
  border-color: #6c757d !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.timer-buttons button:disabled:hover {
  background: #6c757d !important;
  border-color: #6c757d !important;
  transform: none !important;
}

/* Manual entry submit button - match site-wide button styling with correct blue color */
#manual-entry-form button[type="submit"] {
  background-color: #2CBEF4 !important;
  color: white !important;
  border: none !important;
  padding: var(--space-3) var(--space-5) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  transition: all var(--transition-fast) !important;
  box-shadow: var(--shadow-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: var(--space-4) !important;
}

#manual-entry-form button[type="submit"]::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  transition: background-color var(--transition-fast) !important;
}

#manual-entry-form button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

#manual-entry-form button[type="submit"]:hover::after {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

#manual-entry-form button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-sm) !important;
}

#manual-entry-form button[type="submit"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(44, 190, 244, 0.3) !important;
}

/* Responsive styles */
@media (max-width: 768px) {
  #timer-display {
    font-size: 2.2rem !important;
    padding: 12px 18px !important;
    margin: 16px auto !important;
    max-width: 280px !important;
  }
  
  .timer-buttons {
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 280px !important;
  }
  
  .timer-buttons button {
    width: 100% !important;
    min-width: auto !important;
  }
  
  #manual-entry-form button[type="submit"] {
    width: 100% !important;
  }
}