/* ============================================================================
   ACCUMARK LAB INSTRUMENT PANEL THEME (Light)
   ============================================================================
   A clean, high-contrast light theme with instrument-style typography.
   Designed to make Analyte Peptide fields stand out for lab technicians.
   ============================================================================ */

/* --- CSS Variables for Theme Consistency --- */
:root {
  --acc-bg-light: #f8f9fb;
  --acc-bg-panel: #ffffff;
  --acc-bg-readout: #f0f4f8;
  --acc-border: #d0d7de;
  --acc-border-accent: #0969da;
  --acc-text-primary: #1f2328;
  --acc-text-muted: #656d76;
  --acc-text-accent: #0550ae;
  --acc-text-value: #0969da;
  --acc-highlight-peptide: rgba(9, 105, 218, 0.08);
  --acc-highlight-border: #0969da;
  --acc-font-mono:
    "JetBrains Mono", "Fira Code", "SF Mono", "Consolas", monospace;
  --acc-font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --acc-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --acc-glow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}

/* --- Import JetBrains Mono for that instrument-panel feel --- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap");

/* ============================================================================
   STANDARD FIELDS SECTION - Light Instrument Panel
   ============================================================================ */

/* Outer container - transparent to let sections float independently */
#sampleheader-standard-fields {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sampleheader-standard-fields .sampleheader-table {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 6px !important;
}

/* --- Field Labels: Muted, compact --- */
#sampleheader-standard-fields .sampleheader-table-label {
  background: var(--acc-bg-panel) !important;
  color: var(--acc-text-muted) !important;
  font-family: var(--acc-font-display) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--acc-border) !important;
  border-radius: 4px 0 0 4px !important;
  vertical-align: middle !important;
}

/* --- Field Values: Readout panel style --- */
#sampleheader-standard-fields .sampleheader-table-field {
  background: var(--acc-bg-readout) !important;
  color: var(--acc-text-primary) !important;
  font-family: var(--acc-font-mono) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--acc-border) !important;
  border-radius: 0 4px 4px 0 !important;
  vertical-align: middle !important;
}

/* Input fields within */
#sampleheader-standard-fields input,
#sampleheader-standard-fields select,
#sampleheader-standard-fields textarea {
  background: transparent !important;
  color: var(--acc-text-value) !important;
  border: none !important;
  font-family: var(--acc-font-mono) !important;
  font-size: 13px !important;
}

/* Links */
#sampleheader-standard-fields a {
  color: var(--acc-text-accent) !important;
  text-decoration: none !important;
}

#sampleheader-standard-fields a:hover {
  text-decoration: underline !important;
}

/* ============================================================================
   ANALYTE PEPTIDE FIELDS - Prominent Readout Panels
   ============================================================================ */

/* Highlight the Analyte Peptide fields as primary data points */
#archetypes-fieldname-Analyte1Peptide,
#archetypes-fieldname-Analyte2Peptide,
#archetypes-fieldname-Analyte3Peptide,
#archetypes-fieldname-Analyte4Peptide {
  position: relative !important;
}

