/* Dark Mode Utility Classes for Timestampz */

/* Base Component Classes */
.dark-card {
    @apply bg-white rounded-lg shadow-lg p-6;
}

.dark-card.dark {
    @apply bg-gray-700;
}

.dark-heading {
    @apply text-2xl font-bold text-gray-800 mb-4;
}

.dark-heading.dark {
    @apply text-gray-100;
}

.dark-subheading {
    @apply text-lg font-semibold text-gray-800 mb-3;
}

.dark-subheading.dark {
    @apply text-gray-100;
}

.dark-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.dark-label.dark {
    @apply text-gray-300;
}

.dark-text {
    @apply text-gray-800;
}

.dark-text.dark {
    @apply text-gray-100;
}

.dark-text-secondary {
    @apply text-gray-600;
}

.dark-text-secondary.dark {
    @apply text-gray-300;
}

.dark-text-muted {
    @apply text-gray-500;
}

.dark-text-muted.dark {
    @apply text-gray-400;
}

/* Input Fields */
.dark-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900;
}

.dark-input.dark {
    @apply bg-gray-600 border-gray-500 text-gray-100 placeholder-gray-400;
}

.dark-input-date {
    @apply flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900;
}

.dark-input-date.dark {
    @apply bg-gray-600 border-gray-500 text-gray-100;
}

.dark-input-time {
    @apply w-32 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900;
}

.dark-input-time.dark {
    @apply bg-gray-600 border-gray-500 text-gray-100;
}

/* Buttons */
.dark-button-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors;
}

.dark-button-secondary {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200 px-4 py-2 rounded-lg transition-colors;
}

.dark-button-secondary.dark {
    @apply bg-gray-600 text-gray-200 hover:bg-gray-500;
}

.dark-button-success {
    @apply bg-green-100 text-green-700 hover:bg-green-200 px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.dark-button-success.dark {
    @apply bg-green-800 text-green-200 hover:bg-green-700;
}

.dark-button-danger {
    @apply text-red-600 hover:text-red-800;
}

.dark-button-danger.dark {
    @apply text-red-400 hover:text-red-300;
}

.dark-button-link {
    @apply text-blue-600 hover:text-blue-800;
}

.dark-button-link.dark {
    @apply text-blue-400 hover:text-blue-300;
}

/* Backgrounds */
.dark-bg-section {
    @apply bg-gray-50 rounded-lg p-4;
}

.dark-bg-section.dark {
    @apply bg-gray-600;
}

.dark-bg-card {
    @apply bg-gray-50 rounded-lg p-4;
}

.dark-bg-card.dark {
    @apply bg-gray-600;
}

/* Borders */
.dark-border {
    @apply border-gray-200;
}

.dark-border.dark {
    @apply border-gray-600;
}

.dark-border-light {
    @apply border-gray-100;
}

.dark-border-light.dark {
    @apply border-gray-700;
}

/* Table Styles */
.dark-table-header {
    @apply text-left py-3 px-4 font-medium text-gray-700 bg-gray-50;
}

.dark-table-header.dark {
    @apply text-gray-300 bg-gray-600;
}

.dark-table-cell {
    @apply py-3 px-4 text-sm text-gray-800;
}

.dark-table-cell.dark {
    @apply text-gray-200;
}

.dark-table-row {
    @apply border-b border-gray-100 hover:bg-gray-50;
}

.dark-table-row.dark {
    @apply border-gray-600 hover:bg-gray-600;
}

/* Navigation */
.dark-nav-button {
    @apply flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200;
}

.dark-nav-button.dark {
    @apply bg-gray-600 text-gray-100 hover:bg-gray-500;
}

.dark-nav-button.active {
    @apply bg-blue-600 text-white;
}

/* Toggle Buttons */
.dark-toggle-group {
    @apply flex bg-gray-100 rounded-lg p-1;
}

.dark-toggle-group.dark {
    @apply bg-gray-600;
}

.dark-toggle-button {
    @apply px-4 py-2 rounded-md text-sm font-medium transition-colors text-gray-600 hover:text-gray-800;
}

.dark-toggle-button.dark {
    @apply text-gray-300 hover:text-gray-100;
}

.dark-toggle-button.active {
    @apply bg-white text-gray-800 shadow-sm;
}

.dark-toggle-button.active.dark {
    @apply bg-gray-700 text-gray-100;
}

/* Search Results */
.dark-search-result {
    @apply px-3 py-2 cursor-pointer flex justify-between items-center hover:bg-blue-50;
}

.dark-search-result.dark {
    @apply hover:bg-gray-600;
}

.dark-search-result.selected {
    @apply bg-gray-100 text-gray-400;
}

.dark-search-result.selected.dark {
    @apply bg-gray-800 text-gray-500;
}

/* Dropdown */
.dark-dropdown {
    @apply absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto;
}

.dark-dropdown.dark {
    @apply bg-gray-700 border-gray-600;
}

/* Copy Buttons */
.dark-copy-button {
    @apply text-blue-600 hover:text-blue-800 text-xs;
}

.dark-copy-button.dark {
    @apply text-blue-400 hover:text-blue-300;
}

/* Icon Colors */
.dark-icon {
    @apply text-gray-400;
}

.dark-icon.dark {
    @apply text-gray-500;
}

.dark-icon-favorite {
    @apply text-yellow-500;
}

.dark-icon-danger {
    @apply text-red-600 hover:text-red-800;
}

.dark-icon-danger.dark {
    @apply text-red-400 hover:text-red-300;
}

/* Utility Functions */
.dark-mode-apply {
    /* This class can be applied to any element to enable dark mode utilities */
}

/* Responsive Dark Mode */
@media (prefers-color-scheme: dark) {
    .dark-auto .dark-card {
        @apply bg-gray-700;
    }

    .dark-auto .dark-heading {
        @apply text-gray-100;
    }

    .dark-auto .dark-text {
        @apply text-gray-100;
    }

    .dark-auto .dark-input {
        @apply bg-gray-600 border-gray-500 text-gray-100 placeholder-gray-400;
    }

    /* Add more auto dark mode rules as needed */
}