/* ============================================================
   GLOBAL / PAGE BACKGROUND
   ============================================================ */

html, body {
  overflow-x: auto; /* Page-level horizontal scroll when needed */
}

body {
  min-height: 100vh;
  background: linear-gradient(
    90deg,
    #dfe6ee 0%,
    #e9eef5 15%,
    #f2f5f9 35%,
    #f2f5f9 65%,
    #e9eef5 85%,
    #dfe6ee 100%
  );
}


/* ============================================================
   LAYOUT FRAME (INTENTIONALLY FIXED WIDTH)
   ============================================================ */

/*
  FIXED-WIDTH LAYOUT RATIONALE

  - UI is table- and form-heavy with fixed column widths
  - Content fits comfortably at ~1100px
  - Fluid resizing caused subtle visual jumpiness
  - Horizontal overflow is handled at the page level

  This favors predictability and data-entry ergonomics
  over responsive reflow, which is appropriate here.
*/

.page-container {
  width: 1100px;
  margin: 0 auto;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.page-card {
  width: 100%;
  box-sizing: border-box;

  background: #ffffff;
  border-radius: 14px;
  padding: 32px 40px;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

.page-card h4 {
  font-size: 1.25rem;   /* Lock size, override Bootstrap */
  line-height: 1.3;
  margin-bottom: 18px;
  font-weight: 600;
}


/* ============================================================
   HEADER (LOGO, TITLE, SESSION INFO)
   ============================================================ */

.app-header-container {
  width: 1100px;        /* Keep header aligned with card */
  margin: 28px auto 32px;
}

.app-header-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-logo {
  height: 42px;
  display: block;
}

.session-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.session-user {
  font-size: 0.95rem;
  color: #333;
}

.session-bar .btn {
  margin: 0;
}

.app-title-block {
  text-align: center;
}

.app-title {
  font-size: 2.4rem;
  font-weight: 600;
  color: #1F4E79;
}

.app-subtitle-secondary {
  font-size: 1rem;
  font-weight: 600;
  color: #6f7a88;
  margin-top: 4px;
}

.app-subtitle {
  font-size: 0.95rem;
  color: #5f6b7a;
  margin-top: 2px;
}


/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-wrapper {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
}

.login-wrapper .control-label {
  text-align: center;
  width: 100%;
}

.login-wrapper .form-group {
  margin-left: auto;
  margin-right: auto;
}

.login-wrapper .form-control {
  width: 100%;
}

.login-wrapper .btn {
  display: block;
  margin: 12px auto 0;
}


/* ============================================================
   PROGRESS INDICATOR
   ============================================================ */

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.85rem;
}

.progress-steps .step {
  flex: 1;
  text-align: center;
  padding-bottom: 6px;
  color: #999;
  border-bottom: 2px solid transparent;
}

.progress-steps .step.active {
  font-weight: 600;
  color: #1F4E79;
  border-bottom-color: #1F4E79;
}

.progress-steps .step.done {
  color: #4a7aa6;
}


/* ============================================================
   ASSAY SELECTION
   ============================================================ */

.assay-block-header {
  margin-bottom: 8px;
}


/* ============================================================
   RESULT ENTRY TABLE (CORE DATA GRID)
   ============================================================ */

/* Remove numeric input spinners */

/* Chrome / Edge / Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}


.entry-table {
  width: 100%;
  min-width: 900px;   /* Triggers page-level horizontal scroll */
}


/* ---- Row layout ---- */


	/* Entry row alignment intentionally centered.
	   Top-alignment was tested and rejected for usability. */


.entry-row {
  display: flex;
  align-items: center;
  padding: 4px 0px 4px 4px;  /* top right bottom left */
  border-radius: 6px;
}

/* ---- Header row ---- */

.entry-header {
  font-weight: 600;
  border-bottom: 2px solid #ccc;
  margin-bottom: 6px;
}

.entry-header > div {
  white-space: nowrap;
  padding-right: 12px;
}

