* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    }

    [data-lucide] {
        width: 1em;
        height: 1em;
        display: inline-block;
        vertical-align: middle;
    }

    svg {
        display: inline-block;
        vertical-align: middle;
    }

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .dark body {
        background: linear-gradient(180deg, #0b1223 0%, #141d33 100%);
        background-attachment: fixed;
    }

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

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

    ::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 50px;
    }

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

    .sidebar-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-scroll::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.3);
        border-radius: 50px;
    }

    .sidebar {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar-collapsed {
        width: 80px !important;
    }

    .sidebar-collapsed .sidebar-text {
        display: none;
    }

    .sidebar-collapsed .sidebar-logo-text {
        display: none;
    }

    .sidebar-collapsed .sidebar-badge {
        display: none;
    }

    .sidebar-collapsed .sidebar-item {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-collapsed .sidebar-header {
        display: none;
    }

    .sidebar-collapsed .sidebar-close-btn {
        display: none;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(6px);
        z-index: 40;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .ripple {
        position: relative;
        overflow: hidden;
    }

    .ripple::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform 0.5s, opacity 1s;
    }

    .ripple:active::after {
        transform: scale(0, 0);
        opacity: 0.3;
        transition: 0s;
    }

    .card-hover {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

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

    .gradient-text {
        background: linear-gradient(135deg, #6366F1, #22D3EE);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .notification-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        background: #EF4444;
        color: white;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
    }

    .dark .notification-badge {
        border-color: #141d33;
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
    }

    .menu-active {
        background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
        color: #4F46E5;
        border-right: 3px solid #4F46E5;
    }

    .dark .menu-active {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(34, 211, 238, 0.08));
        color: #A5B4FC;
        border-right: 3px solid #818CF8;
        box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.1);
    }

    .dropdown-menu {
        transform-origin: top right;
        transform: scale(0.95) translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }

    .dropdown-menu.active {
        transform: scale(1) translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .dark .premium-dropdown {
        background: linear-gradient(180deg, #1e2942 0%, #182238 100%);
        border: 1px solid rgba(129, 140, 248, 0.12);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

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

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

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

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

    .toast-enter {
        animation: slideInRight 0.3s ease forwards;
    }

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

    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(8px);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        padding: 16px;
    }

    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .modal-content {
        transform: scale(0.9) translateY(20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .status-badge {
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .dark .notification-item:hover {
        background: rgba(129, 140, 248, 0.06) !important;
    }

    .dark .message-item:hover {
        background: rgba(129, 140, 248, 0.06) !important;
    }

    /* Sort arrows */
    .sort-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        user-select: none;
    }

    .sort-btn:hover {
        color: #4F46E5;
    }

    .dark .sort-btn:hover {
        color: #A5B4FC;
    }

    .sort-btn.asc .sort-icon {
        transform: rotate(180deg);
    }

    .sort-btn.active {
        color: #4F46E5;
    }

    .dark .sort-btn.active {
        color: #A5B4FC;
    }

    /* Filter Chip */
    .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        background: rgba(79, 70, 229, 0.1);
        color: #4F46E5;
        font-size: 12px;
        font-weight: 600;
        border-radius: 50px;
        border: 1px solid rgba(79, 70, 229, 0.2);
    }

    .dark .filter-chip {
        background: rgba(129, 140, 248, 0.15);
        color: #A5B4FC;
        border-color: rgba(129, 140, 248, 0.25);
    }

    .filter-chip button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(79, 70, 229, 0.2);
    }

    .dark .filter-chip button {
        background: rgba(129, 140, 248, 0.25);
    }

    .filter-chip button:hover {
        background: rgba(79, 70, 229, 0.4);
    }

    /* Custom checkbox */
    .custom-checkbox {
        position: relative;
        width: 18px;
        height: 18px;
    }

    .custom-checkbox input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .checkmark {
        position: absolute;
        inset: 0;
        background: transparent;
        border: 2px solid #CBD5E1;
        border-radius: 4px;
        transition: all 0.2s;
        cursor: pointer;
    }

    .dark .checkmark {
        border-color: #425573;
    }

    .custom-checkbox input:checked~.checkmark {
        background: #4F46E5;
        border-color: #4F46E5;
    }

    .checkmark::after {
        content: '';
        position: absolute;
        display: none;
        left: 4px;
        top: 1px;
        width: 4px;
        height: 9px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .custom-checkbox input:checked~.checkmark::after {
        display: block;
    }

    /* Transaction row selected */
    tr.selected {
        background: rgba(79, 70, 229, 0.05) !important;
    }

    .dark tr.selected {
        background: rgba(129, 140, 248, 0.08) !important;
    }

    /* Pagination button */
    .page-btn {
        min-width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #64748B;
        background: transparent;
        transition: all 0.2s;
        cursor: pointer;
    }

    .dark .page-btn {
        color: #a6b3c4;
    }

    .page-btn:hover {
        background: #F1F5F9;
        color: #4F46E5;
    }

    .dark .page-btn:hover {
        background: #182238;
        color: #A5B4FC;
    }

    .page-btn.active {
        background: linear-gradient(135deg, #4F46E5, #6366F1);
        color: white;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }

    .page-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .page-btn:disabled:hover {
        background: transparent;
        color: #64748B;
    }

    /* Loading skeleton */
    .skeleton {
        background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 8px;
    }

    .dark .skeleton {
        background: linear-gradient(90deg, #1e2942 25%, #263249 50%, #1e2942 75%);
        background-size: 200% 100%;
    }

    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    /* Filter panel */
    .filter-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .filter-panel.open {
        max-height: 600px;
    }

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

    @media (max-width: 1023px) {
        #mainContent {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
            overflow-x: hidden !important;
        }

        main {
            padding-left: 12px !important;
            padding-right: 12px !important;
            max-width: 100% !important;
        }
    }

    @media(max-width:640px) {

        .notification-popup-fix,
        .messenger-popup-fix {
            position: fixed !important;
            left: 8px !important;
            right: 8px !important;
            top: 60px !important;
            width: auto !important;
            max-width: none !important;
        }

        .grid {
            gap: 0.75rem !important;
        }
    }

    @media (max-width: 380px) {
        main {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        h2.text-2xl {
            font-size: 1.375rem !important;
            line-height: 1.75rem !important;
        }

        .modal-content {
            max-width: calc(100vw - 16px) !important;
        }

        header .flex.items-center.gap-1 {
            gap: 0 !important;
        }

        header button.p-2 {
            padding: 0.375rem !important;
        }

        .notification-popup-fix,
        .messenger-popup-fix {
            top: 56px !important;
        }
    }