/* custom.css for fusionlab documentation with Furo theme */

/*--------------------------------------------------------------------------
 * Variables and Color Palette (FusionLab Theme v3 - Blue/Orange)
 *--------------------------------------------------------------------------*/

:root,
html[data-theme="light"] {
    /* --- Brand Colors (FusionLab) --- */
    --fusionlab-primary: #2E3191;        /* Deep Blue/Purple */
    --fusionlab-secondary: #F28620;      /* Orange */
    /* F28620 is 242,134,32 in decimal */
    --fusionlab-secondary-rgb: 242, 134, 32;
    
    /* Derived Shades */
    --fusionlab-primary-light: #787BC4;  /* Lighter blue */
    --fusionlab-primary-dark: #242774;   /* Darker blue */
    --fusionlab-secondary-light: #F8A953; /* Lighter orange */
    --fusionlab-secondary-dark: #D97706;  /* Darker orange */
    /* Background Tints */
    --fusionlab-primary-bg-tint-light: rgba(46, 49, 145, 0.07);
    --fusionlab-secondary-bg-tint-light: rgba(242, 134, 32, 0.09); /* Increased tint */
    --fusionlab-primary-bg-tint-dark: rgba(120, 123, 196, 0.12);
    --fusionlab-secondary-bg-tint-dark: rgba(248, 169, 83, 0.12);
    /* Link Hover */
    --fusionlab-link-hover-light: var(--fusionlab-secondary); /* Use Orange for hover text */
    --fusionlab-link-hover-dark: var(--fusionlab-secondary-light); /* Lighter Orange for hover text */

    /* --- Furo Variable Overrides (Light Mode) --- */
    /* Brand */
    --color-brand-primary: var(--fusionlab-primary);
    --color-brand-content: var(--fusionlab-primary); /* Links use primary */

    /* Base */
    --color-foreground-primary: #212529;
    --color-foreground-secondary: #495057;
    --color-foreground-muted: #6c757d;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f8f9fa;
    --color-background-hover: #eff1f3;
    --color-border: #dee2e6;

    /* Code Blocks */
    --color-code-background: #f8f9fa;
    --color-code-border: var(--color-border);
    --color-code-foreground: #343a40;

    /* Sidebar */
    --color-sidebar-background: var(--color-background-secondary);
    /* Sidebar hover bg uses Secondary Orange tint */
    --color-sidebar-background-hover: var(--fusionlab-secondary-bg-tint-light);
    --color-sidebar-link-text: var(--color-foreground-secondary);
    --color-sidebar-link-text--top-level: var(--fusionlab-primary-dark);
    
   /* --- Tables --- */
    --color-table-border: #28aedd;

}

html[data-theme="dark"] {
    /* --- Furo Variable Overrides (Dark Mode) --- */
    /* Brand */
    --color-brand-primary: var(--fusionlab-primary-light);
    --color-brand-content: var(--fusionlab-primary-light);

    /* Base */
    --color-foreground-primary: #e9ecef;
    --color-foreground-secondary: #ced4da;
    --color-foreground-muted: #adb5bd;
    --color-background-primary: #212529;
    --color-background-secondary: #2c3034;
    --color-background-hover: #343a40;
    --color-border: #495057;

    /* Code Blocks */
    --color-code-background: #2c3034;
    --color-code-border: var(--color-border);
    --color-code-foreground: #ced4da;

    /* Sidebar */
    --color-sidebar-background: #1f2326;
    /* Sidebar hover bg uses Secondary Orange tint */
    --color-sidebar-background-hover: var(--fusionlab-secondary-bg-tint-dark);
    --color-sidebar-link-text: #adb5bd;
    --color-sidebar-link-text--top-level: var(--fusionlab-primary-light);

}

/*--------------------------------------------------------------------------
 * General Typography & Layout
 *--------------------------------------------------------------------------*/
body {
    line-height: 1.7;
    font-size: 1rem;/*16px*/
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,
                 sans-serif,Apple Color Emoji,Segoe UI Emoji;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.main-grid {
    max-width: 980px;
}
/* Improve readability for main content area */
.page__content main .content {
    max-width: 900px; /* Increase max width slightly */
    margin-left: auto;
    margin-right: auto;
}

/* Headings (Requirement 5: Use Secondary Orange for H1) */
h1, .heading-title {
    font-size: 2.6rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--fusionlab-secondary); /* Orange underline */
    color: var(--fusionlab-secondary-dark); /* Darker Orange text */
    /*font-weight: 700;
    *letter-spacing: -0.5px; */
}
html[data-theme="dark"] h1,
html[data-theme="dark"] .heading-title {
    border-bottom-color: var(--fusionlab-secondary); /* Orange underline */
    color: var(--fusionlab-secondary-light); /* Lighter Orange text */
}


