/**
 * Styles of the Marketing funnel module (templates/marketing_funnel): its charts, the status matrix, the campaigns, ...
 * Builds on the app shell and building blocks of app.css; nothing here applies outside body.app-layout.
 */

/* Dashboard: distribution per funnel group --------------------------------- */
/* Ordinal blue ramp (validated with the dataviz palette validator on the white card): best segment darkest. */
.app-layout {
    --seg-0: #0d366b;
    --seg-1: #1c5cab;
    --seg-2: #2a78d6;
    --seg-3: #5598e7;
    --seg-4: #86b6ef;
}

.app-layout .seg-0 { background: var(--seg-0); }
.app-layout .seg-1 { background: var(--seg-1); }
.app-layout .seg-2 { background: var(--seg-2); }
.app-layout .seg-3 { background: var(--seg-3); }
.app-layout .seg-4 { background: var(--seg-4); }

.app-layout .distribution-legend {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.app-layout .distribution-swatch {
    width: 1.25rem;
    height: 0.625rem;
    border-radius: 2px;
}

.app-layout .distribution-chart {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem 1rem;
}

.app-layout .distribution-row {
    display: contents;
}

.app-layout .distribution-bar {
    display: flex;
    gap: 2px; /* surface gap between the segments */
    height: 1.25rem;
}

.app-layout .distribution-bar.is-empty {
    align-items: center;
    padding-left: 0.5rem;
    border-radius: 4px;
    background: var(--app-surface);
}

.app-layout .distribution-segment {
    flex-basis: 0;
    min-width: 3px;
}

.app-layout .distribution-segment:first-child {
    border-radius: 4px 0 0 4px;
}

.app-layout .distribution-segment:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.app-layout .distribution-segment:hover,
.app-layout .distribution-segment:focus-visible {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 1px;
}

.app-layout .distribution-total {
    min-width: 2.5rem;
    text-align: right;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .app-layout .distribution-chart {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-layout .distribution-label {
        grid-column: 1 / -1;
        margin-bottom: -0.4rem;
    }
}


/* Dashboard: flow of the segment changes ----------------------------------- */
/* Diverging pair (validated with the dataviz palette validator on the white card), the neutral for other changes. */
.app-layout {
    --flow-rise: #1c5cab;
    --flow-fall: #e34948;
    --flow-other: #86847f;
}

.app-layout .flow-rise { background: var(--flow-rise); }
.app-layout .flow-fall { background: var(--flow-fall); }
.app-layout .flow-other { background: var(--flow-other); }
.app-layout .flow-icon-rise { color: var(--flow-rise); }
.app-layout .flow-icon-fall { color: var(--flow-fall); }
.app-layout .flow-icon-other { color: var(--bs-secondary-color); }

.app-layout .flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.app-layout .flow-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.625rem;
    margin-right: 0.25rem;
    border-radius: 2px;
}

.app-layout .flow-groups {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, 1fr) 2.75rem;
    align-items: center;
    row-gap: 0.6rem;
}

.app-layout .flow-group-row {
    display: contents;
}

.app-layout .flow-group-label {
    padding-right: 0.75rem;
}

/* Each arm reserves room at its outer end for the value next to the bar. */
.app-layout .flow-arm {
    display: flex;
    height: 1.25rem;
}

.app-layout .flow-arm-fall {
    justify-content: flex-end;
    padding-left: 2rem;
}

.app-layout .flow-arm-rise {
    padding-right: 2rem;
    border-left: 1px solid var(--bs-border-color); /* the zero line */
}

.app-layout .flow-bar {
    position: relative;
    display: block;
    min-width: 3px;
    height: 100%;
    cursor: default;
}

.app-layout .flow-arm-fall .flow-bar {
    border-radius: 4px 0 0 4px;
}

.app-layout .flow-arm-rise .flow-bar {
    margin-left: 2px; /* surface gap at the zero line */
    border-radius: 0 4px 4px 0;
}

.app-layout .flow-value {
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}

