/* Custom CSS for Bro Alert - Female Warning System */

/* CSS Variables for Dark Mode */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 5% 64.9%;
}

/* Utility Classes */
.bg-background {
  background-color: hsl(var(--background));
}

.bg-foreground {
  background-color: hsl(var(--foreground));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-card-foreground {
  background-color: hsl(var(--card-foreground));
}

.bg-popover {
  background-color: hsl(var(--popover));
}

.bg-popover-foreground {
  background-color: hsl(var(--popover-foreground));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-primary-foreground {
  background-color: hsl(var(--primary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.bg-secondary-foreground {
  background-color: hsl(var(--secondary-foreground));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.bg-muted-foreground {
  background-color: hsl(var(--muted-foreground));
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.bg-accent-foreground {
  background-color: hsl(var(--accent-foreground));
}

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.bg-destructive-foreground {
  background-color: hsl(var(--destructive-foreground));
}

.bg-border {
  background-color: hsl(var(--border));
}

.bg-input {
  background-color: hsl(var(--input));
}

.bg-ring {
  background-color: hsl(var(--ring));
}

.text-background {
  color: hsl(var(--background));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-card {
  color: hsl(var(--card));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-popover {
  color: hsl(var(--popover));
}

.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.text-secondary {
  color: hsl(var(--secondary));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

.text-muted {
  color: hsl(var(--muted));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-accent {
  color: hsl(var(--accent));
}

.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

.text-border {
  color: hsl(var(--border));
}

.text-input {
  color: hsl(var(--input));
}

.text-ring {
  color: hsl(var(--ring));
}

.border-border {
  border-color: hsl(var(--border));
}

.border-input {
  border-color: hsl(var(--input));
}

.border-ring {
  border-color: hsl(var(--ring));
}

/* Custom Scrollbar for Comments */
/* Hide all scrollbars completely */
#comments-list::-webkit-scrollbar {
  display: none;
}

#comments-list {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Modal scrollbar styling */
#spillTeaModal .bg-card::-webkit-scrollbar {
  width: 6px;
}

#spillTeaModal .bg-card::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 3px;
}

#spillTeaModal .bg-card::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 3px;
}

#spillTeaModal .bg-card::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--foreground));
}

#spillTeaModal .bg-card {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
}

/* Modal content scrollbar styling */
#spillTeaModal .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

#spillTeaModal .overflow-y-auto::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 3px;
}

#spillTeaModal .overflow-y-auto::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 3px;
}

#spillTeaModal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--foreground));
}

#spillTeaModal .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
}

/* Hide scrollbars for preview areas */
#thumbnail-preview::-webkit-scrollbar {
  display: none;
}

#thumbnail-preview {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#media-preview::-webkit-scrollbar {
  display: none;
}

#media-preview {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hide scrollbars globally */
::-webkit-scrollbar {
  display: none;
}

* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Dark mode specific styles */
.dark body {
  background-color: hsl(240 10% 3.9%) !important;
  background-image: none !important;
}

.dark .post-card {
  background-color: hsl(240 10% 3.9%) !important;
  border: 1px solid hsl(240 3.7% 15.9%) !important;
}

.dark .post-image-container {
  background-color: hsl(240 3.7% 15.9%) !important;
}

/* Ensure thumbnails are visible */
.post-image-container:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.post-image {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block !important;
}

/* Force thumbnail display */
.post-image-container img {
  display: block !important;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Ensure media files display properly in post detail modal */
.media-slide video,
.media-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Video specific styling */
.media-slide video {
  background-color: #000;
}

.media-slide video::-webkit-media-controls {
  background-color: rgba(0, 0, 0, 0.5);
}

.media-slide video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Hover effects for videos */
.media-slide video:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}



/* Image zoom functionality */
.zoomable-image {
  transition: transform 0.3s ease, cursor 0.3s ease;
}

.zoomable-image.zoomed {
  transform: scale(2);
  z-index: 10;
  position: relative;
}

.zoomable-image:hover {
  transform: scale(1.02);
}

.zoomable-image.zoomed:hover {
  transform: scale(2);
}



