:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;

  background: #141414;
  color: #f3f3f3;

  --panel: rgba(35, 35, 35, .94);
  --panel-subtle: #242424;
  --input: #181818;

  --border: #343434;
  --border-strong: #505050;

  --text: #f3f3f3;
  --muted: #aaa;
  --muted-light: #b8b8b8;

  --accent: #2f78c4;
  --accent-hover: #3b88d8;
  --accent-soft: rgba(47, 120, 196, .045);

  --success-bg: #193a2a;
  --success-text: #81d9ad;

  --complete-bg: #293346;
  --complete-text: #9fc1ed;

  --progress-bg: #3b3321;
  --progress-text: #e8c980;

  --error: #ff9c98;

  --shell-top: 34px;
  --shell-bottom: 34px;

  --header-height: 78px;
  --header-gap: 16px;

  --control-surface: #1c1c1c;
  --control-surface-hover: #222;
  --control-border: #484848;
  --control-border-hover: #5a5a5a;
  --control-focus: #5599e8;
}


/* ============================================================
   Base
============================================================ */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at top,
      #243143 0,
      #171717 34rem
    );

  color: var(--text);
}


/* ============================================================
   Accessibility
============================================================ */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* ============================================================
   Shell
============================================================ */

.app-shell {
  width: min(1220px, calc(100% - 32px));

  margin: 0 auto;

  padding:
    var(--shell-top)
    0
    var(--shell-bottom);
}

.app-shell:has(.auth-panel:not([hidden])) {
  width: min(440px, calc(100% - 32px));

  padding-top: 64px;
}


/* ============================================================
   Header
============================================================ */

.app-header {
  min-height: var(--header-height);

  display: grid;

  /*
    The header has 16px horizontal padding.

    Using 384px here makes the client selector begin at the same
    horizontal position as the results panel below:

    16px header padding
    + 384px first column
    + 20px grid gap
    = 420px

    The portal results panel also begins at:
    400px samples panel
    + 20px gap
    = 420px
  */
  grid-template-columns:
    384px
    minmax(0, 1fr)
    auto;

  column-gap: 20px;

  align-items: center;

  margin-bottom: var(--header-gap);

  padding: 12px 16px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--panel);

  box-shadow:
    0 10px 28px rgba(0, 0, 0, .14);
}


/* Branding */

.brand-lockup {
  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;
}

.brand-logo {
  width: auto;
  height: 50px;
  max-width: 110px;

  flex-shrink: 0;

  object-fit: contain;
}

.brand-title {
  padding-left: 10px;

  border-left: 1px solid #444;

  color: var(--text);

  font-size: 19px;
  font-weight: 600;

  white-space: nowrap;
}


/* Client selector */

.header-client-control {
  width: min(330px, 100%);

  justify-self: start;
}

.header-client-control select {
  width: 100%;
  min-height: 40px;

  padding: 0 11px;

  border: 1px solid var(--control-border);
  border-radius: 8px;

  background: var(--control-surface);
  color: var(--text);

  transition:
    background .15s ease,
    border-color .15s ease;
}

.header-client-control select:hover {
  background: var(--control-surface-hover);

  border-color: var(--control-border-hover);
}

