/* Mikio "modern" subtheme — Subtle polish overrides */
/* To use: set customTheme = "modern" in DokuWiki config */

/* ========== Global ========== */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========== Typography — Body text ========== */
.mikio .mikio-content {
    font-size: 0.9rem;
}

/* ========== Typography — Headings (works in both themes) ========== */
.mikio .mikio-content h1,
.mikio .mikio-content .section_highlight_wrapper h1 {
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.mikio .mikio-content h2,
.mikio .mikio-content .section_highlight_wrapper h2 {
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-left: 0.75rem;
    border-left: 3px solid #3b82f6;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

.mikio .mikio-content h3,
.mikio .mikio-content .section_highlight_wrapper h3 {
    font-weight: 600;
    letter-spacing: -0.015em;
    padding-left: 0.75rem;
    border-left: 3px solid #64748b;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.mikio .mikio-content h4,
.mikio .mikio-content h5,
.mikio .mikio-content h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ========== Navbar — Softer Shadow ========== */
.mikio-navbar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.2s ease;
}

.mikio-navbar .mikio-navbar-brand-title-text {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ========== Buttons — Rounded & Smooth ========== */
.mikio .mikio-control,
.mikio .mikio-button,
.mikio .secedit .mikio-button,
.mikio-button-submit,
.mikio-button-small,
.mikio button {
    border-radius: 0.5rem !important;
    transition: all 0.2s ease;
}

.mikio .mikio-button:hover:not(:disabled),
.mikio-button-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ========== Search Input — Rounder ========== */
.mikio .mikio-search input {
    border-radius: 0.5rem 0 0 0.5rem !important;
}

.mikio .mikio-search button {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

/* ========== Sidebar — Link Polish ========== */
.mikio .mikio-sidebar .mikio-sidebar-content a {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    margin: 0.25rem 0;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}

.mikio .mikio-sidebar .mikio-sidebar-content a:hover {
    border-left-color: #3b82f6;
    padding-left: 0.65rem;
}

/* ========== Breadcrumbs — Subtle ========== */
.mikio .mikio-breadcrumbs,
.mikio .mikio-youarehere {
    border-radius: 0 !important;
    transition: background-color 0.15s ease;
}

.mikio .mikio-breadcrumbs a,
.mikio .mikio-youarehere a {
    transition: color 0.15s ease;
}

/* ========== TOC — More Polished ========== */
.mikio .mikio-toc #dw__toc {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mikio .mikio-toc a {
    border-radius: 0.25rem;
    padding: 0.2rem 0.4rem;
    transition: all 0.15s ease;
}

.mikio .mikio-toc a:hover {
    background-color: rgba(59, 130, 246, 0.08);
}

/* ========== Tables — Row Hover & Polish ========== */
.mikio .mode_show table thead tr {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.mikio .mode_show table tbody tr {
    transition: background-color 0.15s ease;
}

.mikio .mode_show table tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.06) !important;
}

/* ========== Tags — Pill Style ========== */
.mikio .mikio-tags a {
    border-radius: 2rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mikio .mikio-tags a:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========== Focus States — Modern Ring ========== */
.mikio .mikio-control:focus,
.mikio .mikio-button:focus,
.mikio input:focus,
.mikio select:focus,
.mikio textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

/* ========== Page Tools — Smoother ========== */
#dw__pagetools a svg {
    transition: fill 0.15s ease;
}

/* ========== Dropdown — Rounder ========== */
.mikio .mikio-nav-dropdown-menu {
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* ========== Selection Color ========== */
::selection {
    background-color: rgba(59, 130, 246, 0.2);
    color: inherit;
}

/* ==================================================================
   DARK MODE SPECIFIC
   ================================================================== */

/* Sidebar — visually distinct from page background (#222 default) */
:root[data-theme="theme-dark"] .mikio-sidebar {
    background-color: #1a2035;
    border-color: #2d3a52;
    color: #94a3b8;
}

:root[data-theme="theme-dark"] .mikio-sidebar .mikio-sidebar-content a,
:root[data-theme="theme-dark"] .mikio-sidebar .mikio-sidebar-content a:visited {
    color: #93c5fd;
}

:root[data-theme="theme-dark"] .mikio .mikio-sidebar .mikio-sidebar-content a:hover {
    background-color: rgba(96, 165, 250, 0.12);
    color: #bfdbfe;
}

:root[data-theme="theme-dark"] .mikio-sidebar .mikio-user-info {
    border-bottom-color: #2d3a52;
}

:root[data-theme="theme-dark"] .mikio-sidebar-header {
    border-bottom-color: #2d3a52;
}

:root[data-theme="theme-dark"] .mikio-sidebar-footer {
    border-top-color: #2d3a52;
}

/* Sidebar toggle chevron — visible in dark mode */
:root[data-theme="theme-dark"] .mikio-sidebar .mikio-sidebar-toggle {
    color: rgba(255, 255, 255, 0.5);
}

:root[data-theme="theme-dark"] .mikio-sidebar .mikio-sidebar-toggle .icon:before,
:root[data-theme="theme-dark"] .mikio-sidebar .mikio-sidebar-toggle .icon:after {
    background: rgba(255, 255, 255, 0.5);
}

/* Content area */
:root[data-theme="theme-dark"] .mikio .mikio-content {
    background-color: #1e1e2e;
}

/* Headings */
:root[data-theme="theme-dark"] .mikio .mikio-content h2,
:root[data-theme="theme-dark"] .mikio .mikio-content .section_highlight_wrapper h2 {
    border-left-color: #60a5fa;
}

:root[data-theme="theme-dark"] .mikio .mikio-content h3,
:root[data-theme="theme-dark"] .mikio .mikio-content .section_highlight_wrapper h3 {
    border-left-color: #94a3b8;
}

/* Code */
:root[data-theme="theme-dark"] .mikio .mikio-content code {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
}

:root[data-theme="theme-dark"] .mikio .mikio-content pre {
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.3);
}

/* TOC */
:root[data-theme="theme-dark"] .mikio .mikio-toc #dw__toc {
    background-color: #1e293b;
    border-color: #2d3a52;
}

:root[data-theme="theme-dark"] .mikio .mikio-toc a {
    color: #94a3b8;
}

:root[data-theme="theme-dark"] .mikio .mikio-toc a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

/* Tables */
:root[data-theme="theme-dark"] .mikio .mode_show table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Breadcrumbs */
:root[data-theme="theme-dark"] .mikio .mikio-breadcrumbs,
:root[data-theme="theme-dark"] .mikio .mikio-youarehere {
    background-color: #1e293b;
    border-color: #1e293b;
    color: #64748b;
}

:root[data-theme="theme-dark"] .mikio .mikio-breadcrumbs a,
:root[data-theme="theme-dark"] .mikio .mikio-youarehere a {
    color: #94a3b8;
}

:root[data-theme="theme-dark"] .mikio .mikio-breadcrumbs a:hover,
:root[data-theme="theme-dark"] .mikio .mikio-youarehere a:hover {
    color: #e2e8f0;
}

/* Footer */
:root[data-theme="theme-dark"] .mikio-footer {
    background-color: #141b2d;
    border-top: 1px solid #2d3a52;
    color: #64748b;
}

:root[data-theme="theme-dark"] .mikio-footer a {
    color: #94a3b8;
}

:root[data-theme="theme-dark"] .mikio-footer a:hover {
    color: #e2e8f0;
}

/* ==================================================================
   LIGHT MODE SPECIFIC
   ================================================================== */
:root[data-theme="theme-light"] .mikio .mikio-sidebar .mikio-sidebar-content a:hover {
    background-color: rgba(37, 99, 235, 0.06);
}

:root[data-theme="theme-light"] .mikio .mikio-content code {
    background-color: #f1f5f9;
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.875em;
}

:root[data-theme="theme-light"] .mikio .mikio-content pre {
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

:root[data-theme="theme-light"] .mikio-footer {
    border-top: 1px solid #e2e8f0;
}

/* ==================================================================
   PLUGIN: SearchNS — Namespace filter integration
   DOM: <form> → <label><span>Filter</span><select></select></label>
                  <div class="no"><input><button></button></div>
   ================================================================== */

/* --- Navbar: unified input group layout --- */
.mikio-navbar .mikio-search form,
.mikio-navbar form.mikio-search {
    display: flex !important;
    align-items: stretch;
    gap: 0 !important;
}

/* Hide the "Filter" text span in navbar (dropdown is self-explanatory) */
.mikio-navbar .mikio-search label[for="qsearchns__ns"]>span,
.mikio-navbar form.mikio-search label[for="qsearchns__ns"]>span {
    display: none;
}

/* Label wrapper: no extra padding, acts as inline container for the select */
.mikio-navbar .mikio-search label[for="qsearchns__ns"],
.mikio-navbar form.mikio-search label[for="qsearchns__ns"] {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/* Namespace dropdown in navbar — matched to search input */
.mikio-navbar .mikio-search #qsearchns__ns,
.mikio-navbar form.mikio-search #qsearchns__ns {
    border: 0.8px solid #999;
    border-right: none;
    background-color: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 1rem;
    padding: 6px 1.6rem 6px 12px;
    height: 39.2px;
    line-height: 25.6px;
    border-radius: 0.5rem 0 0 0.5rem !important;
    outline: none;
    cursor: pointer;
    min-width: 7rem;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    box-sizing: border-box;
}

/* Dropdown option styling for dark mode */
:root[data-theme="theme-dark"] .mikio-navbar .mikio-search #qsearchns__ns option {
    background-color: #141b2d;
    color: #cbd5e1;
}

/* Search input wrapper — wider, flex-grow, no gap */
.mikio-navbar .mikio-search div.no,
.mikio-navbar form.mikio-search div.no {
    display: flex;
    flex: 1;
    min-width: 14rem;
    margin: 0;
    padding: 0;
}

/* Search input itself — fill available space, no left radius */
.mikio-navbar .mikio-search div.no input,
.mikio-navbar form.mikio-search div.no input {
    border-radius: 0 !important;
    border-left: none;
    flex: 1;
    min-width: 10rem;
}

/* Search button — right radius */
.mikio-navbar .mikio-search div.no button,
.mikio-navbar form.mikio-search div.no button {
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

/* --- Sidebar: stacked layout --- */
.mikio-sidebar .mikio-search form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Sidebar: hide "Filter" text span, keep label as block container */
.mikio-sidebar .mikio-search label[for="qsearchns__ns"]>span {
    display: none;
}

.mikio-sidebar .mikio-search label[for="qsearchns__ns"] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Sidebar namespace dropdown — full width */
.mikio-sidebar .mikio-search #qsearchns__ns {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.08);
    color: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 1.6rem 0.4rem 0.5rem;
    border-radius: 0.375rem !important;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
}

:root[data-theme="theme-dark"] .mikio-sidebar .mikio-search #qsearchns__ns option {
    background-color: #141b2d;
    color: #cbd5e1;
}

