/* ============================================================
   Bar List Report — Stylesheet
   ============================================================ */

/* --- Fonts ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap&family=Geist+Mono:ital,wght@0,100..900;1,100..900&display=swap');

/* --- Design Tokens ---------------------------------------- */
:root {
  /* Typography */
  --font-base:   'Poppins', system-ui, sans-serif;
  --font-mono:   'Geist Mono', 'Courier New', monospace;

  /* Text colours */
  --color-text:           #2f2f2f;
  --color-text-muted:     #888888;
  --color-text-light:     #ffffff;
  --color-text-secondary: #555555;

  /* Surface colours */
  --color-bg-page:       #E8E6DF;  /* outer background              */
  --color-bg-card:       #ffffff;  /* page card                     */
  --color-bg-secondary:  #E8E6DF;  /* summary cells, group headers  */
  --color-bg-row-alt:    #fafafa;  /* alternating table rows        */
  --color-bg-tfoot:      #eceae4;  /* totals row                    */
  --color-bg-dark:       #2f2f2f;  /* thead, control bar            */

  /* Accent */
  --color-accent: #cc4400;         /* #c40 — save as PDF button     */

  /* Borders */
  --color-border:        #E1E3E5;
  --color-border-secondary: #d4d2cb;
  --color-border-strong: #2f2f2f;

  /* Page geometry (screen) */
  --page-padding-v: 60px;
  --page-padding-h: 64px;

  /* Type scale */
  --text-xs:   7.5pt;
  --text-sm:   8pt;
  --text-base: 9pt;
  --text-md:   10pt;
  --text-lg:   11pt;
  --text-xl:   14pt;
  --text-2xl:  16pt;
  --text-3xl:  22pt;
}