.client-name {
  width: 100%;
  min-height: 40px;

  display: flex;

  align-items: center;

  padding: 0 11px;

  border: 1px solid var(--control-border);
  border-radius: 8px;

  background: var(--control-surface);

  color: var(--text);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* Account */

.account-actions {
  display: flex;

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

  gap: 14px;

  min-width: max-content;
}

.account-name {
  max-width: 180px;

  overflow: hidden;

  color: var(--muted);

  font-size: 12px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* ============================================================
   Typography
============================================================ */

h1,
h2,
h3 {
  margin: 0;

  font-weight: 600;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 16px;
}

.muted {
  color: var(--muted);
}


/* ============================================================
   Panels
============================================================ */

.panel {
  border: 1px solid var(--border);

  border-radius: 12px;

  background: var(--panel);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, .22);
}


/* ============================================================
   Authentication
============================================================ */

.auth-panel {
  width: min(440px, 100%);

  padding: 28px;
}

.auth-panel h2 {
  margin-bottom: 6px;
}

.auth-panel .muted {
  margin: 0 0 22px;
}

.auth-panel input {
  margin-bottom: 16px;
}

.auth-panel button {
  width: 100%;

  margin-top: 4px;
}


/* ============================================================
   Forms
============================================================ */

label {
  display: block;

  margin-bottom: 8px;

  font-weight: 600;
}

input,
select,
button {
  min-height: 42px;

  border-radius: 7px;

  font: inherit;
}

input,
select {
  border: 1px solid #555;

  background: var(--input);

  color: inherit;
}

input {
  width: 100%;

  padding: 0 12px;
}

select {
  padding: 0 10px;
}

input:focus,
select:focus {
  outline: none;

  border-color: var(--control-focus);

  box-shadow:
    0 0 0 2px rgba(85, 153, 232, .18);
}

button {
  border: 0;

  padding: 0 18px;

  background: var(--accent);

  color: white;

  font-weight: 600;

  cursor: pointer;
}

button:hover {
  background: var(--accent-hover);
}

button.secondary {
  min-height: 40px;

  padding: 0 14px;

  border: 1px solid var(--control-border);
  border-radius: 8px;

  background: var(--control-surface);
  color: var(--text);

  box-shadow: none;

  transition:
    background .15s ease,
    border-color .15s ease;
}

button.secondary:hover {
  background: var(--control-surface-hover);

  border-color: var(--control-border-hover);
}

.status {
  min-height: 20px;

  margin: 12px 0 0;

  color: #bdbdbd;
}

.status.error {
  color: var(--error);
}


/* ============================================================
   Portal
============================================================ */

.portal-layout {
  display: grid;

  grid-template-columns:
    400px
    minmax(0, 1fr);

  gap: 20px;

  align-items: start;
}


/* ============================================================
   Samples panel
============================================================ */

.browser-panel {
  height:
    calc(
      100vh
      - var(--shell-top)
      - var(--header-height)
      - var(--header-gap)
      - var(--shell-bottom)
    );

  min-height: 420px;

  display: flex;

  flex-direction: column;

  overflow: hidden;
}


/* Top area */

.browser-top {
  flex-shrink: 0;

  position: relative;

  z-index: 2;

  background: var(--panel);
}

.browser-header {
  padding: 17px 12px 11px;
}

.browser-header h2 {
  display: inline-flex;

  align-items: baseline;

  gap: 0;
}

.sample-count-separator {
  display: inline-block;

  margin-left: 5px;
  margin-right: 1px;

  color: #777;

  font-weight: 400;
}

.sample-count {
  color: var(--muted);

  font-weight: 500;
}


/* Search */

.sample-search {
  padding:
    0
    12px
    10px;

  border-bottom: 1px solid #393939;
}

.sample-search input {
  min-height: 40px;

  border: 1px solid var(--control-border);
  border-radius: 8px;

  background: var(--control-surface);
  color: var(--text);

  transition:
    background .15s ease,
    border-color .15s ease;
}

.sample-search input:hover {
  background: var(--control-surface-hover);

  border-color: var(--control-border-hover);
}


/* Sample list */

.sample-list {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-gutter: stable;

  scrollbar-width: thin;

  scrollbar-color:
    #454545
    transparent;
}

.sample-list-footer {
  display: flex;
  justify-content: center;
  padding: 10px 12px 12px;
}

.sample-list-footer:has(button[hidden]) {
  display: none;
}

.sample-browser-status {
  margin: 8px 0 0;
}


/* Sample row */

.sample-row {
  display: block;

  width: 100%;

  padding: 10px 12px;

  border: 0;
  border-bottom: 1px solid #383838;

  border-radius: 0;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;
}

.sample-row:last-child {
  border-bottom: 0;
}

.sample-row:hover {
  background:
    rgba(255, 255, 255, .025);
}

.sample-row.active {
  background: var(--accent-soft);

  box-shadow:
    inset 3px 0 0 var(--accent);
}


/* Two-column row */

.sample-row-content {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    92px;

  align-items: center;

  gap: 12px;
}

.sample-row-main {
  min-width: 0;
}

.sample-primary {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.sample-lab-id {
  color: var(--text);

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

.sample-separator {
  display: inline-block;

  margin-left: 4px;
  margin-right: 2px;

  color: #777;
}

.sample-identifier {
  color: #929292;

  font-size: 13px;
  font-weight: 400;
}

.sample-project {
  min-width: 0;

  margin-top: 4px;

  overflow: hidden;

  color: var(--muted);

  font-size: 12px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* Right-side status/date column */

.sample-row-side {
  width: 92px;

  justify-self: end;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 5px;
}

.sample-status-chip {
  flex-shrink: 0;

  margin-right: -2px;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 600;

  white-space: nowrap;
}

.sample-status-chip.reported {
  background: var(--success-bg);

  color: var(--success-text);
}

.sample-status-chip.complete {
  background: var(--complete-bg);

  color: var(--complete-text);
}

.sample-status-chip.in-progress {
  background: var(--progress-bg);

  color: var(--progress-text);
}

.sample-date {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color: var(--muted-light);

  font-size: 11px;

  white-space: nowrap;
}

.sample-date-icon {
  width: 14px;
  height: 14px;

  flex-shrink: 0;

  color: #888;
}

.sample-date-icon svg {
  display: block;

  width: 100%;
  height: 100%;
}


/* Empty list */

.sample-list-empty {
  padding: 32px 20px;

  color: var(--muted);

  text-align: center;
}


/* ============================================================
   Production fallback
============================================================ */

.lookup-form {
  padding: 0 16px 18px;
}

.form-heading {
  margin-bottom: 18px;
}

.form-heading .muted {
  margin: 5px 0 0;
}

.lookup-row {
  display: flex;

  gap: 10px;
}

.lookup-row input {
  flex: 1;

  min-width: 0;
}

.lookup-row button {
  flex-shrink: 0;
}


/* ============================================================
   Results
============================================================ */

.results-column {
  min-width: 0;
}


/* Empty state */

.empty-panel {
  min-height: 220px;

  display: flex;

  flex-direction: column;

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

  padding: 36px;

  text-align: center;
}

.empty-panel h3 {
  margin-bottom: 8px;
}

.empty-panel .muted {
  max-width: 420px;

  margin: 0;
}


/* Selected sample */

.sample-panel {
  overflow: hidden;
}


/* Heading */

.sample-heading {
  display: flex;

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

  gap: 20px;

  padding: 20px 22px;

  border-bottom: 1px solid #393939;
}


/* Detail badge */

.badge {
  flex-shrink: 0;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;
}

.badge.reported {
  background: var(--success-bg);

  color: var(--success-text);
}

.badge.complete {
  background: var(--complete-bg);

  color: var(--complete-text);
}

.badge.in-progress {
  background: var(--progress-bg);

  color: var(--progress-text);
}


/* Metadata */

.metadata {
  display: grid;

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

  gap: 1px;

  margin: 0;

  background: #353535;
}

.metadata div {
  min-width: 0;

  padding: 15px 18px;

  background: var(--panel-subtle);
}

dt {
  margin-bottom: 5px;

  color: var(--muted);

  font-size: 11px;

  letter-spacing: .04em;

  text-transform: uppercase;
}

dd {
  margin: 0;

  line-height: 1.4;
}


/* Numeric alignment */

.sample-lab-id,
.sample-date,
.metadata dd,
table td {
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   Results table
============================================================ */

.table-wrap {
  overflow-x: auto;

  border-top: 1px solid #444;
}

table {
  width: 100%;

  min-width: 700px;

  table-layout: fixed;

  border-collapse: collapse;
}


/*
  Tuned against real PCS result examples:
  longer analysis names and technical method names get enough
  space while common units such as MPN/100 mL remain visible.
*/

.col-analysis {
  width: 28%;
}

.col-result {
  width: 11%;
}

.col-units {
  width: 17%;
}

.col-analyzed {
  width: 24%;
}

.col-method {
  width: 20%;
}


thead {
  background:
    rgba(255, 255, 255, .018);
}

th,
td {
  padding: 13px 16px;

  border-bottom: 1px solid #383838;

  overflow: hidden;

  text-align: left;

  text-overflow: ellipsis;

  white-space: nowrap;
}

th {
  color: var(--muted);

  font-size: 11px;

  letter-spacing: .04em;

  text-transform: uppercase;
}

tbody tr:hover td {
  background:
    rgba(255, 255, 255, .018);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.empty {
  padding: 22px 30px;

  color: var(--muted);

  text-align: center;
}


/* ============================================================
   Responsive
============================================================ */


/* ============================================================
   Compact / tablet layout
============================================================ */

@media (max-width: 950px) {

  .app-shell {
    width: calc(100% - 28px);

    padding:
      24px
      0
      32px;
  }


  /*
    Use one intentional header layout for all narrower widths.

    Row 1:
    [ Logo | Client Portal ]       [ Account  Sign out ]

    Row 2:
    [ Client selector full width                     ]
  */

  .app-header {
    display: grid;

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

    grid-template-rows:
      auto
      auto;

    gap:
      12px
      16px;

    align-items: center;

    padding: 12px 14px;

    margin-bottom: 14px;
  }


  /* Branding */

  .brand-lockup {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;
  }


  /* Account */

  .account-actions {
    grid-column: 2;
    grid-row: 1;

    display: flex;

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

    gap: 10px;

    min-width: 0;
  }

  .account-name {
    max-width: 150px;

    text-align: right;
  }


  /* Client selector */

  .header-client-control {
    grid-column: 1 / -1;
    grid-row: 2;

    width: 100%;

    justify-self: stretch;
  }

  .header-client-control select {
    width: 100%;
  }


  /* Main portal becomes single-column */

  .portal-layout {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  /*
    Shorter sample browser so results are reached sooner.
  */

  .browser-panel {
    height: clamp(
      360px,
      50vh,
      500px
    );

    min-height: 0;
  }


  /* Metadata */

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

}


/* ============================================================
   Mobile layout
============================================================ */

@media (max-width: 720px) {

  .app-shell {
    width: calc(100% - 24px);

    padding:
      20px
      0
      28px;
  }


  /* Header */

  .app-header {
    gap:
      12px
      10px;

    padding: 11px 12px;
  }


  /* Branding */

  .brand-logo {
    width: auto;
    height: 42px;
    max-width: 76px;
  }

  .brand-title {
    padding-left: 8px;

    font-size: 17px;
  }


  /* Account */

  .account-actions {
    gap: 8px;
  }

  .account-name {
    max-width: 110px;

    font-size: 11px;
  }

  .account-actions button.secondary {
    min-height: 38px;

    padding:
      0
      12px;
  }


  /*
    Reduce Samples panel substantially on phones.
    This lets the selected sample details appear much sooner.
  */

  .browser-panel {
    height: clamp(
      320px,
      42vh,
      420px
    );

    min-height: 0;
  }


  /*
    Keep the result heading on one row.
    Sample name stays on the left.
    Status remains anchored at the far right.
  */

  .sample-heading {
    flex-direction: row;

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

    gap: 12px;

    padding:
      18px
      20px;
  }

  .sample-heading h2 {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
  }

  .sample-heading .badge {
    flex-shrink: 0;
  }


  /* Metadata */

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


/*
  Mobile result presentation.

  Each analysis becomes a compact two-row mini table:
  - analysis name on its own row
  - labels underneath
  - values directly below the labels
*/

.table-wrap {
  overflow-x: visible;

  border-top: 1px solid #444;
}

table {
  width: 100%;
  min-width: 0;

  table-layout: auto;
}

colgroup,
thead {
  display: none;
}

tbody {
  display: block;
}


/* One compact block per analysis */

tbody tr {
  display: grid;

  grid-template-columns:
    12%
    22%
    38%
    28%;

  grid-template-areas:
    "analysis analysis analysis analysis"
    "result-label units-label analyzed-label method-label"
    "result units analyzed method";

  row-gap: 4px;

  padding:
    12px
    16px;

  border-bottom: 1px solid #383838;
}

tbody tr:last-child {
  border-bottom: 0;
}

tbody tr:hover td {
  background: transparent;
}


/* Reset cells */

tbody td {
  display: block;

  width: auto;
  min-width: 0;

  padding: 0;

  border: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  line-height: 1.35;
}


/* Analysis name */

tbody td:nth-child(1) {
  grid-area: analysis;

  margin-bottom: 3px;

  color: var(--text);

  font-size: 15px;
  font-weight: 600;
}


/* Values */

tbody td:nth-child(2) {
  grid-area: result;
}

tbody td:nth-child(3) {
  grid-area: units;
}

tbody td:nth-child(4) {
  grid-area: analyzed;
}

tbody td:nth-child(5) {
  grid-area: method;
}


/*
  Create the label row above the values.
*/

tbody td:nth-child(2)::before,
tbody td:nth-child(3)::before,
tbody td:nth-child(4)::before,
tbody td:nth-child(5)::before {
  display: block;

  margin-bottom: 3px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: .04em;

  text-transform: uppercase;
}

tbody td:nth-child(2)::before {
  content: "Result";
}

tbody td:nth-child(3)::before {
  content: "Units";
}

tbody td:nth-child(4)::before {
  content: "Analyzed";
}

tbody td:nth-child(5)::before {
  content: "Method";
}

tbody td:nth-child(1)::before {
  content: none;
}


/* Empty-result message */

tbody td.empty {
  grid-column: 1 / -1;

  padding:
    10px
    0;

  text-align: center;
}

tbody td.empty::before {
  content: none;
}

}

/* ============================================================
   Very narrow phones
============================================================ */

@media (max-width: 480px) {

  .app-shell {
    width: calc(100% - 20px);
  }


  /* Header */

  .app-header {
    padding: 10px;

    column-gap: 8px;
  }

  .brand-logo {
    height: 38px;

    max-width: 64px;
  }

  .brand-title {
    padding-left: 7px;

    font-size: 16px;
  }

  .account-actions {
    gap: 6px;
  }

  .account-name {
    max-width: 88px;

    font-size: 10.5px;
  }

  .account-actions button.secondary {
    min-height: 36px;

    padding:
      0
      10px;

    font-size: 13px;
  }


  /* Samples */

  .browser-panel {
    height: clamp(
      300px,
      40vh,
      390px
    );
  }


  /* Results */

  .sample-heading {
    padding:
      16px
      18px;
  }

  .sample-heading h2 {
    font-size: 19px;
  }


  .metadata div {
    padding:
      13px
      14px;
  }


  /*
    On particularly narrow screens, keep the result details
    two columns but tighten the gap.
  */

  tbody tr {
    gap:
      11px
      12px;

    padding:
      14px;
  }

}


/* ============================================================
   Extremely narrow phones
============================================================ */

@media (max-width: 380px) {

  /*
    Preserve the same overall header structure rather than
    introducing another layout mode.

    Only tighten dimensions.
  */

  .brand-logo {
    height: 34px;

    max-width: 56px;
  }

  .brand-title {
    font-size: 15px;
  }

  .account-name {
    max-width: 70px;
  }

  .account-actions button.secondary {
    padding:
      0
      9px;
  }


  /*
    Result details use a single column at extremely narrow widths.
  */

  tbody tr {
    grid-template-columns: 1fr;
  }

  tbody td:nth-child(1) {
    grid-column: 1;
  }

}