/* Style the parent TD containing Analyte Peptide fields */
td.sampleheader-table-field:has(#Analyte1Peptide),
td.sampleheader-table-field:has(#Analyte2Peptide),
td.sampleheader-table-field:has(#Analyte3Peptide),
td.sampleheader-table-field:has(#Analyte4Peptide) {
  background: var(--acc-highlight-peptide) !important;
  border: 1px solid var(--acc-highlight-border) !important;
  box-shadow: var(--acc-glow) !important;
}

/* Make the Peptide labels stand out */
td.sampleheader-table-label:has(
    + td .sampleheader-table-field #Analyte1Peptide
  ),
#sampleheader-standard-fields
  td.sampleheader-table-label:nth-child(5):has(+ td #Analyte1Peptide) {
  color: var(--acc-text-accent) !important;
  font-weight: 600 !important;
}

/* Peptide input values - larger, more prominent */
#Analyte1Peptide,
#Analyte2Peptide,
#Analyte3Peptide,
#Analyte4Peptide {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--acc-text-accent) !important;
  letter-spacing: -0.2px !important;
}

/* ============================================================================
   COA / COMPANY INFO FIELDS - De-emphasized
   ============================================================================ */

/* Make COA fields visually quieter */
#archetypes-fieldname-CompanyLogoUrl,
#archetypes-fieldname-ChromatographBackgroundUrl,
#archetypes-fieldname-CoaCompanyName,
#archetypes-fieldname-CoaEmail,
#archetypes-fieldname-CoaWebsite,
#archetypes-fieldname-CoaAddress,
#archetypes-fieldname-VerificationCode {
  opacity: 0.7 !important;
}

/* On hover, reveal COA fields fully */
#archetypes-fieldname-CompanyLogoUrl:hover,
#archetypes-fieldname-ChromatographBackgroundUrl:hover,
#archetypes-fieldname-CoaCompanyName:hover,
#archetypes-fieldname-CoaEmail:hover,
#archetypes-fieldname-CoaWebsite:hover,
#archetypes-fieldname-CoaAddress:hover,
#archetypes-fieldname-VerificationCode:hover {
  opacity: 1 !important;
}

/* ============================================================================
   HIDE DUPLICATE LABELS AND DESCRIPTIONS
   (Existing functionality preserved)
   ============================================================================ */

#archetypes-fieldname-ClientLot .formQuestion,
#archetypes-fieldname-DeclaredTotalQuantity .formQuestion,
#archetypes-fieldname-Analyte1Peptide .formQuestion,
#archetypes-fieldname-Analyte1DeclaredQuantity .formQuestion,
#archetypes-fieldname-Analyte2Peptide .formQuestion,
#archetypes-fieldname-Analyte2DeclaredQuantity .formQuestion,
#archetypes-fieldname-Analyte3Peptide .formQuestion,
#archetypes-fieldname-Analyte3DeclaredQuantity .formQuestion,
#archetypes-fieldname-Analyte4Peptide .formQuestion,
#archetypes-fieldname-Analyte4DeclaredQuantity .formQuestion,
#archetypes-fieldname-CompanyLogoUrl .formQuestion,
#archetypes-fieldname-ChromatographBackgroundUrl .formQuestion,
#archetypes-fieldname-CoaCompanyName .formQuestion,
#archetypes-fieldname-CoaEmail .formQuestion,
#archetypes-fieldname-CoaWebsite .formQuestion,
#archetypes-fieldname-CoaAddress .formQuestion,
#archetypes-fieldname-VerificationCode .formQuestion {
  display: none !important;
}

#archetypes-fieldname-ClientLot .formHelp,
#archetypes-fieldname-DeclaredTotalQuantity .formHelp,
#archetypes-fieldname-Analyte1Peptide .formHelp,
#archetypes-fieldname-Analyte1DeclaredQuantity .formHelp,
#archetypes-fieldname-Analyte2Peptide .formHelp,
#archetypes-fieldname-Analyte2DeclaredQuantity .formHelp,
#archetypes-fieldname-Analyte3Peptide .formHelp,
#archetypes-fieldname-Analyte3DeclaredQuantity .formHelp,
#archetypes-fieldname-Analyte4Peptide .formHelp,
#archetypes-fieldname-Analyte4DeclaredQuantity .formHelp,
#archetypes-fieldname-CompanyLogoUrl .formHelp,
#archetypes-fieldname-ChromatographBackgroundUrl .formHelp,
#archetypes-fieldname-CoaCompanyName .formHelp,
#archetypes-fieldname-CoaEmail .formHelp,
#archetypes-fieldname-CoaWebsite .formHelp,
#archetypes-fieldname-CoaAddress .formHelp,
#archetypes-fieldname-VerificationCode .formHelp {
  display: none !important;
}

