/* 
  Themepo Customization for ElegantFin
  Combines ElegantFin's modern layout with Themepo's Arcane/Fantasy aesthetic.
*/

/* 1. Import ElegantFin Nightly */
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-theme-nightly.css");
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");

/* 2. Import Custom Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500&family=JetBrains+Mono&display=swap");

:root {
  /* --- Themepo Core Variables --- */
  --obsidian: #08090C;
  --mithral: #C4B5FD;
  --mithral-dim: #A78BFA;
  --mithral-dark: #334155;
  --arcane-blue: #38BDF8;
  --arcane-purple: #A78BFA;
  --arcane-glow: rgba(167, 139, 250, 0.4);
  --mithral-glow: rgba(226, 232, 240, 0.2);
  
  /* Status Colors */
  --success: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;

  /* Surfaces */
  --surface-card: rgba(226, 232, 240, 0.02);
  --surface-card-hover: rgba(56, 189, 248, 0.05);
  --border-arcane: rgba(56, 189, 248, 0.1);

  /* Typography */
  --font-rune: 'Cinzel Decorative', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- ElegantFin Override Mapping --- */
  --darkerGradientPoint: var(--obsidian);
  --lighterGradientPoint: #111827;
  --textColor: var(--mithral);
  --dimTextColor: var(--mithral-dim);
  --activeColor: var(--arcane-purple);
  --uiAccentColor: var(--arcane-purple);
  --borderColor: var(--mithral-dark);
  --darkerBorderColor: var(--obsidian);
  --headerColor: transparent;
  --drawerColor: transparent;

  /* Buttons & UI Elements */
  --btnSubmitColor: var(--arcane-purple);
  --btnSubmitBorderColor: var(--arcane-purple);
  --checkboxCheckedBgColor: var(--arcane-purple);
  --highlightOutlineColor: var(--arcane-purple);
  --btnMiniPlayColor: var(--arcane-purple);
  --btnMiniPlayBorderColor: #7C3AED;
  
  /* Backgrounds */
  --backgroundGradient: linear-gradient(180deg, var(--obsidian) 0%, #0c0e14 100%);
  
  /* Radii */
  --largeRadius: 4px;
  --largerRadius: 8px;
  --smallRadius: 2px;
  --smallerRadius: 2px;

  /* Play Button Positioning */
  --overlayPlayButtonPosition: 50%;

  /* Header height */
  --appBarHeight: 3.8em;
}

/* --- Base Enhancements --- */

body {
  font-family: var(--font-body);
  background-color: var(--obsidian) !important;
  background-image: radial-gradient(ellipse at 50% 120%, rgba(167, 139, 250, 0.06) 0%, transparent 50%) !important;
}

/* Make background transparent ONLY on item pages to reveal the backdrop */
#itemDetailPage {
  background-color: transparent !important;
}

.backgroundContainer.withBackdrop {
  background-color: transparent !important;
  filter: saturate(0.75) brightness(0.9);
}

/* Radial vignette + bottom fade: bleeds backdrop into obsidian base */
.backgroundContainer.withBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(8, 9, 12, 0.65) 100%),
    linear-gradient(to bottom, transparent 40%, #08090C 100%);
  pointer-events: none;
  z-index: 1;
}

/* Allow the body background to be "pushed back" when a backdrop is present */
body:has(.backgroundContainer.withBackdrop),
body:has(#itemDetailPage) {
  background-color: #000 !important; /* Pure black behind backdrops */
}

/* Titles and Headers use the Rune Font */
h1, h2, h3, .title-rune, .itemTitle, .cardText {
  font-family: var(--font-rune) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Custom Background Effects --- */

/* Arcane Background Circle */
html::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120vw;
  height: 120vw;
  max-width: 1400px;
  max-height: 1400px;
  border: 1px solid rgba(167, 139, 250, 0.03);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: themepo-spin 120s linear infinite;
}

/* Hide the spinning circle on detail pages */
body:has(#itemDetailPage) html::after,
#itemDetailPage ~ html::after {
  display: none !important;
}

/* --- Animations --- */
@keyframes themepo-spin { 
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); } 
}

/* Scrollbar Enhancement */
::-webkit-scrollbar-thumb {
  background: var(--mithral-dark) !important;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--arcane-blue) !important;
}

