@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* { font-family: 'Inter', sans-serif; }

/* Sidebar Link Styling */
.sidebar-link {
    transition: all 0.2s ease;
    border-right: 3px solid transparent;
}
.sidebar-link:hover {
    background: rgba(59, 130, 246, 0.1);
}
.sidebar-link.active {
    background: rgba(59, 130, 246, 0.15);
    border-right: 3px solid #3b82f6;
    color: #3b82f6;
}
.dark .sidebar-link.active {
    color: #60a5fa;
    border-right-color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Chart Animations */
.chart-bar {
    transition: height 0.5s ease;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide In Animation */
.slide-in {
    animation: slideIn 0.3s ease forwards;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Toast Animation */
.toast-enter {
    animation: toastEnter 0.3s ease forwards;
}
@keyframes toastEnter {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
.toast-exit {
    animation: toastExit 0.3s ease forwards;
}
@keyframes toastExit {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* Modal Backdrop */
.modal-backdrop {
    animation: modalFadeIn 0.2s ease forwards;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content {
    animation: modalSlideIn 0.2s ease forwards;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}
.dark .skeleton {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Form Input Focus */
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Button Press Effect */
.btn-press:active {
    transform: scale(0.97);
}

/* Status Badge Pulse */
.status-pulse {
    animation: statusPulse 2s infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Invoice Preview Paper */
.invoice-preview {
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Mobile Sidebar Overlay */
.mobile-overlay {
    animation: overlayFadeIn 0.2s ease forwards;
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Print Styles */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    body { background: white !important; }
}

/* Dark Mode Specific Overrides */
.dark .invoice-preview {
    background: #1e293b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Dropdown Menu */
.dropdown-menu {
    animation: dropdownIn 0.15s ease forwards;
}
@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Table Row Hover */
.table-row-hover {
    transition: background-color 0.15s ease;
}
.table-row-hover:hover {
    background-color: rgba(59, 130, 246, 0.04);
}
.dark .table-row-hover:hover {
    background-color: rgba(96, 165, 250, 0.06);
}

/* Tooltip */
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1e293b;
    color: white;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
    margin-bottom: 4px;
}
.dark [data-tooltip]:hover::after {
    background: #475569;
}

/* Page Transition */
.page-transition {
    animation: pageTransition 0.3s ease forwards;
}
@keyframes pageTransition {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}