/* Link to colors:
https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss
Requires addition in mkdocs.yml
extra_css:    # location for additional css styles
  - css/styles.css  # Relative to the docs/ directory
*/

/* ============= HEADER / TOP BAR COLOR ============= */
/* Force green header background and white text for both light and dark themes.
   Zensical sets .md-header color from --md-default-fg-color (dark in light mode),
   so the text color must be overridden explicitly. */
.md-header {
  background-color: #006633 !important;
  color: #ffffff !important;
}
/* Ensure all child elements (title, buttons, logo) also render white */
.md-header .md-header__topic,
.md-header .md-header__button,
.md-header .md-ellipsis {
  color: #ffffff !important;
}

/* ============= HEADING FONT WEIGHT ============= */
/* Zensical default is 700 for all headings — reduce to lighter weights */
.md-typeset h1 { font-weight: 400 !important; }
.md-typeset h2 { font-weight: 400 !important; }
.md-typeset h3 { font-weight: 400 !important; }
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 { font-weight: 400 !important; }

/* ============= LINE SPACING ============= */
/* Condensed left navigation sidebar */
.md-nav                              { font-size: .75rem    !important; line-height: 1.05 !important; }
.md-nav__link                        { padding-top: 0.12rem !important; padding-bottom: 0.12rem !important; }
.md-nav__item                        { padding: 0           !important; }
/* Only collapse vertical margins — preserve horizontal margin (indentation of nested lists) */
.md-nav__list                        { margin-top: 0        !important; margin-bottom: 0 !important; padding: 0 !important; }

/* Extra spacing below each expanded collapsible section (only when open) */
.md-nav__item--nested > input:checked ~ .md-nav { margin-bottom: 0.5rem !important; }

/* Gap after the "About" section (6th top-level item: Home, Getting Started,
   Resources, Release notes, Licenses, About) to separate the Getting-Started
   cluster from the User interface section below it. */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) { margin-bottom: 0.8rem !important; }

/* Section titles in the sidebar */
.md-nav__title                       { padding-top: 0.3rem  !important; padding-bottom: 0.3rem !important; }

/* Remove gray hover/focus background on primary nav links and arrow toggles */
.md-nav--primary .md-nav__link[href]:hover:not(.md-nav__link--active),
.md-nav--primary .md-nav__link[href]:focus:not(.md-nav__link--active),
.md-nav--primary .md-nav__link[for]:hover:not(.md-nav__link--active),
.md-nav--primary .md-nav__link[for]:focus:not(.md-nav__link--active) {
  background-color: transparent !important;
  color: var(--md-accent-fg-color) !important;
}

/* Right-side TOC (on-page table of contents) — compact */
.md-nav--secondary,
.md-nav--secondary .md-nav__link,
.md-nav--secondary .md-nav__item {
  line-height: 0.9;
}
/* Reduce link padding so items sit tight */
.md-nav--secondary .md-nav__link {
  padding-top: .08rem;
  padding-bottom: .08rem;
}

/* Bullet list inside a table cell: used where one row covers several cases
   (see the Operations table of the Instance editor). The default list margins
   are sized for body text and leave the last bullet floating away from the row
   border, so they are tightened here. Colour and theme are inherited from the
   cell, so this works in both schemes. */
.md-typeset td > ul {
  margin: 0.35em 0 0;
  padding-left: 1.1em;
}
.md-typeset td > ul > li {
  margin-bottom: 0.1em;
}
.md-typeset td > ul > li:last-child {
  margin-bottom: 0;
}

/* Admonition inside a table cell: the default vertical margin is sized for a
   standalone box between paragraphs and pushes the row out of shape. */
.md-typeset td > .admonition {
  margin: 0.5em 0 0.1em;
}
.md-typeset td > .admonition > p:last-child {
  margin-bottom: 0.4rem;
}

