/* Custom styles that extend Tailwind - SPT Inventory Management Style Guide */

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

::-webkit-scrollbar-track {
    background: #f3f4f6; /* gray-100 */
}

::-webkit-scrollbar-thumb {
    background: #9ca3af; /* gray-400 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280; /* gray-500 */
}

/* HTMX Loading States */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Loading Spinner */
.spinner {
    border: 2px solid #f3f4f6;
    border-top-color: #3b82f6;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    animation: spin 0.6s linear infinite;
}

/* Button Loading State */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Focus visible states for accessibility */
.focus-visible:focus {
    outline: none;
    ring: 2px;
    ring-color: #3b82f6; /* primary-500 */
    ring-offset: 2px;
}

/* Utility: Code/Monospace styling for serial numbers, asset tags */
.text-code {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    background-color: #f3f4f6; /* gray-100 */
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

/* Status Badge Patterns */
.status-active {
    background-color: #f0fdf4; /* success-50 */
    color: #15803d; /* success-700 */
    border-color: #bbf7d0; /* success-200 */
}

.status-storage {
    background-color: #f9fafb; /* gray-50 */
    color: #374151; /* gray-700 */
    border-color: #e5e7eb; /* gray-200 */
}

.status-repair {
    background-color: #fffbeb; /* warning-50 */
    color: #b45309; /* warning-700 */
    border-color: #fde68a; /* warning-200 */
}

.status-retired {
    background-color: #fef2f2; /* error-50 */
    color: #b91c1c; /* error-700 */
    border-color: #fecaca; /* error-200 */
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}