/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Tailwind CSS with DaisyUI */
/* @import "../builds/tailwind.css"; */


.chat-service-icon {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Platform brand colors from official style guides */
.twitch-color {
  background-color: #6441A4; /* Twitch Purple - official brand color */
  color: #ffffff;
}

.youtube-color {
  background-color: #FF0000; /* YouTube Red - official brand color */
  color: #ffffff;
}

.kick-color {
  background-color: #53FC18; /* Kick Green - official brand color */
  color: #000000; /* Black text for contrast on bright green */
}

.xcom-color {
  background-color: #000000; /* X/Twitter Black - official brand color after rebrand */
  color: #ffffff;
}

.facebook-color {
  background-color: #1877F2; /* Facebook Blue - official brand color */
  color: #ffffff;
}

/* Widget flash animation for Turbo Stream updates */
@keyframes widget-flash {
  0%, 100% { 
    border-color: transparent; 
    box-shadow: none;
  }
  50% { 
    border-color: hsl(var(--p)); /* primary color */
    box-shadow: 0 0 0 2px hsl(var(--p) / 0.2);
  }
}

.widget-flash {
  animation: widget-flash 0.6s ease-in-out;
  border: 2px solid;
  border-radius: var(--radius-box, 0.5rem);
}

/* Gift event wiggle animation to catch attention */
@keyframes gift-wiggle {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

.gift-event-wiggle {
  animation: gift-wiggle 1s ease-in-out;
}

/* Logo background with opacity that doesn't affect children */
#logo-background {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
}

#logo-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--logo-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.25;
}

/* Semi-transparent background utilities - alpha channel only affects background, not children */
.bg-opacity-75::before,
.bg-opacity-80::before,
.bg-opacity-85::before,
.bg-opacity-90::before,
.bg-opacity-95::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
}

/* For Tailwind/DaisyUI background classes, use color-mix for alpha channel */
.bg-base-100.bg-opacity-75::before {
  background-color: color-mix(in oklab, var(--color-base-100) 75%, transparent);
}
.bg-base-100.bg-opacity-80::before {
  background-color: color-mix(in oklab, var(--color-base-100) 80%, transparent);
}
.bg-base-100.bg-opacity-85::before {
  background-color: var(--color-base-100);
  opacity: 0.4;
}
.bg-base-100.bg-opacity-90::before {
  background-color: color-mix(in oklab, var(--color-base-100) 90%, transparent);
}
.bg-base-100.bg-opacity-95::before {
  background-color: color-mix(in oklab, var(--color-base-100) 95%, transparent);
}

.bg-base-200.bg-opacity-75::before,
.bg-base-200.bg-opacity-80::before,
.bg-base-200.bg-opacity-85::before,
.bg-base-200.bg-opacity-90::before,
.bg-base-200.bg-opacity-95::before {
  background-color: hsl(var(--b2));
}

.bg-base-300.bg-opacity-75::before,
.bg-base-300.bg-opacity-80::before,
.bg-base-300.bg-opacity-85::before,
.bg-base-300.bg-opacity-90::before,
.bg-base-300.bg-opacity-95::before {
  background-color: hsl(var(--b3));
}

.bg-primary.bg-opacity-75::before,
.bg-primary.bg-opacity-80::before,
.bg-primary.bg-opacity-85::before,
.bg-primary.bg-opacity-90::before,
.bg-primary.bg-opacity-95::before {
  background-color: hsl(var(--p));
}

.bg-secondary.bg-opacity-75::before,
.bg-secondary.bg-opacity-80::before,
.bg-secondary.bg-opacity-85::before,
.bg-secondary.bg-opacity-90::before,
.bg-secondary.bg-opacity-95::before {
  background-color: hsl(var(--s));
}

.bg-accent.bg-opacity-75::before,
.bg-accent.bg-opacity-80::before,
.bg-accent.bg-opacity-85::before,
.bg-accent.bg-opacity-90::before,
.bg-accent.bg-opacity-95::before {
  background-color: hsl(var(--a));
}

