style.css

/* Custom styles that complement Tailwind */
.document-row {
    @apply grid grid-cols-12 gap-4 p-4 border-b border-gray-100 hover:bg-blue-50 transition-colors cursor-pointer;
}
.document-row:nth-child(even) {
    @apply bg-gray-50;
}
.document-details {
    @apply col-span-12 mt-3 pt-3 border-t border-dashed border-gray-200 hidden bg-gray-50 p-4 rounded;
}
.document-row.expanded .document-details {
    @apply block;
}

.status-indicator {
    @apply w-3 h-3 rounded-full inline-block mr-2;
}

.status-indicator.normal {
    @apply bg-green-500;
}

.status-indicator.warning {
    @apply bg-amber-500;
}

.status-indicator.danger {
    @apply bg-red-500;
}

.status-indicator.expired {
    @apply bg-red-600 animate-pulse;
}

.notification.error {
    @apply bg-red-600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .document-header {
        @apply hidden;
    }
    
    .document-row {
        @apply grid-cols-1 gap-2 p-4;
    }
    
    .document-row > div:not(:first-child) {
        @apply mt-2;
    }
    
    .row-actions {
        @apply mt-3 justify-end;
    }
}