MOPC-Portal/src/app/globals.css

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@import "tailwindcss";

/* Source the JS config for extended theme values */
@config "../../tailwind.config.ts";

/* Tremor generates Tailwind utility classes dynamically via template literals
   (e.g. `fill-${color}-${shade}`). Tailwind v4's scanner cannot detect these,
   so we must explicitly safelist every color+shade+property combination. */
@source "../../node_modules/@tremor/react/dist/**/*.js";

/* Safelist Tremor chart color utilities — all colors × key shades × fill/stroke/bg */
@source inline("{fill,stroke,bg,text}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
@source inline("hover:{bg,text,border}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");
@source inline("{border,ring}-{blue,emerald,amber,violet,rose,indigo,sky,fuchsia,lime,orange,cyan,teal,purple,slate,gray,zinc,neutral,stone,red,yellow,green,pink}-{50,100,200,300,400,500,600,700,800,900,950}");

/* Safelist Tremor design token utility classes */
@source inline("{fill,stroke,bg,text,border}-tremor-{brand,background,border,content,content-emphasis,default,label,card,dropdown}");

/* Tremor design tokens — normally registered by Tremor's TW3 plugin.
   We define them manually for Tailwind v4 compatibility. */
@theme {
  --color-tremor-brand: var(--color-blue-500);
  --color-tremor-brand-emphasis: var(--color-blue-700);
  --color-tremor-brand-inverted: #fff;
  --color-tremor-brand-muted: var(--color-blue-200);
  --color-tremor-brand-faint: var(--color-blue-50);
  --color-tremor-background: #fff;
  --color-tremor-background-emphasis: var(--color-gray-700);
  --color-tremor-background-muted: var(--color-gray-50);
  --color-tremor-background-subtle: var(--color-gray-100);
  --color-tremor-border: var(--color-gray-200);
  --color-tremor-content: var(--color-gray-500);
  --color-tremor-content-emphasis: var(--color-gray-700);
  --color-tremor-content-strong: var(--color-gray-900);
  --color-tremor-content-subtle: var(--color-gray-400);
  --color-tremor-content-inverted: #fff;
  --color-tremor-ring: var(--color-gray-200);
  --color-tremor-default: var(--color-gray-500);
  --color-tremor-label: var(--color-gray-400);
  --color-tremor-card: #fff;
  --color-tremor-dropdown: #fff;
}

/* Theme variables - using CSS custom properties with Tailwind v4 @theme */
@theme {
  /* Container */
  --container-2xl: 1400px;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;

  /* Font families */
  --font-sans: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Border radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Custom font sizes */
  --text-display-lg: 3rem;
  --text-display-lg--line-height: 1.1;
  --text-display-lg--font-weight: 700;

  --text-display: 2.25rem;
  --text-display--line-height: 1.2;
  --text-display--font-weight: 700;

  --text-heading: 1.5rem;
  --text-heading--line-height: 1.3;
  --text-heading--font-weight: 600;

  --text-subheading: 1.125rem;
  --text-subheading--line-height: 1.4;
  --text-subheading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.5;
  --text-body--font-weight: 400;

  --text-small: 0.875rem;
  --text-small--line-height: 1.5;
  --text-small--font-weight: 400;

  --text-tiny: 0.75rem;
  --text-tiny--line-height: 1.5;
  --text-tiny--font-weight: 400;

  /* Brand colors */
  --color-brand-red: #de0f1e;
  --color-brand-red-hover: #c00d1a;
  --color-brand-red-light: #fee2e2;
  --color-brand-blue: #053d57;
  --color-brand-blue-light: #0a5a7c;
  --color-brand-teal: #557f8c;
  --color-brand-teal-light: #6a9aa8;

  /* Keyframes */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-fade-in: fade-in 0.2s ease-out;
  --animate-fade-out: fade-out 0.2s ease-out;
  --animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
  --animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slide-in-from-top {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-from-bottom {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@layer base {
  :root {
    /* MOPC Brand Colors - mapped to shadcn/ui variables */
    --background: 0 0% 99.5%;
    --foreground: 220 13% 18%;

    --card: 0 0% 100%;
    --card-foreground: 220 13% 18%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 13% 18%;

    /* Primary - MOPC Red */
    --primary: 354 90% 47%;
    --primary-foreground: 0 0% 100%;

    /* Secondary - Warm gray */
    --secondary: 30 6% 96%;
    --secondary-foreground: 220 13% 18%;

    --muted: 30 6% 96%;
    --muted-foreground: 220 8% 46%;

    /* Accent - Light teal tint for hover states */
    --accent: 194 30% 94%;
    --accent-foreground: 220 13% 18%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 6% 91%;
    --input: 30 6% 91%;
    --ring: 220 9% 76%;

    --radius: 0.5rem;

    /* Semantic colors */
    --success: 142 76% 36%;
    --warning: 38 92% 50%;
    --info: 194 25% 44%;
  }

  .dark {
    --background: 220 15% 8%;
    --foreground: 0 0% 98%;

    --card: 220 15% 10%;
    --card-foreground: 0 0% 98%;

    --popover: 220 15% 10%;
    --popover-foreground: 0 0% 98%;

    --primary: 354 90% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 18%;
    --secondary-foreground: 0 0% 98%;

    --muted: 220 15% 18%;
    --muted-foreground: 0 0% 64%;

    --accent: 194 20% 18%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 15% 22%;
    --input: 220 15% 22%;
    --ring: 220 10% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground overflow-x-hidden;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Focus styles */
  *:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  .leaflet-container:focus,
  .leaflet-container:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    ring: none;
    --tw-ring-shadow: none;
    --tw-ring-offset-shadow: none;
  }

  /* Selection color */
  ::selection {
    @apply bg-primary/20 text-foreground;
  }
}

@layer utilities {
  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Text balance for better typography */
  .text-balance {
    text-wrap: balance;
  }

  /* Animation utilities */
  .animate-in {
    animation: fade-in 0.2s ease-out, slide-in-from-bottom 0.3s ease-out;
  }

  /* Container for admin/jury views */
  .container-app {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }
}

/* Custom scrollbar for non-hidden areas */
@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
  }
}

/* Tremor chart tooltip fix — ensure solid background */
[class*="tremor-"] [role="tooltip"],
.recharts-tooltip-wrapper .recharts-default-tooltip,
div[class*="tremor"][class*="tooltip"],
div[class*="recharts-tooltip"] {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  opacity: 1 !important;
}

.dark div[class*="tremor"][class*="tooltip"],
.dark .recharts-tooltip-wrapper .recharts-default-tooltip,
.dark div[class*="recharts-tooltip"] {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* Tremor/Recharts tooltip color indicator icons — fix rendering */
.recharts-tooltip-wrapper svg.recharts-surface {
  display: inline-block !important;
  overflow: visible !important;
}

/* Tremor custom tooltip color dots */
[class*="tremor"] [role="tooltip"] span[class*="bg-"],
[class*="tremor"] [role="tooltip"] span[style*="background"] {
  border-radius: 2px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  flex-shrink: 0 !important;
}

/* Recharts default tooltip icon fix — ensure SVG paths have correct fill */
.recharts-default-tooltip .recharts-tooltip-item-list {
  padding: 0 !important;
}

.recharts-default-tooltip .recharts-tooltip-item svg {
  border: none !important;
}