/* ============================================================
   FORCED DARK MODE — Opera GX Style (Pure Filter Approach)
   Uses data-opera-dark="true" to completely bypass any legacy
   [data-theme="dark"] rules scattered across components.
   ============================================================ */

/* ── 0. TOGGLE BUTTON STYLES (always active) ── */
.dark-toggle-btn {
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 2px 10px;
    cursor: pointer;
    font-weight: 800;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.dark-toggle-btn:hover { background: #F1C40F; color: #064e3b; }
html[data-opera-dark="true"] .dark-toggle-btn { background: rgba(241,196,15,0.2); color: #F1C40F; }

@media (max-width: 768px) {
    .dark-toggle-btn { padding: 2px 8px; font-size: 11px; }
}

/* ── 1. GLOBAL FORCED DARK MODE ── */
html[data-opera-dark="true"] {
    color-scheme: dark;
    filter: invert(1) hue-rotate(180deg);
}

/* Ensures body has a baseline white background so inversion creates black */
html[data-opera-dark="true"] body {
    background-color: white;
}

/* ── 2. RE-INVERT MEDIA ── */
/* Re-invert images, videos etc. to retain their original colors */
html[data-opera-dark="true"] img,
html[data-opera-dark="true"] video,
html[data-opera-dark="true"] iframe,
html[data-opera-dark="true"] canvas,
html[data-opera-dark="true"] .hm-ld-img {
    filter: invert(1) hue-rotate(180deg);
}

/* ── 3. RE-INVERT NATURALLY DARK SECTIONS ── */
/*
   The global filter blindly inverts everything. Sections that are
   ALREADY dark green in light mode will turn light mint/cyan unless
   we double-invert them (which returns them to their original dark green).

   FULL SITE AUDIT — every naturally dark element:
   ─── GLOBAL CHROME ────────────────────────────────────────────
   .gigw-topbar         → top green GIGW accessibility bar
   .brand-header        → white logo bar (light bg, no issue, but safe)
   .green-nav-shell     → sticky green navigation bar shell
   .green-navbar        → inner nav bar
   ─── FOOTER ───────────────────────────────────────────────────
   .green-footer        → ACTUAL footer class (was wrongly .footer before)
   .footer-main         → footer main content area
   .footer-bottom       → footer copyright strip
   ─── HOME PAGE DARK STRIPS ────────────────────────────────────
   .hm-ticker           → dark forest-green news ticker at top
   .hm-tile-accent      → dark mosaic tile on home bento grid
   .hm-stat-bar         → dark statistics bar on home bento grid
   .hm-wh               → dark header on home widget cards
   .hm-ext-strip        → dark external links footer strip
   ─── CHATBOT ──────────────────────────────────────────────────
   .forest-bot-fab      → floating chat button (dark green)
   .bot-header          → chatbot window header (dark green)
   .message.user        → user chat bubbles (dark green)
   .bot-send-btn        → send button (dark green)
   ─── PAGE HERO ────────────────────────────────────────────────
   .page-hero           → dark hero banner on all subpages
   ─── FOREST SUBPAGES ──────────────────────────────────────────
   .forest-hero-img     → hero image overlay on forest pages
   .forest-bio-card     → dark biodiversity cards on overview
   .forest-seasonal     → dark seasonal section on overview
   ─── FOREST COVER PAGE ────────────────────────────────────────
   .fc-stats            → dark stats section
   .fc-councils         → dark Autonomous District Councils section
   ─── RESERVED FORESTS PAGE ───────────────────────────────────
   .rf-divisions        → dark territorial divisions section
   .rf-org-card         → dark org chart card
   .rf-table th         → dark table header cells
   ─── FOREST FIRE PAGE ─────────────────────────────────────────
   .ff-hero-stats       → dark hero stats bar
   .ff-ownership        → dark ownership section
   .ff-tech-card        → dark tech framework card
   ─── MINI ZOOS & PARKS ────────────────────────────────────────
   .mzp-catchment-card  → dark catchment radar card
   ─── SILVICULTURE / RESEARCH ──────────────────────────────────
   .rt-data-table thead th → dark table headers
*/
html[data-opera-dark="true"] .gigw-topbar,
html[data-opera-dark="true"] .green-nav-shell,
html[data-opera-dark="true"] .green-footer,
html[data-opera-dark="true"] .hm-ticker,
html[data-opera-dark="true"] .hm-tile-accent,
html[data-opera-dark="true"] .hm-stat-bar,
html[data-opera-dark="true"] .hm-wh,
html[data-opera-dark="true"] .hm-ext-strip,
html[data-opera-dark="true"] .forest-bot-fab,
html[data-opera-dark="true"] .bot-header,
html[data-opera-dark="true"] .message.user,
html[data-opera-dark="true"] .bot-send-btn,
html[data-opera-dark="true"] .page-hero,
html[data-opera-dark="true"] .forest-hero-img,
html[data-opera-dark="true"] .forest-bio-card,
html[data-opera-dark="true"] .forest-seasonal,
html[data-opera-dark="true"] .fc-stats,
html[data-opera-dark="true"] .fc-councils,
html[data-opera-dark="true"] .rf-divisions,
html[data-opera-dark="true"] .rf-org-card,
html[data-opera-dark="true"] .rf-table th,
html[data-opera-dark="true"] .ff-hero-stats,
html[data-opera-dark="true"] .ff-ownership,
html[data-opera-dark="true"] .ff-tech-card,
html[data-opera-dark="true"] .mzp-catchment-card,
html[data-opera-dark="true"] .rt-data-table thead th {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* ── 4. CANCEL MEDIA RE-INVERSION INSIDE DARK CONTAINERS ── */
/* Images inside re-inverted containers must NOT be double-inverted
   again — that would make them look like x-rays / negatives. */
html[data-opera-dark="true"] .gigw-topbar img,
html[data-opera-dark="true"] .green-nav-shell img,
html[data-opera-dark="true"] .green-footer img,
html[data-opera-dark="true"] .hm-ticker img,
html[data-opera-dark="true"] .hm-tile-accent img,
html[data-opera-dark="true"] .hm-stat-bar img,
html[data-opera-dark="true"] .hm-ext-strip img,
html[data-opera-dark="true"] .forest-bot-fab img,
html[data-opera-dark="true"] .bot-header img,
html[data-opera-dark="true"] .page-hero img,
html[data-opera-dark="true"] .forest-hero-img img,
html[data-opera-dark="true"] .forest-bio-card img,
html[data-opera-dark="true"] .forest-seasonal img,
html[data-opera-dark="true"] .fc-stats img,
html[data-opera-dark="true"] .fc-councils img,
html[data-opera-dark="true"] .rf-divisions img,
html[data-opera-dark="true"] .rf-org-card img,
html[data-opera-dark="true"] .ff-hero-stats img,
html[data-opera-dark="true"] .ff-ownership img,
html[data-opera-dark="true"] .mzp-catchment-card img {
    filter: none !important;
}

/* ── 5. DESKTOP DROPDOWN MENUS ── */
/* The desktop dropdown menu has a white background in light mode, but because it is nested 
   inside the double-inverted .green-nav-shell, it would remain white. We invert it a 3rd time 
   (only on desktop) so it becomes black/dark for dark mode. */
@media (min-width: 1024px) {
    html[data-opera-dark="true"] .dropdown-menu {
        filter: invert(1) hue-rotate(180deg) !important;
    }
}