.bg-opacity-75 { 
  --bg-opacity: 0.75; 
  position: relative; 
  background-color: transparent !important;
}
.bg-opacity-80 { 
  --bg-opacity: 0.80; 
  position: relative; 
  background-color: transparent !important;
}
.bg-opacity-85 { 
  --bg-opacity: 0.80; 
  position: relative; 
  background-color: transparent !important;
}
.bg-opacity-90 { 
  --bg-opacity: 0.90; 
  position: relative; 
  background-color: transparent !important;
}
.bg-opacity-95 { 
  --bg-opacity: 0.95; 
  position: relative; 
  background-color: transparent !important;
}

/* Make cards inside widget grid items semi-transparent at 45% opacity (55% see-through) */
.grid-item-content .card.bg-base-100 {
  position: relative;
  background-color: transparent !important;
}

.grid-item-content .card.bg-base-100::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-base-100);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

.grid-item-content .card.bg-base-100 > * {
  position: relative;
  z-index: 1;
}

/* Make all cards with bg-base-100 semi-transparent to show background through (45% opacity = 55% see-through) */
.card.bg-base-100 {
  position: relative;
  background-color: transparent !important;
}

.card.bg-base-100::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-base-100);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

.card.bg-base-100 > * {
  position: relative;
  z-index: 1;
}

/* Ensure card-body inside transparent cards also has transparent background */
.card.bg-base-100 .card-body {
  background-color: transparent !important;
}

/* Ensure tabs-box inside cards inherits transparency from card's ::before pseudo-element */
/* tabs-box applies var(--color-base-200) background and box-shadow, we need to override both */
.card.bg-base-100 .card-body .tabs-box,
.card.bg-base-100 .tabs-box {
  position: relative;
  background-color: transparent !important;
  background: transparent !important;
  /* Remove box-shadow that creates visual background effect */
  box-shadow: none !important;
  /* Ensure it sits above the card's ::before pseudo-element background */
  z-index: 1;
}

/* Ensure tab-content elements inside cards also have transparent backgrounds */
.card.bg-base-100 .card-body .tabs-box .tab-content,
.card.bg-base-100 .tabs-box .tab-content {
  position: relative;
  background-color: transparent !important;
  background: transparent !important;
  /* Remove border that might create visual separation */
  border-color: transparent !important;
  border: none !important;
  /* Ensure it sits above the card's ::before pseudo-element background */
  z-index: 1;
}

/* Ensure all direct children of tab-content are also positioned correctly */
.card.bg-base-100 .tabs-box .tab-content > * {
  position: relative;
  z-index: 1;
}

/* Ensure modals remain fully opaque for readability (modal-box uses different class, but adding this for safety) */
.modal .modal-box {
  opacity: 1 !important;
  background-color: var(--color-base-100) !important;
}

/* Modal scrolling fixes - ensure modal-boxes inside turbo-frames can scroll */
/* This ensures modal-boxes loaded dynamically inside turbo-frames can scroll */
.modal.modal-open turbo-frame .modal-box {
  overflow-y: auto !important;
  max-height: 90vh !important;
  pointer-events: auto !important;
  z-index: 100000 !important;
  position: relative !important;
}

/* Ensure turbo-frame has height constraint on desktop so modal-box can calculate scroll */
@media (min-width: 768px) {
  .modal.modal-open turbo-frame {
    max-height: 90vh !important;
  }
}

/* Ensure backdrop doesn't interfere with modal-box clicks */
.modal.modal-open .modal-backdrop {
  pointer-events: auto !important;
  z-index: 99998 !important;
}

.modal.modal-open .modal-box,
.modal.modal-open turbo-frame .modal-box {
  pointer-events: auto !important;
  z-index: 100000 !important;
}

