:root {
  --app-primary: #07554F;
  --app-primary-hover: #043F3B;

  --app-accent: #668442;
  --app-accent-hover: #526B35;

  --app-bg: #F7F9FB;
  --app-surface: #FFFFFF;
  --app-surface-soft: #F0F4F3;

  --app-text: #102D35;
  --app-text-secondary: #354F58;
  --app-text-muted: #566C74;

  --app-border: #BCCBD0;
  --app-border-soft: #D7E0E3;

  --app-font-size: 16.5px;
  --app-secondary-size: 15.5px;
  --app-control-size: 16.5px;
  --app-table-size: 15.5px;

  --app-heading-h2-size: 32px;
  --app-heading-h3-size: 24px;
  --app-heading-h4-size: 19px;
  --app-card-padding: 28px;

  /* Scrollbars: ~1.5× default browser width (~10px → 15px) */
  --seq-scrollbar-size: 15px;
  --seq-scrollbar-track: #e8eef1;
  --seq-scrollbar-thumb: #94a3ad;
  --seq-scrollbar-thumb-hover: #667885;
}


/* ============================================================
   App-wide scrollbars (tables, modals, panels)
   ============================================================ */

html {
  scrollbar-color: var(--seq-scrollbar-thumb) var(--seq-scrollbar-track);
  scrollbar-width: auto;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.seq-scrollable::-webkit-scrollbar,
.content-card::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.reactable::-webkit-scrollbar,
.rt-table::-webkit-scrollbar,
.metacache-genome-table-scroll::-webkit-scrollbar,
.log-viewer-pre::-webkit-scrollbar {
  width: var(--seq-scrollbar-size);
  height: var(--seq-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.seq-scrollable::-webkit-scrollbar-track,
.content-card::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.reactable::-webkit-scrollbar-track,
.rt-table::-webkit-scrollbar-track,
.metacache-genome-table-scroll::-webkit-scrollbar-track,
.log-viewer-pre::-webkit-scrollbar-track {
  background: var(--seq-scrollbar-track);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.seq-scrollable::-webkit-scrollbar-thumb,
.content-card::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.reactable::-webkit-scrollbar-thumb,
.rt-table::-webkit-scrollbar-thumb,
.metacache-genome-table-scroll::-webkit-scrollbar-thumb,
.log-viewer-pre::-webkit-scrollbar-thumb {
  background-color: var(--seq-scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--seq-scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.seq-scrollable::-webkit-scrollbar-thumb:hover,
.content-card::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.reactable::-webkit-scrollbar-thumb:hover,
.rt-table::-webkit-scrollbar-thumb:hover,
.metacache-genome-table-scroll::-webkit-scrollbar-thumb:hover,
.log-viewer-pre::-webkit-scrollbar-thumb:hover {
  background-color: var(--seq-scrollbar-thumb-hover);
}


/* ============================================================
   Theme palettes
   ============================================================ */

html[data-seq-theme="borat-classic"] {
  --app-primary: #07554F;
  --app-primary-hover: #043F3B;
  --app-accent: #668442;
  --app-accent-hover: #526B35;
}

html[data-seq-theme="teal-gold"] {
  --app-primary: #086D72;
  --app-primary-hover: #05565B;
  --app-accent: #9A7B32;
  --app-accent-hover: #765D25;
}

html[data-seq-theme="forest-brass"] {
  --app-primary: #315F52;
  --app-primary-hover: #24493F;
  --app-accent: #88743A;
  --app-accent-hover: #66562B;
}

html[data-seq-theme="ocean-sage"] {
  --app-primary: #287385;
  --app-primary-hover: #1D5968;
  --app-accent: #6D906D;
  --app-accent-hover: #537153;
}

html[data-seq-theme="deep-blue-gold"] {
  --app-primary: #315A73;
  --app-primary-hover: #244459;
  --app-accent: #95762F;
  --app-accent-hover: #735B24;
}

html[data-seq-theme="graphite-moss"] {
  --app-primary: #465D63;
  --app-primary-hover: #34474C;
  --app-accent: #73845C;
  --app-accent-hover: #596747;
}


/* User palette 1 */

html[data-seq-theme="sage-heritage"] {
  --app-primary: #344E41;
  --app-primary-hover: #293D33;

  --app-accent: #588157;
  --app-accent-hover: #3A5A40;

  --app-bg: #F6F6F2;
  --app-surface-soft: #EEEDE7;

  --app-border: #A3B18A;
  --app-border-soft: #DAD7CD;
}


/* User palette 2 */

html[data-seq-theme="deep-forest-sand"] {
  --app-primary: #0B3D2E;
  --app-primary-hover: #072D22;

  --app-accent: #2D6A4F;
  --app-accent-hover: #1B4332;

  --app-bg: #F7F3F1;
  --app-surface-soft: #F2E9E4;

  --app-border: #DDBEA9;
  --app-border-soft: #E8D6CA;
}


/* User palette 3 */

html[data-seq-theme="mint-coral"] {
  --app-primary: #5E6472;
  --app-primary-hover: #484D58;

  --app-accent: #AED9E0;
  --app-accent-hover: #5E6472;

  --app-bg: #FAF7EA;
  --app-surface-soft: #F1FBF8;

  --app-border: #AED9E0;
  --app-border-soft: #D6EAE8;
}


/* User palette 4 */

html[data-seq-theme="aqua-laboratory"] {
  --app-primary: #264653;
  --app-primary-hover: #1B343E;

  --app-accent: #2A9D8F;
  --app-accent-hover: #20776D;

  --app-bg: #F9F7F3;
  --app-surface-soft: #EDF7FA;

  --app-border: #8EC8D5;
  --app-border-soft: #D2E7EC;
}


/* User palette 5 */

html[data-seq-theme="eucalyptus-slate"] {
  --app-primary: #2F3E46;
  --app-primary-hover: #222E34;

  --app-accent: #52796F;
  --app-accent-hover: #354F52;

  --app-bg: #F4F6F3;
  --app-surface-soft: #EDF1EC;

  --app-border: #84A98C;
  --app-border-soft: #CAD2C5;
}


/* User palette 6 */

html[data-seq-theme="clinical-forest"] {
  --app-primary: #1F3D2B;
  --app-primary-hover: #162C1F;

  --app-accent: #2D6A4F;
  --app-accent-hover: #22513D;

  --app-bg: #F8F9FA;
  --app-surface-soft: #F0F7F2;

  --app-border: #A8CDB4;
  --app-border-soft: #CED4DA;
}


/* ============================================================
   Interface sizes
   ============================================================ */

html[data-seq-density="compact"] {
  --app-font-size: 14.5px;
  --app-secondary-size: 13.5px;
  --app-control-size: 14.5px;
  --app-table-size: 13.5px;
  --app-heading-h2-size: 28px;
  --app-heading-h3-size: 21px;
  --app-heading-h4-size: 17px;
  --app-card-padding: 20px;
}

html[data-seq-density="comfortable"] {
  --app-font-size: 16.5px;
  --app-secondary-size: 15.5px;
  --app-control-size: 16.5px;
  --app-table-size: 15.5px;
  --app-heading-h2-size: 32px;
  --app-heading-h3-size: 24px;
  --app-heading-h4-size: 19px;
  --app-card-padding: 28px;
}

html[data-seq-density="large"] {
  --app-font-size: 18px;
  --app-secondary-size: 17px;
  --app-control-size: 17.5px;
  --app-table-size: 16.5px;
  --app-heading-h2-size: 36px;
  --app-heading-h3-size: 27px;
  --app-heading-h4-size: 21px;
  --app-card-padding: 34px;
}


/* ============================================================
   Global readability
   ============================================================ */

html[data-seq-theme] body {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;

  font-family:
    "Segoe UI",
    Inter,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  font-size: var(--app-font-size);
  line-height: 1.5;
}

html[data-seq-theme] body p,
html[data-seq-theme] body li {
  font-size: var(--app-font-size);
}

html[data-seq-theme] body h2 {
  color: var(--app-text);
  font-size: var(--app-heading-h2-size);
  font-weight: 750;
}

html[data-seq-theme] body h3 {
  color: var(--app-primary);
  font-size: var(--app-heading-h3-size);
  font-weight: 700;
}

html[data-seq-theme] body h4 {
  color: var(--app-text);
  font-size: var(--app-heading-h4-size);
  font-weight: 700;
}

html[data-seq-theme] body .app-subtitle,
html[data-seq-theme] body .help-block,
html[data-seq-theme] body .text-muted {
  color: var(--app-text-secondary) !important;
  font-size: var(--app-secondary-size);
}


/* Cards */

html[data-seq-theme] body .content-card,
html[data-seq-theme] body .well {
  color: var(--app-text);

  background: var(--app-surface);

  border: 1px solid var(--app-border);
  border-radius: 10px;

  box-shadow:
    0 2px 7px rgba(30, 50, 55, 0.05),
    0 8px 22px rgba(30, 50, 55, 0.025);
}


/* Forms */

html[data-seq-theme] body label,
html[data-seq-theme] body .control-label {
  color: var(--app-text);

  font-size: 15.5px;
  font-weight: 650;
}

html[data-seq-theme] body .form-control {
  min-height: 41px;

  color: var(--app-text);
  background: #FFFFFF;

  border: 1px solid #9FB3BA;
  border-radius: 6px;

  font-size: var(--app-control-size);

  box-shadow: none;
}

html[data-seq-theme] body .form-control:hover {
  border-color: var(--app-accent);
}

html[data-seq-theme] body .form-control:focus {
  border-color: var(--app-primary);

  box-shadow:
    0 0 0 3px rgba(7, 85, 79, 0.10);
}

html[data-seq-theme] body input[type="radio"],
html[data-seq-theme] body input[type="checkbox"] {
  accent-color: var(--app-accent);
}


/* Buttons */

html[data-seq-theme] body .btn {
  font-size: 15.5px;
  font-weight: 650;

  border-radius: 6px;
}

html[data-seq-theme] body .btn-primary {
  color: #FFFFFF;

  background: var(--app-primary);
  border-color: var(--app-primary);
}

html[data-seq-theme] body .btn-primary:hover,
html[data-seq-theme] body .btn-primary:focus {
  color: #FFFFFF;

  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}


/* Secondary actions:
   Show components / Choose genomes / Edit etc.
*/

html[data-seq-theme] body .btn-default {
  color: var(--app-primary);

  background: #FFFFFF;

  border: 1.5px solid var(--app-accent);
}

html[data-seq-theme] body .btn-default:hover,
html[data-seq-theme] body .btn-default:focus {
  color: #FFFFFF;

  background: var(--app-accent-hover);
  border-color: var(--app-accent-hover);
}


/* Delete = neutral, not bright red */

html[data-seq-theme] body .btn-danger {
  color: #40545C;

  background: #FFFFFF;

  border: 1.5px solid #82959C;
}

html[data-seq-theme] body .btn-danger:hover,
html[data-seq-theme] body .btn-danger:focus {
  color: #FFFFFF;

  background: #53666D;
  border-color: #53666D;
}


/* Tables */

html[data-seq-theme] body table,
html[data-seq-theme] body .ReactTable,
html[data-seq-theme] body .rt-table {
  color: var(--app-text);

  font-size: var(--app-table-size);
}

html[data-seq-theme] body .rt-th {
  color: #314B55;

  font-size: 13.5px;
  font-weight: 750;
}

html[data-seq-theme] body .rt-td {
  color: var(--app-text);

  font-size: var(--app-table-size);
}


/* Existing MetaCache design follows global palette */

html[data-seq-theme] .seqstack-theme {
  --seq-page: var(--app-bg);
  --seq-page-soft: var(--app-bg);

  --seq-panel: var(--app-surface);
  --seq-panel-soft: var(--app-surface-soft);

  --seq-border: var(--app-border);
  --seq-border-soft: var(--app-border-soft);

  --seq-text: var(--app-text);
  --seq-text-strong: var(--app-text);
  --seq-text-secondary: var(--app-text-secondary);
  --seq-text-muted: var(--app-text-muted);

  --seq-teal: var(--app-primary);
  --seq-teal-bright: var(--app-primary);
  --seq-lime: var(--app-accent);

  --seq-action: var(--app-primary);
  --seq-action-hover: var(--app-primary-hover);

  color: var(--app-text);

  font-size: var(--app-font-size);
}


/* ============================================================
   Samples layout
   ============================================================ */

.seq-samples-sidebar {
  padding: 14px 12px;
}

.seq-samples-sidebar .control-label {
  font-size: 12px;
}

.seq-samples-sidebar .form-group {
  margin-bottom: 10px;
}

.seq-samples-sidebar hr {
  margin: 12px 0;
}

/* ============================================================
   Account Appearance
   ============================================================ */

.seq-account-card {
  max-width: 1250px;
}

.seq-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(235px, 1fr));

  gap: 14px;

  margin: 16px 0 28px;
}

.seq-theme-card {
  padding: 15px;

  color: var(--app-text);
  text-align: left;

  background: #FFFFFF;

  border: 2px solid var(--app-border-soft);
  border-radius: 10px;

  cursor: pointer;

  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.seq-theme-card:hover {
  border-color: var(--app-accent);
  transform: translateY(-1px);
}

.seq-theme-card.active {
  border-color: var(--app-primary);

  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-primary) 18%, transparent);
}

.seq-theme-preview {
  display: flex;

  height: 36px;

  margin-bottom: 12px;

  overflow: hidden;

  border: 1px solid var(--app-border-soft);
  border-radius: 6px;
}

.seq-theme-preview-color {
  flex: 1;
}

.seq-theme-card-name {
  margin-bottom: 4px;

  font-size: 16px;
  font-weight: 750;
}

.seq-theme-card-description {
  color: var(--app-text-secondary);

  font-size: 14px;
  line-height: 1.4;
}

.seq-density-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(200px, 1fr));

  gap: 12px;
}

.seq-density-card {
  display: flex;
  flex-direction: column;

  gap: 5px;

  padding: 15px;

  color: var(--app-text);
  text-align: left;

  background: #FFFFFF;

  border: 2px solid var(--app-border-soft);
  border-radius: 9px;

  cursor: pointer;
}

.seq-density-card:hover {
  border-color: var(--app-accent);
}

.seq-density-card.active {
  border-color: var(--app-primary);
  background: var(--app-surface-soft);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--app-primary) 18%, transparent);
}