/* --- Reset & base ----------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: var(--font-base);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

/* --- Loading state ---------------------------------------- */
.loading {
  padding: 60px;
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- Page wrapper ----------------------------------------- */
.page {
  width: 816px;       /* 8.5in at 96dpi  */
  min-height: 1056px; /* 11in at 96dpi   */
  margin: 24px auto;
  background: var(--color-bg-card);
  padding: var(--page-padding-v) var(--page-padding-h) 80px var(--page-padding-h);
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}

.page + .page,
.page + .page-continuation {
  page-break-before: always;
}

.page-continuation {
  padding-top: var(--page-padding-v);
}

/* --- Page header ------------------------------------------ */
.page-header {
  display: table;
  width: 100%;
  border-bottom: 2px solid var(--color-border-strong);
  padding-bottom: 18px;
  margin-bottom: 28px;
}

.page-header-logo {
  display: table-cell;
  vertical-align: middle;
  width: 160px;
}

.page-header-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.page-header-logo .logo-fallback {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-transform: uppercase;
}

.page-header-title {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0 16px;
}

.page-header-title .report-title {
  font-family: var(--font-base);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-transform: uppercase;
}

.page-header-title .report-subtitle {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.page-header-meta {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  width: 160px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* --- Page footer ------------------------------------------ */
/* Hidden on screen. Rendered via position:fixed in print
   inside the reserved @page bottom margin. */
.page-footer {
  display: none;
}

.page-footer-inner {
  border-top: 1px solid var(--color-border);
  padding-top: 5px;
  overflow: hidden;
}

.page-footer-left {
  float: left;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.page-footer-right {
  float: right;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- Summary grid ----------------------------------------- */
.summary-grid-wrap {
  margin-bottom: 24px;
}

.section-heading {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
  margin-bottom: 16px;
  margin-top: 32px;
}

.section-heading:first-child {
  margin-top: 0;
}

.summary-grid {
  display: table;
  width: 100%;
  margin-bottom: 8px;
  border: solid 1px var(--color-border-secondary);
  border-radius: 8px;
  overflow: hidden;
}

.summary-grid-row {
  display: table-row;
}

.summary-cell {
  display: table-cell;
  width: 25%;
  padding: 18px 22px;
  vertical-align: top;
  background: var(--color-bg-secondary);
}
.summary-cell:not(:last-of-type) {
  border-right: var(--color-border-secondary) solid 1px;
}

.summary-cell-label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.summary-cell-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.summary-cell-unit {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 5px;
}

/* --- Glossary --------------------------------------------- */
.glossary-wrap {
  margin-bottom: 28px;
}

.glossary-table {
  width: 100%;
  border-collapse: collapse;
}

.glossary-table td {
  padding: 7px 12px 7px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: 1.6;
}

.glossary-table td:first-child {
  font-weight: 500;
  width: 22%;
  color: var(--color-text);
  padding-right: 20px;
  white-space: nowrap;
}

/* --- Table label (YSAU — Gold etc.) ----------------------- */
.table-label {
  font-family: var(--font-base);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
  border-bottom: 0px solid var(--color-border-strong);
  padding-bottom: 8px;
  margin-bottom: 0;
}

/* --- Per-group table structure ---------------------------- */
.data-table-wrap {
  width: 100%;
  border: solid 4px white;
  border-top-width: 0;
  border-radius: 8px;
  overflow: hidden;
  outline: solid 1px var(--color-border);
}

/* table-layout:fixed ensures all tables share column widths */
.data-table-group,
.data-table-totals {
  width: 100%;
  font-size: var(--text-sm);
  margin-bottom: 0;
  table-layout: fixed;
}

/* Column widths — must match COLUMNS order in report.js:
   Bar No. | Shape | Assay | Gross Oz | Fine Oz | Year | Brand | Qty */
.data-table-group colgroup col:nth-child(1),
.data-table-totals colgroup col:nth-child(1) { width: 10%; } /* Bar No. */
.data-table-group colgroup col:nth-child(2),
.data-table-totals colgroup col:nth-child(2) { width: 11%;  } /* Shape   */
.data-table-group colgroup col:nth-child(3),
.data-table-totals colgroup col:nth-child(3) { width: 7%;  } /* Assay   */
.data-table-group colgroup col:nth-child(4),
.data-table-totals colgroup col:nth-child(4) { width: 13%; } /* Gross   */
.data-table-group colgroup col:nth-child(5),
.data-table-totals colgroup col:nth-child(5) { width: 13%; } /* Fine    */
.data-table-group colgroup col:nth-child(6),
.data-table-totals colgroup col:nth-child(6) { width: 6%;  } /* Year    */
.data-table-group colgroup col:nth-child(7),
.data-table-totals colgroup col:nth-child(7) { width: 33%; } /* Brand   */
.data-table-group colgroup col:nth-child(8),
.data-table-totals colgroup col:nth-child(8) { width: 7%;  } /* Qty     */

/* Space above each group table */
.data-table-group {
  margin-top: 16px;
}

.data-table-group:first-child {
  margin-top: 0;
}

/* Group label row — in thead so it repeats on page break */
.group-header-row td {
  background: linear-gradient(white, var(--color-bg-secondary));
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding: 6px 10px;
  border-bottom: none;
}

.group-header-row td .label {
  /*font-weight: 500;*/
  /*text-transform: uppercase;*/
  /*letter-spacing: 0.08em;*/
}

/* Column header row */
.col-header-row th {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: 8px 10px;
  text-align: left;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.col-header-row th.num {
  text-align: right;
}

/* Totals table thead always visible */
.data-table-totals thead {
  display: table-header-group;
}

/* Data rows */
.data-table tbody tr {
  /*border-bottom: 1px solid var(--color-border);*/
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-bg-row-alt);
}

.data-table tbody td {
  padding: 7px 10px;
  vertical-align: middle;
  color: var(--color-text);
  line-height: 1.4;
  white-space: nowrap;
}

.data-table tbody td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.data-table tbody td.muted {
  color: var(--color-text-muted);
}

/* Totals row */
.data-table tfoot tr {
  border-top: 2px solid var(--color-border-strong);
  background: var(--color-bg-tfoot);
}

.data-table tfoot td {
  padding: 8px 10px;
  font-weight: 500;
  font-size: var(--text-sm);
}

.data-table tfoot td.num {
  text-align: right;
  font-family: var(--font-mono);
}

/* --- Screen-only control bar ------------------------------ */
.control-bar {
  width: 816px;
  margin: 0 auto;
  padding: 10px 16px;
  background: var(--color-bg-dark);
  display: table;
  box-sizing: border-box;
}

.control-label {
  display: table-cell;
  vertical-align: middle;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-right: 12px;
  white-space: nowrap;
}

.control-check {
  display: inline-block;
  margin-right: 16px;
  color: #cccccc;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
  vertical-align: middle;
}

.control-check input[type="checkbox"] {
  margin-right: 5px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.control-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: #444444;
  margin: 0 14px;
  vertical-align: middle;
}

/* Minimal variant — used when the host has hidden the toggles
   (URL-driven plugin views). Only the Save as PDF button remains. */
.control-bar-minimal {
  display: block;
  text-align: right;
  padding: 8px 16px;
}
.control-bar-minimal .control-print-btn {
  float: none;
}

/* Save as PDF button */
.control-print-btn {
  padding: 5px 16px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-text-light);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  float: right;
}

.control-print-btn:hover {
  background: #a83800;
  border-color: #a83800;
}

/* --- Utility --------------------------------------------- */
.mt-lg { margin-top: 32px; }
.mb-sm { margin-bottom: 12px; }

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

@page {
  size: letter portrait;
  margin: 0 0 28mm 0;
}

@media print {

  html, body {
    background: #ffffff;
    font-size: 10pt;
  }

  .control-bar {
    display: none !important;
  }

  .page {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14mm 18mm 28mm 18mm;
    box-shadow: none;
  }
  .page + .page,
  .page + .page-continuation {
    page-break-before: always;
  }

  /* Footer in reserved @page bottom margin */
  .page-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    padding: 0 18mm 5mm 18mm;
    box-sizing: border-box;
  }

  .page-footer-inner {
    border-top: 1px solid var(--color-border);
    padding-top: 5px;
    overflow: hidden;
  }

  .data-table-group thead {
    display: table-header-group;
  }

  .data-table-totals thead {
    display: table-header-group;
  }

  .data-table-group tbody tr {
    page-break-inside: avoid;
  }

  .group-header-row {
    page-break-after: avoid;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  .group-header-row td {
    padding-top: 8px;
  }

  .col-header-row {
    page-break-after: avoid;
  }

  .page-header {
    page-break-inside: avoid;
    page-break-after: avoid;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}