/* Sidebar: div.no full width below dropdown */
.mikio-sidebar .mikio-search div.no {
    display: flex;
    width: 100%;
}

.mikio-sidebar .mikio-search div.no input {
    flex: 1;
}

/* --- Search results: namespace headings --- */
.searchns_heading {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    padding: 0.6rem 0 0.3rem 0;
    margin-top: 1rem;
    border-bottom: 2px solid #3b82f6;
    display: inline-block;
}

/* --- Quick search results popup (used by searchns plugin) --- */
#qsearch__out {
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    padding: 0.25rem 0;
    min-width: 20rem;
    max-height: 24rem;
    overflow-y: auto;
    z-index: 1000;
    /* Position below the search input, aligned right */
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    margin-top: 0.25rem;
}

/* Make the search form a positioning context */
.mikio-navbar .mikio-search form,
.mikio-navbar form.mikio-search {
    position: relative;
}

#qsearch__out ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#qsearch__out li {
    padding: 0;
    margin: 0;
}

#qsearch__out a {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: background-color 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Category heading (li without an anchor, plain text like "WIP") */
#qsearch__out li:not(:has(a)) {
    padding: 0.4rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.5;
    pointer-events: none;
}

#qsearch__out li:not(:has(a))~li:not(:has(a)) {
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.5rem;
}

