/* Simplified styles for protein pages: motif charts and motif details table */

/* Page headings & list items */
.protein-page h2 { color: #0b5ed7; margin-bottom: 1rem; }
.protein-page .list-group-item {
  border-radius: .4rem;
  margin-bottom: .5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  padding: .75rem 1rem;
}

/* Sidebar / layout sizes */
@media (min-width: 768px) {
  .protein-page aside, .protein-page .col-md-3 { flex: 0 0 200px; max-width: 200px; width: 200px; }
  .protein-page main, .protein-page .col-md-9 { flex: 1 1 0; max-width: calc(100% - 200px); }
}

/* Motif chart (vertical and horizontal variants) */
.motif-chart-wrapper {
  width: 100%;
  padding: .6rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(248,249,250,0.9), #fff);
  border: 1px solid rgba(15,23,42,0.03);
  box-sizing: border-box;
}
.motif-chart-title { font-weight:600; color:#0b5ed7; margin-bottom:.5rem; }

/* vertical bars */
.motif-vertical-bars { display:flex; align-items:flex-end; gap:.5rem; height:160px; padding-bottom:.25rem; }
.motif-vertical-col { flex:1 1 0; min-width:36px; display:flex; flex-direction:column; align-items:center; }
.motif-vertical-outer { width:60%; height:100%; display:flex; align-items:flex-end; justify-content:center; background:rgba(13,110,253,0.04); border-radius:6px; overflow:hidden; }
.motif-vertical-bar { width:100%; height:0; border-radius:6px 6px 0 0; transition:height .35s ease; }

/* horizontal motif bars used elsewhere */
.motif-bar-outer { display:flex; align-items:center; height:18px; background:rgba(0,0,0,0.04); border-radius:8px; padding:2px; overflow:hidden; }
.motif-bar-inner { height:100%; width:0%; min-width:4px; border-radius:6px; background:linear-gradient(90deg,#0b5ed7,#3b82f6); transition:width .35s ease; }

/* Table scroll wrapper + sticky header */
.table-scroll-wrapper { position:relative; width:100%; }
.table-scroll-top { overflow-x:auto; overflow-y:hidden; height:12px; margin-bottom:6px; display:none; } /* JS shows when needed */
.table-scroll-top .table-scroll-inner { height:1px; width:100%; }

.table-scroll-body { overflow:auto; -webkit-overflow-scrolling:touch; }

/* Continuous frame and sticky header */
.table-scroll-body table { width:100%; border-collapse:collapse; border-left:1px solid rgba(0,0,0,0.08); border-right:1px solid rgba(0,0,0,0.08); table-layout:fixed; }
.table-scroll-body thead th { position:sticky; top:0; z-index:6; background:#fff; border-bottom:1px solid rgba(0,0,0,0.08); border-top:1px solid rgba(0,0,0,0.08); }
.table-scroll-body thead th:first-child,
.table-scroll-body tbody td:first-child { border-left:1px solid rgba(0,0,0,0.08); box-shadow:-1px 0 0 rgba(0,0,0,0.04); }
.table-scroll-body thead th:last-child,
.table-scroll-body tbody td:last-child { border-right:1px solid rgba(0,0,0,0.08); }

/* Table column sizing / wrapping */
#protein-motifs-table { font-size:.9rem; word-break:break-word; hyphens:auto; }
#protein-motifs-table th, #protein-motifs-table td { padding:.45rem .5rem; vertical-align:middle; }
#protein-motifs-table th:nth-child(1), #protein-motifs-table td:nth-child(1) {
  white-space:nowrap;
}
#protein-motifs-table th:nth-child(2), #protein-motifs-table td:nth-child(2) {
  width:4rem; word-break:break-all; overflow-wrap:anywhere;
}
#protein-motifs-table th:nth-child(3), #protein-motifs-table td:nth-child(3),
#protein-motifs-table th:nth-child(4), #protein-motifs-table td:nth-child(4),
#protein-motifs-table th:nth-child(5), #protein-motifs-table td:nth-child(5),
#protein-motifs-table th:nth-child(6), #protein-motifs-table td:nth-child(6),
#protein-motifs-table th:nth-child(7), #protein-motifs-table td:nth-child(7) {
  width:5rem; white-space:nowrap; text-align:center;
}
#protein-motifs-table th:nth-child(8), #protein-motifs-table td:nth-child(8) { width:10rem; }
#protein-motifs-table th:nth-child(9), #protein-motifs-table td:nth-child(9) { width:8rem; white-space:nowrap; }
#protein-motifs-table th:nth-child(10), #protein-motifs-table td:nth-child(10) { width:12rem; }
#protein-motifs-table td { white-space:normal; overflow-wrap:anywhere; }

/* Conflict note */
.note-conflixt { display:inline-block; padding:.2rem .45rem; border-radius:4px; font-weight:600; color:#d97706; background:rgba(217,117,6,0.06); }
.note-conflixt.note-strict { color:#dc2626; background:rgba(220,38,38,0.06); }

/* note conflict colors: apply to the td element and ensure priority */
td.note-conflict { font-weight: 600; }
td.note-conflict.note-conflict-warning { color: orange !important; }
td.note-conflict.note-conflict-strict  { color: red !important; }

/* Responsive tweaks */
@media (max-width:767.98px) {
  .motif-vertical-bars { height:120px; }
  .motif-vertical-outer { width:80%; }
  .table-scroll-top { height:10px; margin-bottom:4px; }
  .protein-page .motif-chart-wrapper { max-width:100%; margin-top:.75rem; }
  #protein-motifs-table { table-layout:auto; }
}

/* Ensure inner blocks don't hide zebra / background in other layouts */
.protein-page .motif-chart-wrapper, .protein-page aside { background-clip:padding-box; }

/* ELM experiment link styling (green) */
.elm-link {
  color: #059669; /* green */
  font-weight: 600;
  text-decoration: none;
}
.elm-link:hover { text-decoration: underline; }

/* Styles for the protein page viewer */
#my-feature-viewer {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    overflow: hidden;
    position: relative;
}

/* Prevent overlap between feature lines and labels when zoomed */
#my-feature-viewer .fv-track-container {
    overflow: hidden;
}

#my-feature-viewer .fv-track {
    overflow: hidden;
}

#my-feature-viewer .fv-track-label {
    min-width: 100px !important;
    padding-right: 10px !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

#my-feature-viewer svg {
    overflow: hidden;
    display: block;
}

