body {
    overflow-y: scroll;
}

/* Feature table (Summary visual) */
.summary-ft-pill {
    font-size: 0.72rem !important;
    vertical-align: middle;
}
.summary-ft-site-pill {
    font-size: 0.7rem;
    font-weight: 600;
}
table.summary-feature-dt td {
    vertical-align: middle;
}

.summary-focus-tb-mini .summary-tb-letter {
    font-size: 0.68rem;
    min-width: 1.05rem;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*Table */
.scrollable{
    max-height: 200px;
    overflow-y: scroll;
}

/* slider */

.slidecontainer {
    width: 100%; /* Width of the outside container */
    height: 100%;
}


.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}


/* brusharea */
.brusharea {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*padding*/
.padding{
    padding-bottom: 2rem;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}
/*Footer*/
footer {
    background-color:#41464b;
    color: #b6d4fe;
    padding-top: 2rem;
}
hr.light{
    border-top: 1px solid #b6d4fe;
    width: 100%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}

/*Sequence*/
#sequence {
  width: 1600px;
  height: 50px;
  overflow-x: auto;
  overflow: hidden;
  position: center;
}
#sequencenumber {
  width: 1600px;
  height: 50px;
  overflow-x: auto;
  overflow: hidden;
  position: center;
}


/*Datatable*/
.featureContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    float: left;
    overflow: hidden;
    padding: 10px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.labelContainer {
    width: 200px;
    float: left;
    left: 0px;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    background: var(--bs-body-bg);
    z-index: 10;
    display: inline;
}

.labelContainer, .structureContainer {
    flex-shrink: 0;
    /* other styles... */
}

#resizer {
    cursor: col-resize; /* display a resize cursor when over the draggable area */
    width: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
    background: #ccc; /* color of draggable area */
}

.dataContainer {
    flex-grow: 1;
    overflow: auto;
}

.structureContainer {
    width: 30%; /* Adjust as needed */
    overflow: auto;
    flex-grow: 1; /* allow this div to grow */
}

.viewerSection {
    margin: 120px 0 0 0;
}

.summary-viewer-section {
    min-height: 280px;
}

#pdb_structure {
    position: relative;
    min-height: 280px;
    min-width: 200px;
}

.onerowdiv {
    height: 23px;
}
/*.helpContainer {*/
/*    float: left;*/
/*    left: 0px;*/
/*    overflow: hidden;*/
/*    padding-top: 10px;*/
/*    margin-top: 5px;*/
/*    background: white;*/
/*    z-index: 10;*/
/*    display: inline;*/
/*}*/
.dataContainer {
    padding: 0px;
    margin: 0px;
    overflow: auto;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
    touch-action: none;
}
/*innerclasses*/
.featureType{
    padding: 1px;
    margin: 2px;
    background: var(--bs-tertiary-bg);
    border-radius: 5px;
}
.featureHelp{
    padding: 1px;
    margin: 2px;
    background: var(--bs-tertiary-bg);
    border-radius: 5px;
}
p {
    margin: 0;
}
/*Dataclasses*/

.empty{
    padding: 1px;
    margin: 2px;
}

.tablecontainer{
    padding-top: 1px;
    padding-bottom: 1px;
}

.wrapper{
    width: 600px;
    height: 30px;
    white-space: nowrap;
    font-size:0;
}

