task-manager/client/src/index.css

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

/* Prevent horizontal scroll globally */
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body, #root {
  overflow-x: hidden;
  width: 100%;
}

/* LIGHT MODE */
:root {
  --button-outline: rgba(0,0,0, .10);
  --badge-outline: rgba(0,0,0, .05);

  /* Automatic computation of border around primary / danger buttons */
  --opaque-button-border-intensity: -8; /* In terms of percentages */

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(0,0,0, .03);
  --elevate-2: rgba(0,0,0, .08);

  --background: 0 0% 98%;

  --foreground: 220 9% 15%;

  --border: 220 13% 91%;

  --card: 0 0% 100%;

  --card-foreground: 220 9% 15%;

  --card-border: 220 13% 89%;

  --sidebar: 0 0% 96%;

  --sidebar-foreground: 220 9% 15%;

  --sidebar-border: 220 13% 87%;

  --sidebar-primary: 210 100% 56%;

  --sidebar-primary-foreground: 210 17% 98%;

  --sidebar-accent: 0 0% 94%;

  --sidebar-accent-foreground: 220 9% 15%;

  --sidebar-ring: 210 100% 56%;

  --popover: 0 0% 99%;

  --popover-foreground: 220 9% 15%;

  --popover-border: 220 13% 85%;

  /* Premium Violet/Indigo Base */
  --primary: 250 95% 64%;

  --primary-foreground: 210 17% 98%;

  --secondary: 0 0% 93%;

  --secondary-foreground: 220 9% 15%;

  --muted: 0 0% 95%;

  --muted-foreground: 220 9% 46%;

  --accent: 210 15% 94%;

  --accent-foreground: 220 9% 15%;

  --destructive: 0 84% 60%;

  --destructive-foreground: 0 0% 98%;

  --input: 220 13% 85%;
  --ring: 210 100% 56%;
  --chart-1: 210 100% 50%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;

  --font-sans: "Inter", sans-serif;
  --font-heading: "Outfit", sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 1rem; /* 16px - Softer look */
  --shadow-2xs: 0px 2px 0px 0px hsl(220 13% 91% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(220 13% 91% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 1px 2px -1px hsl(220 13% 91% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 1px 2px -1px hsl(220 13% 91% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 2px 4px -1px hsl(220 13% 91% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 4px 6px -1px hsl(220 13% 91% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(220 13% 91% / 0.00), 0px 8px 10px -1px hsl(220 13% 91% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(220 13% 91% / 0.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */

  /* Fallback for older browsers */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);

  /* Fallback for older browsers */
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

.dark {
  --button-outline: rgba(255,255,255, .10);
  --badge-outline: rgba(255,255,255, .05);

  --opaque-button-border-intensity: 9;  /* In terms of percentages */

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);

  --background: 220 13% 9%;

  --foreground: 210 17% 98%;

  --border: 215 25% 27%;

  --card: 220 13% 14%;

  --card-foreground: 210 17% 98%;

  --card-border: 215 25% 29%;

  --sidebar: 220 13% 11%;

  --sidebar-foreground: 210 17% 98%;

  --sidebar-border: 215 25% 31%;

  --sidebar-primary: 210 100% 66%;

  --sidebar-primary-foreground: 210 17% 98%;

  --sidebar-accent: 220 13% 16%;

  --sidebar-accent-foreground: 210 17% 98%;

  --sidebar-ring: 210 100% 66%;

  --popover: 220 13% 17%;

  --popover-foreground: 210 17% 98%;

  --popover-border: 215 25% 33%;

  --primary: 210 100% 66%;

  --primary-foreground: 210 17% 98%;

  --secondary: 220 13% 19%;

  --secondary-foreground: 210 17% 98%;

  --muted: 220 13% 15%;

  --muted-foreground: 215 16% 65%;

  --accent: 220 13% 17%;

  --accent-foreground: 210 17% 98%;

  --destructive: 0 84% 60%;

  --destructive-foreground: 0 0% 98%;

  --input: 215 25% 35%;
  --ring: 210 100% 66%;
  --chart-1: 210 100% 70%;
  --chart-2: 173 58% 59%;
  --chart-3: 197 37% 44%;
  --chart-4: 43 74% 76%;
  --chart-5: 27 87% 77%;

  --shadow-2xs: 0px 2px 0px 0px hsl(215 25% 27% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(215 25% 27% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 1px 2px -1px hsl(215 25% 27% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 1px 2px -1px hsl(215 25% 27% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 2px 4px -1px hsl(215 25% 27% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 4px 6px -1px hsl(215 25% 27% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(215 25% 27% / 0.00), 0px 8px 10px -1px hsl(215 25% 27% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(215 25% 27% / 0.00);

}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/**
 * Using the elevate system.
 * Automatic contrast adjustment.
 *
 * <element className="hover-elevate" />
 * <element className="active-elevate-2" />
 *
 * // Using the tailwind utility when a data attribute is "on"
 * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
 * // Or manually controlling the toggle state
 * <element className="toggle-elevate toggle-elevated" />
 *
 * Elevation systems have to handle many states.
 * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
 * - toggled or not
 * - focused or not (this is not handled with these utilities)
 *
 * Even without handling focused or not, this is six possible combinations that
 * need to be distinguished from eachother visually.
 */
@layer utilities {

  /* Hide ugly search cancel button in Chrome until we can style it properly */
  input[type="search"]::-webkit-search-cancel-button {
    @apply hidden;
  }

  /* Placeholder styling for contentEditable div */
  [contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
  }

  /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
   * buttons/badges can remove the automatic brightness adjustment on interactions
   * and program their own. */
  .no-default-hover-elevate {}

  .no-default-active-elevate {}


  /**
   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
   * This way they can stack/compound. Both will overlap the parent's borders!
   * So borders will be automatically adjusted both on toggle, and hover/active,
   * and they will be compounded.
   */
  .toggle-elevate::before,
  .toggle-elevate-2::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    /*border-radius: inherit;   match rounded corners */
    border-radius: inherit;
    z-index: -1;
    /* sits behind content but above backdrop */
  }

  .toggle-elevate.toggle-elevated::before {
    background-color: var(--elevate-2);
  }

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
  .border.toggle-elevate::before {
    inset: -1px;
  }

  /* Does not work on elements with overflow:hidden! */
  .hover-elevate:not(.no-default-hover-elevate),
  .active-elevate:not(.no-default-active-elevate),
  .hover-elevate-2:not(.no-default-hover-elevate),
  .active-elevate-2:not(.no-default-active-elevate) {
    position: relative;
    z-index: 0;
  }

  .hover-elevate:not(.no-default-hover-elevate)::after,
  .active-elevate:not(.no-default-active-elevate)::after,
  .hover-elevate-2:not(.no-default-hover-elevate)::after,
  .active-elevate-2:not(.no-default-active-elevate)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0px;
    /*border-radius: inherit;   match rounded corners */
    border-radius: inherit;
    z-index: 999;
    /* sits in front of content */
  }

  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
  .active-elevate:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-1);
  }

  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
  .active-elevate-2:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-2);
  }

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
  .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
    inset: -1px;
  }
}

/* ============================================
   ADHD MODE STYLES
   Calmer colors, reduced cognitive load,
   larger touch targets, and time-awareness
   ============================================ */

/* ADHD Mode Variables */
:root {
  --adhd-timer-green: 142 76% 36%;
  --adhd-timer-yellow: 45 93% 47%;
  --adhd-timer-red: 0 84% 60%;
  --adhd-calm-primary: 210 40% 52%;
  --adhd-calm-accent: 199 89% 48%;
  --adhd-success-green: 142 71% 45%;
}

.dark {
  --adhd-timer-green: 142 76% 46%;
  --adhd-timer-yellow: 45 93% 57%;
  --adhd-timer-red: 0 84% 65%;
  --adhd-calm-primary: 210 50% 62%;
  --adhd-calm-accent: 199 89% 58%;
  --adhd-success-green: 142 71% 55%;
}

/* ADHD Mode - Global adjustments when enabled */
.adhd-mode {
  /* Calmer color palette */
  --primary: var(--adhd-calm-primary);
  --ring: var(--adhd-calm-accent);

  /* Larger border radius for softer appearance */
  --radius: 1.25rem;
}

.adhd-mode .card,
.adhd-mode .dialog-content,
.adhd-mode .popover-content {
  border-radius: var(--radius);
}

/* Reduced Motion - Disable animations for users who need focus */
.reduced-motion,
.reduced-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* Larger Touch Targets for ADHD Mode */
/* Only increase height, not width - width breaks flex layouts and icon buttons */
/* Exclude switches, checkboxes, and sliders from larger targets - they have specific sizing */
.larger-targets button:not([data-size="icon"]):not([role="switch"]):not([role="checkbox"]),
.larger-targets [role="button"]:not([data-size="icon"]):not([role="switch"]):not([role="checkbox"]) {
  min-height: 44px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Icon buttons get increased size as square - but not switches */
.larger-targets button[data-size="icon"]:not([role="switch"]),
.larger-targets [role="button"][data-size="icon"]:not([role="switch"]) {
  min-height: 44px;
  min-width: 44px;
}

/* Form inputs and selects - exclude checkbox and switch */
.larger-targets input:not([type="checkbox"]):not([role="switch"]),
.larger-targets select,
.larger-targets textarea {
  min-height: 44px;
}

/* Links only need height adjustment when they look like buttons */
.larger-targets a[role="button"] {
  min-height: 44px;
}

.larger-targets .sidebar-menu-button {
  min-height: 52px;
}

/* Checkboxes and switches should maintain their aspect ratio */
.larger-targets [role="switch"],
.larger-targets [role="checkbox"],
.larger-targets input[type="checkbox"] {
  min-height: auto !important;
  min-width: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Specific fix for Radix checkbox buttons - ensure square aspect ratio */
.larger-targets button[role="checkbox"] {
  height: 1rem !important;
  width: 1rem !important;
  min-height: 1rem !important;
  min-width: 1rem !important;
  padding: 0 !important;
}

/* Visual Timer Color Classes */
.timer-green {
  color: hsl(var(--adhd-timer-green));
}

.timer-yellow {
  color: hsl(var(--adhd-timer-yellow));
}

.timer-red {
  color: hsl(var(--adhd-timer-red));
}

.timer-stroke-green {
  stroke: hsl(var(--adhd-timer-green));
}

.timer-stroke-yellow {
  stroke: hsl(var(--adhd-timer-yellow));
}

.timer-stroke-red {
  stroke: hsl(var(--adhd-timer-red));
}

/* Break Reminder Pulse Animation */
@keyframes break-reminder-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

.break-reminder-pulse {
  animation: break-reminder-pulse 2s ease-in-out infinite;
}

/* Encouragement Toast Animation */
@keyframes encouragement-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.encouragement-bounce {
  animation: encouragement-bounce 0.5s ease-out;
}

/* Quick Win Card Highlight */
@keyframes quick-win-glow {
  0%, 100% {
    box-shadow: 0 0 5px 0 hsl(var(--adhd-success-green) / 0.3);
  }
  50% {
    box-shadow: 0 0 15px 2px hsl(var(--adhd-success-green) / 0.5);
  }
}

.quick-win-highlight {
  animation: quick-win-glow 2s ease-in-out infinite;
}

/* XP Micro-Reward Animation */
@keyframes xp-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(1.2);
  }
}

.xp-float {
  animation: xp-float 1s ease-out forwards;
}

/* Focus Mode Overlay */
.single-task-overlay {
  backdrop-filter: blur(4px);
  background: hsl(var(--background) / 0.95);
}

/* Energy Level Indicators */
.energy-low {
  border-left: 4px solid hsl(var(--adhd-timer-red));
}

.energy-medium {
  border-left: 4px solid hsl(var(--adhd-timer-yellow));
}

.energy-high {
  border-left: 4px solid hsl(var(--adhd-timer-green));
}

/* Hyperfocus Warning Styles */
@keyframes hyperfocus-warning {
  0%, 100% {
    border-color: hsl(var(--adhd-timer-yellow));
  }
  50% {
    border-color: hsl(var(--adhd-timer-red));
  }
}

.hyperfocus-warning {
  animation: hyperfocus-warning 1.5s ease-in-out infinite;
  border-width: 2px;
  border-style: solid;
}

/* Body Doubling Session Active Indicator */
@keyframes session-active-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(var(--adhd-calm-accent) / 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px hsl(var(--adhd-calm-accent) / 0);
  }
}

.session-active {
  animation: session-active-pulse 2s ease-out infinite;
}

/* ADHD Settings Panel Styles */
.adhd-settings-section {
  @apply p-4 rounded-xl bg-muted/50 border border-border;
}

.adhd-settings-section h3 {
  @apply text-lg font-semibold mb-4 flex items-center gap-2;
}

/* Task Breakdown Subtask Styles */
.subtask-item {
  @apply p-3 rounded-lg bg-background border border-border hover:border-primary/50 transition-colors cursor-pointer;
}

.subtask-item.completed {
  @apply bg-muted/50 opacity-70;
}

/* Five Minute Starter Progress Ring */
.five-min-progress {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Calm Background for Focus Sessions */
.calm-gradient {
  background: linear-gradient(
    135deg,
    hsl(var(--background)) 0%,
    hsl(var(--adhd-calm-primary) / 0.05) 50%,
    hsl(var(--adhd-calm-accent) / 0.05) 100%
  );
}