/*
 * ValGenetics visual layer — transcriptomics_app
 * Added 2026-10-29.
 *
 * This file only restyles existing elements (fonts, colors, spacing); it
 * does not add, remove or rename any Shiny input/output. To revert the
 * whole redesign, delete the <link> tag that loads this file in app.R
 * (and the three Google Fonts <link> tags next to it) — nothing else
 * needs to change.
 */

:root {
  /* Font stacks, each with a full fallback chain so the platform stays
     legible even if the Google Fonts links above fail to load. */
  --vg-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --vg-display: Archivo, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vg-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ValGenetics corporate colors, taken from the corporate SVG mark
     (valgen_def_alargado_EDITED.svg): #485450 (dark) and #a9c47f (leaf).
     The old header green (#869d46) is not part of the corporate identity
     and is replaced everywhere below. */
  --vg-dark: #485450;
  --vg-dark-700: #3b4642;
  --vg-dark-900: #2f3734;
  --vg-leaf: #a9c47f;
  --vg-leaf-600: #7d9a55;
  --vg-leaf-100: #e9f0dd;
  --vg-paper: #f5f2ea;
  --vg-card: #fffefb;
  --vg-line: #e0dace;
  --vg-line-soft: #ece7db;
  --vg-ink: #27302c;
  --vg-ink-muted: #5d6a64;
  --vg-danger: #a4473c;
  --vg-r: 3px;
}

/* ---- Base typography ---- */

body, .content-wrapper, .wrapper {
  font-family: var(--vg-ui);
  color: var(--vg-ink);
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Header / navbar ---- */
/* The existing inline tags$style block in app.R (dashboardBody's tags$head)
   already sets .skin-blue .main-header .navbar/.logo background to
   #869d46; these rules come after it in the cascade (loaded via <link>
   right after that block) and override it with the corporate colors, so
   no !important is needed here. */

.skin-blue .main-header .logo {
  background-color: var(--vg-dark-700);
  height: 56px;
  /* line-height used to be 56px (equal to height) as a vertical-centering
     trick for single-line inline text; now that there are two stacked
     lines (title + "ValGenetics" subtitle below, via ::after) vertical
     centering is done with flexbox instead, and line-height is kept tight
     for the two lines themselves. See report. */
  line-height: 1.15;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* Corporate mark as a background image, left-aligned; see B in the
     task spec. If the logo width/left padding is retouched later, keep
     padding-left comfortably larger than the image's rendered width
     (about 9-10px at 30px height) plus the left offset below, so the
     "RNA-seq server" text never overlaps the mark. */
  background-image: url("vg-mark-light.svg");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: auto 38px;
  padding-left: 38px;
}
.skin-blue .main-header .logo .logo-lg,
.skin-blue .main-header .logo .logo-mini {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  display: block;
}
.skin-blue .main-header .logo::after {
  content: "ValGenetics";
  font-family: var(--vg-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--vg-leaf);
  line-height: 1.2;
  margin-top: 5px;
}

.skin-blue .main-header .logo:hover {
  background-color: var(--vg-dark-700); /* same fill, no hover change */
}

.skin-blue .main-header .navbar {
  background-color: var(--vg-dark);
  height: 56px;
}

.main-header .logo {
  font-family: var(--vg-display);
  font-weight: 600;
}

/* ---- Sidebar ---- */

.skin-blue .main-sidebar, .sidebar {
  background-color: var(--vg-dark-700);
  color: #d4dbd6;
  line-height: 1.6;
  font-size: 13.5px;
}

/* ---- Content area ---- */

.content-wrapper, .right-side {
  background-color: var(--vg-paper);
}

/* --- Pestañas de primer nivel ---------------------------------------
   El borde se declara identico en todos los estados (border: 0 seguido de
   border-bottom: 3px) para que la altura de la caja no cambie entre activa
   e inactiva: esa diferencia es la que hacia bailar la linea inferior.
   -------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--vg-line);
}
.nav-tabs > li {
  margin-bottom: -1px;
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  margin-right: 0;
  padding: 13px 16px 11px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--vg-ink-muted);
}
.nav-tabs > li > a:hover {
  color: var(--vg-dark);
  border-bottom-color: var(--vg-line);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--vg-dark);
  border-bottom-color: var(--vg-leaf);
}

/* --- Pestañas de segundo nivel (anidadas) ---------------------------
   tabsetPanel anida un .nav-tabs dentro del .tab-content del tabsetPanel
   padre, asi que .tab-content .nav-tabs alcanza solo al nivel interior.
   Se dibujan como pildoras para que los dos niveles no compitan: hoy los
   diez sub-apartados de "Results visualization" se leen como un bloque
   indistinguible de las cinco pestañas principales.
   -------------------------------------------------------------------- */
.tab-content .nav-tabs {
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.tab-content .nav-tabs > li {
  margin-bottom: 0;
  float: none;
}
.tab-content .nav-tabs > li > a,
.tab-content .nav-tabs > li > a:hover,
.tab-content .nav-tabs > li > a:focus,
.tab-content .nav-tabs > li.active > a,
.tab-content .nav-tabs > li.active > a:hover,
.tab-content .nav-tabs > li.active > a:focus {
  border: 1px solid var(--vg-line);
  border-radius: 999px;
  background: var(--vg-card);
  color: var(--vg-ink-muted);
  padding: 5px 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.tab-content .nav-tabs > li > a:hover {
  background: var(--vg-leaf-100);
  border-color: var(--vg-leaf-100);
  color: var(--vg-dark);
}
.tab-content .nav-tabs > li.active > a,
.tab-content .nav-tabs > li.active > a:hover,
.tab-content .nav-tabs > li.active > a:focus {
  background: var(--vg-dark);
  border-color: var(--vg-dark);
  color: #fff;
}

/* ---- Buttons ---- */

.btn-default {
  border: 1px solid var(--vg-dark);
  background-color: transparent;
  color: var(--vg-dark);
  font-weight: 600;
}

.btn-default:hover, .btn-default:focus {
  background-color: var(--vg-leaf-100);
}

.btn-primary {
  background-color: var(--vg-dark);
  border-color: var(--vg-dark);
  color: #ffffff;
}

.btn-danger {
  background-color: var(--vg-danger);
  border-color: var(--vg-danger);
}

/* fileInput's "Browse..." button + its readonly text field, as one input-group */
.input-group .btn-file,
.input-group-btn .btn-file {
  background: var(--vg-leaf-100);
  border: 1px solid var(--vg-line);
  border-right: 0;
  border-radius: var(--vg-r) 0 0 var(--vg-r);
  color: var(--vg-dark);
  font-weight: 600;
}
.input-group .btn-file:hover,
.input-group .btn-file:focus,
.input-group-btn .btn-file:hover,
.input-group-btn .btn-file:focus {
  background: var(--vg-leaf);
  border-color: var(--vg-line);
  color: var(--vg-dark);
}
.input-group .form-control[readonly] {
  background: var(--vg-card);
  border: 1px solid var(--vg-line);
  border-radius: 0 var(--vg-r) var(--vg-r) 0;
  color: var(--vg-ink-muted);
  box-shadow: none;
}

.progress-bar {
  background-color: var(--vg-leaf-600);
}

/* ---- Form controls ---- */

.form-control, .selectize-input {
  background-color: var(--vg-card);
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r);
}

.form-control:focus, .selectize-input.focus {
  border-color: var(--vg-leaf-600);
  box-shadow: 0 0 0 3px var(--vg-leaf-100);
}

.shiny-input-container > label,
.control-label {
  font-family: var(--vg-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vg-ink-muted);
}

/* ---- DataTables ---- */

table.dataTable thead th {
  background-color: var(--vg-leaf-100);
  color: var(--vg-dark);
  font-family: var(--vg-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

table.dataTable tbody td {
  border-bottom: 1px solid var(--vg-line-soft);
}

table.dataTable tbody tr:nth-child(even) {
  background-color: #faf8f2;
}

.dataTables_wrapper {
  font-variant-numeric: tabular-nums;
}

/* Horizontal scrollbar always visible on scrollable DataTables (Firefox) */
.dataTables_scrollBody,
.dataTables_wrapper .dataTables_scroll {
  scrollbar-width: thin;
  scrollbar-color: #c3bba8 #f1ede3;
}

/* Same, WebKit/Chromium/Edge */
.dataTables_scrollBody::-webkit-scrollbar,
.dataTables_wrapper .dataTables_scroll::-webkit-scrollbar {
  height: 10px;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb,
.dataTables_wrapper .dataTables_scroll::-webkit-scrollbar-thumb {
  background-color: #c3bba8;
  border-radius: 6px;
}

.dataTables_scrollBody::-webkit-scrollbar-track,
.dataTables_wrapper .dataTables_scroll::-webkit-scrollbar-track {
  background-color: #f1ede3;
}

/* ---- DEGs tables (Up_table / Down_table) monospacing ---- */
/* Scoped to these two output containers only, never to table.dataTable in
   general: the app has other DataTables (KEGG tables, the Venn
   intersection table, the fastqc stats table) with unrelated column
   layouts that must not be touched.
 *
 * GeneID is always column 1 (format_DEGs_table() always cbind()s it
 * first), so nth-child(1) is safe.
 *
 * gene_name / ath_ortholog / ncbi_id are NOT at a fixed position: they
 * are only added when gene_names.txt exists for the species, and each
 * one individually disappears when every value would be "-" (e.g.
 * ath_ortholog for Arabidopsis_thaliana) — see format_DEGs_table()'s
 * omit-logic in app.R. Depending on species that is 0, 1, 2 or 3 columns
 * between GeneID and log2FoldChange, so no nth-child rule can target
 * them with certainty; they are deliberately left out of this
 * monospacing (see report).
 *
 * log2FoldChange, FDR, baseMean, lfcSE, stat and pvalue, by contrast, are
 * always present (they come straight from res_df, which always has
 * these 7 base columns) and always appear in this same relative order at
 * the END of DEGs_column_order. That makes them reachable with certainty
 * from the right edge of the row via nth-last-child, regardless of how
 * many optional columns precede them. functional_anno (nth-last-child(5))
 * is free text, not a numeric column, so it is excluded from both the
 * monospacing and the right-alignment below.
 */

#Up_table table.dataTable tbody td:nth-child(1),
#Down_table table.dataTable tbody td:nth-child(1) {
  font-family: var(--vg-mono);
}

#Up_table table.dataTable tbody td:nth-last-child(7),
#Up_table table.dataTable tbody td:nth-last-child(6),
#Up_table table.dataTable tbody td:nth-last-child(4),
#Up_table table.dataTable tbody td:nth-last-child(3),
#Up_table table.dataTable tbody td:nth-last-child(2),
#Up_table table.dataTable tbody td:nth-last-child(1),
#Down_table table.dataTable tbody td:nth-last-child(7),
#Down_table table.dataTable tbody td:nth-last-child(6),
#Down_table table.dataTable tbody td:nth-last-child(4),
#Down_table table.dataTable tbody td:nth-last-child(3),
#Down_table table.dataTable tbody td:nth-last-child(2),
#Down_table table.dataTable tbody td:nth-last-child(1) {
  font-family: var(--vg-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Pantalla de login (shinyauthr) ---------------------------------
   shinyauthr::loginUI("login", ...) genera div#login-panel con un style en
   linea (width:500px) y, dentro, un div.well. El !important del ancho es
   imprescindible: no hay forma de ganarle a un style en linea sin el.
   El resto de reglas NO lleva !important a proposito.
   --------------------------------------------------------------------- */
#login-panel {
  width: 420px !important;
  max-width: 100% !important;
  margin: 48px auto 0 !important;
  padding: 0 16px !important;
}
#login-panel .well {
  background: var(--vg-card);
  border: 1px solid var(--vg-line);
  border-top: 3px solid var(--vg-leaf);
  border-radius: 8px;
  padding: 32px 30px 26px;
  box-shadow: 0 1px 2px rgba(40, 50, 45, .05), 0 18px 40px rgba(40, 50, 45, .09);
  /* stacking context above #login-panel::after's double-helix watermark */
  position: relative;
  z-index: 1;
}
/* logotipo completo sobre el titulo; la ruta es relativa a este fichero,
   que se sirve desde la misma carpeta que logo.png */
#login-panel .well::before {
  content: "";
  display: block;
  width: 100%;
  height: 170px;
  margin-bottom: 10px;
  background: url("logo.png") center / auto 170px no-repeat;
}
#login-panel .well > h2 {
  font-family: var(--vg-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--vg-dark);
  margin: 0 0 22px;
}
#login-panel .form-group {
  text-align: left;
}
#login-panel .btn-primary {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 15px;
  font-size: 14px;
}
/* Suavizado general de cualquier otro wellPanel de la aplicacion, sin
   logo ni banda verde: solo para que no quede el gris de Bootstrap */
