/* [TFH-959:TFH_ACCOUNT_LEDGER_STATEMENT:CSS-START] */
/*
  TFH-959 Account Ledger Statement - screen styles
  Consolidated 2026-09-25 (replaces CSS, REFINEMENT, REFINEMENT-2, FINAL-BALANCE-ROWS,
  RESPONSIVE-SCREEN and LAYOUT-BALANCE blocks; same visual result).

  Sections
    1. Screen layout (content width, header/footer alignment)
    2. Header metrics
    3. Filter panel
    4. Account Head search + suggestions
    5. Data grid
    6. Responsive
    7. Shared phone rule for 957 / 958 filter grids (kept here to preserve cascade)

  Note: PDF / CSV output uses TFH_ledgerColumns() pixel widths, not these styles.
*/

/* ---------- 1. Screen layout ---------- */
.tfh-account-ledger-statement-screen {
  --tfh-ledger-content-max: 1680px;
}

.tfh-account-ledger-statement-screen .tfh-report-workspace-body {
  width: 100%;
  max-width: var(--tfh-ledger-content-max);
  margin: 0 auto;
  gap: 10px;
  padding: 12px 18px 6px;
}

.tfh-account-ledger-statement-screen .tfh-report-workspace-header {
  padding-left: max(22px, calc((100% - var(--tfh-ledger-content-max)) / 2 + 18px));
  padding-right: max(22px, calc((100% - var(--tfh-ledger-content-max)) / 2 + 18px));
}

.tfh-account-ledger-statement-screen .tfh-report-workspace-footer {
  padding-left: max(14px, calc((100% - var(--tfh-ledger-content-max)) / 2 + 18px));
  padding-right: max(14px, calc((100% - var(--tfh-ledger-content-max)) / 2 + 18px));
}