.app-layout .flow-arm .flow-value {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.app-layout .flow-arm-fall .flow-value {
    right: calc(100% + 0.35rem);
}

.app-layout .flow-arm-rise .flow-value {
    left: calc(100% + 0.35rem);
}

.app-layout .flow-other-count {
    text-align: right;
    white-space: nowrap;
}

.app-layout .flow-transition {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

.app-layout .flow-transition-label {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.app-layout .flow-transition-track {
    display: block;
    height: 0.75rem;
}

.app-layout .flow-transition-track .flow-bar {
    border-radius: 0 4px 4px 0;
}

.app-layout .flow-transition .flow-value {
    text-align: right;
}

.app-layout .flow-bar:hover,
.app-layout .flow-bar:focus-visible {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 1px;
}

@media (max-width: 575.98px) {
    .app-layout .flow-groups {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem;
    }

    .app-layout .flow-group-label {
        grid-column: 1 / -1;
        margin-bottom: -0.4rem;
    }

    .app-layout .flow-transition {
        grid-template-columns: minmax(0, 1fr) 2rem;
    }

    .app-layout .flow-transition-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Dashboard: processing ------------------------------------------------------ */
.app-layout .processing-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.app-layout .processing-errors li + li {
    margin-top: 0.4rem;
}

/* Dashboard: lists of labelled bars (scores) ---------------------------------- */
.app-layout {
    --score-bar: #2a78d6;
}

.app-layout .bar-list-row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

.app-layout .bar-list-label {
    font-size: 0.9rem;
}

.app-layout .bar-list-track {
    display: block;
    height: 0.75rem;
}

.app-layout .bar-list-bar {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    cursor: default;
}

.app-layout .bar-list-bar:hover,
.app-layout .bar-list-bar:focus-visible {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 1px;
}

.app-layout .bar-list-value {
    text-align: right;
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.app-layout .score-bar {
    background: var(--score-bar);
}

.app-layout .score-hot-icon {
    color: #c40063; /* the pink of the hot accounts stat */
}

@media (max-width: 575.98px) {
    .app-layout .bar-list-row {
        grid-template-columns: minmax(0, 1fr) 3.5rem;
    }

    .app-layout .bar-list-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Accounts ------------------------------------------------------------------ */
.app-layout .segment-badge {
    margin-right: 0.25rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 500;
}

.app-layout .condition-list > li {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--app-card-border);
    border-radius: var(--bs-border-radius);
}

.app-layout .condition-list > li + li {
    margin-top: 0.5rem;
}

.app-layout .condition-list > li.is-match {
    border-color: var(--bs-success-border-subtle);
    background: var(--bs-success-bg-subtle);
}

.app-layout .condition-list > li.is-next {
    border-color: var(--bs-info-border-subtle);
}

.app-layout .condition-operands {
    margin-top: 0.35rem;
    padding-left: 1.4rem;
}

.app-layout .condition-expression {
    margin-top: 0.25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-layout .funnel-card {
    overflow: hidden;
}

.app-layout .funnel-card > .funnel-summary {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
}

.app-layout .funnel-card > .funnel-summary::-webkit-details-marker {
    display: none;
}

.app-layout .funnel-card > .funnel-summary:hover {
    background: var(--bs-tertiary-bg);
}

.app-layout .funnel-chevron {
    color: var(--bs-secondary-color);
    transition: transform 0.15s ease-in-out;
}

.app-layout .funnel-card[open] .funnel-chevron {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    .app-layout .funnel-card > .funnel-summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.app-layout .contact-table .contact-cell {
    max-width: 18rem;
}


/* Status matrix -------------------------------------------------------------- */
/*
 * A row per period, three columns per segment (+, −, E). The period column and the three header rows stick while
 * scrolling the matrix both ways; the header rows have a fixed height so each one knows where to stick.
 */
.app-layout {
    --matrix-head-row: 2rem;
}

.app-layout .status-matrix-scroll {
    max-height: 75vh;
    overflow: auto;
}

.app-layout .status-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.app-layout .status-matrix th,
.app-layout .status-matrix td {
    padding: 0.3rem 0.5rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid #eef0f5;
    text-align: right;
    white-space: nowrap;
}

.app-layout .status-matrix thead th {
    position: sticky;
    z-index: 2;
    height: var(--matrix-head-row);
    background: #fafbfd;
    color: var(--bs-secondary-color);
    font-weight: 500;
    text-align: center;
    border-bottom-color: var(--app-card-border);
}

.app-layout .status-matrix thead tr:nth-child(1) th { top: 0; }
.app-layout .status-matrix thead tr:nth-child(2) th { top: var(--matrix-head-row); }
.app-layout .status-matrix thead tr:nth-child(3) th { top: calc(2 * var(--matrix-head-row)); }

.app-layout .status-matrix .matrix-group {
    color: var(--bs-body-color);
}

.app-layout .status-matrix .matrix-segment {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* A segment starts with its + column: a line between the segments. */
.app-layout .status-matrix .matrix-in,
.app-layout .status-matrix .matrix-segment,
.app-layout .status-matrix .matrix-group {
    border-left: 1px solid var(--app-card-border);
}

.app-layout .status-matrix .matrix-period {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 17rem;
    min-width: 17rem;
    max-width: 17rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: calc(0.5rem + var(--depth, 0) * 1.1rem);
    text-align: left;
    font-weight: 500;
    border-right: 1px solid var(--app-card-border);
}

.app-layout .status-matrix thead .matrix-period {
    z-index: 3;
    vertical-align: bottom;
}

.app-layout .status-matrix td.matrix-end { font-weight: 600; }

/* Fixed widths, so the matrix and its comparison line up (the widest end is a 5-digit count). */
.app-layout .status-matrix td.matrix-in,
.app-layout .status-matrix td.matrix-out,
.app-layout .status-matrix thead tr:nth-child(3) th.matrix-in,
.app-layout .status-matrix thead tr:nth-child(3) th.matrix-out {
    width: 3.25rem;
    min-width: 3.25rem;
}

.app-layout .status-matrix td.matrix-end,
.app-layout .status-matrix thead tr:nth-child(3) th.matrix-end {
    width: 4.25rem;
    min-width: 4.25rem;
}

/* The difference between the two periods compared: one color, the sign carries the direction. */
.app-layout .status-matrix .matrix-difference-row > * {
    background: #fff8e6;
    font-weight: 600;
    border-bottom: 2px solid var(--app-card-border);
}

.app-layout .status-matrix .matrix-difference-row > .matrix-period {
    white-space: normal;
}

.app-layout .status-matrix td.matrix-difference {
    color: var(--bs-body-color);
}

.app-layout .status-matrix td.matrix-difference.is-zero {
    color: #c3c7d1;
}

.app-layout .status-matrix .matrix-year > * {
    background: #e3ecf8;
    font-weight: 600;
}

.app-layout .status-matrix .matrix-quarter > * {
    background: #f0f5fc;
}

.app-layout .status-matrix .matrix-month > * {
    background: #f7f8fb;
}

.app-layout .status-matrix .is-current > .matrix-period {
    box-shadow: inset 3px 0 0 var(--bs-success);
}

.app-layout .matrix-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    margin-right: 0.25rem;
    padding: 0;
    color: var(--bs-secondary-color);
    background: none;
    border: 0;
}

.app-layout .matrix-toggle i {
    transition: transform 0.15s ease-in-out;
}

.app-layout .matrix-toggle[aria-expanded="false"] i {
    transform: rotate(-90deg);
}

/* + and − (also on the page of a period), 0 muted. */
.app-layout td.matrix-in { color: var(--flow-rise); }
.app-layout td.matrix-out { color: var(--flow-fall); }
.app-layout td.is-zero { color: #c3c7d1; }

/* Process runs ------------------------------------------------------------- */
.app-layout .run-duration {
    display: grid;
    grid-template-columns: minmax(4rem, 8rem) auto;
    align-items: center;
    gap: 0.5rem;
}

.app-layout .run-duration-track {
    display: block;
    height: 0.5rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0.25rem;
    overflow: hidden;
}

.app-layout .run-duration-bar {
    display: block;
    height: 100%;
    background: var(--flow-rise);
}

.app-layout .run-counts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.app-layout .error-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    cursor: pointer;
}

.app-layout .error-message {
    min-width: 0;
    font-size: 0.875rem;
    word-break: break-word;
}

.app-layout .error-subjects {
    padding-left: 1.5rem;
    columns: 2 16rem;
}

/* Campaigns of a period (in the status matrix layout): the campaign column has two lines, cost and touched accounts
   are plain figures. The selected campaign (its changes are listed below) and the changes without campaign stand out. */
.app-layout .campaign-matrix .campaign-cell {
    white-space: normal;
    font-weight: 400;
}

.app-layout .campaign-matrix .campaign-figure {
    min-width: 5rem;
    text-align: right;
}

.app-layout .campaign-matrix thead .campaign-figure {
    vertical-align: bottom;
}

.app-layout .campaign-matrix .campaign-unattributed > * {
    background: #f7f8fb;
    border-top: 2px solid var(--app-card-border);
}

.app-layout .campaign-matrix tr.is-current > .matrix-period {
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

/* Campaigns ---------------------------------------------------------------- */
.app-layout .campaign-table .campaign-name {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 22rem;
    padding-left: calc(0.5rem + var(--depth, 0) * 1.5rem);
}

.app-layout .campaign-table .matrix-toggle {
    margin-top: 0.1rem;
    flex: none;
}

.app-layout .campaign-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1rem;
}

/* The split of the cost, below the figures. */
.app-layout .campaign-costs {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-card-border);
}

/* The cost of the campaign itself, of its sub-campaigns and the total (with a line above it), the cost KPIs next to it
   (below it on a narrow screen). */
.app-layout .campaign-costs.has-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2rem;
}

.app-layout .campaign-costs.has-split > .table-responsive {
    flex: 1 1 32rem;
    max-width: 48rem;
}

.app-layout .campaign-costs.has-split > .campaign-kpis {
    flex: 1 1 10rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem 1rem;
}

@media (min-width: 992px) {
    .app-layout .campaign-costs.has-split > .campaign-kpis {
        flex: 0 0 auto;
        grid-template-columns: auto;
        padding-left: 2rem;
        border-left: 1px solid var(--app-card-border);
    }
}

.app-layout .campaign-cost-split tr.is-total > * {
    border-top: 2px solid var(--app-card-border);
    border-bottom: 0;
}