/* =========================================================
   PATCH 2026-08-26 | SAMPLE TABLE REFERENCE (Study Matrix)

   Biologist-facing reference dialog explaining that a group
   prefix (e.g. NP1) stays constant even when time, exposure,
   and replicate suffixes are concatenated onto a sample name.
   Purely presentational: no study-matrix state depends on it.
========================================================= */

.marss-emc .emc-sample-help-btn{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  padding:0;
  border:1px solid #c8d4e6;
  border-radius:8px;
  background:#fff;
  color:#526683;
  cursor:pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.marss-emc .emc-sample-help-btn svg{
  width:17px;
  height:17px;
}

.marss-emc .emc-sample-help-btn:hover{
  border-color:rgba(var(--emc-accent),.55);
  background:rgba(var(--emc-accent),.08);
}

.marss-emc .emc-sample-help-btn:focus-visible{
  outline:3px solid rgba(91,112,179,.32);
  outline-offset:2px;
}

/* =========================================================
   DIALOG
========================================================= */

.marss-emc .emc-sample-table-dialog{
  width:min(640px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);

  padding:0;

  border:1px solid var(--emc-line);
  border-radius:16px;

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

  box-shadow:0 22px 55px rgba(31,48,89,.18);

  /* Keeps rounded corners honest: nothing inside can visually
     escape the card, regardless of table content width. */
  overflow:hidden;
}

.marss-emc .emc-sample-table-dialog::backdrop{
  background:rgba(16,29,45,.45);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.marss-emc .emc-sample-table-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;

  padding:16px 18px;

  border-bottom:1px solid var(--emc-line-soft);
}

.marss-emc .emc-sample-table-dialog-head h3{
  margin:0;
  color:#233657;
  font-size:1rem;
}

.marss-emc .emc-sample-table-dialog-head p{
  margin:4px 0 0;
  color:var(--emc-muted);
  font-size:.78rem;
}

.marss-emc .emc-sample-table-dialog-close{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:28px;
  height:28px;

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

  background:#fff;
  color:var(--emc-soft);

  font-size:13px;
  line-height:1;

  cursor:pointer;
}

.marss-emc .emc-sample-table-dialog-close:hover{
  background:#f2f5fb;
}

.marss-emc .emc-sample-table-dialog-close:focus-visible{
  outline:3px solid rgba(91,112,179,.32);
  outline-offset:2px;
}

.marss-emc .emc-sample-table-dialog-body{
  padding:16px 18px 18px;
  max-height:65vh;

  /* The modal/page itself must never scroll sideways — only the
     individual table wrappers below get a horizontal scrollbar. */
  overflow-x:hidden;
  overflow-y:auto;
}

.marss-emc .emc-sample-table-dialog-body > p{
  margin:0 0 10px;
  color:var(--emc-soft);
  font-size:.82rem;

  /* Explanatory prose wraps normally; it never forces the modal wider. */
  overflow-wrap:break-word;
}

/* =========================================================
   PER-TABLE HORIZONTAL SCROLL

   Each reference table gets its own local scroll viewport so every
   column (group, time, exposure, replicate) stays reachable on
   narrow screens without the whole dialog scrolling sideways and
   without dropping columns.
========================================================= */
.marss-emc .emc-sample-table-scroll{
  margin-bottom:14px;

  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  border:1px solid var(--emc-line-soft);
  border-radius:10px;
}

/* These are short, 3-5 row reference tables — a sticky header adds
   nothing here and the shared .emc-preview-table sticky behavior
   (owned by the large canonical-preview table elsewhere) must not
   leak into this dialog. */
.marss-emc .emc-sample-table-scroll .emc-preview-table th{
  position:static;
  top:auto;
  z-index:auto;
}

.marss-emc .emc-sample-table-arrow{
  color:var(--emc-accent-dark);
  font-weight:800;
}

/* =========================================================
   CALLOUTS
========================================================= */

.marss-emc .emc-sample-table-callout{
  display:flex;
  flex-direction:column;
  gap:2px;

  margin-top:12px;
  padding:12px;

  border-radius:10px;

  background:rgba(var(--emc-accent),.08);
  color:#315f53;
}

.marss-emc .emc-sample-table-callout strong{
  color:#245e50;
  font-size:.78rem;
}

.marss-emc .emc-sample-table-callout p{
  margin:2px 0 0;
  font-size:.8rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.marss-emc .emc-sample-table-callout-warn{
  background:#fbf5e8;
  color:#76591f;
}

.marss-emc .emc-sample-table-callout-warn strong{
  color:#8a6520;
}

@media(max-width:560px){
  .marss-emc .emc-sample-table-dialog{
    width:calc(100vw - 20px);
  }
}