/******************************************************************************
 ********************************  ATTENTION  *********************************
         DO NOT MODIFY THIS FILE, IT WILL NOT BE PRESERVED ON UPDATES!
 ******************************************************************************
  If you want to add some own screen CSS, have a look at the README of this
  template and "/user/screen.css". You have been warned!
 *****************************************************************************/

/* Notes about how the template CSS works:

   - This template includes 3rd party CSS files:
     1) CSS from the "starter" DokuWiki template by Anika Henke (brings
        important and basic styling for syntax and core features)
     2) CSS from the original "vector" skin for MediaWiki (brings the basic
        layout and overwrites some "default" styling)
     These files will be included BEFORE this specific CSS file. In this file,
     I just overwrite non fitting MediaWiki "vector" and DokuWiki "starter"
     CSS + add some CSS for some exclusive objects of this template
   - Why I am doing this? Well, read <http://j.mp/eq8zSo>. I followed the main
     principle described there and simply apply it to the two sources ("starter"
     template and "vector" skin).
   - This way also ensures a painless update, if there are new versions of
     MediaWiki vector or DokuWiki CSS files. Cause these 3rd party components
     were not edited or partially copied, I do not have to track their changes
     in detail.

   Explanation of the different sections in here:
   - "Styles/corrections for the template itself"
     General CSS targeting the template structure. This section overwrites non
     fitting CSS of the "vector" MediaWiki skin and "starter" DokuWiki
     template. Read the notes above and <http://j.mp/eq8zSo> if you do not know
     why I am doing it this way.
   - "Browser Hacks and corrections"
     Section containing bigger hacks for browser specific problems.
*/


/******************************************************************************
 ************** Styles/corrections for the template itself ********************
 ******************************************************************************/
/* --------------- general styling  --------------- */
:root {
  /* Light theme variables */
  --bg-color: #f3f3f3;
  --text-color: #333;
  --link-color: #436976;
  --link-hover-color: #000;
  --missing-link-color: #ba0000;
  --border-color: #ddd;
  --header-bg: #fff;
  --sidebar-bg: #f8f9fa;
  --card-bg: #fff;
  --highlight-bg: #fff3cd;
  --code-bg: #f8f9fa;
  --input-bg: #fff;
  --input-border: #ced4da;
  --dropdown-bg: #fff;
  --dropdown-hover: #e9ecef;
  --main-bg: #f5f6f7; /* New grayish background for light mode */
  --main-border: #e5e7eb;
}

[data-bs-theme="dark"] {
  /* Dark theme variables */
  --bg-color: #1a1a1a;
  --text-color: #e4e4e4;
  --link-color: #8bb4c2;
  --link-hover-color: #fff;
  --missing-link-color: #ff6b6b;
  --border-color: #444;
  --header-bg: #2d2d2d;
  --sidebar-bg: #2d2d2d;
  --card-bg: #333;
  --highlight-bg: #483e24;
  --code-bg: #2d2d2d;
  --input-bg: #333;
  --input-border: #555;
  --dropdown-bg: #333;
  --dropdown-hover: #444;
  --content-bg: #2d2d2d; /* New variable for main content background */
  --toc-bg: #333; /* New variable for TOC background */
  --toc-text: #e4e4e4; /* New variable for TOC text */
  --toc-border: #444; /* New variable for TOC borders */
  --toc-hover: #444; /* New variable for TOC hover state */
  --breadcrumb-bg: #333;
  --breadcrumb-text: #e4e4e4;
  --breadcrumb-border: #444;
  --main-bg: #2d2d2d; /* Darker background with blue tint */
  --main-border: #2a303c;
}

/* Add these new dark mode overrides */
[data-bs-theme="dark"] {
  /* Main content area */
  .main-content {
    background-color: var(--content-bg);
    color: var(--text-color);
  }

  /* Basic text and backgrounds */
  .dokuwiki div.page {
    background-color: var(--content-bg);
    color: var(--text-color);
  }

  #bodyContent {
    background-color: var(--content-bg);
    color: var(--text-color);
  }

  /* TOC specific styling */
  #dw__toc {
    background-color: var(--toc-bg);
    border: 1px solid var(--toc-border);
    border-radius: 0.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  #dw__toc h3 {
    color: var(--toc-text);
    margin: 0;
    padding: 0.5rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--toc-border);
  }

  #dw__toc .toc {
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
  }

  #dw__toc ul.toc {
    padding-left: 1.5rem;
  }

  #dw__toc ul.toc li {
    margin: 0.25rem 0;
  }

  #dw__toc ul.toc a {
    color: var(--link-color);
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
  }

  #dw__toc ul.toc a:hover {
    color: var(--link-hover-color);
    background-color: var(--toc-hover);
    border-radius: 0.25rem;
  }

  /* Level indentation for TOC */
  #dw__toc ul.toc li.level2 { padding-left: 1rem; }
  #dw__toc ul.toc li.level3 { padding-left: 2rem; }
  #dw__toc ul.toc li.level4 { padding-left: 3rem; }
  #dw__toc ul.toc li.level5 { padding-left: 4rem; }

  /* Fix text colors in various elements */
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
  }

  a, a:visited {
    color: var(--link-color);
  }

  a:hover {
    color: var(--link-hover-color);
  }

  /* Table styles */
  table.inline {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }

  table.inline th {
    background-color: var(--header-bg);
    color: var(--text-color);
    border-color: var(--border-color);
  }

  table.inline td {
    border-color: var(--border-color);
    color: var(--text-color);
  }

  /* Code blocks and inline code */
  pre, code, .code {
    background-color: var(--code-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
  }

  /* Form elements */
  input, textarea, select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
  }

  /* Bootstrap card overrides */
  .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }

  .card-header {
    background-color: var(--header-bg);
    border-bottom-color: var(--border-color);
    color: var(--text-color);
  }

  /* Fix any remaining white backgrounds */
  .bg-white {
    background-color: var(--content-bg) !important;
  }

  .bg-light {
    background-color: var(--card-bg) !important;
  }

  /* Basic text and backgrounds */
  color: var(--text-color);
  background-color: var(--bg-color);
  
  /* Links */
  a, a:visited { color: var(--link-color); }
  a:hover { color: var(--link-hover-color); }
  
  /* Form elements */
  input, textarea, select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
  }
  
  /* Tables */
  table.inline th {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }
  
  table.inline td {
    border-color: var(--border-color);
  }
  
  /* Code blocks */
  pre, code, .code {
    background-color: var(--code-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
  }
  
  /* Navigation and UI elements */
  .navbar {
    background-color: var(--header-bg) !important;
    border-color: var(--border-color) !important;
  }
  
  .sidebar {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
  }
  
  .card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
  }
  
  /* Override Bootstrap classes */
  .bg-light { background-color: var(--card-bg) !important; }
  .bg-white { background-color: var(--header-bg) !important; }
  .border-bottom { border-color: var(--border-color) !important; }
  
  /* Buttons */
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-info {
    color: var(--link-color);
    border-color: var(--border-color);
  }
  
  .btn-outline-primary:hover,
  .btn-outline-secondary:hover,
  .btn-outline-info:hover {
    background-color: var(--link-color);
    color: var(--bg-color);
  }
  
  /* Dropdowns */
  .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
  }
  
  .dropdown-item {
    color: var(--text-color);
  }
  
  .dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--link-hover-color);
  }
  
  /* Editor */
  .dokuwiki textarea.edit {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
  }
  
  /* Wiki content specific */
  #dw__toc {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
  }
  
  .dokuwiki div.page {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  /* Admin interface */
  .admin_tasks {
    background-color: var(--card-bg);
  }
  
  .admin_tasks li {
    border-color: var(--border-color) !important;
  }

  /* Sidebar navigation specific styles */
  .sidebar .portal {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color);
  }

  .sidebar .portal h5 {
    background-color: var(--portal-header-bg);
    color: var(--portal-header-color);
    border-color: var(--border-color);
  }

  .sidebar .portal .body {
    background-color: var(--sidebar-bg);
    color: var(--text-color);
  }

  .sidebar .dokuwiki ul li a {
    color: var(--text-color);
  }

  .sidebar .dokuwiki ul li a:hover {
    background-color: var(--dropdown-hover);
    color: var(--link-hover-color);
  }

  /* Admin tasks list in sidebar */
  .admin-list-wrapper {
    background-color: var(--sidebar-bg);
  }

  .admin-list-wrapper ul.admin_tasks li {
    border-color: var(--border-color);
  }

  .admin-list-wrapper ul.admin_tasks a {
    color: var(--link-color);
  }

  .admin-list-wrapper ul.admin_tasks a:hover {
    color: var(--link-hover-color);
  }

  /* Portal boxes */
  .portal {
    background-color: var(--sidebar-bg);
  }

  .portal h5 {
    background-color: var(--portal-header-bg);
    color: var(--portal-header-color);
    border: 1px solid var(--border-color);
  }

  .portal .body {
    background-color: var(--sidebar-bg);
    color: var(--text-color);
  }

  /* Navigation menu items */
  #p-navigation .body,
  #p-coll-print-export .body,
  #p-tb .body {
    background-color: var(--sidebar-bg);
    color: var(--text-color);
  }

  #p-navigation a,
  #p-coll-print-export a,
  #p-tb a {
    color: var(--link-color);
  }

  #p-navigation a:hover,
  #p-coll-print-export a:hover,
  #p-tb a:hover {
    color: var(--link-hover-color);
    background-color: var(--dropdown-hover);
  }

  /* Breadcrumbs dark mode */
  .catlinks {
    background-color: var(--breadcrumb-bg);
    color: var(--breadcrumb-text);
    border-color: var(--breadcrumb-border);
  }

  .catlinks a {
    color: var(--link-color);
  }

  .catlinks a:hover {
    color: var(--link-hover-color);
  }

  .bchead,
  .bcsep {
    color: var(--text-color);
  }
}

