/* Auto Repair Shop Management System - Enterprise-Grade Styles */
/* Following AI Guidelines: No inline CSS, Tailwind CSS primary, minimal custom code */

/* ===========================================
   IMPORT DEPENDENCIES
   =========================================== */

/* Import component styles */
@import 'themes.css';
@import 'components.css';

/* ===========================================
   GLOBAL STYLES
   =========================================== */

/* Root font size configuration */
html {
    font-size: 14px; /* Base font size - can be overridden by user settings */
}

/* Body defaults with theme support */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content area */
main {
    flex: 1;
}

/* ===========================================
   ENHANCED LAYOUT COMPONENTS
   =========================================== */

/* Container improvements */
.container {
    @apply mx-auto px-4 sm:px-6 lg:px-8;
    max-width: 1280px;
}

/* Grid system enhancements */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

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

/* Form enhancements beyond base components */
.form-section {
    @apply space-y-6 mb-8;
}

.form-section-title {
    @apply text-lg font-medium pb-2 border-b;
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

.form-row {
    @apply grid gap-4;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.form-actions {
    @apply flex flex-col sm:flex-row gap-3 sm:justify-end pt-6 border-t;
    border-color: var(--border-secondary);
}

/* File upload zone */
.upload-zone {
    @apply border-2 border-dashed rounded-lg p-8 text-center transition-colors;
    border-color: var(--border-primary);
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* ===========================================
   DATA VISUALIZATION COMPONENTS
   =========================================== */

/* Metrics cards */
.metric-card {
    @apply p-6 rounded-lg border transition-all duration-200;
    background-color: var(--bg-primary);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

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

.metric-value {
    @apply text-2xl font-bold;
    color: var(--text-primary);
}

.metric-label {
    @apply text-sm font-medium;
    color: var(--text-secondary);
}

.metric-change {
    @apply text-xs font-medium;
}

.metric-change.positive {
    color: var(--color-success);
}

.metric-change.negative {
    color: var(--color-danger);
}

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

/* Responsive table wrapper */
.table-responsive {
    @apply overflow-x-auto shadow-sm;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
}

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

.table-enhanced thead {
    background-color: var(--bg-secondary);
}

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

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

.table-enhanced tbody tr {
    @apply transition-colors duration-150;
}

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

/* Sortable table headers */
.table-header-sortable {
    @apply cursor-pointer hover:bg-opacity-80 transition-colors;
}

.table-header-sortable:hover {
    color: var(--text-primary);
}

/* ===========================================
   STATUS AND PRIORITY INDICATORS
   =========================================== */

/* Enhanced status badges with better theming */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* Job status indicators */
.status-received {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

.status-diagnosed {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200;
}

.status-approved {
    @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200;
}

.status-in-progress {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-completed {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-delivered {
    @apply bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200;
}

.status-cancelled {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

/* Priority indicators */
.priority-low {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}

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

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

.priority-urgent {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

/* ===========================================
   TIMELINE COMPONENTS
   =========================================== */

.timeline {
    @apply relative;
}

.timeline::before {
    content: '';
    @apply absolute left-4 top-0 bottom-0 w-0.5;
    background-color: var(--border-primary);
}

.timeline-item {
    @apply relative flex items-start space-x-3 pb-6;
}

.timeline-item:last-child {
    @apply pb-0;
}

.timeline-marker {
    @apply relative z-10 flex items-center justify-center w-8 h-8 rounded-full;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-primary);
}

.timeline-marker.completed {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.timeline-marker.current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.timeline-content {
    @apply min-w-0 flex-1;
}

.timeline-title {
    @apply text-sm font-medium;
    color: var(--text-primary);
}

.timeline-description {
    @apply text-sm mt-1;
    color: var(--text-secondary);
}

.timeline-time {
    @apply text-xs;
    color: var(--text-tertiary);
}

/* ===========================================
   NAVIGATION ENHANCEMENTS
   =========================================== */

/* Breadcrumb improvements */
.breadcrumb {
    @apply flex items-center space-x-2 text-sm;
    color: var(--text-secondary);
}

.breadcrumb-item {
    @apply flex items-center;
}

.breadcrumb-item:not(:last-child)::after {
    content: '›';
    @apply ml-2 text-gray-400;
}

.breadcrumb-link {
    @apply hover:underline transition-colors;
    color: var(--color-primary);
}

.breadcrumb-current {
    @apply font-medium;
    color: var(--text-primary);
}

/* ===========================================
   SEARCH AND FILTER COMPONENTS
   =========================================== */

.search-container {
    @apply relative;
}

.search-input {
    @apply form-input pl-10 pr-4;
}

.search-icon {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5;
    color: var(--text-tertiary);
}

.search-results {
    @apply absolute z-50 w-full mt-1 bg-white rounded-md shadow-lg border max-h-60 overflow-auto;
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-lg);
}

.search-result-item {
    @apply px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer border-b border-gray-100 dark:border-gray-600 last:border-b-0;
    color: var(--text-primary);
}

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

/* Filter bar */
.filter-bar {
    @apply flex flex-wrap items-center gap-4 p-4 border rounded-lg;
    background-color: var(--bg-secondary);
    border-color: var(--border-secondary);
}

/* ===========================================
   DASHBOARD COMPONENTS
   =========================================== */

.dashboard-grid {
    @apply grid gap-6;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.widget {
    @apply card p-6;
}

.widget-header {
    @apply flex items-center justify-between mb-4;
}

.widget-title {
    @apply text-lg font-medium;
    color: var(--text-primary);
}

.widget-content {
    @apply space-y-4;
}

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

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

/* Skip links */
.skip-link {
    @apply sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2;
    @apply z-50 px-4 py-2 rounded-md;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

/* ===========================================
   ANIMATIONS AND TRANSITIONS
   =========================================== */

/* Smooth transitions for theme changes */
.theme-transition {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Loading states */
.loading-skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide up animation */
.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================
   RESPONSIVE DESIGN IMPROVEMENTS
   =========================================== */

/* Mobile-first responsive utilities */
@media (max-width: 640px) {
    .mobile-stack {
        @apply flex-col;
    }
    
    .mobile-full {
        @apply w-full;
    }
    
    .mobile-hidden {
        @apply hidden;
    }
    
    .mobile-text-center {
        @apply text-center;
    }
    
    .mobile-p-4 {
        @apply p-4;
    }
    
    html {
        font-size: 13px; /* Slightly smaller on mobile */
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1023px) {
    html {
        font-size: 14px;
    }
}

/* Desktop optimizations */
@media (min-width: 1024px) {
    html {
        font-size: 15px; /* Slightly larger on desktop */
    }
    
    .desktop-grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .desktop-grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===========================================
   PRINT OPTIMIZATIONS
   =========================================== */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: black !important;
        background: white !important;
    }
    
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    .no-print,
    .btn-primary,
    .btn-secondary,
    button,
    [onclick],
    nav,
    .modal-backdrop {
        display: none !important;
    }
    
    .table-responsive {
        border: 1px solid #ccc;
    }
    
    .status-badge {
        border: 1px solid #333;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* ===========================================
   REDUCED MOTION SUPPORT
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    .theme-transition,
    .fade-in,
    .slide-up,
    .card-hover,
    .metric-card,
    .timeline-marker {
        animation: none !important;
        transition: none !important;
    }
    
    .loading-skeleton {
        animation: none;
        opacity: 0.5;
    }
}

/* ===========================================
   HIGH CONTRAST MODE SUPPORT
   =========================================== */

@media (prefers-contrast: high) {
    .form-input,
    .card,
    .table-responsive {
        border-width: 2px !important;
    }
    
    .btn-primary,
    .btn-secondary {
        border-width: 2px !important;
        font-weight: 600 !important;
    }
    
    .status-badge {
        border: 2px solid;
        font-weight: 600;
    }
}