/* Reusable UI Components for Auto Repair Shop Management System */
/* Following AI Guidelines - No inline CSS, modular, reusable components */

/* ===========================================
   BUTTON COMPONENTS
   =========================================== */

/* Primary Button */
.btn-primary {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2 text-sm font-medium;
    @apply border border-transparent rounded-md;
    @apply text-white shadow-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply transition-all duration-200;
    background-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:focus {
    ring-color: var(--color-primary);
}

.btn-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
    background-color: var(--color-secondary);
}

/* Secondary Button */
.btn-secondary {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2 text-sm font-medium;
    @apply border rounded-md shadow-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply transition-all duration-200;
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-secondary:focus {
    ring-color: var(--color-primary);
}

/* Danger Button */
.btn-danger {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2 text-sm font-medium;
    @apply border border-transparent rounded-md;
    @apply text-white shadow-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply transition-all duration-200;
    background-color: var(--color-danger);
    box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
    background-color: #b91c1c;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-danger:focus {
    ring-color: var(--color-danger);
}

/* Success Button */
.btn-success {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2 text-sm font-medium;
    @apply border border-transparent rounded-md;
    @apply text-white shadow-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply transition-all duration-200;
    background-color: var(--color-success);
    box-shadow: var(--shadow-sm);
}

.btn-success:hover {
    background-color: #047857;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-success:focus {
    ring-color: var(--color-success);
}

/* Icon Button */
.btn-icon {
    @apply p-2 rounded-md;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply transition-colors duration-200;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

.btn-icon:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ===========================================
   FORM COMPONENTS
   =========================================== */

/* Form Input */
.form-input {
    @apply w-full px-3 py-2 text-sm;
    @apply border rounded-md shadow-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-0;
    @apply transition-colors duration-200;
    @apply placeholder-gray-400 dark:placeholder-gray-500;
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.form-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.form-input:disabled {
    @apply cursor-not-allowed opacity-50;
    background-color: var(--bg-tertiary);
}

/* Form Input Error State */
.form-input.error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

/* Form Input Success State */
.form-input.success {
    border-color: var(--color-success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

/* Form Label */
.form-label {
    @apply block text-sm font-medium mb-1;
    color: var(--text-secondary);
}

.form-label.required::after {
    content: ' *';
    color: var(--color-danger);
}

/* Form Group */
.form-group {
    @apply space-y-1;
}

/* Form Error Message */
.form-error {
    @apply text-xs mt-1;
    color: var(--color-danger);
}

/* Form Help Text */
.form-help {
    @apply text-xs mt-1;
    color: var(--text-tertiary);
}

/* ===========================================
   CARD COMPONENTS
   =========================================== */

/* Basic Card */
.card {
    @apply rounded-lg border shadow-sm overflow-hidden;
    background-color: var(--bg-primary);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

/* Card with hover effect */
.card-hover {
    @apply transition-all duration-200 cursor-pointer;
}

.card-hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Card Header */
.card-header {
    @apply px-6 py-4 border-b;
    background-color: var(--bg-secondary);
    border-color: var(--border-secondary);
}

/* Card Body */
.card-body {
    @apply p-6;
}

/* Card Footer */
.card-footer {
    @apply px-6 py-4 border-t;
    background-color: var(--bg-secondary);
    border-color: var(--border-secondary);
}

/* ===========================================
   ALERT COMPONENTS
   =========================================== */

/* Base Alert */
.alert {
    @apply p-4 rounded-md border-l-4;
    @apply flex items-start space-x-3;
}

/* Success Alert */
.alert-success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

/* Error Alert */
.alert-error {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

/* Warning Alert */
.alert-warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

/* Info Alert */
.alert-info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info-text);
}

/* ===========================================
   BADGE COMPONENTS
   =========================================== */

/* Base Badge */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5;
    @apply text-xs font-medium rounded-full;
}

/* Status Badges */
.badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.badge-error {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

.badge-neutral {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}

/* ===========================================
   TABLE COMPONENTS
   =========================================== */

/* Table Container */
.table-container {
    @apply overflow-x-auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
}

/* Table */
.table {
    @apply min-w-full divide-y;
    divide-color: var(--border-secondary);
}

/* Table Header */
.table-header {
    background-color: var(--bg-secondary);
}

.table-header th {
    @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wider;
    color: var(--text-secondary);
}

/* Table Body */
.table-body {
    background-color: var(--bg-primary);
}

.table-body tr {
    @apply transition-colors duration-200;
}

.table-body tr:hover {
    background-color: var(--bg-secondary);
}

.table-body td {
    @apply px-6 py-4 whitespace-nowrap text-sm;
    color: var(--text-primary);
}

/* ===========================================
   MODAL COMPONENTS
   =========================================== */

/* Modal Backdrop */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
    @apply flex items-center justify-center p-4;
    @apply transition-opacity duration-300;
}

/* Modal Container */
.modal-container {
    @apply w-full max-w-md mx-auto;
    @apply rounded-lg shadow-xl;
    @apply transform transition-all duration-300;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-lg);
}

/* Modal Header */
.modal-header {
    @apply px-6 py-4 border-b;
    border-color: var(--border-secondary);
}

.modal-header h3 {
    @apply text-lg font-medium;
    color: var(--text-primary);
}

/* Modal Body */
.modal-body {
    @apply px-6 py-4;
}

/* Modal Footer */
.modal-footer {
    @apply px-6 py-4 border-t;
    @apply flex justify-end space-x-3;
    background-color: var(--bg-secondary);
    border-color: var(--border-secondary);
}

/* ===========================================
   DROPDOWN COMPONENTS
   =========================================== */

/* Dropdown Container */
.dropdown {
    @apply relative inline-block text-left;
}

/* Dropdown Menu */
.dropdown-menu {
    @apply absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50;
    @apply ring-1 ring-black ring-opacity-5;
    @apply transform transition-all duration-200;
    @apply origin-top-right scale-95 opacity-0;
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-lg);
}

.dropdown-menu.show {
    @apply scale-100 opacity-100;
}

/* Dropdown Item */
.dropdown-item {
    @apply block px-4 py-2 text-sm;
    @apply hover:bg-gray-100 dark:hover:bg-gray-700;
    @apply transition-colors duration-200;
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
}

/* ===========================================
   PROGRESS COMPONENTS
   =========================================== */

/* Progress Container */
.progress {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden;
    height: 0.5rem;
}

/* Progress Bar */
.progress-bar {
    @apply h-full rounded-full transition-all duration-300;
    background-color: var(--color-primary);
}

.progress-bar.success {
    background-color: var(--color-success);
}

.progress-bar.warning {
    background-color: var(--color-warning);
}

.progress-bar.danger {
    background-color: var(--color-danger);
}

/* ===========================================
   LOADING COMPONENTS
   =========================================== */

/* Spinner */
.spinner {
    @apply animate-spin rounded-full border-4 border-gray-300;
    border-top-color: var(--color-primary);
    width: 2rem;
    height: 2rem;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

.spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 6px;
}

/* Loading Overlay */
.loading-overlay {
    @apply absolute inset-0 bg-white bg-opacity-75;
    @apply flex items-center justify-center;
    @apply transition-opacity duration-200;
}

.dark .loading-overlay {
    @apply bg-gray-800 bg-opacity-75;
}

/* ===========================================
   COMPACT MODE MODIFICATIONS
   =========================================== */

.compact-mode .card {
    @apply p-4;
}

.compact-mode .card-body {
    @apply p-4;
}

.compact-mode .btn-primary,
.compact-mode .btn-secondary {
    @apply px-3 py-1 text-xs;
}

.compact-mode .form-input {
    @apply py-1 px-2 text-xs;
}

.compact-mode .table-body td {
    @apply px-4 py-2 text-xs;
}

.compact-mode .table-header th {
    @apply px-4 py-2 text-xs;
}

/* ===========================================
   ACCESSIBILITY IMPROVEMENTS
   =========================================== */

/* Screen Reader Only */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden;
    @apply whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
}

/* Focus Visible */
.focus-visible {
    @apply outline-none ring-2 ring-offset-2;
    ring-color: var(--color-primary);
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .btn-primary {
        @apply border-2 border-white;
    }
    
    .btn-secondary {
        @apply border-2;
        border-color: var(--text-primary);
    }
    
    .form-input {
        @apply border-2;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .card-hover,
    .btn-primary,
    .btn-secondary,
    .form-input,
    .dropdown-menu,
    .progress-bar,
    .spinner {
        @apply transition-none;
    }
    
    .spinner {
        @apply animate-none;
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-icon,
    button,
    [onclick] {
        @apply hidden;
    }
    
    .card {
        @apply border border-gray-300 shadow-none;
        break-inside: avoid;
    }
    
    .table-container {
        @apply border border-gray-300;
    }
    
    .modal-backdrop,
    .dropdown-menu,
    .loading-overlay {
        @apply hidden;
    }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Text utilities */
.text-themed {
    color: var(--text-primary);
}

.text-themed-secondary {
    color: var(--text-secondary);
}

.text-themed-tertiary {
    color: var(--text-tertiary);
}

/* Background utilities */
.bg-themed {
    background-color: var(--bg-primary);
}

.bg-themed-secondary {
    background-color: var(--bg-secondary);
}

.bg-themed-tertiary {
    background-color: var(--bg-tertiary);
}

/* Border utilities */
.border-themed {
    border-color: var(--border-primary);
}

.border-themed-secondary {
    border-color: var(--border-secondary);
}

/* Shadow utilities */
.shadow-themed-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-themed-md {
    box-shadow: var(--shadow-md);
}

.shadow-themed-lg {
    box-shadow: var(--shadow-lg);
}