1806 lines
54 KiB
CSS
1806 lines
54 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-emerald: #10b981;
|
|
--color-teal: #14b8a6;
|
|
--color-amber: #f59e0b;
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.75rem;
|
|
--background: oklch(0.99 0.002 155);
|
|
--foreground: oklch(0.17 0.01 260);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.17 0.01 260);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.17 0.01 260);
|
|
--primary: oklch(0.55 0.17 155);
|
|
--primary-foreground: oklch(0.98 0.005 155);
|
|
--secondary: oklch(0.96 0.01 155);
|
|
--secondary-foreground: oklch(0.25 0.02 260);
|
|
--muted: oklch(0.96 0.005 155);
|
|
--muted-foreground: oklch(0.55 0.02 260);
|
|
--accent: oklch(0.96 0.01 155);
|
|
--accent-foreground: oklch(0.25 0.02 260);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.93 0.005 155);
|
|
--input: oklch(0.93 0.005 155);
|
|
--ring: oklch(0.55 0.17 155);
|
|
--chart-1: oklch(0.55 0.17 155);
|
|
--chart-2: oklch(0.53 0.14 175);
|
|
--chart-3: oklch(0.72 0.19 85);
|
|
--chart-4: oklch(0.60 0.18 50);
|
|
--chart-5: oklch(0.65 0.22 330);
|
|
--sidebar: oklch(0.97 0.01 155);
|
|
--sidebar-foreground: oklch(0.17 0.01 260);
|
|
--sidebar-primary: oklch(0.55 0.17 155);
|
|
--sidebar-primary-foreground: oklch(0.98 0.005 155);
|
|
--sidebar-accent: oklch(0.94 0.02 155);
|
|
--sidebar-accent-foreground: oklch(0.25 0.02 260);
|
|
--sidebar-border: oklch(0.93 0.005 155);
|
|
--sidebar-ring: oklch(0.55 0.17 155);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.13 0.01 260);
|
|
--foreground: oklch(0.98 0.005 155);
|
|
--card: oklch(0.18 0.015 260);
|
|
--card-foreground: oklch(0.98 0.005 155);
|
|
--popover: oklch(0.18 0.015 260);
|
|
--popover-foreground: oklch(0.98 0.005 155);
|
|
--primary: oklch(0.65 0.17 155);
|
|
--primary-foreground: oklch(0.15 0.01 260);
|
|
--secondary: oklch(0.24 0.02 260);
|
|
--secondary-foreground: oklch(0.98 0.005 155);
|
|
--muted: oklch(0.24 0.02 260);
|
|
--muted-foreground: oklch(0.65 0.02 260);
|
|
--accent: oklch(0.24 0.02 260);
|
|
--accent-foreground: oklch(0.98 0.005 155);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.65 0.17 155);
|
|
--chart-1: oklch(0.65 0.17 155);
|
|
--chart-2: oklch(0.63 0.14 175);
|
|
--chart-3: oklch(0.77 0.19 85);
|
|
--chart-4: oklch(0.72 0.22 50);
|
|
--chart-5: oklch(0.70 0.22 330);
|
|
--sidebar: oklch(0.18 0.015 260);
|
|
--sidebar-foreground: oklch(0.98 0.005 155);
|
|
--sidebar-primary: oklch(0.65 0.17 155);
|
|
--sidebar-primary-foreground: oklch(0.15 0.01 260);
|
|
--sidebar-accent: oklch(0.24 0.02 260);
|
|
--sidebar-accent-foreground: oklch(0.98 0.005 155);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.65 0.17 155);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar styling */
|
|
@layer utilities {
|
|
.scrollbar-education::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.scrollbar-education::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.scrollbar-education::-webkit-scrollbar-thumb {
|
|
background: oklch(0.80 0.02 155);
|
|
border-radius: 3px;
|
|
}
|
|
.scrollbar-education::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155);
|
|
}
|
|
.dark .scrollbar-education::-webkit-scrollbar-thumb {
|
|
background: oklch(0.35 0.02 260);
|
|
}
|
|
.dark .scrollbar-education::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155);
|
|
}
|
|
|
|
/* Global scrollbar override */
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: oklch(0.85 0.01 155);
|
|
border-radius: 4px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.dark *::-webkit-scrollbar-thumb {
|
|
background: oklch(0.30 0.015 260);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.dark *::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.50 0.10 155);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* Dot grid background pattern */
|
|
.bg-dots {
|
|
background-image: radial-gradient(circle, oklch(0.80 0.02 155) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
.dark .bg-dots {
|
|
background-image: radial-gradient(circle, oklch(0.25 0.015 260) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* Smooth transitions for all interactive elements */
|
|
.interactive-transition {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
/* Animated gradient background */
|
|
.animated-gradient-bg {
|
|
background: linear-gradient(135deg, oklch(0.97 0.01 155) 0%, oklch(0.99 0.002 155) 50%, oklch(0.97 0.01 175) 100%);
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
.dark .animated-gradient-bg {
|
|
background: linear-gradient(135deg, oklch(0.15 0.01 260) 0%, oklch(0.13 0.01 260) 50%, oklch(0.15 0.01 155) 100%);
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
@keyframes gradient-shift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* Pulse animation */
|
|
@keyframes pulse-soft {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.85; }
|
|
}
|
|
.animate-pulse-soft {
|
|
animation: pulse-soft 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Shimmer animation for progress bars */
|
|
@keyframes shimmer-bar {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(200%); }
|
|
}
|
|
.animate-shimmer {
|
|
animation: shimmer-bar 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Float animation for geometric shapes */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
33% { transform: translateY(-15px) rotate(5deg); }
|
|
66% { transform: translateY(10px) rotate(-3deg); }
|
|
}
|
|
@keyframes float-reverse {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
33% { transform: translateY(12px) rotate(-4deg); }
|
|
66% { transform: translateY(-10px) rotate(6deg); }
|
|
}
|
|
@keyframes float-slow {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(8deg); }
|
|
}
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
.animate-float-reverse {
|
|
animation: float-reverse 7s ease-in-out infinite;
|
|
}
|
|
.animate-float-slow {
|
|
animation: float-slow 10s ease-in-out infinite;
|
|
}
|
|
|
|
/* Progress bar animation */
|
|
@keyframes progress-fill {
|
|
from { width: 0; }
|
|
}
|
|
.animate-progress-fill {
|
|
animation: progress-fill 1s ease-out;
|
|
}
|
|
|
|
/* Print styles — full print stylesheet lives at end of file */
|
|
|
|
/* ─── Slide animations ──────────────────────────────────────────── */
|
|
@keyframes slide-in {
|
|
from { transform: translateX(30px); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
.animate-slide-in {
|
|
animation: slide-in 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slide-out {
|
|
from { transform: translateX(0); opacity: 1; }
|
|
to { transform: translateX(-30px); opacity: 0; }
|
|
}
|
|
.animate-slide-out {
|
|
animation: slide-out 0.3s ease-in;
|
|
}
|
|
|
|
/* ─── Pulse dot for version timeline ────────────────────────────── */
|
|
@keyframes pulse-dot {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.3); opacity: 0.7; }
|
|
}
|
|
.animate-pulse-dot {
|
|
animation: pulse-dot 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ─── Canvas toolbar ────────────────────────────────────────────── */
|
|
.canvas-toolbar {
|
|
transition: transform 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
|
|
}
|
|
|
|
/* ─── Version timeline ──────────────────────────────────────────── */
|
|
.version-timeline {
|
|
position: relative;
|
|
}
|
|
.version-timeline > div {
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Focus ring for accessibility */
|
|
@layer base {
|
|
*:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
*:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
/* Make keyboard focus more visible on interactive controls */
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
[role="button"]:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible,
|
|
[tabindex]:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px oklch(0.55 0.17 155 / 0.18);
|
|
transition: box-shadow 0.15s ease-out;
|
|
}
|
|
.dark button:focus-visible,
|
|
.dark a:focus-visible,
|
|
.dark [role="button"]:focus-visible,
|
|
.dark input:focus-visible,
|
|
.dark select:focus-visible,
|
|
.dark textarea:focus-visible,
|
|
.dark [tabindex]:focus-visible {
|
|
outline: 2px solid oklch(0.65 0.17 155);
|
|
box-shadow: 0 0 0 4px oklch(0.65 0.17 155 / 0.25);
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
/* ─── Styling polish utilities ─────────────────────────────────────────── */
|
|
|
|
@layer utilities {
|
|
/* Subtle paper texture for main backgrounds */
|
|
.bg-paper {
|
|
background-color: oklch(0.99 0.002 155);
|
|
background-image:
|
|
radial-gradient(circle at 20% 10%, oklch(0.96 0.015 155 / 0.6) 0%, transparent 40%),
|
|
radial-gradient(circle at 80% 80%, oklch(0.96 0.012 175 / 0.5) 0%, transparent 45%),
|
|
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
.dark .bg-paper {
|
|
background-color: oklch(0.13 0.01 260);
|
|
background-image:
|
|
radial-gradient(circle at 20% 10%, oklch(0.18 0.02 155 / 0.35) 0%, transparent 40%),
|
|
radial-gradient(circle at 80% 80%, oklch(0.18 0.02 175 / 0.3) 0%, transparent 45%),
|
|
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Mesh gradient for hero / stats areas */
|
|
.bg-mesh {
|
|
background-color: oklch(0.99 0.002 155);
|
|
background-image:
|
|
radial-gradient(at 12% 18%, oklch(0.94 0.04 155 / 0.55) 0px, transparent 50%),
|
|
radial-gradient(at 88% 22%, oklch(0.94 0.05 175 / 0.45) 0px, transparent 50%),
|
|
radial-gradient(at 22% 88%, oklch(0.95 0.05 85 / 0.4) 0px, transparent 50%),
|
|
radial-gradient(at 78% 78%, oklch(0.95 0.05 330 / 0.3) 0px, transparent 50%);
|
|
}
|
|
.dark .bg-mesh {
|
|
background-color: oklch(0.13 0.01 260);
|
|
background-image:
|
|
radial-gradient(at 12% 18%, oklch(0.20 0.06 155 / 0.35) 0px, transparent 50%),
|
|
radial-gradient(at 88% 22%, oklch(0.20 0.06 175 / 0.3) 0px, transparent 50%),
|
|
radial-gradient(at 22% 88%, oklch(0.20 0.07 85 / 0.25) 0px, transparent 50%),
|
|
radial-gradient(at 78% 78%, oklch(0.20 0.08 330 / 0.2) 0px, transparent 50%);
|
|
}
|
|
|
|
/* Shimmer skeleton loader */
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
.shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
oklch(0.92 0.005 155 / 0.4) 0%,
|
|
oklch(0.88 0.01 155 / 0.7) 50%,
|
|
oklch(0.92 0.005 155 / 0.4) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.6s linear infinite;
|
|
}
|
|
.dark .shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
oklch(0.22 0.015 260 / 0.5) 0%,
|
|
oklch(0.28 0.02 260 / 0.8) 50%,
|
|
oklch(0.22 0.015 260 / 0.5) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.6s linear infinite;
|
|
}
|
|
|
|
/* Subtle inner ring for premium cards */
|
|
.ring-inset-soft {
|
|
box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.05), 0 1px 2px oklch(0 0 0 / 0.04);
|
|
}
|
|
.dark .ring-inset-soft {
|
|
box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.2);
|
|
}
|
|
|
|
/* Document / paper preview look for reports */
|
|
.paper-preview {
|
|
background: white;
|
|
background-image:
|
|
linear-gradient(oklch(0.96 0.005 155 / 0.6) 1px, transparent 1px);
|
|
background-size: 100% 28px;
|
|
box-shadow:
|
|
0 1px 0 oklch(0.85 0.005 155),
|
|
0 4px 12px oklch(0 0 0 / 0.08),
|
|
0 24px 60px oklch(0 0 0 / 0.06);
|
|
}
|
|
.dark .paper-preview {
|
|
background: oklch(0.18 0.015 260);
|
|
background-image:
|
|
linear-gradient(oklch(0.22 0.015 260 / 0.6) 1px, transparent 1px);
|
|
background-size: 100% 28px;
|
|
box-shadow:
|
|
0 1px 0 oklch(0 0 0 / 0.4),
|
|
0 4px 12px oklch(0 0 0 / 0.4),
|
|
0 24px 60px oklch(0 0 0 / 0.3);
|
|
}
|
|
|
|
/* Sticky header helper for tables */
|
|
.sticky-header th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
background: oklch(0.96 0.005 155);
|
|
}
|
|
.dark .sticky-header th {
|
|
background: oklch(0.20 0.015 260);
|
|
}
|
|
|
|
/* Sparkline path */
|
|
.sparkline-path {
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
}
|
|
|
|
/* Lift on hover for cards */
|
|
.lift-on-hover {
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
|
}
|
|
.lift-on-hover:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 28px -10px oklch(0.55 0.17 155 / 0.18);
|
|
}
|
|
|
|
/* Gradient text for highlights */
|
|
.text-gradient-emerald {
|
|
background: linear-gradient(90deg, oklch(0.55 0.17 155), oklch(0.55 0.14 175));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-amber {
|
|
background: linear-gradient(90deg, oklch(0.72 0.19 85), oklch(0.60 0.18 50));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-violet {
|
|
background: linear-gradient(90deg, oklch(0.60 0.20 320), oklch(0.65 0.22 280));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-rose {
|
|
background: linear-gradient(90deg, oklch(0.65 0.22 15), oklch(0.62 0.20 350));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.text-gradient-teal {
|
|
background: linear-gradient(90deg, oklch(0.55 0.14 175), oklch(0.60 0.16 195));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
/* Generic gradient text — direction aware */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, oklch(0.55 0.17 155) 0%, oklch(0.55 0.14 175) 50%, oklch(0.65 0.22 330) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.dark .gradient-text {
|
|
background: linear-gradient(135deg, oklch(0.70 0.17 155) 0%, oklch(0.70 0.14 175) 50%, oklch(0.78 0.22 330) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
/* Frosted glass card — backdrop blur + translucent surface */
|
|
.glass-card {
|
|
background: oklch(1 0 0 / 0.7);
|
|
backdrop-filter: blur(12px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
|
border: 1px solid oklch(1 0 0 / 0.4);
|
|
box-shadow:
|
|
0 4px 16px -4px oklch(0 0 0 / 0.08),
|
|
inset 0 0 0 1px oklch(1 0 0 / 0.3);
|
|
}
|
|
.dark .glass-card {
|
|
background: oklch(0.18 0.015 260 / 0.65);
|
|
backdrop-filter: blur(12px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
|
border: 1px solid oklch(1 0 0 / 0.08);
|
|
box-shadow:
|
|
0 4px 16px -4px oklch(0 0 0 / 0.4),
|
|
inset 0 0 0 1px oklch(1 0 0 / 0.05);
|
|
}
|
|
.glass-card-strong {
|
|
background: oklch(1 0 0 / 0.85);
|
|
backdrop-filter: blur(20px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(200%);
|
|
border: 1px solid oklch(1 0 0 / 0.5);
|
|
}
|
|
.dark .glass-card-strong {
|
|
background: oklch(0.18 0.015 260 / 0.8);
|
|
backdrop-filter: blur(20px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
|
border: 1px solid oklch(1 0 0 / 0.1);
|
|
}
|
|
|
|
/* Animated count-up number */
|
|
@keyframes count-up {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-count-up {
|
|
animation: count-up 0.5s ease-out;
|
|
}
|
|
|
|
/* Decorative dotted/grid background pattern for headers */
|
|
.bg-pattern-dots {
|
|
background-image: radial-gradient(circle, oklch(0.55 0.17 155 / 0.18) 1px, transparent 1px);
|
|
background-size: 16px 16px;
|
|
}
|
|
.dark .bg-pattern-dots {
|
|
background-image: radial-gradient(circle, oklch(0.65 0.17 155 / 0.18) 1px, transparent 1px);
|
|
background-size: 16px 16px;
|
|
}
|
|
.bg-pattern-grid {
|
|
background-image:
|
|
linear-gradient(oklch(0.55 0.17 155 / 0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, oklch(0.55 0.17 155 / 0.06) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
.dark .bg-pattern-grid {
|
|
background-image:
|
|
linear-gradient(oklch(0.65 0.17 155 / 0.08) 1px, transparent 1px),
|
|
linear-gradient(90deg, oklch(0.65 0.17 155 / 0.08) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* Soft glow utility for highlighted elements */
|
|
.glow-emerald {
|
|
box-shadow: 0 0 0 1px oklch(0.55 0.17 155 / 0.15), 0 8px 24px -6px oklch(0.55 0.17 155 / 0.35);
|
|
}
|
|
.dark .glow-emerald {
|
|
box-shadow: 0 0 0 1px oklch(0.65 0.17 155 / 0.25), 0 8px 24px -6px oklch(0.65 0.17 155 / 0.45);
|
|
}
|
|
|
|
/* Subtle top-border accent for chart cards */
|
|
.accent-top-emerald { border-top: 3px solid oklch(0.55 0.17 155); }
|
|
.accent-top-teal { border-top: 3px solid oklch(0.55 0.14 175); }
|
|
.accent-top-amber { border-top: 3px solid oklch(0.72 0.19 85); }
|
|
.accent-top-violet { border-top: 3px solid oklch(0.60 0.20 320); }
|
|
.accent-top-rose { border-top: 3px solid oklch(0.65 0.22 15); }
|
|
|
|
/* Subtle entrance animation for staggered items */
|
|
@keyframes enter-fade {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-enter-fade {
|
|
animation: enter-fade 0.35s ease-out backwards;
|
|
}
|
|
|
|
/* ─── Styling polish additions ──────────────────────────────────── */
|
|
|
|
/* Smooth page transition animation (fadeIn for view changes) */
|
|
@keyframes view-fade-in {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-view-fade-in {
|
|
animation: view-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
/* Hover lift effect for cards */
|
|
.card-hover-lift {
|
|
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
}
|
|
.card-hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px -6px oklch(0.55 0.17 155 / 0.15);
|
|
}
|
|
.dark .card-hover-lift:hover {
|
|
box-shadow: 0 8px 24px -6px oklch(0.65 0.17 155 / 0.25);
|
|
}
|
|
|
|
/* Focus-within ring animation for inputs */
|
|
.input-focus-ring {
|
|
transition: box-shadow 0.2s ease-out;
|
|
}
|
|
.input-focus-ring:focus-within {
|
|
box-shadow: 0 0 0 3px oklch(0.55 0.17 155 / 0.2);
|
|
}
|
|
.dark .input-focus-ring:focus-within {
|
|
box-shadow: 0 0 0 3px oklch(0.65 0.17 155 / 0.3);
|
|
}
|
|
|
|
/* Tooltip animation (scale from 0.95 to 1) */
|
|
@keyframes tooltip-enter {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.animate-tooltip-enter {
|
|
animation: tooltip-enter 0.15s ease-out;
|
|
}
|
|
|
|
/* ─── Smooth Dark Mode Scrollbar ───────────────────────────────────── */
|
|
.dark ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: oklch(0.15 0.01 260);
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: oklch(0.35 0.015 260 / 0.6);
|
|
border-radius: 4px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.50 0.10 155 / 0.7);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
/* Firefox scrollbar for dark mode */
|
|
.dark * {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: oklch(0.35 0.015 260 / 0.6) oklch(0.15 0.01 260);
|
|
}
|
|
|
|
/* ─── Better Focus-Visible Styles ──────────────────────────────────── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*:focus-visible {
|
|
transition: none;
|
|
}
|
|
}
|
|
/* Enhanced focus ring for card-based interactive elements */
|
|
[role="button"]:focus-visible,
|
|
button:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px oklch(0.55 0.17 155 / 0.15);
|
|
border-radius: 8px;
|
|
transition: box-shadow 0.15s ease-out;
|
|
}
|
|
.dark [role="button"]:focus-visible,
|
|
.dark button:focus-visible {
|
|
outline: 2px solid oklch(0.65 0.17 155);
|
|
box-shadow: 0 0 0 4px oklch(0.65 0.17 155 / 0.2);
|
|
}
|
|
|
|
/* ─── Subtle Card Hover Effects ────────────────────────────────────── */
|
|
.card-hover-glow {
|
|
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
}
|
|
.card-hover-glow:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 8px 24px -6px oklch(0.55 0.17 155 / 0.12),
|
|
0 0 0 1px oklch(0.55 0.17 155 / 0.08);
|
|
}
|
|
.dark .card-hover-glow:hover {
|
|
box-shadow:
|
|
0 8px 24px -6px oklch(0.65 0.17 155 / 0.2),
|
|
0 0 0 1px oklch(0.65 0.17 155 / 0.12);
|
|
}
|
|
|
|
/* ─── Staggered Entry Animation ────────────────────────────────────── */
|
|
@keyframes stagger-fade-in {
|
|
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
.animate-stagger-in {
|
|
animation: stagger-fade-in 0.35s ease-out backwards;
|
|
}
|
|
|
|
/* ─── Chart Shimmer on Load ────────────────────────────────────────── */
|
|
@keyframes chart-shimmer {
|
|
0% { opacity: 0.5; transform: translateX(-100%); }
|
|
50% { opacity: 0.3; }
|
|
100% { opacity: 0; transform: translateX(100%); }
|
|
}
|
|
.animate-chart-shimmer {
|
|
animation: chart-shimmer 1.5s ease-out forwards;
|
|
}
|
|
|
|
/* ─── Button Press Effect ────────────────────────────────────────── */
|
|
.btn-press {
|
|
transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
|
|
}
|
|
.btn-press:active {
|
|
transform: scale(0.97);
|
|
}
|
|
.btn-press:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px oklch(0.55 0.17 155 / 0.15);
|
|
}
|
|
.dark .btn-press:focus-visible {
|
|
outline: 2px solid oklch(0.65 0.17 155);
|
|
box-shadow: 0 0 0 4px oklch(0.65 0.17 155 / 0.2);
|
|
}
|
|
|
|
/* ─── Smooth Theme Switching ─────────────────────────────────────── */
|
|
html {
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
html *,
|
|
html *::before,
|
|
html *::after {
|
|
transition-property: background-color, border-color, color, fill, stroke, box-shadow;
|
|
transition-duration: 0.2s;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html *,
|
|
html *::before,
|
|
html *::after {
|
|
transition-duration: 0ms !important;
|
|
}
|
|
}
|
|
|
|
/* ─── Skeleton Loading Shimmer ───────────────────────────────────── */
|
|
.skeleton-shimmer {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: oklch(0.92 0.01 155 / 0.5);
|
|
}
|
|
.dark .skeleton-shimmer {
|
|
background: oklch(0.25 0.01 260 / 0.5);
|
|
}
|
|
.skeleton-shimmer::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
oklch(0.97 0.01 155 / 0.4) 50%,
|
|
transparent 100%
|
|
);
|
|
animation: skeleton-slide 1.5s ease-in-out infinite;
|
|
}
|
|
.dark .skeleton-shimmer::after {
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
oklch(0.35 0.01 260 / 0.3) 50%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
@keyframes skeleton-slide {
|
|
from { transform: translateX(-100%); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
|
|
/* ─── Interactive Card Hover Micro-Effect ─────────────────────────── */
|
|
.card-interactive {
|
|
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
}
|
|
.card-interactive:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px -6px oklch(0.55 0.17 155 / 0.12);
|
|
}
|
|
.dark .card-interactive:hover {
|
|
box-shadow: 0 8px 24px -6px oklch(0.35 0.17 155 / 0.2);
|
|
}
|
|
.card-interactive:active {
|
|
transform: translateY(0px) scale(0.99);
|
|
}
|
|
|
|
/* ─── Danger Zone Styling ────────────────────────────────────────── */
|
|
.danger-zone {
|
|
border: 2px dashed oklch(0.55 0.22 25 / 0.4);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
background: oklch(0.55 0.22 25 / 0.03);
|
|
}
|
|
.dark .danger-zone {
|
|
border-color: oklch(0.55 0.22 25 / 0.3);
|
|
background: oklch(0.55 0.22 25 / 0.05);
|
|
}
|
|
.danger-zone:hover {
|
|
border-color: oklch(0.55 0.22 25 / 0.6);
|
|
background: oklch(0.55 0.22 25 / 0.06);
|
|
}
|
|
|
|
/* ─── File Drop Zone ─────────────────────────────────────────────── */
|
|
.file-drop-zone {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 120px;
|
|
padding: 24px;
|
|
border: 2px dashed oklch(0.75 0.05 155);
|
|
border-radius: 12px;
|
|
background: oklch(0.97 0.01 155 / 0.3);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.dark .file-drop-zone {
|
|
border-color: oklch(0.4 0.05 155);
|
|
background: oklch(0.2 0.02 155 / 0.3);
|
|
}
|
|
.file-drop-zone.drag-over {
|
|
border-color: oklch(0.55 0.17 155);
|
|
background: oklch(0.55 0.17 155 / 0.1);
|
|
transform: scale(1.01);
|
|
}
|
|
.dark .file-drop-zone.drag-over {
|
|
border-color: oklch(0.65 0.17 155);
|
|
background: oklch(0.65 0.17 155 / 0.1);
|
|
}
|
|
.file-drop-zone:hover {
|
|
border-color: oklch(0.55 0.17 155);
|
|
background: oklch(0.55 0.17 155 / 0.05);
|
|
}
|
|
|
|
/* ─── Import Progress Bar ────────────────────────────────────────── */
|
|
.import-progress {
|
|
animation: import-fade-in 0.3s ease-out;
|
|
}
|
|
@keyframes import-fade-in {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ─── Report Preview Page ────────────────────────────────────────── */
|
|
.report-preview {
|
|
position: relative;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 40px 32px;
|
|
background: white;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
}
|
|
.dark .report-preview {
|
|
background: oklch(0.15 0.01 260);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* ─── Environmental Watermark ────────────────────────────────────── */
|
|
.watermark-eco {
|
|
position: fixed;
|
|
bottom: 50%;
|
|
right: -60px;
|
|
transform: rotate(-45deg);
|
|
font-size: 72px;
|
|
font-weight: 900;
|
|
color: oklch(0.55 0.17 155 / 0.04);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ─── Badge Type ─────────────────────────────────────────────────── */
|
|
.badge-type {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* ─── Status Indicator Dot Pulse ─────────────────────────────────── */
|
|
@keyframes status-pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.3); }
|
|
}
|
|
.status-dot-pulse {
|
|
animation: status-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ─── Count-Up Animation for Numbers ─────────────────────────────── */
|
|
.animate-count-up {
|
|
animation: count-up 0.8s ease-out;
|
|
}
|
|
@keyframes count-up {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
}
|
|
|
|
/* Print-specific styling — expands to all reports when printing */
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
.print-only { display: block !important; }
|
|
body { background: white !important; color: black !important; }
|
|
|
|
/* Hide sidebar, header, navigation */
|
|
[data-sidebar], header, nav, .no-print { display: none !important; }
|
|
|
|
/* Make main content full width */
|
|
main, .print-area { width: 100% !important; margin: 0 !important; padding: 1rem !important; }
|
|
|
|
/* Ensure cards have borders for print */
|
|
.card, [class*="Card"] { border: 1px solid #e5e7eb !important; break-inside: avoid; }
|
|
|
|
/* Ensure text is readable */
|
|
body { color: #000 !important; background: #fff !important; }
|
|
|
|
/* Page breaks */
|
|
.page-break { page-break-before: always; }
|
|
.print-break-before { page-break-before: always; }
|
|
.print-avoid-break { page-break-inside: avoid; }
|
|
|
|
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }
|
|
.paper-preview { box-shadow: none !important; }
|
|
@page { margin: 18mm 16mm; }
|
|
/* Better margins for print */
|
|
.card-hover-lift:hover { transform: none !important; box-shadow: none !important; }
|
|
/* Hide interactive elements */
|
|
button, .no-print, [role="button"], nav, aside, footer, header,
|
|
.sidebar, .sidebar-trigger, .breadcrumb { display: none !important; }
|
|
/* Ensure readable text */
|
|
.dark { background: white !important; color: black !important; }
|
|
.dark * { color: inherit !important; background: transparent !important; }
|
|
/* Prevent overflow */
|
|
.overflow-y-auto, .max-h-96, .max-h-80, .max-h-72 { max-height: none !important; overflow: visible !important; }
|
|
}
|
|
|
|
/* ─── Tablet & Stylus Optimization ────────────────────────────────────── */
|
|
|
|
/* Minimum touch target size (44px as per Apple HIG and WCAG guidelines) */
|
|
@layer utilities {
|
|
.min-touch {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
/* Touch-friendly media queries for tablets (768px-1024px) */
|
|
@media (pointer: coarse) {
|
|
/* Increase touch targets for all interactive elements */
|
|
button,
|
|
[role="button"],
|
|
a,
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
select,
|
|
.tabs-trigger,
|
|
[data-state] {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Stylus-friendly: larger focus rings to prevent accidental taps */
|
|
*:focus-visible {
|
|
outline-width: 3px;
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
/* More generous spacing between interactive elements */
|
|
.sidebar-menu-item {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* Prevent text selection while using stylus on interactive elements */
|
|
button, a, [role="button"] {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Slightly larger fonts for touch readability */
|
|
input, select, textarea {
|
|
font-size: 16px; /* Prevents iOS zoom on input focus */
|
|
}
|
|
}
|
|
|
|
/* Tablet-specific viewport styles (768px-1024px) */
|
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
/* Adjust grid layouts for tablet */
|
|
.lg\:grid-cols-5 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
/* More compact spacing for tablet */
|
|
.space-y-7 > * + * {
|
|
margin-top: 1.25rem;
|
|
}
|
|
/* Ensure sidebar doesn't collapse too much */
|
|
[data-sidebar] {
|
|
min-width: 220px;
|
|
}
|
|
}
|
|
|
|
/* Stylus-specific improvements */
|
|
@media (pointer: fine) and (hover: none) {
|
|
/* Stylus devices often lack hover — replace hover effects with active */
|
|
*:hover {
|
|
/* Remove hover-only styles that don't make sense without hover capability */
|
|
}
|
|
/* Larger active/focus states for stylus precision */
|
|
*:active {
|
|
transform: scale(0.98);
|
|
transition: transform 0.1s ease;
|
|
}
|
|
}
|
|
|
|
/* ─── Smooth Scrollbar Styling (touch-friendly) ─────────────────────── */
|
|
@layer utilities {
|
|
.scrollbar-touch::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.scrollbar-touch::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
margin: 4px;
|
|
}
|
|
.scrollbar-touch::-webkit-scrollbar-thumb {
|
|
background: oklch(0.80 0.02 155 / 0.5);
|
|
border-radius: 5px;
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.scrollbar-touch::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(0.65 0.17 155 / 0.7);
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
.dark .scrollbar-touch::-webkit-scrollbar-thumb {
|
|
background: oklch(0.35 0.015 260 / 0.5);
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* Stylus-friendly input styles — larger focus rings for precision tapping */
|
|
.stylus-input:focus-visible {
|
|
outline: 3px solid oklch(0.55 0.17 155);
|
|
outline-offset: 4px;
|
|
box-shadow: 0 0 0 6px oklch(0.55 0.17 155 / 0.15);
|
|
border-radius: 8px;
|
|
transition: box-shadow 0.2s ease-out, outline-offset 0.2s ease-out;
|
|
}
|
|
.dark .stylus-input:focus-visible {
|
|
outline: 3px solid oklch(0.65 0.17 155);
|
|
box-shadow: 0 0 0 6px oklch(0.65 0.17 155 / 0.2);
|
|
}
|
|
}
|
|
|
|
/* ─── Better Print Styles ──────────────────────────────────────────────── */
|
|
@media print {
|
|
/* Ensure emerald accent colors print as dark gray for readability */
|
|
.text-emerald-600, .text-emerald-700, .text-teal-600, .text-teal-700 {
|
|
color: #333 !important;
|
|
}
|
|
.bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-teal-100,
|
|
.bg-gradient-to-r,
|
|
[class*="from-emerald"],
|
|
[class*="from-teal"] {
|
|
background: #f5f5f5 !important;
|
|
}
|
|
|
|
/* Remove animations for print */
|
|
.animate-float, .animate-float-reverse, .animate-float-slow,
|
|
.animate-pulse-soft, .animate-shimmer, .animate-progress-fill,
|
|
.animate-view-fade-in, .animate-enter-fade, .animate-count-up,
|
|
.animate-stagger-in, .animate-chart-shimmer {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Force all cards to have visible borders */
|
|
[class*="border-0"], [class*="border-l-3"] {
|
|
border: 1px solid #ddd !important;
|
|
}
|
|
|
|
/* Remove shadows */
|
|
.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl,
|
|
[class*="shadow-"] {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Notebook export specific styles */
|
|
.no-print { display: none !important; }
|
|
.notebook-export {
|
|
padding: 2cm;
|
|
font-size: 12pt;
|
|
}
|
|
.notebook-export .page-break {
|
|
page-break-after: always;
|
|
}
|
|
.notebook-export .page-content {
|
|
min-height: 24cm;
|
|
}
|
|
/* Lined background for print */
|
|
.notebook-export .page-lined {
|
|
background-image: repeating-linear-gradient(
|
|
transparent, transparent 31px, #e5e7eb 31px, #e5e7eb 32px
|
|
);
|
|
}
|
|
}
|
|
|
|
/* ─── Mobile Responsiveness Utilities ─────────────────────────────────── */
|
|
@layer utilities {
|
|
/* Safe area insets for iOS notch/bottom bar */
|
|
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
|
|
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
|
|
.safe-left { padding-left: env(safe-area-inset-left, 0px); }
|
|
.safe-right { padding-right: env(safe-area-inset-right, 0px); }
|
|
.safe-all {
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
padding-left: env(safe-area-inset-left, 0px);
|
|
padding-right: env(safe-area-inset-right, 0px);
|
|
}
|
|
|
|
/* Prevent pinch-zoom on canvas elements */
|
|
.canvas-no-zoom {
|
|
touch-action: none;
|
|
-ms-touch-action: none;
|
|
}
|
|
|
|
/* Prevent text selection on drawing canvas */
|
|
.canvas-no-select {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
/* Mobile-friendly horizontal scroll container for tables */
|
|
.mobile-scroll-x {
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
/* Mobile stack helper */
|
|
.mobile-stack {
|
|
@media (max-width: 639px) {
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Mobile full-width inputs */
|
|
.mobile-full-width {
|
|
@media (max-width: 639px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Mobile-specific viewport adjustments */
|
|
@media (max-width: 639px) {
|
|
/* Ensure dialogs don't overflow on small screens */
|
|
[role="dialog"] {
|
|
max-width: calc(100vw - 2rem) !important;
|
|
max-height: calc(100vh - 2rem) !important;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
/* Ensure popovers are properly sized */
|
|
[data-radix-popper-content-wrapper] {
|
|
max-width: calc(100vw - 2rem) !important;
|
|
}
|
|
|
|
/* Make card grids stack on mobile */
|
|
.grid {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Fix horizontal overflow */
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Prevent overflow in flex containers */
|
|
.flex {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Make tabs scrollable on mobile */
|
|
[role="tablist"] {
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
[role="tablist"]::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Stack stat cards vertically on mobile */
|
|
.mobile-card-stack {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Notebook grid: 1 column on mobile */
|
|
.mobile-notebook-grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Table horizontal scroll on mobile */
|
|
.mobile-table-scroll {
|
|
display: block;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Full-width inputs on mobile */
|
|
input, select, textarea {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Tablet-specific adjustments (640px-768px) */
|
|
@media (min-width: 640px) and (max-width: 767px) {
|
|
/* Notebook grid: 2 columns on tablet */
|
|
.mobile-notebook-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
|
}
|
|
}
|
|
|
|
/* ─── Micro-interaction Animations ─────────────────────────────────────── */
|
|
@layer utilities {
|
|
/* Fade in + slide up */
|
|
@keyframes fade-in-up {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 0.35s ease-out;
|
|
}
|
|
|
|
/* Scale in from 0.95 to 1 */
|
|
@keyframes scale-in {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.animate-scale-in {
|
|
animation: scale-in 0.2s ease-out;
|
|
}
|
|
|
|
/* Error shake animation */
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
|
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
|
}
|
|
.animate-shake {
|
|
animation: shake 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Success checkmark animation */
|
|
@keyframes success-check {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
50% { transform: scale(1.2); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
.animate-success-check {
|
|
animation: success-check 0.4s ease-out;
|
|
}
|
|
|
|
/* Subtle lift on hover (translateY -1px) */
|
|
.hover-lift {
|
|
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
|
|
}
|
|
.hover-lift:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px -2px oklch(0 0 0 / 0.08);
|
|
}
|
|
.dark .hover-lift:hover {
|
|
box-shadow: 0 4px 12px -2px oklch(0 0 0 / 0.3);
|
|
}
|
|
|
|
/* Animated focus ring */
|
|
.focus-ring {
|
|
transition: box-shadow 0.2s ease-out, outline 0.2s ease-out;
|
|
}
|
|
.focus-ring:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px oklch(0.55 0.17 155 / 0.15);
|
|
}
|
|
.dark .focus-ring:focus-visible {
|
|
outline: 2px solid oklch(0.65 0.17 155);
|
|
box-shadow: 0 0 0 4px oklch(0.65 0.17 155 / 0.2);
|
|
}
|
|
}
|
|
|
|
/* ─── Enhanced Print Styles ────────────────────────────────────────────── */
|
|
@media print {
|
|
/* Better print layout for reports */
|
|
@page {
|
|
margin: 15mm 12mm;
|
|
size: A4;
|
|
}
|
|
|
|
body {
|
|
font-size: 11pt;
|
|
line-height: 1.4;
|
|
color: #000 !important;
|
|
background: #fff !important;
|
|
}
|
|
|
|
/* Print-specific font sizes */
|
|
h1 { font-size: 18pt !important; }
|
|
h2 { font-size: 14pt !important; }
|
|
h3 { font-size: 12pt !important; }
|
|
p, li, td, th { font-size: 10pt !important; }
|
|
|
|
/* Hide interactive elements */
|
|
button, nav, aside, footer, header,
|
|
[role="button"], [role="tablist"], [role="tab"],
|
|
.no-print, [data-sidebar], .sidebar-trigger,
|
|
.breadcrumb, .toast-container, [data-radix-popper-content-wrapper] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Ensure cards have visible borders */
|
|
[class*="card"], [class*="Card"] {
|
|
border: 1px solid #ddd !important;
|
|
break-inside: avoid;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Page break controls */
|
|
.page-break-before { page-break-before: always; }
|
|
.page-break-after { page-break-after: always; }
|
|
.page-break-avoid { page-break-inside: avoid; }
|
|
|
|
/* Remove shadows */
|
|
[class*="shadow"] { box-shadow: none !important; }
|
|
|
|
/* Ensure dark mode prints as white */
|
|
.dark { background: white !important; color: black !important; }
|
|
.dark * { color: inherit !important; background: transparent !important; }
|
|
|
|
/* Remove animations */
|
|
* { animation: none !important; transition: none !important; }
|
|
|
|
/* Ensure overflow is visible */
|
|
.overflow-y-auto, .max-h-96, .max-h-80, .max-h-72 {
|
|
max-height: none !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Print links with URL */
|
|
a[href]:after {
|
|
content: " (" attr(href) ")";
|
|
font-size: 9pt;
|
|
color: #666;
|
|
}
|
|
a[href^="#"]:after { content: ""; }
|
|
|
|
/* Table styling for print */
|
|
table { border-collapse: collapse; }
|
|
th, td { border: 1px solid #ccc; padding: 4px 8px; }
|
|
th { background: #f0f0f0 !important; }
|
|
}
|
|
|
|
/* ─── Dark Mode Polish ─────────────────────────────────────────────────── */
|
|
@layer utilities {
|
|
/* Better dark mode borders */
|
|
.dark-border {
|
|
border-color: oklch(1 0 0 / 8%);
|
|
}
|
|
.dark .dark-border {
|
|
border-color: oklch(1 0 0 / 12%);
|
|
}
|
|
|
|
/* Dark mode card shadows */
|
|
.dark-shadow {
|
|
box-shadow: 0 1px 3px oklch(0 0 0 / 0.06);
|
|
}
|
|
.dark .dark-shadow {
|
|
box-shadow: 0 1px 3px oklch(0 0 0 / 0.3), 0 0 0 1px oklch(1 0 0 / 6%);
|
|
}
|
|
|
|
/* Smooth transitions between light/dark */
|
|
.theme-transition {
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
/* Dark mode specific borders for cards */
|
|
.dark .card-dark-border {
|
|
border-color: oklch(1 0 0 / 8%);
|
|
}
|
|
|
|
/* Dark mode specific shadows for elevated elements */
|
|
.dark .elevated-dark {
|
|
box-shadow: 0 4px 16px oklch(0 0 0 / 0.4), 0 0 0 1px oklch(1 0 0 / 6%);
|
|
}
|
|
|
|
/* Better contrast ratios for dark mode text */
|
|
.dark .text-muted-foreground {
|
|
color: oklch(0.70 0.02 260);
|
|
}
|
|
}
|
|
|
|
/* ─── Accessibility Improvements ───────────────────────────────────────── */
|
|
@layer utilities {
|
|
/* Skip to content link */
|
|
.skip-to-content {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 0;
|
|
z-index: 9999;
|
|
padding: 1rem 1.5rem;
|
|
background: oklch(0.55 0.17 155);
|
|
color: white;
|
|
font-weight: 600;
|
|
border-radius: 0 0 8px 0;
|
|
transition: top 0.2s ease;
|
|
}
|
|
.skip-to-content:focus {
|
|
top: 0;
|
|
}
|
|
|
|
/* Screen reader only utility */
|
|
.sr-only-focusable:focus {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
padding: inherit;
|
|
margin: inherit;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: inherit;
|
|
}
|
|
|
|
/* Focus management for modals */
|
|
.modal-focus-wrapper {
|
|
outline: none;
|
|
}
|
|
.modal-focus-wrapper:focus-visible {
|
|
outline: 2px solid oklch(0.55 0.17 155);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Live region for screen reader announcements */
|
|
.sr-live-region {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (forced-colors: active) {
|
|
.button-primary {
|
|
border: 2px solid ButtonText;
|
|
}
|
|
.card-outline {
|
|
border: 1px solid CanvasText;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-fade-in-up,
|
|
.animate-scale-in,
|
|
.animate-shake,
|
|
.animate-success-check,
|
|
.animate-float,
|
|
.animate-float-reverse,
|
|
.animate-float-slow,
|
|
.animate-pulse-soft,
|
|
.animate-shimmer,
|
|
.animate-progress-fill,
|
|
.animate-view-fade-in,
|
|
.animate-enter-fade,
|
|
.animate-count-up,
|
|
.animate-stagger-in,
|
|
.animate-chart-shimmer,
|
|
.animate-pulse-dot,
|
|
.animate-slide-in,
|
|
.animate-slide-out,
|
|
.hover-lift:hover {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
transform: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ─── Canvas Drawing Performance ───────────────────────────────────────── */
|
|
@layer utilities {
|
|
/* GPU-accelerated canvas rendering */
|
|
.canvas-gpu {
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Canvas layer caching */
|
|
.canvas-layer-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
.canvas-layer-draw {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
/* Performance monitor */
|
|
.fps-counter {
|
|
position: fixed;
|
|
top: 4px;
|
|
right: 4px;
|
|
z-index: 9999;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-family: monospace;
|
|
background: oklch(0 0 0 / 0.7);
|
|
color: oklch(0.55 0.17 155);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/* ─── Report Scheduling Styles (Task 13) ────────────────────────────────── */
|
|
@layer utilities {
|
|
/* Schedule timeline visualization */
|
|
.schedule-timeline {
|
|
position: relative;
|
|
padding-left: 1.5rem;
|
|
}
|
|
.schedule-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(to bottom, oklch(0.55 0.17 155), oklch(0.65 0.12 175));
|
|
border-radius: 1px;
|
|
}
|
|
.schedule-timeline-item {
|
|
position: relative;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
.schedule-timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -1.1rem;
|
|
top: 0.35rem;
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
border-radius: 50%;
|
|
background: oklch(0.55 0.17 155);
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 2px oklch(0.55 0.17 155 / 0.3);
|
|
}
|
|
.schedule-timeline-item.inactive::before {
|
|
background: oklch(0.7 0 0);
|
|
box-shadow: 0 0 0 2px oklch(0.7 0 0 / 0.3);
|
|
}
|
|
.schedule-timeline-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* District card styling */
|
|
.district-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 1rem;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.district-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px -5px oklch(0 0 0 / 0.1), 0 0 0 1px oklch(0.55 0.17 155 / 0.1);
|
|
}
|
|
.district-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(to right, oklch(0.55 0.17 155), oklch(0.65 0.12 175), oklch(0.55 0.17 155));
|
|
}
|
|
.dark .district-card::after {
|
|
background: linear-gradient(to right, oklch(0.65 0.17 155), oklch(0.75 0.12 175), oklch(0.65 0.17 155));
|
|
}
|
|
|
|
/* Cross-school comparison styling */
|
|
.cross-school-comparison {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
.cross-school-comparison .comparison-bar {
|
|
height: 0.5rem;
|
|
border-radius: 9999px;
|
|
overflow: hidden;
|
|
background: oklch(0.95 0.02 155);
|
|
}
|
|
.dark .cross-school-comparison .comparison-bar {
|
|
background: oklch(0.25 0.02 155);
|
|
}
|
|
.cross-school-comparison .comparison-bar-fill {
|
|
height: 100%;
|
|
border-radius: 9999px;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
/* Report generation progress bar */
|
|
.report-progress {
|
|
position: relative;
|
|
height: 0.5rem;
|
|
border-radius: 9999px;
|
|
overflow: hidden;
|
|
background: oklch(0.93 0.02 155);
|
|
}
|
|
.dark .report-progress {
|
|
background: oklch(0.25 0.02 155);
|
|
}
|
|
.report-progress-fill {
|
|
height: 100%;
|
|
border-radius: 9999px;
|
|
background: linear-gradient(to right, oklch(0.55 0.17 155), oklch(0.65 0.12 175));
|
|
transition: width 0.5s ease;
|
|
position: relative;
|
|
}
|
|
.report-progress-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.3), transparent);
|
|
animation: shimmer-progress 2s ease-in-out infinite;
|
|
}
|
|
@keyframes shimmer-progress {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
/* Section divider with gradient line */
|
|
.section-divider {
|
|
position: relative;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, oklch(0.55 0.17 155 / 0.3), transparent);
|
|
margin: 1.5rem 0;
|
|
}
|
|
.dark .section-divider {
|
|
background: linear-gradient(to right, transparent, oklch(0.65 0.17 155 / 0.3), transparent);
|
|
}
|
|
|
|
/* ─── Offline / PWA Styles ──────────────────────────────────────── */
|
|
|
|
/* Offline indicator bar */
|
|
.offline-indicator-bar {
|
|
z-index: 100;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* PWA install prompt */
|
|
.pwa-install-prompt {
|
|
animation: slide-up-fade 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slide-up-fade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Offline badge pulse */
|
|
.offline-badge-pulse {
|
|
animation: offline-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes offline-pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
/* Offline sync spinner */
|
|
.offline-sync-spinner {
|
|
animation: offline-sync-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes offline-sync-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Cached notebook indicator */
|
|
.cached-notebook-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Rate limit status card */
|
|
.rate-limit-card {
|
|
border: 1px solid oklch(0.55 0.17 155 / 0.2);
|
|
border-radius: 0.75rem;
|
|
padding: 1rem;
|
|
background: oklch(0.98 0.01 155 / 0.5);
|
|
}
|
|
.dark .rate-limit-card {
|
|
border-color: oklch(0.55 0.17 155 / 0.15);
|
|
background: oklch(0.2 0.02 155 / 0.3);
|
|
}
|
|
|
|
/* Rate limit bar */
|
|
.rate-limit-bar {
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: oklch(0.92 0.01 155);
|
|
overflow: hidden;
|
|
}
|
|
.dark .rate-limit-bar {
|
|
background: oklch(0.25 0.01 155);
|
|
}
|
|
.rate-limit-bar-fill {
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* PWA standalone mode adjustments */
|
|
@media (display-mode: standalone) {
|
|
body {
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
}
|
|
|
|
/* Offline mode visual feedback */
|
|
.offline-mode-active {
|
|
filter: none;
|
|
}
|
|
|
|
.offline-mode-active .offline-dimmed {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Toast rate limit countdown */
|
|
.rate-limit-countdown {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
color: oklch(0.55 0.17 25);
|
|
}
|
|
}
|