/*
 * Trader financial state colours
 * Applied automatically by settings/skins/js/financial-states.js
 */

#MainCanvas .financial-state-value {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#MainCanvas .financial-state-value.financial-positive,
#MainCanvas .financial-state-value.financial-positive strong,
#MainCanvas .financial-state-value.financial-positive b,
#MainCanvas .financial-state-value.financial-positive span {
  color: var(--skin-positive-color, #166534) !important;
}

#MainCanvas .financial-state-value.financial-negative,
#MainCanvas .financial-state-value.financial-negative strong,
#MainCanvas .financial-state-value.financial-negative b,
#MainCanvas .financial-state-value.financial-negative span {
  color: var(--skin-negative-color, #b42318) !important;
}

#MainCanvas .financial-state-value.financial-zero,
#MainCanvas .financial-state-value.financial-zero strong,
#MainCanvas .financial-state-value.financial-zero b,
#MainCanvas .financial-state-value.financial-zero span {
  color: var(--skin-neutral-color, #6b7280) !important;
}

/* Total cells receive a restrained status tint without colouring the label cell. */
#MainCanvas td.financial-state-value.financial-positive,
#MainCanvas th.financial-state-value.financial-positive {
  background-color: rgba(22, 163, 74, 0.09) !important;
  border-color: rgba(22, 163, 74, 0.24) !important;
}

#MainCanvas td.financial-state-value.financial-negative,
#MainCanvas th.financial-state-value.financial-negative {
  background-color: rgba(220, 38, 38, 0.09) !important;
  border-color: rgba(220, 38, 38, 0.24) !important;
}

#MainCanvas td.financial-state-value.financial-zero,
#MainCanvas th.financial-state-value.financial-zero {
  background-color: rgba(107, 114, 128, 0.07) !important;
  border-color: rgba(107, 114, 128, 0.18) !important;
}

/* Read-only summary fields and their currency add-ons. */
#MainCanvas .financial-input-group.financial-positive .edit-input-addon,
#MainCanvas .financial-input-group.financial-positive .edit-readonly-input,
#MainCanvas .financial-input-group.financial-positive .input-group-addon,
#MainCanvas input.financial-state-value.financial-positive,
#MainCanvas output.financial-state-value.financial-positive {
  color: var(--skin-positive-color, #166534) !important;
  background-color: #f0fdf4 !important;
  border-color: #16a34a !important;
}

#MainCanvas .financial-input-group.financial-negative .edit-input-addon,
#MainCanvas .financial-input-group.financial-negative .edit-readonly-input,
#MainCanvas .financial-input-group.financial-negative .input-group-addon,
#MainCanvas input.financial-state-value.financial-negative,
#MainCanvas output.financial-state-value.financial-negative {
  color: var(--skin-negative-color, #b42318) !important;
  background-color: #fef2f2 !important;
  border-color: #dc2626 !important;
}

#MainCanvas .financial-input-group.financial-zero .edit-input-addon,
#MainCanvas .financial-input-group.financial-zero .edit-readonly-input,
#MainCanvas .financial-input-group.financial-zero .input-group-addon,
#MainCanvas input.financial-state-value.financial-zero,
#MainCanvas output.financial-state-value.financial-zero {
  color: var(--skin-neutral-color, #6b7280) !important;
  background-color: #f8fafc !important;
  border-color: var(--skin-input-border, #cfd7e3) !important;
}

#MainCanvas .financial-input-group.financial-positive,
#MainCanvas .financial-input-group.financial-negative,
#MainCanvas .financial-input-group.financial-zero {
  border-radius: var(--skin-field-radius, 12px);
}


/*
 * Per-record / partial financial values.
 * These are deliberately restrained so long tables remain readable.
 */
#MainCanvas td[data-financial-value].financial-state-value,
#MainCanvas th[data-financial-value].financial-state-value {
  border-radius: 6px;
  background-clip: padding-box;
}

#MainCanvas td[data-financial-value].financial-positive,
#MainCanvas th[data-financial-value].financial-positive {
  color: var(--skin-positive-color, #166534) !important;
  background-color: rgba(22, 163, 74, 0.065) !important;
}

#MainCanvas td[data-financial-value].financial-negative,
#MainCanvas th[data-financial-value].financial-negative {
  color: var(--skin-negative-color, #b42318) !important;
  background-color: rgba(220, 38, 38, 0.065) !important;
}

#MainCanvas td[data-financial-value].financial-zero,
#MainCanvas th[data-financial-value].financial-zero {
  color: var(--skin-neutral-color, #6b7280) !important;
  background-color: rgba(107, 114, 128, 0.045) !important;
}

/* Fallbacks for legacy list classes when a skin does not define the variables. */
#MainCanvas .suppliers-amount-positive,
#MainCanvas .retail-clients-amount-positive,
#MainCanvas .sales-docs-amount-positive,
#MainCanvas .purchase-docs-amount-positive,
#MainCanvas .products-amount-positive {
  color: var(--skin-positive-color, #166534) !important;
}

#MainCanvas .suppliers-amount-negative,
#MainCanvas .retail-clients-amount-negative,
#MainCanvas .sales-docs-amount-negative,
#MainCanvas .purchase-docs-amount-negative,
#MainCanvas .products-amount-negative {
  color: var(--skin-negative-color, #b42318) !important;
}

#MainCanvas .suppliers-amount-zero,
#MainCanvas .retail-clients-amount-zero,
#MainCanvas .sales-docs-amount-zero,
#MainCanvas .products-amount-zero,
#MainCanvas .suppliers-amount-neutral,
#MainCanvas .retail-clients-amount-neutral,
#MainCanvas .sales-docs-amount-neutral,
#MainCanvas .purchase-docs-amount-neutral,
#MainCanvas .products-amount-neutral {
  color: var(--skin-neutral-color, #6b7280) !important;
}


/*
 * Stronger typography for every recognised financial total/subtotal.
 * The JavaScript adds .financial-total-row and .financial-summary-total
 * dynamically, including content loaded later through AJAX.
 */
#MainCanvas tr.financial-total-row > td,
#MainCanvas tr.financial-total-row > th {
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

#MainCanvas tr.financial-total-row > td.financial-state-value,
#MainCanvas tr.financial-total-row > th.financial-state-value,
#MainCanvas .financial-total,
#MainCanvas .total-amount,
#MainCanvas .totals-amount,
#MainCanvas [data-financial-total] {
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

#MainCanvas .financial-summary-total .edit-readonly-input,
#MainCanvas .financial-summary-total .input,
#MainCanvas input.financial-summary-value,
#MainCanvas output.financial-summary-value {
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

#MainCanvas .financial-summary-total .edit-input-addon,
#MainCanvas .financial-summary-total .input-group-addon {
  font-size: 19px !important;
  font-weight: 800 !important;
}

@media (max-width: 767px) {
  #MainCanvas tr.financial-total-row > td,
  #MainCanvas tr.financial-total-row > th {
    font-size: 15px !important;
  }

  #MainCanvas tr.financial-total-row > td.financial-state-value,
  #MainCanvas tr.financial-total-row > th.financial-state-value,
  #MainCanvas .financial-total,
  #MainCanvas .total-amount,
  #MainCanvas .totals-amount,
  #MainCanvas [data-financial-total] {
    font-size: 16px !important;
  }

  #MainCanvas .financial-summary-total .edit-readonly-input,
  #MainCanvas .financial-summary-total .input,
  #MainCanvas input.financial-summary-value,
  #MainCanvas output.financial-summary-value {
    font-size: 19px !important;
  }
}