html {
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow-x: auto;
  overflow-y: auto;
}
body {
  font: normal 100%/1.4 sans-serif;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff; /* Ensure light theme background if not already set */
}
hr {
  border: 0 none;
  text-align: center;
  width: 100%;
  clear: both;
}
caption,
legend {
  color: __text_neu__;
  font-family: sans-serif;
  background-color: inherit;
}
pre,
code,
samp,
kbd {
  font-family: monospace,sans-serif;
}
pre {
  overflow: auto;
}
img {
  border-width: 0;
  background-color: transparent;
}
blockquote {
  padding: 0 1.25em;
  border: solid __border__;
  border-width: 0 0 0 .25em;
}
q:before,
q:after {
  content: '';
}
sub,
sup {
  font-size: .8em;
  line-height: 1;
}
sub {
  vertical-align: sub;
}
sup {
  vertical-align: super;
}

/* forms */
form {
  display: inline;
  padding: 0;
}
label {
  vertical-align: middle;
  cursor: pointer;
}
input,
textarea,
button,
select,
optgroup,
option {
  font: inherit;
  color: inherit;
  /* background-color destroys button look */
  line-height: 1;
  margin: 0;
  vertical-align: middle;
}
input[type=text],
input[type=password],
textarea {
  padding: .1em;
}
input[type=radio],
input[type=checkbox],
input.check {
  padding: 0;
}
input[type=submit],
input.button,
button {
  cursor: pointer;
}
input[disabled],
button[disabled],
input[readonly],
button[readonly] {
  cursor: auto;
}
optgroup {
  font-style: italic;
  font-weight: bold;
}
option {
  font-style: normal;
  font-weight: normal;
}

/* tables */
table {
  border-collapse: collapse;
  empty-cells: show;
  border-spacing: 0;
  border: 1px solid __border__;
}
caption {
  caption-side: top;
  text-align: left;
  margin: 0 0 .3em;
}
th,
td {
  padding: .3em .5em;
  margin: 0;
  vertical-align: top;
  border: 1px solid __border__;
  text-align: left;
}
th {
  font-weight: bold;
  background-color: __background_alt__;
}

/* basic margins and paddings */
p,
ul,
ol,
dl,
pre,
table,
blockquote,
fieldset,
address {
  margin: 0 0 1.4em 0; /* bottom margin = line-height */
  padding: 0;
}
div {
  margin: 0;
  padding: 0;
}