.seq-density-card strong {
  font-size: 16px;
}

.seq-density-card span {
  color: var(--app-text-secondary);

  font-size: 14px;
}


@media (max-width: 950px) {
  .seq-theme-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 650px) {
  .seq-theme-grid,
  .seq-density-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Global sidebar actions
   ============================================================ */

html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn {
  color: #FFFFFF !important;

  /* Same dark tone as the main page heading */
  background: var(--app-text) !important;

  border: 0 !important;
  border-color: transparent !important;

  box-shadow: none !important;

  font-weight: 650;
}

html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn:hover,
html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn:focus,
html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn:active {
  color: #FFFFFF !important;

  background:
    color-mix(
      in srgb,
      var(--app-text) 88%,
      black
    ) !important;

  border: 0 !important;
  border-color: transparent !important;

  box-shadow: none !important;
}

/* SeqStack interaction weight and MetaCache action sizing */

/* All standard buttons: slightly less bold */
html[data-seq-theme] body .btn,
html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn {
  font-weight: 450 !important;
}

/* Status badges such as ready / running / failed */
html[data-seq-theme] body .seq-status,
html[data-seq-theme] body .metascope-status {
  font-weight: 450 !important;
}

/* Large primary MetaCache build action */
html[data-seq-theme] body .metacache-build-action {
  margin-top: 18px;
  margin-bottom: 20px;
}

html[data-seq-theme] body .metacache-build-button {
  width: 100%;

  min-height: 72px;

  color: #FFFFFF !important;
  background: var(--app-text) !important;

  border: 0 !important;
  border-radius: 8px;

  font-size: 18px !important;
  font-weight: 450 !important;

  box-shadow: none !important;
}

html[data-seq-theme] body .metacache-build-button:hover,
html[data-seq-theme] body .metacache-build-button:focus,
html[data-seq-theme] body .metacache-build-button:active {
  color: #FFFFFF !important;

  background:
    color-mix(
      in srgb,
      var(--app-text) 88%,
      black
    ) !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* Show taxa / Delete: approximately one third smaller */
html[data-seq-theme] body .metacache-table-action {
  padding: 3px 6px !important;

  font-size: 11px !important;
  font-weight: 450 !important;

  line-height: 1.25;
}

/* Global Reactable alignment */

/* All columns except the first are centered. */
html[data-seq-theme] body .ReactTable .rt-th,
html[data-seq-theme] body .ReactTable .rt-td {
  text-align: center;
  justify-content: center;
}

html[data-seq-theme] body .ReactTable .rt-th-content {
  width: 100%;
  text-align: center;
}

/* First column is the row identifier and stays left aligned. */
html[data-seq-theme] body .ReactTable .rt-th:first-child,
html[data-seq-theme] body .ReactTable .rt-td:first-child {
  text-align: left;
  justify-content: flex-start;
}

html[data-seq-theme] body
.ReactTable .rt-th:first-child .rt-th-content {
  text-align: left;
}

/* Row identifiers are emphasized only slightly. */
html[data-seq-theme] body .seq-row-name {
  font-weight: 600;
}

/* ============================================================
   SeqStack navigation and action polish
   ============================================================ */

:root {
  --seq-gold: #B79A43;
  --seq-gold-hover: #A98C38;
}


/* ------------------------------------------------------------
   Page
   ------------------------------------------------------------ */

html[data-seq-theme],
html[data-seq-theme] body {
  background: var(--app-bg) !important;
}


/* ------------------------------------------------------------
   Primary / dark action buttons
   Dark green normally, gold on hover
   ------------------------------------------------------------ */

html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn:hover,

html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn:focus,

html[data-seq-theme] body
.btn-primary:hover,

html[data-seq-theme] body
.btn-primary:focus,

html[data-seq-theme] body
.metacache-build-button:hover,

html[data-seq-theme] body
.metacache-build-button:focus {
  color: #FFFFFF !important;

  background: var(--seq-gold) !important;

  border-color: transparent !important;

  box-shadow: none !important;
}

html[data-seq-theme] body
div[class*="col-sm-"] > form.well .btn:active,

html[data-seq-theme] body
.btn-primary:active,

html[data-seq-theme] body
.metacache-build-button:active {
  color: #FFFFFF !important;

  background: var(--seq-gold-hover) !important;

  border-color: transparent !important;

  box-shadow: none !important;
}


/* ------------------------------------------------------------
   MetaCache main Build action
   Half width and centered
   ------------------------------------------------------------ */

html[data-seq-theme] body
.metacache-build-action {
  display: flex;

  justify-content: center;

  width: 100%;
}

html[data-seq-theme] body
.metacache-build-button {
  width: 50% !important;

  max-width: 620px;
}


/* ------------------------------------------------------------
   Main navigation
   Clean scientific white navbar
   ------------------------------------------------------------ */

html[data-seq-theme] body
.navbar,
html[data-seq-theme] body
.navbar-default,
html[data-seq-theme] body
.navbar-inverse {
  min-height: 58px;

  margin-bottom: 22px;

  background: var(--app-surface) !important;

  border: 0 !important;
  border-bottom: 1px solid var(--app-primary) !important;

  border-radius: 0 !important;

  box-shadow:
    0 3px 12px rgba(16, 45, 53, 0.055);
}


/* Brand */

html[data-seq-theme] body
.navbar-default .navbar-brand,
html[data-seq-theme] body
.navbar-inverse .navbar-brand,
html[data-seq-theme] body
.navbar .navbar-brand {
  color: var(--app-text) !important;

  font-weight: 650;

  letter-spacing: 0.01em;

  padding-top: 19px;
  padding-bottom: 19px;
}


/* Navigation items */

html[data-seq-theme] body
.navbar-default .navbar-nav > li > a,

html[data-seq-theme] body
.navbar-inverse .navbar-nav > li > a,

html[data-seq-theme] body
.navbar .navbar-nav > li > a {
  position: relative;

  color: #354F52 !important;

  background: transparent !important;

  font-weight: 500;

  padding-top: 19px;
  padding-bottom: 19px;

  transition:
    color 140ms ease,
    background 140ms ease;
}


/* Tab underline (above navbar border) */

html[data-seq-theme] body
.navbar-nav > li > a::after {
  content: "";

  position: absolute;

  left: 18px;
  right: 18px;
  bottom: 5px;

  height: 2px;

  background: var(--seq-gold);

  border-radius: 2px;

  transform: scaleX(0);
  transform-origin: center bottom;

  transition: transform 140ms ease;

  pointer-events: none;
  z-index: 1;
}


/* Hover */

html[data-seq-theme] body
.navbar-nav > li > a:hover {
  color: var(--app-text) !important;
}

html[data-seq-theme] body
.navbar-nav > li > a:hover::after,
html[data-seq-theme] body
.navbar-nav > li.dropdown:hover > a.dropdown-toggle::after,
html[data-seq-theme] body
.navbar-nav > li.dropdown.open > a.dropdown-toggle::after {
  transform: scaleX(1);
}


/* Active page */

html[data-seq-theme] body
.navbar-nav > .active > a,
html[data-seq-theme] body
.navbar-nav > .active > a:hover,
html[data-seq-theme] body
.navbar-nav > .active > a:focus {
  color: var(--app-text) !important;

  background: rgba(183, 154, 67, 0.07) !important;

  font-weight: 600;
}

html[data-seq-theme] body
.navbar-nav > .active > a::after,
html[data-seq-theme] body
.navbar-nav > li.dropdown.active > a.dropdown-toggle::after {
  transform: scaleX(1);
}


/* Dropdowns */

html[data-seq-theme] body
.navbar .dropdown-menu {
  margin-top: 4px;

  background: #FFFFFF;

  border: 1px solid rgba(16, 45, 53, 0.10);

  border-radius: 9px;

  box-shadow:
    0 8px 24px rgba(16, 45, 53, 0.10);

  padding: 6px;
}

html[data-seq-theme] body
.navbar .dropdown-menu > li > a {
  color: #354F52;

  border-radius: 6px;

  padding: 8px 12px;
}

html[data-seq-theme] body
.navbar .dropdown-menu > li > a:hover,
html[data-seq-theme] body
.navbar .dropdown-menu > li > a:focus {
  color: var(--app-text);

  background: rgba(183, 154, 67, 0.10);
}

/* DB Management: reveal submenu on hover */
html[data-seq-theme] body
.navbar-nav > li.dropdown:hover > .dropdown-menu {
  display: block;
}

html[data-seq-theme] body
.navbar-nav > li.dropdown:hover > a.dropdown-toggle,
html[data-seq-theme] body
.navbar-nav > li.dropdown.open > a.dropdown-toggle {
  color: var(--app-text);
  background: rgba(183, 154, 67, 0.10);
}

html[data-seq-theme] body
.navbar-nav > li.dropdown .dropdown-menu {
  min-width: 250px;
}

html[data-seq-theme] body
.navbar-nav > li.dropdown .dropdown-menu > li.active > a,
html[data-seq-theme] body
.navbar-nav > li.dropdown .dropdown-menu > li.active > a:hover,
html[data-seq-theme] body
.navbar-nav > li.dropdown .dropdown-menu > li.active > a:focus {
  color: var(--app-primary);
  background: rgba(7, 85, 79, 0.08);
  font-weight: 600;
}


/* Navbar tab icons */
.seq-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  color: var(--app-primary, #07554f);
  opacity: 0.95;
  flex-shrink: 0;
  position: relative;
  top: -0.5px;
}

.seq-nav-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.navbar-nav > li > a:hover .seq-nav-icon,
.navbar-nav > li.dropdown .dropdown-menu > li > a:hover .seq-nav-icon {
  color: var(--app-primary-hover);
  opacity: 1;
}

.navbar-nav > .active > a .seq-nav-icon,
.navbar-nav > li.dropdown .dropdown-menu > li.active > a .seq-nav-icon {
  color: var(--app-accent);
  opacity: 1;
}

.navbar-nav > li.dropdown > a.dropdown-toggle .seq-nav-icon {
  color: var(--app-primary);
}


/* DEV session banner */
.seq-dev-session-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px solid rgba(184, 134, 11, 0.35);
  border-radius: 8px;
  background: rgba(255, 248, 225, 0.95);
  color: #5c4a1f;
  font-size: 0.88rem;
  line-height: 1.35;
}

.seq-dev-session-banner-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #b8860b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Developer user-view preview banner */
.seq-user-view-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px solid rgba(7, 85, 79, 0.25);
  border-radius: 8px;
  background: rgba(232, 245, 243, 0.95);
  color: #1e4a45;
  font-size: 0.88rem;
  line-height: 1.35;
}

