/* Responsive styles */

/* Mobile first approach */
@media (max-width: 640px) {
    /* Login section */
    #login-section {
        padding: 16px;
    }
    
    /* Dashboard grid */
    #assets-grid {
        grid-template-columns: 1fr;
    }
    
    /* Table responsive */
    .table-responsive {
        font-size: 12px;
    }
    
    .table-responsive th,
    .table-responsive td {
        padding: 8px 4px;
    }
    
    /* Modal content */
    .modal-content {
        margin: 16px;
        max-height: calc(100vh - 32px);
    }
    
    /* Chart container */
    .chart-container {
        height: 300px;
    }
    
    /* Navigation */
    nav .flex.items-center {
        flex-direction: column;
        align-items: flex-start;
    }
    
    nav .flex.items-center.space-x-4 {
        margin-top: 8px;
        width: 100%;
        justify-content: space-between;
    }
    
    /* Forms */
    .form-input,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Buttons */
    .btn {
        padding: 12px 16px;
        font-size: 16px;
    }
    
    /* Cards */
    .asset-card {
        padding: 16px;
    }
    
    /* Tables */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Typography */
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    
    .text-2xl { font-size: 20px; }
    .text-3xl { font-size: 24px; }
    
    /* Layout utilities */
    .px-4 { padding-left: 16px; padding-right: 16px; }
    .py-4 { padding-top: 16px; padding-bottom: 16px; }
    
    .mx-2 { margin-left: 8px; margin-right: 8px; }
    .my-2 { margin-top: 8px; margin-bottom: 8px; }
    
    /* Grid adjustments */
    .grid-cols-1 { grid-template-columns: 1fr; }
    .grid-cols-2 { grid-template-columns: 1fr; }
    .grid-cols-3 { grid-template-columns: 1fr; }
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    
    /* Flex adjustments */
    .flex-col {
        flex-direction: column;
    }
    
    .flex-col > * {
        margin-bottom: 8px;
    }
    
    .flex-col > *:last-child {
        margin-bottom: 0;
    }
    
    /* Space adjustments */
    .space-x-4 > * + * {
        margin-left: 0;
        margin-top: 8px;
    }
    
    /* Header adjustments */
    header .flex.justify-between {
        flex-direction: column;
        align-items: flex-start;
    }
    
    header .flex.space-x-4 {
        margin-top: 8px;
        width: 100%;
        justify-content: space-between;
    }
    
    /* Toast notifications */
    .toast {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
    
    /* Loading spinner */
    .loading-spinner {
        width: 16px;
        height: 16px;
    }
    
    /* Form group */
    .form-group {
        margin-bottom: 12px;
    }
    
    /* Modal */
    .modal-overlay {
        padding: 8px;
    }
    
    /* Chart controls */
    .chart-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .chart-controls > * {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* Tablet styles */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Dashboard grid */
    #assets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Chart container */
    .chart-container {
        height: 350px;
    }
    
    /* Tables */
    .table-responsive {
        font-size: 13px;
    }
    
    /* Modal content */
    .modal-content {
        max-width: 80vw;
    }
    
    /* Grid adjustments */
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
    
    /* Space adjustments */
    .px-6 { padding-left: 20px; padding-right: 20px; }
    .py-6 { padding-top: 20px; padding-bottom: 20px; }
    
    /* Typography */
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    
    .text-2xl { font-size: 22px; }
    .text-3xl { font-size: 28px; }
}

/* Desktop styles */
@media (min-width: 1025px) {
    /* Dashboard grid */
    #assets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Chart container */
    .chart-container {
        height: 400px;
    }
    
    /* Modal content */
    .modal-content {
        max-width: 70vw;
    }
    
    /* Grid adjustments */
    .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    
    /* Typography */
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    
    .text-2xl { font-size: 24px; }
    .text-3xl { font-size: 32px; }
}

/* Ultra-wide screens */
@media (min-width: 1536px) {
    /* Dashboard grid */
    #assets-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Chart container */
    .chart-container {
        height: 450px;
    }
    
    /* Container max-width */
    .max-w-7xl {
        max-width: 90rem;
    }
    
    /* Grid adjustments */
    .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    
    /* Typography */
    h1 { font-size: 36px; }
    h2 { font-size: 32px; }
    h3 { font-size: 28px; }
    
    .text-2xl { font-size: 28px; }
    .text-3xl { font-size: 36px; }
}

/* Print styles */
@media print {
    /* Hide navigation and buttons */
    nav, .btn, .modal-overlay, .toast {
        display: none !important;
    }
    
    /* Make content full width */
    .max-w-7xl {
        max-width: 100% !important;
    }
    
    /* Remove shadows and backgrounds */
    .shadow-md, .shadow-lg, .shadow-sm {
        box-shadow: none !important;
    }
    
    .bg-gray-50, .bg-gray-100, .bg-gray-200 {
        background-color: white !important;
    }
    
    /* Add borders to tables */
    table {
        border: 1px solid #000 !important;
    }
    
    th, td {
        border: 1px solid #ccc !important;
        padding: 8px !important;
    }
    
    /* Ensure text is black */
    body, h1, h2, h3, h4, h5, h6, p, span, div {
        color: #000 !important;
    }
    
    /* Page breaks */
    .page-break {
        page-break-before: always;
    }
    
    .no-print {
        display: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .text-gray-500 { color: #000; }
    .text-gray-600 { color: #000; }
    .text-gray-400 { color: #000; }
    
    .bg-gray-50 { background-color: #fff; }
    .bg-gray-100 { background-color: #fff; }
    
    .border-gray-200 { border-color: #000; }
    .border-gray-300 { border-color: #000; }
    
    .shadow-sm, .shadow, .shadow-md, .shadow-lg {
        box-shadow: 0 0 0 1px #000;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading-spinner {
        animation: none;
        border-top-color: #3b82f6;
    }
    
    .fade-in, .slide-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .toast {
        transition: none;
    }
    
    .asset-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #111827;
        color: #f3f4f6;
    }
    
    .bg-white {
        background-color: #1f2937;
        color: #f3f4f6;
    }
    
    .bg-gray-50 {
        background-color: #111827;
    }
    
    .bg-gray-100 {
        background-color: #1f2937;
    }
    
    .text-gray-900 {
        color: #f9fafb;
    }
    
    .text-gray-700 {
        color: #d1d5db;
    }
    
    .text-gray-600 {
        color: #9ca3af;
    }
    
    .border-gray-200 {
        border-color: #374151;
    }
    
    .border-gray-300 {
        border-color: #4b5563;
    }
    
    .shadow-md, .shadow-lg, .shadow-sm {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
    
    .form-input, .form-select {
        background-color: #374151;
        border-color: #4b5563;
        color: #f3f4f6;
    }
    
    .form-input:focus, .form-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }
    
    .modal-content {
        background-color: #1f2937;
        color: #f3f4f6;
    }
    
    .toast {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}