/* fallback sequence text style */
.protein-sequence {
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 0.5rem;
}

/* motif table collapse */
tr.motif-hidden { display: none; }

/* hide motif rows marked as hidden */
tr.motif-hidden { display: none; }

/* filtered rows (experimental toggle) */
tr.filtered-hidden { display: none; }

/* filtered rows (high confidence toggle) */
tr.high-confidence-hidden { display: none; }

/* filtered rows (experiment info toggle) */
tr.info-filtered-hidden { display: none; }

/* pagination hidden rows */
tr.pagination-hidden { display: none; }

/* PPI table hidden rows */
tr.ppi-hidden { display: none; }

/* PPI pagination hidden rows */
tr.ppi-pagination-hidden { display: none; }

/* "Your query" row styling from prediction search */
tr.your-query-row td {
  background-color: #fff3e0 !important;
}

/* simple button styles (uses bootstrap if available) */
.motif-controls { margin-top: .5rem; }
.motif-show-more {
  cursor: pointer;
  border: none;
  background: transparent;
  color: #0d6efd;
  padding: 0;
  font-size: 0.95rem;
}
.motif-show-more:focus { outline: none; text-decoration: underline; }

/* Sidebar sticky navigation */
aside .sticky-top {
  background-color: #f8f9fa;
  padding: 0.5rem;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  z-index: 10;
}

aside .sticky-top .nav-link {
  color: #222 !important;
  background: transparent;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none !important;
  transition: color .15s, background .15s;
}

aside .sticky-top .nav-link:hover,
aside .sticky-top .nav-link:focus {
  background: #f3f6fa;
  color: #0d6efd !important;
  border-radius: 4px;
  text-decoration: none !important;
}

/* Feature Viewer Styles */
/* visible cyan border for motif rects, no fill */
.fv-rect.Motifs rect,
.fv-feature.Motifs rect,
.fv-rect.Motifs .feature {
  stroke: #00bcd4 !important;
  stroke-width: 2px !important;
  stroke-opacity: 1 !important;
  fill: none !important;
}

/* lighter cyan border for motifs without experimental evidence */
.fv-rect.Motifs_noexp rect,
.fv-feature.Motifs_noexp rect,
.fv-rect.Motifs_noexp .feature {
  stroke: rgba(0,188,212,0.65) !important;
  stroke-width: 1.5px !important;
  stroke-opacity: 1 !important;
  fill: none !important;
}

/* Adjust feature label text sizing to fit within features */
.fv-track-label text {
  font-size: 11px !important;
}

.fv-arrow text,
.fv-rect text {
  font-size: 10px !important;
}
/* Hide rows filtered by column search or experimental toggle */
tr.search-hidden,
tr.ppi-search-hidden,
tr.ppi-filtered-hidden {
  display: none !important;
}

/* Style for filter input row */
.filter-row input.form-control-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
}

/* Feature Viewer motif styles (moved from resources/css/proteinpage.css) */
/* motifs: cyan-blue border only (no fill) */
.fv-feature.Motifs,
.fv-feature.Motifs rect,
.fv-rect.Motifs,
.Motifs rect,
.element.Motifs,
.Motifs .feature  {
  stroke: red !important;
  stroke-width: 5px !important;

}

/* motifs: cyan-blue border only (no fill) */
.fv-feature.Motifs_noexp,
.fv-feature.Motifs_noexp rect,
.fv-rect.Motifs_noexp,
.Motifs_noexp rect,
.element.Motifs_noexp,
.Motifs_noexp .feature  {
  stroke: greenyellow !important;
  stroke-width: 5px !important;

}

/*  motifs without experimental evidence: lighter cyan border, no fill 
.fv-feature.Motifs_noexp,
.fv-feature.Motifs_noexp rect,
.fv-rect.Motifs_noexp,
.Motifs_noexp .feature {
  stroke: rgba(0,188,212,0.65) !important;
  stroke-width: 1.5px !important;

} */