/* Data365 Evidence — Global Dark Theme Hardening (site-wide)
  Purpose: enforce readable dark theme across all pages, including local file:// viewing.
  This file is intentionally loaded LAST to override earlier styles.
*/
:root{
  --d365-bg:#0b0f14;
  --d365-surface:#101826;
  --d365-surface-2:#0f1724;
  --d365-border:rgba(255,255,255,.10);
  --d365-text:#e8eef7;
  --d365-muted:rgba(232,238,247,.78);
  --d365-link:#7cc4ff;
  --d365-link-hover:#a8dcff;
  --d365-accent:#7aa2ff;
}

html, body{
  background:var(--d365-bg) !important;
  color:var(--d365-text) !important;
}

body{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

*{ box-shadow: none; }

a{ color:var(--d365-link) !important; }
a:hover, a:focus{ color:var(--d365-link-hover) !important; }

p, li, dd, dt, span, small, label, input, textarea, select, button{
  color:inherit;
}

h1,h2,h3,h4,h5,h6{
  color:var(--d365-text) !important;
}

.muted, .subtle, .fineprint, .note, .caption{
  color:var(--d365-muted) !important;
}

/* Prevent white “page panels” from reappearing */
main, .wrap, .container, .content, .page, .page-wrap, .inner, .shell{
  background: transparent !important;
}

/* Common section/card surfaces */
section, .section, .panel, .card, .box, .callout, .content-card, .cardish{
  background: var(--d365-surface) !important;
  color: var(--d365-text) !important;
  border: 1px solid var(--d365-border) !important;
}

/* Some pages use section.section for hero blocks; keep it slightly different */
section.section, .section.section{
  background: rgba(255,255,255,.06) !important;
}

/* Tables */
table{
  color:var(--d365-text) !important;
}
th, td{
  border-color: var(--d365-border) !important;
}
thead th{
  background: rgba(255,255,255,.06) !important;
}

/* Header hardening (fix “white header” regressions)
  IMPORTANT: do NOT style all <nav> elements here.
  Applying borders/backgrounds to generic <nav> caused the “rectangles/extra line”
  to reappear under the top navigation.
*/
.site-header,
header.site-header,
.topbar,
.navbar,
.header{
  background: rgba(10,14,20,.92) !important;
  color: var(--d365-text) !important;
  border-bottom: 1px solid var(--d365-border) !important;
}
.site-header a, .navbar a{ color: var(--d365-text) !important; }
.site-header a:hover, .navbar a:hover{ color: var(--d365-link-hover) !important; }

/* Dropdown menus if present */
nav ul, nav li ul, .dropdown-menu, .menu, .nav-menu{
  background: rgba(10,14,20,.98) !important;
  border-color: var(--d365-border) !important;
}

/* Form controls */
input, textarea, select{
  background: rgba(255,255,255,.04) !important;
  color: var(--d365-text) !important;
  border: 1px solid var(--d365-border) !important;
}

/*
  Native <select> popups are rendered by the browser/OS and can ignore CSS.
  In Chromium/Windows, forcing a DARK color-scheme can yield a light popup with light text.
  Force a LIGHT scheme for the popup so options remain readable (WCAG contrast).
*/
select{ color-scheme: light; }
input::placeholder, textarea::placeholder{
  color: rgba(232,238,247,.55) !important;
}

/* Native <select> dropdown list items (Windows/Chrome often uses a white popup).
  Ensure options remain readable even when the OS menu background is light. */
select option, select optgroup{
  color: #111111 !important;
  background: #ffffff !important;
}

/* Selection */
::selection{
  background: rgba(122,162,255,.35);
  color: var(--d365-text);
}

/* iPhone safe-area helpers (does not override your mobile CSS; only ensures background continuity) */
@supports (padding: max(0px)){
  body{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--d365-bg) !important;
  }
}

/* === Mobile menu (pill buttons) — match 56.zip optics === */
@media (max-width: 820px){
  
  .menu{ width:100% !important; }
  summary.menu-btn{ width:100% !important; justify-content: space-between !important; }
  .menu-panel{
    background: rgba(18,24,38,.95) !important;
    border: 1px solid var(--d365-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
    padding: 14px !important;
  }
  .menusec{
    padding: 12px 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .menutitle{
    flex: 0 0 100% !important;
    margin: 6px 2px !important;
    color: rgba(232,238,247,.72) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }
  .menu-panel .navlink{
    display: inline-flex !important;
    width: auto !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    color: var(--d365-text) !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }
  .menu-panel .navlink:hover,
  .menu-panel .navlink:focus{
    background: rgba(255,255,255,.06) !important;
    text-decoration: none !important;
  }
  .menu-panel .navlink strong{ font-weight: 800 !important; }
}