:root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 3%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 3%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;
    --accent: 0 0% 15%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 0% 30%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 0 0% 100%;
    --radius: 0.25rem;
    --grid-color: rgba(255, 255, 255, 0.1);
    --radial-start: rgba(20, 20, 20, 1);
    --radial-end: rgba(0, 0, 0, 1);
}

[data-theme="light"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 98%;
    --secondary-foreground: 0 0% 0%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 95%;
    --accent-foreground: 0 0% 0%;
    --destructive: 0 0% 90%;
    --destructive-foreground: 0 0% 0%;
    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 0 0% 0%;
    --grid-color: rgba(0, 0, 0, 0.05);
    --radial-start: rgba(255, 255, 255, 1);
    --radial-end: rgba(255, 255, 255, 1);
}

* {
    border-color: hsl(var(--border));
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

/* Custom Table Styles */
th, td {
    border-bottom: 1px solid hsl(var(--border) / 0.3);
    border-right: 1px solid hsl(var(--border) / 0.3);
    padding: 0.75rem 1.5rem;
}

th:last-child, td:last-child {
    border-right: none;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: hsl(var(--background)) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 hsl(var(--border)), 0 2px 4px rgba(0,0,0,0.2);
}

/* Ensure no parent clips the sticky header */
#dashboard-main, 
.lg:col-span-3,
.rounded-xl {
    overflow: visible !important;
}

/* Scrollbar Styling */
.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 10px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--foreground) / 0.2);
}

/* Vertical Text refinement */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
}

/* Ensure no overflow issues in the chart row */
.lg\:flex-\[1\.5\], .lg\:flex-\[0\.5\], .lg\:flex-\[4\] {
    min-width: 0;
}

/* Animations and Transitions */
.group-row td {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cell-highlight {
    background-color: hsl(var(--foreground) / 0.1) !important;
}

/* Tooltip or extra hover info */
[data-tooltip] {
    position: relative;
    cursor: help;
}

/* Shared Vehicle Tag (Grayscale) */
.shared-vehicle {
    display: inline-block;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    padding: 0.125rem 0.5rem;
    border-radius: 2px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0.125rem;
    border: 1px solid hsl(var(--border));
}

/* Chart Styles */
#mold-chart {
    border-radius: 50%;
}

.legend-color {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

/* Remove Animations */
.animate-border-beam::before,
#tracing-beam-point {
    display: none !important;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease forwards;
}

tr {
    transition: background-color 0.2s;
}

#table-body tr {
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

/* Delay row animations for a staggered effect */
#table-body tr:nth-child(1) { animation-delay: 0.05s; }
#table-body tr:nth-child(2) { animation-delay: 0.1s; }
#table-body tr:nth-child(3) { animation-delay: 0.15s; }
#table-body tr:nth-child(4) { animation-delay: 0.2s; }
#table-body tr:nth-child(5) { animation-delay: 0.25s; }

.legend-item {
    transition: all 0.3s ease;
}

#mold-chart circle {
    transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1), 
                stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1), 
                stroke 0.3s ease;
    stroke-linecap: butt;
}

@keyframes chartDraw {
    from { stroke-dasharray: 0 100; }
}

#mold-chart circle {
    animation: chartDraw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}