/* ============================================================================
   Dark theme — opt-in override layer for the VOD Bangla public site.

   Every rule is scoped under html[data-theme="dark"] so this file is completely
   inert on the default (light) site and cannot regress it. style.css is left
   untouched; we only re-paint surfaces + text here.

   style.css hard-codes text/background colors on hundreds of individual
   selectors (no CSS variables), so overrides use !important and broad content
   anchors to reliably win. Brand accents are intentionally preserved:
     - green nav (#00834a) stays
     - red inline highlights are brightened (not removed) for dark legibility

   Palette
     bg       #121417   page background
     surface  #1c1f24   cards / panels / overlays
     surface2 #23272e   raised / inputs / ticker chips
     text     #d8d8d8   body text        heading #f2f2f2
     muted    #9a9a9a   secondary text
     border   #2c2f36   dividers / outlines
     link     #6fb0ff   in-article links
   ============================================================================ */

/* ---- Page base -------------------------------------------------------------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #121417 !important;
    color: #d8d8d8 !important;
}

/* ---- Broad readable text ---------------------------------------------------- */
/* style.css sets color:#444/#333/#000/#121212/#555 on countless selectors; blanket
   the whole page to a light default, then re-assert accents/headers below. */
html[data-theme="dark"] body p,
html[data-theme="dark"] body span,
html[data-theme="dark"] body div,
html[data-theme="dark"] body li,
html[data-theme="dark"] body ul,
html[data-theme="dark"] body a,
html[data-theme="dark"] body td,
html[data-theme="dark"] body th,
html[data-theme="dark"] body address,
html[data-theme="dark"] body strong,
html[data-theme="dark"] body b,
html[data-theme="dark"] body em,
html[data-theme="dark"] body small,
html[data-theme="dark"] body time,
html[data-theme="dark"] body label,
html[data-theme="dark"] body figcaption,
html[data-theme="dark"] body blockquote,
html[data-theme="dark"] body marquee {
    color: #d8d8d8 !important;
}
html[data-theme="dark"] body h1,
html[data-theme="dark"] body h2,
html[data-theme="dark"] body h3,
html[data-theme="dark"] body h4,
html[data-theme="dark"] body h5,
html[data-theme="dark"] body h6,
html[data-theme="dark"] .title,
html[data-theme="dark"] .common-card-content h5.title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-title.text-dark {
    color: #f2f2f2 !important;
}
/* Muted secondary text (summaries, timestamps) */
html[data-theme="dark"] .summery,
html[data-theme="dark"] .news_date_time,
html[data-theme="dark"] .news_date_time > p,
html[data-theme="dark"] .date-time,
html[data-theme="dark"] time {
    color: #9a9a9a !important;
}
/* Preserve + brighten the inline red headline highlights */
html[data-theme="dark"] [style*="color: red"],
html[data-theme="dark"] [style*="color:red"] {
    color: #ff6b6b !important;
}

/* ---- Header: keep brand green + crisp white text ---------------------------- */
/* .navigation (green brand bar) stays green; force its text back to white since
   the blanket above would otherwise dim it. */
html[data-theme="dark"] .navigation,
html[data-theme="dark"] .navigation a,
html[data-theme="dark"] .navigation *,
html[data-theme="dark"] .header-sticky .header_top_menu a,
html[data-theme="dark"] .header-sticky .nav-item a {
    color: #ffffff !important;
}
/* The top utility bar (.header-sticky.sticky) is white in light mode -> dark. */
html[data-theme="dark"] .header-sticky.sticky {
    background: #1c1f24 !important;
}
html[data-theme="dark"] #all_menu,
html[data-theme="dark"] #search_icon,
html[data-theme="dark"] #all_menu i,
html[data-theme="dark"] #search_icon i,
html[data-theme="dark"] #all_menu .burger-glyph,
html[data-theme="dark"] #search_icon .search-glyph,
html[data-theme="dark"] #theme_toggle,
html[data-theme="dark"] #theme_toggle i {
    color: #f1f1f1 !important;
}
/* Toggle button base styling (matches burger/search glyphs in light mode) */
#theme_toggle { cursor: pointer; font-size: 18px; color: #222; }
#theme_toggle i { padding-top: 5px; }