.well {
  background: var(--vg-card);
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r);
}

/* ---- Description page ("This server is divided in 5 tabs" / msg output) ---- */

.vg-desc {
  max-width: none;
  background: var(--vg-card);
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r);
  padding: 26px 30px 30px;
}
.vg-tabdoc {
  max-width: 78ch;
}
.vg-desc-head{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.vg-desc-icon{
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}
.vg-desc-rule{width:1px;align-self:stretch;background:var(--vg-line)}
.vg-desc-head h2{font-family:var(--vg-display);font-size:28px;font-weight:600;
  color:var(--vg-dark);letter-spacing:-.015em;line-height:1.15;margin:0}
.vg-tabdoc{display:grid;gap:16px}
.vg-tabdoc-item{display:grid;grid-template-columns:24px 1fr;gap:12px}
.vg-tabdoc-item .vg-n{font-family:var(--vg-mono);font-size:12px;
  color:var(--vg-leaf-600);padding-top:3px;font-weight:500}
.vg-tabdoc-item h3{font-family:var(--vg-display);font-size:16px;font-weight:600;
  color:var(--vg-dark);margin:0 0 2px}
.vg-tabdoc-item p{margin:0;font-size:15px;line-height:1.65;color:var(--vg-ink-muted)}
@media (max-width:700px){
  .vg-desc-head{gap:12px}
  .vg-desc-rule{display:none}
  .vg-desc-head h2{font-size:21px}
}

/* ====================================================================
   Elementos de marca que faltaban respecto de la maqueta
   ==================================================================== */

/* --- 1. Segunda linea "VALGENETICS" bajo el titulo de la cabecera ----
   dashboardHeader(title=) genera un <a class="logo"> con spans .logo-lg
   y .logo-mini dentro. Se apila en columna y se añade la segunda linea
   como pseudo-elemento, para no tener que tocar app.R. El fondo con el
   isotipo ya definido en la regla anterior de .logo se mantiene.
   La regla ".skin-blue .main-header .logo" y sus dos nuevas reglas
   hermanas (".logo .logo-lg/.logo-mini" y ".logo::after") ya existian
   parcialmente en este fichero: las propiedades display/flex-direction/
   justify-content/align-items y las propias ".logo-lg/.logo-mini" y
   "::after" se integraron ahi mismo en vez de duplicarse aqui; ver
   informe. -------------------------------------------------------- */

/* --- 2. Marca de agua al pie de la barra lateral ---------------------
   Sin overflow:hidden a proposito: la barra lateral debe poder crecer y
   desplazarse si el texto de bienvenida es largo.
   -------------------------------------------------------------------- */
.skin-blue .main-sidebar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 116px;
  height: 300px;
  background: url("vg-mark-light.svg") center / contain no-repeat;
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}
.skin-blue .main-sidebar .sidebar {
  position: relative;
  z-index: 1;
}