/* lists */
ul,
ol {
  padding: 0 0 0 1.5em;
}
li,
dd {
  padding: 0;
  margin: 0 0 0 1.5em;
}
dt {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
li ul,
li ol,
li dl,
dl ul,
dl ol,
dl dl {
  margin-bottom: 0;
  padding: 0;
}
li li {
  font-size: 100%;
}
ul             { list-style: square outside; }
ol             { list-style: decimal outside; }
ol ol          { list-style-type: lower-alpha; }
ol ol ol       { list-style-type: upper-roman; }
ol ol ol ol    { list-style-type: upper-alpha; }
ol ol ol ol ol { list-style-type: lower-roman; }

/* general classes */
div.clearer {
  /* additional to what's already in DokuWiki's lib/styles/all.css: */
  font-size: 1px;
  visibility: hidden;
}
.a11y {
  position: absolute;
  left: -9000px;
  top: -4000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}


/* --------------- content styling --------------- */

/* embedded images (styles are already partly set in DokuWiki's lib/styles/all.css) */
.dokuwiki img.media       { }
.dokuwiki img.medialeft   { margin: .5em 1.5em .5em 0; }
.dokuwiki img.mediaright  { margin: .5em 0 .5em 1.5em; }
.dokuwiki img.mediacenter { margin: .5em auto; }

div.dokuwiki p,
div.dokuwiki blockquote,
div.dokuwiki table,
div.dokuwiki pre {
  margin: 0 0 1.0em 0;
}

/* forms */
div.dokuwiki textarea.edit {
  font-family: monospace, serif;
  /* second generic font fixes problem with font-size, see
     http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */
  font-size: 14px;
  color: __text__;
  background-color: __background__;
  border: 1px solid __border__;
  padding: 0.3em 0 0 0.3em;
  width: 100%;
  line-height: 17px;
}
div.dokuwiki legend {
  font-family: sans-serif;
  font-weight: normal;
  background-color: transparent;
  text-align: left; /* needed for webkit browsers */
}

/* nice alphatransparency background except for IE <7 */
html>body div.dokuwiki textarea.edit {
  background: __background__ url(static/3rd/dokuwiki/inputshadow.png) repeat-x top;
}

div.dokuwiki input.edit,
div.dokuwiki select.edit {
  font-size: 100%;
  border: 1px solid __border__;
  color: __text__;
  background-color: __background__;
  vertical-align: middle;
  margin: 1px;
  padding: 0.20em 0.3em;
  display: inline;
  font-weight: normal;
}

/* nice alphatransparency background except for IE <7 */
html>body div.dokuwiki input.edit,
html>body div.dokuwiki select.edit {
  background: __background__ url(static/3rd/dokuwiki/inputshadow.png) repeat-x top;
}

div.dokuwiki select.edit {
  padding: 0.1em 0;
}

div.dokuwiki input.missing {
  font-size: 100%;
  border: 1px solid __border__;
  color: __text__;
  background-color: #ffcccc;
  vertical-align: middle;
  margin: 1px;
  padding: 0.20em 0.3em;
  display: inline;
}

/* disabled style - not understood by IE */
div.dokuwiki textarea.edit[disabled],
div.dokuwiki textarea.edit[readonly],
div.dokuwiki input.edit[disabled],
div.dokuwiki input.edit[readonly],
div.dokuwiki input.button[disabled],
div.dokuwiki select.edit[disabled] {
  background-color: __background_neu__!important;
  color: __text_neu__!important;
  font-weight: normal;
}

/* edit form */
div.dokuwiki div.toolbar,
div.dokuwiki div#wiki__editbar, /* old, until 2012-01-25 */
div.dokuwiki div.editBar {      /* new, since 2012-09-10 */
  margin: 2px 0;
  text-align: left;
}
div.dokuwiki div#size__ctl {
  float: right;
  width: 60px;
  height: 2.7em;
}
div.dokuwiki #size__ctl img {
  cursor: pointer;
}
div.dokuwiki div#wiki__editbar div.editButtons, /* old, until 2012-01-25 */
div.dokuwiki div.editBar div.editButtons {      /* new, since 2012-09-10 */
  float: left;
  padding: 0 1.0em 0.7em 0;
}
div.dokuwiki div#wiki__editbar div.summary, /* old, until 2012-01-25 */
div.dokuwiki div.editBar div.summary {      /* new, since 2012-09-10 */
  float: left;
}
div.dokuwiki .nowrap {
  white-space: nowrap;
}
div.dokuwiki div#draft__status {
  float: right;
  color: __text_alt__;
}

div.dokuwiki div.license {
  padding: 0.5em;
  font-size: 90%;
  text-align: center;
}

div.dokuwiki form#dw__editform div.license {
  clear: left;
  font-size: 90%;
}

/* buttons */
div.dokuwiki input.button,
div.dokuwiki button.button {
  border: 1px solid __border__;
  color: __text__;
  background-color: __background__;
  vertical-align: middle;
  text-decoration: none;
  font-size: 100%;
  cursor: pointer;
  margin: 1px;
  padding: 0.125em 0.4em;
  font-weight: normal;
  line-height: 1.333em;
}
div.dokuwiki button.toolbutton {
  height: 20px;
  width: 24px;
  padding: 1px 3px;
  line-height: 16px;
  text-align: center;
}
/* nice alphatransparency background except for IE <7 */
html>body div.dokuwiki input.button,
html>body div.dokuwiki button.button {
  background: __background__ url(static/3rd/dokuwiki/buttonshadow.png) repeat-x bottom;
}

* html div.dokuwiki input.button,
* html div.dokuwiki button.button {
  height: 1.8em;
}

/* links */
div.dokuwiki a:link,
div.dokuwiki a:visited {
  color: var(--link-color);
  text-decoration: none;
}
div.dokuwiki a:hover,
div.dokuwiki a:active {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* missing page links outside rendered articles */
a.wikilink2,
a.wikilink2:link,
a.wikilink2:visited,
a.wikilink2:hover {
  color: __missing__ !important;
  text-decoration: none;
}
a.wikilink2:hover {
  border-bottom: 0 none !important;
  text-decoration: none !important;
}

/* link to current page */
.dokuwiki span.curid a {
  font-weight: normal;
}

/* internal link */
.dokuwiki a.wikilink1,
.dokuwiki a.wikilink1:visited {
  color: __existing__ !important;
}

/* external links */
div#bodyContent a.urlextern {
  background: url(static/3rd/vector/external-link-ltr-icon.png) center right no-repeat;
  padding: 0 13px 0 0;
}
div.dokuwiki a.urlextern:visited {
  color: purple;
}

/* email link */
div#bodyContent a.mail {
  background: transparent url(static/3rd/vector/mail-icon.png) center right no-repeat;
  padding: 0 13px 0 0;
}

/* windows share */
div.dokuwiki a.windows {
  background: transparent url(static/3rd/dokuwiki/unc.png) center right no-repeat;
  padding: 0 18px 1px 0;
}

/* interwiki link */
div.dokuwiki a.interwiki {
  background-position: center right;
  padding: 0 17px 0 0;
}
div.dokuwiki a.interwiki:visited {
  color: purple;
}

/* headlines */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: sans-serif;
  background-color: inherit;
  padding: 0;
  clear: left; /* ideally 'both', but problems with toc */
}
div#content .dokuwiki h1,
div#content .dokuwiki h2,
div#content .dokuwiki h3,
div#content .dokuwiki h4,
div#content .dokuwiki h5,
div#content .dokuwiki h6 {
  border-bottom: 1px solid #aaa;
  color: __text__;
  margin: 0;
  padding-bottom: 0.17em;
  padding-top: 0.5em;
}
div#content .dokuwiki h1 a,
div#content .dokuwiki h2 a,
div#content .dokuwiki h3 a,
div#content .dokuwiki h4 a,
div#content .dokuwiki h5 a,
div#content .dokuwiki h6 a {
  color: __text__;
}
div#content .dokuwiki h1 a:hover,
div#content .dokuwiki h2 a:hover,
div#content .dokuwiki h3 a:hover,
div#content .dokuwiki h4 a:hover,
div#content .dokuwiki h5 a:hover,
div#content .dokuwiki h6 a:hover {
  text-decoration: none;
}
div#content .dokuwiki h1 {
  font-size: 160%;
}
div#content .dokuwiki h1,
div#content .dokuwiki h2 {
  margin-bottom: 0.6em;
  font-weight: normal;
}
div#content .dokuwiki h3,
div#content .dokuwiki h4,
div#content .dokuwiki h5,
div#content .dokuwiki h6 {
  font-weight: bold;
  border-bottom: none;
  margin-bottom: 0.3em;
}
div#content .dokuwiki h3 {
  font-size: 132%;
}
div#content .dokuwiki h4 {
  font-size: 116%;
}
div#content .dokuwiki h5 {
  font-size: 100%;
}
div#content .dokuwiki h6 {
  font-size: 80%;
}

/* remove indent from different sections */
div#content .dokuwiki div.level1,
div#content .dokuwiki div.level2,
div#content .dokuwiki div.level3,
div#content .dokuwiki div.level4,
div#content .dokuwiki div.level5 {
  margin-left: 0;
}

