/* ============================================================
   Edit DB — shared navigation + footer styles
   Stormy Morning palette: #6A89A7 | #BDDDFC | #88BDF2 | #384959
   ============================================================ */

/* ── Stormy Morning CSS Variables (global) ── */
:root {
  --sm-steel:    #6A89A7;   /* steel blue-gray — sidebar borders, muted accents */
  --sm-sky:      #BDDDFC;   /* pale sky blue — backgrounds, highlights */
  --sm-cerulean: #88BDF2;   /* clear cerulean — interactive focus, links */
  --sm-midnight: #384959;   /* deep storm — nav, footer, headings */

  /* Derived tokens */
  --sm-midnight-dk: #2b3a46; /* darker midnight for hover states */
  --sm-steel-lt:    #e8f2fb; /* very pale tint of steel for page bg */
  --sm-sky-dk:      #a8ccf0; /* darker sky for borders */
  --sm-cerulean-dk: #5fa0e0; /* darker cerulean for hover */
  --sm-text:        #1c2b36; /* near-black from midnight family */
  --sm-text-2:      #3d5467; /* secondary text */
  --sm-text-3:      #7090a8; /* muted text */
}

html, body { margin: 0; padding: 0; }

/* ── Skip to content link (visible on focus for keyboard users) ── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--sm-midnight);
  color: #fff;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top 0.1s;
}
.skip-to-content:focus { top: 0; }

/* Site nav sits as the first element in normal flow, sticky to
   the top once the page scrolls — no padding/space above it. */
#site-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.site-nav-bar {
  display: flex;
  align-items: center;
  background: var(--sm-midnight);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(136,189,242,0.18);
  box-shadow: 0 4px 16px rgba(56,73,89,0.22);
  height: 56px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px;
  background: var(--sm-midnight-dk);
  color: var(--sm-sky);
  text-decoration: none;
  font-family: Helvetica, Arial, 'Open Sans', sans-serif;
  font-size: 17px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-right: 1px solid rgba(136,189,242,0.18);
}

.site-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.site-nav-links {
  display: flex;
  list-style: none;
  align-items: center;
  height: 56px;
  margin: 0;
  padding: 0;
}

.site-nav-links li a {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 18px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--sm-sky);
  text-decoration: none;
  border-right: 1px solid rgba(136,189,242,0.10);
  transition: background 0.2s, color 0.2s;
}

