/* Main CSS for timeset */

:root {
    --primary-color: #4f46e5;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
}

/* Dark mode support */
.dark {
    color-scheme: dark;
}

/* Loading spinner */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Table styles */
.table-container {
    overflow-x: auto;
}

/* Status badges */
.status-badge {
    @apply px-2 py-1 text-xs rounded-full;
}

.status-active {
    @apply bg-green-100 text-green-800;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800;
}

.status-inactive {
    @apply bg-gray-100 text-gray-800;
}

/* Card styles */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow p-6;
}

/* Form styles */
.form-group {
    @apply mb-4;
}

.form-group label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.form-group input,
.form-group select,
.form-group textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500;
}

/* Button styles */
.btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors;
}

.btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}