h2 { /* Use Furo default foreground in light mode */
    font-size: 2.0rem;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border-primary);
    color: var(--color-foreground-primary); /* Furo default text */
    /*font-weight: 600; */
}

/*html[data-theme="dark"] h2 {
     color: var(--color-brand-primary); /* Lighter Blue */
/* }*/
html[data-theme="dark"] h2 {
     color: var(--fusionlab-primary-light); /* Use Primary (Light Blue) in dark mode */
}

h3 {
    font-size: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-foreground-primary);
    /*font-weight: 600; */
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-foreground-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2rem;
}

/* Links (Requirement 2: Hover uses Secondary Orange) */
a,
a:visited {
    color: var(--color-brand-content); /* Primary blue */
    text-decoration: none;
    border-bottom: 1px solid transparent; /* Start transparent */
    position: relative;
    transition: color 0.2s ease-out;
}
/* Animated underline effect using secondary color */
a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 2px; /* Adjust position relative to text */
    right: 0;
    background: var(--fusionlab-secondary); /* Orange underline */
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}
a:hover,
a:focus {
    color: var(--fusionlab-link-hover-light); /* Orange text on hover */
    border-bottom-color: transparent; /* Hide static border on hover */
}
a:hover::after {
    width: 100%;
    left: 0;
    background-color: var(--fusionlab-secondary); /* Orange underline grow */
}
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: var(--fusionlab-link-hover-dark); /* Lighter Orange text on hover */
}
html[data-theme="dark"] a::after {
     background: var(--fusionlab-secondary-light); /* Lighter Orange underline */
}
html[data-theme="dark"] a:hover::after {
    background-color: var(--fusionlab-secondary-light);
}

/* Inline code links (Requirement 3: Dotted Orange Underline) */
code a, code a:visited {
    color: inherit; /* Inherit code color */
    text-decoration: none !important; /* Override browser default */
    border-bottom: 1px dotted var(--fusionlab-secondary);
    padding-bottom: 1px; /* Add tiny space below text */
    transition: border-bottom-style 0.2s ease-out,
                color 0.2s ease-out;
}
code a::after {
     content: none !important; /* Remove animated underline */
}
code a:hover, code a:focus {
     border-bottom-style: solid; /* Solid underline on hover */
     color: var(--fusionlab-secondary-dark); /* Optional: Darker orange text hover */
     background-color: transparent !important; /* Ensure no background from link */
}
html[data-theme="dark"] code a:hover,
html[data-theme="dark"] code a:focus {
     color: var(--fusionlab-secondary-light);
     border-bottom-color: var(--fusionlab-secondary-light);
}


/*--------------------------------------------------------------------------
 * Code Blocks & Inline Code (Requirement 4: Hover frame on PRE)
 *--------------------------------------------------------------------------*/
pre, :not(pre) > code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
                 Courier, monospace;
    border-radius: 5px;
    border: 1px solid var(--color-code-border);
    background-color: var(--color-code-background);
}
pre {
    padding: 1em 1.2em;
    margin: 1.7em 0;
    font-size: 0.92em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    line-height: 1.6;
    /* Add transition for border color */
    border: 1px solid var(--color-code-border); /* Default border */
    transition: border-color 0.2s ease-in-out; /* Add transition */
}
:not(pre) > code {
    padding: 0.2em 0.45em;
    font-size: 0.9em;
    white-space: nowrap;
}
/* Add hover effect for pre blocks */
pre:hover {
    border-color: var(--fusionlab-primary); /* Primary Blue frame on hover */
}
html[data-theme="dark"] pre:hover {
     border-color: var(--fusionlab-primary-light); /* Lighter Blue frame */
}

/* Code copy button styling */
/* Style copy button from sphinx-copybutton */
button.copybtn {
    background-color: var(--color-code-border) !important; /* Override default */
    border: none !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease-in-out;
}
button.copybtn:hover {
    opacity: 1 !important;
}
html[data-theme="dark"] button.copybtn { /* Keep previous button style */ }
html[data-theme="dark"] button.copybtn:hover { /* Keep previous button style */ }


/*--------------------------------------------------------------------------
 * Tables (FusionLab Style with Alternating Blue Rows)
 *--------------------------------------------------------------------------*/