.seq-user-view-banner-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #07554f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Developer style review: hide yellow DEV + green USER VIEW bars */
body[data-seq-hide-view-banners="1"] .seq-dev-session-banner,
body[data-seq-hide-view-banners="1"] .seq-user-view-banner {
  display: none !important;
}

.seq-dev-login-hint {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(184, 134, 11, 0.35);
  background: rgba(255, 248, 225, 0.95);
  color: #5c4a1f;
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: left;
}


/* Developer-only markers (yellow star) */
.seq-dev-only-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  margin-left: 6px;
  border-radius: 999px;
  background: #f5c518;
  color: #5c4a1f;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.42);
  flex: 0 0 auto;
}

.seq-dev-only-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}

.seq-dev-only-nav-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.seq-dev-only-nav-text {
  min-width: 0;
}

.navbar-nav .seq-dev-only-badge,
.navbar-nav .seq-dev-only-badge-nav {
  margin-left: 6px;
  vertical-align: middle;
}

.navbar-nav > li > a .seq-dev-only-badge-nav {
  pointer-events: none;
}

.navbar-nav > li.dropdown .dropdown-menu .seq-dev-only-nav-title {
  align-items: center;
}

.seq-dev-only-control .seq-dev-only-label {
  justify-content: center;
  width: 100%;
}


