/* PackTrack Pro - Premium Design System v4.0 */
/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===== SHADCN UI CSS VARIABLES ===== */
/* Bare :root carries the light tokens too, so a document with a missing/empty data-theme
   can never render token-less again (LESSONS #52). The dark block below has higher
   specificity and still wins whenever data-theme="dark" is stamped. */
:root, :root[data-theme="light"] {
    /* Shadcn Light Theme Variables */
    --background: 0 0% 100%;
    --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: 199 89% 40%;
    --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: 199 30% 94%;
    --accent-foreground: 199 89% 30%;
    --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: 199 89% 40%;
    --radius: 0.75rem;

    /* Typography */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    font-weight: 500;
    /* Increase base font weight */

    /* Graph & Animation Colors (Light Mode - Darker for contrast) */
    --neon-green: #16a34a;
    --neon-red: #dc2626;
}

:root[data-theme="dark"] {
    /* Shadcn Dark Theme Variables - Pure Black Background */
    --background: 0 0% 0%;
    --foreground: 210 40% 98%;
    --card: 240 10% 6%;
    --card-foreground: 210 40% 98%;
    --popover: 240 10% 6%;
    --popover-foreground: 210 40% 98%;
    --primary: 199 89% 48%;
    --primary-foreground: 199 89% 10%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 199 40% 20%;
    --accent-foreground: 199 89% 70%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 199 89% 48%;

    /* Graph & Animation Colors (Dark Mode - Bright Neon) */
    --neon-green: #39ff14;
    --neon-red: #ef4444;
}

/* Legacy Variables Mapping (For backward compatibility during refactor) */
:root {
    --bg-primary: hsl(var(--background));
    --text-primary: hsl(var(--foreground));
}

/* Dark mode: white calendar icon */
:root[data-theme="dark"] ::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Loading Spinner (Fallback/Custom) */
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Sidebar Navigation - Consistent rounded corners for both themes */
.sidebar nav a,
.sidebar nav button {
    border-radius: 0.5rem !important;
}

/* Ensure accent background has proper rounded corners */
.hover\:bg-accent:hover {
    border-radius: 0.5rem;
}

/* Recent project items styling */
.recent-project-item {
    border-radius: 0.375rem !important;
}

/* ===== RESIZABLE TABLE COLUMNS ===== */
/* Table header cells need position relative for handle positioning */
table.resizable-columns th {
    position: relative;
    overflow: visible;
}

/* The resize handle - invisible bar on right edge of header */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background-color 0.15s ease;
}

/* Visual feedback on hover */
.col-resize-handle:hover {
    background-color: hsl(var(--primary) / 0.5);
}

/* Visual feedback while dragging */
.col-resize-handle.dragging {
    background-color: hsl(var(--primary));
}

/* Prevent text selection during resize */
body.col-resizing {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.col-resizing * {
    cursor: col-resize !important;
}

/* Ensure table doesn't collapse columns too small */
table.resizable-columns {
    table-layout: fixed;
}

table.resizable-columns th,
table.resizable-columns td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== STICKY HORIZONTAL SCROLLBAR ===== */
/* Hide native horizontal scrollbar; proxy scrollbar handles it */
.sticky-scroll-x {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none; /* Firefox */
}
.sticky-scroll-x::-webkit-scrollbar {
    height: 0; /* Chrome/Safari — only hide horizontal */
}
/* Sticky header table — constrained height with sticky thead + native scrollbars */
.sticky-header-table {
    max-height: 60vh;
    overflow: auto;
}
.sticky-header-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: hsl(var(--card));
    box-shadow: inset 0 -1px 0 hsl(var(--border));
}
/* Cap text-heavy columns to prevent single-column overflow */
.sticky-header-table td,
.sticky-header-table th {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Proxy scrollbar sticks to bottom of viewport */
.sticky-scroll-proxy {
    position: sticky;
    bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 5;
    background: hsl(var(--background));
    border-top: 1px solid hsl(var(--border));
}
.sticky-scroll-proxy > div {
    height: 1px;
}

/* ===== TABLE COLUMN BORDERS ===== */
/* Reusable class for opaque vertical column dividers */
.table-col-borders th,
.table-col-borders td {
    border-right: 1px solid hsl(var(--border) / 0.5);
}
.table-col-borders th:last-child,
.table-col-borders td:last-child {
    border-right: none;
}

/* ===== FROZEN (STICKY) TABLE COLUMNS ===== */
/* Body cells in frozen columns — background MUST be fully opaque to hide scrolled content */
.frozen-col {
    position: sticky !important;
    z-index: 2;
    background: hsl(var(--card));
}
/* Header cells in frozen columns — must sit above both frozen body AND non-frozen headers */
.sticky-header-table thead th.frozen-col {
    z-index: 6;
}
/* Right edge on last frozen column for visual separation */
.frozen-col-last {
    border-right: 3px solid hsl(var(--primary) / 0.35) !important;
}
/* Hover on frozen cells — must stay fully opaque (no alpha) to prevent bleed-through */
tr:hover .frozen-col {
    background: hsl(var(--muted));
}
.sticky-header-table thead tr:hover th.frozen-col {
    background: hsl(var(--card));
}
/* ===== CELL SELECTION STATS (Google-Sheets-style, Phase 16) ===== */
/* Selected cells in a data-cellstats table */
.cellstats-selected {
    background: hsl(var(--primary) / 0.18) !important;
}
/* Suppress native text selection while sweeping a cell range */
body.cellstats-selecting,
body.cellstats-selecting * {
    -webkit-user-select: none !important;
    user-select: none !important;
}
/* Floating readout, bottom-right (sits above the recent-projects bar) */
.cellstats-box {
    position: fixed;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: .5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    padding: .4rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.cellstats-box:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}
/* Function menu opened from the readout */
.cellstats-menu {
    position: fixed;
    z-index: 71;
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: .5rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    padding: .25rem;
    min-width: 11rem;
}
.cellstats-menu button {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: .35rem .6rem;
    font-size: .78rem;
    border: none;
    background: transparent;
    border-radius: .35rem;
    cursor: pointer;
    color: inherit;
    text-align: left;
}
.cellstats-menu button:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}
.cellstats-menu button.sel {
    background: hsl(var(--primary) / 0.15);
    font-weight: 600;
}