/* ============================================================
   Sequential BATTing HTML App — Custom Styles
   Port of shiny-app/www/custom.scss to plain CSS
   ============================================================ */

/* --- Theme color tokens (used as CSS custom properties) --- */
:root {
  --sb-primary:   #2c3e50;
  --sb-secondary: #7f8c8d;
  --sb-success:   #27ae60;
  --sb-info:      #2980b9;
  --sb-warning:   #f39c12;
  --sb-danger:    #e74c3c;
  --sb-sig-pos:   #27ae60;
  --sb-sig-neg:   #7f8c8d;
  --sb-median:    #c0392b;
  --sb-grid:      #ecf0f1;
  --sb-font-base: "Source Sans Pro", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  --sb-font-code: "Fira Code", "SFMono-Regular", "Menlo", "Consolas", monospace;
}

body {
  font-family: var(--sb-font-base);
}

code, pre, .console-log {
  font-family: var(--sb-font-code);
}

/* --- Wizard step label --- */
.wizard-step-label {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sb-primary);
  margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .wizard-step-label {
  color: #8eafc4;
}

/* --- Curation step complete banner --- */
.curation-step-complete {
  border-left: 3px solid var(--sb-success);
  background: color-mix(in srgb, var(--sb-success) 8%, var(--bs-body-bg, #fff) 92%);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

/* --- Console log area --- */
.console-log {
  max-height: 400px;
  overflow-y: auto;
  font-size: 0.85rem;
  background: color-mix(in srgb, #000 5%, var(--bs-body-bg, #fff) 95%);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  padding: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

[data-bs-theme="dark"] .console-log {
  background: color-mix(in srgb, #fff 5%, var(--bs-body-bg, #212529) 95%);
}

/* --- Value box row --- */
.value-box-row {
  margin-bottom: 1rem;
}

/* --- Value boxes (custom implementation) --- */
.value-box {
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 80px;
}

.value-box .vb-icon {
  font-size: 1.75rem;
  opacity: 0.8;
}

.value-box .vb-content {
  flex: 1;
}

.value-box .vb-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.value-box .vb-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.value-box-primary   { background: color-mix(in srgb, var(--sb-primary) 12%, var(--bs-body-bg, #fff) 88%); color: var(--sb-primary); }
.value-box-info      { background: color-mix(in srgb, var(--sb-info) 12%, var(--bs-body-bg, #fff) 88%); color: var(--sb-info); }
.value-box-success   { background: color-mix(in srgb, var(--sb-success) 12%, var(--bs-body-bg, #fff) 88%); color: var(--sb-success); }
.value-box-secondary { background: color-mix(in srgb, var(--sb-secondary) 12%, var(--bs-body-bg, #fff) 88%); color: var(--sb-secondary); }
.value-box-warning   { background: color-mix(in srgb, var(--sb-warning) 12%, var(--bs-body-bg, #fff) 88%); color: var(--sb-warning); }
.value-box-danger    { background: color-mix(in srgb, var(--sb-danger) 12%, var(--bs-body-bg, #fff) 88%); color: var(--sb-danger); }

/* --- Warning / Error banners --- */
.warning-banner {
  border-left: 4px solid var(--sb-warning);
  background: color-mix(in srgb, var(--sb-warning) 10%, var(--bs-body-bg, #fff) 90%);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.error-banner {
  border-left: 4px solid var(--sb-danger);
  background: color-mix(in srgb, var(--sb-danger) 10%, var(--bs-body-bg, #fff) 90%);
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

/* --- Tab content panels --- */
.tab-pane {
  padding-top: 1rem;
}

/* --- Sidebar layout helper --- */
.sb-layout-sidebar {
  display: flex;
  gap: 1rem;
}

.sb-layout-sidebar .sb-sidebar {
  width: 350px;
  flex-shrink: 0;
}

.sb-layout-sidebar .sb-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .sb-layout-sidebar {
    flex-direction: column;
  }
  .sb-layout-sidebar .sb-sidebar {
    width: 100%;
  }
}

/* --- Wizard navigation footer --- */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* --- Biomarker navigator --- */
.navigator-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.navigator-bar .nav-position {
  font-size: 0.85rem;
  color: var(--sb-secondary);
  white-space: nowrap;
}

/* --- DataTables overrides --- */
table.dataTable {
  font-size: 0.875rem;
}

table.dataTable.compact td,
table.dataTable.compact th {
  padding: 4px 8px;
}

/* --- Algorithm iframe --- */
.algorithm-frame {
  width: 100%;
  min-height: 85vh;
  border: none;
}

/* --- Accordion improvements --- */
.accordion-button:not(.collapsed) {
  background-color: color-mix(in srgb, var(--sb-primary) 8%, var(--bs-body-bg, #fff) 92%);
  color: var(--sb-primary);
}

/* --- Drag-and-drop rank list --- */
.rank-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rank-list-item {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.25rem;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rank-list-item:active {
  cursor: grabbing;
}

.rank-list-item .rank-num {
  font-weight: 700;
  color: var(--sb-info);
  min-width: 1.5rem;
}

/* --- Hidden tab helper --- */
.nav-link.tab-hidden {
  display: none !important;
}

/* --- Run button pulse animation --- */
.btn-running {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

/* --- Placeholder content --- */
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  color: var(--sb-secondary);
}

.placeholder-content i {
  font-size: 3rem;
  margin-bottom: 1rem;
}