/**
 * Custom Styles
 * Location: /assets/css/custom.css
 * Supplementary styles beyond Tailwind CDN utilities.
 */

/* Loading Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--brand-color, #3b82f6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.dark .spinner {
    border-color: #374151;
    border-top-color: var(--brand-color, #3b82f6);
}

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

/* Toast Animations */
.toast-enter {
    animation: toastIn 0.3s ease-out forwards;
}

.toast-exit {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* Table hover */
.table-row-hover:hover {
    background-color: rgba(var(--brand-rgb, 59, 130, 246), 0.04);
}

.dark .table-row-hover:hover {
    background-color: rgba(var(--brand-rgb, 59, 130, 246), 0.08);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

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

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

/* Print styles */
@media print {
    #sidebar, header, .no-print, #toast-container, #loading-overlay, #confirm-modal {
        display: none !important;
    }

    main {
        padding: 0 !important;
        overflow: visible !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .print-only {
        display: block !important;
    }
}

.print-only {
    display: none;
}

/* Modal backdrop blur */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Status badge dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Empty state illustration */
.empty-state svg {
    opacity: 0.4;
}

/* Form focus ring consistency */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Sidebar transition on mobile */
@media (max-width: 1023px) {
    #sidebar.open {
        transform: translateX(0);
    }
}

/* Card hover effect */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.dark .card-hover:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Notification bell ring */
@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
}

.notification-bell-ring svg {
    animation: bellRing 0.9s ease-in-out;
    transform-origin: top center;
}