/* =========================================================
   SEQSTACK NAVBAR BRANDING
   ========================================================= */

html[data-seq-theme] body .navbar-default {
  background: var(--app-surface) !important;
  border: 0;
  border-bottom: 1px solid var(--app-primary) !important;
  box-shadow: 0 2px 10px rgba(16, 45, 53, 0.06);
}

html[data-seq-theme] body .navbar-default .navbar-header {
  display: flex;
  align-items: center;
}

html[data-seq-theme] body .navbar-default .navbar-brand {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 7px 22px 7px 14px;
  margin-left: 0;
}

html[data-seq-theme] body .seqstack-navbar-logo {
  display: flex;
  align-items: center;
}

html[data-seq-theme] body .seqstack-navbar-logo img {
  display: block;
  width: 190px;
  height: auto;
  max-height: 50px;
  object-fit: contain;
}

html[data-seq-theme] body .navbar-default .navbar-nav > li > a {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 0;
  padding-bottom: 0;
  color: var(--app-text);
  font-weight: 500;
  border-bottom: none !important;
  transition:
    color 140ms ease,
    background-color 140ms ease;
}

html[data-seq-theme] body .navbar-default .navbar-nav > li > a:hover,
html[data-seq-theme] body .navbar-default .navbar-nav > li > a:focus {
  color: var(--app-text);
  background: rgba(183, 154, 67, 0.07);
}