/* Hide descriptions in sample view context (uses span/small elements) */
#archetypes-fieldname-ChromatographBackgroundUrl .discreet,
#archetypes-fieldname-ChromatographBackgroundUrl .fieldDescription,
#archetypes-fieldname-ChromatographBackgroundUrl span.formHelp,
#archetypes-fieldname-ChromatographBackgroundUrl small {
  display: none !important;
}

/* ============================================================================
   SECTION HEADER / DIVIDER
   ============================================================================ */

/* Add a subtle gradient divider at top of section */
#sampleheader-standard-fields::before {
  content: "SAMPLE DETAILS" !important;
  display: block !important;
  font-family: var(--acc-font-display) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: var(--acc-text-muted) !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--acc-border) !important;
}

/* ============================================================================
   RESPONSIVE TWEAKS
   ============================================================================ */

@media (max-width: 1200px) {
  #sampleheader-standard-fields .sampleheader-table-label,
  #sampleheader-standard-fields .sampleheader-table-field {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ============================================================================
   ANIMATIONS - Subtle micro-interactions
   ============================================================================ */

#sampleheader-standard-fields .sampleheader-table-field {
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

#sampleheader-standard-fields .sampleheader-table-field:focus-within {
  background: var(--acc-bg-panel) !important;
  box-shadow: inset 0 0 0 1px var(--acc-text-value) !important;
}

/* Peptide fields pulse subtly on hover to draw attention */
td.sampleheader-table-field:has(#Analyte1Peptide):hover,
td.sampleheader-table-field:has(#Analyte2Peptide):hover,
td.sampleheader-table-field:has(#Analyte3Peptide):hover,
td.sampleheader-table-field:has(#Analyte4Peptide):hover {
  box-shadow:
    var(--acc-glow),
    0 0 16px rgba(9, 105, 218, 0.15) !important;
}

/* ============================================================================
   ACCUMARK SECTIONS - JavaScript-created field groupings
   ============================================================================ */

.accumark-field-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accumark-section {
  background: var(--acc-bg-panel);
  border: 1px solid var(--acc-border);
  border-radius: 8px;
}

.accumark-section-header {
  background: var(--acc-bg-readout);
  padding: 10px 16px;
  border-bottom: 1px solid var(--acc-border);
}

.accumark-section-title {
  font-family: var(--acc-font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--acc-text-muted);
}

.accumark-section-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.accumark-section-table td {
  padding: 8px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--acc-border);
}

.accumark-section-table tr:last-child td {
  border-bottom: none;
}

.accumark-label {
  background: var(--acc-bg-readout);
  color: var(--acc-text-muted);
  font-family: var(--acc-font-display);
  font-size: 12px;
  font-weight: 500;
  width: 12%;
  white-space: nowrap;
}

.accumark-field {
  background: var(--acc-bg-panel);
  color: var(--acc-text-primary);
  font-family: var(--acc-font-mono);
  font-size: 13px;
  width: 21%;
}

.accumark-field input,
.accumark-field select,
.accumark-field textarea {
  background: transparent;
  border: none;
  color: var(--acc-text-value);
  font-family: var(--acc-font-mono);
  font-size: 13px;
  width: 100%;
}

/* --- Checkboxes - center vertically --- */
.accumark-field input[type="checkbox"] {
  width: auto;
  margin: 0;
  vertical-align: middle;
}

/* Hide the form-row wrapper styling that causes artifacts */
.accumark-field .form-row {
  display: contents;
}

.accumark-field .col-auto {
  display: contents;
}

/* --- Search input fields in pickers - keep subtle outline visible --- */
.accumark-field .input-group {
  border: 1px solid var(--acc-border) !important;
  border-radius: 4px !important;
}

.accumark-field .input-group:focus-within {
  border-color: var(--acc-highlight-border) !important;
}

/* --- ANALYTES SECTION - Special emphasis --- */
#accumark-section-analytes {
  border-color: var(--acc-highlight-border);
  box-shadow: 0 0 0 1px var(--acc-highlight-border);
  margin: 3px 3px 8px 3px;
  /* Extra space on bottom */
  /* Space for box-shadow */
}

#accumark-section-analytes .accumark-section-header {
  background: var(--acc-highlight-peptide);
  border-bottom-color: var(--acc-highlight-border);
}

