BorderConnect Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(155 intermediate revisions by the same user not shown)
Line 34: Line 34:
     color: white;
     color: white;
     padding: 60px 30px;
     padding: 60px 30px;
    text-align: center;
     border-radius: var(--bc-radius);
     border-radius: var(--bc-radius);
     margin-bottom: 40px;
     margin-bottom: 40px;
Line 41: Line 40:
     box-shadow: 0 10px 25px rgba(38, 96, 101, 0.25);  
     box-shadow: 0 10px 25px rgba(38, 96, 101, 0.25);  
     border-bottom: 6px solid rgba(0,0,0,0.15);
     border-bottom: 6px solid rgba(0,0,0,0.15);
    /* NEW: Centering Logic */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
}
}


Line 50: Line 56:
     border: none;
     border: none;
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%; /* Ensures text has room to center */
}
}


Line 57: Line 64:
     margin-bottom: 30px;
     margin-bottom: 30px;
     font-weight: 400;
     font-weight: 400;
    width: 100%;    /* Keeps paragraphs centered */
    max-width: 800px; /* Prevents text from stretching too wide on huge screens */
}
}


Line 125: Line 134:
     max-width: 650px;
     max-width: 650px;
     margin: 0 auto 10px auto;
     margin: 0 auto 10px auto;
     display: flex;       /* Aligns input and button side-by-side */
     display: flex;       /* Aligns input and button side-by-side */
     gap: 10px;         /* Space between input and button */
     gap: 10px;           /* Space between input and button */
     justify-content: center;
     justify-content: center;
     align-items: center; /* Ensures vertical alignment */
     align-items: center; /* Ensures vertical alignment */
Line 151: Line 160:
     color: white !important;
     color: white !important;
     border: none !important;
     border: none !important;
     border-radius: 50px !important;       /* Matches the round input */
     border-radius: 50px !important;       /* Matches the round input */
     padding: 0 30px !important;           /* Wider click area */
     padding: 0 30px !important;           /* Wider click area */
     font-weight: 700 !important;
     font-weight: 700 !important;
     font-size: 1rem !important;
     font-size: 1rem !important;
Line 181: Line 190:
}
}


/* --- 2-COLUMN LAYOUT --- */
.bc-2col {
.bc-2col {
     display: grid;
     display: flex;
     grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
     flex-wrap: wrap;
     gap: 30px;
     gap: 30px;
     margin-bottom: 30px;
     margin-bottom: 30px;
   
    /* NEW: This stops the cards from stretching to match height */
    align-items: flex-start;
}
/* Columns share space equally */
.bc-2col > .bc-card {
    flex: 1;
    min-width: 300px;
}
/* Mobile: Stack them properly on phones */
@media (max-width: 768px) {
    .bc-2col {
        grid-template-columns: 1fr !important;
    }
}
}


Line 198: Line 224:
     box-sizing: border-box;
     box-sizing: border-box;
     box-shadow: var(--bc-shadow);
     box-shadow: var(--bc-shadow);
    /* No transition needed since we removed the hover effect */
}
}
/* REMOVED: .bc-card:hover block so main cards stay static */


