@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 210 40% 98%;
        --foreground: 222.2 84% 4.9%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;
        --primary: 210 60% 50%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --accent: 220 20% 94%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 25 77% 56%;
        --radius: 0.5rem;
        --font-size-compact: 11px;
    }

    .dark {
        --background: 220 20% 10%;
        --foreground: 220 20% 90%;
        --card: 220 20% 13%;
        --card-foreground: 220 20% 90%;
        --popover: 220 20% 13%;
        --popover-foreground: 220 20% 90%;
        --primary: 210 60% 50%;
        --primary-foreground: 220 20% 10%;
        --secondary: 220 20% 20%;
        --secondary-foreground: 220 20% 90%;
        --muted: 220 20% 20%;
        --muted-foreground: 220 15% 80%;
        --accent: 220 20% 20%;
        --accent-foreground: 220 20% 90%;
        --destructive: 0 100% 40%;
        --destructive-foreground: 220 20% 90%;
        --border: 220 20% 25%;
        --input: 220 20% 20%;
        --ring: 210 60% 50%;
        --radius: 0.5rem;
    }

    ::-webkit-scrollbar {
        width: 14px;
        height: 14px;
        background: transparent;
    }

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

    ::-webkit-scrollbar-thumb {
        @apply rounded-full bg-border/50 transition-colors hover:bg-border/80;
        border: 4px solid transparent;
        background-clip: padding-box;
        min-height: 50px;
    }

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

    * {
        scrollbar-width: auto;
        scrollbar-color: hsl(var(--border)) transparent;
    }

    /* Hide scrollbar when inactive but reserve space */
    .hover\:pr-2:not(:hover)::-webkit-scrollbar-thumb {
        background: transparent;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
}

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

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

::selection {
    background-color: rgba(1, 122, 255, 0.2);
    color: hsl(var(--primary));
}

::-moz-selection {
    background-color: rgba(1, 122, 255, 0.2);
    color: hsl(var(--primary));
}

html {
    scroll-behavior: smooth;
}

.table-compact {
    font-size: var(--font-size-compact);
    line-height: 1.4;
}

.table-compact td,
.table-compact th {
    padding: 2px 4px;
}

@layer components {
    .table-cell-base {
        @apply relative cursor-default p-0 px-2 text-[13px] transition-colors duration-100;
    }

    .truncate-cell {
        @apply truncate text-[13px] transition-colors duration-200;
    }

    .TableRow[data-state="selected"] {
        @apply transition-colors duration-200;
    }

    .focus-ring {
        @apply focus-visible:border-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-muted;
    }

    .instant-select {
        transition: none !important;
    }
}