.single-block{
   width:20px;
   height:100%;
   display:inline-block;
   vertical-align:bottom;
   font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green {
    background-color:green;
}

/* Loader */

.no-scroll {
   overflow: hidden;
}

/*.loader {*/

/*}*/

.loader {
    width: 100%;
    min-height: 95%;
    position: absolute;
    top: 65px ;
    left: 0;
    background-color: white;
    z-index: 100;
    display: flex;
}

.spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    position: relative;
    animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

.disorderedblocks {
    height: 15px;
    width: 6px;
    font-family: 'Courier New', Courier, monospace;
}


/* Off Canvas */


/* off canvas */
.offcanvas-btn {
  left: 420px;
  visibility: visible;
}

/* optional junk to toggle the button text */
.offcanvas-btn span:last-child,
.offcanvas.show .offcanvas-btn span:first-child {
  display: none;
}

.offcanvas.show .offcanvas-btn span:last-child {
  display: inline;
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.shadow_card{
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
}
[data-bs-theme="dark"] .shadow_card {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

/* Add to your stylesheet so that the index is rendered above the residues on the right */
.line {
  margin-bottom: 4px;
    margin-right: 10px ;
}



.idx-row {
  text-align: right;
  font-weight: bold;
    /*user-select: none;*/
  font-size: 0.9em;
  color: var(--bs-secondary-color);
}

.residue-row .residue {
  /*display: inline-block;*/
  /*width: 1em;*/
  font-size: 1em;
  text-align: center;
  font-family: monospace;
  color: var(--bs-body-color);
}


/* When a residue has been “drag‐selected”, we give it a yellow background: */
.residue::selection {
  background-color: rgba(255, 255, 0, 0.6);
}

.idx::selection {
  background-color: transparent;
  color: inherit;
}

/* —— Summary visual refresh (toolbar, layout, loader) —— */
.summary-focus-toolbar {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

/* Single-row toolbar: Focus annotation + track controls share one panel */
.summary-visual-toolbar-unified {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.summary-visual-toolbar-unified .summary-focus-toolbar-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Summary page hero: one compact card for protein + links */
.summary-page-hero-card .card-body {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.summary-page-hero-card #visuallink .btn {
    white-space: nowrap;
}

/* Focus strip: keep select + badges on one line; allow horizontal scroll if needed */
#color_selector_container .summary-focus-toolbar-inner {
    flex-wrap: nowrap;
}

/* Track column key (G/D/O/M/C/P) in Tracks card header */
.summary-tracks-header-legend {
    font-size: 0.78rem;
    line-height: 1.4;
    max-width: 100%;
}

@media (min-width: 1200px) {
    .summary-tracks-header-legend {
        font-size: 0.8rem;
        max-width: min(52rem, 100%);
    }
}

.summary-sequence-card {
    min-height: 0;
}

.summary-sequence-panel {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: auto;
    padding: 0.35rem 0.5rem;
    position: relative;
    z-index: 1;
}

#sequence_viewer {
    flex-wrap: nowrap;
    min-width: min-content;
}

/* DataTables: column filters = second thead row (scrollX must stay off) */
table.dataTable thead tr.dt-col-filters th {
    border-top: 0;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    vertical-align: middle;
    font-weight: normal;
}

.summary-visual-toolbar-row #color_selector_container > .summary-focus-toolbar-inner,
.summary-visual-toolbar-row #external-annotation-labels > .summary-focus-toolbar-inner {
    min-width: 0;
}

/* Visual settings: top row = view mode, second row = controls */
.summary-visual-external-controls {
    flex-wrap: nowrap;
}
.summary-visual-toolbar-row--view {
    scrollbar-width: thin;
}
.summary-visual-toolbar-row--controls {
    scrollbar-width: thin;
    border-top: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    margin-top: 0.45rem;
    justify-content: flex-start;
}
.summary-visual-toolbar-row--view,
.summary-visual-toolbar-row--controls {
    width: calc(100% + 0.5rem) !important;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
@media (min-width: 768px) {
    .summary-visual-toolbar-row--view,
    .summary-visual-toolbar-row--controls {
        width: calc(100% + 0.7rem) !important;
        margin-left: -0.35rem;
        margin-right: -0.35rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}
.summary-visual-toolbar-row--controls #external-annotation-labels {
    justify-content: flex-start;
    width: max-content;
    min-width: max-content;
    flex-shrink: 0;
}
.summary-visual-external-controls .summary-visual-control-chip {
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: 0.65rem;
    padding: 0.34rem 0.5rem 0.36rem;
    background: linear-gradient(
        180deg,
        rgba(var(--bs-body-bg-rgb), 0.98),
        rgba(var(--bs-body-bg-rgb), 0.88)
    );
    box-shadow: 0 0.08rem 0.28rem rgba(0, 0, 0, 0.06);
    min-width: 0;
    max-width: min(100%, 17rem);
}
.summary-visual-external-controls .summary-visual-control-chip label.small.text-secondary {
    margin-bottom: 0;
}
.summary-visual-control-title-badge {
    font-size: 0.67rem !important;
    letter-spacing: 0.02em;
    font-weight: 700 !important;
    padding: 0.18rem 0.48rem !important;
    line-height: 1.15 !important;
    border-width: 1px;
}
.summary-visual-external-controls .summary-visual-control-chip--cancer {
    max-width: min(100%, 42rem);
}
.summary-cancer-inline-form {
    overflow-x: auto;
    padding-bottom: 0.05rem;
    min-height: 2rem;
}
.summary-cancer-inline-form .summary-cancer-inline-field {
    flex: 0 0 auto;
    min-width: 9.1rem;
}
.summary-cancer-inline-form .summary-cancer-inline-field--wide {
    min-width: 11.6rem;
}
[data-bs-theme="dark"] .summary-visual-external-controls .summary-visual-control-chip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    box-shadow: 0 0.12rem 0.45rem rgba(0, 0, 0, 0.28);
}
.summary-visual-external-controls .summary-visual-control-select {
    border-radius: 0.42rem;
    min-height: 1.95rem;
    font-size: 0.84rem;
}
.summary-visual-external-controls .summary-visual-control-badges .summary-focus-tb-mini {
    line-height: 1;
}
.summary-visual-external-controls .summary-visual-control-badges .summary-tb-letter {
    font-size: 0.62rem;
    padding: 0.04rem 0.18rem;
}

.summary-stats-sidebar {
    top: 74px;
    max-height: calc(100vh - 92px);
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
}
.summary-page header.discanvis-site-header.sticky-top {
    position: static;
    top: auto;
}
.summary-page .summary-stats-sidebar {
    top: 12px;
    max-height: calc(100vh - 24px);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item {
    border-radius: 0.4rem;
    margin-bottom: 0.2rem;
    border-color: var(--bs-border-color);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item:focus,
.summary-stats-sidebar .summary-stats-nav .list-group-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.summary-stats-sidebar .summary-stats-nav .list-group-item.active {
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    box-shadow: inset 3px 0 0 var(--bs-primary);
    font-weight: 600;
}
.summary-stats-root section[id^="stats-section-"] {
    scroll-margin-top: 92px;
}

.clinical-view-sidebar {
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item {
    border-radius: 0.4rem;
    margin-bottom: 0.2rem;
    border-color: var(--bs-border-color);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item:focus,
.clinical-view-sidebar .clinical-view-nav .list-group-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.clinical-view-sidebar .clinical-view-nav .list-group-item.active {
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    box-shadow: inset 3px 0 0 var(--bs-primary);
    font-weight: 600;
}
.clinical-view-root section[id^="clinical-section-"] {
    scroll-margin-top: 92px;
}
.clinical-plot-settings-card .clinical-settings-advanced.collapse:not(.show) {
    display: none;
}

.summary-viewer-section .molstar-structure-status {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

.summary-structure-card .viewerSection {
    margin-top: 0;
}

.summary-viewer-section {
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.summary-viewer-section #pdb_structure {
    min-height: 420px;
    height: min(520px, 65vh);
    overflow: hidden;
}

.summary-visual-main-row .min-h-plot {
    min-height: 0;
}

.summary-page-loader {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.92);
    backdrop-filter: blur(6px);
    transition: opacity 0.25s ease;
}

[data-bs-theme="dark"] .summary-page-loader {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.94);
}

.summary-page-loader.d-none {
    pointer-events: none;
    opacity: 0;
}

.summary-page-loader-inner {
    text-align: center;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.summary-page-loader-inner.text-start {
    text-align: start;
}

.summary-loader-steps-scroll {
    scrollbar-width: thin;
}

[data-bs-theme="dark"] .summary-page-loader-inner {
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.45);
}

#summary-badge-rows .badge {
    max-width: 100%;
    white-space: normal;
    text-align: start;
    line-height: 1.25;
}

.summary-badge-section {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) !important;
}

/* Clinical “In silico & annotation context”: avoid washed-out badges on tinted cards */
.mutation-context-badges .mutation-context-badge {
    opacity: 1 !important;
    filter: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* First-open lazy Summary tabs: show that work is in progress */
.summary-tab-lazy-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.93);
    pointer-events: none;
}

[data-bs-theme="dark"] .summary-tab-lazy-loading {
    background-color: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.94);
}

.summary-tab-lazy-loading-card {
    pointer-events: auto;
    max-width: 22rem;
}

.summary-track-visibility-toggle .summary-track-visibility-chevron {
    transition: transform 0.2s ease;
}

.summary-track-visibility-toggle[aria-expanded="true"] .summary-track-visibility-chevron {
    transform: rotate(180deg);
}

.summary-track-header-control {
    height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.15rem;
}

/* Header controls in Tracks card: unify sizes with btn-sm */
#summary-main-plot-header-controls .form-check-input {
    width: 2.25em;
    height: 1.25em;
    margin-top: 0 !important;
}
#summary-main-plot-header-controls .form-check-label {
    margin-bottom: 0 !important;
    line-height: 1.1;
}
#summary-track-visibility-toggle.btn.btn-sm {
    height: 2rem;
}

