pulse/frontend-modern/src/index.css

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

/* Update banner animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slideDown {
  animation: slideDown 0.3s ease-out;
}

/* Notification animations */
@keyframes slide-in-card {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

.animate-slide-in-card {
  animation: slide-in-card 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom styles */
@layer base {
  :root {
    /*
      Layout tokens.
      Goal: keep the app readable (not "widescreen"), but avoid self-inflicted cramping on large monitors.
    */
    --pulse-shell-max-width: min(97vw, 1560px);
    --pulse-shell-padding-inline: clamp(0.75rem, 1.2vw, 1.5rem);
    --pulse-panel-padding: clamp(0.75rem, 1.4vw, 1.25rem);

    /* Semantic Colors - Light Mode */
    --color-bg-base: theme('colors.slate.100');
    --color-bg-surface: theme('colors.white');
    --color-bg-surface-hover: theme('colors.slate.50');
    --color-bg-surface-alt: theme('colors.slate.100');
    --color-border-subtle: theme('colors.slate.100');
    --color-border-base: theme('colors.slate.200');
    --color-text-base: theme('colors.slate.900');
    --color-text-muted: theme('colors.slate.500');
  }

  .dark {
    /* Semantic Colors - Dark Mode */
    --color-bg-base: theme('colors.slate.900');
    --color-bg-surface: theme('colors.slate.800');
    --color-bg-surface-hover: theme('colors.slate.700');
    --color-bg-surface-alt: theme('colors.slate.800');
    /* Fallback */
    --color-border-subtle: theme('colors.slate.800');
    --color-border-base: theme('colors.slate.700');
    --color-text-base: theme('colors.slate.100');
    --color-text-muted: theme('colors.slate.400');
  }

  body {
    background-color: var(--color-bg-base);
    color: var(--color-text-base);
    /* Ensure body scrollbar follows our styling */
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Form elements: inherit surface background so they don't show white in dark mode */
  select,
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  textarea {
    background-color: var(--color-bg-surface);
    color: var(--color-text-base);
  }

  /* Hide scrollbars during transitions to prevent flicker */
  html {
    overflow-y: scroll;
    scroll-behavior: smooth;
  }
}

@layer components {
  .touch-scroll {
    -webkit-overflow-scrolling: touch;
  }

  .app-scroll-shell {
    scrollbar-gutter: stable;
  }

  .pulse-shell {
    width: 100%;
    max-width: var(--pulse-shell-max-width);
    margin-inline: auto;
    padding-inline: var(--pulse-shell-padding-inline);
    transition: padding-inline 0.3s ease;
  }

  @media (max-width: 640px) {
    .pulse-shell {
      padding-inline: 0.5rem;
    }
  }

  /* Full-width mode - removes max-width constraint for large monitors */
  .pulse-shell--full-width {
    --pulse-shell-max-width: 100%;
    --pulse-shell-padding-inline: clamp(1rem, 2vw, 3rem);
  }

  .pulse-panel {
    padding: var(--pulse-panel-padding);
  }

  @media (max-width: 640px) {
    .pulse-panel {
      padding: 0.5rem;
    }
  }

  /* Upward box-shadow shield for sticky chart panels.
     Fills the transparent space-y-3 margin above the element so
     scrolling text doesn't peek through when the element is stuck. */
  .sticky-shield {
    box-shadow: 0 -0.75rem 0 0 white;
  }

  .dark .sticky-shield {
    box-shadow: 0 -0.75rem 0 0 #1f2937;
  }

  /* Card styles */
  .card {
    @apply bg-surface border border-border shadow-sm rounded-md;
  }

  .table-row {
    @apply border-b border-border hover:bg-surface-hover;
  }

  /* Form input — reusable base for text inputs, textareas, selects */
  .form-input {
    @apply w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .form-select {
    @apply form-input pr-8 appearance-none;
  }

  /* Progress bars */
  .progress-fill {
    @apply h-full;
    transition: width 300ms ease-out;
  }

  /* Custom scrollbar - subtle styling */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
  }

  .dark .custom-scrollbar {
    scrollbar-color: theme('colors.gray.700') theme('colors.gray.800');
  }

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

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-slate-100 dark:bg-slate-800;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-slate-300 dark:bg-slate-700 rounded-full;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400 dark:bg-slate-600;
  }
}

/* Global scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
  /* gray-400 with transparency */
}

.dark * {
  scrollbar-color: rgba(55, 65, 81, 0.5) transparent;
  /* gray-700 with transparency */
}

/* Make scrollbars even more subtle on hover */
*:hover {
  scrollbar-color: rgba(156, 163, 175, 0.7) rgba(243, 244, 246, 0.5);
  /* Slightly more visible on hover */
}

.dark *:hover {
  scrollbar-color: rgba(75, 85, 99, 0.7) rgba(31, 41, 55, 0.3);
  /* dark mode hover */
}

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

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

*::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 10px;
}

.dark *::-webkit-scrollbar-thumb {
  background-color: rgba(55, 65, 81, 0.5);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.8);
}

.dark *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(75, 85, 99, 0.8);
}

/* Dark mode transitions - Only apply to elements that actually change colors */
body,
.card,
.table-row,
.bg-white,
.bg-slate-50,
.bg-slate-100,
.bg-slate-200,
.bg-slate-300,
.bg-slate-700,
.bg-slate-800,
.bg-slate-900,
.text-slate-500,
.text-slate-600,
.text-slate-700,
.text-slate-800,
.text-slate-900,
.border-slate-200,
.border-slate-300,
.border-slate-600,
.border-slate-700,
.dark\:bg-slate-700,
.dark\:bg-slate-800,
.dark\:bg-slate-900,
.dark\:text-slate-100,
.dark\:text-slate-200,
.dark\:text-slate-300,
.dark\:text-slate-400,
.dark\:border-slate-600,
.dark\:border-slate-700 {
  transition:
    background-color 150ms ease-in-out,
    color 150ms ease-in-out,
    border-color 150ms ease-in-out;
}

/* Pulse logo animation - subtle ripple effect */
@keyframes pulse-logo {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.05);
  }

  50% {
    transform: scale(1);
  }
}

@keyframes pulse-ring {
  0%,
  100% {
    opacity: 0.92;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.animate-pulse-logo {
  animation: pulse-logo 0.8s cubic-bezier(0.4, 0, 0.6, 1);
  transform-origin: center;
}

.animate-pulse-logo .pulse-ring {
  animation: pulse-ring 0.8s cubic-bezier(0.4, 0, 0.6, 1);
  transform-origin: center;
  transform-box: fill-box;
}

/* Stable table layout */
.table-fixed {
  table-layout: fixed;
}

/* Prevent text from affecting column widths */
.table-fixed td,
.table-fixed th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep name column single line to avoid wrapping while giving it more space */
.table-fixed td:first-child {
  white-space: nowrap;
}

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

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

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pb-safe-or-20 {
  padding-bottom: max(5rem, env(safe-area-inset-bottom, 5rem));
}

/* Login page animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.75;
  }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

/* Staggered Entry Animation */
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-enter {
  animation: enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}