html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
.brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: .01em;
}

.request-entry-scroll {
    max-width: 100%;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
}

.request-entry-table {
    min-width: 2200px;
}

.request-entry-table th,
.request-entry-table td {
    white-space: nowrap;
}

.request-entry-table input:not([type="checkbox"]),
.request-entry-table select {
    min-width: 140px;
}

/* Keep the wide Update Items grid and its horizontal scrollbar inside the
   viewport while the rows scroll independently. */
.update-grid-scroll {
    max-height: calc(100vh - 330px);
    min-height: 220px;
    overflow: auto;
    overscroll-behavior: contain;
}

.update-grid-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--parallel-surface);
    box-shadow: 0 1px 0 var(--parallel-border);
}

.backend-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.backend-data-table {
    min-width: 1200px;
}

.backend-data-table th,
.backend-data-table td {
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Parallel-inspired visual system with persistent light/dark mode. */
:root {
  --parallel-ink: #17231f;
  --parallel-muted: #66736d;
  --parallel-paper: #f5f4ee;
  --parallel-surface: #ffffff;
  --parallel-border: #dce1d9;
  --parallel-accent: #b7f34a;
  --parallel-accent-dark: #739d22;
  --parallel-link: #356449;
  --parallel-shadow: 0 18px 50px rgba(23, 35, 31, .08);
  --bs-body-color: var(--parallel-ink);
  --bs-body-bg: var(--parallel-paper);
  --bs-secondary-color: var(--parallel-muted);
  --bs-border-color: var(--parallel-border);
  --bs-primary: #234f38;
  --bs-primary-rgb: 35, 79, 56;
  --bs-link-color: var(--parallel-link);
  --bs-link-hover-color: #1a3d2a;
}

html[data-theme="dark"] {
  --parallel-ink: #edf4eb;
  --parallel-muted: #a9b7ae;
  --parallel-paper: #101713;
  --parallel-surface: #19231d;
  --parallel-border: #33443a;
  --parallel-accent: #c4fb59;
  --parallel-accent-dark: #9dce37;
  --parallel-link: #c4fb59;
  --parallel-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --bs-body-color: var(--parallel-ink);
  --bs-body-bg: var(--parallel-paper);
  --bs-secondary-color: var(--parallel-muted);
  --bs-border-color: var(--parallel-border);
  --bs-primary: #c4fb59;
  --bs-primary-rgb: 196, 251, 89;
  --bs-link-color: var(--parallel-link);
  --bs-link-hover-color: #e1ffae;
}

html { position: relative; min-height: 100%; }
body {
  margin-bottom: 60px;
  background: var(--parallel-paper);
  color: var(--parallel-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .005em;
}
h1, h2, h3, h4, .navbar-brand { font-weight: 750; letter-spacing: -.035em; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
a { transition: color .2s ease, opacity .2s ease; }
.app-navbar {
  position: relative;
  z-index: 1030;
  background: color-mix(in srgb, var(--parallel-surface) 92%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--parallel-border);
}
.navbar-brand { color: var(--parallel-ink) !important; }
.navbar-brand span { font-size: 1.08rem; }
.navbar .nav-link { color: var(--parallel-muted); font-size: .82rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--parallel-ink); }
.app-navbar .nav-link.active { color: var(--parallel-accent-dark) !important; border-bottom: 3px solid var(--parallel-accent-dark); }
html[data-theme="dark"] .app-navbar .nav-link.active { color: var(--parallel-accent) !important; border-bottom-color: var(--parallel-accent); }
.navbar-toggler { border-color: var(--parallel-border); }
.brand-logo { width: 36px; height: 36px; border-radius: 12px; box-shadow: 0 5px 14px rgba(183, 243, 74, .25); }
.theme-toggle { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--parallel-border); border-radius: 999px; padding: .4rem .7rem; background: transparent; color: var(--parallel-ink); font-size: .78rem; font-weight: 700; cursor: pointer; }
.theme-toggle:hover { border-color: var(--parallel-accent-dark); background: var(--parallel-surface); }
.notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--parallel-border); border-radius: 50%; text-decoration: none; font-size: 1rem; }
.notification-bell:hover { background: var(--parallel-surface); border-color: var(--parallel-accent-dark); }
.notification-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #d93025; color: #fff !important; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; }
main { min-height: calc(100vh - 190px); }
.landing-page { max-width: 1100px; margin: 2rem auto; padding: clamp(2rem, 7vw, 7rem) 1.5rem; border-radius: 32px; background: radial-gradient(circle at 90% 10%, rgba(183,243,74,.28), transparent 35%), var(--parallel-surface); box-shadow: var(--parallel-shadow); }
.landing-page h1 { max-width: 760px; margin: 0 auto 1rem; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .92; }
.landing-page .lead { max-width: 620px; margin: 0 auto 2rem; color: var(--parallel-muted); font-size: 1.15rem; }
.card { background: var(--parallel-surface); border-color: var(--parallel-border); border-radius: 18px; box-shadow: var(--parallel-shadow); }
.table-responsive { border-color: var(--parallel-border); border-radius: 16px; box-shadow: var(--parallel-shadow); }
.table { --bs-table-bg: var(--parallel-surface); --bs-table-color: var(--parallel-ink); --bs-table-border-color: var(--parallel-border); margin-bottom: 0; }
.table thead th { background: color-mix(in srgb, var(--parallel-accent) 22%, var(--parallel-surface)); color: var(--parallel-ink); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: color-mix(in srgb, var(--parallel-paper) 55%, transparent); }
.form-control, .form-select { background-color: var(--parallel-surface); border-color: var(--parallel-border); color: var(--parallel-ink); border-radius: 10px; }
.form-control:focus, .form-select:focus { background-color: var(--parallel-surface); color: var(--parallel-ink); border-color: var(--parallel-accent-dark); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--parallel-accent) 35%, transparent); }
.form-control::placeholder { color: var(--parallel-muted); }
.btn { border-radius: 999px; font-weight: 750; letter-spacing: .015em; }
.btn-primary { --bs-btn-bg: var(--parallel-ink); --bs-btn-border-color: var(--parallel-ink); --bs-btn-color: var(--parallel-paper); --bs-btn-hover-bg: var(--parallel-accent); --bs-btn-hover-border-color: var(--parallel-accent); --bs-btn-hover-color: #17231f; }
.btn-info { --bs-btn-bg: var(--parallel-accent); --bs-btn-border-color: var(--parallel-accent); --bs-btn-color: #17231f; --bs-btn-hover-bg: var(--parallel-accent-dark); --bs-btn-hover-border-color: var(--parallel-accent-dark); }
.btn-outline-primary { --bs-btn-color: var(--parallel-ink); --bs-btn-border-color: var(--parallel-ink); --bs-btn-hover-bg: var(--parallel-ink); --bs-btn-hover-border-color: var(--parallel-ink); --bs-btn-hover-color: var(--parallel-paper); }
.btn-outline-secondary { --bs-btn-color: var(--parallel-ink); --bs-btn-border-color: var(--parallel-border); --bs-btn-hover-bg: var(--parallel-accent); --bs-btn-hover-border-color: var(--parallel-accent); --bs-btn-hover-color: #17231f; }
.text-muted { color: var(--parallel-muted) !important; }
.update-items-page { color: var(--parallel-ink); }
.ui-autocomplete { z-index: 2000; max-height: 280px; overflow-y: auto; overflow-x: hidden; }
.ui-menu-item-wrapper { color: #000; }
.request-status-badge { border: 1px solid transparent; font-weight: 800; letter-spacing: .02em; }
.status-review { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.status-entry { background: #0f766e; color: #fff; border-color: #0d615b; }
.status-completed { background: #198754; color: #fff; border-color: #146c43; }
.status-failed { background: #dc3545; color: #fff; border-color: #b02a37; }
.status-hold { background: #d97706; color: #fff; border-color: #b45309; }
.status-neutral { background: #6c757d; color: #fff; border-color: #565e64; }
.footer { background: var(--parallel-surface); border-color: var(--parallel-border) !important; }
.page-loading-overlay { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: color-mix(in srgb, var(--parallel-paper) 78%, transparent); backdrop-filter: blur(3px); }
.page-loading-card { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--parallel-border); border-radius: 16px; background: var(--parallel-surface); box-shadow: var(--parallel-shadow); font-weight: 750; }
.request-note { border: 1px solid var(--parallel-border); border-radius: 14px; padding: .8rem 1rem; background: color-mix(in srgb, var(--parallel-accent) 10%, var(--parallel-surface)); }
.request-note-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.request-row { cursor: pointer; }
.request-row:hover > * { background: color-mix(in srgb, var(--parallel-accent) 15%, var(--parallel-surface)) !important; }
.backend-grid-toolbar { display: grid; gap: .35rem; margin-bottom: .8rem; max-width: 520px; }
.backend-grid-toolbar .input-group { display: flex; }
.backend-grid-toolbar .form-control { border-color: var(--parallel-accent-dark); }
.backend-clear-search { justify-self: start; }
.quickgrid-column-filter { min-width: 220px; padding: .35rem; }
.quickgrid-column-filter .form-control { border-color: var(--parallel-accent-dark); }
.backend-grid-actions { min-width: 90px; text-align: center; }
.backend-quick-grid { min-width: 1200px; width: 100%; --quickgrid-border-color: var(--parallel-border); }
.backend-quick-grid table { width: 100%; color: var(--parallel-ink); }
.backend-quick-grid th { white-space: nowrap; cursor: pointer; background: var(--parallel-accent) !important; color: #17231f !important; border-color: var(--parallel-accent-dark) !important; }
.backend-quick-grid th button,
.backend-quick-grid th .btn-link { color: #17231f !important; }
.backend-grid-header-content { display: grid; gap: .35rem; min-width: 150px; }
.backend-grid-header-filter { min-width: 135px; font-size: .75rem; }
.backend-quick-grid th:hover { background: var(--parallel-accent-dark) !important; }
.backend-quick-grid tbody tr:nth-child(even) { background: color-mix(in srgb, var(--parallel-accent) 8%, var(--parallel-surface)); }
.backend-quick-grid tbody tr:hover { background: color-mix(in srgb, var(--parallel-accent) 22%, var(--parallel-surface)); }
.backend-quick-grid tbody tr.backend-inactive-row > td { background: #d5d8d6 !important; color: #4b5350 !important; }
.backend-quick-grid tbody tr.backend-inactive-row:hover > td { background: #c4c9c6 !important; color: #303633 !important; }
.backend-quick-grid td { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backend-table-scroll { overflow-x: auto; }
.backend-table-scroll thead th,
.request-grid thead th { position: sticky; top: 0; z-index: 2; resize: horizontal; overflow: auto; min-width: 90px; }
.request-grid { min-width: 1200px; }
.request-grid .request-column-filter { min-width: 85px; font-size: .75rem; }
.uat-grid { min-width: 1400px; width: max-content; table-layout: auto; }
.uat-grid .uat-grid-header { min-width: 120px; position: sticky; top: 0; z-index: 2; overflow: visible; }
.uat-grid .uat-grid-resize-handle { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 3; }
.uat-grid .uat-grid-resize-handle:hover, .uat-grid .uat-grid-resize-handle.is-resizing { background: var(--bs-primary); opacity: .65; }
.uat-grid th, .uat-grid td { min-width: 120px; white-space: nowrap; }
.uat-grid th .uat-grid-filter { display: block; width: 100%; }
.uat-grid .uat-grid-filter { min-width: 90px; font-size: .75rem; }
.strain-spreadsheet .strain-row { border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: hidden; }
.strain-spreadsheet .strain-row .card-header { padding: .35rem .5rem; }
.strain-spreadsheet .strain-row .card-body { display: grid; grid-template-columns: repeat(12, minmax(120px, 1fr)); gap: .5rem; padding: .5rem; overflow-x: auto; }
.strain-spreadsheet .strain-row .card-body > [class*="col-"] { width: auto; max-width: none; }
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(1) { grid-column: span 3; }
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(2),
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(3),
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(4),
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(5) { grid-column: span 2; }
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(6),
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(7) { grid-column: span 3; }
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(8),
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(9) { grid-column: span 2; }
.strain-spreadsheet .strain-row .card-body > [class*="col-"]:nth-of-type(10) { grid-column: span 4; }
@media (max-width: 992px) { .strain-spreadsheet .strain-row .card-body { min-width: 1100px; } }
.strain-spreadsheet.request-entry-table { min-width: 1200px; }
.strain-spreadsheet.request-entry-table .strain-row { margin-bottom: .5rem; background: var(--bs-body-bg); }
.strain-spreadsheet.request-entry-table .strain-row .card-header { background: var(--bs-tertiary-bg); }
.strain-spreadsheet.request-entry-table .strain-row .form-control,
.strain-spreadsheet.request-entry-table .strain-row .form-select { font-size: .875rem; }
.strain-spreadsheet.request-entry-table .strain-row .card-body {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(180px, 1fr));
    grid-auto-flow: row;
    align-items: end;
    gap: .5rem;
    min-width: 1800px;
    overflow: visible;
}
.strain-spreadsheet.request-entry-table .strain-row .card-body > input[type="hidden"] { display: none; }
.strain-spreadsheet.request-entry-table .strain-row .card-body > [class*="col-"] {
    grid-column: auto !important;
    grid-row: 1 !important;
    flex: none;
    width: 180px;
    max-width: 180px;
}
.strain-spreadsheet.request-entry-table .strain-row .card-body > [class*="col-"]:nth-of-type(6),
.strain-spreadsheet.request-entry-table .strain-row .card-body > [class*="col-"]:nth-of-type(7) { width: 240px; max-width: 240px; }
.strain-spreadsheet.request-entry-table .strain-row .card-body > [class*="col-"]:nth-of-type(10) { width: 260px; max-width: 260px; }
.strain-entry-table { width: max-content; min-width: 2200px; table-layout: fixed; }
.strain-entry-table th,
.strain-entry-table td { min-width: 150px; white-space: nowrap; }
.strain-entry-table th:nth-child(6),
.strain-entry-table td:nth-child(6),
.strain-entry-table th:nth-child(7),
.strain-entry-table td:nth-child(7) { min-width: 220px; }
.strain-entry-table th:nth-child(10),
.strain-entry-table td:nth-child(10) { min-width: 220px; }
.backend-table-scroll { scrollbar-width: auto; }
html[data-theme="dark"] .btn-close { filter: invert(1); }
html[data-theme="dark"] body,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .modal-title { color: #fff !important; }
html[data-theme="dark"] a { color: #fff; }
html[data-theme="dark"] .app-navbar .nav-link:hover,
html[data-theme="dark"] .app-navbar .nav-link:focus,
html[data-theme="dark"] .app-navbar .nav-link.show {
  color: #17231f !important;
  background-color: var(--parallel-accent);
  border-radius: 8px;
}
html[data-theme="dark"] .app-navbar .dropdown-item:hover,
html[data-theme="dark"] .app-navbar .dropdown-item:focus {
  color: #17231f !important;
  background-color: var(--parallel-accent);
}
html[data-theme="dark"] .table { --bs-table-color: #fff; }
html[data-theme="dark"] .update-items-page .table,
html[data-theme="dark"] .update-items-page .table td,
html[data-theme="dark"] .update-items-page .table th,
html[data-theme="dark"] .update-items-page .form-control,
html[data-theme="dark"] .update-items-page .form-select {
  color: #fff !important;
}
html[data-theme="dark"] .update-items-page .form-control,
html[data-theme="dark"] .update-items-page .form-select {
  background-color: #19231d !important;
  border-color: #607267 !important;
}
html[data-theme="dark"] .update-items-page .form-control::placeholder {
  color: #d7e2da !important;
}
html[data-theme="dark"] .update-items-page option {
  color: #fff;
  background-color: #19231d;
}
html[data-theme="dark"] .backend-quick-grid th,
html[data-theme="dark"] .backend-quick-grid th button,
html[data-theme="dark"] .backend-quick-grid th .btn-link { color: #17231f !important; }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .alert-secondary { background-color: var(--parallel-surface) !important; color: #fff !important; }
html[data-theme="dark"] .form-control::placeholder { color: #fff; opacity: .75; }
html[data-theme="dark"] .btn-primary { --bs-btn-bg: #234f38; --bs-btn-border-color: #234f38; --bs-btn-color: #fff; --bs-btn-hover-bg: #356449; --bs-btn-hover-border-color: #356449; --bs-btn-hover-color: #fff; }
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: #101713; }
/* Update Items follows the same dark table surface and alternating-row treatment as the other grids. */
html[data-theme="dark"] .update-items-page { color: var(--parallel-ink); }
html[data-theme="dark"] .update-items-page .text-muted { color: var(--parallel-muted) !important; }
html[data-theme="dark"] .update-items-page .table {
  --bs-table-color: var(--parallel-ink);
  --bs-table-bg: var(--parallel-surface);
  --bs-table-striped-color: var(--parallel-ink);
  --bs-table-striped-bg: color-mix(in srgb, var(--parallel-accent) 8%, var(--parallel-surface));
  --bs-table-border-color: var(--parallel-border);
}
html[data-theme="dark"] .update-items-page .table tbody td { color: var(--parallel-ink) !important; background-color: var(--parallel-surface); }
html[data-theme="dark"] .update-items-page .table tbody tr:nth-child(even) td { background-color: color-mix(in srgb, var(--parallel-accent) 8%, var(--parallel-surface)); }
html[data-theme="dark"] .update-items-page .form-control,
html[data-theme="dark"] .update-items-page .form-select { color: var(--parallel-ink) !important; background-color: var(--parallel-surface) !important; border-color: var(--parallel-border) !important; }
html[data-theme="dark"] .update-items-page .form-control::placeholder { color: var(--parallel-muted) !important; opacity: 1; }
html[data-theme="dark"] .update-items-page .bg-body-tertiary,
html[data-theme="dark"] .update-items-page .alert { background-color: var(--parallel-surface) !important; color: #fff !important; border-color: var(--parallel-border); }
html[data-theme="dark"] .update-items-page .bg-white,
html[data-theme="dark"] .update-items-page .bg-light,
html[data-theme="dark"] .update-items-page .bg-body { color: #000 !important; }
@media (max-width: 767px) { .theme-label { display: none; } .navbar .nav-link { padding-left: 0; } .landing-page { margin: 0; border-radius: 20px; } }