html[data-seq-theme] body .navbar-default .navbar-nav > .active > a,
html[data-seq-theme] body .navbar-default .navbar-nav > .active > a:hover,
html[data-seq-theme] body .navbar-default .navbar-nav > .active > a:focus {
  color: var(--app-text);
  background: rgba(183, 154, 67, 0.10);
}

html[data-seq-theme] body .navbar-default .navbar-nav > .open > a,
html[data-seq-theme] body .navbar-default .navbar-nav > .open > a:hover,
html[data-seq-theme] body .navbar-default .navbar-nav > .open > a:focus {
  background: rgba(183, 154, 67, 0.08);
  color: var(--app-text);
}

html[data-seq-theme] body .navbar-default .dropdown-menu {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 45, 53, 0.10);
}

html[data-seq-theme] body .navbar-default .dropdown-menu > li > a {
  padding: 9px 16px;
  color: var(--app-text);
}

html[data-seq-theme] body .navbar-default .dropdown-menu > li > a:hover,
html[data-seq-theme] body .navbar-default .dropdown-menu > li > a:focus {
  background: rgba(183, 154, 67, 0.08);
}

/* SeqStack brand size - structural, independent of active theme */
.seqstack-navbar-logo {
  display: flex;
  align-items: center;
  height: 58px;
}

.seqstack-navbar-logo img {
  display: block !important;
  width: 175px !important;
  max-width: 175px !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

/* SeqStack logo - very compact */
.seqstack-navbar-logo img {
  width: 9px !important;
  max-width: 9px !important;
  max-height: 9px !important;
  height: auto !important;
}

/* Final SeqStack navbar logo sizing */
body .navbar .navbar-brand .seqstack-navbar-logo img {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Final SeqStack navbar logo sizing */
body .navbar .navbar-brand .seqstack-navbar-logo img {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* SeqStack navbar logo sizing */
body .navbar .navbar-brand .seqstack-navbar-logo img {
  height: 90px !important;
  max-height: 90px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* =========================================================
   SEQSTACK NAVBAR FINAL LAYOUT
   ========================================================= */

#seqstack-brand-image {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: none !important;
}

.navbar-default .navbar-brand {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
}

/* Give the navigation some breathing room after the logo */
.navbar-default .navbar-nav {
  margin-left: 28px !important;
}

/* =========================================================
   SEQSTACK ACTIVITY / PROGRESS COMPONENT
   ========================================================= */

.seq-progress {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 10px;
  background: #f8fafc;
}

.seq-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.seq-progress-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.seq-progress-state {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(102, 132, 66, 0.10);
  color: #526b35;
  font-size: 0.76rem;
  font-weight: 650;
}

.seq-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid rgba(7, 85, 79, 0.18);
  border-top-color: #07554f;
  border-radius: 50%;
  animation: seqstack-spin 0.75s linear infinite;
}

.seq-activity-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #668442;
}

.seq-progress-track {
  position: relative;
  height: 6px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.seq-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: #07554f;
  transition: width 180ms ease;
}

.seq-progress-indeterminate .seq-progress-bar {
  position: absolute;
  width: 36%;
  animation: seqstack-progress-indeterminate 1.25s ease-in-out infinite;
}

.seq-progress-percent {
  margin-top: 4px;
  text-align: right;
  color: #667085;
  font-size: 0.76rem;
}

.seq-activity-message {
  margin-top: 9px;
  color: #667085;
  font-size: 0.84rem;
  line-height: 1.4;
}

.seq-activity-success .seq-activity-dot {
  background: #668442;
}

.seq-activity-warning .seq-activity-dot {
  background: #b7791f;
}

.seq-activity-failed .seq-activity-dot {
  background: #b42318;
}

.seq-activity-failed .seq-progress-state {
  background: rgba(180, 35, 24, 0.08);
  color: #b42318;
}

.seq-activity-warning .seq-progress-state {
  background: rgba(183, 121, 31, 0.10);
  color: #8a5b17;
}

@keyframes seqstack-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes seqstack-progress-indeterminate {
  0% {
    left: -38%;
  }

  100% {
    left: 102%;
  }
}

/* =============================================================================
   SeqStack reusable metric cards
   Design C
   ============================================================================= */

.seq-metric-card-grid {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  width: 100%;
}


/* -----------------------------------------------------------------------------
   Standard card
   ----------------------------------------------------------------------------- */

.seq-metric-card {
  position: relative;

  display: flex;
  flex: 0 1 160px;
  flex-direction: column;

  box-sizing: border-box;

  width: 160px;
  min-width: 145px;
  height: 170px;

  padding: 17px 16px 15px 19px;

  overflow: visible;

  background: #ffffff;

  border:
    1px solid rgba(7, 85, 79, 0.13);

  border-left:
    5px solid #07554f;

  border-radius: 12px;

  box-shadow:
    0 3px 6px rgba(16, 24, 40, 0.08),
    0 9px 21px rgba(7, 85, 79, 0.15),
    0 16px 34px rgba(7, 85, 79, 0.09);
}


.seq-metric-card-title {
  color: #344054;

  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.25;
}


.seq-metric-card-body {
  display: flex;
  flex: 1;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}


.seq-metric-card-value {
  color: #07554f;

  font-size: 2rem;
  font-weight: 780;
  line-height: 1.05;
}


.seq-metric-card-subtitle {
  margin-top: 8px;

  color: #667085;

  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}


.seq-metric-card-icon {
  margin-bottom: 9px;

  color: #07554f;

  font-size: 1.6rem;
}


/* -----------------------------------------------------------------------------
   Prominent critical cards
   ----------------------------------------------------------------------------- */

.seq-metric-card-prominent {
  flex-basis: 205px;

  width: 205px;
  min-width: 185px;
  height: 220px;

  padding: 19px 18px 17px 22px;

  border:
    1px solid rgba(102, 132, 66, 0.26);

  border-left:
    6px solid #668442;

  border-radius: 14px;

  box-shadow:
    0 4px 8px rgba(16, 24, 40, 0.09),
    0 12px 28px rgba(7, 85, 79, 0.20),
    0 20px 42px rgba(102, 132, 66, 0.13);

  transform: translateY(-4px);
}


.seq-metric-card-prominent
.seq-metric-card-title {
  color: #668442;

  font-size: 0.98rem;
  font-weight: 760;

  text-transform: uppercase;
  letter-spacing: 0.025em;
}


.seq-metric-card-prominent
.seq-metric-card-value {
  margin-top: 8px;

  font-size: 1.55rem;
}


/* -----------------------------------------------------------------------------
   Capacity ring
   ----------------------------------------------------------------------------- */

.seq-capacity-ring {
  --seq-capacity-color: #668442;

  width: 100px;
  height: 100px;

  box-sizing: border-box;

  margin: 8px 0 4px;
  padding: 8px;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--seq-capacity-color)
        var(--seq-capacity-fill),
      rgba(7, 85, 79, 0.10) 0
    );
}