/* Mobile modal fixes - full screen and scrollable */
@media (max-width: 767px) {
  .modal.modal-open {
    align-items: flex-start !important;
    overflow-y: hidden !important; /* Container doesn't scroll, modal-box does */
  }
  
  /* Ensure turbo-frame doesn't interfere with height */
  .modal.modal-open turbo-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  .modal.modal-open .modal-box,
  .modal.modal-open turbo-frame .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 1rem !important;
    border-radius: 0 !important;
    overflow-y: auto !important; /* Modal-box scrolls on mobile */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    position: relative !important;
    touch-action: pan-y !important; /* Enable vertical touch scrolling */
    overscroll-behavior: contain !important; /* Prevent scroll chaining */
  }
  
  /* Ensure backdrop covers full viewport on mobile */
  .modal.modal-open .modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Make chart containers fully opaque so graphs are not see-through */
.analytics-chart {
  position: relative;
  background-color: var(--color-base-100) !important;
  z-index: 2;
}

.analytics-chart::before {
  display: none;
}

/* Make cards containing charts fully opaque (but not container cards with tabs) */
.card.bg-base-100:has(.analytics-chart):not(:has(.tabs-box)),
.card.bg-base-100:has(canvas):not(:has(.tabs-box)),
.card.bg-base-100:has([id^="chart-"]):not(:has(.tabs-box)) {
  background-color: var(--color-base-100) !important;
}

.card.bg-base-100:has(.analytics-chart):not(:has(.tabs-box))::before,
.card.bg-base-100:has(canvas):not(:has(.tabs-box))::before,
.card.bg-base-100:has([id^="chart-"]):not(:has(.tabs-box))::before {
  display: none;
}

/* Make table rows fully opaque for readability (zebra striping should not be transparent) */
.card.bg-base-100 table tbody tr,
.card.bg-base-100 table thead tr {
  position: relative;
  z-index: 2;
  background-color: var(--color-base-100) !important; /* Fully opaque background */
}

/* Ensure zebra striping uses fully opaque backgrounds */
.card.bg-base-100 table.table-zebra tbody tr:nth-child(even) {
  background-color: var(--color-base-200) !important; /* Fully opaque base-200 for zebra striping */
}

.card.bg-base-100 table.table-zebra tbody tr:nth-child(odd) {
  background-color: var(--color-base-100) !important; /* Fully opaque base-100 for odd rows */
}

.card.bg-base-100 table thead tr {
  background-color: var(--color-base-100) !important; /* Fully opaque header */
}

/* Fix tooltip multi-line text clipping */
.tooltip {
  overflow: visible !important;
}

.tooltip[data-tip]:before {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  max-width: 20rem !important;
  width: max-content !important;
  min-width: 5rem;
  display: block !important;
}

/* Ensure timeline containers allow tooltips to escape overflow clipping */
.timeline-middle,
.timeline li {
  overflow: visible !important;
  position: relative !important;
}

/* Allow tooltips to escape overflow-x-auto container while maintaining horizontal scroll */
/* Use padding to create space for tooltips without affecting layout */
div.overflow-x-auto.overflow-y-visible:has(.timeline),
div.overflow-x-auto:has(.timeline) {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-top: 5rem !important; /* Add top padding to allow tooltips above timeline to be visible */
  margin-top: -5rem !important; /* Offset padding so layout doesn't shift */
  position: relative !important;
  pointer-events: none !important; /* Allow clicks to pass through to elements above */
}

/* Re-enable pointer events on timeline content */
div.overflow-x-auto.overflow-y-visible:has(.timeline) .timeline,
div.overflow-x-auto:has(.timeline) .timeline {
  pointer-events: auto !important;
}

/* Re-enable pointer events on timeline items and buttons */
div.overflow-x-auto.overflow-y-visible:has(.timeline) .timeline *,
div.overflow-x-auto:has(.timeline) .timeline * {
  pointer-events: auto !important;
}

/* Ensure card-body allows tooltips to overflow vertically */
.card-body:has(.timeline) {
  overflow: visible !important;
}

/* Ensure card allows tooltips to overflow vertically */
.card:has(.timeline) {
  overflow: visible !important;
}