/* Custom styles for Sarnies Inventory Dashboard */

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

/* DataTables Custom Styling - Enhanced for modern design */
.dataTables_wrapper {
    font-family: inherit;
}

.dataTables_filter input {
    @apply border border-gray-300 rounded-md px-3 py-2 ml-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all;
}

.dataTables_length select {
    @apply border border-gray-300 rounded-md px-3 py-2 mr-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all;
}

/* DataTables pagination styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    @apply px-3 py-1 mx-1 rounded-md border border-gray-300 hover:bg-blue-50 hover:border-blue-400 transition-all;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    @apply opacity-50 cursor-not-allowed hover:bg-transparent;
}

/* Note: Table styling now controlled by components.css for consistency */
/* Keeping minimal DataTables-specific overrides only */

/* Fix for white/invisible text issue in DataTables */
table.dataTable tbody td,
table.dataTable tbody th {
    color: #1f2937 !important;  /* gray-900 */
}

table.dataTable thead th {
    color: #1f2937 !important;  /* gray-900 */
}

/* Fix for dark mode text visibility - Only apply in dark mode */
@media (prefers-color-scheme: dark) {
    /* Filters */
    .filter-label,
    .filters-section label,
    input[type="text"],
    input[type="date"],
    select,
    .filter-input {
        color: #1f2937 !important;  /* gray-900 */
    }

    /* KPI Cards */
    .kpi-card,
    .kpi-card-enhanced,
    .kpi-card-compact,
    .kpi-card-label,
    .kpi-card-value {
        color: #1f2937 !important;  /* gray-900 */
    }

    /* General text elements */
    h1, h2, h3, h4, h5, h6,
    p, span, div, label,
    .text-gray-800,
    .text-gray-900 {
        color: #1f2937 !important;  /* gray-900 */
    }
}

/* Chart containers */
canvas {
    max-height: 400px;
}

/* Loading spinner */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3b82f6;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

.badge-ok {
    @apply bg-green-100 text-green-800;
}

.badge-low {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-critical {
    @apply bg-orange-100 text-orange-800;
}

.badge-out {
    @apply bg-red-100 text-red-800;
}

/* Filters */
.filter-container {
    @apply bg-white rounded-lg shadow p-4 mb-6;
}

.filter-group {
    @apply mb-4;
}

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

.filter-input {
    @apply w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.filter-button {
    @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors;
}

/* Cards */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

.card-title {
    @apply text-lg font-semibold text-gray-800;
}

.card-body {
    @apply p-6;
}

/* Responsive table wrapper */
.table-responsive {
    @apply overflow-x-auto;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }

    .kpi-card, .card {
        break-inside: avoid;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .kpi-card {
        @apply mb-4;
    }

    .nav-link {
        @apply text-sm px-2 py-1;
    }

    .nav-link i {
        display: none;
    }
}

/* Trend indicators */
.trend-indicator {
    @apply inline-flex items-center text-sm;
}

.trend-indicator.up {
    @apply text-green-600;
}

.trend-indicator.down {
    @apply text-red-600;
}

.trend-indicator i {
    @apply mr-1;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tooltips */
.tooltip {
    @apply absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded shadow-lg;
}

/* Alert boxes */
.alert {
    @apply px-4 py-3 rounded mb-4;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}