/**
 * SAIF Purple Theme for Langflow - Data Attribute Version
 *
 * Strategy:
 * 1. Purple gradients ONLY on containers ([data-sidebar="sidebar"], [data-testid="app-header"])
 * 2. Glassmorphic styling on UI elements ([data-sidebar="menu-button"], etc.)
 * 3. No interference with native Langflow components
 *
 * Based on source code analysis: /docs/LANGFLOW_SELECTORS_ANALYSIS.md
 */

/* ============================================
   1. FORCE DARK MODE & HIDE THEME SWITCHER
   ============================================ */

/* Force dark mode at root level */
html,
body,
#root {
  color-scheme: dark only !important;
}

/* Add subtle purple tint to body from top */
body#body {
  background: linear-gradient(
    to bottom,
    rgba(99, 102, 241, 0.08) 0%,      /* Purple tint at top */
    rgba(67, 56, 202, 0.04) 30%,      /* Fade middle */
    transparent 60%                    /* Fade to transparent */
  ) !important;
}

/* Prevent light mode from being applied */
html.light,
body.light,
.light,
[data-theme="light"] {
  color-scheme: dark only !important;
}

/* Hide theme switcher buttons - target the specific menu buttons only */
#menu_light_button,
#menu_dark_button,
#menu_system_button,
[data-testid="menu_light_button"],
[data-testid="menu_dark_button"],
[data-testid="menu_system_button"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}


