/* =======================================================================
   WCAG AA COMPLIANT THEME FOR SPHINX RTD
   Simplified color scheme with guaranteed contrast ratios
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. CSS Variables for consistent theming
   -------------------------------------------------------------------- */
:root {
    /* Light theme colors */
    --text-primary: #1a1a1a;      /* Main text (16.5:1 on white) */
    --text-secondary: #404040;      /* Secondary text (10.3:1 on white) */
    --bg-primary: #ffffff;          /* Main background */
    --bg-secondary: #f8f9fa;        /* Secondary background */
    
    /* Link colors */
    --link-color: #0046a0;          /* Dark blue (8.6:1 on white) */
    --link-hover: #003070;          /* Darker blue (11.7:1 on white) */
    --link-visited: #5a2e91;        /* Purple (7.1:1 on white) */
    
    /* UI colors */
    --border-color: #707070;        /* Borders (4.5:1 on white) */
    --code-bg: #f0f0f0;             /* Code background */
    --code-color: #c7254e;          /* Inline code (4.8:1 on #f0f0f0) */
    
    /* Syntax highlighting */
    --syntax-keyword: #6f42c1;      /* Purple (5.9:1 on white) */
    --syntax-string: #22863a;       /* Green (5.8:1 on white) */
    --syntax-function: #005cc5;     /* Blue (7.5:1 on white) */
    --syntax-comment: #586069;      /* Gray (4.6:1 on white) */
    --syntax-number: #d73a49;       /* Red (4.5:1 on white) */
}


/* Keep Assistive MathML readable to screen readers but invisible visually */
.MJX_Assistive_MathML {
  position: absolute !important;
  top: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden; padding: 0; border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}



/* -----------------------------------------------------------------------
   2. Base styles and typography
   -------------------------------------------------------------------- */
html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
}