/* lists */
div.dokuwiki ul {
  line-height: 1.5em;
  padding: 0;
  list-style-type: square;
  list-style-image: url(static/3rd/vector/bullet-icon.png) !important;
  margin: 0.3em 0 1em 1.5em;
  color: __text_alt__;
}

div.dokuwiki ol {
  line-height: 1.5em;
  padding: 0;
  list-style-image: none;
  margin: 0.3em 0 1em 3.2em;
  color: __text_alt__;
  font-weight: bold;
}

div.dokuwiki li ul,
div.dokuwiki li ol {
  margin: 0 0 0 1.5em; /* no bottom gap in between and smaller left margin for nested lists */
}

div.dokuwiki .li {
  color: __text__;  /* the list items overriding the ul/ol definition */
  font-weight: normal;
}

div.dokuwiki ol { list-style-type: decimal; }
div.dokuwiki ol ol { list-style-type: upper-roman; }
div.dokuwiki ol ol ol { list-style-type: lower-alpha; }
div.dokuwiki ol ol ol ol { list-style-type: lower-greek; }

div.dokuwiki li.open {
  list-style-image: url(static/3rd/dokuwiki/images/open.gif);
}

div.dokuwiki li.closed {
  list-style-image: url(static/3rd/dokuwiki/closed.gif);
}

div.dokuwiki li {
  margin-left: 0;
  margin-bottom: 1px;
}

/* quotes */
div#content .dokuwiki blockquote {
  border-left: 2px solid __border__;
  padding-left: 3px;
  padding-right: 0;
  margin-left: 0.2em;
}

/* preformatted stuff, source code */
.dokuwiki dl.code dt,
.dokuwiki dl.file dt {
  background-color: __background_alt__;
  border: solid __border__;
  border-width: 1px 1px 0;
  color: inherit;
  display: inline;
  padding: 0 .5em;
  margin-left: 1em;
}
.dokuwiki dl.code dd,
.dokuwiki dl.file dd {
  margin: 0;
}
div#content .dokuwiki code,
div#content .dokuwiki pre,
div#content .dokuwiki pre.code,
div#content .dokuwiki pre.file,
div#content .dokuwiki samp,
div#content .dokuwiki kbd,
div#content .dokuwiki tt {
  font-size: 100%;
  background-color: var(--code-bg);
  color: __text__;
  font-size: 1em;
  direction: ltr;
  text-align: left;
}
div#content .dokuwiki em.u code { /* fix if background-color hides underlining */
  text-decoration: underline;
}
div#content .dokuwiki pre,
div#content .dokuwiki pre.code,
div#content .dokuwiki pre.file {
  line-height: 1.2em;
  padding: 0.5em;
  border: 1px dashed __border__;
}
div#content .dokuwiki dl.file,
div#content .dokuwiki dl.file dd {
  margin-left: 0;
}
div#content .dokuwiki dl.file dt,
div#content .dokuwiki dl.code dt {
  background-color: #f9f9f9;
  border-bottom: 2px solid #f9f9f9;
  border-top: 1px dashed __border__;
  border-left: 1px dashed __border__;
  border-right: 1px dashed __border__;
  display: inline;
  margin-left: 2em;
  padding: 0.1em 1em;
}
div#content .dokuwiki dl.file dt a,
div#content .dokuwiki dl.code dt a {
  color: __text__;
}

/* "you are here" and "breadcrumbs" */
.catlinks {
  font-size: 80%;
  margin-bottom: 1em;
  background: var(--bs-light);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.catlinks p {
  margin: 0;
}

/* tables */
th,
td {
  border: 0;
}
td[align="right"],
th[align="right"] {
  text-align: right;
}
.dokuwiki table.inline {
  background-color: var(--card-bg);
  width: auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.dokuwiki table.inline th,
.dokuwiki table.inline td {
  border: 1px solid __border__;
  padding: 0.3rem;
}
.dokuwiki table.inline th {
  color: inherit;
  background-color: __background_alt__;
}
.dokuwiki table.inline tr:hover td,
.dokuwiki table.inline tr:hover th,
.dokuwiki table.inline th:hover {
  background-color: __background_alt__;
}

/* section edit buttons */
.dokuwiki .secedit {
  margin-top: 0;
  float: right;
  margin-top: 1rem;
}
div#content .dokuwiki div.secedit input.button {
  border: 0 none;
  text-transform: lowercase;
  color: __existing__;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: transparent none;
}

/* footnotes */
div.dokuwiki div.fn {
  font-size: 90%;
}

/* link to footnote inside the text */
.dokuwiki sup a.fn_top {
  font-size: 95%;
}

/* insitu-footnotes */
div.insitu-footnote {
  font-size: 0.938em; /* 12px */
  padding: 4px 7px 4px 10px;
}
div.insitu-footnote code,
div.insitu-footnote pre {
  font-size: 90%;
}

/* Toolbar */
button.toolbutton {
  background-color: __background__;
  padding: 0px;
  margin: 0 1px 0 0;
  border: 1px solid __border__;
  cursor: pointer;
}

/* nice alphatransparency background except for IE <7 */
html>body button.toolbutton {
  background: __background__ url(static/3rd/dokuwiki/buttonshadow.png) repeat-x bottom;
}

div.picker {
  width: 250px;
  border: 1px solid __border__;
  background-color: __background_alt__;
  font-size: 11px;
  line-height: 13px;
}

div.pk_hl {
  width: 125px;
}

button.pickerbutton {
  padding: 0px;
  margin: 0 1px 1px 0;
  border: 0;
  background-color: transparent;
  font-size: 80%;
  cursor: pointer;
}

/* gallery plugin compatibilty */
div.dokuwiki .gallery table,
div.dokuwiki .gallery td {
  border: 0 none;
}

/* bureaucracy plugin compatibilty */
div.dokuwiki form.bureaucracy__plugin fieldset {
  text-align: center;
}
div.dokuwiki form.bureaucracy__plugin label {
  width: 95% !important;
  margin-left: auto;
  margin-right: auto;
}
div.dokuwiki form.bureaucracy__plugin label span,
div.dokuwiki form.bureaucracy__plugin input.edit,
div.dokuwiki form.bureaucracy__plugin textarea.edit,
div.dokuwiki form.bureaucracy__plugin fieldset textarea.edit {
  text-align: left;
  margin: auto 5px;
  float: none !important;
  width: 97% !important;
  min-width: 97% !important;
  max-width: 97% !important;
}


/* --------------- sidebar --------------- */
div#panel {
  line-height: 15px;
}
div#panel .dokuwiki {
  font-size: 0.75em;
}
div#panel a.wikilink1,
div#panel a.wikilink2,
div#panel a.urlextern {
  padding-left: 0;
  background: transparent none;
  color: __existing__;
}
div#panel .body {
  margin-right: 0.45em !important;
  padding-top: 0.25em !important;
}
div#panel .body .dokuwiki p {
  margin: 0;
}
div#panel .body .dokuwiki ul li {
  font-size: 1em !important;
  padding: 0.25em 0 !important;
}
div#panel .body .dokuwiki li ul {
  font-size: 95% !important;
  margin: 0.25em 0 0 1em !important;
}
div#panel .body .dokuwiki ol {
  margin: 0 0 0 1.65em;
}
/* QR Code */
div#panel #t-qrcode img {
  margin: 0.5em auto 0.3em auto;
  display: block;
}
/* translation plugin by Anreas Gohr */
div#panel .body .dokuwiki .plugin_translation span {
  display: none;
}
div#panel .body .dokuwiki .plugin_translation {
  padding-right: 0 !important;
  text-align: left;
}
div#panel .body .dokuwiki .plugin_translation,
div#panel .body .dokuwiki .plugin_translation ul,
div#panel .body .dokuwiki .plugin_translation li {
  float: none;
  margin: 0;
  padding-right: 0;
  line-height: 1.125em;
  font-size: 100%;
}
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:link,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:hover,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:active,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:visited,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:link,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:hover,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:active,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:visited {
  background-color: transparent;
  margin: 0;
  padding: 0;
}
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:before,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:before {
  content: attr(title) " (";
}
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:after,
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:after {
  content: ") ";
}
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1 {
  color: __existing__ !important;
}
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2 {
  color: __missing__ !important;
}
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink1:hover {
  text-decoration: underline;
}
div#panel .body .dokuwiki .plugin_translation ul li a.wikilink2:hover {
  text-decoration: underline !important;
}
div#panel .body .dokuwiki .plugin_translation select {
  width: 90%;
  margin: auto !important;
  text-align: left;
}
div#panel .body .dokuwiki .plugin_translation option,
div#panel .body .dokuwiki .plugin_translation option.wikilink1,
div#panel .body .dokuwiki .plugin_translation option.wikilink2 {
  padding: auto 5px !important;
  text-align: left;
}