/* During video playback — transparent header, only back button visible */
.skinHeader.osdHeader,
.skinHeader-withBackground.osdHeader {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.skinHeader.osdHeader .headerButton:not(.headerBackButton),
.skinHeader.osdHeader .pageTitle,
.skinHeader.osdHeader .headerRight {
  display: none !important;
}

/* Frutiger Aero glassmorphism header */
.skinHeader-withBackground,
.skinHeader-blurred,
.skinHeader {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(167, 139, 250, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
  backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
  border: none !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.22) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* --- Media Bar Plugin --- */

/* Slide card: more transparent glass */
.slide {
  background: rgba(8, 9, 12, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(167, 139, 250, 0.1) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

/* Soften the dark bottom overlay — let the backdrop bleed through */
.backdrop-overlay {
  background: linear-gradient(
    0deg,
    rgba(8, 9, 12, 0.82) 0%,
    rgba(8, 9, 12, 0.3) 45%,
    transparent 100%
  ) !important;
}

/* Fade the backdrop edges into the page */
.backdrop,
.backdrop-container {
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.6) 10%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.8) 80%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.6) 10%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0.8) 80%,
    transparent 100%
  ) !important;
}

/* --- Glass Cards --- */

/* Give rows padding so scaled cards have room to grow */
.itemsContainer {
  padding-block: 10px !important;
}

/* Cards stack above siblings when hovered */
.card,
.cardBox {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}
.card-hoverable:hover {
  z-index: 20 !important;
}

/* All show/movie/episode cards */
.cardScalable {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    rgba(8, 9, 12, 0.2) !important;
  border: 1px solid rgba(167, 139, 250, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.45),
    0 24px 48px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important;
}

/* Subtle sheen on the image itself */
.cardImageContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Hover: inset glow on all 4 sides (unclippable) + filter bloom on top/bottom */
.card-hoverable:hover .cardScalable {
  box-shadow:
    inset 0 0 0 2px rgba(167, 139, 250, 0.7),
    inset 0 0 12px rgba(167, 139, 250, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  filter:
    brightness(1.1)
    drop-shadow(0 0 10px rgba(167, 139, 250, 0.4))
    drop-shadow(0 20px 36px rgba(0, 0, 0, 0.65)) !important;
}

/* Library cards (visualCardBox) */
.visualCardBox,
.paperList {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
    linear-gradient(180deg, rgba(167, 139, 250, 0.07) 0%, rgba(8, 9, 12, 0.35) 100%) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border: 1px solid rgba(167, 139, 250, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.45),
    0 24px 48px rgba(0, 0, 0, 0.4) !important;
  transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important;
}

.card-hoverable:hover .visualCardBox {
  box-shadow:
    inset 0 0 0 2px rgba(167, 139, 250, 0.7),
    inset 0 0 12px rgba(167, 139, 250, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  filter:
    brightness(1.1)
    drop-shadow(0 0 10px rgba(167, 139, 250, 0.4))
    drop-shadow(0 20px 36px rgba(0, 0, 0, 0.65)) !important;
}

/* Frutiger Aero glassmorphism drawer */
.mainDrawer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 30%),
    linear-gradient(180deg, rgba(167, 139, 250, 0.12) 0%, rgba(8, 9, 12, 0.72) 100%) !important;
  backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
  border-right: 1px solid rgba(167, 139, 250, 0.22) !important;
  box-shadow:
    -1px 0 0 rgba(255, 255, 255, 0.08) inset,
    12px 0 40px rgba(0, 0, 0, 0.5) !important;
}

/* Played/watched indicator — override ElegantFin's hardcoded green */
.playedIndicator {
  background: var(--arcane-purple) !important;
}

/* --- Custom Branding --- */

/* Remove Jellyfin's default logo background and padding from the h3 */
.pageTitleWithDefaultLogo,
.pageTitleWithLogo {
  background-image: none !important;
  padding-left: 0 !important;
}

/* Hide the h3 itself (hides Jellyfin text + background logo) */
.headerLeft .pageTitle {
  visibility: hidden !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* "The Ark" text via ::after */
.headerLeft .pageTitle::after {
  content: "The Ark" !important;
  visibility: visible !important;
  position: static !important;
  font-family: var(--font-rune) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--mithral) !important;
  white-space: nowrap !important;
}