/* ============================================================================
   Advanced Schedule Options Component Styles
   Iteration 60, Increment 4
   Follows shadcn-ui patterns with Tailwind CSS utility classes
   ============================================================================ */

/* Advanced Schedule Options Container */
.advanced-schedule-options {
    @apply rounded-lg border border-gray-200 bg-white shadow-sm transition-all duration-200;
}

/* ============================================================================
   Header Section (Collapsible)
   ============================================================================ */

.options-header {
    @apply flex cursor-pointer items-center justify-between p-4 transition-colors duration-200
           hover:bg-gray-50;
}

.options-header .header-content {
    @apply flex items-center gap-3;
}

.options-header .header-content i {
    @apply text-xl text-gray-500 transition-transform duration-200;
}

.options-header .header-content h5 {
    @apply text-base font-semibold text-gray-900;
}

.options-header .active-indicator {
    @apply flex items-center gap-2 rounded-full bg-green-100 px-3 py-1;
}

.options-header .active-indicator i {
    @apply text-sm text-green-600;
}

.options-header .active-indicator span {
    @apply text-xs font-medium text-green-700;
}

/* ============================================================================
   Content Section (Expandable)
   ============================================================================ */

.options-content {
    @apply space-y-6 border-t border-gray-200 p-6;
}

/* Form Groups */
.form-group,
.info-group {
    @apply space-y-2;
}

.form-label {
    @apply flex items-center gap-2 text-sm font-medium text-gray-700;
}

.form-label i {
    @apply text-base text-gray-500;
}

.optional-badge {
    @apply ml-auto rounded-full bg-gray-100 px-2 py-0.5 text-xs font-normal text-gray-600;
}

.help-text {
    @apply block text-xs text-gray-500;
}

/* Form Controls */
.form-control {
    @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;
}

.form-control.is-invalid {
    @apply border-red-500 focus:border-red-600 focus:ring-red-500;
}

/* ============================================================================
   Validation Errors
   ============================================================================ */

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

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

/* ============================================================================
   Info Display Sections
   ============================================================================ */

.info-display {
    @apply rounded-md border border-gray-200 bg-gray-50 p-4;
}

/* Next Execution Time */
.next-execution-time {
    @apply flex items-center gap-3 text-sm text-gray-900;
}

.next-execution-time i {
    @apply text-lg text-green-600;
}

.no-execution {
    @apply flex items-center gap-3 text-sm text-gray-500;
}

.no-execution i {
    @apply text-lg text-gray-400;
}

/* ============================================================================
   Occurrences Counter with Progress Bar
   ============================================================================ */

.occurrence-counter {
    @apply space-y-3;
}

.counter-text,
.counter-text-unlimited {
    @apply text-sm text-gray-900;
}

.counter-text strong,
.counter-text-unlimited strong {
    @apply font-semibold text-gray-900;
}

/* Progress Bar Container */
.progress-bar-container {
    @apply relative h-6 w-full overflow-hidden rounded-full bg-gray-200;
}

.progress-bar {
    @apply flex h-full items-center justify-center rounded-full bg-gradient-to-r from-green-500 via-yellow-500 to-red-500
           transition-all duration-500 ease-in-out;
}

/* Progress bar gradient based on completion percentage */
.progress-bar[style*="width: 0%"],
.progress-bar[style*="width: 1%"],
.progress-bar[style*="width: 2%"],
.progress-bar[style*="width: 3%"],
.progress-bar[style*="width: 4%"],
.progress-bar[style*="width: 5%"],
.progress-bar[style*="width: 6%"],
.progress-bar[style*="width: 7%"],
.progress-bar[style*="width: 8%"],
.progress-bar[style*="width: 9%"] {
    @apply from-green-500 to-green-600;
}

.progress-bar[style*="width: 1"],
.progress-bar[style*="width: 2"],
.progress-bar[style*="width: 3"],
.progress-bar[style*="width: 4"] {
    @apply from-green-500 to-green-600;
}

.progress-bar[style*="width: 5"],
.progress-bar[style*="width: 6"],
.progress-bar[style*="width: 7"] {
    @apply from-yellow-500 to-yellow-600;
}

.progress-bar[style*="width: 8"],
.progress-bar[style*="width: 9"],
.progress-bar[style*="width: 100"] {
    @apply from-red-500 to-red-600;
}

.progress-text {
    @apply text-xs font-semibold text-white;
}

/* Remaining Count */
.remaining-count {
    @apply text-xs text-gray-600;
}

/* ============================================================================
   Action Buttons
   ============================================================================ */

.action-buttons {
    @apply flex justify-end gap-3 border-t border-gray-200 pt-4;
}

.btn {
    @apply flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium
           transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-secondary {
    @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50
           focus:ring-gray-500;
}

.btn-clear {
    @apply hover:border-red-300 hover:bg-red-50 hover:text-red-700;
}

.btn:disabled {
    @apply cursor-not-allowed opacity-50 hover:bg-white hover:text-gray-700;
}

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

/* Mobile: Stack fields vertically */
@media (max-width: 640px) {
    .options-content {
        @apply p-4;
    }

    .action-buttons {
        @apply flex-col;
    }

    .btn {
        @apply w-full justify-center;
    }
}

/* Tablet and up: Keep horizontal layout */
@media (min-width: 641px) {
    .options-content {
        @apply grid grid-cols-1 gap-6;
    }
}

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

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

    .options-header {
        @apply hover:bg-gray-900;
    }

    .options-header .header-content h5 {
        @apply text-gray-100;
    }

    .options-header .header-content i {
        @apply text-gray-400;
    }

    .options-header .active-indicator {
        @apply bg-green-900 bg-opacity-30;
    }

    .options-header .active-indicator i {
        @apply text-green-400;
    }

    .options-header .active-indicator span {
        @apply text-green-300;
    }

    .options-content {
        @apply border-gray-700;
    }

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

    .form-label i {
        @apply text-gray-400;
    }

    .optional-badge {
        @apply bg-gray-700 text-gray-400;
    }

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

    .form-control {
        @apply border-gray-600 bg-gray-700 text-gray-100 hover:border-gray-500;
    }

    .info-display {
        @apply border-gray-700 bg-gray-900;
    }

    .next-execution-time {
        @apply text-gray-100;
    }

    .no-execution {
        @apply text-gray-400;
    }

    .counter-text,
    .counter-text-unlimited {
        @apply text-gray-100;
    }

    .progress-bar-container {
        @apply bg-gray-700;
    }

    .remaining-count {
        @apply text-gray-400;
    }

    .action-buttons {
        @apply border-gray-700;
    }

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

    .btn-clear {
        @apply hover:border-red-700 hover:bg-red-900 hover:bg-opacity-30 hover:text-red-300;
    }
}

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

/* Focus visible states for keyboard navigation */
.options-header:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

.form-control:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2;
}

.btn:focus-visible {
    @apply ring-2 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;
}

/* ============================================================================
   Animation for Expand/Collapse
   ============================================================================ */

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        max-height: 1000px;
    }
    to {
        opacity: 0;
        max-height: 0;
    }
}

.options-content {
    animation: slideDown 0.3s ease-in-out;
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
    .advanced-schedule-options {
        @apply border-gray-400 bg-white shadow-none;
    }

    .action-buttons {
        display: none;
    }

    .options-header {
        @apply cursor-default hover:bg-white;
    }

    .progress-bar {
        @apply print:bg-gray-400;
    }
}