.bc-card h2 {
.bc-card h2 {
Line 227: Line 250:


.bc-btn {
.bc-btn {
     display: block;
     display: flex !important;
     /* Light Teal Background (Tint of #266065) */
     align-items: center !important;
    background: #eef6f7;  
     gap: 15px;                  
     padding: 14px 18px;
     text-align: left;
     border-radius: 6px;
     padding: 12px 20px !important;
     text-decoration: none;
     background-color: #fdfdfd;    
      
     border: 1px solid #e1e8eb;       
    /* Dark Teal Text for Contrast */
     border-radius: 6px;            
    color: #1b4d52;
     margin-bottom: 10px;           
    font-weight: 600;
    transition: all 0.2s ease;    
   
    transition: all 0.2s ease;
     border: 1px solid #dae8ea;      /* Subtle border matching the tint */
     border-left: 5px solid #266065; /* Strong Brand Accent */
     box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
}


/* Hover Effect: Card darkens slightly and border turns Teal */
.bc-btn:hover {
.bc-btn:hover {
     /* Subtle darken on hover - No jarring color flip */
     background-color: #f4f9fa;     
     background: #e0eeef;  
     border-color: #b0c4c6;         
    transform: translateY(-1px);   
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     text-decoration: none;
     text-decoration: none;
    transform: translateY(-2px);
     color: #0f2e32;  
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
     color: #0f2e32; /* Slightly darker text on hover */
     border-left-color: #163a3d;
     border-left-color: #163a3d;
}
.bc-btn-icon {
    font-size: 28px;       
    color: #266065;
    line-height: 1;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.bc-btn-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
}


.bc-btn strong {
.bc-btn strong {
     display: block;
     display: block;
     color: #266065; /* Brand color for the header text */
     color: #266065;  
     font-size: 0.85rem;
     font-size: 0.85rem;
     margin-bottom: 3px;
     margin-bottom: 3px;
Line 266: Line 300:
.bc-btn span {
.bc-btn span {
     font-size: 1.05rem;
     font-size: 1.05rem;
     color: #2c3e50; /* Dark Slate for the main link text */
     color: #2c3e50;  
}
}


Line 396: Line 430:
   
   
.mw-header {
.mw-header {
     height: 90px;
     height: 110px;
     padding-top: 0 !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     padding-bottom: 0 !important;
Line 431: Line 465:
}
}


/* UPDATED: Force hide empty paragraphs, breaks, and MW empty elements */
/* Force hide empty paragraphs, breaks, and MW empty elements */
.mw-parser-output > p:empty,
.mw-parser-output > p:empty,
.mw-parser-output > p > br:only-child,
.mw-parser-output > p > br:only-child,
Line 440: Line 474:
}
}


/* UPDATED: Changed :first-child to :first-of-type */
/* This forces the Hero to pull to the top even if an invisible <p> is sitting above it */
/* This forces the Hero to pull to the top even if an invisible <p> is sitting above it */
.mw-parser-output > .bc-hero:first-of-type {
.mw-parser-output > .bc-hero:first-of-type {
Line 450: Line 483:
   ============================================================ */
   ============================================================ */


/* 1. Base Infobox Container */
.infobox {
.infobox {
     border: 1px solid #a2a9b1;
     border: 1px solid #a2a9b1;
Line 466: Line 498:
}
}


/* 2. Captions (The Title "BorderConnect Inc.") */
.infobox caption {
.infobox caption {
     font-size: 1.3em;
     font-size: 1.3em;
Line 475: Line 506:
}
}


/* 3. Table Cells */
.infobox th,
.infobox th,
.infobox td {
.infobox td {
Line 490: Line 520:
}
}


/* 4. Headers (Left Column: "Type", "Industry", etc.) */
.infobox th {
.infobox th {
     background-color: #eef6f7; /* Your Light Brand Tint */
     background-color: #eef6f7; /* Your Light Brand Tint */
     color: #1b4d52;           /* Dark Teal Text */
     color: #1b4d52;           /* Dark Teal Text */
     font-weight: bold;
     font-weight: bold;
     width: 35%;               /* Consistent width */
     width: 35%;               /* Consistent width */
     border-radius: 4px 0 0 4px; /* Rounded left corners */
     border-radius: 4px 0 0 4px; /* Rounded left corners */
}
}


/* 5. Images */
.infobox img {
.infobox img {
     max-width: 100%;
     max-width: 100%;
Line 510: Line 538:
/* ============================================================
/* ============================================================
   --- DARK MODE "HARD OVERRIDE" ---  
   --- DARK MODE "HARD OVERRIDE" ---  
  This forces dark colors directly onto the elements.
   ============================================================ */
   ============================================================ */


/* 1. FORCE VARIABLES (Just in case) */
/* 1. FORCE VARIABLES */
html.skin-theme-clientpref-night {
html.skin-theme-clientpref-night {
     --bc-blue: #4db6ac !important;
     --bc-blue: #4db6ac !important;
Line 521: Line 548:
/* 2. MAIN PAGE BACKGROUND */
/* 2. MAIN PAGE BACKGROUND */
html.skin-theme-clientpref-night .bc-wrap {
html.skin-theme-clientpref-night .bc-wrap {
     background-color: #121212 !important; /* Pure Black Background */
     background-color: #121212 !important;  
     color: #e0e0e0 !important;
     color: #e0e0e0 !important;
     border-color: #333 !important;
     border-color: #333 !important;
Line 528: Line 555:
/* 3. CARD BACKGROUNDS */
/* 3. CARD BACKGROUNDS */
html.skin-theme-clientpref-night .bc-card {
html.skin-theme-clientpref-night .bc-card {
     background-color: #1e1e1e !important; /* Dark Gray */
     background-color: #1e1e1e !important;  
     border: 1px solid #333 !important;
     border: 1px solid #333 !important;
     border-top: 5px solid #4db6ac !important; /* Bright Teal Top */
     border-top: 5px solid #4db6ac !important;  
     box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
     box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
     color: #e0e0e0 !important;
     color: #e0e0e0 !important;
Line 537: Line 564:
/* 4. HEADERS INSIDE CARDS */
/* 4. HEADERS INSIDE CARDS */
html.skin-theme-clientpref-night .bc-card h2 {
html.skin-theme-clientpref-night .bc-card h2 {
     color: #4db6ac !important; /* Bright Teal */
     color: #4db6ac !important;  
     border-bottom-color: #444 !important;
     border-bottom-color: #444 !important;
}
}


/* 5. BUTTONS (New User & Common Tasks) */
/* 5. BUTTONS */
html.skin-theme-clientpref-night .bc-btn {
html.skin-theme-clientpref-night .bc-btn {
     background-color: #263238 !important; /* Dark Blue-Gray */
     background-color: #263238 !important;  
     border: 1px solid #37474f !important;
     border: 1px solid #37474f !important;
     color: #e0f2f1 !important; /* Light Text */
     color: #e0f2f1 !important;  
}
}


Line 555: Line 582:


html.skin-theme-clientpref-night .bc-btn strong {
html.skin-theme-clientpref-night .bc-btn strong {
     color: #4db6ac !important; /* Teal Header Text */
     color: #4db6ac !important;  
}
}


html.skin-theme-clientpref-night .bc-btn span {
html.skin-theme-clientpref-night .bc-btn span {
     color: #b0bec5 !important; /* Muted Description Text */
     color: #b0bec5 !important;  
}
}


/* 6. HERO SECTION UPDATES (Darker & Deeper) */
/* 6. HERO SECTION UPDATES */
html.skin-theme-clientpref-night .bc-hero {
html.skin-theme-clientpref-night .bc-hero {
    /* Deep "Midnight" Gradient: Very Dark Slate -> Deep Teal */
     background: linear-gradient(135deg, #0a181a 0%, #163a3d 100%) !important;
     background: linear-gradient(135deg, #0a181a 0%, #163a3d 100%) !important;
   
    /* Strong Black Glow instead of light shadow */
     box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;  
     box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;  
     border-bottom: 6px solid rgba(0,0,0,0.5) !important;
     border-bottom: 6px solid rgba(0,0,0,0.5) !important;
Line 575: Line 599:
html.skin-theme-clientpref-night .bc-hero p {
html.skin-theme-clientpref-night .bc-hero p {
     color: #e0f2f1 !important;
     color: #e0f2f1 !important;
     text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important; /* Stronger text shadow */
     text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;  
}
}


/* Fix the Search Input background */
html.skin-theme-clientpref-night .bc-search-container input.mw-ui-input {
html.skin-theme-clientpref-night .bc-search-container input.mw-ui-input {
     background-color: #2c2c2c !important;
     background-color: #2c2c2c !important;
Line 585: Line 608:
}
}


/* Fix the Pills (Glass effect lighter for dark mode) */
html.skin-theme-clientpref-night .bc-hero-pill {
html.skin-theme-clientpref-night .bc-hero-pill {
     background: rgba(255,255,255,0.1) !important;
     background: rgba(255,255,255,0.1) !important;
Line 594: Line 616:
html.skin-theme-clientpref-night .bc-hero-pill:hover {
html.skin-theme-clientpref-night .bc-hero-pill:hover {
     background: #4db6ac !important;
     background: #4db6ac !important;
     color: #121212 !important; /* Black text on Teal button */
     color: #121212 !important;  
}
}


Line 623: Line 645:


html.skin-theme-clientpref-night .bc-cleanlist a {
html.skin-theme-clientpref-night .bc-cleanlist a {
     color: #80cbc4 !important; /* Lighter Teal for links */
     color: #80cbc4 !important;  
}
}


/* 9. PRO TIPS / DID YOU KNOW (Fixed Yellow -> Dark) */
/* 9. PRO TIPS / DID YOU KNOW */
html.skin-theme-clientpref-night .bc-did-you-know {
html.skin-theme-clientpref-night .bc-did-you-know {
     background-color: #1f1b14 !important; /* Very Dark Brown/Grey */
     background-color: #1f1b14 !important;  
     border-left: 5px solid #ffb300 !important; /* Keep Gold accent */
     border-left: 5px solid #ffb300 !important;  
     border: 1px solid #3e2723 !important;
     border: 1px solid #3e2723 !important;
     color: #cfd8dc !important; /* Light Grey Text */
     color: #cfd8dc !important;  
     box-shadow: none !important;
     box-shadow: none !important;
}
}


html.skin-theme-clientpref-night .bc-did-you-know h3 {
html.skin-theme-clientpref-night .bc-did-you-know h3 {
     color: #ffca28 !important; /* Bright Gold Header */
     color: #ffca28 !important;  
     text-shadow: none !important;
     text-shadow: none !important;
}
}
Line 648: Line 670:


html.skin-theme-clientpref-night .infobox caption {
html.skin-theme-clientpref-night .infobox caption {
     color: #4db6ac !important; /* Bright Teal Title */
     color: #4db6ac !important;  
}
}


html.skin-theme-clientpref-night .infobox th {
html.skin-theme-clientpref-night .infobox th {
     background-color: #263238 !important; /* Dark Slate Header Bg */
     background-color: #263238 !important;  
     color: #80cbc4 !important;           /* Light Teal Header Text */
     color: #80cbc4 !important;            
     border-bottom-color: #444 !important;
     border-bottom-color: #444 !important;
}
}
Line 664: Line 686:
/* ============================================================
/* ============================================================
   --- SEARCH SUGGESTIONS DROPDOWN STYLING ---
   --- SEARCH SUGGESTIONS DROPDOWN STYLING ---
  Styles the "preview box" that appears when typing.
   ============================================================ */
   ============================================================ */


Line 672: Line 693:
     border: 1px solid #dcdcdc !important;
     border: 1px solid #dcdcdc !important;
     box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
     box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
     border-radius: 0 0 20px 20px !important; /* Matches round search bar */
     border-radius: 0 0 20px 20px !important;  
     overflow: hidden !important;
     overflow: hidden !important;
     z-index: 9999 !important; /* Ensure it sits on top of everything */
     z-index: 9999 !important;  
     margin-top: 5px !important; /* Small gap below the bar */
     margin-top: 5px !important;  
   
     min-width: 400px !important;  
    /* REMOVED: left: auto / width: auto so JS can align it correctly */
     min-width: 400px !important; /* Prevents it from being too skinny */
}
}


Line 694: Line 713:
}
}


/* Hover State (When user mouses over a suggestion) */
/* Hover State */
.suggestions-result-current,  
.suggestions-result-current,  
.suggestions-result:hover {
.suggestions-result:hover {
     background-color: #eef6f7 !important; /* Light Teal Tint */
     background-color: #eef6f7 !important;  
     color: #266065 !important;           /* Brand Teal Text */
     color: #266065 !important;            
     font-weight: 600 !important;
     font-weight: 600 !important;
}
}
Line 717: Line 736:
/* 2. DARK MODE OVERRIDES */
/* 2. DARK MODE OVERRIDES */
html.skin-theme-clientpref-night .suggestions {
html.skin-theme-clientpref-night .suggestions {
     background-color: #2c2c2c !important; /* Dark Grey Bg */
     background-color: #2c2c2c !important;  
     border: 1px solid #444 !important;
     border: 1px solid #444 !important;
     box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
     box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
Line 729: Line 748:
html.skin-theme-clientpref-night .suggestions-result-current,
html.skin-theme-clientpref-night .suggestions-result-current,
html.skin-theme-clientpref-night .suggestions-result:hover {
html.skin-theme-clientpref-night .suggestions-result:hover {
     background-color: #266065 !important; /* Brand Teal Highlight */
     background-color: #266065 !important;  
     color: white !important;
     color: white !important;
}
}
Line 736: Line 755:
     background-color: #1e1e1e !important;
     background-color: #1e1e1e !important;
     border-top: 1px solid #333 !important;
     border-top: 1px solid #333 !important;
     color: #4db6ac !important; /* Bright Teal Text */
     color: #4db6ac !important;  
}
}


Line 744: Line 763:


/* 3. HIGHLIGHT MATCHED TEXT */
/* 3. HIGHLIGHT MATCHED TEXT */
/* This targets the bold text that matches what you typed */
.suggestions-result .special-query {
.suggestions-result .special-query {
     font-weight: bold !important;
     font-weight: bold !important;
Line 757: Line 775:
/* ============================================================
/* ============================================================
   --- MOBILE OPTIMIZATIONS (FULL WIDTH & TRANSPARENT BG) ---
   --- MOBILE OPTIMIZATIONS (FULL WIDTH & TRANSPARENT BG) ---
  Fixes layout for phones & tablets (max-width: 768px)
   ============================================================ */
   ============================================================ */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
Line 763: Line 780:
     /* 1. Global Wrapper: Full Bleed + Transparent Background */
     /* 1. Global Wrapper: Full Bleed + Transparent Background */
     .bc-wrap {
     .bc-wrap {
         padding: 0 !important;      
         padding: 0 !important;      
         width: 100% !important;
         width: 100% !important;
         max-width: 100% !important;
         max-width: 100% !important;
Line 770: Line 787:
         margin: 0 !important;
         margin: 0 !important;
         border: none !important;
         border: none !important;
       
        /* REMOVE BACKGROUND & SHADOW ON MOBILE */
         background: transparent !important;  
         background: transparent !important;  
         box-shadow: none !important;
         box-shadow: none !important;
Line 834: Line 849:
         left: 2.5% !important;       
         left: 2.5% !important;       
         right: auto !important;
         right: auto !important;
    }
/* 5.5. Table of Contents - Mobile Fix */
    html body .mw-parser-output #toc,
    html body .vector-toc {
        display: block !important; /* Forces block layout on mobile */
        width: 95% !important;
        margin: 0 auto 0 auto !important;
        padding: 10px !important;
        float: none !important;
    }
    /* Kill ghost spacing/empty paragraphs immediately following the TOC */
    .mw-parser-output > #toc + p,
    .mw-parser-output > .vector-toc + p,
    .mw-parser-output > #toc + br,
    .mw-parser-output > #toc + p.mw-empty-elt,
    .mw-parser-output > #toc + div:empty {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
    }
    /* Force the first element after TOC to snap up */
    #toc + *, .vector-toc + * {
        margin-top: 0 !important;
     }
     }


Line 842: Line 883:
         border-left: none !important;
         border-left: none !important;
         border-right: none !important;
         border-right: none !important;
        /* Add a faint border to separate cards since wrapper bg is gone */
         border-bottom: 1px solid rgba(0,0,0,0.05) !important;  
         border-bottom: 1px solid rgba(0,0,0,0.05) !important;  
         box-shadow: none !important;  
         box-shadow: none !important;  
        margin-top: 0 !important;
         margin-bottom: 0 !important;
         margin-bottom: 0 !important;
     }
     }
      
      
    /* Remove bottom border from the very last card to look clean */
     .bc-card:last-child {
     .bc-card:last-child {
         border-bottom: none !important;
         border-bottom: none !important;
     }
     }


     /* 7. Pills (Tighten spacing) */
     /* 7. Pills */
     .bc-hero-pills {
     .bc-hero-pills {
         gap: 8px !important;
         gap: 8px !important;
Line 878: Line 918:
     .mw-parser-output .thumbinner {
     .mw-parser-output .thumbinner {
         width: 100% !important;
         width: 100% !important;
    }
   
    /* 9. PROMO BOX */
    .bc-promo {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px !important;   
        gap: 12px !important;       
        align-items: center !important;
        margin: 15px 0 !important;   
        border: 1px solid #dae8ea !important;
    }
    .bc-promo-icon {
        margin-right: 0 !important;
        font-size: 32px !important; 
        margin-bottom: 0 !important; 
    }
    .bc-promo-text {
        margin-right: 0 !important;
        margin-bottom: 0 !important; 
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
    }
    .bc-promo-cta {
        width: 100% !important;
        margin-top: 5px !important; 
    }
    .bc-promo-cta a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 10px !important;   
        font-size: 0.9rem !important;
     }
     }
}
}


/* --- REMOVE EXTERNAL LINK ICONS FROM FOOTER --- */
/* --- REMOVE EXTERNAL LINK ICONS FROM FOOTER --- */
.bc-linktile a.external {
.bc-linktile a.external,
    background-image: none !important;
    padding-right: 20px !important; /* Restores balanced padding (matches your padding: 20px) */
}
 
/* Remove external link icon inside the button */
.bc-promo-cta a.external {
.bc-promo-cta a.external {
     background-image: none !important;
     background-image: none !important;
     padding-right: 20px !important; /* Keep padding symmetric */
     padding-right: 20px !important;  
}
}


/* --- NATIVE AD / PROMO BANNER (Stable Container, Active Button) --- */
/* --- NATIVE AD / PROMO BANNER --- */
.bc-promo {
.bc-promo {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
   
    /* 1. Subtle Brand Tint (Fades from Light Teal to White) */
     background: linear-gradient(to right, #f1f8f9, #ffffff);
     background: linear-gradient(to right, #f1f8f9, #ffffff);
   
    /* 2. Soft Teal Border */
     border: 1px solid #dae8ea;  
     border: 1px solid #dae8ea;  
     border-left: 6px solid #266065; /* Thicker Brand Accent */
     border-left: 6px solid #266065;  
     border-radius: 8px;
     border-radius: 8px;
   
     padding: 18px 25px;
     padding: 18px 25px;
     margin: 25px 0;
     margin: 25px 0;
   
    /* 3. Static Colored Shadow (Glows slightly with brand color) */
     box-shadow: 0 4px 12px rgba(38, 96, 101, 0.08);  
     box-shadow: 0 4px 12px rgba(38, 96, 101, 0.08);  
}
}
/* REMOVED: .bc-promo:hover block so the container never moves */


.bc-promo-icon {
.bc-promo-icon {
Line 930: Line 994:
}
}


/* The Button Container - RESET */
.bc-promo-cta {
.bc-promo-cta {
     background: transparent;
     background: transparent;
Line 937: Line 1,000:
}
}


/* THE ACTUAL LINK BUTTON */
.bc-promo-cta a {
.bc-promo-cta a {
     display: inline-block !important;
     display: inline-block !important;
Line 947: Line 1,009:
     font-size: 0.95rem !important;
     font-size: 0.95rem !important;
     text-decoration: none !important;
     text-decoration: none !important;
     transition: all 0.2s ease; /* Smooth animation for the button */
     transition: all 0.2s ease;  
     line-height: 1 !important;
     line-height: 1 !important;
     border: none !important;
     border: none !important;
Line 954: Line 1,016:
}
}


/* Button Hover State - ONLY the button moves now */
.bc-promo-cta a:hover {
.bc-promo-cta a:hover {
     background-color: #163a3d !important; /* Darker Teal */
     background-color: #163a3d !important;  
     transform: translateY(-2px);          /* Lifts up */
     transform: translateY(-2px);           
     box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important; /* Deeper shadow */
     box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;  
     color: white !important;
     color: white !important;
     text-decoration: none !important;
     text-decoration: none !important;
Line 968: Line 1,029:
}
}


/* --- DARK MODE ADJUSTMENTS --- */
html.skin-theme-clientpref-night .bc-promo {
html.skin-theme-clientpref-night .bc-promo {
     background: linear-gradient(to right, #1a2628, #1e1e1e);
     background: linear-gradient(to right, #1a2628, #1e1e1e);
Line 976: Line 1,036:
}
}


/* Removed Dark Mode Container Hover as well */
html.skin-theme-clientpref-night .bc-promo-text { color: #e0e0e0; }
html.skin-theme-clientpref-night .bc-promo-cta a {
    background-color: #4db6ac !important;
    color: #121212 !important;
}
html.skin-theme-clientpref-night .bc-promo-cta a:hover { background-color: #80cbc4 !important; }
 
#siteNotice { margin-bottom: 0 !important; }
#siteNotice p { display: none !important; margin: 0 !important; padding: 0 !important; }
#siteNotice .bc-promo { margin: 0 0 10px 0 !important; }


html.skin-theme-clientpref-night .bc-promo-text {  
#siteNotice .bc-promo-cta a {
     color: #e0e0e0;  
    display: inline-block !important;
    color: white !important;
    background-color: #266065 !important;
    padding: 12px 24px !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
}
 
#siteNotice .bc-promo-cta a:hover {
     background-color: #163a3d !important;
    color: white !important;
}
}


html.skin-theme-clientpref-night .bc-promo-cta a {  
/* --- UNBREAKABLE APP BUTTONS --- */
     background-color: #4db6ac !important;  
.bc-app-link {
     color: #121212 !important;  
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
}
 
.bc-app-link a.external {
    display: inline-block !important;
    background-color: #528b91 !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    background-image: none !important;
    padding-right: 16px !important;
    transition: background-color 0.2s ease;
}
 
.bc-app-link a.external:hover {
    background-color: #3e6b70 !important;
    text-decoration: none !important;
}
 
/* --- PRO TIP CONTAINER (Yellow Style) --- */
.bc-pro-tip {
    background-color: #fffbf2;     
    border-left: 6px solid #f0ad4e;
    padding: 20px;
    margin-top: 25px;
    border-radius: 0 8px 8px 0;   
    color: #2c3e50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 0.95rem;
    line-height: 1.5;
}
 
/* ============================================================
  --- WARNING TEMPLATE (MODERNIZED) ---
  ============================================================ */
 
/* Base Styles (Light Mode) for both Divs and Tables */
.bc-warning,
.bc-warning-table {
    background-color: #fff7ed !important; /* Soft orange/peach background */
    border-left: 5px solid #e67e22 !important; /* Bright orange border */
    width: 100%;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
    margin: 18px 0 !important;
    border-radius: 8px !important; /* Modern rounded corners */
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.08) !important; /* Orange-tinted shadow */
    overflow: hidden; /* Ensures left border curves perfectly */
    border: 1px solid #fadbc1 !important; /* Subtle outer border */
    border-left-width: 5px !important; /* Restores thick accent line */
}
 
.bc-warning-table td {
    padding: 14px 18px !important;
}
 
.bc-warning {
    padding: 14px 18px !important; /* Padding for the div version */
}
 
.bc-warning-table p,
.bc-warning p {
    margin: 0 !important;
    color: #2c3e50 !important; /* Dark text for readability */
    font-size: 0.95rem;
    line-height: 1.6;
}
 
/* --- WARNING TEMPLATE DARK MODE FIX --- */
 
/* Case 1: Wiki manually set to Dark Mode */
html.skin-theme-clientpref-night .bc-warning,
html.skin-theme-clientpref-night .bc-warning-table {
    background-color: #2a1d15 !important;    /* Dark brown/orange Background */
    border-left-color: #d35400 !important;  /* Dark Orange Border */
    border-color: #3e271a !important;        /* Dark outer border */
    border-left-width: 5px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; /* Deeper shadow */
}
 
html.skin-theme-clientpref-night .bc-warning p,
html.skin-theme-clientpref-night .bc-warning-table p {
    color: #e0e0e0 !important;              /* Off-white text */
}
 
/* Case 2: Wiki set to Auto + System is Dark */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .bc-warning,
    html.skin-theme-clientpref-os .bc-warning-table {
        background-color: #2a1d15 !important;
        border-left-color: #d35400 !important;
        border-color: #3e271a !important;
        border-left-width: 5px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }
    html.skin-theme-clientpref-os .bc-warning p,
    html.skin-theme-clientpref-os .bc-warning-table p {
        color: #e0e0e0 !important;
    }
}
 
/* ============================================================
  --- NOTE TEMPLATE (MODERNIZED) ---
  ============================================================ */
 
/* Base Styles (Light Mode) */
.bc-note-table {
    background-color: #f4f7f9 !important; /* Soft match to your page background */
    border-left: 5px solid #78909c !important; /* Slate grey-blue border */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 18px 0 !important;
    border-radius: 8px; /* Modern rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.06); /* Soft shadow to make it pop */
    overflow: hidden; /* Ensures the left border curves perfectly with the corner */
    border: 1px solid #e1e8eb; /* Very subtle border to contain the background */
    border-left-width: 5px; /* Restores the thick accent line */
}
 
.bc-note-table td {
    padding: 14px 18px !important; /* Slightly more breathing room */
}
 
.bc-note-table p {
    margin: 0 !important;
    color: #2c3e50 !important; /* Matches your brand dark text */
    font-size: 0.95rem;
    line-height: 1.6;
}
 
/* --- NOTE TEMPLATE DARK MODE FIX --- */
 
/* Case 1: Wiki manually set to Dark Mode */
html.skin-theme-clientpref-night .bc-note-table {
    background-color: #2a2b2e !important;    /* Dark Charcoal Background */
    border-left-color: #6b7280 !important;  /* Steel Grey Border */
    border-color: #333 !important;          /* Dark outer border */
    border-left-width: 5px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; /* Deeper shadow for dark mode */
}
 
html.skin-theme-clientpref-night .bc-note-table p {
    color: #e0e0e0 !important;              /* Off-white text */
}
 
/* Case 2: Wiki set to Auto + System is Dark */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .bc-note-table {
        background-color: #2a2b2e !important;
        border-left-color: #6b7280 !important;
        border-color: #333 !important;
        border-left-width: 5px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }
    html.skin-theme-clientpref-os .bc-note-table p {
        color: #e0e0e0 !important;
    }
}
 
/* --- TIP TEMPLATE DARK MODE FIX --- */
 
/* Case 1: Wiki manually set to Dark Mode */
html.skin-theme-clientpref-night .bc-tip-table {
    background: #0c2d48 !important;    /* Dark Navy Background */
    color: #e0e0e0 !important;        /* Off-white text */
    border-left-color: #2b7cff !important; /* Keep the Bright Blue Border */
}
 
html.skin-theme-clientpref-night .bc-tip-table p {
    color: #e0e0e0 !important;
}
 
/* Case 2: Wiki set to Auto + System is Dark */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .bc-tip-table {
        background: #0c2d48 !important;
        color: #e0e0e0 !important;
        border-left-color: #2b7cff !important;
    }
    html.skin-theme-clientpref-os .bc-tip-table p {
        color: #e0e0e0 !important;
    }
}
 
/* --- NEW: CROSS-BORDER APP BANNER --- */
 
.bc-app-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #002D40 0%, #004059 100%);
    border-left: 6px solid #005b7f;
    border-radius: 6px;
    padding: 16px 24px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: #ffffff;
    gap: 20px;
}
 
.bc-app-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}
 
.bc-app-icon {
    font-size: 24px;
    line-height: 1;
}
 
.bc-app-text {
    font-size: 15px;
    line-height: 1.4;
    color: #ffffff;
}
 
.bc-app-text strong {
    font-weight: 700;
    color: #ffffff;
}
 
.bc-store-container {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
 
@media (max-width: 768px) {
    .bc-app-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .bc-store-container {
        width: 100%;
        justify-content: flex-start;
        margin-top: 10px;
    }
}
 
.bc-store-wrapper {
    display: inline-block;
    text-decoration: none !important;
}
 
.bc-store-wrapper a.external {
    background-image: none !important;
    padding-right: 0 !important;
    text-decoration: none !important;
    color: white !important;
}
 
.bc-store-btn {
    display: inline-flex !important;
    align-items: center;
    background-color: #0f1f24;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 5px 12px;
    transition: transform 0.2s ease, opacity 0.2s;
    cursor: pointer;
    line-height: 1.2;
}
 
.bc-store-btn:hover {
    transform: translateY(-2px);
    background-color: #000;
    border-color: #fff;
    opacity: 0.9;
}
 
.bc-store-svg {
    width: 18px;
    height: 18px;
    fill: white;
    margin-right: 8px;
}
 
.bc-store-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 8px;
}
 
.bc-store-text span:first-child {
    font-size: 9px;
    opacity: 0.8;
    font-weight: 400;
}
 
.bc-store-text span:last-child {
    font-size: 13px;
    font-weight: 700;
}
 
/* --- DARK MODE: APP BANNER OVERRIDES --- */
html.skin-theme-clientpref-night .bc-app-banner {
    background: linear-gradient(90deg, #002D40 0%, #004059 100%) !important;
    border-left-color: #4db6ac !important;
    border-top: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
 
html.skin-theme-clientpref-night .bc-app-text,
html.skin-theme-clientpref-night .bc-app-text strong {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
 
html.skin-theme-clientpref-night .bc-store-btn {
    background-color: #000000 !important;
    border-color: #266065 !important;
    color: #ffffff !important;
}
 
html.skin-theme-clientpref-night .bc-store-btn:hover {
    background-color: #111 !important;
    border-color: #4db6ac !important;
}
 
/* --- NEW: ARTICLE SPECIFIC STYLES --- */
 
/* 1. Article Hero */
.bc-article-hero {
    background: linear-gradient(to right, #f4f7f9, #eef5f6);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 8px;
}
 
.bc-article-hero h1 {
    margin-top: 0;
    color: #266065;
    font-size: 2.2rem;
    font-weight: 700;
    border: none;
}
 
.bc-article-hero p {
    font-size: 1.15rem;
    color: #546e7a;
    max-width: 800px;
    margin-bottom: 15px;
}
 
.bc-article-meta {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #78909c;
}
 
.bc-article-pill {
    background: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    display: inline-block;
}
 
.bc-article-pill i {
    margin-right: 6px;
    color: #266065;
}
 
/* Dark Mode Fixes for Article Hero */
html.skin-theme-clientpref-night .bc-article-hero {
    background: #1e1e1e !important;
}
html.skin-theme-clientpref-night .bc-article-hero h1 {
    color: #4db6ac !important;
}
html.skin-theme-clientpref-night .bc-article-hero p,
html.skin-theme-clientpref-night .bc-article-meta {
    color: #b0bec5 !important;
}
html.skin-theme-clientpref-night .bc-article-pill {
    background: #263238 !important;
    border-color: #37474f !important;
}
html.skin-theme-clientpref-night .bc-article-pill i {
    color: #4db6ac !important;
}
 
/* 2. Screenshot Container */
.bc-screenshot {
    display: block;
    margin: 25px auto;
    border: 1px solid #e1e8eb;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    max-width: 100%;
    height: auto;
}
 
/* 3. Step Number Circle */
.bc-step-circle {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #266065;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    margin-right: 10px;
}
 
/* --- FIX VIDEO PLAYBACK INSIDE GRID CARDS --- */
.bc-card .embedvideo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 10 !important;
}
 
.bc-card .embedvideo iframe,
.bc-card .embedvideo object {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
}
 
/* --- VIDEO MODAL STYLES --- */
 
/* The Trigger Container */
.bc-video-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
 
.bc-video-trigger:hover {
    transform: scale(1.02);
}
 
/* The Thumbnail Image */
.bc-video-trigger img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}
 
.bc-video-trigger:hover img {
    opacity: 0.6;
}
 
/* The Play Icon */
.bc-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: white;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
 
/* --- THE MODAL OVERLAY --- */
.bc-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}
 
.bc-modal-overlay.active {
    display: flex;
}
 
.bc-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    background: black;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
 
.bc-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
}
 
/* --- Video Caption Style --- */
.bc-video-caption {
    margin-top: 15px;
    text-align: center;
    font-family: sans-serif !important;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    white-space: normal !important;
    border: none !important;
    background: transparent !important;
}
 
.bc-video-caption strong {
    color: #266065;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    margin-right: 6px;
}
 
/* --- Floated Video --- */
.bc-float-video {
    float: right;
    width: 45%;           
    min-width: 320px;     
    margin-left: 40px;   
    margin-bottom: 20px; 
}
 
@media (max-width: 850px) {
    .bc-float-video {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }
}
 
/* ============================================================
  --- JS-DRIVEN TOC STYLING ---
  ============================================================ */
 
html body .mw-parser-output #toc,
html body .vector-toc {
    display: inline-block;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 350px !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    margin-bottom: 25px !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    transition: all 0.3s ease !important;
}
 
/* 2. DEFAULT LIGHT MODE */
html body .mw-parser-output #toc,
html body .vector-toc {
    background-color: #ffffff !important;
    border: 1px solid #e1e8eb !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
 
html body .mw-parser-output #toctitle h2,
html body .vector-toc-title {
    color: #266065 !important;
    border-bottom: 2px solid #eef5f6 !important;
}
 
html body .mw-parser-output #toc a,
html body .vector-toc-link {
    color: #546e7a !important;
}
 
/* 3. FORCED DARK MODE */
html body .mw-parser-output #toc.force-dark-mode,
html body .vector-toc.force-dark-mode {
     background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}
 
html body .mw-parser-output #toc.force-dark-mode #toctitle h2,
html body .vector-toc.force-dark-mode .vector-toc-title {
    color: #4db6ac !important;
     border-bottom-color: #333333 !important;
}
}


html.skin-theme-clientpref-night .bc-promo-cta a:hover {
html body .mw-parser-output #toc.force-dark-mode a,
     background-color: #80cbc4 !important;
html body .vector-toc.force-dark-mode .vector-toc-link {
     color: #e0e0e0 !important;
}
}


/* 2. Remove MediaWiki's default container gap */
html body .mw-parser-output #toc.force-dark-mode a:hover,
#siteNotice {
html body .vector-toc.force-dark-mode .vector-toc-link:hover {
     margin-bottom: 0 !important;
     background-color: #263238 !important;
    color: #80cbc4 !important;
}
}


/* --- FIX SITENOTICE GAPS --- */
/* Hides the custom text used for Page Previews */
/* Hides the empty paragraph MediaWiki inserts automatically */
.bc-preview-text {
#siteNotice p {
     display: none !important;
     display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
}


/* Ensures the promo box itself doesn't have extra margin in the header */
/* --- FEATURED CARD COMPONENTS --- */
#siteNotice .bc-promo {
.bc-screenshot-frame {
     margin: 0 0 10px 0 !important;
    box-shadow: var(--bc-shadow) !important;
    border-radius: var(--bc-radius) !important;
    overflow: hidden !important;
    border: 1px solid #e1e8eb !important;
    background: #fff !important;
    line-height: 0 !important;
}
 
/* Dark Mode Support */
html.skin-theme-clientpref-night .bc-screenshot-frame {
    border-color: #333 !important;
    background: #1e1e1e !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}
 
/* Mobile: Stack the image and text on small screens */
@media screen and (max-width: 768px) {
    .bc-screenshot-frame {
        float: none !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }
}
 
/* ============================================================
  --- FEATURED CARD COMPONENT (LIGHT & DARK) ---
  ============================================================ */
 
/* 1. Base Screenshot Frame Improvements */
.bc-screenshot-frame {
    box-shadow: var(--bc-shadow) !important;
    border-radius: var(--bc-radius) !important;
    overflow: hidden !important;
    border: 1px solid #e1e8eb !important;
    background: #fff !important;
    line-height: 0 !important;
}
 
/* 2. Featured Card specific overrides for Dark Mode */
/* Note: You MUST add class="bc-featured-card" to your div for this to work */
html.skin-theme-clientpref-night .bc-featured-card {
    /* Override the inline light gradient with a Dark Teal/Charcoal gradient */
    background: linear-gradient(135deg, #0f2426 0%, #181818 100%) !important;
   
    /* Override the inline border */
    border: 1px solid #2a3d40 !important;
   
    /* Add a deep glow to make it stand out */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
}
 
/* 3. Fix Text & Header Visibility inside Featured Card in Dark Mode */
html.skin-theme-clientpref-night .bc-featured-card h2 {
    color: #80cbc4 !important; /* Bright Teal Header */
    border-bottom-color: rgba(128, 203, 196, 0.2) !important; /* Subtle teal divider line */
}
 
html.skin-theme-clientpref-night .bc-featured-card h2 i {
    color: #80cbc4 !important; /* Make the icon match the header */
}
 
html.skin-theme-clientpref-night .bc-featured-card p,
html.skin-theme-clientpref-night .bc-featured-card .bc-subtle {
    color: #cfd8dc !important; /* Light Grey text for readability */
}
 
/* 4. Fix the "Read More" link color in Dark Mode */
html.skin-theme-clientpref-night .bc-featured-card a span {
     color: #80cbc4 !important;
    text-decoration: underline !important;
}
 
html.skin-theme-clientpref-night .bc-featured-card a:hover span {
    color: #ffffff !important;
}
 
/* 5. Improve Screenshot visibility in Dark Mode */
html.skin-theme-clientpref-night .bc-screenshot-frame {
    background: #000 !important;
    border-color: #444 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.9) !important;
}
 
/* 6. Mobile: Stack the image and text on small screens */
@media screen and (max-width: 768px) {
    .bc-screenshot-frame {
        float: none !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }
}
 
/* --- BULLETPROOF INTERACTIVE DIMMING FOR DARK MODE --- */
 
/* 1. Target the actual IMG tag inside any thumb or our custom frame */
html.skin-theme-clientpref-night .thumbimage,
html.skin-theme-clientpref-night .bc-screenshot-frame img,
html.skin-theme-clientpref-night .bc-card img {
    filter: brightness(0.7) contrast(1.1) !important;
    transition: filter 0.3s ease !important;
}
 
/* 2. Restore brightness when hovering over the image OR its container */
html.skin-theme-clientpref-night .thumbimage:hover,
html.skin-theme-clientpref-night .bc-screenshot-frame:hover img,
html.skin-theme-clientpref-night .bc-card img:hover {
    filter: brightness(1) contrast(1) !important;
}
 
/* ============================================================
  --- FEATURED CARD DARK MODE OVERRIDE (CSS-ONLY FIX) ---
  ============================================================ */
 
/* 1. Target the card by checking if it has an inline gradient style */
html.skin-theme-clientpref-night .bc-card[style*="linear-gradient"] {
    /* Force the background to Dark Teal/Charcoal */
    background: linear-gradient(135deg, #0f2426 0%, #181818 100%) !important;
   
    /* Override the light blue border */
    border-color: #2a3d40 !important;
   
    /* Add the deep glow */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
}
 
/* 2. Fix the headers inside that specific card */
html.skin-theme-clientpref-night .bc-card[style*="linear-gradient"] h2 {
    color: #4db6ac !important; /* Bright Teal */
    border-bottom-color: rgba(77, 182, 172, 0.2) !important;
}
 
html.skin-theme-clientpref-night .bc-card[style*="linear-gradient"] h2 i {
    color: #4db6ac !important;
}
 
/* 3. Fix the text color inside that specific card */
html.skin-theme-clientpref-night .bc-card[style*="linear-gradient"] p,
html.skin-theme-clientpref-night .bc-card[style*="linear-gradient"] .bc-subtle {
    color: #e0e0e0 !important;
}
 
/* 4. Fix the "Read More" link */
html.skin-theme-clientpref-night .bc-card[style*="linear-gradient"] a span {
    color: #4db6ac !important;
    text-decoration: underline !important;
}
 
/* --- Remove H2 Header Underline in Dark Mode --- */
html.skin-theme-clientpref-night .mw-parser-output h2 {
    border-bottom: none !important;
}
 
.mw-parser-output p, .mw-parser-output li {
    max-width: 800px;
    line-height: 1.7; /* Increase line height for better readability */
    font-size: 16px; /* slightly larger base font */
}
/* ============================================================
  --- WIKITABLE (BORDERLESS & ZEBRA STRIPED) ---
  ============================================================ */
 
/* 1. Main Table Container */
.wikitable {
    width: 100%;
    border: none !important; /* Kills outer border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Keeps the soft shadow */
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate !important; /* Required for rounded corners */
    border-spacing: 0;
    margin: 1em 0; /* Breathing room around the table */
}
 
/* 2. Header Cells */
.wikitable th {
    background-color: var(--bc-blue) !important; /* Brand Teal */
    color: white !important;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 14px 16px !important;
    border: none !important; /* Kills header borders */
    text-align: left;
}
 
/* 3. Standard Data Cells (Odd Rows / Default) */
.wikitable td {
    background-color: #ffffff !important; /* Clean white background */
    border: none !important; /* Kills inner cell borders */
    padding: 12px 16px !important; /* Comfortable spacing */
    color: var(--bc-text);
}
 
/* 4. Zebra Striping (Even Rows) */
.wikitable tr:nth-child(even) td {
    background-color: var(--bc-bg-page) !important; /* Uses your theme's light grey/teal background */
}
 
/* ============================================================
  --- WIKITABLE DARK MODE OVERRIDES ---
  ============================================================ */
 
/* 1. Dark Mode Headers */
html.skin-theme-clientpref-night .wikitable th {
    background-color: #263238 !important; /* Dark Slate */
    color: #80cbc4 !important; /* Bright Teal Text */
}
 
/* 2. Dark Mode Data Cells (Odd Rows) */
html.skin-theme-clientpref-night .wikitable td {
    background-color: #1e1e1e !important; /* Dark Card Background */
    color: #e0e0e0 !important; /* Off-white text */
}
 
/* 3. Dark Mode Zebra Striping (Even Rows) */
html.skin-theme-clientpref-night .wikitable tr:nth-child(even) td {
    background-color: #2a2b2e !important; /* Slightly lighter charcoal for contrast */
}
 
/* ============================================================
  --- MODERN HEADER: BRANDED TEAL & STICKY ---
  ============================================================ */
 
/* 1. Color the Main Header Bar & Make it Sticky */
.vector-header-container {
    background-color: #266065 !important; /* Brand Teal */
    border-bottom: 1px solid #163a3d !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; /* Drop shadow for depth */
   
    /* STICKY BEHAVIOR (No JS required) */
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important; /* Ensures it stays on top of content */
}
 
/* 2. Text & Link Colors (White for contrast against Teal) */
.vector-header .vector-menu-content-list li a,
.vector-header .mw-portlet a,
.vector-header .vector-user-links a,
.vector-header .vector-menu-heading {
    color: #ffffff !important;
    font-weight: 500 !important;
}
 
/* 3. Icons (Make them White) */
.vector-header .cdx-button,
.vector-header .vector-icon {
    color: #ffffff !important;
}
}


/* --- FIX SITENOTICE BUTTON VISIBILITY --- */
/* 4. Search Box Modernization (Semi-Transparent Pill) */
/* Target the button specifically inside the header to override skin defaults */
.vector-search-box-input {
#siteNotice .bc-promo-cta a {
     background-color: rgba(255, 255, 255, 0.15) !important;
     display: inline-block !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
     color: white !important;
     color: white !important;
    border-radius: 50px !important; /* Modern Pill Shape */
    transition: all 0.2s ease !important;
}
.vector-search-box-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}
/* Search Focus State (Turns white when typing) */
.vector-search-box-input:focus {
    background-color: #ffffff !important;
    color: #2c3e50 !important; /* Dark text when typing */
    border-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2) !important;
}
.vector-search-box-input:focus::placeholder {
    color: #b0bec5 !important;
}
/* 5. Dark Mode Adjustment (Slightly darker for night time) */
html.skin-theme-clientpref-night .vector-header-container {
    background-color: #163a3d !important; /* Darker Slate/Teal */
    border-bottom-color: #000 !important;
}
/* ============================================================
  --- MODERN FIXED HEADER (NUCLEAR OPTION) ---
  ============================================================ */
/* 1. Kill the default "scroll" header completely */
#vector-sticky-header,
.vector-sticky-header {
    display: none !important;
}
/* 2. Force the MAIN header to be Fixed (Pinned) to the screen */
.vector-header-container {
    position: fixed !important; /* Force pin to viewport */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1001 !important; /* High Z-index to sit above everything */
   
    /* Brand Styling */
     background-color: #266065 !important;
     background-color: #266065 !important;
     padding: 12px 24px !important;
     border-bottom: 1px solid #163a3d !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
   
    /* Override any JS attempts to hide it */
    transform: none !important;
    opacity: 1 !important;
     visibility: visible !important;
     visibility: visible !important;
    height: auto !important;
}
/* 3. Color the inner header elements so no white shows through */
.vector-header,
.mw-header {
    background-color: transparent !important; /* Let the container color show */
    background: transparent !important;
    color: white !important;
}
/* 4. Push the page content down */
/* Since the header is now 'fixed', it floats 'above' the page.
  We must add a top margin to the body so content isn't hidden behind it. */
.mw-page-container {
    margin-top: 100px !important; /* 90px Header height + 10px gap */
}
/* 5. Mobile Adjustment */
/* On mobile, the header might be shorter, so we adjust the gap */
@media screen and (max-width: 768px) {
    .mw-page-container {
        margin-top: 60px !important; /* Adjust based on your mobile header height */
    }
}
/* 6. Fix Text Colors in Header */
.vector-header a,
.vector-header .vector-icon,
.vector-header .cdx-button {
    color: white !important;
}
/* ============================================================
  --- FORCE LOGO TO WHITE (CSS FILTER) ---
  ============================================================ */
/* Target the logo image inside the header */
.mw-logo-icon,
.mw-logo-wordmark,
.mw-logo-tagline,
.mw-wiki-logo {
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important; /* Safari/Chrome support */
}
/* Optional: If the logo looks a bit jagged after filtering, add a slight blur */
/* .mw-logo-icon { filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255,255,255,0.5)) !important; } */
/* ============================================================
  --- FORCE HEADER ICONS TO WHITE ---
  ============================================================ */
/* 1. Target all icons in the header (Hamburger, User, Search, etc.) */
.vector-header .mw-ui-icon,
.vector-header .vector-icon,
.vector-header .oo-ui-iconElement-icon {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important; /* Ensure they aren't dimmed */
}
/* 2. Target specific "hamburger" and "user" buttons if they resist */
#vector-main-menu-dropdown-label,
#vector-user-links-dropdown-label,
.vector-pinnable-header-toggle-button {
    color: white !important;
}
/* 3. Ensure the search icon inside the input stays visible (optional) */
/* If the search icon disappears against a white input, uncomment this: */
/* .vector-search-box .mw-ui-icon-search { filter: none !important; color: #266065 !important; } */
/* ============================================================
  --- FIX HEADER CHEVRONS (USER MENU & DROPDOWNS) ---
  ============================================================ */
/* 1. Target the dropdown label which holds the chevron */
.vector-header .vector-dropdown-label,
.vector-header .vector-user-menu-logged-in .vector-dropdown-label {
    color: white !important; /* Forces any text to white */
}
/* 2. Target the specific chevron icon (often a background image or pseudo-element) */
.vector-header .vector-dropdown-label::after,
.vector-header .mw-ui-icon-flush-right,
.vector-header .vector-dropdown-checkbox:checked + .vector-dropdown-label::after {
    filter: brightness(0) invert(1) !important; /* Turns black/grey to White */
     opacity: 1 !important;
     opacity: 1 !important;
}
/* 3. Specific fix for the "User" dropdown chevron if it's an SVG background */
.vector-header .vector-user-menu .vector-dropdown-label {
    background-image: none !important; /* Sometimes removing the default helps */
}
/* 4. Force the "More" (3 dots) and other menu icons to white */
.vector-header .vector-menu-heading-label,
.vector-header .mw-ui-icon {
    filter: brightness(0) invert(1) !important;
}
/* ============================================================
  --- FIX HEADER DROPDOWN MENUS (RESTORE DARK TEXT) ---
  ============================================================ */
/* 1. Reset text color inside the dropdown containers */
/* This overrides the "white !important" from the main header rule */
.vector-header .vector-dropdown-content,
.vector-header .vector-menu-content {
    color: #2c3e50 !important; /* Dark Grey Text */
}
/* 2. Reset the LINKS inside dropdowns */
.vector-header .vector-dropdown-content a,
.vector-header .vector-menu-content a,
.vector-header .vector-dropdown-content .vector-menu-heading,
.vector-header .vector-menu-content .vector-menu-heading {
    color: #2c3e50 !important; /* Dark Grey Links */
    font-weight: normal !important;
}
/* 3. Hover State for Dropdown Links (Teal) */
.vector-header .vector-dropdown-content a:hover,
.vector-header .vector-menu-content a:hover {
    color: #266065 !important; /* Brand Teal on Hover */
    background-color: #f4f7f9 !important; /* Light Grey Background */
     text-decoration: none !important;
     text-decoration: none !important;
}
}


#siteNotice .bc-promo-cta a:hover {
/* 4. Fix the "Move to Sidebar" buttons */
     background-color: #163a3d !important;
.vector-pinnable-header-label {
    color: #2c3e50 !important;
}
 
.vector-pinnable-header-toggle-button {
    color: #546e7a !important; /* Muted Grey for utility buttons */
    filter: none !important; /* Remove the white filter we added */
}
 
/* ============================================================
  --- FIX HEADER DROPDOWN LINKS (VISIBLE TEXT) ---
  ============================================================ */
 
/* 1. Force the Dropdown Container to be White with Dark Text */
html body .vector-header .vector-dropdown-content {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
}
 
/* 2. SPECIFICALLY Target the Links inside the Dropdown */
/* We use 'html body' to make this rule stronger than the generic header rule */
html body .vector-header .vector-dropdown-content a,
html body .vector-header .vector-dropdown-content li a,
html body .vector-header .vector-dropdown-content .mw-list-item a {
    color: #2c3e50 !important; /* Dark Grey (Visible) */
    font-weight: normal !important;
    font-size: 0.95rem !important;
    filter: none !important; /* Remove any brightness filters */
}
 
/* 3. Hover State for Links (Teal Background) */
html body .vector-header .vector-dropdown-content a:hover,
html body .vector-header .vector-dropdown-content li a:hover {
     background-color: #f4f7f9 !important;
    color: #266065 !important; /* Brand Teal */
    text-decoration: none !important;
}
 
/* 4. Fix the Icons inside the menu (Home icon, etc.) */
/* The previous filter turned them white. We need to turn them back to dark. */
html body .vector-header .vector-dropdown-content .vector-icon,
html body .vector-header .vector-dropdown-content .mw-ui-icon {
    filter: none !important; /* Reset filter */
    opacity: 0.6 !important;
    color: #2c3e50 !important;
}
 
/* 5. Fix "Move to sidebar" button text */
html body .vector-pinnable-header-label {
    color: #2c3e50 !important;
    border-bottom: 1px solid #eee !important;
}
 
html body .vector-pinnable-header-toggle-button {
    color: #7f8c8d !important; /* Grey text for the button */
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
}
 
/* ============================================================
  --- YOUTUBE-STYLE CONNECTED SEARCH BAR (FIXED) ---
  ============================================================ */
 
/* 1. RESET THE CONTAINER (Fixes the white box glitch) */
html body .vector-header .cdx-search-input {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important; /* Connects the two halves */
    background-color: transparent !important; /* REMOVES THE WHITE BOX */
    border: none !important; /* Removes default border */
    box-shadow: none !important;
    padding: 0 !important; /* Reset any padding */
}
 
/* 2. THE INPUT FIELD (Left Half) */
html body .vector-header .cdx-text-input__input {
    /* Shape: Round Left, Flat Right */
    border-radius: 40px 0 0 40px !important;
   
    /* Border: Remove right border */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-right: none !important;
   
    /* Colors: Dark translucent background */
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
   
    /* Size & Layout */
    margin: 0 !important;
    height: 38px !important; /* Fixed height */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
    width: 100% !important;
}
 
/* 3. THE SEARCH BUTTON (Right Half) */
html body .vector-header .cdx-search-input__end-button {
    /* Shape: Flat Left, Round Right */
    border-radius: 0 40px 40px 0 !important;
   
    /* Border: Matches the input */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-left: none !important;
   
    /* Colors: Lighter background so you can see it */
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
   
    /* Size & Layout */
    margin: 0 !important;
    height: 38px !important; /* Must match input height */
    width: 50px !important; 
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
   
    /* Fixes the "invisible" button issue */
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}
 
/* 4. HOVER & FOCUS STATES */
html body .vector-header .cdx-search-input__end-button:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
}
 
html body .vector-header .cdx-text-input__input:focus {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Darker when typing */
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: none !important;
}
 
/* 5. FORCE ICON COLOR (Just in case) */
html body .vector-header .cdx-search-input__end-button .vector-icon {
     color: white !important;
     color: white !important;
    fill: white !important;
    opacity: 1 !important;
}
/* ============================================================
  --- SEARCH BAR POLISH (ICON & CONTRAST) ---
  ============================================================ */
/* 1. Hide the text "Search" but keep the button clickable */
html body .vector-header .cdx-search-input__end-button {
    color: transparent !important; /* Hides the text */
    position: relative !important;
}
/* 2. Inject the Magnifying Glass Icon (FontAwesome) */
html body .vector-header .cdx-search-input__end-button::after {
    content: "\f002"; /* FontAwesome 'Search' Unicode */
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: white !important; /* Icon Color */
   
    /* Center the icon perfectly */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.9 !important;
}
/* ============================================================
  --- BRIGHTER SEARCH PLACEHOLDER TEXT ---
  ============================================================ */
/* Target the placeholder text and force it to be brighter */
html body .vector-header .cdx-text-input__input::placeholder {
    color: rgba(255, 255, 255, 0.85) !important; /* Increased opacity for brightness */
    opacity: 1 !important; /* Ensure browser doesn't dim it automatically */
}
/* Optional: Even brighter on focus/click */
html body .vector-header .cdx-text-input__input:focus::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* Dim slightly when typing starts */
}
/* ============================================================
  --- REMOVE LEFT SEARCH ICON & FIX PADDING ---
  ============================================================ */
/* 1. Hide the Start Icon (The one on the left) */
html body .vector-header .cdx-text-input__icon,
html body .vector-header .cdx-search-input__start-icon,
html body .vector-header .cdx-text-input__icon-vue {
    display: none !important;
}
/* 2. Adjust Input Padding (So text starts at the edge) */
/* We reduce padding-left from ~38px to 20px since the icon is gone */
html body .vector-header .cdx-text-input__input {
    padding-left: 20px !important;
}
/* ============================================================
  --- SEARCH RESULT DROPDOWN TEXT (LIGHT & DARK MODE FIX) ---
  ============================================================ */
/* 1. LIGHT MODE TEXT */
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__content,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__text,
html:not(.skin-theme-clientpref-night) body .cdx-typeahead-search-menu__item-title,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item__description {
    color: #2c3e50 !important; /* Dark Grey */
    filter: none !important;
}
/* 2. DARK MODE TEXT */
html.skin-theme-clientpref-night body .cdx-menu-item__content,
html.skin-theme-clientpref-night body .cdx-menu-item__text,
html.skin-theme-clientpref-night body .cdx-typeahead-search-menu__item-title,
html.skin-theme-clientpref-night body .cdx-menu-item__description,
html.skin-theme-clientpref-night body .cdx-search-result-title {
    color: #f8f9fa !important; /* Off-White */
    filter: none !important;
}
/* 3. MATCHED TYPED LETTERS (DARK MODE) */
html.skin-theme-clientpref-night body .cdx-menu-item__content b,
html.skin-theme-clientpref-night body .cdx-menu-item__text b,
html.skin-theme-clientpref-night body .cdx-typeahead-search-menu__item-title b,
html.skin-theme-clientpref-night body .cdx-search-result-title b {
    color: #ffffff !important;
    font-weight: bold !important;
}
/* 4. HEADER TEXT ("Searching for...") */
html body .cdx-menu__header {
    color: #7f8c8d !important;
    text-transform: uppercase;
    font-size: 0.75rem;
}
/* 5. HOVER STATES (LIGHT MODE) */
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled.cdx-menu-item--selected,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled:hover {
    background-color: #f4f7f9 !important;
}
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled.cdx-menu-item--selected .cdx-menu-item__text,
html:not(.skin-theme-clientpref-night) body .cdx-menu-item--enabled:hover .cdx-menu-item__text {
    color: #266065 !important;
}
/* 6. HOVER STATES (DARK MODE) */
html.skin-theme-clientpref-night body .cdx-menu-item:hover,
html.skin-theme-clientpref-night body .cdx-menu-item.cdx-menu-item--selected,
html.skin-theme-clientpref-night body .cdx-typeahead-search__menu .cdx-menu-item:active {
    background-color: #3c4043 !important;
}
/* 7. BOTTOM LINK ("Search for pages containing...") */
html:not(.skin-theme-clientpref-night) body .cdx-typeahead-search-menu__footer {
    color: #266065 !important;
    border-top: 1px solid #eee !important;
}
html.skin-theme-clientpref-night body .cdx-menu-item--search-page,
html.skin-theme-clientpref-night body .cdx-menu-item--search-page * {
    color: #8ab4f8 !important;
}
/* --- UPDATED LINK GRID (4 COLUMNS) --- */
.bc-linkgrid {
    display: grid !important;
    /* Force exactly 4 columns of equal width */
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 20px;
}
/* Ensure tiles take up equal height and look like clean cards */
.bc-linktile a {
    display: flex !important;
    flex-direction: row !important; /* Icon next to text */
    align-items: center !important;
    padding: 15px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
}
/* Mobile Responsiveness: Stack to 2 columns on tablets, 1 on phones */
@media screen and (max-width: 1024px) {
    .bc-linkgrid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (max-width: 600px) {
    .bc-linkgrid { grid-template-columns: 1fr !important; }
}
/* ============================================================
  --- UNIFIED SIDEBAR SCROLL FIX (TOC & TOOLS) ---
  ============================================================ */
/* 1. INITIAL STATE (At the top of the page) */
/* Target all possible sidebar containers (Left & Right) */
html body #vector-toc-pinned-container,      /* Left: Pinned TOC */
html body #vector-page-tools-pinned-container, /* Right: Pinned Tools */
html body .vector-main-menu-container,      /* Left: Main Menu */
html body .vector-column-end,                /* Right: Generic Column */
html body #mw-panel-toc,                    /* Left: Alternate TOC ID */
html body #p-appearance {                    /* Right: Appearance Menu */
    position: sticky !important;
    top: 75px !important;  /* Starting position below the static header */
    transition: top 0.3s ease, max-height 0.3s ease !important;
    z-index: 99 !important;
}
/* 2. SCROLLED STATE (Slide Down) */
/* When JS adds 'bc-scrolled', push everything down to clear the fixed header */
html body.bc-scrolled #vector-toc-pinned-container,
html body.bc-scrolled #vector-page-tools-pinned-container,
html body.bc-scrolled .vector-main-menu-container,
html body.bc-scrolled .vector-column-end,
html body.bc-scrolled #mw-panel-toc,
html body.bc-scrolled #p-appearance {
   
    /* Adjust height so you can still scroll to the bottom of the sidebar */
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
}
/* 3. FLOATING TOC FIX (For unpinned TOC inside articles) */
/* Prevents the floating TOC from getting hidden if it's not in the sidebar */
html body.bc-scrolled .mw-parser-output #toc {
    margin-top: 50px !important;
    transition: margin-top 0.3s ease !important;
}
/* ============================================================
  --- TOC SPECIFIC SCROLL FIX (MAX WIDTH / NO CUTOFF) ---
  ============================================================ */
/* 1. Target the TOC Container specifically */
html body #vector-toc-pinned-container,
html body #mw-panel-toc,
html body .vector-toc {
    transition: all 0.3s ease !important;
    top: 75px !important;
   
    /* WIDTH FIX: Fill the sidebar column completely, but don't overflow */
    width: 100% !important;
    min-width: unset !important; /* Remove the forced 300px */
    box-sizing: border-box !important; /* Ensures padding doesn't make it wider than 100% */
}
/* 2. THE PUSH DOWN (On Scroll) */
html body.bc-scrolled #vector-toc-pinned-container,
html body.bc-scrolled #mw-panel-toc,
html body.bc-scrolled .vector-toc {
    /* Push down values */
    top: 140px !important;
    padding-top: 30px !important;
   
    /* Adjust height */
    max-height: calc(100vh - 160px) !important;
   
    /* SCROLLBAR MANAGEMENT */
    overflow-y: auto !important; 
    overflow-x: hidden !important; /* Prevents horizontal scrollbar */
}
/* ============================================================
  --- DARK MODE TOC FIX (VARIABLE OVERRIDE) ---
  ============================================================ */
html.skin-theme-clientpref-night .vector-toc {
    /* 1. Force the skin's internal text variables to Light Grey */
    --color-base: #e0e0e0 !important;
    --color-emphasized: #ffffff !important;
    --color-subtle: #b0bec5 !important;
    --color-placeholder: #b0bec5 !important;
   
    /* 2. Force links to be Light Grey */
    color: #e0e0e0 !important;
}
/* 3. The "Contents" Header & Toggle */
html.skin-theme-clientpref-night .vector-toc-title,
html.skin-theme-clientpref-night #vector-toc-label,
html.skin-theme-clientpref-night .vector-pinnable-header-label {
    color: #4db6ac !important; /* Bright Teal */
    border-bottom-color: #444 !important;
}
/* 4. The Individual Links (Force them white) */
html.skin-theme-clientpref-night .vector-toc-link,
html.skin-theme-clientpref-night .vector-toc-text,
html.skin-theme-clientpref-night .vector-toc .vector-toc-list-item a {
    color: #e0e0e0 !important;
    opacity: 1 !important;
}
/* 5. Hover State (Teal) */
html.skin-theme-clientpref-night .vector-toc-link:hover .vector-toc-text,
html.skin-theme-clientpref-night .vector-toc-link:hover,
html.skin-theme-clientpref-night .vector-toc .vector-toc-list-item a:hover {
    color: #4db6ac !important;
    text-decoration: none !important;
}
/* 6. Active/Selected State (Bright White + Teal Border) */
html.skin-theme-clientpref-night .vector-toc-list-item-active > .vector-toc-link .vector-toc-text {
    color: #ffffff !important;
    font-weight: bold !important;
}
}
Retrieved from "https://wiki.borderconnect.com/index.php?title=MediaWiki:Common.css"