/* Admin list wrapper adjustments */
.admin-list-wrapper {
    height: 400px; /* Set a fixed height */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Sidebar navigation improvements */
.sidebar .dokuwiki ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .dokuwiki ul li {
    padding: 0;
    margin: 0;
}

.sidebar .dokuwiki ul li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #333;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.sidebar .dokuwiki ul li a:hover {
    background: #e9ecef;
    text-decoration: none;
}

.sidebar .dokuwiki ul li.active > a {
    background: #0d6efd;
    color: white;
}

/* Logo styling */
.sidebar .logo-wrapper {
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.sidebar .logo-wrapper a {
    display: block;
    width: 100%;
    height: 80px; /* Adjust height as needed */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-decoration: none;
}

/* Admin menu improvements */
.admin-list-wrapper {
  background: white;
}

.admin-list-wrapper ul.admin_tasks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-list-wrapper ul.admin_tasks li {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.admin-list-wrapper ul.admin_tasks li:last-child {
  border-bottom: none;
}

/* QR code centering */
#t-qrcode .body {
  width: 100%;
}

#t-qrcode img {
  margin: 0 auto;
  display: block;
}

/* --------------- search --------------- */
/* copy of the original vector id="searchInput" styles cause we have to use
   another id for DokuWiki */
div#simpleSearch input#qsearch__in {
  margin: 0;
  border-width: 0;
  padding: 0.25em;
  line-height: 1em;
  font-size: 0.8em;
  width: 14em;
  background-color: transparent;
}
/* Ajax quicksearch */
#qsearch__out {
  top: 72px;
  display: none;
  left: auto;
  right: 7.93335px;
  bottom: auto;
  height: auto;
  font-family: sans-serif;
  font-size: 0.8em;
  background-color: window;
  border: 1px solid #aaa;
  padding: 0;
  position: static;
}
#qsearch__out ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#qsearch__out li {
  color: windowtext;
  margin: 0;
  width: 100%;
  padding: 1px;
}
#qsearch__out li a {
  width: 97%; /* leave some space for browser rounding errors */
  display: block;
}
#qsearch__out li:hover {
  background-color: #bbb;
}
#qsearch__out li a,
#qsearch__out li a:link,
#qsearch__out li a:visited,
#qsearch__out li a:hover {
  color: windowtext;
  text-decoration: none;
}


/* --------------- footer --------------- */
div#footer a.wikilink1,
div#footer a.wikilink2,
div#footer a.urlextern {
  padding-left: 0;
  background: transparent none;
  color: __existing__;
}
/* default copyright notice layout */
div#footer #footer-info li#footer-info-copyright .license {
  font-size: 100%;
  text-align: left;
  padding: 0;
}
div#footer #footer-info li#footer-info-copyright .license a.urlextern {
  margin-left: 0.4em;
}


/* --------------- Table of contents (TOC) old, until 2012-01-25 ---------------  */
div.dokuwiki div.toc {
  margin: 1.2em 0 0 2em;
  float: right;
  width: 200px;
  font-size: 80%;
  clear: both;
  background-color: transparent;
}

div.dokuwiki div.toc div.tocheader {
  border: 1px solid __border__;
  background-color: __background_alt__;
  text-align: left;
  font-weight: bold;
  padding: 3px;
  margin-bottom: 2px;
  line-height: 1.45em;
}

div.dokuwiki div.toc span.toc_open,
div.dokuwiki div.toc span.toc_close {
  border: 0.4em solid __background_alt__;
  float: right;
  display: block;
  margin: 0.4em 3px 0 0;
}

div.dokuwiki div.toc span.toc_open span,
div.dokuwiki div.toc span.toc_close span {
  display: none;
}

div.dokuwiki div.toc span.toc_open {
  margin-top: 0.4em;
  border-top: 0.4em solid __text__;
}

div.dokuwiki div.toc span.toc_close {
  margin-top: 0;
  border-bottom: 0.4em solid __text__;
}

div.dokuwiki div.toc #toc__inside {
  border: 1px solid __border__;
  background-color: __background__;
  text-align: left;
  padding: 0.5em 0 0.7em 0;
}

div.dokuwiki div.toc ul.toc {
  list-style-type: none;
  list-style-image: none;
  line-height: 1.2em;
  padding: 0 !important;
  margin: 0.3em 0 0 1.5em !important;
}

div.dokuwiki div.toc ul.toc li {
  list-style-image: none;
  list-style-type: none;
  background: transparent url(static/3rd/dokuwiki/tocdot2.gif) 0 0.6em no-repeat;
  padding-left: 0.4em !important;
  margin-bottom: 0.1em !important;
}

div.dokuwiki div.toc ul.toc li.clear {
  background-image: none;
  padding-left: 0.4em;
}

div.dokuwiki div.toc a.toc:link,
div.dokuwiki div.toc a.toc:visited {
  color: #436976;
}

div.dokuwiki div.toc a.toc:hover,
div.dokuwiki div.toc a.toc:active {
  color: __text__;
}

div.toc,
div.dokuwiki div.toc a.toc,
div.dokuwiki div.toc ul.toc {
  border: 0 none;
  background: transparent none;
  font-size: 100%;
}

div.dokuwiki div.toc ul.toc {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1em !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
}

div.dokuwiki div.toc a.toc {
  padding: 0;
}


/* --------------- Table of contents (TOC) new, since 2012-09-10 ---------------  */
div.dokuwiki #dw__toc {
  margin: 1.2em 0 0 2em;
  float: right;
  width: 200px;
  font-size: 90%;
  clear: both;
  background-color: __background__;
  background: var(--bs-light);
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

