/* ──────────────────────────────────────────────────────────────────────────
   STYLE SHEET  ·  ACP-EPC / iBitter-GRE
   ────────────────────────────────────────────────────────────────────────── */

/* === THEME VARIABLES ==================================================== */
:root {
  /* accent colours (light‐mode only) */
  --accent-light: #5ECAF0;
  --accent-dark:  #121212;

  /* backgrounds & text */
  --bg-light:  #f9f9f9;
  --bg-dark:   #121212;
  --main-dark: #0d0d0d;          /* page content in dark-mode */
  --text-light:#333;
  --text-dark: #e4e4e4;

  /* card / form */
  --card-light:#ffffff;
  --card-dark: #1e1e1e;

  /* neutral greys for dark-mode UI elements */
  --grey-1: #2a2a2a;   /* darkest track / borders */
  --grey-2: #555;      /* fills / foreground */
  --grey-3: #333;      /* table stripes */
}

/* === BASE =============================================================== */
*{transition:background-color .3s,color .3s,border-color .3s}

html {
  height: 100%;
}

body{
  font-family:"Merriweather",serif;
  background:var(--bg-light);
  color:var(--text-light);
  margin:0;padding:0;

  /* --- Sticky Footer Solution --- */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
body.dark-mode{
  background:var(--bg-dark);
  color:var(--text-dark);
}

/* === NAVBAR ============================================================= */
.navbar{background:var(--accent-light)!important}
body.dark-mode .navbar{background:#000!important}   /* pure black bar */
.navbar-brand,.navbar-nav .nav-link{color:#fff!important}
.navbar-brand:hover,.navbar-nav .nav-link:hover{color:#f0f0f0!important}

/* === MAIN CONTAINER ===================================================== */
main.container{
  background:var(--card-light);
  flex-grow: 1; /* Make the main content grow to fill available space */
}
body.dark-mode main.container{background:var(--main-dark)}

/* === CARDS & FORMS ====================================================== */
.card,.p-4.border.rounded.shadow-sm{
  background:var(--card-light);
  border-radius:.5rem;
  border:1px solid rgba(0,0,0,.05)
}
body.dark-mode .card,
body.dark-mode .p-4.border.rounded.shadow-sm{
  background:var(--card-dark);
  border-color:var(--grey-1)
}

.form-control{
  background:var(--card-light);
  color:var(--text-light);
  border:1px solid #ccc;
  border-radius:.3rem
}
body.dark-mode .form-control{
  background:var(--grey-1);
  color:var(--text-dark);
  border-color:var(--grey-2)
}
::placeholder{opacity:.6}
body.dark-mode ::placeholder{color:#a8a8a8}

/* file-input button */
input[type="file"]::-webkit-file-upload-button{
  background:inherit;color:inherit;border:none
}

/* === BUTTONS ============================================================ */
.btn-primary{
  background:var(--accent-light);border-color:var(--accent-light);color:#fff
}
body.dark-mode .btn-primary{
  background:var(--grey-2);border-color:var(--grey-2)
}

/* neutral outline for download buttons */
.btn-outline-accent{
  border:2px solid var(--accent-light);color:var(--accent-light);background:0 0
}
.btn-outline-accent:hover{background:var(--accent-light);color:#fff}
body.dark-mode .btn-outline-accent{
  border-color:var(--grey-2);color:var(--text-dark)
}
body.dark-mode .btn-outline-accent:hover{
  background:var(--grey-2);color:#fff
}

/* call-to-action on Home page */
.cta-dark{
  background:var(--grey-2)!important;border:none;color:#fff!important
}

/* === TABLES ============================================================= */
.table-accent{
  border-collapse: separate;
  border-spacing: 0;
  width:100%;
  border: 1px solid rgba(94, 202, 240, 0.2);
  border-radius: 0.5rem;
  overflow: hidden;
}
.table-accent thead th{
  background:var(--accent-light);
  color:#fff;
  border: none;
}
.table-accent tbody tr:nth-of-type(even){
  background:rgba(94, 202, 240, 0.07);
}
.table-accent tbody tr:hover{
  background:rgba(94, 202, 240, 0.15);
}
.table-accent th, .table-accent td{
  border-top: 1px solid rgba(94, 202, 240, 0.2);
  padding:.75rem;
  vertical-align:middle;
}

/* dark-mode neutralisation */
body.dark-mode .table-accent{
  border-color: var(--grey-1);
}
body.dark-mode .table-accent thead th{
  background:var(--grey-2);
  border-color:var(--grey-2);
}
body.dark-mode .table-accent tbody tr:nth-of-type(even){
  background:var(--grey-3);
}
body.dark-mode .table-accent tbody tr:hover{
  background:var(--grey-2);
}
body.dark-mode .table-accent th,
body.dark-mode .table-accent td {
  border-top-color: var(--grey-1);
}

/* === PROGRESS BAR ======================================================= */
.progress{background:#e9ecef;border-radius:.25rem;overflow:hidden}
.progress-bar{
  background:var(--accent-light) !important;
}
body.dark-mode .progress{background:var(--grey-1)}
body.dark-mode .progress-bar{
  background:var(--grey-2) !important;
}

#progress-count{color:#555;font-size:.9rem;text-align:center}
body.dark-mode #progress-count{color:var(--text-dark)}

/* === FOOTER ============================================================= */
.footer{
  background:var(--accent-light);color:#fff;text-align:center;padding:1rem 0;
  flex-shrink: 0; /* Prevent the footer from shrinking */
}
body.dark-mode .footer{background:#000;color:#fff}

/* === SPACING UTILITIES ================================================== */
.mt-5{margin-top:3rem!important}
.mb-5{margin-bottom:3rem!important}

/* === DARK MODE ENHANCEMENTS ============================================= */
body.dark-mode .card {
  color: var(--text-dark);
}
body.dark-mode .card-title {
  color: #f0f0f0;
}
body.dark-mode .text-muted {
  color: #b0b0b0 !important;
}
body.dark-mode .table-dark {
  background-color: var(--grey-2);
  color: var(--text-dark);
}
body.dark-mode .navbar-nav .nav-link:hover {
  color: var(--accent-light) !important;
}

/* === RESULT PAGE ENHANCEMENTS ========================================== */
.sequence-box {
  background-color: rgba(94, 202, 240, 0.1);
}
body.dark-mode .sequence-box {
  background-color: var(--grey-1);
  border: 1px solid var(--grey-3);
}
body.dark-mode .copy-btn {
  background-color: var(--grey-2);
  border-color: var(--grey-3);
  color: var(--text-dark);
}
body.dark-mode .copy-btn:hover {
  background-color: var(--grey-3);
}
body.dark-mode .list-group-item {
  background-color: transparent;
  color: var(--text-dark);
}

/* === THEME COLOR ACCENTS & DARK MODE FIXES === */

/* Color for section headers/icons */
.section-card h2,
.summary-card h2 {
    color: var(--accent-light);
}
.section-card h2 i {
    color: inherit;
}
body.dark-mode .section-card h2,
body.dark-mode .summary-card h2 {
    color: var(--accent-light);
}

/* Fix for tab and table text in dark mode */
body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-item.show .nav-link {
    background-color: var(--card-dark);
    border-color: var(--grey-2);
    color: var(--text-dark) !important; /* This forces the text color */
}
body.dark-mode .nav-tabs .nav-link {
    color: var(--accent-light);
    opacity: 0.7;
}
body.dark-mode .nav-tabs .nav-link:hover {
    opacity: 1.0;
}
body.dark-mode .table {
    --bs-table-color: var(--text-dark);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--grey-1);
    --bs-table-hover-bg: var(--grey-2);
    border-color: var(--grey-1);
}