/* Track visibility (grouped, compact chips) */
.summary-track-visibility-group-box {
    padding: 0.55rem 0.55rem;
    border: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
    border-radius: 0.6rem;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
}
[data-bs-theme="dark"] .summary-track-visibility-group-box {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.32);
}
.summary-track-visibility-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}
.summary-track-visibility-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 0.55rem;
    padding: 0.25rem 0.35rem;
    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.55);
    cursor: pointer;
    user-select: none;
}
.summary-track-visibility-chip .form-check-input {
    margin-top: 0 !important;
}
.summary-track-visibility-chip .summary-tb-track-pill {
    font-size: 0.78rem !important;
    line-height: 1.1;
    padding: 0.18rem 0.45rem !important;
    max-width: 12.5rem;
}

/* Keep Plotly under the absolute loading layer (sibling painted later). */
.summary-main-plot-surface {
    position: relative;
    z-index: 0;
}

/* While tracks render: dim the Plotly surface so loading reads clearly under the overlay. */
.summary-plot-area-busy #main_plot_div {
    opacity: 0.58;
    filter: grayscale(0.12);
    transition: opacity 0.18s ease, filter 0.18s ease;
}

.summary-tracks-loading {
    position: absolute;
    inset: 0;
    /* Above Plotly inside the card, but below #summary-page-loader (z-index: 1080) so first paint never stacks over it. */
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.55);
    backdrop-filter: blur(2px);
}
[data-bs-theme="dark"] .summary-tracks-loading {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.55);
}
[data-bs-theme="dark"] .summary-plot-area-busy #main_plot_div {
    opacity: 0.52;
}
.summary-tracks-loading-inner {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.85);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .summary-tracks-loading-inner {
    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.85);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35);
}