:root[data-theme="theme-dark"] #qsearch__out {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

:root[data-theme="theme-dark"] #qsearch__out a {
    color: #93c5fd;
}

:root[data-theme="theme-dark"] #qsearch__out a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #bfdbfe;
}

:root[data-theme="theme-dark"] #qsearch__out li:not(:has(a)) {
    color: #94a3b8;
}

/* --- Light mode overrides --- */
:root[data-theme="theme-light"] .mikio-navbar .mikio-search #qsearchns__ns {
    border-color: #ced4da;
    background-color: #e9ecef;
    color: #333;
}

:root[data-theme="theme-light"] .mikio-navbar .mikio-search #qsearchns__ns option {
    background-color: #fff;
    color: #333;
}

:root[data-theme="theme-light"] .mikio-sidebar .mikio-search #qsearchns__ns {
    border-color: #ced4da;
    background-color: #f1f5f9;
    color: #333;
}

:root[data-theme="theme-light"] .mikio-sidebar .mikio-search #qsearchns__ns option {
    background-color: #fff;
    color: #333;
}


/* ==================================================================
   PLUGIN: Wrap — Modern callout overrides
   GitHub-style alertboxes with left accent border, subtle bg, SVG icons
   ================================================================== */

.dokuwiki div.wrap_info,
.dokuwiki div.wrap_important,
.dokuwiki div.wrap_alert,
.dokuwiki div.wrap_tip,
.dokuwiki div.wrap_help,
.dokuwiki div.wrap_todo,
.dokuwiki div.wrap_download,
.dokuwiki div.wrap_danger,
.dokuwiki div.wrap_warning,
.dokuwiki div.wrap_caution,
.dokuwiki div.wrap_notice,
.dokuwiki div.wrap_safety {
    border-radius: 0.5rem;
    border-left: 4px solid;
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    margin-bottom: 1.25rem;
    min-height: auto !important;
    background-position: 0.65rem 0.85rem !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    font-size: 0.9rem;
    line-height: 1.55;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Kill inner paragraph top-margin so text aligns with the icon */
.dokuwiki div.wrap_info>p:first-child,
.dokuwiki div.wrap_important>p:first-child,
.dokuwiki div.wrap_alert>p:first-child,
.dokuwiki div.wrap_tip>p:first-child,
.dokuwiki div.wrap_help>p:first-child,
.dokuwiki div.wrap_todo>p:first-child,
.dokuwiki div.wrap_download>p:first-child,
.dokuwiki div.wrap_danger>p:first-child,
.dokuwiki div.wrap_warning>p:first-child,
.dokuwiki div.wrap_caution>p:first-child,
.dokuwiki div.wrap_notice>p:first-child,
.dokuwiki div.wrap_safety>p:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.dokuwiki div.wrap_info>p:last-child,
.dokuwiki div.wrap_important>p:last-child,
.dokuwiki div.wrap_alert>p:last-child,
.dokuwiki div.wrap_tip>p:last-child,
.dokuwiki div.wrap_help>p:last-child,
.dokuwiki div.wrap_todo>p:last-child,
.dokuwiki div.wrap_download>p:last-child,
.dokuwiki div.wrap_danger>p:last-child,
.dokuwiki div.wrap_warning>p:last-child,
.dokuwiki div.wrap_caution>p:last-child,
.dokuwiki div.wrap_notice>p:last-child,
.dokuwiki div.wrap_safety>p:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ──── INFO ──── */
.dokuwiki div.wrap_info,
.dokuwiki .wrap_info {
    background-color: rgba(56, 132, 244, 0.08) !important;
    border-left-color: #3b82f6 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_info {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='12' y1='16' x2='12' y2='12'/%3e%3cline x1='12' y1='8' x2='12.01' y2='8'/%3e%3c/svg%3e") !important;
}

/* ──── TIP ──── */
.dokuwiki div.wrap_tip,
.dokuwiki .wrap_tip {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border-left-color: #10b981 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_tip {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18h6'/%3e%3cpath d='M10 22h4'/%3e%3cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3e%3c/svg%3e") !important;
}

/* ──── IMPORTANT ──── */
.dokuwiki div.wrap_important,
.dokuwiki .wrap_important {
    background-color: rgba(168, 85, 247, 0.08) !important;
    border-left-color: #a855f7 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_important {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' y1='9' x2='12' y2='13'/%3e%3cline x1='12' y1='17' x2='12.01' y2='17'/%3e%3c/svg%3e") !important;
}

/* ──── ALERT ──── */
.dokuwiki div.wrap_alert,
.dokuwiki .wrap_alert {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border-left-color: #ef4444 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_alert {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='15' y1='9' x2='9' y2='15'/%3e%3cline x1='9' y1='9' x2='15' y2='15'/%3e%3c/svg%3e") !important;
}

/* ──── WARNING ──── */
.dokuwiki div.wrap_warning,
.dokuwiki .wrap_warning {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-left-color: #f59e0b !important;
    color: inherit !important;
}

.dokuwiki div.wrap_warning {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' y1='9' x2='12' y2='13'/%3e%3cline x1='12' y1='17' x2='12.01' y2='17'/%3e%3c/svg%3e") !important;
}

/* ──── CAUTION ──── */
.dokuwiki div.wrap_caution,
.dokuwiki .wrap_caution {
    background-color: rgba(234, 179, 8, 0.08) !important;
    border-left-color: #eab308 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_caution {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eab308' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 9v4'/%3e%3cpath d='M12 17h.01'/%3e%3cpath d='M3.44 18L10.59 4.58a1.5 1.5 0 0 1 2.82 0L20.56 18a1.5 1.5 0 0 1-1.41 2H4.85a1.5 1.5 0 0 1-1.41-2z'/%3e%3c/svg%3e") !important;
}

/* ──── NOTICE ──── */
.dokuwiki div.wrap_notice,
.dokuwiki .wrap_notice {
    background-color: rgba(56, 132, 244, 0.08) !important;
    border-left-color: #3b82f6 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_notice {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='12' y1='16' x2='12' y2='12'/%3e%3cline x1='12' y1='8' x2='12.01' y2='8'/%3e%3c/svg%3e") !important;
}

/* ──── DANGER ──── */
.dokuwiki div.wrap_danger,
.dokuwiki .wrap_danger {
    background-color: rgba(220, 38, 38, 0.1) !important;
    border-left-color: #dc2626 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_danger {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3e%3cline x1='12' y1='8' x2='12' y2='12'/%3e%3cline x1='12' y1='16' x2='12.01' y2='16'/%3e%3c/svg%3e") !important;
}

/* ──── SAFETY ──── */
.dokuwiki div.wrap_safety,
.dokuwiki .wrap_safety {
    background-color: rgba(34, 197, 94, 0.08) !important;
    border-left-color: #22c55e !important;
    color: inherit !important;
}

.dokuwiki div.wrap_safety {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3e%3cpolyline points='9 12 11 14 15 10'/%3e%3c/svg%3e") !important;
}

/* ──── HELP ──── */
.dokuwiki div.wrap_help,
.dokuwiki .wrap_help {
    background-color: rgba(168, 85, 247, 0.08) !important;
    border-left-color: #a855f7 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_help {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3e%3cline x1='12' y1='17' x2='12.01' y2='17'/%3e%3c/svg%3e") !important;
}

/* ──── TODO ──── */
.dokuwiki div.wrap_todo,
.dokuwiki .wrap_todo {
    background-color: rgba(20, 184, 166, 0.08) !important;
    border-left-color: #14b8a6 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_todo {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3e%3cpolyline points='22 4 12 14.01 9 11.01'/%3e%3c/svg%3e") !important;
}

/* ──── DOWNLOAD ──── */
.dokuwiki div.wrap_download,
.dokuwiki .wrap_download {
    background-color: rgba(99, 102, 241, 0.08) !important;
    border-left-color: #6366f1 !important;
    color: inherit !important;
}

.dokuwiki div.wrap_download {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3e%3cpolyline points='7 10 12 15 17 10'/%3e%3cline x1='12' y1='15' x2='12' y2='3'/%3e%3c/svg%3e") !important;
}

/* ──── Reset color: inherit on child elements for safety types ──── */
.dokuwiki div.wrap_danger *,
.dokuwiki div.wrap_warning *,
.dokuwiki div.wrap_caution *,
.dokuwiki div.wrap_notice *,
.dokuwiki div.wrap_safety * {
    color: inherit !important;
}

/* ──── DARK MODE tweaks: slightly stronger tinted backgrounds ──── */
:root[data-theme="theme-dark"] .dokuwiki div.wrap_info,
:root[data-theme="theme-dark"] .dokuwiki .wrap_info {
    background-color: rgba(56, 132, 244, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_tip,
:root[data-theme="theme-dark"] .dokuwiki .wrap_tip {
    background-color: rgba(16, 185, 129, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_important,
:root[data-theme="theme-dark"] .dokuwiki .wrap_important {
    background-color: rgba(168, 85, 247, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_alert,
:root[data-theme="theme-dark"] .dokuwiki .wrap_alert {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_warning,
:root[data-theme="theme-dark"] .dokuwiki .wrap_warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_caution,
:root[data-theme="theme-dark"] .dokuwiki .wrap_caution {
    background-color: rgba(234, 179, 8, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_notice,
:root[data-theme="theme-dark"] .dokuwiki .wrap_notice {
    background-color: rgba(56, 132, 244, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_danger,
:root[data-theme="theme-dark"] .dokuwiki .wrap_danger {
    background-color: rgba(220, 38, 38, 0.14) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_safety,
:root[data-theme="theme-dark"] .dokuwiki .wrap_safety {
    background-color: rgba(34, 197, 94, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_help,
:root[data-theme="theme-dark"] .dokuwiki .wrap_help {
    background-color: rgba(168, 85, 247, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_todo,
:root[data-theme="theme-dark"] .dokuwiki .wrap_todo {
    background-color: rgba(20, 184, 166, 0.12) !important;
}

:root[data-theme="theme-dark"] .dokuwiki div.wrap_download,
:root[data-theme="theme-dark"] .dokuwiki .wrap_download {
    background-color: rgba(99, 102, 241, 0.12) !important;
}

/* ==================================================================
   PLUGIN: Indexmenu — Font size & style harmonization
   The indexmenu plugin hardcodes font-size:11px and font-family:Verdana
   in its .dtree class. This overrides both to inherit from the sidebar.
   ================================================================== */

/* Inherit font sizing from sidebar instead of hardcoded 11px */
.dtree {
    font-size: inherit !important;
    font-family: inherit !important;
}

/* Tree node links — consistent with sidebar link styling */
.dokuwiki .dtree a,
.dokuwiki .aside .dtree a {
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Hover state — subtle highlight */
.dokuwiki .dtree a.nodeFdUrl:hover,
.dokuwiki .dtree a.nodeSel:hover,
.dokuwiki .dtree a.navSel:hover,
.dokuwiki .dtree a.nodeUrl:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

/* Current page — gentle accent */
.dokuwiki .dtree a.navSel {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-radius: 0.25rem;
}

/* Dark mode hover */
:root[data-theme="theme-dark"] .dokuwiki .dtree a.nodeFdUrl:hover,
:root[data-theme="theme-dark"] .dokuwiki .dtree a.nodeSel:hover,
:root[data-theme="theme-dark"] .dokuwiki .dtree a.navSel:hover,
:root[data-theme="theme-dark"] .dokuwiki .dtree a.nodeUrl:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="theme-dark"] .dokuwiki .dtree a.navSel {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- Scroll arrows: hide completely --- */
body .indexmenu_rarrow,
body .indexmenu_larrow {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    background: none !important;
    border: none !important;
    visibility: hidden !important;
}

/* --- ToC bullet --- */
body .indexmenu_tocbullet.modern {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

body .indexmenu_tocbullet.modern:hover {
    opacity: 1;
}

/* ==================================================================
   Indexmenu tree — DARK MODE node colors
   ================================================================== */
:root[data-theme="theme-dark"] .dtree.modern a.node,
:root[data-theme="theme-dark"] .dtree.modern a.nodeFdUrl {
    color: #cbd5e1;
}

:root[data-theme="theme-dark"] .dtree.modern a.nodeUrl {
    color: #93c5fd;
}

:root[data-theme="theme-dark"] .dtree.modern a.nodeSel {
    color: #bfdbfe;
}

:root[data-theme="theme-dark"] .dtree.modern .dTreeNode:has(a.nodeSel) {
    background-color: rgba(59, 130, 246, 0.08);
}

:root[data-theme="theme-dark"] .dtree.modern a.navSel {
    color: #60a5fa;
}

:root[data-theme="theme-dark"] .dtree.modern .dTreeNode:has(a.navSel) {
    background-color: rgba(59, 130, 246, 0.12);
}

:root[data-theme="theme-dark"] .dtree.modern .dTreeNode:hover {
    background-color: rgba(148, 163, 184, 0.1);
}

:root[data-theme="theme-dark"] .dtree.modern .dTreeNode:hover a {
    color: #e2e8f0;
}

:root[data-theme="theme-dark"] .dtree.modern a.navSel::before,
:root[data-theme="theme-dark"] .dtree.modern a.nodeSel::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3c/svg%3e");
}

/* ==================================================================
   Indexmenu tree — LIGHT MODE node colors
   ================================================================== */
:root[data-theme="theme-light"] .dtree.modern a.node,
:root[data-theme="theme-light"] .dtree.modern a.nodeFdUrl {
    color: #374151;
}

:root[data-theme="theme-light"] .dtree.modern a.nodeUrl {
    color: #2563eb;
}

:root[data-theme="theme-light"] .dtree.modern a.nodeSel {
    color: #1d4ed8;
}

:root[data-theme="theme-light"] .dtree.modern .dTreeNode:has(a.nodeSel) {
    background-color: rgba(37, 99, 235, 0.06);
}

:root[data-theme="theme-light"] .dtree.modern a.navSel {
    color: #1d4ed8;
}

:root[data-theme="theme-light"] .dtree.modern .dTreeNode:has(a.navSel) {
    background-color: rgba(37, 99, 235, 0.08);
}

:root[data-theme="theme-light"] .dtree.modern .dTreeNode:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

:root[data-theme="theme-light"] .dtree.modern .dTreeNode:hover a {
    color: #111827;
}

:root[data-theme="theme-light"] .dtree.modern .dTreeNode>a:has(> img)::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'/%3e%3c/svg%3e");
}

:root[data-theme="theme-light"] .dtree.modern a.node::before,
:root[data-theme="theme-light"] .dtree.modern a.nodeFdUrl::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3e%3c/svg%3e");
}

:root[data-theme="theme-light"] .dtree.modern a.nodeUrl::before,
:root[data-theme="theme-light"] .dtree.modern a.nodeSel::before,
:root[data-theme="theme-light"] .dtree.modern a.navSel::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3e%3cpolyline points='14 2 14 8 20 8'/%3e%3c/svg%3e");
}

/* --- Context menu — Premium modern redesign --- */
/* Inspired by macOS / VS Code context menus                     */
/* Fixes z-index conflict: sidebar=1001, menu needs 2000+        */

/* ── Base container ── */
/* body prefix increases specificity to beat plugin CSS (loaded after theme) */
body .indexmenu_rmenu,
body .indexmenu_rmenu li ul {
    z-index: 2000 !important;
    position: absolute;
    border-radius: 0.625rem;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.12);
    overflow: visible;
    padding: 0.3rem 0;
    min-width: 180px;
    width: auto !important;
    font-size: 0.82rem;
    line-height: 1.4;
    font-family: inherit;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    animation: indexmenu-fade-in 0.12s ease-out;
}

@keyframes indexmenu-fade-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── Header (node name) ── */
.indexmenu_rmenuhead {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.45rem 0.85rem 0.35rem;
    margin: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

/* ── List reset ── */
.indexmenu_rmenu ul {
    margin: 0;
    padding: 0.2rem 0;
    list-style: none !important;
}

.indexmenu_rmenu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
    list-style-image: none !important;
    text-align: left !important;
    position: relative;
}

/* ── Menu items (links + submenu triggers) ── */
.indexmenu_rmenu li a,
.indexmenu_rmenu li span.indexmenu_submenu {
    display: flex !important;
    align-items: center;
    padding: 0.4rem 0.85rem;
    margin: 0.1rem 0.35rem;
    border-radius: 0.375rem;
    font-size: 0.82rem;
    line-height: 1.4;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* ── Hover state ── */
.indexmenu_rmenu a:hover,
.indexmenu_rmenu .indexmenu_submenu:hover {
    display: flex !important;
}

/* ── Submenu indicator arrow (-->) ── */
.indexmenu_rmenu li span.indexmenu_submenu::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: auto;
    padding-left: 0.75rem;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.5;
}

/* ── Submenu flyout ── */
.indexmenu_rmenu li ul {
    display: none;
    left: calc(100% - 4px) !important;
    top: -0.3rem !important;
    font-size: 100% !important;
    animation: indexmenu-fade-in 0.1s ease-out;
}

.indexmenu_rmenu li:hover>ul {
    display: block;
}

/* ── Section title (.indexmenu_titlemenu) ── */
.indexmenu_titlemenu {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0.5rem 0.85rem 0.25rem !important;
    margin-top: 0.15rem !important;
    border-top: 1px solid rgba(128, 128, 128, 0.12) !important;
    border-bottom: none !important;
    opacity: 0.55;
    pointer-events: none;
    display: block;
}

/* ============================
   DARK MODE
   ============================ */
:root[data-theme="theme-dark"] .indexmenu_rmenu,
:root[data-theme="theme-dark"] .indexmenu_rmenu li ul {
    background-color: rgba(22, 30, 46, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="theme-dark"] .indexmenu_rmenuhead {
    background-color: transparent !important;
    color: #94a3b8;
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

:root[data-theme="theme-dark"] .indexmenu_rmenu li {
    color: #cbd5e1 !important;
}

:root[data-theme="theme-dark"] .indexmenu_rmenu li a {
    color: #cbd5e1 !important;
}

:root[data-theme="theme-dark"] .indexmenu_rmenu li a:hover,
:root[data-theme="theme-dark"] .indexmenu_rmenu .indexmenu_submenu:hover {
    background-color: rgba(96, 165, 250, 0.15) !important;
    color: #e2e8f0 !important;
}

:root[data-theme="theme-dark"] .indexmenu_rmenu li a:active {
    background-color: rgba(96, 165, 250, 0.25) !important;
}

:root[data-theme="theme-dark"] .indexmenu_titlemenu {
    color: #64748b !important;
    background-color: transparent !important;
    border-top-color: rgba(148, 163, 184, 0.1) !important;
}

/* ============================
   LIGHT MODE
   ============================ */
:root[data-theme="theme-light"] .indexmenu_rmenu,
:root[data-theme="theme-light"] .indexmenu_rmenu li ul {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="theme-light"] .indexmenu_rmenuhead {
    background-color: transparent !important;
    color: #64748b;
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="theme-light"] .indexmenu_rmenu li {
    color: #1e293b !important;
}

:root[data-theme="theme-light"] .indexmenu_rmenu li a {
    color: #334155 !important;
}

:root[data-theme="theme-light"] .indexmenu_rmenu li a:hover,
:root[data-theme="theme-light"] .indexmenu_rmenu .indexmenu_submenu:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #1e40af !important;
}

:root[data-theme="theme-light"] .indexmenu_rmenu li a:active {
    background-color: rgba(59, 130, 246, 0.18) !important;
}

:root[data-theme="theme-light"] .indexmenu_titlemenu {
    color: #94a3b8 !important;
    background-color: transparent !important;
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

/* ==================================================================
   PLUGIN: Indexmenu — TOC Preview popup
   Triggered via right-click → "Toc preview" on tree nodes.
   The popup is appended to <body> with class .indexmenu_toc
   ================================================================== */

/* ── Base container ── */
/* body prefix increases specificity to beat plugin CSS (loaded after theme) */
body .indexmenu_toc {
    border-radius: 0.625rem !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    z-index: 2100 !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    animation: indexmenu-fade-in 0.12s ease-out;
}

/* ── Header ("Table of contents" / page title) ── */
.indexmenu_toc .tocheader {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.85rem !important;
    margin: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.indexmenu_toc .tocheader a {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
}

/* ── Content area ── */
.indexmenu_toc .indexmenu_toc_inside {
    padding: 0.5rem 0.75rem 0.65rem !important;
    max-height: 350px;
    overflow-y: auto;
}

.indexmenu_toc .indexmenu_toc_inside a {
    display: block;
    padding: 0.2rem 0.5rem;
    margin: 0.05rem 0;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background-color 0.1s ease, color 0.1s ease;
    font-size: 0.82rem;
}

/* ── Close button ── */
.indexmenu_toc>a:first-child {
    display: flex;
    justify-content: flex-end;
    padding: 0.35rem 0.5rem 0;
}

/* ── TOC list reset ── */
.indexmenu_toc ul.toc {
    border: 0 none !important;
    margin: 0;
    padding: 0 0 0 0.5rem;
    list-style: none;
}

.indexmenu_toc ul.toc li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================
   TOC Preview — DARK MODE
   ============================ */
:root[data-theme="theme-dark"] .indexmenu_toc {
    background-color: rgba(22, 30, 46, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1;
}

:root[data-theme="theme-dark"] .indexmenu_toc .tocheader {
    background-color: transparent !important;
    color: #94a3b8 !important;
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

:root[data-theme="theme-dark"] .indexmenu_toc .tocheader a {
    color: #93c5fd !important;
}

:root[data-theme="theme-dark"] .indexmenu_toc .tocheader a:hover {
    color: #bfdbfe !important;
}

:root[data-theme="theme-dark"] .indexmenu_toc .indexmenu_toc_inside {
    background-color: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
}

:root[data-theme="theme-dark"] .indexmenu_toc .indexmenu_toc_inside a {
    color: #93c5fd !important;
}

:root[data-theme="theme-dark"] .indexmenu_toc .indexmenu_toc_inside a:hover {
    background-color: rgba(96, 165, 250, 0.15) !important;
    color: #bfdbfe !important;
}

:root[data-theme="theme-dark"] .indexmenu_toc .indexmenu_toc_inside p {
    color: #cbd5e1;
}

:root[data-theme="theme-dark"] .indexmenu_toc .indexmenu_close {
    filter: invert(0.7) brightness(1.5);
}

/* ============================
   TOC Preview — LIGHT MODE
   ============================ */
:root[data-theme="theme-light"] .indexmenu_toc {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
    color: #1e293b;
}

:root[data-theme="theme-light"] .indexmenu_toc .tocheader {
    background-color: transparent !important;
    color: #64748b !important;
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="theme-light"] .indexmenu_toc .tocheader a {
    color: #1e40af !important;
}

:root[data-theme="theme-light"] .indexmenu_toc .tocheader a:hover {
    color: #1d4ed8 !important;
}

:root[data-theme="theme-light"] .indexmenu_toc .indexmenu_toc_inside {
    background-color: transparent !important;
    border: none !important;
    color: #334155 !important;
}

:root[data-theme="theme-light"] .indexmenu_toc .indexmenu_toc_inside a {
    color: #2563eb !important;
}

:root[data-theme="theme-light"] .indexmenu_toc .indexmenu_toc_inside a:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #1e40af !important;
}

:root[data-theme="theme-light"] .indexmenu_toc .indexmenu_toc_inside p {
    color: #334155;
}

/* ==================================================================
   MOBILE RESPONSIVE — Tablet (≤1024px)
   Intermediate adjustments for medium screens
   ================================================================== */
@media (max-width: 1024px) {

    /* Navbar search — reduce min-widths for medium screens */
    .mikio-navbar .mikio-search div.no,
    .mikio-navbar form.mikio-search div.no {
        min-width: 10rem;
    }

    .mikio-navbar .mikio-search #qsearchns__ns,
    .mikio-navbar form.mikio-search #qsearchns__ns {
        min-width: 5.5rem;
        padding: 6px 1.4rem 6px 8px;
        font-size: 0.9rem;
    }

    /* Tables — enable horizontal scroll on overflow */
    .mikio .mikio-content .mikio-article .table-responsive-wrapper,
    .mikio .mikio-content .mikio-article div.table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mikio .mikio-content table {
        min-width: 500px;
    }
}

/* ==================================================================
   MOBILE RESPONSIVE — Phone (≤768px)
   Full mobile-optimized layout
   Matches the base mikio.less breakpoint for consistency
   ================================================================== */
@media (max-width: 768px) {

    /* ───── 1. Typography — Smaller headings ───── */
    .mikio .mikio-content h1,
    .mikio .mikio-content .section_highlight_wrapper h1 {
        font-size: 1.5rem;
        margin-top: 1.25rem;
        margin-bottom: 0.75rem;
        letter-spacing: -0.02em;
    }

    .mikio .mikio-content h2,
    .mikio .mikio-content .section_highlight_wrapper h2 {
        font-size: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
        padding-left: 0.6rem;
    }

    .mikio .mikio-content h3,
    .mikio .mikio-content .section_highlight_wrapper h3 {
        font-size: 1.1rem;
        margin-top: 1rem;
        margin-bottom: 0.4rem;
        padding-left: 0.6rem;
    }

    .mikio .mikio-content h4,
    .mikio .mikio-content h5,
    .mikio .mikio-content h6 {
        font-size: 0.95rem;
    }

    /* ───── 2. Navbar — Search adaption ───── */

    /* Stack the search form vertically when in mobile navbar collapse */
    .mikio-navbar .mikio-search form,
    .mikio-navbar form.mikio-search {
        flex-wrap: wrap;
    }

    /* Namespace dropdown — full width row */
    .mikio-navbar .mikio-search label[for="qsearchns__ns"],
    .mikio-navbar form.mikio-search label[for="qsearchns__ns"] {
        width: 100%;
        order: -1;
    }

    .mikio-navbar .mikio-search #qsearchns__ns,
    .mikio-navbar form.mikio-search #qsearchns__ns {
        width: 100%;
        border-radius: 0.5rem !important;
        border-right: 0.8px solid #999;
        min-width: unset;
        margin-bottom: 0.35rem;
    }

    /* Search input row — full width below dropdown */
    .mikio-navbar .mikio-search div.no,
    .mikio-navbar form.mikio-search div.no {
        width: 100%;
        min-width: unset;
    }

    .mikio-navbar .mikio-search div.no input,
    .mikio-navbar form.mikio-search div.no input {
        border-radius: 0.5rem 0 0 0.5rem !important;
        border-left: 0.8px solid #999;
        min-width: unset;
    }

    /* ───── 3. Sidebar — Touch-friendly links ───── */
    .mikio .mikio-sidebar .mikio-sidebar-content a {
        padding: 0.45rem 0.6rem;
        margin: 0.15rem 0;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    /* Sidebar sidebar-content general spacing */
    .mikio .mikio-sidebar .mikio-sidebar-content {
        padding: 0.5rem;
    }

    /* Indexmenu tree — Condensed for mobile */
    .mikio-sidebar .mikio-sidebar-content .dtree {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .mikio-sidebar .mikio-sidebar-content .dtree .dTreeNode {
        margin: 0.1rem 0;
        padding: 0.05rem 0;
    }

    .mikio-sidebar .mikio-sidebar-content .dtree .dTreeNode a {
        min-height: 2rem;
        display: inline-flex;
        align-items: center;
        padding: 0.15rem 0.25rem;
        border-radius: 0.2rem;
    }

    /* Tighter indentation for nested levels */
    .mikio-sidebar .mikio-sidebar-content .dtree ul {
        padding-left: 0.6rem;
    }

    /* Smaller tree icons (expand/collapse + node icons) */
    .mikio-sidebar .mikio-sidebar-content .dtree .dTreeNode img {
        width: 14px;
        height: 14px;
        margin-right: 0.1rem;
    }

    /* ::before pseudo-icons (modern subtheme SVG icons) — smaller */
    .mikio-sidebar .mikio-sidebar-content .dtree .dTreeNode a::before {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px;
        margin-right: 0.2rem;
    }

    /* TOC bullet — smaller and tighter */
    .mikio-sidebar .mikio-sidebar-content .dtree .indexmenu_tocbullet {
        margin-top: 1px;
        margin-left: 1px;
        width: 10px;
        height: 10px;
    }

    /* ───── 4. Tables — Horizontal scroll ───── */
    .mikio .mikio-content .mikio-article {
        overflow-x: hidden;
    }

    .mikio .mikio-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .mikio .mikio-content table thead,
    .mikio .mikio-content table tbody {
        display: table;
        width: 100%;
    }

    /* Table header — reduce text size on mobile */
    .mikio .mode_show table thead tr {
        font-size: 0.7rem;
    }

    .mikio .mode_show table td,
    .mikio .mode_show table th {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    /* ───── 5. TOC — Compact on mobile ───── */
    .mikio .mikio-toc #dw__toc {
        border-radius: 0.375rem;
        margin-bottom: 1rem;
    }

    .mikio .mikio-toc a {
        padding: 0.3rem 0.35rem;
        font-size: 0.8rem;
    }

    /* ───── 6. WRAP Callouts — Tighter padding ───── */
    .dokuwiki div.wrap_info,
    .dokuwiki div.wrap_important,
    .dokuwiki div.wrap_alert,
    .dokuwiki div.wrap_tip,
    .dokuwiki div.wrap_help,
    .dokuwiki div.wrap_todo,
    .dokuwiki div.wrap_download,
    .dokuwiki div.wrap_danger,
    .dokuwiki div.wrap_warning,
    .dokuwiki div.wrap_caution,
    .dokuwiki div.wrap_notice,
    .dokuwiki div.wrap_safety {
        padding: 0.6rem 0.75rem 0.6rem 2.25rem !important;
        font-size: 0.85rem;
        margin-bottom: 1rem;
        background-position: 0.55rem 0.7rem !important;
        background-size: 14px 14px !important;
    }

    /* ───── 7. Code blocks — Horizontal scroll + smaller font ───── */
    .mikio .mikio-content pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.8rem;
        padding: 0.75rem;
        max-width: 100%;
        word-wrap: normal;
        white-space: pre;
    }

    .mikio .mikio-content code {
        font-size: 0.8em;
        word-break: break-word;
    }

    /* Inline code — allow wrapping */
    .mikio .mikio-content p code,
    .mikio .mikio-content li code,
    .mikio .mikio-content td code {
        word-break: break-all;
    }

    /* ───── 8. Indexmenu context menu — Constrain on mobile ───── */
    body .indexmenu_rmenu,
    body .indexmenu_rmenu li ul {
        max-width: calc(100vw - 2rem);
        font-size: 0.78rem;
    }

    /* Prevent submenu flyout from going off-screen */
    body .indexmenu_rmenu li ul {
        left: auto !important;
        right: 0 !important;
        max-width: calc(100vw - 3rem);
    }

    /* Context menu items — slightly more compact */
    .indexmenu_rmenu li a,
    .indexmenu_rmenu li span.indexmenu_submenu {
        padding: 0.5rem 0.75rem;
        font-size: 0.82rem;
        min-height: 2.5rem;
        display: flex !important;
        align-items: center;
    }

    /* TOC preview popup — constrain width */
    body .indexmenu_toc {
        max-width: calc(100vw - 2rem);
        font-size: 0.8rem;
    }

    /* ───── 9. Quick search popup — Full width on mobile ───── */
    #qsearch__out {
        min-width: unset;
        width: calc(100vw - 2rem);
        max-width: 100%;
        left: 0 !important;
        right: 0 !important;
    }

    #qsearch__out a {
        padding: 0.6rem 0.75rem;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
    }

    /* ───── 10. Footer — Centered stacking ───── */
    .mikio-footer .mikio-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }

    .mikio-footer .mikio-container>* {
        width: 100%;
        text-align: center;
    }

    /* ───── 11. Content area — Maximize usable width ───── */
    .mikio .mikio-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .mikio .mikio-page .mikio-container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Article — prevent overflow */
    .mikio .mikio-article {
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Images — prevent overflow */
    .mikio .mikio-content img {
        max-width: 100%;
        height: auto;
    }

    /* ───── 12. Breadcrumbs — Compact on mobile ───── */
    .mikio .mikio-breadcrumbs,
    .mikio .mikio-youarehere {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
    }

    .mikio .mikio-breadcrumbs a,
    .mikio .mikio-youarehere a {
        padding: 0.15rem 0;
    }

    /* ───── 13. Hero — Tighter spacing ───── */
    .mikio-hero .mikio-hero-text {
        padding: 1rem 0.75rem;
    }

    .mikio-hero .mikio-hero-title {
        font-size: 1.5rem;
    }

    .mikio-hero .mikio-hero-subtitle {
        font-size: 0.85rem;
    }

    /* ───── 14. Buttons — Ensure tap-friendly size ───── */
    .mikio .mikio-control,
    .mikio .mikio-button,
    .mikio button {
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
    }

    /* Section edit buttons — smaller on mobile */
    .mikio .secedit .mikio-button {
        min-height: 2rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* ───── 15. Description Lists — Compact ───── */
    .mikio .mikio-content dl {
        margin-left: 0;
    }

    .mikio .mikio-content dt {
        font-size: 0.9rem;
    }

    .mikio .mikio-content dd {
        margin-left: 1rem;
        font-size: 0.85rem;
    }

    /* ───── 16. Admin pages — Prevent overflow ───── */
    .mikio #config__manager td .input,
    .mikio #config__manager td input.edit {
        max-width: 100%;
    }

    /* ───── 17. Search results page — Compact ───── */
    .mikio .mode_search .mikio-article .search-results-form fieldset.search-form {
        grid-template-columns: 1fr;
    }

    .mikio .mode_search .mikio-article .search-results-form fieldset.search-form input[name=q] {
        grid-column: 1 / span 1;
    }

    .mikio .mode_search .mikio-article .search-results-form fieldset.search-form button[type=submit],
    .mikio .mode_search .mikio-article .search-results-form fieldset.search-form .toggleAssistant {
        grid-column: 1 / span 1;
    }

    /* ───── 18. Navbar brand — Allow text wrapping ───── */
    .mikio-navbar .mikio-navbar-brand-title-text {
        font-size: 1rem;
        white-space: normal;
        line-height: 1.3;
    }

    .mikio-navbar .mikio-navbar-brand-tagline {
        font-size: 0.75rem;
    }

    /* ───── 19. Footnote popups — Constrain ───── */
    .mikio div.insitu-footnote {
        max-width: calc(100vw - 2rem);
        font-size: 0.78rem;
    }

    /* ───── 20. Page tools — Slightly smaller icons ───── */
    #dw__pagetools a {
        padding: 0.35rem;
    }

    #dw__pagetools a svg {
        width: 18px;
        height: 18px;
    }
}