div.dokuwiki #dw__toc h3 {
  border: 1px solid __border__ !important;
  background-color: __background_alt__ !important;
  text-align: left;
  font-weight: bold !important;
  padding: 3px !important;
  margin-bottom: 2px !important;
  line-height: 1.45em;
  font-size: 90% !important;
  margin-top: 0;
  font-size: 1.1rem;
}

div.dokuwiki #dw__toc h3 strong {
  margin-top: 0.2em;
}

div.dokuwiki #dw__toc h3 ~ div {
  border: 1px solid __border__;
  padding-left: 10px;
}

div.dokuwiki #dw__toc ul.toc {
  background-color: transparent !important;
  border: 0 none;
  margin-bottom: 0;
  list-style: none !important;
  list-style-image: none !important;
  padding-left: 0;
}

div.dokuwiki #dw__toc ul.toc li {
  list-style-image: none;
  list-style-type: none;
  background: none !important; /* Remove the dot background image */
  padding-left: 0 !important;
}

div.dokuwiki #dw__toc ul.toc li.level1 { padding-left: 0 !important; }
div.dokuwiki #dw__toc ul.toc li.level2 { padding-left: 1rem !important; }
div.dokuwiki #dw__toc ul.toc li.level3 { padding-left: 2rem !important; }
div.dokuwiki #dw__toc ul.toc li.level4 { padding-left: 3rem !important; }
div.dokuwiki #dw__toc ul.toc li.level5 { padding-left: 4rem !important; }


/* --------------- generic content classes --------------- */
div.error,
div.info,
div.success,
div.notify {
  font-size: 80%;
  line-height: 1.25em;
}


/* --------------- admin menu --------------- */
/* editing preview */
div#content .dokuwiki div.preview {
  margin-left: 0;
}
/* "remeber me" checkbox, login */
div.dokuwiki form#dw__login label.simple {
  text-align: center;
  padding-bottom: 0.4em;
}
/* main menu */
.dokuwiki ul.admin_tasks li {
  list-style-type: none;
  list-style-image: none;
}
.dokuwiki ul.admin_tasks li a {
  font-weight: bold;
}
/* acl tree */
#acl__tree li {
  list-style-image: none;
  list-style-type: none;
}


/* --------------- media manager popup --------------- */
html.popup {
  background-color: #fff;
}
html.popup body {
  font: 13px sans-serif;
  background-image: none;
  background-color: #fff;
}
html.popup #media__manager {
  min-height: 465px;
}
html.popup #media__manager h1,
html.popup #media__popup h1,
html.popup #media__popup h2 {
  font-size: 1em !important;
  line-height: 1em !important;
  font-weight: bold !important;
}
html.popup #media__opts {
  padding-left: 1em;
  margin-bottom: 0.5em;
}
html.popup #media__opts input {
  float: left;
  display: block;
  margin-top: 4px;
  position: absolute;
}
*+html.popup #media__opts input,
* html.popup #media__opts input {
  position: static;
}
html.popup #media__opts label {
  display: block;
  float: left;
  margin-left: 20px;
  margin-bottom: 4px;
}
*+html.popup #media__opts label,
* html.popup #media__opts label {
  margin-left: 10px;
}
html.popup #media__opts br {
  clear: left;
}


/* --------------- media manager page --------------- */
#mediamanager__page h2,
#mediamanager__page h3 {
  font-size: 1em !important;
  line-height: 1.5em !important;
  font-weight: normal !important;
  padding: 3px 10px !important;
}
#mediamanager__page div.namespaces h2 {
  margin-left: 0.3em;
  margin-bottom: 0;
  border-bottom-color: __background_alt__;
}
#mediamanager__page div.namespaces div.panelHeader {
  padding-top: 11px;
}
#mediamanager__page h3,
#mediamanager__page ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
}
#mediamanager__page .panelHeader ul {
  list-style-image: none !important;
}
#mediamanager__page .panelHeader ul .ui-buttonset {
  font-size: 12px;
}
#mediamanager__page .panelHeader ul li.ui-buttonset {
  background-position: 3px 0;
  padding-bottom: 3px;
}
#mediamanager__page .panelHeader div.no input.button {
  padding: 1px;
  line-height: 1em;
}
#mediamanager__page {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#mediamanager__page .panel {
  background: var(--bs-light);
  padding: 1rem;
  border-radius: 0.25rem;
}


/* --------------- link wizard --------------- */
#link__wiz {
  text-align: center;
}
#link__wiz_result div.even {
  background-color: #f5f5f5;
}


/* --------------- search result formating --------------- */
div.dokuwiki div.search_result,  /* old, until 2012-01-25 */
div.dokuwiki dl.search_results { /* new, since 2012-09-10 */
  margin-bottom: 6px;
  padding: 0 10px 0 30px;
}

div.dokuwiki .search_snippet,       /* old, until 2012-01-25 */
div.dokuwiki dl.search_results dd { /* new, since 2012-09-10 */
  font-size: 12px;
  margin-left: 20px;
}

div.dokuwiki .search_sep {
  color: __text__;
}

div.dokuwiki .search_hit {
  color: __text__;
  background-color: __highlight__;
}
div.dokuwiki strong.search_hit {
  font-weight: normal;
}

div.dokuwiki div.search_quickresult {
  margin: 0 0 15px 30px;
  padding: 0 10px 10px 0;
  border-bottom: 1px dashed __border__;
}
div.dokuwiki div.search_quickresult h3 {
  margin: 0 0 1.0em 0;
  font-size: 1em;
  font-weight: bold;
}

div.dokuwiki ul.search_quickhits {
  margin: 0 0 0.5em 1.0em;
}

div.dokuwiki ul.search_quickhits li {
  margin: 0 1.0em 0 1.0em;
  float: left;
  width: 30%;
}

div.dokuwiki .section_highlight {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  border: 0 none;
  background-color: __background_alt__ !important;
}


/* --------------- JS popup ----------------- */
.JSpopup {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  line-height: 1.2;
  padding: 0 .2em;
}
.JSpopup ul,
.JSpopup ol {
  padding-left: 0;
}


/* --------------- diff view ----------------- */
.dokuwiki table.diff td {
  font-size: 12px;
  line-height: 17px;
}
.dokuwiki table.diff th {
  font-size: 12px;
}
.dokuwiki table.diff td.diff-addedline,
.dokuwiki table.diff td.diff-deletedline,
.dokuwiki table.diff td.diff-context {
  padding-left: 2px;
  padding-right: 2px;
}

/* Base overrides for Bootstrap compatibility */
body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
}

/* DokuWiki specific styles */
.dokuwiki .secedit {
    float: right;
    margin-top: 1rem;
}

.dokuwiki div.table {
    overflow-x: auto;
}

.dokuwiki table.inline {
    width: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.dokuwiki table.inline th,
.dokuwiki table.inline td {
    padding: 0.3rem;
}

/* Search results */
.dokuwiki .search_results {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bs-light);
    border-radius: 0.25rem;
}

/* TOC */
#dw__toc {
    background: var(--bs-light);
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

#dw__toc h3 {
    margin-top: 0;
}