/* ---------- 2. Header metrics ---------- */
.tfh-ledger-header-metrics {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

.tfh-ledger-header-metrics > div {
  min-width: 110px;
  display: grid;
  align-content: center;
  justify-items: end;
  padding: 7px 14px;
  border-left: 1px solid rgba(255,255,255,.2);
}

.tfh-ledger-header-metrics span {
  color: rgba(255,255,255,.7);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tfh-ledger-header-metrics strong {
  color: #d8b56e;
  font-family: "Times New Roman",serif;
  font-size: 1.08rem;
  white-space: nowrap;
}

/* ---------- 3. Filter panel ----------
   Row 1: Account Group | Account Head
   Row 2: Starting Date | Ending Date | Accumulate */
.tfh-account-ledger-statement-screen .tfh-report-workspace-filters {
  padding: 12px 16px 14px;
  border: 1px solid #b4c3d0;
  border-radius: 10px;
  background: linear-gradient(180deg,#ffffff,#eaf0f5);
  box-shadow: inset 0 1px #fff, 0 6px 18px rgba(17,49,84,.09);
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);
  column-gap: 14px;
  row-gap: 11px;
  align-items: end;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > label:nth-child(1) { grid-column: 1; }
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > .tfh-ledger-account-filter { grid-column: 2 / -1; }
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > label:nth-child(3) { grid-column: 1; }
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > label:nth-child(4) { grid-column: 2; }
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > .tfh-report-accumulate-button { grid-column: 3; }

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid label {
  gap: 5px;
  min-width: 0;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid label > span {
  color: #3b5167;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid input:not([type="hidden"]),
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid select {
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #a9b9c8;
  border-radius: 7px;
  color: #14283d;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(16,39,65,.07);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b5167' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  cursor: pointer;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid input::placeholder {
  color: #8796a5;
  font-weight: 500;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid input:hover:not(:disabled),
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid select:hover:not(:disabled) {
  border-color: #7f97ad;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid input:focus,
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid select:focus {
  outline: none;
  border-color: #2f6a9a;
  box-shadow: 0 0 0 3px rgba(47,106,154,.18);
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid input:disabled,
.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid select:disabled {
  color: #7d8c9a;
  background-color: #eef2f5;
  box-shadow: none;
  cursor: not-allowed;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid .tfh-report-accumulate-button {
  justify-self: start;
  width: 190px;
  height: 38px;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #0f2c47;
  border-radius: 7px;
  color: #fff;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 750;
  letter-spacing: .04em;
  background: linear-gradient(180deg,#34648d,#173a5c);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 4px 10px rgba(14,42,66,.2);
  transition: filter .15s ease, box-shadow .15s ease;
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid .tfh-report-accumulate-button:hover {
  filter: brightness(1.12);
}

.tfh-account-ledger-statement-screen .tfh-ledger-filter-grid .tfh-report-accumulate-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,106,154,.3), 0 4px 10px rgba(14,42,66,.2);
}

/* ---------- 4. Account Head search + suggestions ---------- */
.tfh-ledger-account-shell {
  position: relative;
  min-width: 0;
}

.tfh-ledger-account-shell input {
  width: 100%;
}

.tfh-ledger-account-suggestions {
  position: absolute;
  z-index: 22000;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 285px;
  overflow: auto;
  border: 1px solid #afbdca;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(4,16,31,.25);
}

.tfh-ledger-account-suggestions button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid #e4e9ee;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.tfh-ledger-account-suggestions button:hover {
  background: #edf5fb;
}

.tfh-ledger-account-suggestions strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #172b41;
  font-size: .86rem;
}

.tfh-ledger-account-suggestions span {
  flex: 0 0 auto;
  color: #68798a;
  font-size: .76rem;
}

/* ---------- 5. Data grid (always the width of the filter panel) ---------- */
.tfh-account-ledger-statement-screen .tfh-report-workspace-grid-card {
  width: 100%;
  min-width: 0;
  border-radius: 10px;
}

.tfh-account-ledger-statement-screen .tfh-report-workspace-grid-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
}

.tfh-account-ledger-statement-screen .tfh-ledger-table {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
}

.tfh-account-ledger-statement-screen .tfh-ledger-table th,
.tfh-account-ledger-statement-screen .tfh-ledger-table td {
  overflow-wrap: anywhere;
}

.tfh-account-ledger-statement-screen .tfh-ledger-table td.is-nowrap,
.tfh-account-ledger-statement-screen .tfh-ledger-table th.is-nowrap {
  overflow-wrap: normal;
}

/* Opening balance row (first header row, sticky) */
.tfh-ledger-opening-row th {
  position: sticky;
  top: 0;
  z-index: 7;
  width: auto;
  height: 34px;
  padding: 0 12px !important;
  border: 1px solid #17212b !important;
  color: #fff !important;
  background: linear-gradient(180deg,#66727d,#3e4954) !important;
  text-align: left !important;
}

.tfh-ledger-opening-row span,
.tfh-ledger-opening-row strong {
  display: inline-block;
  line-height: 32px;
}

.tfh-ledger-opening-row strong {
  float: right;
  color: #fff;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}

/* Column titles sit below the sticky opening row */
.tfh-ledger-table thead tr:not(.tfh-ledger-opening-row) th {
  top: 34px;
}

/* Description + remarks cell */
.tfh-ledger-description {
  display: block;
  color: #15263a;
  font-weight: 700;
  line-height: 1.28;
}

.tfh-ledger-remarks {
  display: block;
  margin-top: 3px;
  color: #5b6876;
  font-size: .92em;
  line-height: 1.28;
}

/* Totals row with closing balance */
.tfh-ledger-table tfoot td {
  height: 40px;
}

.tfh-ledger-closing-total {
  padding: 4px 8px !important;
  color: #fff !important;
  background: linear-gradient(180deg,#66727d,#3e4954) !important;
  border-color: #17212b !important;
  white-space: nowrap;
}

.tfh-ledger-closing-total span,
.tfh-ledger-closing-total strong {
  display: block;
  text-align: right;
  line-height: 1.05;
}

.tfh-ledger-closing-total span {
  font-size: .55rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .88;
}

.tfh-ledger-closing-total strong {
  margin-top: 3px;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. Responsive ---------- */
@media (max-width: 1100px) {
  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 170px;
  }

  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid .tfh-report-accumulate-button {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .tfh-ledger-header-metrics {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 650px) {
  .tfh-account-ledger-statement-screen .tfh-report-workspace-body {
    padding: 10px 10px 6px;
  }

  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }

  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > label:nth-child(1),
  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > .tfh-ledger-account-filter,
  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > .tfh-report-accumulate-button {
    grid-column: 1 / -1;
  }

  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > label:nth-child(3) { grid-column: 1; }
  .tfh-account-ledger-statement-screen .tfh-ledger-filter-grid > label:nth-child(4) { grid-column: 2; }
}

/* ---------- 7. Shared phone rule (957 / 958) ----------
   Originally written in this module; it styles the Drivers Active Jobs (957) and
   Check Payments (958) filters. Kept here so their phone layout is unchanged.
   Candidate to move into 957 / 958 when those modules are refined. */
@media (max-width: 620px) {
  .tfh-active-jobs-filter-grid,
  .tfh-check-payments-filter-grid {
    grid-template-columns: 1fr;
  }
}
/* [TFH-959:TFH_ACCOUNT_LEDGER_STATEMENT:CSS-END] */