/* ---- Top-news ticker -------------------------------------------------------- */
html[data-theme="dark"] .tmqe { border-bottom-color: #2c2f36 !important; }
html[data-theme="dark"] .tmqe .mqh,
html[data-theme="dark"] .livehh,
html[data-theme="dark"] h2.livehh {
    background: #23272e !important;
    color: #e6e6e6 !important;
}
html[data-theme="dark"] .livehh a { color: #ff6b6b !important; }

/* Mobile জাতীয় strip dividers (see style.css @media 767.98px) */
html[data-theme="dark"] #bodymenu_midlead .sub-news .common-card-content {
    border-bottom-color: #2c2f36 !important;
}

/* ---- News cards / lead / editor picks --------------------------------------- */
html[data-theme="dark"] .common-card,
html[data-theme="dark"] .common-card-content,
html[data-theme="dark"] .lead-news,
html[data-theme="dark"] .sub-news,
html[data-theme="dark"] .news-content-box {
    background: transparent !important;
}
html[data-theme="dark"] .editor_picks_list {
    background: transparent !important;
    border-bottom-color: #2c2f36 !important;
}

/* ---- Bootstrap cards (category / listing pages) ----------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body {
    background-color: #1c1f24 !important;
    border-color: #2c2f36 !important;
    color: #d8d8d8 !important;
}

/* ---- Special report / flexslider -------------------------------------------- */
html[data-theme="dark"] #special_report,
html[data-theme="dark"] .flexslider,
html[data-theme="dark"] .flex_specialReport {
    background: #1c1f24 !important;
    border-color: #2c2f36 !important;
}
html[data-theme="dark"] .flex-prev,
html[data-theme="dark"] .flex-next {
    background: #23272e !important;
    color: #d8d8d8 !important;
}

/* ---- Archive calendar / form controls / pagination -------------------------- */
html[data-theme="dark"] .form-select,
html[data-theme="dark"] #month-select,
html[data-theme="dark"] #year-select,
html[data-theme="dark"] select {
    background-color: #23272e !important;
    color: #e6e6e6 !important;
    border-color: #2c2f36 !important;
}
html[data-theme="dark"] .page-link {
    background-color: #1c1f24 !important;
    color: #d8d8d8 !important;
    border-color: #2c2f36 !important;
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: #00834a !important;
    border-color: #00834a !important;
    color: #fff !important;
}

/* ---- Article detail --------------------------------------------------------- */
html[data-theme="dark"] #details_content .headline_section > h1,
html[data-theme="dark"] #details_content .headline_section > h3,
html[data-theme="dark"] #details_content .headline_section > h4 {
    color: #f5f5f5 !important;
}
html[data-theme="dark"] #details_content a,
html[data-theme="dark"] .article-body a {
    color: #6fb0ff !important;
}
html[data-theme="dark"] #details_content blockquote {
    background: #1c1f24 !important;
    border-color: #2c2f36 !important;
}
html[data-theme="dark"] #details_content table,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th {
    border-color: #2c2f36 !important;
}
/* Bootstrap .table forces a dark text var — override for the archive calendar
   and any content tables so cells stay readable on dark. */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] #calendar-table,
html[data-theme="dark"] #calendar-table th,
html[data-theme="dark"] #calendar-table td {
    color: #d8d8d8 !important;
    --bs-table-color: #d8d8d8 !important;
    --bs-table-bg: transparent !important;
    border-color: #2c2f36 !important;
}
/* Bootstrap carousel controls: dim the translucent-white so they don't glare */
html[data-theme="dark"] .carousel-caption {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* Breadcrumb, image caption bars, "load more" button */
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] ol.breadcrumb {
    background: transparent !important;
}
html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .breadcrumb li,
html[data-theme="dark"] .breadcrumb .breadcrumb-item {
    color: #d8d8d8 !important;
}
html[data-theme="dark"] .dtl_img_section .img,
html[data-theme="dark"] div.img {
    background: #1c1f24 !important;
}
html[data-theme="dark"] .morebtn,
html[data-theme="dark"] #find_more {
    background: #1c1f24 !important;
    color: #d8d8d8 !important;
    border-color: #2c2f36 !important;
}
/* "Next news" divider — the centered label chip uses a white bg to mask the
   rule behind it; blend it into the dark page instead. */
html[data-theme="dark"] .vb-next-divider { border-color: #2c2f36 !important; }
html[data-theme="dark"] .vb-next-divider span {
    background: #121417 !important;
    color: #d8d8d8 !important;
}

/* ---- Mega menu / dropdown --------------------------------------------------- */
html[data-theme="dark"] div.megaMenuWrapper {
    background: #1c1f24 !important;
    border-color: #2c2f36 !important;
}
html[data-theme="dark"] div.megaMenu { border-bottom-color: #2c2f36 !important; }
html[data-theme="dark"] div.megaMenu ul li a { color: #e6e6e6 !important; }

/* ---- Search overlay --------------------------------------------------------- */
html[data-theme="dark"] div.search_box { background: #1c1f24 !important; }
html[data-theme="dark"] .srch_keyword,
html[data-theme="dark"] .search_box input,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"] {
    background: #23272e !important;
    color: #e6e6e6 !important;
    border-color: #2c2f36 !important;
}
html[data-theme="dark"] .srch_keyword::placeholder,
html[data-theme="dark"] input::placeholder { color: #8a8a8a !important; }

/* ---- Footer ----------------------------------------------------------------- */
html[data-theme="dark"] #footer,
html[data-theme="dark"] footer {
    background: #0d0f12 !important;
}
html[data-theme="dark"] #footer a,
html[data-theme="dark"] #footer p,
html[data-theme="dark"] #footer h4,
html[data-theme="dark"] #footer h5,
html[data-theme="dark"] #footer address,
html[data-theme="dark"] #footer strong,
html[data-theme="dark"] #footer b,
html[data-theme="dark"] .copyrith {
    color: #cfcfcf !important;
}

/* ---- Generic light backgrounds, borders, misc ------------------------------- */
html[data-theme="dark"] .bg-white { background-color: #1c1f24 !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-2,
html[data-theme="dark"] .border-3 {
    border-color: #2c2f36 !important;
}
html[data-theme="dark"] .news-separator-horizontal-border,
html[data-theme="dark"] hr {
    border-color: #2c2f36 !important;
    background: #2c2f36 !important;
}
html[data-theme="dark"] #back_top {
    background: #1c1f24 !important;
    color: #e6e6e6 !important;
}
/* Dim bright ad/hero imagery slightly so it doesn't glare against dark chrome */
html[data-theme="dark"] img { filter: brightness(0.92); }