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;
}

/* ── FullCalendar "+more" popover fixes ── */
.fc .fc-more-popover {
  background-color: hsl(0 0% 5%);
  border-color: hsl(0 0% 14.9%);
  border-radius: 0.5rem;
  min-width: 220px;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.5);
}

.fc .fc-more-popover .fc-popover-header {
  background-color: hsl(0 0% 7%);
  color: hsl(0 0% 98%);
  padding: 8px 12px;
  border-radius: 0.5rem 0.5rem 0 0;
}

.fc .fc-more-popover .fc-popover-body {
  padding: 8px;
}

/* Fix broken close icon — replace font icon with a CSS X */
.fc .fc-more-popover .fc-popover-close {
  font-size: 0;
  width: 24px;
  height: 24px;
  position: relative;
  opacity: 0.7;
  cursor: pointer;
}

.fc .fc-more-popover .fc-popover-close:hover {
  opacity: 1;
}

.fc .fc-more-popover .fc-popover-close::before,
.fc .fc-more-popover .fc-popover-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: hsl(0 0% 98%);
  border-radius: 1px;
}

.fc .fc-more-popover .fc-popover-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.fc .fc-more-popover .fc-popover-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 767px) {
  .fc .fc-more-popover {
    min-width: 200px;
  }
  .fc .fc-more-popover .fc-popover-body {
    padding: 6px;
  }
  .fc .fc-more-popover .fc-daygrid-event {
    font-size: 0.7rem;
    padding: 2px 6px;
    margin-bottom: 2px;
  }
}

/* ── 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);
}


/*
 * Mobile font scaling — overrides Tailwind text utilities below 768px.
 * Applied via .mobile-scale class on <main> in AppLayout.tsx.
 * These selectors rely on cascade order (loaded after Tailwind utilities).
 * Arbitrary sizes like text-[9px] are NOT captured — see W-03 override below.
 */
/* ── Global mobile content scaling ── */
/* Scales down all page content text on mobile. Navbar and UMBRA title are excluded
   because they live outside .mobile-scale and use their own sizing. */
@media (max-width: 767px) {
  .mobile-scale {
    font-size: 0.8125rem; /* 13px base instead of 16px */
  }
  .mobile-scale h1 {
    font-size: 1.375rem !important; /* 22px instead of 30px */
  }
  .mobile-scale h2 {
    font-size: 1.125rem !important;
  }
  .mobile-scale .text-sm {
    font-size: 0.6875rem; /* 11px */
  }
  .mobile-scale .text-xs {
    font-size: 0.625rem; /* 10px — floor for readability */
  }
  .mobile-scale .text-lg {
    font-size: 0.9375rem; /* 15px */
  }
  .mobile-scale .text-xl {
    font-size: 1.0625rem; /* 17px */
  }
  .mobile-scale .text-2xl {
    font-size: 1.1875rem; /* 19px */
  }
  .mobile-scale .text-3xl {
    font-size: 1.375rem; /* 22px */
  }
  /* W-03: Enforce 10px floor for arbitrary small sizes */
  .mobile-scale [class*="text-\[9px\]"] {
    font-size: 10px !important;
  }
}

/* ── Mobile touch optimisation ── */
@media (max-width: 767px) {
  button, a, [role="button"], input, select, textarea {
    touch-action: manipulation;
  }
}

/* ── FullCalendar mobile overrides ── */
@media (max-width: 767px) {
  .fc .fc-daygrid-event {
    font-size: 0.6rem;
    padding: 0 2px;
    line-height: 1.25;
  }

  /* Hide event times in month view on mobile — Google Calendar style */
  .fc .fc-daygrid-event .fc-event-time {
    display: none;
  }

  .fc .fc-timegrid-event {
    font-size: 0.6rem;
  }

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

  .fc .fc-daygrid-day-number {
    font-size: 0.7rem;
    padding: 2px 4px;
  }

  .fc .fc-col-header-cell-cushion {
    font-size: 0.65rem;
    padding: 3px 2px;
  }

  .fc .fc-timegrid-slot-label {
    font-size: 0.6rem;
  }

  .fc .fc-daygrid-more-link {
    font-size: 0.625rem;
  }
}
/* ── 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; }