/* Timer header component (SA-81 — unified tracker widget) */

@keyframes timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.animation-blink {
  animation: timer-blink 1.5s ease-in-out infinite;
}

/* Self-contained pill: own background + border, so the button stays readable
   on the dark overview header AND the light/dark detail headers alike —
   no per-page (body.app-detail) overrides needed. */
#kt_timer_worker .timer-pill {
  /* Idle: just the icon, no button chrome — the pill appears on hover/run */
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

#kt_timer_worker .timer-pill:hover,
#kt_timer_worker .timer-pill:focus {
  /* Solid colors on purpose — translucent backgrounds go dark on the dark
     overview header and the text becomes unreadable. */
  background-color: #ffffff;
  border-color: #dbdfe9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#kt_timer_worker .timer-pill i.ki-duotone {
  color: var(--bs-primary, #3e97ff);
}

.header-timer-text {
  color: var(--bs-gray-800, #252f4a);
}

/* Running state — success accent (solid light-success, opaque on any header) */
#kt_timer_worker .timer-pill.timer-active {
  background-color: #e8fff3;
  border-color: rgba(80, 205, 137, 0.5);
}

#kt_timer_worker .timer-pill.timer-active:hover,
#kt_timer_worker .timer-pill.timer-active:focus {
  background-color: #d7f9e7;
}

#kt_timer_worker .timer-pill.timer-active i.ki-duotone {
  color: var(--bs-success, #50cd89);
}

/* Break running — warning accent (solid light-warning, opaque on any header) */
#kt_timer_worker .timer-pill.timer-break {
  background-color: #fff8dd;
  border-color: rgba(246, 192, 0, 0.5);
}

#kt_timer_worker .timer-pill.timer-break:hover,
#kt_timer_worker .timer-pill.timer-break:focus {
  background-color: #fbf0c7;
}

#kt_timer_worker .timer-pill.timer-break i.ki-duotone {
  color: var(--bs-warning, #f6c000);
}

/* Stopped state with an unfinished service — neutral solid chrome so the
   "Nedokončený servis" label stays readable on the dark overview header too */
#kt_timer_worker .timer-pill.timer-stopped {
  background-color: #f1f1f4;
  border-color: #dbdfe9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#kt_timer_worker .timer-pill.timer-stopped:hover,
#kt_timer_worker .timer-pill.timer-stopped:focus {
  background-color: #e9e9ed;
}

#kt_timer_worker .timer-pill.timer-stopped i.ki-duotone {
  color: var(--bs-warning, #f6c000);
}

/* Modal — running timer display */
#modalTimerDisplay {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}