.seq-capacity-ring-inner {
  display: flex;

  width: 100%;
  height: 100%;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #ffffff;
}


.seq-capacity-percent {
  color: #668442;

  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}


.seq-capacity-percent-label {
  margin-top: 4px;

  color: #98a2b3;

  font-size: 0.57rem;
  font-weight: 500;
}


/* -----------------------------------------------------------------------------
   Capacity states
   ----------------------------------------------------------------------------- */

.seq-capacity-warning
.seq-capacity-ring {
  --seq-capacity-color: #b7791f;
}


.seq-capacity-warning
.seq-capacity-percent {
  color: #b7791f;
}


.seq-capacity-over
.seq-capacity-ring {
  --seq-capacity-color: #b42318;
}


.seq-capacity-over
.seq-capacity-percent {
  color: #b42318;
}


.seq-capacity-unknown
.seq-capacity-ring {
  --seq-capacity-color: #98a2b3;
}


/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 1050px) {

  .seq-metric-card-grid {
    display: grid;

    grid-template-columns:
      repeat(3, minmax(150px, 1fr));
  }

  .seq-metric-card,
  .seq-metric-card-prominent {
    width: 100%;
    min-width: 0;

    transform: none;
  }
}


@media (max-width: 650px) {

  .seq-metric-card-grid {
    grid-template-columns:
      repeat(2, minmax(130px, 1fr));
  }
}

/* =============================================================================
   SeqStack Metric Cards — larger typography
   ============================================================================= */

/* normale Kacheln */
.seq-metric-card {
  height: 185px !important;
  padding: 18px 16px 16px 20px !important;
}

.seq-metric-card-title {
  font-size: 1.02rem !important;
  font-weight: 740 !important;
  line-height: 1.2 !important;
}

