/*
 * AQUILA QB2.3C
 * Cash Flow reporting presentation only.
 *
 * No renderer.
 * No route owner.
 * No click interceptor.
 */

.cash-flow-v1 {
    min-width: 0;
}

/* ---------------------------------------------------------------
   KPI MONEY ALIGNMENT
   --------------------------------------------------------------- */

.cash-flow-v1 .cash-flow-v1__metric strong,
.cash-flow-v1 .aq-cash-flow-number {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.cash-flow-v1 .cash-flow-v1__metric strong {
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------
   CASH FLOW STATEMENT SCROLLER
   --------------------------------------------------------------- */

.cash-flow-v1 .aq-cash-flow-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.cash-flow-v1 .aq-cash-flow-scroll table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

/* Particulars stays visible while moving through prior months. */

.cash-flow-v1 .aq-cash-flow-scroll
:is(th, td):first-child,
.cash-flow-v1 .aq-cash-flow-particulars {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 260px;
    max-width: 340px;
    text-align: left !important;
    background: var(--viz-card, #fff);
}

.cash-flow-v1 .aq-cash-flow-scroll
thead :is(th, td):first-child {
    z-index: 4;
}

.cash-flow-v1 .aq-cash-flow-scroll
tbody tr:hover :is(th, td):first-child {
    background: inherit;
}

/* Every financial/data column is right aligned. */

.cash-flow-v1 .aq-cash-flow-scroll
thead tr > :not(:first-child),
.cash-flow-v1 .aq-cash-flow-scroll
tbody tr > :not(:first-child) {
    text-align: right !important;
    white-space: nowrap;
    min-width: 150px;
    font-variant-numeric: tabular-nums;
}

/* First historic month is visually separated from standard comparison. */

.cash-flow-v1 .aq-cash-flow-history-first {
    border-left-width: 2px !important;
}

.cash-flow-v1 .aq-cash-flow-history-head,
.cash-flow-v1 .aq-cash-flow-history-cell {
    white-space: nowrap;
}

/* Section rows remain left aligned. */

.cash-flow-v1 .aq-cash-flow-scroll
tbody tr > :only-child {
    text-align: left !important;
}

/* ---------------------------------------------------------------
   AUTOMATIC TREND DATA LABELS
   --------------------------------------------------------------- */

.cash-flow-v1 .aq-cash-chart-value-label {
    pointer-events: none;
    user-select: none;
    font-size: 10px;
    font-weight: 600;
    fill: currentColor;
    opacity: .82;
    paint-order: stroke;
    stroke: var(--viz-card, #fff);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */

@media (max-width: 767px) {
    .cash-flow-v1 .aq-cash-flow-scroll
    :is(th, td):first-child,
    .cash-flow-v1 .aq-cash-flow-particulars {
        min-width: 190px;
        max-width: 230px;
    }

    .cash-flow-v1 .aq-cash-flow-scroll
    thead tr > :not(:first-child),
    .cash-flow-v1 .aq-cash-flow-scroll
    tbody tr > :not(:first-child) {
        min-width: 135px;
    }

    .cash-flow-v1 .aq-cash-chart-value-label {
        font-size: 9px;
    }
}

/*
 * AQUILA QB2.3C.2-R1
 *
 * Cash Flow comparative column differentiation
 * + automatic chart label overlays.
 *
 * Presentation only.
 */

/* ========================================================================
   CURRENT SELECTED MONTH
   ======================================================================== */

.cash-flow-v1
thead
[data-aq-cash-column="current"] {
    background:
        rgba(19, 122, 82, 0.12) !important;

    border-bottom:
        2px solid rgba(19, 122, 82, 0.30) !important;
}

.cash-flow-v1
tbody
[data-aq-cash-column="current"] {
    background:
        rgba(19, 122, 82, 0.045) !important;
}

/* ========================================================================
   PREVIOUS SELECTED MONTH
   ======================================================================== */

.cash-flow-v1
thead
[data-aq-cash-column="previous"] {
    background:
        rgba(43, 89, 151, 0.105) !important;

    border-bottom:
        2px solid rgba(43, 89, 151, 0.26) !important;
}

.cash-flow-v1
tbody
[data-aq-cash-column="previous"] {
    background:
        rgba(43, 89, 151, 0.040) !important;
}

/* ========================================================================
   CHANGE / % CHANGE
   ======================================================================== */

.cash-flow-v1
thead
[data-aq-cash-column="change"],
.cash-flow-v1
thead
[data-aq-cash-column="change-percent"] {
    background:
        rgba(155, 108, 35, 0.105) !important;

    border-bottom:
        2px solid rgba(155, 108, 35, 0.26) !important;
}

.cash-flow-v1
tbody
[data-aq-cash-column="change"],
.cash-flow-v1
tbody
[data-aq-cash-column="change-percent"] {
    background:
        rgba(155, 108, 35, 0.038) !important;
}

/*
 * Financial values remain right aligned.
 */

.cash-flow-v1
[data-aq-cash-column="current"],
.cash-flow-v1
[data-aq-cash-column="previous"],
.cash-flow-v1
[data-aq-cash-column="change"],
.cash-flow-v1
[data-aq-cash-column="change-percent"] {
    text-align:
        right !important;

    font-variant-numeric:
        tabular-nums;
}

/*
 * Keep category/section bands coherent.
 */

.cash-flow-v1
tbody
tr.section
> *,
.cash-flow-v1
tbody
tr.section-row
> *,
.cash-flow-v1
tbody
tr.group
> * {
    background:
        inherit !important;
}

/* ========================================================================
   CHART DATA LABEL HOST
   ======================================================================== */

.cash-flow-v1
.aq-cash-chart-label-host {
    position:
        relative !important;
}

.cash-flow-v1
.aq-cash-chart-label-overlay {
    position:
        absolute;

    z-index:
        12;

    pointer-events:
        none;

    user-select:
        none;

    overflow:
        visible;
}

.cash-flow-v1
.aq-cash-chart-data-label {
    position:
        absolute;

    transform:
        translate(-50%, -50%);

    padding:
        2px 5px;

    min-width:
        max-content;

    border:
        1px solid rgba(15, 23, 42, 0.08);

    border-radius:
        6px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.10);

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.1;

    white-space:
        nowrap;

    font-variant-numeric:
        tabular-nums;

    backdrop-filter:
        blur(2px);
}

.cash-flow-v1
.aq-cash-chart-data-label--inflow {
    color:
        #137a52;
}

.cash-flow-v1
.aq-cash-chart-data-label--outflow {
    color:
        #b4232e;
}

.cash-flow-v1
.aq-cash-chart-data-label--net {
    color:
        #2456a6;
}

@media (max-width: 767px) {

    .cash-flow-v1
    .aq-cash-chart-data-label {
        padding:
            1px 3px;

        font-size:
            8px;
    }
}