UMBRA/frontend/src/index.css

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

@layer base {
  :root {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 98%;
    --card-elevated: 0 0% 7%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 98%;
    --primary: var(--accent-h) var(--accent-s) var(--accent-l);
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 63.9%;
    --accent-color: var(--accent-h) var(--accent-s) var(--accent-l);
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: var(--accent-h) var(--accent-s) var(--accent-l);
    --radius: 0.5rem;

    /* Default accent: cyan */
    --accent-h: 187;
    --accent-s: 85.7%;
    --accent-l: 53.3%;

    /* Transitions */
    --transition-fast: 150ms;
    --transition-normal: 250ms;

    /* Fonts */
    --font-heading: 'Sora', sans-serif;
    --font-body: 'DM Sans', sans-serif;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-body);
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
  }
}

/* Custom Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(0 0% 20%) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: hsl(0 0% 20%);
  border-radius: 3px;
}

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

/* FullCalendar Dark Theme Overrides */
.fc {
  --fc-border-color: hsl(0 0% 14.9%);
  --fc-button-bg-color: hsl(0 0% 10%);
  --fc-button-border-color: hsl(0 0% 14.9%);
  --fc-button-hover-bg-color: hsl(0 0% 15%);
  --fc-button-hover-border-color: hsl(0 0% 20%);
  --fc-button-active-bg-color: hsl(var(--accent-color));
  --fc-button-active-border-color: hsl(var(--accent-color));
  --fc-event-bg-color: hsl(var(--accent-color));
  --fc-event-border-color: hsl(var(--accent-color));
  --fc-event-text-color: hsl(0 0% 98%);
  --fc-page-bg-color: hsl(0 0% 3.9%);
  --fc-neutral-bg-color: hsl(0 0% 5%);
  --fc-neutral-text-color: hsl(0 0% 98%);
  --fc-list-event-hover-bg-color: hsl(0 0% 10%);
  --fc-today-bg-color: hsl(var(--accent-color) / 0.08);
  --fc-now-indicator-color: hsl(var(--accent-color));
}

/* Hide default FC toolbar (we use a custom React toolbar) */
.fc .fc-header-toolbar {
  display: none !important;
}

.fc .fc-button-primary {
  background-color: var(--fc-button-bg-color);
  border-color: var(--fc-button-border-color);
  color: hsl(0 0% 98%);
}

.fc .fc-button-primary:hover {
  background-color: var(--fc-button-hover-bg-color);
  border-color: var(--fc-button-hover-border-color);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--fc-button-active-bg-color);
  border-color: var(--fc-button-active-border-color);
}

/* Today highlight — accent tint */
.fc .fc-daygrid-day.fc-day-today {
  background-color: hsl(var(--accent-color) / 0.08) !important;
}

.fc .fc-timegrid-col.fc-day-today {
  background-color: hsl(var(--accent-color) / 0.06) !important;
}

/* Now indicator — accent colored line */
.fc .fc-timegrid-now-indicator-line {
  border-color: hsl(var(--accent-color));
  border-width: 2px;
}

.fc .fc-timegrid-now-indicator-arrow {
  border-top-color: hsl(var(--accent-color));
  border-bottom-color: hsl(var(--accent-color));
}

.fc .fc-col-header-cell {
  background-color: hsl(0 0% 5%);
  border-color: var(--fc-border-color);
}

.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--fc-border-color);
}

.fc-theme-standard .fc-scrollgrid {
  border-color: var(--fc-border-color);
}

.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
  color: hsl(0 0% 98%);
}

.fc .fc-timegrid-slot {
  border-color: var(--fc-border-color);
}

.fc .fc-timegrid-slot-label {
  color: hsl(0 0% 63.9%);
}

/* Event pills — compact rounded style */
.fc .fc-daygrid-event {
  border-radius: 4px;
  font-size: 0.75rem;
  padding: 0px 4px;
  line-height: 1.4;
}

.fc .fc-timegrid-event {
  border-radius: 4px;
  font-size: 0.75rem;
}

.fc .fc-timegrid-event .fc-event-main {
  padding: 2px 4px;
}

/* Day number styling for today */
.fc .fc-day-today .fc-daygrid-day-number {
  color: hsl(var(--accent-color));
  font-weight: 600;
}

/* ── Chromium native date picker icon fix (safety net) ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* Hide native picker icon inside DatePicker wrapper (custom icon replaces it) */
/* Chromium: remove the native calendar icon entirely */
.datepicker-wrapper input::-webkit-calendar-picker-indicator {
  display: none;
}
/* Firefox: No CSS pseudo-element exists to hide the native calendar icon.
   The custom button covers the native icon zone with a solid background so
   only one icon is visible regardless of browser. */

/* ── Form validation — red outline only after submit attempt ── */
form[data-submitted] input:invalid,
form[data-submitted] select:invalid,
form[data-submitted] textarea:invalid {
  border-color: hsl(0 62.8% 50%);
  box-shadow: 0 0 0 2px hsl(0 62.8% 50% / 0.25);
}

/* DatePicker trigger inherits red border from its hidden required sibling */
form[data-submitted] input:invalid + button {
  border-color: hsl(0 62.8% 50%);
  box-shadow: 0 0 0 2px hsl(0 62.8% 50% / 0.25);
}

/* ── Ambient background animations ── */

@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(60px, 40px); }
  50% { transform: translate(-30px, 80px); }
  75% { transform: translate(40px, -20px); }
}

@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-50px, -30px); }
  50% { transform: translate(40px, -60px); }
  75% { transform: translate(-20px, 40px); }
}

@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(30px, -50px); }
  66% { transform: translate(-40px, 30px); }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-drift-1 { animation: drift-1 25s ease-in-out infinite; }
.animate-drift-2 { animation: drift-2 30s ease-in-out infinite; }
.animate-drift-3 { animation: drift-3 20s ease-in-out infinite; }
.animate-slide-up { animation: slide-up 0.5s ease-out both; }
.animate-fade-in { animation: fade-in 0.3s ease-out both; }