/* Sidebar */
.sidebar {
    position: static;
    min-height: 100vh;
    background: var(--sidebar-bg);
    padding: 1rem 0;
    border-right: 1px solid var(--border-color);
}

.sidebar .portal {
    margin-bottom: 1.5rem;
}

.sidebar h5 {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin: 0;
    background: #e9ecef;
    border-radius: 0.25rem;
}

.sidebar .body {
    padding: 0.5rem 0;
}

/* Sidebar navigation improvements */
.sidebar .dokuwiki ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .dokuwiki ul li {
    padding: 0;
    margin: 0;
}

.sidebar .dokuwiki ul li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #333;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.sidebar .dokuwiki ul li a:hover {
    background: #e9ecef;
    text-decoration: none;
}

.sidebar .dokuwiki ul li.active > a {
    background: #0d6efd;
    color: white;
}

/* Media manager */
#mediamanager__page {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#mediamanager__page .panel {
    background: var(--bs-light);
    padding: 1rem;
    border-radius: 0.25rem;
}

/* Layout fixes */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container-fluid {
    flex: 1;
}

/* TOC Styling */
#dw__toc {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

#dw__toc h3 {
    margin-top: 0;
    font-size: 1.1rem;
}

#dw__toc .toc {
    margin-bottom: 0;
}

/* Page actions */
.btn-group {
    margin-right: 1rem;
}

/* Media query for mobile */
@media (max-width: 768px) {
    #dw__toc {
        margin-bottom: 2rem;
    }
}

/* Sticky TOC for desktop */
@media (min-width: 768px) {
    .sticky-top {
        top: 1rem;
    }
}

/* Sidebar improvements */
@media (min-width: 768px) {
    /* Override Bootstrap collapse on desktop */
    .sidebar.collapse:not(.show) {
        display: block !important;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 25% !important; /* Force width for md screens */
        max-width: 16.666667%; /* Match col-lg-2 width */
        z-index: 100;
        background: white;
        overflow-y: auto;
        padding-top: 1rem;
        border-right: 1px solid rgba(0,0,0,.1);
    }

    /* Adjust main content margin to prevent overlap */
    main.ms-md-auto {
        margin-left: 25% !important; /* Match sidebar width */
    }

    .sidebar .sticky-top {
        position: relative;
        top: 0;
    }
}

/* Mobile sidebar improvements */
@media (max-width: 767.98px) {
    .sidebar {
        padding-top: 0; /* Remove top padding since we have a header now */
    }
    
    #dw__search_mobile .input-group {
        width: 100%;
    }
    
    .sidebar .dropdown-menu {
        position: fixed;
        max-height: 300px;
        overflow-y: auto;
    }
}

/* Mobile sidebar improvements */
@media (max-width: 767.98px) {
    .sidebar {
        padding-top: 0;
    }
    
    /* Prevent dropdown from affecting sidebar width */
    .sidebar .dropdown-menu {
        position: fixed;
        max-height: 300px;
        overflow-y: auto;
        width: auto !important;
        min-width: 200px;
    }

    /* Constrain search bar width */
    #dw__search_mobile .input-group {
        max-width: 100%;
    }

    /* Force dropdown to stay within sidebar bounds */
    .sidebar .dropdown {
        position: static;
    }
    
    /* Keep sidebar width fixed */
    .sidebar.show {
        width: 280px !important;
    }

    /* Ensure dropdowns don't affect layout */
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }

    /* Make dropdown float over content */
    .dropdown-menu {
        position: fixed !important;
        max-height: 300px;
        overflow-y: auto;
        margin-top: 0 !important;
    }

    /* Prevent navbar height changes */
    .navbar {
        height: 56px; /* Fixed navbar height */
        overflow: visible;
    }

    .navbar .dropdown {
        position: static;
    }

    .navbar .dropdown-menu {
        position: absolute;
        right: 1rem;
        left: auto;
        top: 100%;
    }

    /* Constrain search bar width */
    #dw__search_mobile .input-group {
        max-width: 160px;
    }

    /* Remove default margins from search form */
    #dw__search_mobile {
        margin: 0;
    }

    /* Remove default list styling and dots */
    .sidebar .dokuwiki ul,
    .sidebar .dokuwiki ul.admin_tasks {
        list-style: none !important;
        list-style-image: none !important;
    }
    
    .sidebar .dokuwiki ul li,
    .sidebar .dokuwiki ul.admin_tasks li {
        list-style: none !important;
        list-style-image: none !important;
    }
}

/* Mobile navbar and dropdown fixes */
@media (max-width: 767.98px) {
    /* Keep navbar height fixed */
    .navbar {
        height: 56px;
        position: relative;
    }

    /* Fix dropdown positioning */
    .navbar .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1031;
        margin-top: 0;
        width: auto !important;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Ensure dropdown container is positioned correctly */
    .navbar .dropdown {
        position: static !important;
        display: inline-block;
    }

    /* Keep other elements in navbar visible */
    .navbar > .container-fluid {
        position: static;
    }
}

/* Language selector styling */
.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

/* Layout container improvements */
.container-fluid {
    max-width: 55cm; /* Approximately suitable for 27" monitor */
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    margin: 0 auto;
}

/* Update sidebar positioning */
@media (min-width: 768px) {
    /* Container wrapper to keep sidebar with content */
    .wrapper {
        max-width: 55cm; /* Match container max-width */
        margin: 0 auto;
        display: flex;
        position: relative;
    }

    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 9cm !important; /* Fixed width in cm */
        min-width: 200px; /* Minimum width for smaller screens */
    }

    /* Main content positioning */
    main.ms-md-auto {
        margin-left: 0 !important;
        width: calc(100% - 9cm); /* Remaining space after sidebar */
    }

    /* Large screen adjustments */
    @media (min-width: 55cm) {
        .wrapper {
            margin: 0 0 0 auto; /* Push content to right when screen is wider */
        }
        
        .sidebar {
            margin-left: 0;
        }
    }
}

/* Remove previous responsive adjustments */
@media (min-width: 1221px) {
    .sidebar {
        width: 9cm !important; /* Override previous percentage-based widths */
    }

    main.ms-md-auto {
        width: calc(100% - 9cm);
    }
}

/* Remove previous centering calculations */
@media (min-width: 1920px) {
    .container-fluid {
        margin: 0 auto;
    }
}

/* Remove any max-width constraints on main content */
main {
    width: 100%;
    display: block;
}

/* Updated responsive sidebar and navbar behavior */
@media (min-width: 768px) {
    /* Hide burger menu and its button on desktop */
    .navbar-toggler {
        display: none !important;
    }

    /* Show sidebar by default on desktop */
    .sidebar {
        display: block !important;
        position: sticky;
        top: 0;
        height: 100vh;
        width: 9cm !important;
        min-width: 200px;
        z-index: 100;
        background: white;
        padding-top: 1rem;
        border-right: 1px solid rgba(0,0,0,.1);
    }

    /* Ensure sidebar doesn't collapse on desktop */
    .sidebar.collapse:not(.show) {
        display: block !important;
    }

    /* Main content positioning */
    main.ms-md-auto {
        margin-left: 0 !important;
        width: calc(100% - 9cm);
    }
}