/* Align header text with input text (simulate input padding) */
.entry-header > div::before {
  content: "";
  display: inline-block;
  width: 6px;
}


/* ---- Cell layout (header + data) ---- */

.entry-row > div,
.entry-header > div {
  box-sizing: border-box;
  flex: 0 0 auto;      /* Fixed-width columns, no flex shrink */
  white-space: nowrap;
}

.entry-row > div {
  padding-right: 12px;
}


/* ---- Inputs ---- */

.entry-row input {
  width: 100% !important;
  box-sizing: border-box;
}

.catalog-input {
  margin: 0 !important;
  height: 38px;
  vertical-align: top;
}

.col-catalog {
  display: flex;
  align-items: center;
}


/* ---- Column widths ---- */

.col-company  { width: 140px; white-space: normal !important; overflow-wrap: break-word;}
.col-platform { width: 140px; white-space: normal !important; overflow-wrap: break-word;}
.col-assay    { width: 90px; }
.col-matrix   { width: 70px; }
.col-sample   { width: 80px;  }
.col-result   { width: 120px; }
.col-unit     { width: 60px;  }
.col-catalog  { width: 160px; }
.col-batch    { width: 160px; }


/* ============================================================
   ASSAY BLOCK STRIPING (ODD / EVEN)
   ============================================================ */

.group-odd {
  background-color: #e6edf7;
  border-left: 6px solid #1F4E79;
}

.group-even {
  background-color: #d5e0f0;
  border-left: 6px solid #1F4E79;
}

.invalid-input .form-control {
  border: 2px solid #dc3545 !important;
}

.invalid-input .form-control:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25) !important;
}



/* ============================================================
   ASSAY BLOCK VALIDATION STRIPING 
   ============================================================ */

.invalid-row {
  background-color: #ffe5e5 !important;
  border-left: 6px solid #dc3545;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  margin-top: 12px;
  margin-right: 8px;
}

.btn-primary-forward {
  background-color: #1F4E79;
  color: #ffffff;
}

.btn-primary-forward:hover {
  background-color: #163a59;
}

.button-row {
  display: flex;
  align-items: center;
}

.page-card .form-control {
  width: 100%;
}

.page-card .btn {
  min-width: 160px;
}

.help-link {
  color: #1F4E79;
  text-decoration: none;
  font-weight: 500;
}

.help-link:hover {
  color: #163a59;
  text-decoration: none;
}

/* ============================================================
   CURRENT RESULTS TABLE
   ============================================================ */

.current-results-table .table td,
.current-results-table .table th {
  font-size: 1rem !important;
  padding: 6px 8px !important;
}



/* ============================================================
   SELECT EDIT
   ============================================================ */

.shiny-options-group {
  width: 100%;
}

.shiny-options-group .radio {
  white-space: nowrap;
}

/* ============================================================
   REVIEW / RECEIPT TABLES
   ============================================================ */
   
.review-table .col-catalog,
.review-table .col-batch {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {

  @page {
    margin: 10mm;
    size: landscape;
  }

  body {
    background: white !important;
    zoom: 1;
  }

  /* Hide navigation and controls */
  .progress-steps,
  .button-row,
  button,
  .session-bar {
    display: none !important;
  }

  .help-link {
    display: none !important;
  }

  /* Align header with content */
  .app-title-block {
    text-align: left !important;
    margin-bottom: 12px;
  }

  .app-title {
    font-size: 20pt !important;
  }

  .app-subtitle,
  .app-subtitle-secondary {
    font-size: 11pt !important;
  }

  .page-container,
  .app-header-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-card {
    position: static !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
  }

  /* Slightly larger tables in print */
  .current-results-table .table td,
  .current-results-table .table th {
    font-size: 9pt !important;
    padding: 4px 6px !important;
  }
}

/* ============================================================
   TOOLTIP ICONS
   ============================================================ */

.help-icon {
  margin-left: 6px;
  color: #1F4E79;
  cursor: pointer;
  font-size: 1rem;
}

.help-icon:hover {
  color: #163a59;
}

.popover {
  max-width: 300px;
}