/* Override bg-background class globally - glassmorphic */
.bg-background {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Override bg-muted class - slightly different glassmorphic */
.bg-muted {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Settings page card containers need better visibility */
.rounded-lg.border.bg-muted.text-card-foreground.shadow-sm {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Horizontal scrollable containers in settings */
.overflow-x-auto.rounded-lg.bg-muted {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}


/* Hide the parent div containing Theme text and toggle buttons */
div:has(> span:first-child:only-of-type) span:first-child {
  /* This will be more specific below */
}

/* Target the Theme section container more precisely */
.flex.items-center.justify-between:has(#menu_light_button),
.flex.items-center.justify-between:has(#menu_dark_button),
.flex.items-center.justify-between:has(#menu_system_button) {
  display: none !important;
}

/* Hide social media menu items */
a[role="menuitem"]:has(#menu_github_button),
a[role="menuitem"]:has(#menu_discord_button),
a[role="menuitem"]:has(#menu_twitter_button) {
  display: none !important;
}

/* Hide docs menu item */
a[role="menuitem"]:has(#menu_docs_button) {
  display: none !important;
}

/* Fallback: hide by href if IDs don't work */
a[role="menuitem"][href*="github.com"],
a[role="menuitem"][href*="discord"],
a[role="menuitem"][href*="x.com"],
a[role="menuitem"][href*="docs.langflow"] {
  display: none !important;
}

/* ============================================
   2. PURPLE GRADIENT - HEADER
   ============================================ */

/* App header - horizontal purple gradient */
[data-testid="app-header"] {
  background: linear-gradient(
    to right,
    rgb(2, 6, 23) 0%,        /* slate-950 */
    rgb(15, 23, 42) 50%,     /* slate-900 */
    rgb(2, 6, 23) 100%       /* slate-950 */
  ) !important;
  border-bottom-color: rgba(99, 102, 241, 0.3) !important;
}

/* ============================================
   3. PURPLE GRADIENT - ALL SIDEBARS
   ============================================ */

/* All sidebar containers - vertical purple gradient */
[data-sidebar="sidebar"] {
  background: linear-gradient(
    to bottom,
    rgb(2, 6, 23),      /* slate-950 */
    rgb(15, 23, 42),    /* slate-900 */
    rgb(49, 46, 129)    /* indigo-950 */
  ) !important;
  border-right-color: rgba(99, 102, 241, 0.3) !important;
  border-left-color: rgba(99, 102, 241, 0.2) !important;
}

/* Sidebar child container with bg-background class */
[data-sidebar="sidebar"] .flex.h-full.flex-col.bg-background {
  background: linear-gradient(
    to bottom,
    rgb(2, 6, 23),      /* slate-950 */
    rgb(15, 23, 42),    /* slate-900 */
    rgb(49, 46, 129)    /* indigo-950 */
  ) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Extend gradient background to sidebar content area to cover padding */
[data-sidebar="content"] {
  background: linear-gradient(
    to bottom,
    rgb(2, 6, 23),      /* slate-950 */
    rgb(15, 23, 42),    /* slate-900 */
    rgb(49, 46, 129)    /* indigo-950 */
  ) !important;
}

/* Remove right padding from sidebar content on settings page */
[data-sidebar="sidebar"] [data-sidebar="content"].pr-6 {
  padding-right: 0 !important;
}

/* Settings page main content area adjustments */
.group\/sidebar-wrapper main > .flex.flex-1.flex-col.overflow-x-hidden.pt-1 {
  padding-left: 1rem !important;
}

/* Main page cards wrapper - purple gradient */
[data-testid="cards-wrapper"] {
  background: linear-gradient(
    to bottom,
    rgb(2, 6, 23),      /* slate-950 */
    rgb(15, 23, 42),    /* slate-900 */
    rgb(49, 46, 129)    /* indigo-950 */
  ) !important;
}

/* ============================================
   4. GLASSMORPHIC - SIDEBAR MENU BUTTONS
   ============================================ */

/* Base glassmorphic style for all sidebar menu buttons */
[data-sidebar="menu-button"] {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

/* List cards (flow/component cards) - glassmorphic */
[data-testid="list-card"] {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

[data-testid="list-card"]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Hover state - brighter glass */
[data-sidebar="menu-button"]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transform: translateX(2px) !important;
}

/* Active/selected state - brightest glass */
[data-sidebar="menu-button"][data-active="true"],
[data-sidebar="menu-button"][data-state="open"],
[data-sidebar="menu-button"][aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   5. GLASSMORPHIC - SIDEBAR INPUT
   ============================================ */

/* Sidebar search input - glassmorphic */
[data-sidebar="input"],
input[data-sidebar="input"] {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

[data-sidebar="input"]:focus,
input[data-sidebar="input"]:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Main page search input - glassmorphic */
[data-testid="search-store-input"],
input[data-testid="search-store-input"] {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

[data-testid="search-store-input"]:focus,
input[data-testid="search-store-input"]:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   6. GLASSMORPHIC - OTHER SIDEBAR ELEMENTS
   ============================================ */

/* Sidebar group labels */
[data-sidebar="group-label"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Sidebar menu items container */
[data-sidebar="menu-item"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ============================================
   7. WORKFLOW CANVAS - SUBTLE PURPLE TINT
   ============================================ */

/* Canvas with very subtle purple gradient */
.react-flow__pane,
.react-flow__background {
  /* background: linear-gradient(
    to bottom right,
    rgba(2, 6, 23, 0.95),
    rgba(15, 23, 42, 0.9),
    rgba(49, 46, 129, 0.85)
  ) !important; */
  background:  linear-gradient(
    to bottom right,
    rgba(3, 7, 18, 0.98),
    rgba(15, 23, 42, 0.95),
    rgba(67, 56, 202, 0.18)
  ) !important;
}

/* Keep canvas dots visible with adjusted color */
.react-flow__background pattern circle {
  fill: rgba(148, 163, 184, 0.3) !important;
}

/* ============================================
   8. PRESERVE ORIGINAL STYLES
   ============================================ */

/* Ensure sticky notes remain yellow with black text */
.react-flow__node-noteNode,
[data-node-type="note"],
[class*="stickyNote"],
[class*="sticky-note"] {
  background: rgb(255, 255, 204) !important;
  border-color: rgb(235, 235, 184) !important;
}

.react-flow__node-noteNode *,
[data-node-type="note"] *,
[class*="stickyNote"] *,
[class*="sticky-note"] * {
  color: black !important;
}

/* Keep all icons with original colors */
svg,
svg *,
[class*="icon" i] {
  /* Preserve original icon colors - no overrides */
}

/* ============================================
   9. ADDITIONAL GLASSMORPHIC ELEMENTS
   ============================================ */

/* Panels and dialogs - glassmorphic */
[role="dialog"],
[class*="modal" i] {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
}

/* Popovers and dropdowns - glassmorphic */
[role="menu"],
[class*="popover" i]:not(button) {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
}

/* Tooltips - glassmorphic with white text */
[role="tooltip"],
[class*="tooltip" i],
.bg-tooltip,
[data-radix-popper-content-wrapper] [data-state="delayed-open"] {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

/* Ensure all text inside tooltips is white */
[role="tooltip"] *,
[class*="tooltip" i] *,
.bg-tooltip *,
[data-radix-popper-content-wrapper] [data-state="delayed-open"] * {
  color: white !important;
}

/* Specific targeting for Radix tooltips */
.text-tooltip-foreground {
  color: white !important;
}

/* ============================================
   10. SCROLLBARS - SUBTLE GLASS EFFECT
   ============================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   END OF PURPLE THEME
   ============================================ */