/* Cursor pointer on all interactive elements */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
summary,
label[for] {
  cursor: pointer;
}

/* Card */
.card {
  @apply bg-white dark:bg-surface-dark rounded-md border border-black/10 dark:border-white/10;
}

/* Form Input */
.form-input {
  @apply w-full px-4 py-2 bg-white dark:bg-surface-dark border border-black/10 dark:border-white/10 rounded-md text-black/90 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50;
}

/* Form Input (compact, for table cells) */
.form-input-sm {
  @apply w-full px-2 py-1.5 text-sm bg-white dark:bg-surface-dark border border-black/10 dark:border-white/10 rounded text-black/90 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary/50;
}

/* Page Title */
.page-title {
  @apply text-2xl font-bold font-heading text-black/90 dark:text-white;
}

/* Breadcrumb */
.breadcrumb {
  @apply flex items-center gap-2 text-sm text-black/60 dark:text-white/60 mb-1;
}

/* Badge */
.badge {
  @apply inline-flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md min-w-[4.5rem];
}

/* Page Header Layout */
.page-header-layout {
  @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4;
}

/* Alert Error */
.alert-error {
  @apply p-4 bg-red-50 dark:bg-red-900/20 border-l-4 border-red-400 rounded;
}

/* Primary Button */
.btn-primary {
  @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors cursor-pointer;
}

/* Fix for submit buttons in dark mode */
.dark input[type="submit"].btn-primary,
.dark button[type="submit"].btn-primary {
  background-color: #1193d4 !important;
}

.dark input[type="submit"].btn-primary:hover,
.dark button[type="submit"].btn-primary:hover {
  background-color: rgba(17, 147, 212, 0.9) !important;
}

/* Secondary Button */
.btn-secondary {
  @apply px-4 py-2 text-black/60 dark:text-white/60 hover:text-black dark:hover:text-white border border-black/10 dark:border-white/10 rounded-md transition-colors;
}

/* Icon Button */
.icon-button {
  @apply p-2 text-black/60 dark:text-white/60 hover:text-primary hover:bg-primary/10 rounded-md transition-colors;
}

/* Card Header */
.card-header {
  @apply px-6 py-4 border-b border-black/10 dark:border-white/10;
}

/* Table styles */
.table-header-cell {
  @apply px-6 py-2 text-left text-xs font-semibold uppercase tracking-wider text-black/60 dark:text-white/60;
}

.table-row {
  @apply hover:bg-black/[0.02] dark:hover:bg-white/[0.05];
}

.table-cell {
  @apply px-6 py-2 text-sm text-black/90 dark:text-white;
}

.table-cell-secondary {
  @apply px-6 py-2 text-sm text-black/60 dark:text-white/60;
}

.table-actions {
  @apply flex items-center justify-end gap-2;
}

/* Badge variants */
.badge-success {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-md bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-700/30;
}

.badge-neutral {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-900/30 text-gray-700 dark:text-gray-400 border border-gray-200 dark:border-gray-700/30;
}

/* Danger Button (delete) */
.btn-danger {
  @apply p-2 text-black/60 dark:text-white/60 hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-md transition-colors;
}

/* Modal Overlay */
.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.5);
}

.modal-overlay.hidden {
  display: none;
}

/* Normalize select height to match text inputs */
select {
  @apply h-[42px];
}

/* Time tracking styles */
@keyframes timer-pulse {
  0%, 100% {
    border-color: rgb(34 197 94);
    background-color: rgb(240 253 244);
  }
  50% {
    border-color: rgb(22 163 74);
    background-color: rgb(220 252 231);
  }
}

@keyframes timer-pulse-dark {
  0%, 100% {
    border-color: rgb(34 197 94);
    background-color: rgb(34 197 94 / 0.1);
  }
  50% {
    border-color: rgb(22 163 74);
    background-color: rgb(34 197 94 / 0.15);
  }
}

.timer-running {
  @apply border-l-4;
  animation: timer-pulse 2s ease-in-out infinite;
}

.dark .timer-running {
  animation: timer-pulse-dark 2s ease-in-out infinite;
}

/* Timer spinning icon */
@keyframes timer-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.timer-spin {
  animation: timer-spin 3s linear infinite;
  transform-origin: center;
}

.time-cell {
  @apply w-16 px-2 py-1 text-center text-sm bg-transparent border border-transparent rounded
         hover:border-black/10 dark:hover:border-white/10
         focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none
         text-black/90 dark:text-white;
}

.time-cell::-webkit-inner-spin-button,
.time-cell::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.time-cell[type=number] {
  -moz-appearance: textfield;
}

.week-day-cell {
  @apply px-3 py-2 text-center rounded-md transition-colors;
}

.week-day-cell.is-selected {
  @apply bg-white dark:bg-surface-dark shadow-sm;
}

.week-day-cell.is-today {
  @apply text-primary font-medium;
}