/* Force post image container to show when it has content */
.post-card .post-image-container:has(img[src]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.post-card .post-image-container:has(img[src*="http"]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Additional thumbnail display fixes */
.post-card .post-image-container:has(img[src*="data:"]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force thumbnail display when image has any src */
.post-card .post-image-container img[src] {
  display: block !important;
}

.post-card .post-image-container:not(.hidden) img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Specific styling for post card images */
.post-card .post-image-container:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.post-card .post-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Additional dark mode fixes */
.dark {
  background-color: hsl(240 10% 3.9%) !important;
}

.dark main {
  background-color: hsl(240 10% 3.9%) !important;
}

.dark .container {
  background-color: hsl(240 10% 3.9%) !important;
}

/* Make modal smaller */
#spillTeaModal .bg-card {
  max-width: 2xl !important;
  width: 90% !important;
  max-height: 85vh !important;
}

/* Dark mode modal styles */
.dark #spillTeaModal .bg-card {
  background-color: hsl(240 10% 3.9%) !important;
  border: 1px solid hsl(240 3.7% 15.9%) !important;
}

.dark #postDetailModal .bg-card {
  background-color: hsl(240 10% 3.9%) !important;
  border: 1px solid hsl(240 3.7% 15.9%) !important;
}

/* File upload area improvements */
.border-dashed {
  border-style: dashed;
}

/* Dark mode improvements for form elements */
.dark input[type="file"] {
  color: hsl(var(--foreground));
}

.dark select {
  color: hsl(var(--foreground));
}

.dark textarea {
  color: hsl(var(--foreground));
}

/* Thumbnail preview improvements */
#thumbnail-preview img {
  border: 2px solid hsl(var(--border));
  border-radius: 0.5rem;
  transition: border-color 0.2s;
}

#thumbnail-preview img:hover {
  border-color: hsl(var(--primary));
}

.dark #thumbnail-preview img {
  border-color: hsl(var(--border));
} 

/* Media Carousel Styles */
.media-slide {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.media-slide.active {
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background-color 0.2s;
}

.carousel-dot.active {
  background-color: hsl(var(--primary));
}

#carousel-prev,
#carousel-next {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#carousel-prev:hover,
#carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* File Upload Preview Styles */
#thumbnail-preview img,
#media-preview img,
#media-preview video {
  border: 2px solid hsl(var(--border));
  border-radius: 0.5rem;
  transition: border-color 0.2s;
}

#thumbnail-preview img:hover,
#media-preview img:hover,
#media-preview video:hover {
  border-color: hsl(var(--primary));
}

.dark #thumbnail-preview img,
.dark #media-preview img,
.dark #media-preview video {
  border-color: hsl(var(--border));
}

/* Line clamp utility */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Admin section gradient animation */
#adminSection {
  background: linear-gradient(90deg, #9333ea, #ec4899, #9333ea);
  background-size: 200% 100%;
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Navigation link hover effects */
#publicFeedLink:hover,
#bigGirlsLink:hover,
#teaTimeLink:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

/* Delete button hover effect */
.delete-post-btn {
  opacity: 0.9;
  transition: all 0.2s ease;
  transform: scale(1);
}

.delete-post-btn:hover {
  opacity: 1;
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  transform: scale(1.05);
}

/* Admin indicator */
.admin-indicator {
  position: relative;
}

.admin-indicator::after {
  content: "👑";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 12px;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Modal improvements */
#spillTeaModal .bg-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

/* Dark mode modal styles */
.dark #spillTeaModal .bg-card {
  background-color: hsl(240 10% 3.9%) !important;
  border: 1px solid hsl(240 3.7% 15.9%) !important;
}

.dark #postDetailModal .bg-card {
  background-color: hsl(240 10% 3.9%) !important;
  border: 1px solid hsl(240 3.7% 15.9%) !important;
} 

/* Dark mode button text */
.dark button {
  color: hsl(0 0% 98%);
}

.dark .bg-emerald-600 {
  color: white !important;
}

.dark .bg-primary {
  color: white !important;
}

.dark .text-primary-foreground {
  color: white !important;
}