body,
.wy-body-for-nav {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* All headings with strong contrast */
h1, h2, h3, h4, h5, h6,
.rst-content h1,
.rst-content h2,
.rst-content h3,
.rst-content h4,
.rst-content h5,
.rst-content h6 {
    color: var(--text-primary) !important;
    font-weight: 700;
}

/* Paragraphs and lists */
p, li, dd, dt {
    color: var(--text-primary) !important;
}


/* Make Sphinx/Docutils list classes render as intended */
.rst-content ol.lowerroman { list-style-type: lower-roman !important; }
.rst-content ol.upperroman { list-style-type: upper-roman !important; }
.rst-content ol.loweralpha { list-style-type: lower-alpha !important; }
.rst-content ol.upperalpha { list-style-type: upper-alpha !important; }

/* Optional: show a closing parenthesis instead of a period */
.rst-content ol.lowerroman > li::marker { content: counter(list-item, lower-roman) ") "; }
.rst-content ol.upperroman > li::marker { content: counter(list-item, upper-roman) ") "; }

/* Safety: ensure markers are actually shown and outside */
.rst-content ol { list-style-position: outside !important; }



/* -----------------------------------------------------------------------
   3. Links - Always underlined for accessibility
   -------------------------------------------------------------------- */
a,
a:visited,
.rst-content a,
.rst-content a:visited {
    color: var(--link-color) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover,
a:focus,
.rst-content a:hover,
.rst-content a:focus {
    color: var(--link-hover) !important;
    text-decoration-thickness: 2px;
    background-color: rgba(0, 70, 160, 0.1);
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* Visited links */
a:visited {
    color: var(--link-visited) !important;
}

/* -----------------------------------------------------------------------
   4. Navigation sidebar - Fixed contrast
   -------------------------------------------------------------------- */
.wy-nav-side,
.wy-side-scroll:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
.bd-sidebar__content:focus,
.sidebar-scroll:focus,
.wy-side-nav-search {
    background: #1a1a1a !important;  /* Very dark for high contrast */
}

/* Sidebar links */
.wy-menu-vertical a,
.wy-menu-vertical a:visited,
.wy-menu-vertical li a,
.wy-menu-vertical li a:visited {
    color: #ffffff !important;  /* White text on dark (21:1) */
    text-decoration: none !important;
}

.wy-menu-vertical a:hover,
.wy-menu-vertical a:focus,
.wy-menu-vertical li a:hover,
.wy-menu-vertical li a:focus {
    background: #0046a0 !important;
    color: #ffffff !important;
}

/* Remove toctree numbering in sidebar */
.wy-menu-vertical li.toctree-l1 > a,
.wy-menu-vertical li.toctree-l2 > a,
.wy-menu-vertical li.toctree-l3 > a {
    counter-reset: none;
}

.wy-menu-vertical li.toctree-l1::before,
.wy-menu-vertical li.toctree-l2::before,
.wy-menu-vertical li.toctree-l3::before {
    content: none !important;
}

/* If using automatic section numbering */
.section > .section-number {
    display: none;
}

/* Current section styling in sidebar */
/* Parent of current item - slightly highlighted */
.wy-menu-vertical li.current > a {
    background: #2a2a2a !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Currently active page - more prominent */
.wy-menu-vertical li.current > a.current,
.wy-menu-vertical li.toctree-l1.current > a,
.wy-menu-vertical li.toctree-l2.current > a {
    background: #0046a0 !important;
    color: #ffffff !important;
    border-left: 3px solid #ffffff;
}

/* Child items within expanded current section */
.wy-menu-vertical li.current li a {
    background: #252525 !important;
    color: #e0e0e0 !important;
}

/* The actual current page you're viewing */
.wy-menu-vertical li.current li.current > a {
    background: #0046a0 !important;
    color: #ffffff !important;
    font-weight: 600;
}
/* Captions in sidebar */
.wy-menu-vertical .caption,
.wy-menu-vertical p.caption {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Toctree expand buttons */
.toctree-expand {
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------
   Hide ALL automatic section numbering from Sphinx
   -------------------------------------------------------------------- */

/* Section numbers in content headings */
span.section-number,
.section-number,
.rst-content span.section-number,
h1 span.section-number,
h2 span.section-number,
h3 span.section-number,
h4 span.section-number {
    display: none !important;
}

/* Section numbers in TOC (table of contents in content) */
.rst-content .toctree-wrapper li a span.section-number,
.contents li a span.section-number,
#table-of-contents span.section-number {
    display: none !important;
}

/* Section numbers in sidebar navigation */
.wy-menu-vertical span.section-number,
.wy-menu-vertical .caption-text span.section-number,
nav span.section-number {
    display: none !important;
}

/* Section numbers in breadcrumbs */
.wy-breadcrumbs span.section-number,
.wy-breadcrumbs-aside span.section-number {
    display: none !important;
}

/* Local TOC (.. contents:: directive) */
.topic-title + ul span.section-number,
.local-toc span.section-number {
    display: none !important;
}


/* -----------------------------------------------------------------------
   5. Code blocks and inline code
   -------------------------------------------------------------------- */
/* Inline code */
code, 
.rst-content code,
.rst-content tt,
tt {
    background: var(--code-bg) !important;
    color: var(--code-color) !important;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Code blocks */
div.highlight pre,
.rst-content pre.literal-block,
.rst-content div[class^="highlight-"] pre,
pre {
    background: #f5f5f5 !important;
    color: var(--text-primary) !important;
    border-left: 4px solid var(--link-color);
    border-radius: 3px;
    padding: 1rem;
    overflow-x: auto;
}

/* Comprehensive Pygments syntax highlighting - All colors tested for WCAG AA on #f5f5f5 background */

/* Comments - Dark gray (5.7:1 contrast) */
.highlight .c,     /* Comment */
.highlight .ch,    /* Comment.Hashbang */
.highlight .cm,    /* Comment.Multiline */
.highlight .cp,    /* Comment.Preproc */
.highlight .cpf,   /* Comment.PreprocFile */
.highlight .c1,    /* Comment.Single */
.highlight .cs     /* Comment.Special */
{ color: #4a4a4a !important; font-style: italic; }

/* Keywords - Dark purple (5.1:1 contrast) */
.highlight .k,     /* Keyword */
.highlight .kc,    /* Keyword.Constant */
.highlight .kd,    /* Keyword.Declaration */
.highlight .kn,    /* Keyword.Namespace */
.highlight .kp,    /* Keyword.Pseudo */
.highlight .kr,    /* Keyword.Reserved */
.highlight .kt     /* Keyword.Type */
{ color: #6f42c1 !important; font-weight: bold; }

/* Strings - Dark green (5.8:1 contrast) */
.highlight .s,     /* String */
.highlight .sa,    /* String.Affix */
.highlight .sb,    /* String.Backtick */
.highlight .sc,    /* String.Char */
.highlight .dl,    /* String.Delimiter */
.highlight .sd,    /* String.Doc */
.highlight .s2,    /* String.Double */
.highlight .se,    /* String.Escape */
.highlight .sh,    /* String.Heredoc */
.highlight .si,    /* String.Interpol */
.highlight .sx,    /* String.Other */
.highlight .sr,    /* String.Regex */
.highlight .s1,    /* String.Single */
.highlight .ss     /* String.Symbol */
{ color: #1e6f3d !important; }

/* Numbers - Dark red (4.5:1 contrast) */
.highlight .m,     /* Number */
.highlight .mb,    /* Number.Bin */
.highlight .mf,    /* Number.Float */
.highlight .mh,    /* Number.Hex */
.highlight .mi,    /* Number.Integer */
.highlight .il,    /* Number.Integer.Long */
.highlight .mo    /* Number.Oct */
{ color: #a52834 !important; }

/* Functions/Names - Dark blue (7.5:1 contrast) */
.highlight .n,     /* Name */
.highlight .na,    /* Name.Attribute */
.highlight .nb,    /* Name.Builtin */
.highlight .nc,    /* Name.Class */
.highlight .no,    /* Name.Constant */
.highlight .nd,    /* Name.Decorator */
.highlight .ni,    /* Name.Entity */
.highlight .ne,    /* Name.Exception */
.highlight .nf,    /* Name.Function */
.highlight .fm,    /* Name.Function.Magic */
.highlight .nl,    /* Name.Label */
.highlight .nn,    /* Name.Namespace */
.highlight .nx,    /* Name.Other */
.highlight .py,    /* Name.Property */
.highlight .nt,    /* Name.Tag */
.highlight .nv,    /* Name.Variable */
.highlight .vc,    /* Name.Variable.Class */
.highlight .vg,    /* Name.Variable.Global */
.highlight .vi,    /* Name.Variable.Instance */
.highlight .vm     /* Name.Variable.Magic */
{ color: #005cc5 !important; }

/* Operators - Dark teal (4.8:1 contrast) */
.highlight .o,     /* Operator */
.highlight .ow     /* Operator.Word */
{ color: #00796b !important; }

/* Other elements */
.highlight .bp     /* Name.Builtin.Pseudo */
{ color: #005cc5 !important; }

.highlight .gd     /* Generic.Deleted */
{ color: #d73a49 !important; background-color: #ffeef0; }

.highlight .gi     /* Generic.Inserted */
{ color: #22863a !important; background-color: #f0fff4; }

.highlight .gr     /* Generic.Error */
{ color: #d73a49 !important; }

.highlight .gu     /* Generic.Subheading */
{ color: #6f42c1 !important; font-weight: bold; }

.highlight .err    /* Error */
{ color: #d73a49 !important; background-color: #ffeef0; }


/* Special handling for line numbers if present */
.highlight .linenos {
    color: #666666 !important;  /* 5.8:1 on #f5f5f5 */
    background: #e8e8e8 !important;
    padding: 0 0.5em;
    margin-right: 0.5em;
}

/* -----------------------------------------------------------------------
   6. Tables - Clear borders and zebra stripes
   -------------------------------------------------------------------- */
/* Preserve your styling */
table.docutils {
  border: 1px solid var(--border-color) !important;
  border-collapse: collapse;           /* consistent borders */
  width: 100%;                         /* fill container */
}

table.docutils th {
  background: #e8e8e8 !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  border: 1px solid var(--border-color) !important;
}

table.docutils td {
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

table.docutils tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* --- Proper wrapping (defeats RTD nowrap + handles long tokens) ------- */
.wy-table-responsive table td,
.wy-table-responsive table th {
  white-space: normal !important;      /* override RTD nowrap */
}

/* Let long words/URLs wrap; enable hyphenation when possible */
table.docutils td,
table.docutils th {
  overflow-wrap: anywhere;             /* modern, reliable */
  word-break: normal;                  /* prefer natural breaks */
  hyphens: auto;                       /* optional hyphenation */
}

/* Code inside tables: wrap long lines but keep whitespace semantics */
table.docutils code {
  white-space: normal;                 /* allow wrapping for inline code */
  word-break: break-word;
}

table.docutils pre {
  white-space: pre-wrap;               /* preserve \n, but wrap long lines */
  word-break: break-word;
  overflow: hidden;                    /* no inner scrollbar */
}

/* Media inside cells should not blow out width */
table.docutils img,
table.docutils svg {
  max-width: 100%;
  height: auto;
}


/* -----------------------------------------------------------------------
   7. Admonitions - High contrast colored boxes
   -------------------------------------------------------------------- */
div.admonition,
div.note,
div.warning,
div.danger,
div.tip,
div.hint,
div.important,
div.caution,
div.error,
div.attention {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-left-width: 4px;
    padding: 1rem;
    margin: 1rem 0;
}

/* Admonition titles and content */
div.admonition p.admonition-title,
div.admonition p,
div.admonition li {
    color: var(--text-primary) !important;
}

div.admonition p.admonition-title {
    font-weight: 600;
}

/* Specific admonition colors (border only) */
div.note { border-left-color: #0046a0 !important; }
div.warning, div.caution { border-left-color: #ff6b00 !important; }
div.danger, div.error { border-left-color: #d32f2f !important; }
div.tip, div.hint { border-left-color: #2e7d00 !important; }

/* -----------------------------------------------------------------------
   8. Content area
   -------------------------------------------------------------------- */
.wy-nav-content {
    background: var(--bg-primary) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 2rem 3rem !important;
}

.wy-nav-content-wrap {
    background: var(--bg-secondary) !important;
}

.eqno {
    float: right;
}

/* -----------------------------------------------------------------------
   9. Forms and buttons
   -------------------------------------------------------------------- */
input,
textarea,
select {
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--link-color) !important;
    outline-offset: 2px;
    border-color: var(--link-color) !important;
}

.btn,
button {
    background: var(--link-color) !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    font-weight: 600;
}

.btn:hover,
.btn:focus,
button:hover,
button:focus {
    background: var(--link-hover) !important;
    color: #ffffff !important;
    outline: 2px solid var(--link-color) !important;
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------- */
footer,
footer p,
div[role="contentinfo"],
div[role="contentinfo"] p {
    color: var(--text-secondary) !important;
}

/* -----------------------------------------------------------------------
   11. Search area fix
   -------------------------------------------------------------------- */
.wy-side-nav-search {
    background: #0046a0 !important;  /* Darker blue */
}

.wy-side-nav-search > a,
.wy-side-nav-search .wy-dropdown > a {
    color: #ffffff !important;
}

.wy-side-nav-search input[type="text"] {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 2px solid #ffffff !important;
}

/* -----------------------------------------------------------------------
   12. Breadcrumbs
   -------------------------------------------------------------------- */
.wy-breadcrumbs li a {
    color: var(--link-color) !important;
    text-decoration: underline !important;
}

/* -----------------------------------------------------------------------
   13. Additional fixes for specific elements
   -------------------------------------------------------------------- */
/* Fix for any remaining low contrast text */
span, div, td, th, li, p, a {
    color: inherit;
}

/* Ensure all text elements have minimum contrast */
.rst-content {
    color: var(--text-primary) !important;
}

/* Fix for highlighted text */
.highlighted {
    background: #ffeb3b !important;
    color: var(--text-primary) !important;
}

/* Page TOC */
.wy-menu-vertical li.on a,
.wy-menu-vertical li.current > a {
    border-right: none !important;
}

/* RTD version selector */
.rst-versions {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

.rst-versions a {
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------
   14. Video embeds - Preserve original behavior
   -------------------------------------------------------------------- */
/* Video placeholder - maintain responsive 16:9 aspect ratio */
.video-placeholder {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 20px 0;
}

.video-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Don't mess with other iframes unless needed */
.rst-content iframe:not(.video-placeholder iframe) {
    max-width: 100%;
    border: 1px solid var(--border-color);
}

/* -----------------------------------------------------------------------
   15. Navigation buttons (Previous/Next) - High contrast fix
   -------------------------------------------------------------------- */
/* Previous/Next buttons at bottom */
.rst-footer-buttons {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.rst-footer-buttons .btn-neutral,
.rst-footer-buttons a.btn,
a.btn-neutral {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.rst-footer-buttons .btn-neutral:hover,
.rst-footer-buttons a.btn:hover,
a.btn-neutral:hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Ensure icons are visible */
.rst-footer-buttons .fa {
    color: inherit !important;
    margin: 0 5px;
}

/* Make sure text is readable */
.rst-footer-buttons span {
    color: inherit !important;
}

/* -----------------------------------------------------------------------
   16. Print styles
   -------------------------------------------------------------------- */
@media print {
    body, .wy-nav-content {
        background: white !important;
        color: black !important;
    }
    
    a {
        color: black !important;
        text-decoration: underline !important;
    }
}

/* Simulation Demos*/
.interactive-demo {
    background: #f0f7ff;
    border: 2px solid #0066cc;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.demo-link {
    display: inline-block;
    padding: 12px 24px;
    background: #0066cc !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.3s;
}

.demo-link:hover {
    background: #0052a3 !important;
}

.demo-description {
    margin-top: 10px;
    color: #555;
}

/* -----------------------------------------------------------------------
   17. Copy button for code blocks (sphinx-copybutton)
   -------------------------------------------------------------------- */
/* Button styling */
button.copybtn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s !important;
}

button.copybtn:hover {
    opacity: 1;
    background: var(--link-color) !important;
    border-color: var(--link-color) !important;
}

/* Icon color */
button.copybtn svg {
    fill: var(--text-primary) !important;
}

button.copybtn:hover svg {
    fill: #ffffff !important;
}

/* Success state (after copying) */
button.copybtn.success {
    background: #2e7d00 !important;
    border-color: #2e7d00 !important;
}

button.copybtn.success svg {
    fill: #ffffff !important;
}

/* -----------------------------------------------------------------------
   18. Exercises and Solutions
   -------------------------------------------------------------------- */

/* Exercise admonition - distinctive styling */
div.admonition.exercise {
    background: #fff8e6 !important;
    border: 2px solid #e6a800 !important;
    border-left-width: 5px !important;
    border-radius: 4px;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
}

div.admonition.exercise > .admonition-title {
    background: transparent !important;
    color: #996600 !important;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 0.75rem;
    padding: 0;
}

div.admonition.exercise > .admonition-title::before {
    content: "✏️ ";
}

/* Solution container inside exercises */
div.admonition.exercise .toggle-content,
div.admonition.exercise details.toggle-details {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 1rem;
    padding: 0;
}

/* Toggle button styling for solutions */
div.admonition.exercise .toggle-button,
div.admonition.exercise details.toggle-details > summary {
    background: #0046a0 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin-top: 0.75rem;
    transition: background 0.2s ease;
}

div.admonition.exercise .toggle-button:hover,
div.admonition.exercise details.toggle-details > summary:hover {
    background: #003070 !important;
}

div.admonition.exercise .toggle-button:focus,
div.admonition.exercise details.toggle-details > summary:focus {
    outline: 2px solid #0046a0;
    outline-offset: 2px;
}

/* Expanded solution content */
div.admonition.exercise details.toggle-details[open] > summary {
    background: #003070 !important;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

div.admonition.exercise details.toggle-details > .content {
    padding: 1rem;
    border-top: 1px solid #ddd;
}

/* Alternative: Standalone solution admonition */
div.admonition.solution {
    background: #e8f4e8 !important;
    border: 1px solid #4a9c4a !important;
    border-left-width: 4px !important;
    margin: 0.5rem 0 1rem 1rem;
    padding: 1rem;
}

div.admonition.solution > .admonition-title {
    color: #2d6b2d !important;
    font-weight: 600;
}

div.admonition.solution > .admonition-title::before {
    content: "✓ ";
}

/* Dropdown styling (sphinx-togglebutton uses this) */
.toggle.admonition {
    border-left-width: 4px !important;
}

.toggle.admonition.toggle-hidden > .admonition-title {
    margin-bottom: 0;
}

/* Style the default toggle hint text */
.admonition.toggle > .admonition-title .tb-icon {
    margin-right: 0.5em;
}

/* Exercise numbering via CSS counters */
body {
    counter-reset: exercise-counter;
}

div.admonition.exercise {
    counter-increment: exercise-counter;
}

div.admonition.exercise > .admonition-title::after {
    content: " " counter(exercise-counter);
}

/* Expand/Collapse All buttons */
.exercise-controls {
    margin: 1rem 0 1.5rem 0;
    padding: 0.75rem;
    background: #f5f5f5;
    border-radius: 4px;
    text-align: right;
}

.exercise-controls button {
    background: #555 !important;
    color: #fff !important;
    border: none !important;
    padding: 0.4rem 0.8rem;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: pointer;
    margin-left: 0.5rem;
}

.exercise-controls button:hover {
    background: #333 !important;
}

.exercise-controls button:focus {
    outline: 2px solid #0046a0;
    outline-offset: 2px;
}



/* If you want per-section numbering instead, add this class to section containers */
.exercise-section {
    counter-reset: exercise-counter;
}

/* =======================================================================
   EXERCISE AND SOLUTION STYLES
   Add this to the end of your custom.css file
   ======================================================================= */

/* -----------------------------------------------------------------------
   18. Exercises and Solutions
   -------------------------------------------------------------------- */

/* Exercise admonition - distinctive styling */
div.admonition.exercise {
    background: #fff8e6 !important;
    border: 2px solid #e6a800 !important;
    border-left-width: 5px !important;
    border-radius: 4px;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
}

div.admonition.exercise > .admonition-title {
    background: transparent !important;
    color: #996600 !important;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 0.75rem;
    padding: 0;
}

div.admonition.exercise > .admonition-title::before {
    content: "✏️ ";
}

/* -----------------------------------------------------------------------
   19. Sphinx-Design Dropdown Styling (for solutions)
   -------------------------------------------------------------------- */

/* Solution dropdown container */
div.admonition.exercise details.sd-dropdown,
div.admonition.exercise .sd-card {
    margin-top: 1rem;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    background: #fafafa;
}

/* Solution dropdown summary/header */
div.admonition.exercise details.sd-dropdown > summary,
div.admonition.exercise .sd-card-header {
    background: #0046a0 !important;
    color: #ffffff !important;
    padding: 0.6rem 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    list-style: none; /* Remove default arrow */
}

div.admonition.exercise details.sd-dropdown > summary::-webkit-details-marker {
    display: none;
}

div.admonition.exercise details.sd-dropdown > summary::before {
    content: "▶ ";
    display: inline-block;
    transition: transform 0.2s ease;
    margin-right: 0.5em;
}

div.admonition.exercise details.sd-dropdown[open] > summary::before {
    content: "▼ ";
}

div.admonition.exercise details.sd-dropdown > summary:hover {
    background: #003070 !important;
}

div.admonition.exercise details.sd-dropdown > summary:focus {
    outline: 2px solid #0046a0;
    outline-offset: 2px;
}

/* When dropdown is open */
div.admonition.exercise details.sd-dropdown[open] > summary {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #003070;
}

/* Solution content area */
div.admonition.exercise details.sd-dropdown > .sd-card-body,
div.admonition.exercise details.sd-dropdown > div:not(summary) {
    padding: 1rem;
    background: #ffffff;
    border-radius: 0 0 4px 4px;
}

/* Override sphinx-design card styles within exercises */
div.admonition.exercise .sd-card {
    box-shadow: none !important;
}

div.admonition.exercise .sd-card-body {
    padding: 1rem;
}

/* -----------------------------------------------------------------------
   20. Expand/Collapse All Buttons
   -------------------------------------------------------------------- */

.exercise-controls {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    background: #f0f4f8;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    text-align: right;
}

.exercise-controls button {
    background: #555 !important;
    color: #fff !important;
    border: none !important;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: background 0.2s ease;
}

.exercise-controls button:first-child {
    margin-left: 0;
}

.exercise-controls button.expand-all-solutions {
    background: #0046a0 !important;
}

.exercise-controls button.expand-all-solutions:hover {
    background: #003070 !important;
}

.exercise-controls button.collapse-all-solutions {
    background: #666 !important;
}

.exercise-controls button.collapse-all-solutions:hover {
    background: #444 !important;
}

.exercise-controls button:focus {
    outline: 2px solid #0046a0;
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   21. Solution Content Formatting
   -------------------------------------------------------------------- */

/* Horizontal rules in solutions */
div.admonition.exercise hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 1.5rem 0;
}

/* Code blocks in solutions */
div.admonition.exercise div.highlight {
    margin: 1rem 0;
}

div.admonition.exercise div.highlight pre {
    background: #f5f5f5 !important;
    border-left: 3px solid #0046a0;
}

/* Math blocks in solutions */
div.admonition.exercise .math {
    overflow-x: auto;
    padding: 0.5rem 0;
}

/* Output blocks styling */
div.admonition.exercise .literal-block-wrapper {
    margin: 1rem 0;
}

/* Make sure nested admonitions in solutions look distinct */
div.admonition.exercise div.admonition {
    margin: 1rem 0;
    border-width: 1px;
}

/* -----------------------------------------------------------------------
   22. Print Styles for Exercises
   -------------------------------------------------------------------- */

@media print {
    /* Always show solutions when printing */
    div.admonition.exercise details.sd-dropdown {
        display: block !important;
    }
    
    div.admonition.exercise details.sd-dropdown > summary {
        display: none;
    }
    
    div.admonition.exercise details.sd-dropdown > .sd-card-body,
    div.admonition.exercise details.sd-dropdown > div:not(summary) {
        display: block !important;
    }
    
    /* Hide expand/collapse buttons in print */
    .exercise-controls {
        display: none;
    }
    
    /* Page break control */
    div.admonition.exercise {
        page-break-inside: avoid;
    }
}