/* FLLM:CUSTOM_CSS_OK — explicit FLLM custom-CSS exemption per .aiad/policies/fllm-universal-enforcement.policy.md. See file body for class-by-class rationale. */
/*
 * Flowbite Custom Extensions - Prismatic Platform Promo Site
 * Version: 1.0.0
 * Purpose: Site-specific Flowbite overrides and extensions
 *          Loaded after flowbite-indigo-theme.css in base.html
 * Stack: Flowbite 2.3 + TailwindCSS 3.4, dark-mode-first
 */

/* ============================================================
   ALPINE.JS x-cloak FIX
   Critical: prevents FOUC (flash of un-cloaked content)
   Alpine removes [x-cloak] after initialization, so until then
   elements with x-cloak must be invisible.
   ============================================================ */
[x-cloak] {
  display: none !important;
}

/* ============================================================
   MOBILE VIEWPORT SAFETY NET
   Global guards so that any single oversized element (long URL,
   wide table, fixed-width SVG, third-party embed) cannot force
   the whole document wider than the viewport on phones.
   - overflow-x: hidden on html+body kills horizontal page scroll
   - media elements default to fluid sizing
   ============================================================ */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img,
svg,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Long unbreakable strings (URLs, tokens, hashes) often overflow
   inside narrow prose containers. overflow-wrap keeps them inside. */
.prose,
.prose p,
.prose li,
.prose blockquote,
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ============================================================
   NAVBAR GLASSMORPHISM
   Enhances the fixed top navbar backdrop-blur effect consistently
   across Chromium, Firefox (no backdrop-filter fallback needed
   since dark bg provides sufficient opacity floor).
   ============================================================ */
nav.fixed.top-0 {
  /* Layered background: primary dark + blur overlay */
  background-color: rgb(3 7 18 / 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* ============================================================
   DROPDOWN MENU REFINEMENTS
   Flowbite dropdown menus use data-popper-placement.
   Our Alpine.js dropdowns use absolute positioning.
   These rules provide consistent shadow and border treatment.
   ============================================================ */
.fb-dropdown {
  background-color: rgb(17 24 39); /* gray-900 */
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 0.75rem;
  box-shadow:
    0 25px 50px -12px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(255 255 255 / 0.03);
}

/* ============================================================
   SIDEBAR SCROLLBAR STYLING
   The left sidebar (macros/navigation.html) uses overflow-y-auto.
   These rules hide the scrollbar on webkit while preserving
   scroll functionality.
   ============================================================ */
#site-sidebar .overflow-y-auto::-webkit-scrollbar {
  width: 4px;
}

#site-sidebar .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

#site-sidebar .overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: rgb(55 65 81); /* gray-700 */
  border-radius: 2px;
}

#site-sidebar .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: rgb(75 85 99); /* gray-600 */
}

/* Firefox scrollbar */
#site-sidebar .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgb(55 65 81) transparent;
}

/* ============================================================
   STAT CARD GRID HELPER
   Responsive stat card grid used with the fb::stat_card macro.
   Provides 1/2/3/4 column layouts based on breakpoint.
   ============================================================ */
.fb-stat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .fb-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fb-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fb-stat-grid-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .fb-stat-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .fb-stat-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   MOBILE MENU ANIMATION
   The mobile navbar menu (id="navbar-menu") uses the
   data-collapse-toggle pattern. When toggled via JS,
   provide a smooth height transition.
   ============================================================ */
#navbar-menu {
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

#navbar-menu.hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* On large screens the menu is always visible, reset animations */
@media (min-width: 1024px) {
  #navbar-menu {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   BADGE RING ANIMATION
   Optional pulsing ring for status badges with dot=true.
   Use class="fb-badge-pulse" on the dot span inside badge macro.
   ============================================================ */
.fb-badge-pulse {
  animation: fb-pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fb-pulse-ring {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================================
   TOOLTIP ARROW INDICATORS
   Adds directional arrows to tooltips rendered by fb::tooltip macro.
   Applied via data attributes when needed.
   ============================================================ */
[data-fb-tooltip-arrow="bottom"]::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background-color: rgb(31 41 55); /* gray-800 */
  border-top: 1px solid rgb(55 65 81); /* gray-700 */
  border-left: 1px solid rgb(55 65 81);
}

/* ============================================================
   KEYBOARD SHORTCUT BADGE ENHANCEMENTS
   Used with fb::kbd macro. Dark inset shadow for depth.
   ============================================================ */
kbd {
  box-shadow:
    inset 0 -2px 0 0 rgb(0 0 0 / 0.4),
    0 1px 2px 0 rgb(0 0 0 / 0.3);
}

/* ============================================================
   PROGRESS BAR GLOW
   Optional glow effect for high-value progress bars.
   Add class="fb-progress-glow" to the bar fill div.
   ============================================================ */
.fb-progress-glow {
  box-shadow: 0 0 8px 0 currentColor;
}

/* ============================================================
   SECTION SEPARATOR GRADIENT
   Used with fb::divider macro for visual section breaks.
   The ::before/::after provide gradient fade edges.
   ============================================================ */
.fb-divider-gradient {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(55 65 81 / 0.5) 20%,
    rgb(55 65 81 / 0.8) 50%,
    rgb(55 65 81 / 0.5) 80%,
    transparent 100%
  );
  height: 1px;
  border: none;
}

/* ============================================================
   FLOWBITE BACK TO TOP REFINEMENT
   Enhances the existing back-to-top button in base.html.
   ============================================================ */
#back-to-top {
  transition: opacity 300ms ease, transform 300ms ease, box-shadow 200ms ease;
}

#back-to-top:hover {
  box-shadow: 0 8px 25px -8px rgb(99 102 241 / 0.4);
  transform: translateY(-2px);
}

#back-to-top.flex {
  display: inline-flex !important;
}