* {
       scrollbar-width: thin;
       scrollbar-color: #94a3b8 transparent
   }

   ::-webkit-scrollbar {
       width: 6px;
       height: 6px
   }

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

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

   .dark ::-webkit-scrollbar-thumb {
       background: #475569
   }

   body {
       font-family: 'Inter', sans-serif
   }

   .font-jakarta {
       font-family: 'Plus Jakarta Sans', sans-serif
   }

   .sidebar-link {
       transition: all .2s ease
   }

   .sidebar-link:hover {
       background: rgba(59, 130, 246, 0.08)
   }

   .sidebar-link.active {
       background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
       color: #3b82f6;
       border-right: 3px solid #3b82f6
   }

   .dark .sidebar-link:hover {
       background: rgba(59, 130, 246, 0.15)
   }

   .dark .sidebar-link.active {
       background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1))
   }

   .kpi-card {
       transition: all .3s ease
   }

   .kpi-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15)
   }

   .dark .kpi-card:hover {
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4)
   }

   .status-badge {
       font-size: .7rem;
       padding: .2rem .6rem;
       border-radius: 9999px;
       font-weight: 600;
       white-space: nowrap
   }

   .toast-enter {
       animation: toastIn .4s ease
   }

   .toast-exit {
       animation: toastOut .3s ease forwards
   }

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

       to {
           transform: translateX(0);
           opacity: 1
       }
   }

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

       to {
           transform: translateX(100%);
           opacity: 0
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(16px)
       }

       to {
           opacity: 1;
           transform: translateY(0)
       }
   }

   .fade-in-up {
       animation: fadeInUp .5s ease forwards
   }

   .fade-in-up-d1 {
       animation-delay: .05s;
       opacity: 0
   }

   .fade-in-up-d2 {
       animation-delay: .1s;
       opacity: 0
   }

   .fade-in-up-d3 {
       animation-delay: .15s;
       opacity: 0
   }

   .fade-in-up-d4 {
       animation-delay: .2s;
       opacity: 0
   }

   .dropdown-panel {
       transform: scale(.95);
       opacity: 0;
       pointer-events: none;
       transition: all .2s ease
   }

   .dropdown-panel.open {
       transform: scale(1);
       opacity: 1;
       pointer-events: auto
   }

   .modal-overlay {
       opacity: 0;
       pointer-events: none;
       transition: opacity .3s ease
   }

   .modal-overlay.open {
       opacity: 1;
       pointer-events: auto
   }

   .modal-content {
       transform: scale(.95) translateY(10px);
       transition: transform .3s ease
   }

   .modal-overlay.open .modal-content {
       transform: scale(1) translateY(0)
   }

   @media(max-width:1023px) {
       .sidebar {
           transform: translateX(-100%);
           transition: transform .3s ease
       }

       .sidebar.open {
           transform: translateX(0)
       }
   }

   .overlay {
       opacity: 0;
       pointer-events: none;
       transition: opacity .3s ease
   }

   .overlay.open {
       opacity: 1;
       pointer-events: auto
   }

   .tab-btn {
       transition: all .2s ease;
       cursor: pointer
   }

   .tab-btn.active {
       background: white;
       color: #2563eb;
       box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
   }

   .dark .tab-btn.active {
       background: #334155;
       color: #60a5fa
   }

   .action-btn {
       transition: all .15s ease;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center
   }

   .action-btn:hover {
       transform: scale(1.1)
   }

   .checkbox-custom {
       appearance: none;
       width: 18px;
       height: 18px;
       border: 2px solid #cbd5e1;
       border-radius: 5px;
       cursor: pointer;
       transition: all .2s ease;
       position: relative
   }

   .checkbox-custom:checked {
       background: #3b82f6;
       border-color: #3b82f6
   }

   .checkbox-custom:checked::after {
       content: '✓';
       position: absolute;
       top: -1px;
       left: 3px;
       color: white;
       font-size: 12px;
       font-weight: 700
   }

   .dark .checkbox-custom {
       border-color: #475569
   }

   tr.selected-row {
       background: rgba(59, 130, 246, .05) !important
   }

   .dark tr.selected-row {
       background: rgba(59, 130, 246, .1) !important
   }

   .invoice-preview {
       background: white;
       color: #0f172a
   }

   .dark .invoice-preview {
       background: #f8fafc;
       color: #0f172a
   }

   @media print {
       .no-print {
           display: none !important
       }

       .invoice-preview {
           box-shadow: none
       }
   }

   @media(prefers-reduced-motion:reduce) {

       *,
       *::before,
       *::after {
           animation-duration: .01ms !important;
           transition-duration: .01ms !important
       }
   }