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

:root {
    --primary: 272 41% 21%;
    --primary-hex: #361F4A;
    --primary-dark: #241432;
    --primary-light: #663C90;
    --primary-50: #F5F0F9;
    --primary-100: #EBE1F2;
    --primary-200: #D5C2E7;
    --primary-600: #663C90;
    --primary-700: #4C2D6C;
    --primary-800: #361F4A;
    --primary-900: #241432;

    --gradient-primary: linear-gradient(135deg, hsl(272 41% 45%), hsl(280 45% 50%));
    --gradient-purple: linear-gradient(135deg, hsl(272 41% 45%), hsl(290 50% 48%));
    --gradient-success: linear-gradient(135deg, hsl(160 84% 39%), hsl(142 71% 45%));
    --gradient-warning: linear-gradient(135deg, hsl(38 92% 50%), hsl(25 95% 53%));
    --gradient-danger: linear-gradient(135deg, hsl(0 84% 60%), hsl(350 89% 50%));
    --gradient-info: linear-gradient(135deg, hsl(217 91% 60%), hsl(199 89% 48%));

    --shadow-2xs: 0px 1px 2px rgba(0,0,0,0.03);
    --shadow-xs: 0px 1px 3px rgba(0,0,0,0.04);
    --shadow-sm: 0px 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-md: 0px 6px 10px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0px 10px 15px -3px rgba(0,0,0,0.12);
    --shadow-xl: 0px 20px 25px -5px rgba(0,0,0,0.15);

    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 9px;
    --radius: 8px;
}

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

a {
    text-decoration: none;
    color: inherit;
}

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

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.4s ease-out;
}

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-2px) scale(1.02);
}

.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-purple {
    background: var(--gradient-purple);
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === Mobile-friendly horizontal scroll for tables === */
.table-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c4b5fd #f3f4f6;
}
.table-scroll::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
}
.table-scroll::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}
.table-scroll-teal { scrollbar-color: #5eead4 #f3f4f6; }
.table-scroll-teal::-webkit-scrollbar-thumb { background: #5eead4; }
.table-scroll-teal::-webkit-scrollbar-thumb:hover { background: #2dd4bf; }

.table-scroll-wrapper {
    position: relative;
}

/* Top horizontal scrollbar (mirror) injected via JS */
.table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c4b5fd #f3f4f6;
}
.table-scroll-top > div { height: 1px; }
.table-scroll-top::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
}
.table-scroll-top::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}
.table-scroll-top::-webkit-scrollbar-thumb {
    background: #c4b5fd;
    border-radius: 4px;
}
.table-scroll-top::-webkit-scrollbar-thumb:hover {
    background: #a78bfa;
}
.table-scroll-wrapper.is-teal .table-scroll-top { scrollbar-color: #5eead4 #f3f4f6; }
.table-scroll-wrapper.is-teal .table-scroll-top::-webkit-scrollbar-thumb { background: #5eead4; }
.table-scroll-wrapper.is-teal .table-scroll-top::-webkit-scrollbar-thumb:hover { background: #2dd4bf; }

/* On mobile: show max 5 rows, no vertical scroll, navigate via pagination + horizontal scroll */
@media (max-width: 767px) {
    .table-scroll {
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }

    /* Snap to each column on mobile */
    .table-scroll table th,
    .table-scroll table td {
        scroll-snap-align: start;
    }

    /* Hide rows beyond the 5th */
    .table-scroll table tbody tr:nth-child(n+6) {
        display: none;
    }
}