table.docutils,
table.dataframe {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5em; margin-bottom: 1.5em;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 0.9em;
    border-radius: 6px; overflow: hidden;
}
table.docutils th,
table.dataframe th {
    background-color: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    /* Reduced padding */
    padding: 8px 12px;
    text-align: left; font-weight: 600;
    color: var(--color-foreground-primary);
}
html[data-theme="dark"] table.docutils th,
html[data-theme="dark"] table.dataframe th {
     background-color: #2c3034; border-color: var(--color-border);
}
table.docutils td,
table.dataframe td {
    border: 1px solid var(--color-border);
    /* Reduced padding */
    padding: 8px 12px;
    vertical-align: top; line-height: 1.5;
}
/* Remove previous even stripe */
table.docutils tbody tr:nth-child(even),
table.dataframe tbody tr:nth-child(even) {
    background-color: transparent;
}
/* Apply Cyan accent background to ODD rows */
table.docutils tbody tr:nth-child(odd),
table.dataframe tbody tr:nth-child(odd) {
    background-color: rgba(40, 174, 221, 0.08); /* Cyan #28AEDD with alpha */
}
html[data-theme="dark"] table.docutils tbody tr:nth-child(odd),
html[data-theme="dark"] table.dataframe tbody tr:nth-child(odd) {
    background-color: rgba(40, 174, 221, 0.12); /* Slightly less transparent */
}
/* Keep Hover effect (Primary Blue tint) */
table.docutils tbody tr:hover,
table.dataframe tbody tr:hover {
    background-color: var(--fusionlab-primary-bg-tint-light);
}
html[data-theme="dark"] table.docutils tbody tr:hover,
html[data-theme="dark"] table.dataframe tbody tr:hover {
    background-color: var(--fusionlab-primary-bg-tint-dark);
}

/*--------------------------------------------------------------------------
 * Sidebar Customization (Requirement 1: Hover BG is Secondary Orange)
 *--------------------------------------------------------------------------*/
.sidebar-drawer {
    /* width: 18rem; */
    border-right: 1px solid var(--color-border);
}
.toc-drawer > .toc-tree { /* Keep existing */ }
.sidebar-drawer .reference { /* Keep existing base style */
    transition: background-color 0.15s ease-in-out,
                color 0.15s ease-in-out,
                padding-left 0.15s ease-in-out,
                border-left 0.15s ease-in-out;
    padding: 0.35em 0.8em; border-radius: 4px;
    margin: 1px 0; display: block;
    border-left: 3px solid transparent;
}
.sidebar-drawer .reference:hover {
    background-color: var(--fusionlab-secondary-bg-tint-light); /* Orange Tint */
    color: var(--fusionlab-secondary-dark) !important; /* Dark Orange Text */
    border-left-color: var(--fusionlab-secondary); /* Orange accent */
    padding-left: 1.0em; /* Adjust indent on hover if desired */
}
html[data-theme="dark"] .sidebar-drawer .reference:hover {
    background-color: var(--fusionlab-secondary-bg-tint-dark); /* Dark Orange Tint */
    color: var(--fusionlab-secondary-light) !important; /* Light Orange Text */
    border-left-color: var(--fusionlab-secondary-light); /* Light Orange accent */
}
/* Keep current link using primary blue */
.sidebar-drawer li.current > a.reference { /* Keep existing */ }
html[data-theme="dark"] .sidebar-drawer li.current > a.reference { /* Keep existing */ }

/*--------------------------------------------------------------------------
 * Index Page Specific Styles (If using CSS Buttons)
 *--------------------------------------------------------------------------*/

html[data-theme="dark"] .topic { /* Keep previous styles */ }
html[data-theme="dark"] .topic p.topic-title { /* Keep previous styles */ }

/* Other small tweaks */
hr { /* Keep previous styles */ }


/*--------------------------------------------------------------------------
 * Sphinx Design Components (Refined)
 *--------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
 * Release Note Badges (Inspired by Bootstrap Badges)
 *--------------------------------------------------------------------------*/
.bdg-success, .bdg-danger, .bdg-info, .bdg-warning,
.bdg-primary, .bdg-secondary {
    display: inline-block;
    padding: 0.3em 0.5em; /* Adjust padding */
    font-size: 0.75em; /* Smaller font */
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.3rem; /* Rounded corners */
    margin-right: 0.4em;
    /* Prevent link styling */
    text-decoration: none !important;
    border-bottom: none !important;
}
/* Remove link hover effects */
.bdg-success::after, .bdg-danger::after, .bdg-info::after,
.bdg-warning::after, .bdg-primary::after, .bdg-secondary::after {
    content: none !important;
}
a:hover > .bdg-success, a:hover > .bdg-danger, a:hover > .bdg-info,
a:hover > .bdg-warning, a:hover > .bdg-primary, a:hover > .bdg-secondary {
    text-decoration: none !important;
}

