/* ==========================================
   1. MAIN INFOBOX CONTAINER
   ========================================== */
.wiki-infobox {
    float: right !important;
    clear: right !important;
    display: table !important;
    margin: 0 0 1em 2.5em !important;
    width: 33% !important;
    max-width: 33% !important;

    /* Layering: Above page background lines (0/1), below top navigation bar (4+) */
    position: relative !important;
    z-index: 2 !important;

    background-color: #f9f9f9 !important;
    border: 1px solid #a2a9b1 !important;
    color: #2b2b2b !important;
    
    padding: 0.2em !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    border-collapse: collapse !important;
}

/* ==========================================
   2. TABLE HEADERS & DATA CELLS
   ========================================== */
.wiki-infobox tr,
.wiki-infobox th,
.wiki-infobox td {
    border: none !important; /* Removes internal cell dividing lines */
}

/* Base styling for side-label header cells and data cells */
.wiki-infobox th,
.wiki-infobox td {
    text-align: left !important;
    padding: 3px 5px !important;
    vertical-align: top !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: inherit !important;
}

/* Strips Vuetify's default grey background off standard <th> side-labels */
.wiki-infobox th:not(.infobox-title),
.wiki-infobox td {
    background-color: transparent !important;
}

/* Main Title Header (Row 1 - colspan="2") */
.wiki-infobox .infobox-title {
    font-size: 12px !important;
    font-weight: bold !important;
    text-align: center !important;
    background-color: #d8e2dc !important;
    color: #2b2b2b !important;
    padding: 4px 5px !important;
    line-height: 1.3 !important;
}

/* Image Container (Row 2 - colspan="2") */
.wiki-infobox .infobox-image {
    text-align: center !important;
    padding: 6px 4px !important;
    background-color: transparent !important;
}

/* Alternating Zebra Striping (Ignores Title and Image rows) */
.wiki-infobox tr:nth-child(even):not(:has(.infobox-title)):not(:has(.infobox-image)) {
    background-color: #f0f4f1 !important;
}

/* ==========================================
   3. AUTOMATIC IMAGE STYLING
   ========================================== */
.wiki-infobox img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ==========================================
   4. MOBILE & SMALL SCREEN PROTECTION
   ========================================== */
@media screen and (max-width: 768px) {
    .wiki-infobox {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5em 0 !important;
    }
}

/* ==========================================
   5. WIKI.JS / VUETIFY COLLISION & WRAPPING FIXES
   ========================================== */

/* Prevents paragraphs and text containers from blocking side-wrapping */
.contents p, 
.contents div, 
.markdown-content p,
.markdown-content div {
    overflow: visible !important;
}

/* Removes float clears from article headings and clips decorative background lines */
.contents h1, .contents h2, .contents h3, 
.contents h4, .contents h5, .contents h6,
.markdown-content h1, .markdown-content h2, .markdown-content h3, 
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
    clear: none !important;
    overflow: hidden !important;
}

/* Clips standalone <hr> dividers so they stop cleanly at the table edge */
.contents hr,
.markdown-content hr {
    overflow: hidden !important;
    display: flow-root !important;
}

/* ==========================================
   6. FOOLPROOF DARK MODE COMPATIBILITY
   ========================================== */

/* High-Specificity Application Theme Targets */
#root .v-application.theme--dark .wiki-infobox,
.theme--dark .wiki-infobox,
[data-theme="dark"] .wiki-infobox {
    background-color: #1e252b !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

#root .v-application.theme--dark .wiki-infobox .infobox-title,
.theme--dark .wiki-infobox .infobox-title,
[data-theme="dark"] .wiki-infobox .infobox-title {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

#root .v-application.theme--dark .wiki-infobox tr:nth-child(even):not(:has(.infobox-title)):not(:has(.infobox-image)),
.theme--dark .wiki-infobox tr:nth-child(even):not(:has(.infobox-title)):not(:has(.infobox-image)),
[data-theme="dark"] .wiki-infobox tr:nth-child(even):not(:has(.infobox-title)):not(:has(.infobox-image)) {
    background-color: #252d38 !important;
}

/* Native OS / Browser Dark Mode Fallback */
@media (prefers-color-scheme: dark) {
    .wiki-infobox {
        background-color: #1e252b !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
    
    .wiki-infobox .infobox-title {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }

    .wiki-infobox tr:nth-child(even):not(:has(.infobox-title)):not(:has(.infobox-image)) {
        background-color: #252d38 !important;
    }
}