/* ════════════════════════════════════════════════════════════════════════════
   site-theme.css
   Drop-in theme additions for the Molecular Biology Toolbox.
   Place in: /assets/css/site-theme.css
   Load AFTER bootstrap.min.css, site.css and soft.css.
   ════════════════════════════════════════════════════════════════════════════ */


/* ───── 1. PALETTE ─────────────────────────────────────────────────────────
   One academic-blue accent. Replaces the muddy bg-secondary hero and ties
   navbar / hero / btn-primary / focus rings / links into one system.        */
:root {
  --bs-primary:               #1d4e7a;
  --bs-primary-rgb:           29, 78, 122;
  --bs-primary-text-emphasis: #143654;
  --bs-primary-bg-subtle:     #e6eef5;
  --bs-primary-border-subtle: #bcd0e1;

  --bs-link-color:            #1d4e7a;
  --bs-link-color-rgb:        29, 78, 122;
  --bs-link-hover-color:      #143654;
  --bs-link-hover-color-rgb:  20, 54, 84;
}

.btn-primary {
  --bs-btn-bg:                 #1d4e7a;
  --bs-btn-border-color:       #1d4e7a;
  --bs-btn-hover-bg:           #163e62;
  --bs-btn-hover-border-color: #143654;
  --bs-btn-active-bg:          #122e4a;
  --bs-btn-active-border-color:#122e4a;
  --bs-btn-disabled-bg:        #4a6f8e;
  --bs-btn-disabled-border-color:#4a6f8e;
}