/* --- 3. Boton "RNA-Seq guidelines" sobre fondo oscuro ----------------
   La regla general de .btn-default es transparente con borde oscuro, que
   sobre la barra lateral queda invisible. Aqui se invierte.
   -------------------------------------------------------------------- */
.skin-blue .main-sidebar .btn-default,
.skin-blue .main-sidebar .btn {
  background: var(--vg-card);
  border: 1px solid var(--vg-card);
  color: var(--vg-ink);
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.skin-blue .main-sidebar .btn-default:hover,
.skin-blue .main-sidebar .btn-default:focus,
.skin-blue .main-sidebar .btn:hover,
.skin-blue .main-sidebar .btn:focus {
  background: var(--vg-leaf-100);
  border-color: var(--vg-leaf-100);
  color: var(--vg-dark);
}

/* --- 4. Gran doble helice de fondo, solo en la pantalla de login -----
   Va colgada de #login-panel y no de .content-wrapper a proposito: al
   iniciar sesion shinyauthr oculta ese div, y con el desaparece este
   pseudo-elemento. Asi la marca de agua no invade las tablas ni los
   graficos del resto de la aplicacion. La regla "#login-panel .well {
   position: relative; z-index: 1; }" ya existia (se le añadio el
   box-shadow/border/etc. en la tarea anterior): esas dos propiedades se
   integraron ahi mismo en vez de duplicarse aqui; ver informe.
   -------------------------------------------------------------------- */
#login-panel::after {
  content: "";
  position: fixed;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 38vh;
  height: 92vh;
  background: url("vg-mark.svg") center / contain no-repeat;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}