/* ============= DEFINE LIGHT DEFAULT THEME ============= */
[data-md-color-scheme="default"] {
  /* Primary color (green #006633) — controls links, nav active states, header */
  --md-primary-fg-color:            #006633;
  --md-primary-fg-color--light:     #33885c;
  --md-primary-fg-color--dark:      #004d26;
  --md-primary-bg-color:            #ffffff;   /* text ON the green header → white */
  --md-primary-bg-color--light:     #ffffffb3;

  /* Accent color (orange) — hover states, outlines, interactive highlights */
  --md-accent-fg-color:             #F28C38;
  --md-accent-fg-color--transparent:#F28C3826;
  --md-accent-bg-color:             #ffffff;
  /* Colors and spacing around H-tags */
  h1, h2, h3, h4, h5, h6 {
    color: #F28C38 !important;  /* Your orange from palette.primary */
    margin-bottom: 0;       /* Reduced space after (default is ~1.33rem) */
    padding-bottom: 0;      /* Space for underline effect */
  }
  /* Additional styling for H1 */
  h1 {
      font-weight: 400;            /* Handled globally above */
      font-size: 1.3rem;           /* Make a bit smaller */
      line-height: 1.1;            /* Tight line height */
      border-bottom: 2px solid #F28C38; /* Subtle orange underline */
      //display: inline-block;       /* Keeps underline tight to text */
      //text-transform: uppercase;   /* All letters capitalized */
  }
  h2 { font-size: 1rem;}           /* Make a bit smaller */
  h3 { font-size: 0.82rem;}           /* Make a bit smaller */
  h4 { font-size: 0.75rem;}           /* Make a bit smaller */

  /* h3-like same as h3, but it does not references in the table of contents
  <div class="h3-like">Demonstration</div> */
.h3-like {
    color: #F28C38 !important;  /* Your orange from palette.primary */
    margin-bottom: 0;       /* Reduced space after (default is ~1.33rem) */
    padding-bottom: 0;      /* Space for underline effect */
    display: block;
    margin: 1em 0 0.5em 0;
    font-size: 0.82rem;
}

  .h4-like {
    color: #F28C38 !important;  /* Your orange from palette.primary */
    margin-bottom: 0;       /* Reduced space after (default is ~1.33rem) */
    padding-bottom: 0;      /* Space for underline effect */
    display: block;
    margin: 1em 0 0.5em 0;
    font-size: 0.75rem;
}

  /* Mouse hover over the links */
  a:hover {
    color: #F9A825 !important;
  }

  /* Inline code style, to be used as `inline code` */
  :not(pre) > code {
    /*color: #F28C38;
    background-color: #FFF3E0;    */
    color: #8c6546;
    background-color: #FFF3E0;
    font-family: "Roboto Mono", monospace; /* Matches your theme */
    padding: 0.1em 0.3em;         /* Slight padding for readability */
    border-radius: 3px;           /* Rounded corners */
    font-size: 0.9em;             /* Slightly smaller than body text */
  }

  /* Tooltip balloon when hover over the object */
  .help-balloon {
  background-color: #F0F7FA;    /* Light blue for light mode (from table header) */
  color: #01579B;              /* Dark blue text for contrast */
  padding: 0.8em;              /* Increased padding */
  border-radius: 5px;          /* Rounded corners */
  font-size: 1.1em;            /* Larger font */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  z-index: 1000;               /* Above other content */
  max-width: 250px;            /* Wider for larger text */
  white-space: normal;         /* Allow wrapping */
}

/* Optional title bar */
.help-balloon .title-bar {
  background-color: #B3E5FC;    /* Slightly darker light blue shade */
  color: #01579B;              /* Dark blue text */
  font-weight: 700;            /* Bold */
  font-size: 1.2em;            /* Larger than body */
  padding: 0.3em 0.6em;        /* Compact padding */
  margin: -0.8em -0.8em 0.5em -0.8em; /* Offset outer padding */
  border-top-left-radius: 5px; /* Match balloon corners */
  border-top-right-radius: 5px;
}

  /* ============= Light mode: table styling (Option A — green-tinted) ============= */
  .md-typeset table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
  }

  .md-typeset thead tr {
    background-color: #D7EDD9;
  }
  .md-typeset th {
    color: #004d26;
    font-weight: 700;
    padding: 0.6em;
    border-bottom: 2px solid #006633;
  }

  .md-typeset tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
  }
  .md-typeset tbody tr:nth-child(even) {
    background-color: #EEF7EF;
  }
  .md-typeset tbody tr:hover {
    background-color: #C8E6C9 !important;
  }
  .md-typeset td {
    padding: 0.5em;
    border-bottom: 1px solid #A5D6A7;
    color: #004d26;
  }

  /* ============= Light mode: Table Option A — green-tinted ============= */
  .md-typeset .table-a table { border-collapse: collapse; width: 100%; margin: 0 auto; }
  .md-typeset .table-a thead tr { background-color: #D7EDD9 !important; }
  .md-typeset .table-a th { color: #004d26 !important; font-weight: 700; padding: 0.6em; border-bottom: 2px solid #006633 !important; }
  .md-typeset .table-a tbody tr:nth-child(odd) { background-color: #FFFFFF !important; }
  .md-typeset .table-a tbody tr:nth-child(even) { background-color: #EEF7EF !important; }
  .md-typeset .table-a tbody tr:hover { background-color: #C8E6C9 !important; }
  .md-typeset .table-a td { padding: 0.5em; border-bottom: 1px solid #A5D6A7 !important; color: #004d26 !important; }

  /* ============= Light mode: Table Option B — orange header ============= */
  .md-typeset .table-b table { border-collapse: collapse; width: 100%; margin: 0 auto; }
  .md-typeset .table-b thead tr { background-color: #F28C38 !important; }
  .md-typeset .table-b th { color: #FFFFFF !important; font-weight: 700; padding: 0.6em; border-bottom: 2px solid #E65100 !important; }
  .md-typeset .table-b tbody tr:nth-child(odd) { background-color: #FFFFFF !important; }
  .md-typeset .table-b tbody tr:nth-child(even) { background-color: #FFF3E0 !important; }
  .md-typeset .table-b tbody tr:hover { background-color: #FFE0B2 !important; }
  .md-typeset .table-b td { padding: 0.5em; border-bottom: 1px solid #FFCC80 !important; color: #4E342E !important; }

  /* ============= Light mode: Table Option C — neutral green/orange accents ============= */
  .md-typeset .table-c table { border-collapse: collapse; width: 100%; margin: 0 auto; }
  .md-typeset .table-c thead tr { background-color: #E8F5E9 !important; }
  .md-typeset .table-c th { color: #004d26 !important; font-weight: 700; padding: 0.6em; border-bottom: 2px solid #F28C38 !important; }
  .md-typeset .table-c tbody tr:nth-child(odd) { background-color: #FFFFFF !important; }
  .md-typeset .table-c tbody tr:nth-child(even) { background-color: #F9FBE7 !important; }
  .md-typeset .table-c tbody tr:hover { background-color: #FFF8E1 !important; }
  .md-typeset .table-c td { padding: 0.5em; border-bottom: 1px solid #DCEDC8 !important; color: #33691E !important; }

}

/* ============= DEFINE DARK SLATE THEME ============= */
[data-md-color-scheme="slate"] {
  /* Primary color (green #006633) — controls links, nav active states, header */
  --md-primary-fg-color:            #006633;
  --md-primary-fg-color--light:     #33885c;
  --md-primary-fg-color--dark:      #004d26;
  --md-primary-bg-color:            #ffffff;   /* text ON the green header → white */
  --md-primary-bg-color--light:     #ffffffb3;

  /* Accent color (orange) — hover states, outlines, interactive highlights */
  --md-accent-fg-color:             #F28C38;
  --md-accent-fg-color--transparent:#F28C3826;
  --md-accent-bg-color:             #ffffff;
  /* Colors and spacing around H-tags */
  h1, h2, h3, h4, h5, h6 {
    color: #F28C38 !important;  /* Your orange from palette.primary */
    margin-bottom: 0;       /* Reduced space after (default is ~1.33rem) */
    padding-bottom: 0;      /* Space for underline effect */
  }
  /* Additional styling for H1 */
  h1 {
      font-weight: 400;            /* Handled globally above */
      font-size: 1.3rem;           /* Make a bit smaller */
      line-height: 1.1;            /* Tight line height */
      border-bottom: 2px solid #F28C38; /* Subtle orange underline */
      /*display: inline-block;       /* Keeps underline tight to text */
  }
  h2 { font-size: 1rem;}           /* Make a bit smaller */
  h3 { font-size: 0.82rem;}           /* Make a bit smaller */
  h4 { font-size: 0.75rem;}           /* Make a bit smaller */

    /* h3-like same as h3, but it does not references in the table of contents
  <div class="h3-like">Demonstration</div> */
.h3-like {
    color: #F28C38 !important;  /* Your orange from palette.primary */
    margin-bottom: 0;       /* Reduced space after (default is ~1.33rem) */
    padding-bottom: 0;      /* Space for underline effect */
    display: block;
    margin: 1em 0 0.5em 0;
    font-size: 0.82rem;
}

.h4-like {
    color: #F28C38 !important;  /* Your orange from palette.primary */
    margin-bottom: 0;       /* Reduced space after (default is ~1.33rem) */
    padding-bottom: 0;      /* Space for underline effect */
    display: block;
    margin: 1em 0 0.5em 0;
    font-size: 0.75rem;
}

  /* Mouse hover over the links */
  a:hover {
    color: #F9A825 !important;
  }
  /* Inline code style, to be used as `inline code` */
  :not(pre) > code {
    /* color: #FF9800;
    background-color: #3E2723; */
    color: #e38603;
    background-color: #392825;
    font-family: "Roboto Mono", monospace;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-size: 0.9em;
  }

  /* Tooltip balloon when hover over the object */
  .help-balloon {
  background-color: #78909C;    /* Light blue for light mode (from table header) */
  color: #E1F5FE;              /* Dark blue text for contrast */
  padding: 0.8em;              /* Increased padding */
  border-radius: 5px;          /* Rounded corners */
  font-size: 1.1em;            /* Larger font */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  z-index: 1000;               /* Above other content */
  max-width: 250px;            /* Wider for larger text */
  white-space: normal;         /* Allow wrapping */
}

/* Optional title bar */
.help-balloon .title-bar {
  background-color: #607D8B;    /* Slightly darker light blue shade */
  color: orange;              /* Dark blue text */
  font-weight: 700;            /* Bold */
  font-size: 1.2em;            /* Larger than body */
  padding: 0.3em 0.6em;        /* Compact padding */
  margin: -0.8em -0.8em 0.5em -0.8em; /* Offset outer padding */
  border-top-left-radius: 5px; /* Match balloon corners */
  border-top-right-radius: 5px;
}

    /* ============= Dark mode: table styling (Option C — neutral green/orange accents) ============= */
  .md-typeset table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
  }

  .md-typeset thead tr {
    background-color: #1B5E20;
  }
  .md-typeset th {
    color: #E8F5E9;
    font-weight: 700;
    padding: 0.6em;
    border-bottom: 2px solid #F28C38;
  }

  .md-typeset tbody tr:nth-child(odd) {
    background-color: #263238;
  }
  .md-typeset tbody tr:nth-child(even) {
    background-color: #2E3B33;
  }
  .md-typeset tbody tr:hover {
    background-color: #1B5E20 !important;
  }
  .md-typeset td {
    padding: 0.5em;
    border-bottom: 1px solid #388E3C;
    color: #DCEDC8;
  }

  /* ============= Dark mode: Table Option A — green-tinted ============= */
  .md-typeset .table-a table { border-collapse: collapse; width: 100%; margin: 0 auto; }
  .md-typeset .table-a thead tr { background-color: #1B4D1F !important; }
  .md-typeset .table-a th { color: #A5D6A7 !important; font-weight: 700; padding: 0.6em; border-bottom: 2px solid #43A047 !important; }
  .md-typeset .table-a tbody tr:nth-child(odd) { background-color: #2E3D2F !important; }
  .md-typeset .table-a tbody tr:nth-child(even) { background-color: #374838 !important; }
  .md-typeset .table-a tbody tr:hover { background-color: #1B4D1F !important; }
  .md-typeset .table-a td { padding: 0.5em; border-bottom: 1px solid #388E3C !important; color: #C8E6C9 !important; }

  /* ============= Dark mode: Table Option B — orange header ============= */
  .md-typeset .table-b table { border-collapse: collapse; width: 100%; margin: 0 auto; }
  .md-typeset .table-b thead tr { background-color: #7A3B00 !important; }
  .md-typeset .table-b th { color: #FFCC80 !important; font-weight: 700; padding: 0.6em; border-bottom: 2px solid #FF8F00 !important; }
  .md-typeset .table-b tbody tr:nth-child(odd) { background-color: #3E2723 !important; }
  .md-typeset .table-b tbody tr:nth-child(even) { background-color: #4E342E !important; }
  .md-typeset .table-b tbody tr:hover { background-color: #7A3B00 !important; }
  .md-typeset .table-b td { padding: 0.5em; border-bottom: 1px solid #FF8F00 !important; color: #FFE0B2 !important; }

  /* ============= Dark mode: Table Option C — neutral green/orange accents ============= */
  .md-typeset .table-c table { border-collapse: collapse; width: 100%; margin: 0 auto; }
  .md-typeset .table-c thead tr { background-color: #1B5E20 !important; }
  .md-typeset .table-c th { color: #E8F5E9 !important; font-weight: 700; padding: 0.6em; border-bottom: 2px solid #F28C38 !important; }
  .md-typeset .table-c tbody tr:nth-child(odd) { background-color: #263238 !important; }
  .md-typeset .table-c tbody tr:nth-child(even) { background-color: #2E3B33 !important; }
  .md-typeset .table-c tbody tr:hover { background-color: #1B5E20 !important; }
  .md-typeset .table-c td { padding: 0.5em; border-bottom: 1px solid #388E3C !important; color: #DCEDC8 !important; }

}


/* ============= ADMONITION STYLING (replicates MIB2 old-site style) ============= */
/* To revert to Zensical default, comment out this entire block */

/* --- Design tokens: one accent color per admonition type --- */
:root {
  --admonition-fallback-color: #424242;
  --admonition-note-color:      #448aff;
  --admonition-abstract-color:  #00b0ff;
  --admonition-info-color:      #00b8d4;
  --admonition-tip-color:       #00bfa5;
  --admonition-success-color:   #00c853;
  --admonition-question-color:  #64dd17;
  --admonition-warning-color:   #ff9100;
  --admonition-failure-color:   #ff5252;
  --admonition-danger-color:    #ff1744;
  --admonition-bug-color:       #f50057;
  --admonition-example-color:   #7c4dff;
  --admonition-quote-color:     #9e9e9e;
}

/* --- Assign accent color to each type (inherited by title/border rules below) --- */
.md-typeset .note                                  { --admonition-color: var(--admonition-note-color); }
.md-typeset .abstract                              { --admonition-color: var(--admonition-abstract-color); }
.md-typeset .info                                  { --admonition-color: var(--admonition-info-color); }
.md-typeset .tip, .md-typeset .hint                { --admonition-color: var(--admonition-tip-color); }
.md-typeset .success, .md-typeset .check,
.md-typeset .done                                  { --admonition-color: var(--admonition-success-color); }
.md-typeset .question, .md-typeset .faq,
.md-typeset .help                                  { --admonition-color: var(--admonition-question-color); }
.md-typeset .warning, .md-typeset .caution,
.md-typeset .attention                             { --admonition-color: var(--admonition-warning-color); }
.md-typeset .failure, .md-typeset .fail,
.md-typeset .missing                               { --admonition-color: var(--admonition-failure-color); }
.md-typeset .danger, .md-typeset .error            { --admonition-color: var(--admonition-danger-color); }
.md-typeset .bug                                   { --admonition-color: var(--admonition-bug-color); }
.md-typeset .example                               { --admonition-color: var(--admonition-example-color); }
.md-typeset .quote, .md-typeset .cite              { --admonition-color: var(--admonition-quote-color); }

/* --- Box frame and padding --- */
.md-typeset .admonition,
.md-typeset details {
  border: .075rem solid var(--admonition-color, var(--admonition-fallback-color)) !important;
  border-radius: .2rem !important;
  padding: 0 .6rem !important;
  background-color: var(--md-default-bg-color) !important;
}

/* --- Title bar: thick left accent, layout, 10% tinted background --- */
.md-typeset .admonition-title,
.md-typeset summary {
  border-left: .2rem solid var(--admonition-color, var(--admonition-fallback-color)) !important;
  margin-left: -.6rem !important;
  margin-right: -.6rem !important;
  margin-top: 0 !important;
  padding-top: .4rem !important;
  padding-bottom: .4rem !important;
  padding-left: 2rem !important;
  padding-right: .6rem !important;
  background-color: color-mix(in srgb, var(--admonition-color, var(--admonition-fallback-color)) 10%, transparent) !important;
}

/* --- Icon and expand-arrow alignment --- */
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  left: .6rem !important;
  top: .625em !important;  /* aligns with text at padding-top .4rem */
}
.md-typeset summary::after {
  top: .625em !important;
}
.md-typeset details:not([open]) > summary {
  margin-bottom: 0 !important;
}

/* --- info: light-blue tint in light theme only; dark theme falls through to generic color-mix --- */
[data-md-color-scheme="default"] .md-typeset .info {
  background-color: color-mix(in srgb, var(--admonition-info-color) 6%, white) !important;
}
[data-md-color-scheme="default"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .info > summary {
  background-color: color-mix(in srgb, var(--admonition-info-color) 16%, white) !important;
}

/* ============= WIDGET STYLES FOR DOCUMENTATION ============= */

/* Shared base styles for widgets */
.widget {
  font-family: monospace; /* Matches HTML example */
  display: inline-block; /* Inline with text */
  margin: 0.15em; /* 75% of original 0.2em */
  padding: 0.075em 0.3em; /* 75% of original 0.1em 0.4em */
  border-radius: 0.15em; /* 75% of original 0.2em */
  vertical-align: middle; /* Aligns with text */
  font-size: 0.8em; /* 75% of original 0.85em */
  -webkit-user-select: none; /* Prevents text selection */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* Ensures non-interactive */
  box-shadow: 0.075em 0.15em 0.15em #ddd; /* 75% of original */
}

/* === LIGHT MODE STYLES === */
.widget-button {
  border: 1px solid #aaa; /* Matches .kbd border */
  background-color: #f9f9f9; /* Matches .kbd background */
  background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee); /* Matches .kbd gradient */
  color: #000; /* Black text */
}

.widget-tab {
  border: 1px solid #aaa; /* Matches .widget-button border */
  border-bottom: 2px solid #006633; /* Selected-tab underline, green like the other light accents */
  background-color: #f2f7f5;
  background-image: linear-gradient(to bottom, #fff, #f2f7f5); /* Lit from above, like a real tab */
  color: #000; /* Black text */
  border-radius: 0.35em 0.35em 0 0; /* Rounded top only - the folder-tab silhouette */
  padding: 0.075em 0.5em; /* Slightly wider than a button */
  position: relative; /* Anchor for the stubs; z-index stays auto so they can go behind */
  margin-right: 1.1em; /* Clearance for the stubs, which stick out past the right edge */
  box-shadow: none; /* A tab sits flush against its panel, so it does not float */
}

/* Two greyed-out stubs peeking out from BEHIND the right edge: the next,
   unselected tabs of the same strip, stacked like pages in a book. They are what
   makes the widget read as a TAB rather than a button, so the label alone never
   has to carry that.
   z-index: -1 puts them behind the parent's own background - which works only
   because .widget-tab sets position without a z-index, so it establishes no
   stacking context of its own. */
.widget-tab::before,
.widget-tab::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px; /* Level with the selected tab's top border - all three are one height */
  bottom: -2px; /* Their bottom border lands on the selected tab's, not above it */
  width: 1em;
  border: 1px solid #bbb;
  border-bottom: 2px solid #888; /* The strip's baseline, grey where the selected tab is green */
  border-radius: 0.3em 0.3em 0 0;
  background-color: #e6e6e6;
}

/* Painted first, so it sits furthest back: the second tab along. */
.widget-tab::before { right: -0.95em; }

/* Painted over it: the tab immediately behind the selected one. */
.widget-tab::after  { right: -0.5em; }

.widget-edit {
  background-color: #e0f5ff; /* Light blue from .dropdown */
  color: #000; /* Black text */
  border: 1px solid #aaa; /* Matches .dropdown border */
  min-width: 60px; /* 75% of original 80px */
}

.widget-dropdown {
  background-color: #e0f5ff; /* Light blue from .dropdown */
  color: #000; /* Black text */
  border: 1px solid #aaa; /* Matches .dropdown border */
  padding: 0.075em 1.2em 0.075em 0.3em; /* Increased right padding from 0.9em for space */
  position: relative; /* For arrow */
  min-width: 75px; /* 75% of original 100px */
}

.widget-dropdown::after {
  content: "\00A0\25BC"; /* Space (U+00A0) + Down Arrow (U+25BC) */
  position: absolute;
  right: 0.2em; /* Increased from 0.3em for more space */
  top: 50%;
  transform: translateY(-50%);
  color: #006633; /* Green arrow */
}

.widget-checkbox {
  display: inline-flex;
  align-items: center; /* Aligns checkbox and label */
  color: #000; /* Black text */
  padding: 0 0.6em 0 0; /* Right padding adds ~1 extra character of background */
  background-color: #e0f5ff; /* Light blue from .dropdown */
}

.widget-checkbox::before {
  content: "\2714"; /* Checkmark (U+2714) */
  display: inline-block;
  width: 1.2em; /* Increased from 0.9em */
  height: 1.2em; /* Increased from 0.9em */
  border: 1px solid #aaa; /* Matches .kbd border */
  background-color: #f9f9f9; /* Matches .kbd background */
  background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee); /* Matches .kbd gradient */
  box-shadow: 0.075em 0.15em 0.15em #ddd; /* 75% of original */
  border-radius: 0.15em; /* 75% of original 0.2em */
  margin-right: 0.3em; /* 75% of original 0.4em */
  text-align: center;
  line-height: 1.2em; /* Center checkmark */
  color: #006633; /* Green checkmark */
}

.widget-checkbox-unchecked::before {
  content: ""; /* No checkmark */
  color: transparent; /* Make sure nothing shows */
}

.widget-radio {
  font-family: monospace;
  display: inline-flex;
  align-items: center;
  color: #000;
  padding-right: 0.15em;
  margin: 0.15em;
  border-radius: 0.15em;
  vertical-align: middle;
  font-size: 0.8em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #e0f5ff; /* Light blue from .dropdown */
}

.widget-radio::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.3em;
  background-image: url('../assets/radiobox-marked.svg');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}


/* === DARK MODE STYLES === */
[data-md-color-scheme="slate"] .widget-button {
  border: 1px solid #aaa; /* Keep border */
  box-shadow: 0.075em 0.15em 0.15em #555; /* Lighter shadow */
  color: #333333; /* Bright light blue text */
  background-color: #6c767a;
}

[data-md-color-scheme="slate"] .widget-tab {
  border: 1px solid #aaa; /* Keep border */
  border-bottom: 2px solid #F28C38; /* Selected-tab underline, orange like the other dark accents */
  background-color: #3c4144;
  background-image: none; /* The light-mode gradient reads as a smudge on dark */
  color: #a4c5d5; /* Bright light blue text */
  box-shadow: none;
}

[data-md-color-scheme="slate"] .widget-tab::before,
[data-md-color-scheme="slate"] .widget-tab::after {
  border-color: #6a6f72;
  border-bottom-color: #8a8f92; /* Set after border-color, or the shorthand would flatten it */
  background-color: #2a2e30; /* Recessed against the selected tab, as in light mode */
}

[data-md-color-scheme="slate"] .widget-edit {
  background-color: #333333; /* Dark gray background */
  color: #a4c5d5; /* Bright light blue text */
  border: 1px solid #aaa;
}

[data-md-color-scheme="slate"] .widget-dropdown {
  background-color: #333333; /* Dark gray background */
  color: #a4c5d5; /* Bright light blue text */
  border: 1px solid #aaa;
  padding: 0.075em 1.2em 0.075em 0.3em; /* Same as light mode with extra space */
  position: relative;
  min-width: 75px;
}

[data-md-color-scheme="slate"] .widget-radio {
  background-color: #333333; /* Dark gray background */
  color: #a4c5d5; /* Bright light blue text */
}

[data-md-color-scheme="slate"] .widget-radio::before {
   background-image: url('../assets/radiobox-marked-orange.png');
}

[data-md-color-scheme="slate"] .widget-dropdown::after {
  content: "\00A0\25BC"; /* Space (U+00A0) + Down Arrow (U+25BC) */
  position: absolute;
  right: 0.2em; /* Increased for space */
  top: 50%;
  transform: translateY(-50%);
  color: #F28C38; /* Orange arrow */
}

[data-md-color-scheme="slate"] .widget-checkbox {
  display: inline-flex;
  align-items: center;
  color: #a4c5d5; /* Bright light blue text */
  background-color: #333333; /* Bright light blue text */
  padding: 0 0.6em 0 0; /* Right padding adds ~1 extra character of background */
  border-radius: 0.15em; /* Match other widgets */
}

[data-md-color-scheme="slate"] .widget-checkbox::before {
  content: "\2714"; /* Checkmark (U+2714) */
  width: 1.2em; /* Increased size */
  height: 1.2em; /* Increased size */
  border: 1px solid #aaa;
  background-color: #333333; /* Dark gray background */
  box-shadow: 0.075em 0.15em 0.15em #555; /* Lighter shadow */
  border-radius: 0.15em;
  margin-right: 0.3em;
  text-align: center;
  line-height: 1.2em;
  color: #F28C38; /* Orange checkmark */
}

[data-md-color-scheme="slate"] .widget-checkbox-unchecked::before {
  content: ""; /* No checkmark */
  color: transparent; /* Make sure nothing shows */
}

/* define class to stop floating, so that next paragraph is shown after the block
use as <div class="clear-float"></div> */
.clear-float {
  clear: both;
}
.md-typeset .clear-float + * {
  text-align: left;
}


/* additional color definitions for icons, use as :fontawesome-brands-youtube:{.red-color} */
.orange-color {
    color: #F28C38; /* Orange */
}
.red-color {
  color: #EE0F0F;
}

/* =============== Base style for the <mouse> tag =============== */
/* SVGs inlined as data URIs so they work with file:// (offline plugin) */
:root {
  --mouse-left-svg:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9V1.07c3.94.49 7 3.85 7 7.93zM6.34 20.66A8 8 0 0 1 4 15v-4h16v4c0 2.12-.84 4.16-2.34 5.66A8 8 0 0 1 12 23c-2.12 0-4.16-.84-5.66-2.34M11 9V1.07A8.007 8.007 0 0 0 4.25 7C4.09 7.64 4 8.31 4 9zM6.34 7C6.82 5.65 7.78 4.5 9 3.81V7z'/%3E%3C/svg%3E");
  --mouse-right-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9V1.07A8.007 8.007 0 0 1 19.75 7c.16.64.25 1.31.25 2zm4.66-2c-.48-1.35-1.43-2.5-2.66-3.19V7zM11 9V1.07C7.06 1.56 4 4.92 4 9zM6.34 20.66A8 8 0 0 1 4 15v-4h16v4c0 2.12-.84 4.16-2.34 5.66A8 8 0 0 1 12 23c-2.12 0-4.16-.84-5.66-2.34'/%3E%3C/svg%3E");
}

mouse {
  display: inline-flex;
  align-items: center;
  height: 1.2em;
  vertical-align: middle;
}

mouse.left::before, mouse.double::before, mouse.right::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: #f28c38;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

mouse.left::before {
  -webkit-mask-image: var(--mouse-left-svg);
  mask-image: var(--mouse-left-svg);
}

mouse.double::before {
  -webkit-mask-image: var(--mouse-left-svg);
  mask-image: var(--mouse-left-svg);
}

mouse.right::before {
  -webkit-mask-image: var(--mouse-right-svg);
  mask-image: var(--mouse-right-svg);
}

mouse.left::after {
  content: "LMB";
  font-family: monospace;
  font-size: 1em;
}

mouse.double::after {
  content: "LMBx2";
  font-family: monospace;
  font-size: 1em;
}

mouse.right::after {
  content: "RMB";
  font-family: monospace;
  font-size: 1em;
}