/* Mobile layout adjustments */
@media (max-width: 767.98px) {
    /* Show burger menu and properly style sidebar for mobile */
    .sidebar {
        display: none;
        position: fixed;
        top: 56px; /* Match navbar height */
        left: 0;
        bottom: 0;
        width: 280px !important;
        z-index: 1030;
        background: white;
        overflow-y: auto;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    /* When sidebar is shown via burger menu */
    .sidebar.show {
        display: block;
    }

    /* Ensure navbar stays above sidebar */
    .navbar {
        z-index: 1031;
    }

    /* Main content takes full width on mobile */
    main.ms-md-auto {
        width: 100%;
        margin-left: 0 !important;
    }
}

.main-content-row{
  flex-wrap: nowrap;
}

/* Custom flex layout for sidebar and main content */
.main-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 55cm;
  margin: 0 auto; /* Center the wrapper when screen is wider */
}

/* Container for the entire layout */
.page-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 55cm) {
  .page-container {
    padding: 0 1rem; /* Add some padding on very wide screens */
  }
  
  .main-wrapper {
    margin: 0 auto; /* Ensure centering on wide screens */
  }
}

/* Rest of existing styles */
.sidebar {
  width: 9cm;
  min-width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: #f8f9fa;
  border-right: 1px solid rgba(0,0,0,.1);
  transition: transform 0.3s ease;
}

main.main-content {
  flex: 1;
  min-width: 0; /* Prevents flex items from overflowing */
  overflow-x: hidden;
  max-width: calc(55cm - 9cm); /* Maximum content width minus sidebar width */
  padding: 1rem; /* Add padding to the main content */
}

/* Adjust transition for create/edit and old revisions icons */
@media (max-width: 887px) {
  .btn-group .btn span.d-none.d-md-inline {
    display: none !important;
  }
  .btn-group .btn span.d-md-none {
    display: inline !important;
  }
}

/* Dark mode specific adjustments */
[data-bs-theme="dark"] .btn-outline-primary {
  color: #8bb4c2;
  border-color: #8bb4c2;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: #aaa;
  border-color: #666;
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-color);
}

[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: var(--sidebar-bg);
  color: var(--link-hover-color);
}

/* Adjust sidebar for mobile to take full width */
@media (max-width: 767.98px) {
    .sidebar {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: -100%;
        transition: left 0.3s ease;
        background-color: #ffffff; /* Adjust as needed */
        z-index: 1050; /* Ensure it's above other elements */
    }
    .sidebar.show {
        left: 0;
    }

    /* Style for the close button */
    #sidebarCloseButton {
        position: absolute;
        top: 15px;
        right: 20px;
        z-index: 1060;
    }

    /* Ensure navigation takes full height */
    .sidebar-nav {
        height: 100%;
        overflow-y: auto;
    }
}

[data-bs-theme="dark"] body {
    background-color: #121212; /* Example dark background color */
}

[data-bs-theme="dark"] .main-content {
    border: 1px solid #333333; /* Example dark border color */
    border: none;
    background-image: none!important;

}
body {
  background-image: none!important;
}

/* Main content styling */
.main-content {
  background-color: var(--main-bg);
  border-color: var(--main-border);
}

/* Ensure the main tag respects the theme */
main.main-content {
  background-color: var(--main-bg);
  border-color: var(--main-border);
}

/* Update dark mode overrides */
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] main.main-content {
  background-color: var(--main-bg);
  border-color: var(--main-border);
}

/* Remove old TOC styling */
#bodyContent #dw__toc {
  display: none;
}

/* New TOC styling */
.sidebar-toc {
  position: sticky;
  top: 5rem; /* Adjust based on your navbar height + desired spacing */
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

.sidebar-toc #dw__toc {
  background: var(--bs-light);
  border-radius: 0.25rem;
  padding: 0;
  margin: 0;
  background-color: var(--card-bg);
}

.sidebar-toc #dw__toc h3 {
  font-size: 1.1rem;
  margin: 0;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-toc #dw__toc .toc {
  list-style: none;
  padding: 1rem;
  margin: 0;
  background-color: var(--card-bg);
}

.sidebar-toc #dw__toc ul.toc li {
  margin: 0.5rem 0;
  padding: 0;
}

.sidebar-toc #dw__toc ul.toc div.li {
  background-color: var(--card-bg);
}

.sidebar-toc #dw__toc ul.toc li a {
  color: var(--text-color);
  text-decoration: none;
  display: block;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.sidebar-toc #dw__toc ul.toc li a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
  background-color: var(--dropdown-hover);
}

/* Level indentation */
.sidebar-toc #dw__toc ul.toc li.level2 { padding-left: 0; }
.sidebar-toc #dw__toc ul.toc li.level3 { padding-left: 1rem; }
.sidebar-toc #dw__toc ul.toc li.level4 { padding-left: 2rem; }
.sidebar-toc #dw__toc ul.toc li.level5 { padding-left: 3rem; }

/* Dark mode support */
[data-bs-theme="dark"] .sidebar-toc #dw__toc {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-bs-theme="dark"] .sidebar-toc #dw__toc ul.toc div.li {
  background-color: var(--card-bg);
}

[data-bs-theme="dark"] .sidebar-toc #dw__toc ul.toc li a {
  color: var(--text-color);
}

[data-bs-theme="dark"] .sidebar-toc #dw__toc ul.toc li a:hover {
  background-color: var(--dropdown-hover);
  color: var(--link-hover-color);
}

/* Updated TOC styling */
.sidebar-toc #dw__toc {
  background: var(--bs-light);
  border-radius: 0.25rem;
  padding: 0;
  margin: 0;
  background-color: var(--card-bg);
  /* Remove border */
  border: none;
}

.sidebar-toc #dw__toc h3 {
  font-size: 1.1rem;
  margin: 0;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--header-bg);
}

.sidebar-toc #dw__toc
{
  width: auto!important;
} 

.sidebar-toc #dw__toc strong
{
  display: none;
} 

.sidebar-toc #dw__toc .toc {
  list-style: none;
  /* Reduce padding */
  padding: 0rem!important;
  border: none!important;
  margin: 0;
  background-color: var(--card-bg);
}

.sidebar-toc #dw__toc ul.toc li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-toc #dw__toc ul.toc li:last-child {
  border-bottom: none;
}

.sidebar-toc #dw__toc ul.toc div.li {
  background-color: var(--card-bg);
}

.sidebar-toc #dw__toc ul.toc li a {
  color: var(--text-color);
  text-decoration: none;
  display: block;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.sidebar-toc #dw__toc ul.toc li a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
  background-color: var(--dropdown-hover);
}

/* Adjust level indentation to be smaller */
.sidebar-toc #dw__toc ul.toc li.level2 { padding-left: 0.5rem; }
.sidebar-toc #dw__toc ul.toc li.level3 { 
  padding-left: 1rem;
  border-left: 1px solid var(--border-color);
}
.sidebar-toc #dw__toc ul.toc li.level4 { 
  padding-left: 1.5rem;
  border-left: 1px solid var(--border-color);
}
.sidebar-toc #dw__toc ul.toc li.level5 { 
  padding-left: 2rem;
  border-left: 1px solid var(--border-color);
}

/* Dark mode support */
[data-bs-theme="dark"] .sidebar-toc #dw__toc {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}