travelplanning/frontend/src/index.css

@import "tailwindcss";

@layer base {
  html, body, #root, .app-container {
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

@layer components {
  .banner-location-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 80px;
    display: inline-block;
    vertical-align: bottom;
    cursor: help; /* Hiển thị biểu tượng giúp đỡ để gợi ý có tooltip */
  }

  @media (min-width: 640px) {
    .banner-location-text {
      max-width: 150px;
    }
  }
}

@keyframes bell-ring {
  0% { transform: rotate(0); }
  5% { transform: rotate(30deg); }
  10% { transform: rotate(-28deg); }
  15% { transform: rotate(34deg); }
  20% { transform: rotate(-32deg); }
  25% { transform: rotate(30deg); }
  30% { transform: rotate(-28deg); }
  35% { transform: rotate(26deg); }
  40% { transform: rotate(-24deg); }
  45% { transform: rotate(22deg); }
  50% { transform: rotate(-20deg); }
  55% { transform: rotate(18deg); }
  60% { transform: rotate(-16deg); }
  65% { transform: rotate(14deg); }
  70% { transform: rotate(-12deg); }
  75% { transform: rotate(10deg); }
  80% { transform: rotate(-8deg); }
  85% { transform: rotate(6deg); }
  90% { transform: rotate(-4deg); }
  95% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

.animate-ring {
  display: inline-block !important;
  transform-origin: top center !important;
  transform-box: fill-box !important;
  animation: bell-ring 1.5s ease-in-out infinite !important;
}

/* Light theme overrides for Member Dashboard */
html.light body,
html.light .app-container {
  background-color: #f8fafc;
  color: #334155;
}

html.light .bg-slate-950 {
  background-color: #f8fafc !important;
  color: #1e293b !important;
}

html.light .bg-slate-900 {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}

html.light .bg-slate-900\/60 {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-slate-900\/30 {
  background-color: rgba(255, 255, 255, 0.4) !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-slate-950\/40 {
  background-color: #f1f5f9 !important;
}

html.light .text-white,
html.light .text-white\/95,
html.light .text-slate-100 {
  color: #0f172a !important;
}

html.light .text-slate-400,
html.light .text-slate-350,
html.light .text-slate-300 {
  color: #475569 !important;
}

html.light .border-slate-800,
html.light .border-slate-800\/60,
html.light .border-slate-800\/80,
html.light .border-slate-900,
html.light .border-slate-700\/50 {
  border-color: #cbd5e1 !important;
}

html.light .hover\:bg-slate-800\/50:hover {
  background-color: rgba(226, 232, 240, 0.5) !important;
}

html.light .hover\:bg-slate-850:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-white\/10:hover,
html.light .hover\:bg-white\/5:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Chat bubble styling overrides */
html.light .bg-slate-850\/50 {
  background-color: rgba(241, 245, 249, 0.5) !important;
}

html.light .bg-slate-850 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .bg-slate-800\/60 {
  background-color: rgba(226, 232, 240, 0.6) !important;
}

html.light .bg-slate-800\/40 {
  background-color: rgba(226, 232, 240, 0.4) !important;
}

html.light .bg-slate-950\/60 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

html.light .bg-rose-950\/10 {
  background-color: #fef2f2 !important;
  border-color: #fee2e2 !important;
}

html.light .text-rose-400 {
  color: #dc2626 !important;
}

html.light .bg-rose-950\/40 {
  background-color: #fee2e2 !important;
}

html.light .border-rose-900\/50 {
  border-color: #fecaca !important;
}

/* Additional light mode overrides for MemberDashboard and complex classes */
html.light [class*="bg-slate-800"] {
  background-color: #f0f1f5 !important;
  color: #0f172a !important;
}

html.light [class*="bg-slate-900"] {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light [class*="text-slate-400"],
html.light [class*="text-slate-350"],
html.light [class*="text-slate-300"] {
  color: #475569 !important;
}

html.light [class*="border-slate-900"],
html.light [class*="border-slate-800"] {
  border-color: #cbd5e1 !important;
}

html.light .hover\:bg-slate-900:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .hover\:bg-white:hover {
  background-color: #f8fafc !important;
}

/* Ensure text contrast in light mode */
html.light .text-white {
  color: #0f172a !important;
}

html.light .text-gray-50 {
  color: #0f172a !important;
}

html.light .text-gray-100 {
  color: #1e293b !important;
}

/* Tailwind Dark Mode - ensure dark classes work when in dark theme */
html.dark .dark\:bg-slate-800 {
  background-color: #1e293b !important;
}

html.dark .dark\:text-slate-200 {
  color: #e2e8f0 !important;
}

html.dark .dark\:border-slate-700 {
  border-color: #334155 !important;
}

html.dark .dark\:hover\:bg-slate-700:hover {
  background-color: #334155 !important;
}