.seq-metric-card-value {
  font-size: 2.45rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.seq-metric-card-subtitle {
  margin-top: 9px !important;
  font-size: 0.82rem !important;
  font-weight: 520 !important;
  line-height: 1.25 !important;
}


/* ---------------------------------------------------------
   große mittlere Disk/RAM-Kacheln
   --------------------------------------------------------- */

.seq-metric-card-prominent {
  height: 235px !important;
  padding: 20px 18px 18px 22px !important;
}

.seq-metric-card-prominent .seq-metric-card-title {
  font-size: 1.10rem !important;
  font-weight: 780 !important;
}

.seq-metric-card-prominent .seq-metric-card-value {
  margin-top: 8px !important;
  font-size: 1.85rem !important;
  font-weight: 800 !important;
}

.seq-metric-card-prominent .seq-metric-card-subtitle {
  font-size: 0.82rem !important;
}


/* ---------------------------------------------------------
   Kapazitätskreise ebenfalls größer
   --------------------------------------------------------- */

.seq-capacity-ring {
  width: 110px !important;
  height: 110px !important;
  padding: 8px !important;
  margin: 9px 0 5px !important;
}

.seq-capacity-percent {
  font-size: 1.85rem !important;
  font-weight: 820 !important;
}

.seq-capacity-percent-label {
  margin-top: 5px !important;
  font-size: 0.68rem !important;
  font-weight: 550 !important;
}

/* =============================================================================
   SeqStack Metric Cards — LARGE TYPOGRAPHY FINAL
   ============================================================================= */

/* Standard metric cards */
.seq-metric-card-title {
  font-size: 1.15rem !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
}

.seq-metric-card-value {
  font-size: 2.8rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em;
}

.seq-metric-card-subtitle {
  margin-top: 10px !important;

  font-size: 0.92rem !important;
  font-weight: 540 !important;
  line-height: 1.25 !important;
}


/* Critical middle cards */
.seq-metric-card-prominent .seq-metric-card-title {
  font-size: 1.22rem !important;
  font-weight: 800 !important;
}

.seq-metric-card-prominent .seq-metric-card-value {
  font-size: 2.05rem !important;
  font-weight: 820 !important;
}

.seq-metric-card-prominent .seq-metric-card-subtitle {
  font-size: 0.90rem !important;
}


/* Capacity circles */
.seq-capacity-ring {
  width: 118px !important;
  height: 118px !important;

  padding: 9px !important;
}

.seq-capacity-percent {
  font-size: 2.05rem !important;
  font-weight: 840 !important;
}

.seq-capacity-percent-label {
  margin-top: 5px !important;

  font-size: 0.73rem !important;
  font-weight: 560 !important;
}

/* =============================================================================
   SeqStack Metric Cards — FINAL LARGE CONTENT
   ============================================================================= */

/* Standard cards: bigger content */
.seq-metric-card {
  height: 200px !important;
  padding: 19px 18px 17px 21px !important;
}

.seq-metric-card-title {
  font-size: 1.28rem !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
}

.seq-metric-card-value {
  font-size: 3.25rem !important;
  font-weight: 840 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
}

.seq-metric-card-subtitle {
  margin-top: 11px !important;

  font-size: 1.00rem !important;
  font-weight: 560 !important;
  line-height: 1.22 !important;
}


/* ---------------------------------------------------------------------------
   Prominent disk / RAM cards
   --------------------------------------------------------------------------- */

.seq-metric-card-prominent {
  height: 250px !important;
  min-width: 200px !important;

  padding: 21px 19px 18px 23px !important;
}

.seq-metric-card-prominent .seq-metric-card-title {
  font-size: 1.30rem !important;
  font-weight: 820 !important;
  line-height: 1.1 !important;
}

.seq-metric-card-prominent .seq-metric-card-value {
  margin-top: 8px !important;

  font-size: 2.35rem !important;
  font-weight: 840 !important;
}

.seq-metric-card-prominent .seq-metric-card-subtitle {
  margin-top: 8px !important;

  font-size: 0.98rem !important;
  font-weight: 560 !important;
}


/* Capacity circles */
.seq-capacity-ring {
  width: 122px !important;
  height: 122px !important;

  padding: 9px !important;
  margin: 9px 0 5px !important;
}

.seq-capacity-percent {
  font-size: 2.30rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.seq-capacity-percent-label {
  margin-top: 5px !important;

  font-size: 0.76rem !important;
  font-weight: 580 !important;
}

/* =============================================================================
   Delete action icon buttons
   ============================================================================= */

.seq-delete-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.seq-delete-btn {
  padding-left: 7px;
  padding-right: 7px;
}

.btn-xs.seq-delete-btn {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* =============================================================================
   SeqStack table status indicators
   ============================================================================= */


/* Common status layout */
.seq-status {
  display: inline-flex !important;

  align-items: center !important;
  gap: 7px !important;

  white-space: nowrap !important;
}


.seq-status .seq-status-dot {
  position: relative;

  display: inline-flex !important;

  flex: 0 0 auto !important;

  width: 18px !important;
  height: 18px !important;

  box-sizing: border-box !important;

  align-items: center !important;
  justify-content: center !important;
}


/* ---------------------------------------------------------------------------
   READY — clean olive-green check
   --------------------------------------------------------------------------- */

.seq-status-ready .seq-status-dot,
.seq-status-finished .seq-status-dot,
.seq-status-completed .seq-status-dot,
.seq-status-success .seq-status-dot {
  border:
    1px solid rgba(102, 132, 66, 0.30) !important;

  border-radius: 50% !important;

  background:
    rgba(102, 132, 66, 0.10) !important;

  box-shadow:
    0 1px 3px rgba(102, 132, 66, 0.08) !important;
}


.seq-status-ready .seq-status-dot::after,
.seq-status-finished .seq-status-dot::after,
.seq-status-completed .seq-status-dot::after,
.seq-status-success .seq-status-dot::after {
  content: "✓";

  position: absolute;

  color: #668442;

  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
}


/* ready text */
.seq-status-ready,
.seq-status-finished,
.seq-status-completed,
.seq-status-success {
  color: #587238 !important;
  font-weight: 650 !important;
}


/* ---------------------------------------------------------------------------
   INCOMPATIBLE — amber warning, still registered
   --------------------------------------------------------------------------- */

.seq-status-incompatible .seq-status-dot {
  border:
    1px solid rgba(184, 134, 11, 0.38) !important;

  border-radius: 50% !important;

  background:
    rgba(184, 134, 11, 0.12) !important;

  box-shadow:
    0 1px 3px rgba(184, 134, 11, 0.10) !important;
}


.seq-status-incompatible .seq-status-dot::after {
  content: "!";

  position: absolute;

  color: #b8860b;

  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
}


.seq-status-incompatible {
  color: #8a6a0b !important;
  font-weight: 650 !important;
}


/* ---------------------------------------------------------------------------
   FAILED
   --------------------------------------------------------------------------- */

.seq-status-failed .seq-status-dot,
.seq-status-error .seq-status-dot {
  border:
    1px solid rgba(180, 35, 24, 0.32) !important;

  border-radius: 50% !important;

  background:
    rgba(180, 35, 24, 0.10) !important;

  box-shadow:
    0 1px 3px rgba(180, 35, 24, 0.08) !important;
}


.seq-status-failed .seq-status-dot::after,
.seq-status-error .seq-status-dot::after {
  content: "×";

  position: absolute;

  color: #b42318;

  font-size: 0.85rem;
  font-weight: 850;
  line-height: 1;
}


.seq-status-failed,
.seq-status-error {
  color: #b42318 !important;
  font-weight: 650 !important;
}


/* ---------------------------------------------------------------------------
   ACTIVE BUILD — small rotating technical ring
   --------------------------------------------------------------------------- */

.seq-status-queued .seq-status-dot,
.seq-status-running .seq-status-dot,
.seq-status-building .seq-status-dot,
.seq-status-starting .seq-status-dot,
.seq-status-indexing .seq-status-dot,
.seq-status-pending .seq-status-dot {
  width: 16px !important;
  height: 16px !important;

  border:
    2px solid rgba(7, 85, 79, 0.16) !important;

  border-top-color:
    #b8860b !important;

  border-right-color:
    #07554f !important;

  border-radius: 50% !important;

  background: transparent !important;

  animation:
    seqstack-status-spin 0.85s linear infinite !important;
}


.seq-status-queued .seq-status-dot::after,
.seq-status-running .seq-status-dot::after,
.seq-status-building .seq-status-dot::after,
.seq-status-starting .seq-status-dot::after,
.seq-status-indexing .seq-status-dot::after,
.seq-status-pending .seq-status-dot::after {
  content: none !important;
}


.seq-status-queued,
.seq-status-running,
.seq-status-building,
.seq-status-starting,
.seq-status-indexing,
.seq-status-pending {
  color: #07554f !important;
  font-weight: 650 !important;
}


@keyframes seqstack-status-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .seq-status-queued .seq-status-dot,
  .seq-status-running .seq-status-dot,
  .seq-status-building .seq-status-dot,
  .seq-status-starting .seq-status-dot,
  .seq-status-indexing .seq-status-dot,
  .seq-status-pending .seq-status-dot {
    animation: none !important;
  }

  .seq-dashboard-progress-bar.is-indeterminate {
    animation: none !important;
  }
}


/* ---------------------------------------------------------------------------
   DASHBOARD JOB PROGRESS
   --------------------------------------------------------------------------- */

.seq-dashboard-progress-track {
  width: 100%;
  height: 18px;
  margin-top: 10px;
  margin-bottom: 6px;
  border-radius: 9px;
  overflow: hidden;
  background: #e5e7eb;
}

.seq-dashboard-progress-bar {
  height: 100%;
  width: 0;
  transition: width 0.3s ease;
}

.seq-dashboard-progress-bar.is-running {
  background: #16a34a;
}

.seq-dashboard-progress-bar.is-waiting {
  background: #ca8a04;
}

.seq-dashboard-progress-bar.is-indeterminate {
  width: 36% !important;
  animation: seq-dashboard-progress-slide 1.2s ease-in-out infinite;
}

.seq-dashboard-job-card + .seq-dashboard-job-card {
  margin-top: 12px;
}

.seq-dashboard-job-card .seq-status-running {
  color: #15803d !important;
}

.seq-dashboard-job-card .seq-status-queued,
.seq-dashboard-job-card .seq-status-pending {
  color: #a16207 !important;
}

.seq-dashboard-job-card .seq-status-failed,
.seq-dashboard-job-card .seq-status-error {
  color: #b42318 !important;
}

@keyframes seq-dashboard-progress-slide {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(320%);
  }
}



/* =============================================================================
   SEQSTACK COMPACT NAVBAR ACTIVITY V2
   ============================================================================= */


/*
   Intentionally tiny:
   - no "Active jobs" heading
   - short job names
   - thin progress bars
   - disappears completely when no worker is active
*/

.seq-compact-activity {
  position: fixed !important;

  top: 4px !important;
  right: 10px !important;

  z-index: 2000 !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  width: 310px !important;
  max-height: 56px !important;

  box-sizing: border-box !important;

  gap:
    3px
    8px !important;

  padding:
    4px
    7px !important;

  overflow: hidden !important;

  border:
    1px solid rgba(
      7,
      85,
      79,
      0.09
    ) !important;

  border-radius: 7px !important;

  background:
    rgba(
      255,
      255,
      255,
      0.90
    ) !important;

  box-shadow:
    0 2px 8px
    rgba(
      16,
      24,
      40,
      0.055
    ) !important;

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  /*
     It is only an indicator, not a control.
     Navbar buttons underneath remain clickable.
  */
  pointer-events: none !important;
}


.seq-active-mini-row {
  min-width: 0 !important;
}


.seq-active-mini-label {
  min-width: 0 !important;

  overflow: hidden !important;

  color: #344054 !important;

  font-size: 9.5px !important;
  font-weight: 650 !important;

  line-height: 1.05 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


.seq-active-mini-track {
  position: relative !important;

  width: 100% !important;
  height: 2.5px !important;

  margin-top: 3px !important;

  overflow: hidden !important;

  border-radius: 999px !important;

  background:
    rgba(
      7,
      85,
      79,
      0.10
    ) !important;
}


.seq-active-mini-bar {
  height: 100% !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      #07554f,
      #668442
    ) !important;

  transition:
    width
    220ms
    ease !important;
}


/* Worker without a real percentage */
.seq-active-mini-indeterminate
.seq-active-mini-bar {
  position: absolute !important;

  top: 0 !important;
  left: -38% !important;

  width: 38% !important;

  animation:
    seq-active-mini-scan
    1.05s
    ease-in-out
    infinite !important;
}


@keyframes seq-active-mini-scan {
  0% {
    left: -38%;
  }

  100% {
    left: 102%;
  }
}


@media (prefers-reduced-motion: reduce) {
  .seq-active-mini-indeterminate
  .seq-active-mini-bar {
    left: 31% !important;

    animation:
      none !important;
  }
}


/*
   Slightly narrower fallback.
   On normal desktop width the monitor stays completely inside navbar height.
*/
@media (max-width: 1200px) {
  .seq-compact-activity {
    width: 245px !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}

/* =============================================================================
   NON-FLICKERING ACTIVE JOBS HOST V3
   ============================================================================= */

.seq-compact-activity-host {
  position: fixed !important;

  top: 4px !important;
  right: 10px !important;

  z-index: 2000 !important;

  display: none;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  width: 310px;
  max-height: 56px;

  box-sizing: border-box;

  gap: 3px 8px;

  padding: 4px 7px;

  overflow: hidden;

  border:
    1px solid rgba(7, 85, 79, 0.09);

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.90);

  box-shadow:
    0 2px 8px
    rgba(16, 24, 40, 0.055);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  pointer-events: none;
}


.seq-compact-activity-host.seq-compact-activity-visible {
  display: grid;
}


/*
   The old renderUI container must no longer participate
   if stale CSS remains lower in the file.
*/
.seq-compact-activity {
  display: none !important;
}


/*
   Existing rows are retained in the DOM.
   Only bar width changes.
*/
.seq-compact-activity-host
.seq-active-mini-bar {
  transition:
    width 350ms ease !important;
}


@media (max-width: 1200px) {
  .seq-compact-activity-host {
    width: 245px;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =============================================================================
   Food-relevance row highlighting (MetaCache output tables)
   ============================================================================= */

.seq-food-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 12px;
}

.seq-food-legend-label {
  color: #667085;
  font-size: 12px;
  margin-right: 4px;
}

.seq-food-badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.seq-food-species-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.seq-taxonomy-species-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.seq-taxonomy-icon {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
}

.seq-taxonomy-species-text {
  min-width: 0;
  line-height: 1.25;
}

.seq-food-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  color: var(--seq-food-accent, #667085);
  background-color: var(--seq-food-fill, #f2f4f7);
  border: 1px solid var(--seq-food-accent, #d0d5dd);
}

.seq-food-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(16, 24, 40, 0.12);
  vertical-align: middle;
}

.seq-food-color-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.seq-food-color-control input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

table.seq-food-species-table tbody tr.seq-food-row > td {
  background-color: transparent;
}

table.seq-food-species-table tbody tr.seq-food-row > td.seq-food-species-name {
  background-color: var(--seq-food-fill) !important;
  box-shadow: inset 3px 0 0 var(--seq-food-accent);
}

table.seq-food-species-table tbody tr.seq-food-row:hover > td.seq-food-species-name {
  filter: brightness(0.97);
}

.seq-food-icon-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.seq-food-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.seq-food-icon-td {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.seq-classification-bar {
  cursor: help;
}

.seq-classification-bar-track {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background: #d1d5db;
  margin-bottom: 4px;
}

.seq-classification-bar-unknown {
  background: #d1d5db;
}

.seq-classification-bar-label {
  font-size: 11px;
  white-space: nowrap;
  color: #475467;
}

.seq-classification-overview-card {
  border-width: 1.5px;
}

.seq-metric-card.seq-metric-card-classification {
  border-width: 1.5px;
}

.seq-metric-card.seq-metric-card-classification.is-good {
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.18);
}

.seq-metric-card.seq-metric-card-classification.is-review {
  box-shadow: inset 0 0 0 1px rgba(202, 138, 4, 0.22);
}

.seq-metric-card.seq-metric-card-classification.is-poor {
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.20);
}

.seq-classification-overview-note {
  margin: 0 0 14px;
}

.seq-classification-overview-status {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
}

.seq-classification-overview-status.is-good {
  border-color: rgba(22, 163, 74, 0.40);
  color: #166534;
}

.seq-classification-overview-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.seq-classification-overview-icon {
  flex: 0 0 auto;
  display: block;
}

.seq-classification-overview-title {
  font-size: 15px;
  line-height: 1.3;
  color: inherit;
}

.seq-classification-overview-title strong {
  font-weight: 750;
  letter-spacing: 0.02em;
}

.seq-classification-overview-warning {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
}

.seq-classification-overview-warning.is-review {
  border-color: rgba(202, 138, 4, 0.45);
  color: #7a5a05;
}

.seq-classification-overview-warning.is-poor {
  border-color: rgba(220, 38, 38, 0.45);
  color: #991b1b;
}

.seq-classification-overview-status p,
.seq-classification-overview-warning p {
  margin: 6px 0 0;
}

.seq-classification-overview-caveat {
  color: #475467 !important;
  font-size: 13px;
}

.seq-food-info-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seq-food-info-block p {
  margin: 6px 0 0;
}

.seq-food-info-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}