.site-nav-links li a:hover { background: rgba(136,189,242,0.12); color: #fff; }
.site-nav-links li a.active { background: rgba(136,189,242,0.18); color: #fff; border-bottom: 2px solid var(--sm-cerulean); }

/* ── Dropdown menus ── */
.has-dropdown { position: relative; display: flex; align-items: stretch; }
.nav-dropdown-toggle {
  display: flex; align-items: center; gap: 5px; height: 56px; padding: 0 18px;
  background: none; border: none; cursor: pointer;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 13.5px; letter-spacing: 0.02em;
  color: var(--sm-sky); border-right: 1px solid rgba(136,189,242,0.10);
  transition: background 0.2s, color 0.2s;
}
.nav-dropdown-toggle .caret { font-size: 9px; opacity: 0.8; }
.nav-dropdown-toggle:hover,
.has-dropdown:hover .nav-dropdown-toggle { background: rgba(136,189,242,0.12); color: #fff; }
.nav-dropdown-toggle.active { background: rgba(136,189,242,0.18); color: #fff; }
.nav-dropdown {
  position: absolute; top: 56px; left: 0; min-width: 210px;
  background: var(--sm-midnight); border: 1px solid rgba(136,189,242,0.18);
  border-top: 2px solid var(--sm-cerulean); box-shadow: 0 12px 30px rgba(0,0,0,0.32);
  list-style: none; margin: 0; padding: 6px 0; display: none; z-index: 1001;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown.open .nav-dropdown { display: block; }
.nav-dropdown li a {
  display: block; height: auto; padding: 10px 18px; font-size: 13px;
  color: var(--sm-sky); text-decoration: none; white-space: nowrap; border: none;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown li a:hover { background: rgba(136,189,242,0.14); color: #fff; }

.site-nav-auth {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-right: 22px;
  height: 56px;
}

.site-nav-auth a, .site-nav-auth span {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--sm-sky);
  text-decoration: none;
}

.site-nav-auth a.btn {
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--sm-cerulean);
  color: var(--sm-midnight);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}
.site-nav-auth a.btn:hover { background: var(--sm-sky); }
.site-nav-auth a.btn.logout { background: #c0392b; color: #fff; }
.site-nav-auth a.btn.logout:hover { background: #d8453a; }
.site-nav-auth .user-greeting { color: var(--sm-cerulean); }

/* ── Hamburger button (hidden on desktop) ── */
.site-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 56px;
  padding: 0 10px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}
.site-nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sm-sky);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 880px) {
  .site-nav-links li a { padding: 0 12px; font-size: 13px; }
  .site-logo { padding: 0 14px; font-size: 15px; }
  .site-logo img { height: 24px; }
}

@media (max-width: 640px) {
  .site-nav-hamburger { display: flex; }
  .site-nav-auth { display: none; }

  .site-nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    height: auto;
    background: var(--sm-midnight);
    border-bottom: 1px solid rgba(136,189,242,0.15);
    z-index: 999;
    padding: 8px 0 12px;
  }
  .site-nav-links.open { display: flex; }
  .site-nav-links li a {
    height: auto;
    padding: 13px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(136,189,242,0.08);
    font-size: 15px;
  }
  .site-nav-links li:last-child a { border-bottom: none; }

  /* Dropdowns collapse inline on mobile */
  .has-dropdown { flex-direction: column; align-items: stretch; }
  .nav-dropdown-toggle {
    height: auto; width: 100%; justify-content: space-between;
    padding: 13px 20px; border-right: none;
    border-bottom: 1px solid rgba(136,189,242,0.08); font-size: 15px;
  }
  .has-dropdown:hover .nav-dropdown { display: none; }
  .has-dropdown.open .nav-dropdown { display: block; }
  .nav-dropdown {
    position: static; top: auto; min-width: 0;
    box-shadow: none; border: none; border-top: none;
    background: rgba(0,0,0,0.22); padding: 0;
  }
  .nav-dropdown li a { padding: 12px 34px; font-size: 14px; border-bottom: 1px solid rgba(136,189,242,0.06); }
}

/* ── FOOTER ── */
#site-footer footer {
  background: var(--sm-midnight);
  color: var(--sm-steel);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 32px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(136,189,242,0.14);
}

#site-footer .footer-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#site-footer a {
  color: var(--sm-cerulean);
  text-decoration: none;
  transition: color 0.2s ease;
}
#site-footer a:hover { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON (in the always-dark nav bar)
   ════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(136,189,242,0.35);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; margin-right: 4px;
  color: var(--sm-sky);
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { border-color: var(--sm-cerulean); background: rgba(136,189,242,0.12); }
@media (max-width: 640px) { .theme-toggle { margin-left: auto; } }

/* ── Theme dropdown (rightmost in the nav) ── */
.theme-menu { position: relative; display: flex; align-items: center; padding: 0 16px; }
.theme-menu-btn {
  background: transparent; border: 1px solid rgba(136,189,242,0.35); border-radius: 999px;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: var(--sm-sky); transition: background 0.15s, border-color 0.15s;
}
.theme-menu-btn:hover { border-color: var(--sm-cerulean); background: rgba(136,189,242,0.12); }
.theme-dropdown {
  position: absolute; right: 12px; top: 48px; min-width: 224px;
  background: var(--sm-midnight); border: 1px solid rgba(136,189,242,0.18);
  border-top: 2px solid var(--sm-cerulean); box-shadow: 0 12px 30px rgba(0,0,0,0.32);
  list-style: none; margin: 0; padding: 6px 0; display: none; z-index: 1002;
}
.theme-menu.open .theme-dropdown { display: block; }
.theme-dropdown li button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  background: none; border: none; cursor: pointer; color: var(--sm-sky);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 13px; text-align: left;
}
.theme-dropdown li button:hover { background: rgba(136,189,242,0.14); color: #fff; }
.theme-dropdown li button.active { background: rgba(136,189,242,0.2); color: #fff; }
.theme-sw { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.25); flex-shrink: 0; }
.theme-sw i { width: 12px; height: 16px; display: block; }

/* ════════════════════════════════════════════════════════════════════
   DARK MODE
   The whole site is driven from a small set of CSS variables, so we flip
   those first. Components that hardcoded light colours get explicit
   overrides below so text never lands on a light panel.
   ════════════════════════════════════════════════════════════════════ */
html.dark {
  color-scheme: dark;
  /* shared (common.css) tokens */
  --sm-steel:#8aa6c2; --sm-sky:#cfe3fb; --sm-cerulean:#88BDF2; --sm-midnight:#0c141d;
  --sm-midnight-dk:#0a1119; --sm-steel-lt:#18222f; --sm-sky-dk:#2a3849; --sm-cerulean-dk:#5fa0e0;
  --sm-text:#e6edf5; --sm-text-2:#c2cedd; --sm-text-3:#9fb0c2;
  /* per-page tokens */
  --bg:#0e1621; --surface:#18222f; --surface-2:#1f2b3a;
  --border:#2a3849; --border-mid:#38485c;
  --text:#e6edf5; --text-2:#c2cedd; --text-3:#9fb0c2; --muted:#93a1b3;
  --accent:#88BDF2; --accent-2:#88BDF2; --accent2:#e74c3c; --accent-hover:#a9cef5;
  --green:#2ecc71; --navy:#0e1621; --blue:#6A89A7; --blue-mid:#88BDF2; --blue-lite:#cfe3fb;
}

/* The nav stays dark in both themes, just a touch deeper in dark mode */
html.dark .site-nav-bar { background: var(--sm-midnight); }

/* Generic: anything painting itself the page background follows the theme */
html.dark body { background: var(--bg) !important; }

/* ── Homepage ── */
html.dark .stat-strip { background: var(--surface); }
html.dark .stat-item  { border-right-color: var(--border); }
html.dark .stat-icon  { background: #223247; }

/* ── RBP search (and shared component class names) ── */
html.dark .rbp-search-box,
html.dark select,
html.dark .filter-select,
html.dark .edit-range input { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html.dark .rbp-chip            { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html.dark .rbp-chip:hover      { background: #243245; border-color: var(--accent); }
html.dark .rbp-info-item p,
html.dark .modal-field p,
html.dark .exp-field p         { color: var(--text); }
html.dark .filter-tag,
html.dark .filter-tag button   { background: #1d2c44; border-color: #2f4368; color: #bcd4ff; }
html.dark .filter-tag button   { background: none; }
html.dark .table-header        { background: var(--surface-2); }
html.dark thead tr             { background: var(--surface-2); }
html.dark th.sortable:hover    { background: #243245; color: var(--accent); }
html.dark th.sort-asc,
html.dark th.sort-desc         { background: #243245; }
html.dark td                   { border-bottom-color: var(--border); }
html.dark tr:hover td          { background: #1d2a3a; }
html.dark .gene-badge          { background: #14301f; border-color: #1f5235; color: #7fe0a0; }
html.dark .edit-bar            { background: #2a3849; }
html.dark .modal               { background: var(--surface); }
html.dark .exp-card            { background: var(--surface-2); border-color: var(--border); }

/* ── Species overview (and general clickable tables) ── */
html.dark th { background: var(--surface-2); }
html.dark tr.clickable:hover { background: #1d2a3a; }
html.dark .rbp-badge { background: #1d2c44; color: #bcd4ff; }
html.dark .method-tag { background: #3a2a1d; color: #f0c39a; }
html.dark .method-tab { background: var(--surface); border-color: var(--border); color: var(--muted); }
html.dark .method-tab:hover { color: var(--accent); border-color: var(--accent); }
html.dark .species-header,
html.dark .stat-card { background: var(--surface); border-color: var(--border); }
html.dark .species-header h1 { color: var(--accent); }

/* ── Gene search ── */
html.dark .filter-bar { background: var(--surface-2); }
html.dark .filter-bar select,
html.dark .filter-bar button { background: var(--surface); color: var(--text); border-color: var(--border); }
html.dark .results-meta h3 { color: var(--text); }
html.dark .results-meta .badge { background: var(--surface-2); color: var(--text-2); }
html.dark .rbp-detail-title { color: var(--text); }
html.dark .exp-badge { background: #1d3a52; color: #bcd9f7; }
html.dark tbody tr:hover { background: #1d2a3a; }
html.dark .back-link { color: var(--accent); }

/* ── RBP search placeholder blocks + export ── */
html.dark .tbu-badge { background: #3a2f1a; border-color: #5a4a25; color: #f0c877; }
html.dark .extra-body { border-color: var(--border); }
html.dark .export-formats button:hover { background: #243245; }
html.dark .export-scope button { background: var(--surface-2); }

/* ── Forum / discussion ── */
html.dark .discussion-item { background: var(--surface); border-color: var(--border); }

/* ════════════════════════════════════════════════════════════════════
   COLOUR THEMES (palettes from colorhunt.co) — applied via data-theme.
   Light palettes only recolour variables; dark palettes also get the
   .dark class (added in common.js) for the component overrides.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="latte"] {
  --sm-midnight:#6b4f3a; --sm-midnight-dk:#573f2e; --sm-sky:#fffbe9; --sm-cerulean:#ad8b73; --sm-steel:#ceab93;
  --bg:#fffbe9; --surface:#ffffff; --surface-2:#f6eddb; --border:#e9dcc4; --border-mid:#d8c3a3;
  --text:#3b2c1e; --text-2:#5c4633; --text-3:#8a7358; --muted:#8a7358;
  --accent:#9a744f; --accent-2:#ad8b73; --accent2:#c0714a; --accent-hover:#7e5c3d; --green:#2FA084;
  --navy:#6b4f3a; --blue:#9a744f; --blue-mid:#ceab93; --blue-lite:#fffbe9;
}
html[data-theme="tangerine"] {
  --sm-midnight:#215e61; --sm-midnight-dk:#184749; --sm-sky:#fff1dc; --sm-cerulean:#ff9e20; --sm-steel:#4f7f81;
  --bg:#f4f2f2; --surface:#ffffff; --surface-2:#eae7e7; --border:#dcd8d8; --border-mid:#c2bdbd;
  --text:#1d2128; --text-2:#3a4048; --text-3:#6e747c; --muted:#6e747c;
  --accent:#215e61; --accent-2:#ff9e20; --accent2:#ff9e20; --accent-hover:#184749; --green:#2FA084;
  --navy:#1d2128; --blue:#215e61; --blue-mid:#ff9e20; --blue-lite:#fff1dc;
}
html[data-theme="crimson"] {
  --sm-midnight:#161616; --sm-midnight-dk:#000000; --sm-sky:#eeeeee; --sm-cerulean:#CB2957; --sm-steel:#555555;
  --bg:#eeeeee; --surface:#ffffff; --surface-2:#dddddd; --border:#cfcfcf; --border-mid:#bcbcbc;
  --text:#141414; --text-2:#3a3a3a; --text-3:#6d6d6d; --muted:#6d6d6d;
  --accent:#CB2957; --accent-2:#CB2957; --accent2:#CB2957; --accent-hover:#a81f47; --green:#2FA084;
  --navy:#161616; --blue:#CB2957; --blue-mid:#CB2957; --blue-lite:#dddddd;
}
html[data-theme="mint"] {
  --sm-midnight:#1F6F5F; --sm-midnight-dk:#155447; --sm-sky:#eafaf3; --sm-cerulean:#2FA084; --sm-steel:#2FA084;
  --bg:#eef3f1; --surface:#ffffff; --surface-2:#e2efe9; --border:#cfe3da; --border-mid:#a9d3c3;
  --text:#123f35; --text-2:#1F6F5F; --text-3:#5a8578; --muted:#5a8578;
  --accent:#1F6F5F; --accent-2:#2FA084; --accent2:#E05454; --accent-hover:#155447; --green:#2FA084;
  --navy:#1F6F5F; --blue:#2FA084; --blue-mid:#6FCF97; --blue-lite:#eafaf3;
}

.site-logo .logo-db { color: #ff9e20; font-weight: inherit; }