/* ───── 2. NAVBAR ──────────────────────────────────────────────────────────  */
.navbar.bg-dark { background-color: #0f2030 !important; }
.navbar-brand   { letter-spacing: 0.01em; }


/* ───── 3. HERO ────────────────────────────────────────────────────────────
   Apply by adding class `page-hero` to the <header>.                        */
.page-hero {
  background: linear-gradient(180deg, #1d4e7a 0%, #18406a 100%);
  color: #fff;
  border-bottom: 2px solid #0e2c47;
}
.page-hero h1, .page-hero .h3 { color: #fff; }
.page-hero .lead-sub          { color: rgba(255, 255, 255, 0.78); }
.page-hero a                  { color: #fff; }
.page-hero .alert-link        { color: #fff; text-decoration: underline; }
.page-hero .btn-outline-light { border-color: rgba(255, 255, 255, 0.55); }
.page-hero .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}


/* ───── 4. SECTION CARDS ───────────────────────────────────────────────────  */
.section-card {
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid var(--bs-primary-border-subtle);
  border-radius: 0.5rem;
}
.section-card > .card-header {
  background-color: #fbfcfd;
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
  padding: 0.5rem 1rem;
}
.section-card > .card-header i { color: var(--bs-primary); }
.section-card.accent { border-left-color: var(--bs-primary); }


/* ───── 5. TABS + TEXTAREA SURFACE ────────────────────────────────────────  */
.tab-surface {
  border: 1px solid var(--bs-border-color);
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: #fff;
}
.tab-surface .tab-pane > textarea {
  border: 1;
  outline: 0;
  width: 100%;
  height: 320px;
  padding: 0.75rem 1rem;
  resize: vertical;
  font-family: var(--bs-font-monospace);
  font-size: 0.7rem;
  background: transparent;
  display: block;
}
.tab-surface .tab-pane > textarea:focus {
  box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.4);
}
.tab-surface .tab-pane.is-report > textarea {
  white-space: pre;
  overflow: auto;
}


/* ───── 6. ACTION BAR (sticky) ─────────────────────────────────────────────  */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #f8f9fa;
  border: 1px solid var(--bs-border-color);
  border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}


/* ───── 7. UTILITY WIDTHS ──────────────────────────────────────────────────  */
.w-num      { width: 100px; }
.w-input-sm { width: 120px; }
.w-species  { width: 160px; }
.w-input-md { width: 280px; }


/* ───── 8. SECTION SUBTITLE ────────────────────────────────────────────────  */
.section-subtitle {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}


/* ───── 9. FOOTER ──────────────────────────────────────────────────────────  */
footer.site-footer {
  background-color: #fff;
  border-top: 1px solid var(--bs-border-color);
}


/* ───── 10. FOCUS RING ─────────────────────────────────────────────────────  */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}


/* ───── 11. CODE / KBD POLISH ──────────────────────────────────────────────  */
code {
  background-color: rgba(var(--bs-primary-rgb), 0.06);
  color: var(--bs-primary-text-emphasis);
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
kbd {
  background-color: #2a3340;
  border-radius: 0.25rem;
  font-size: 0.8em;
}


/* ───── 12. INDEX / LANDING TOOL CARD ──────────────────────────────────────  */
.tool-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 6px 16px rgba(15, 32, 48, 0.08) !important;
}
.icon-plate {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  border-radius: 0.5rem;
  flex-shrink: 0;
}
.icon-plate i { font-size: 1.4rem; line-height: 1; }

/* Semantic colour variants — colour conveys what TYPE of operation the tool performs, not its grid section. Hues chosen to be muted/academic. */
.icon-plate.design   { background-color: #e6eef5; color: #1d4e7a; } /* blue   — primer/assay design          */
.icon-plate.detect   { background-color: #d9eceb; color: #0d5d56; } /* teal   — genotyping / discrimination */
.icon-plate.virtual  { background-color: #e8e2f0; color: #4a338a; } /* violet — in silico computation        */
.icon-plate.analyze  { background-color: #f4e8d0; color: #7a4d10; } /* amber  — oligo property analysis      */
.icon-plate.genome   { background-color: #dde7d6; color: #365d34; } /* green  — genome / sequence scale      */
.icon-plate.compute  { background-color: #f2dde0; color: #84334a; } /* rose   — lab math / calculators       */


/* ───── 13. WORKFLOW STEP BADGES (genotyping landing) ──────────────────────  */
.step-num {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bs-primary);
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE — driven by Bootstrap's native [data-bs-theme="dark"] attribute.
   The navbar toggle (assets/js/theme.js) sets this attribute on <html>;
   on first visit it is seeded from the OS prefers-color-scheme setting.
   ════════════════════════════════════════════════════════════════════════════ */
/* ----- 14.1  Core Bootstrap theme tokens (navy-tinted dark surface) ----- */
  [data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-bg:            #131c27;
    --bs-body-bg-rgb:        19, 28, 39;
    --bs-body-color:         #d7dee7;
    --bs-body-color-rgb:     215, 222, 231;

    --bs-emphasis-color:     #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-bg:       #1b2733;
    --bs-secondary-bg-rgb:   27, 39, 51;
    --bs-secondary-color:    rgba(215, 222, 231, 0.72);
    --bs-secondary-color-rgb:215, 222, 231;

    --bs-tertiary-bg:        #223040;
    --bs-tertiary-bg-rgb:    34, 48, 64;
    --bs-tertiary-color:     rgba(215, 222, 231, 0.5);
    --bs-tertiary-color-rgb: 215, 222, 231;

    --bs-border-color:             #2f3e4f;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.13);

    /* Academic-blue accent, lifted for contrast on the dark surface */
    --bs-primary:               #2f7bbf;
    --bs-primary-rgb:           47, 123, 191;
    --bs-primary-text-emphasis: #8fc0ec;
    --bs-primary-bg-subtle:     #0e2438;
    --bs-primary-border-subtle: #234b6e;

    --bs-link-color:            #7fb4e6;
    --bs-link-color-rgb:        127, 180, 230;
    --bs-link-hover-color:      #a3c9ef;
    --bs-link-hover-color-rgb:  163, 201, 239;

    /* Emphasis text + subtle backgrounds/borders (Bootstrap dark tuning) */
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis:   #75b798;
    --bs-info-text-emphasis:      #6edff6;
    --bs-warning-text-emphasis:   #ffda6a;
    --bs-danger-text-emphasis:    #ea868f;
    --bs-light-text-emphasis:     #f8f9fa;
    --bs-dark-text-emphasis:      #dee2e6;

    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle:   #051b11;
    --bs-info-bg-subtle:      #032830;
    --bs-warning-bg-subtle:   #332701;
    --bs-danger-bg-subtle:    #2c0b0e;
    --bs-light-bg-subtle:     #1b2733;
    --bs-dark-bg-subtle:      #0f1620;

    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle:   #0f5132;
    --bs-info-border-subtle:      #055160;
    --bs-warning-border-subtle:   #664d03;
    --bs-danger-border-subtle:    #842029;
    --bs-light-border-subtle:     #495057;
    --bs-dark-border-subtle:      #343a40;

    --bs-code-color:   #e685b5;
    --bs-highlight-bg: #664d03;

    --bs-form-valid-color:          #75b798;
    --bs-form-valid-border-color:   #75b798;
    --bs-form-invalid-color:        #ea868f;
    --bs-form-invalid-border-color: #ea868f;
  }

  /* ----- 14.2  Buttons --------------------------------------------------- */
  [data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg:                  #2f7bbf;
    --bs-btn-border-color:        #2f7bbf;
    --bs-btn-hover-bg:            #3a8acf;
    --bs-btn-hover-border-color:  #3a8acf;
    --bs-btn-active-bg:           #266aa6;
    --bs-btn-active-border-color: #266aa6;
    --bs-btn-disabled-bg:         #2a4d68;
    --bs-btn-disabled-border-color:#2a4d68;
  }

  /* .btn-dark / .btn-outline-dark are fixed near-black variants that
     Bootstrap does NOT flip for dark mode — invert them to a light button
     so they stay visible on a dark background.                             */
  [data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg:                  #e6edf3;
    --bs-btn-border-color:        #e6edf3;
    --bs-btn-color:               #131c27;
    --bs-btn-hover-bg:            #f3f6f9;
    --bs-btn-hover-border-color:  #f3f6f9;
    --bs-btn-hover-color:         #131c27;
    --bs-btn-active-bg:           #cdd7e0;
    --bs-btn-active-border-color: #cdd7e0;
    --bs-btn-active-color:        #131c27;
  }
  [data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color:               #cdd7e0;
    --bs-btn-border-color:        #5a6b7d;
    --bs-btn-hover-bg:            #e6edf3;
    --bs-btn-hover-border-color:  #e6edf3;
    --bs-btn-hover-color:         #131c27;
    --bs-btn-active-bg:           #e6edf3;
    --bs-btn-active-border-color: #e6edf3;
    --bs-btn-active-color:        #131c27;
  }

  /* ----- 14.3  Neutralise hard-coded light backgrounds in the markup ---- */
  [data-bs-theme="dark"] .bg-white { background-color: var(--bs-secondary-bg) !important; }
  [data-bs-theme="dark"] .bg-light { background-color: var(--bs-body-bg)      !important; }

  /* ----- 14.4  Component patches kept explicit (Bootstrap themes most of
                 these itself under [data-bs-theme=dark]; these refine them) --- */
  [data-bs-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }
  [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

  [data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg:               #1b2733;
    --bs-dropdown-border-color:     var(--bs-border-color);
    --bs-dropdown-link-color:       var(--bs-body-color);
    --bs-dropdown-link-hover-bg:    #223040;
    --bs-dropdown-link-hover-color: #ffffff;
  }

  /* ----- 14.5  Site custom classes -------------------------------------- */
  [data-bs-theme="dark"] .navbar.bg-dark { background-color: #0d1b29 !important; }

  [data-bs-theme="dark"] .page-hero {
    background: linear-gradient(180deg, #163a5c 0%, #0f2c47 100%);
    border-bottom-color: #0a2138;
  }

  [data-bs-theme="dark"] .section-card { background-color: var(--bs-secondary-bg); }
  [data-bs-theme="dark"] .section-card > .card-header { background-color: #223040; }

  [data-bs-theme="dark"] .tab-surface { background-color: var(--bs-secondary-bg); }
  [data-bs-theme="dark"] .tab-surface .tab-pane > textarea { color: var(--bs-body-color); }

  [data-bs-theme="dark"] .action-bar { background-color: #172230; }

  /* nav-tabs: keep the active tab visually fused with the tab surface */
  [data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-link-active-bg:           var(--bs-secondary-bg);
    --bs-nav-tabs-link-active-color:        var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-secondary-bg);
  }
  [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--bs-secondary-color); }
  [data-bs-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--bs-border-color); }
  [data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--bs-emphasis-color); }

  [data-bs-theme="dark"] footer.site-footer { background-color: #0f1822; }

  [data-bs-theme="dark"] kbd { background-color: #0b1622; }

  /* Icon plates — muted translucent fills with lifted icon colours */
  [data-bs-theme="dark"] .icon-plate.design { background-color: rgba(127, 180, 230, 0.14); color: #8fc0ec; }
  [data-bs-theme="dark"] .icon-plate.detect { background-color: rgba(45, 208, 194, 0.14);  color: #5bd3c2; }
  [data-bs-theme="dark"] .icon-plate.virtual { background-color: rgba(160, 140, 220, 0.16); color: #b6a4e6; }
  [data-bs-theme="dark"] .icon-plate.analyze { background-color: rgba(220, 170, 80, 0.15);  color: #e3b774; }
  [data-bs-theme="dark"] .icon-plate.genome { background-color: rgba(120, 180, 110, 0.15); color: #8fc98a; }
  [data-bs-theme="dark"] .icon-plate.compute { background-color: rgba(220, 120, 150, 0.15); color: #e493ad; }

  /* ----- 14.6  Table variants that don't follow the theme --------------- */
  /* .table-light is a fixed light variant; recolour it for dark surfaces.  */
  [data-bs-theme="dark"] .table-light {
    --bs-table-color:        var(--bs-emphasis-color);
    --bs-table-bg:           #223040;
    --bs-table-border-color: var(--bs-border-color);
    color:                   var(--bs-emphasis-color);
    border-color:            var(--bs-border-color);
  }