cbsnexora/src/app/cashier/end-of-day-report/end-of-day-report.component.scss

/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

/* The sheet itself, which is what gets signed. Bordered on screen so it reads as one document
   rather than three panels, and the same borders carry into print. */

/* Centred in the page, because it is a document rather than a screen: a signed sheet pinned to the
   left edge of a wide monitor reads as a panel that failed to fill its space. */
.eod-sheet {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 28px 32px 24px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* The toolbar and the loading line above it share the sheet's own edges, not the viewport's. */
.eod .pg-head,
.eod > .pg-empty {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.eod-sheet__head {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.eod-sheet__title {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0f172a;
  text-align: center;
}

.eod-sheet__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
}

.eod-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eod-meta__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.eod-meta__value {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

/* ── Sections ── */
.eod-section {
  margin-bottom: 26px;

  /* A section must not be split across two printed pages: a reconciliation whose expected line is
     on page one and whose variance is on page two is not a document anybody can sign. */
  break-inside: avoid;
  page-break-inside: avoid;
}

.eod-section__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 7px;
}

.eod-section__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

.eod-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.5;
}

/* Names the table below it, so two tables in one section do not read as one long list. */
.eod-caption {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #475569;
}

.eod-caption--spaced {
  margin-top: 18px;
}

/* The line-by-line list is wider than the rest of the sheet, so it scrolls in its own box rather
   than making the whole page scroll sideways. */
.eod-section--wide {
  .pg-table {
    min-width: 100%;
  }
}

.eod-txns {
  font-size: 12px;

  td,
  th {
    white-space: nowrap;
  }
}

/* Voucher numbers and account numbers are read digit by digit, so they get a fixed pitch. */
.eod-mono {
  font-family: 'Roboto Mono', ui-monospace, 'Courier New', monospace;
  font-size: 11.5px;
}

/* Last night's batch. Set apart on purpose: these figures belong to a day that has already been
   signed off, so the block has to read as an appendix rather than as part of the day being counted.
   Indigo, because that is already the day book's colour for system postings. */
.eod-section--prior {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 16px 18px 14px;
  margin-top: 30px;

  .eod-section__title {
    color: #5b21b6;
    border-bottom-color: #ddd6fe;
  }

  .pg-table th {
    background: #ede9fe;
    color: #5b21b6;
  }
}

/* Sits in the title row in place of the numbered chip: this block is outside the numbered sequence,
   because it is not a step in counting today. */
.eod-section__icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #7c3aed;
  flex: 0 0 auto;
}

.eod-note--lead {
  margin: 0 0 12px;
  color: #5b21b6;
}

/* The two dates, stated as a pair with an arrow between them. Spelling out "belongs to X, showing
   on Y" is the only way a reader can be sure which of the two a figure is counted under — a single
   date in a heading leaves exactly the ambiguity this block exists to remove. */
.eod-datepair {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  flex-wrap: wrap;
}

.eod-datepair__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
}

.eod-datepair__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c3aed;
}

.eod-datepair__value {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.eod-datepair__hint {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.4;
}

.eod-datepair__arrow {
  font-size: 20px;
  color: #a78bfa;
  flex: 0 0 auto;
}

/* Dates in the row are read against the ledger, so they do not shrink into the grey the way a
   secondary column normally would. */
.eod-datecell {
  font-size: 11.5px;
  font-weight: 600;
  color: #5b21b6;
  white-space: nowrap;
}

.eod-hint {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: #94a3b8;
}

.eod-blank {
  color: #94a3b8;
  font-style: italic;
}

/* ── Reconciliation table ── */

/* Two columns only, so the label takes the room and the figure sits in a fixed money column. */
.eod-recon {
  td:first-child {
    width: auto;
  }

  td:last-child {
    width: 190px;
  }
}

.eod-recon__expected td {
  border-top: 1px solid #94a3b8;
  background: #f8fafc;
}

.eod-recon__variance td {
  border-top: 2px solid #0f172a;
}

.eod-recon__variance.eod-ok td {
  background: #f0fdf4;
  color: #15803d;
}

.eod-recon__variance.eod-bad td {
  background: #fef2f2;
  color: #b91c1c;
}

/* ── Verdict line ── */
.eod-verdict {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;

  mat-icon {
    font-size: 17px;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }
}

.eod-verdict--ok {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #15803d;
}

.eod-verdict--bad {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

/* ── Operational notes ── */
.eod-notes {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: flex;
    gap: 14px;
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;

    &:last-child {
      border-bottom: 0;
    }
  }
}

.eod-notes__label {
  flex: 0 0 190px;
  font-weight: 600;
  color: #475569;
}

.eod-notes__value {
  color: #0f172a;
}

.eod-notes--warn {
  background: #fffbeb;

  .eod-notes__value {
    color: #b45309;
    font-weight: 600;
  }
}

.eod-notes--ok {
  background: #f0fdf4;

  .eod-notes__value {
    color: #15803d;
    font-weight: 600;
  }
}

/* ── Signatures ── */
.eod-sign {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 46px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.eod-sign__block {
  text-align: center;
}

.eod-sign__line {
  border-bottom: 1px solid #0f172a;
  height: 34px;
  margin-bottom: 7px;
}

.eod-sign__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #475569;
}

.eod-sign__name {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.eod-foot {
  margin: 26px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
  font-size: 10.5px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.5;
}

/* ── Print ──
   The sheet is the document; the shell, the toolbar and the app chrome are not. Colours are forced
   so the variance verdict survives a printer that would otherwise drop backgrounds. */
@media print {
  .no-print,
  .pg-head {
    display: none !important;
  }

  .eod-sheet {
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: none;
  }

  .eod-sheet,
  .eod-recon__variance td,
  .eod-verdict,
  .eod-notes--warn,
  .eod-notes--ok {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .eod-sheet__title {
    font-size: 16px;
  }

  .pg-table {
    font-size: 11px;
  }
}