#accumark-section-analytes .accumark-section-title {
  color: var(--acc-text-accent);
  font-weight: 700;
}

#accumark-section-analytes .accumark-field {
  background: rgba(9, 105, 218, 0.03);
}

#accumark-section-analytes .accumark-field input,
#accumark-section-analytes .accumark-field select {
  color: var(--acc-text-accent);
  font-weight: 500;
}

/* --- Send as Result Button --- */
.accumark-field-with-btn {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.accumark-btn-copy {
  background: #ffffff;
  border: 1px solid var(--acc-border-accent);
  color: var(--acc-text-accent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--acc-font-display);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.8;
  transition: all 0.2s;
  height: 24px; /* Match input height */
  display: flex;
  align-items: center;
}

.accumark-btn-copy:hover {
  background: var(--acc-text-accent);
  color: #ffffff;
  opacity: 1;
}

.accumark-btn-copy span {
  pointer-events: none; /* Make click event cleaner */
}

.accumark-btn-success {
  background-color: #2da44e !important; /* GitHub green */
  border-color: #2da44e !important;
  color: #ffffff !important;
  cursor: default;
}

/* --- Inline Result Suggestions --- */
.accumark-inline-suggestion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 12px;
  min-width: 150px;
}

.accumark-declared-label {
  font-size: 11px;
  color: var(--acc-text-muted); /* Match header labels */
  margin-bottom: 4px;
  font-family: var(--acc-font-display);
}

.accumark-declared-label strong {
  font-weight: 600;
  color: var(--acc-text-accent); /* Match header values */
}

/* Inherit header button styles, just tweak width/display for this context */
.accumark-btn-set {
  background: #ffffff;
  border: 1px solid var(--acc-border-accent);
  color: var(--acc-text-accent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--acc-font-display);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.8;
  transition: all 0.2s;
  height: 24px;
  display: flex;
  align-items: center;
  width: fit-content;
}

.accumark-btn-set:hover {
  background: var(--acc-text-accent);
  color: #ffffff;
  opacity: 1;
}

/* Flex wrapper for the result cell to align textarea and suggestion */
.accumark-result-cell-flex {
  display: flex !important;
  align-items: flex-start;
  flex-direction: row;
}

/* Ensure the original widget wrapper doesn't take 100% width aggressively if flexed */
.accumark-result-cell-flex > div:first-child {
  flex: 1;
}
  pointer-events: none; /* Make click event cleaner */
}

/* --- COA SECTION - De-emphasized --- */
#accumark-section-coa {
  opacity: 0.85;
}

#accumark-section-coa:hover {
  opacity: 1;
}

#accumark-section-coa .accumark-section-header {
  background: #f5f5f5;
}

/* --- Hide original "SAMPLE DETAILS" pseudo-element when JS sections active --- */
#sampleheader-standard-fields:has(.accumark-field-sections)::before {
  display: none !important;
}

/* ============================================================================
   AUTO-REJECTED ANALYSES - Visual Indicator
   ============================================================================ */

/* Container for the auto-reject indicator injected by JS */
.accumark-auto-rejected-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 2px 8px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  font-family: var(--acc-font-display);
  font-size: 10px;
  font-weight: 500;
  color: #856404;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.accumark-auto-rejected-indicator::before {
  content: "⚡";
  font-size: 12px;
}

/* Style rows in the analyses table that are rejected */
.listing-table tbody tr.state-rejected td,
table.listing tbody tr.state-rejected td {
  background: #f8f9fa !important;
  color: #6c757d !important;
  text-decoration: line-through;
  opacity: 0.7;
}

/* Badge for rejected status */
.listing-table tbody tr.state-rejected .badge,
table.listing tbody tr.state-rejected .badge {
  background: #dc3545 !important;
  color: #fff !important;
}