/* Unified Visual mode toggles: inactive outline must never read as “blank white” during heavy Plotly work. */
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
    border-color: rgba(var(--bs-primary-rgb), 0.42);
    /* Darker than --bs-primary so label + icons stay readable after losing .active (was filled / white text). */
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
    opacity: 1;
}
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active) .material-symbols-outlined {
    color: inherit;
    opacity: 1;
}
.summary-visual-mode-group > .btn.btn-outline-primary:not(.active):hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
}
.summary-visual-mode-group--plot-busy > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    --bs-btn-color: var(--bs-primary-text-emphasis, #084298);
    color: var(--bs-btn-color);
    /* Own compositing layer so the control repaints even when the main thread is busy with Plotly */
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
}
[data-bs-theme="dark"] .summary-visual-mode-group > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.14);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    /* Keep body-like contrast on dark (primary alone can read as washed on tinted bg). */
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}
[data-bs-theme="dark"] .summary-visual-mode-group > .btn.btn-outline-primary:not(.active):hover {
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}
[data-bs-theme="dark"] .summary-visual-mode-group--plot-busy > .btn.btn-outline-primary:not(.active) {
    background-color: rgba(var(--bs-primary-rgb), 0.18);
    --bs-btn-color: var(--bs-body-color);
    color: var(--bs-btn-color);
}