/* Badge Colors (Light Mode) */
.bdg-success { background-color: #198754; color: white; } /* Green */
.bdg-danger { background-color: #dc3545; color: white; } /* Red */
.bdg-info { background-color: #0dcaf0; color: #000; }    /* Cyan */
.bdg-warning { background-color: #ffc107; color: #000; } /* Yellow */
.bdg-primary { background-color: var(--fusionlab-primary); color: white; } /* Blue */
.bdg-secondary { background-color: var(--fusionlab-secondary); color: white; } /* Orange */

/* Badge Colors (Dark Mode) */
html[data-theme="dark"] .bdg-success { background-color: #2f9e4f; color: white; }
html[data-theme="dark"] .bdg-danger { background-color: #e03131; color: white; }
html[data-theme="dark"] .bdg-info { background-color: #15aabf; color: white; }
html[data-theme="dark"] .bdg-warning { background-color: #f59f00; color: #000; }
html[data-theme="dark"] .bdg-primary { background-color: var(--fusionlab-primary-light); color: #000; }
html[data-theme="dark"] .bdg-secondary { background-color: var(--fusionlab-secondary-light); color: #000; }


/* Make sure each card can host an absolutely-positioned overlay link */
.sd-card {
  position: relative;        /* so the stretched link can fill its bounds */
}

/* Ensure the link really *covers* the card and can be clicked */
.sd-stretched-link {
  position: absolute !important;
  inset: 0 !important;       /* top/right/bottom/left = 0 */
  z-index: 2 !important;      /* float above card body */
  pointer-events: auto !important;
}
/* smoothly transition bg-color */
.sd-card {
  transition: background-color 0.2s ease-in-out;
}

/* always 50%-opaque secondary on that one card */
.special-card-wrapper > .sd-card {
  background-color: rgba(var(--fusionlab-secondary-rgb), 0.5) !important;
}

/* on hover, fill with your secondary color */
.sd-card:hover {
  /* 0.5 = 50% opacity */
  background-color: rgba(var(--fusionlab-secondary-rgb), 0.5) !important;
}


/*.sd-stretched-link {
 * background: rgba(255,0,0,0.2);  /* temporarily tint it so you can see it */
/* }*/

/* Ensure base colors cover entire page in dark mode (Req 1 fix) */
html[data-theme="dark"] body {
    background-color: var(--color-background-primary);
    color: var(--color-foreground-primary);
}



/* Purple for |New| and |Feature| */
.bdg-purple {
  --bdg-color-background: #f3e8ff; /* Lighter purple background */
  --bdg-color-text: #6b21a8;       /* Darker purple text */
  --bdg-color-border: #e9d5ff;      /* Border color */

  color: var(--bdg-color-text) !important;
  background-color: var(--bdg-color-background);
  border: 1px solid var(--bdg-color-border);
  padding: 0.1em 0.5em;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.8em;
  font-weight: 600;
  vertical-align: middle;
}

/* A distinct green for |Fix| */
.bdg-fix {
  --bdg-color-background: #d1fae5; /* A light, minty green background */
  --bdg-color-text: #065f46;       /* A dark green text */
  --bdg-color-border: #a7f3d0;      /* A slightly darker border */

  color: var(--bdg-color-text) !important;
  background-color: var(--bdg-color-background);
  border: 2px solid var(--bdg-color-border);
  padding: 0.1em 0.5em;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.8em;
  font-weight: 600;
  vertical-align: middle; 
}

/* -- Sparkle/Glow effect for new release announcements -- */

.sparkle-link {
  /* Apply the animation */
  animation: sparkle-glow 2s infinite ease-in-out;
  position: relative; /* Needed for pseudo-elements if used */
  z-index: 1;
}

/* Define the keyframe animation */
@keyframes sparkle-glow {
  0% {
    box-shadow: 0 0 5px #6366f1, 0 0 10px #6366f1, 0 0 15px #a5b4fc;
  }
  50% {
    box-shadow: 0 0 20px #4f46e5, 0 0 30px #818cf8, 0 0 40px #c7d2fe;
  }
  100% {
    box-shadow: 0 0 5px #6366f1, 0 0 10px #6366f1, 0 0 15px #a5b4fc;
  }
}

/* --- New Version Badge Styling --- */

/* Make the card body the positioning parent, which is more reliable. */
.sd-card.sparkle-link .sd-card-body {
  position: relative;
  overflow: visible; /* Ensure the badge isn't clipped */
}

/* Style the badge itself. This selector is more specific and robust. */
.sd-card.sparkle-link .version-badge {
  position: absolute;
  top: -10px;      /* Position it slightly above the card body's top edge */
  right: -10px;    /* Position it slightly outside the card body's right edge */
  z-index: 10;    /* Ensure the badge appears on top of other content */
  
  background-color: #ef4444; /* A nice, bright red */
  color: white !important; /* Use !important to force color override against theme */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: bold;
  line-height: 1;
  
  padding: 4px 7px; /* Slightly increased padding for better look */
  border-radius: 9999px; /* Creates a pill shape */
  border: 2px solid white; /* Adds a clean white outline */
  
  /* A subtle transform to make it pop */
  transform: rotate(10deg);
  
  /* Prevent text selection */
  user-select: none;
}