/* ============================================================================
   Schedule Type Selector Component Styles
   Iteration 60, Increment 3
   Follows shadcn-ui patterns with Tailwind CSS utility classes
   ============================================================================ */

/* Schedule Type Selector Container */
.schedule-type-selector {
    @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm;
}

.schedule-type-selector .selector-header {
    @apply mb-4 flex items-center justify-between;
}

.schedule-type-selector .selector-header h5 {
    @apply text-lg font-semibold text-gray-900;
}

/* Schedule Type Dropdown */
.schedule-type-dropdown {
    @apply mb-6;
}

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

.schedule-type-dropdown select {
    @apply w-full rounded-md border border-gray-300 bg-white px-4 py-2.5 text-base
           text-gray-900 shadow-sm transition-colors duration-200
           hover:border-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

/* Config Message (for Continuous and Hourly) */
.config-message {
    @apply flex items-center gap-3 rounded-lg bg-blue-50 p-4 text-blue-800;
}

.config-message i {
    @apply text-xl text-blue-600;
}

.config-message span {
    @apply text-sm;
}

/* Config Fields Section */
.schedule-config-section {
    @apply mb-6 min-h-[120px];
}

.config-fields {
    @apply space-y-4;
}

.config-fields .form-group {
    @apply space-y-2;
}

.config-fields label {
    @apply block text-sm font-medium text-gray-700;
}

.config-fields input[type="time"],
.config-fields input[type="datetime-local"],
.config-fields select {
    @apply w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm
           text-gray-900 shadow-sm transition-colors duration-200
           hover:border-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

/* Weekly Config - Side by Side */
.weekly-config {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2;
}

/* Monthly Config - Side by Side */
.monthly-config {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2;
}

/* Monthly Weekday Config - Three Columns */
.monthly-weekday-config {
    @apply grid grid-cols-1 gap-4 md:grid-cols-3;
}

/* Validation Error */
.validation-error {
    @apply flex items-center gap-2 rounded-md bg-red-50 p-3 text-sm text-red-800;
}

.validation-error i {
    @apply text-red-600;
}

/* Warning Message (for monthly day warnings) */
.warning-message {
    @apply flex items-center gap-2 rounded-md bg-yellow-50 p-3 text-sm text-yellow-800;
}

.warning-message i {
    @apply text-yellow-600;
}

/* Preview Section */
.preview-section {
    @apply mt-6 space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-4;
}

.preview-label {
    @apply text-xs font-semibold uppercase tracking-wide text-gray-500;
}

.preview-text {
    @apply text-base font-medium text-gray-900;
}

.next-execution {
    @apply mt-2 text-sm text-gray-600;
}

.next-execution strong {
    @apply font-semibold text-gray-900;
}

/* ============================================================================
   Cron Builder Component Styles
   ============================================================================ */

.cron-builder {
    @apply space-y-4;
}

.cron-builder .builder-header {
    @apply flex items-center justify-between;
}

.cron-builder .builder-header h6 {
    @apply text-base font-semibold text-gray-900;
}

/* Mode Toggle Buttons */
.mode-toggle {
    @apply flex gap-1 rounded-md border border-gray-300 p-1;
}

.mode-toggle .btn {
    @apply rounded px-3 py-1 text-xs font-medium transition-colors duration-200;
}

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

.mode-toggle .btn-outline-secondary {
    @apply bg-transparent text-gray-700 hover:bg-gray-100;
}

/* Advanced Mode */
.advanced-mode {
    @apply space-y-3;
}

.input-with-validation {
    @apply relative;
}

.input-with-validation input {
    @apply w-full pr-10;
}

.validation-icon {
    @apply absolute right-3 top-1/2 -translate-y-1/2 text-xl;
}

.validation-icon.valid {
    @apply text-green-600;
}

.validation-icon.invalid {
    @apply text-red-600;
}

.input-with-validation input.is-valid {
    @apply border-green-500 focus:border-green-600 focus:ring-green-500;
}

.input-with-validation input.is-invalid {
    @apply border-red-500 focus:border-red-600 focus:ring-red-500;
}

/* Cron Help Text */
.cron-help {
    @apply rounded-md bg-gray-50 p-3;
}

.cron-help small {
    @apply text-xs text-gray-600;
}

.cron-help code {
    @apply rounded bg-gray-200 px-1.5 py-0.5 font-mono text-xs text-gray-800;
}

/* Visual Mode - Cron Field Grid */
.visual-mode {
    @apply space-y-4;
}

.cron-field-grid {
    @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5;
}

.cron-field {
    @apply space-y-2;
}

.cron-field label {
    @apply block text-sm font-medium text-gray-700;
}

.cron-field select {
    @apply w-full;
}

/* Built Expression Display */
.built-expression {
    @apply space-y-2;
}

.built-expression label {
    @apply block text-sm font-medium text-gray-700;
}

.expression-display {
    @apply relative flex items-center gap-3 rounded-md border p-3;
}

.expression-display.valid {
    @apply border-green-500 bg-green-50;
}

.expression-display.invalid {
    @apply border-gray-300 bg-gray-50;
}

.expression-display code {
    @apply flex-1 font-mono text-sm text-gray-900;
}

/* Example Buttons */
.example-buttons {
    @apply space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-4;
}

.example-buttons small {
    @apply block text-xs font-semibold uppercase tracking-wide text-gray-500;
}

.examples-grid {
    @apply mt-2 grid grid-cols-2 gap-2 md:grid-cols-3;
}

.examples-grid .btn {
    @apply justify-center rounded-md border border-gray-300 bg-white px-3 py-2
           text-xs font-medium text-gray-700 transition-colors duration-200
           hover:border-blue-500 hover:bg-blue-50 hover:text-blue-700
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

/* Next Executions Preview */
.next-executions {
    @apply space-y-2 rounded-lg border border-green-200 bg-green-50 p-4;
}

.next-executions label {
    @apply block text-sm font-semibold text-green-900;
}

.execution-list {
    @apply mt-2 space-y-1 pl-5;
}

.execution-list li {
    @apply text-sm text-green-800;
    list-style-type: disc;
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

/* Mobile: Stack all fields vertically */
@media (max-width: 640px) {
    .weekly-config,
    .monthly-config,
    .monthly-weekday-config {
        @apply grid-cols-1;
    }

    .cron-field-grid {
        @apply grid-cols-1;
    }

    .examples-grid {
        @apply grid-cols-1;
    }

    .mode-toggle {
        @apply flex-col;
    }

    .mode-toggle .btn {
        @apply w-full;
    }
}

/* Tablet: Two columns for most layouts */
@media (min-width: 641px) and (max-width: 1024px) {
    .cron-field-grid {
        @apply grid-cols-2;
    }
}

/* ============================================================================
   Dark Mode Support (Optional)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .schedule-type-selector {
        @apply border-gray-700 bg-gray-800;
    }

    .schedule-type-selector .selector-header h5 {
        @apply text-gray-100;
    }

    .schedule-type-dropdown label,
    .config-fields label {
        @apply text-gray-300;
    }

    .schedule-type-dropdown select,
    .config-fields input,
    .config-fields select {
        @apply border-gray-600 bg-gray-700 text-gray-100;
    }

    .config-message {
        @apply bg-blue-900 bg-opacity-30 text-blue-200;
    }

    .preview-section {
        @apply border-gray-700 bg-gray-900;
    }

    .preview-label {
        @apply text-gray-400;
    }

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

    .cron-builder .builder-header h6 {
        @apply text-gray-100;
    }

    .cron-help {
        @apply bg-gray-900;
    }

    .cron-help small {
        @apply text-gray-400;
    }

    .cron-help code {
        @apply bg-gray-700 text-gray-200;
    }

    .expression-display.valid {
        @apply bg-green-900 bg-opacity-30;
    }

    .example-buttons {
        @apply border-gray-700 bg-gray-900;
    }

    .examples-grid .btn {
        @apply border-gray-600 bg-gray-800 text-gray-300 hover:border-blue-500 hover:bg-blue-900 hover:text-blue-200;
    }

    .next-executions {
        @apply border-green-700 bg-green-900 bg-opacity-30;
    }

    .next-executions label {
        @apply text-green-200;
    }

    .execution-list li {
        @apply text-green-300;
    }
}

/* ============================================================================
   Accessibility Enhancements
   ============================================================================ */

/* Focus visible states for keyboard navigation */
.schedule-type-selector select:focus-visible,
.config-fields input:focus-visible,
.config-fields select:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Print styles */
@media print {
    .schedule-type-selector {
        @apply border-gray-400 bg-white shadow-none;
    }

    .mode-toggle,
    .example-buttons {
        display: none;
    }
}