.summary-visual-toolbar-card .card-body,
.summary-sequence-card .card-header,
.summary-plot-main-card .card-header,
.summary-structure-card .card-header,
.summary-feature-table-card .card-header {
    border-color: var(--bs-border-color-translucent, var(--bs-border-color));
}

.summary-visual-main-row .summary-plot-main-card,
.summary-visual-main-row .summary-structure-card {
    min-height: 0;
}

/* Structure focus: two-column layout — keep Plotly + badge strip inside the card (avoid ~tens of px horizontal bleed) */
@media (min-width: 1200px) {
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 {
        max-width: 100%;
        overflow-x: clip;
    }
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 .summary-plot-with-badges {
        max-width: 100%;
        min-width: 0;
    }
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 #main_plot_div {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Extra gutter so Plotly’s right modebar (reset axes) stays inside the card */
    .summary-visual-main-row .summary-visual-plot-col.col-xl-8 .flex-grow-1.min-w-0.position-relative {
        padding-right: 0.35rem;
    }
}

@media (min-width: 1200px) {
    .summary-visual-main-row .summary-plot-main-card {
        min-height: 0;
    }
}

.summary-plot-with-badges {
    min-height: 0;
}

.summary-tb-track-pill {
    display: inline-block;
    text-align: left;
    width: 100%;
}

/* Letter pills: explicit colors (Bootstrap / theme must not flatten these) */
.summary-tb-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.2rem;
    font-size: 0.68rem;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}

.summary-tb-lvl-G {
    background: #6c757d !important;
    color: #fff !important;
}
.summary-tb-lvl-D {
    background: #dc3545 !important;
    color: #fff !important;
}
.summary-tb-lvl-O {
    background: #0d6efd !important;
    color: #fff !important;
}
/* Mixed protein context: ordered (blue) vs disorder (red) split */
.summary-tb-lvl-M {
    background: linear-gradient(135deg, #0d6efd 48%, #dc3545 48%) !important;
    color: #fff !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

.summary-tb-typ-C {
    background: #198754 !important;
    color: #fff !important;
}
.summary-tb-typ-P {
    background: #ffc107 !important;
    color: #212529 !important;
}

[data-bs-theme="dark"] .summary-tb-letter {
    border-color: rgba(255, 255, 255, 0.22);
}

.summary-tb-title {
    font-weight: 500;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.summary-tb-aa-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.04rem 0.12rem;
    font-size: 0.55rem;
    line-height: 1.1;
    margin-top: 0.12rem;
    color: var(--bs-secondary-color);
    max-height: 2.6em;
    overflow: hidden;
}

.summary-tb-aa-ch {
    flex: 0 0 auto;
}

.summary-tb-subtracks {
    margin-top: 0.1rem;
    max-height: 4.5rem;
    overflow-y: auto;
    font-size: 0.58rem;
    line-height: 1.15;
    color: var(--bs-secondary-color);
}

.summary-tb-subtrack-name {
    max-width: 100%;
}

.summary-track-help-btn:hover,
.summary-track-help-btn:focus-visible {
    color: var(--bs-primary) !important;
}

.summary-track-help-head {
    font-weight: 700;
    opacity: 0.55;
}

.summary-tb-row-section {
    background: rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.08);
}

.summary-tb-row-subtrack {
    border-left: 2px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
    padding-left: 2px;
}

.summary-tb-row-aa {
    border-left: 2px solid rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.45);
}

.summary-tb-pill-section .summary-badge-custom,
.summary-tb-pill-section.summary-tb-track-pill {
    font-weight: 600;
    font-size: 0.7rem;
}

#pdb_structure_tab {
    min-height: 420px;
    width: 100%;
}