/* Cashflow page — chart card, granularity toggle, summary side column */

/* The segmented Monthly / Quarterly / Annual and chart-view toggles use the shared
   .segmented component (components/segmented.css). Only the tooltip add-on lives here. */

/* Explainer tooltips on the chart-view toggle (Cumulative / vs Target / Monthly).
   Reuses the kpi-tip bubble look, but only appears after the pointer is held for 2s
   (transition-delay on hover), and hides instantly on mouse-out (no delay on the base rule). */
.segmented__btn { position: relative; }
.seg-tip__bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 99;
    width: max-content;
    max-width: 240px;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-text, #0b2545);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
    pointer-events: none;
}
.segmented__btn:hover .seg-tip__bubble,
.segmented__btn:focus-visible .seg-tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 2s;   /* hold the hover for 2 seconds before it pops up */
}

/* Two-column layout: chart (wide) + summary cards (narrow).
   Stretch both columns to the same height and spread the side cards so the column bottoms stay level. */
.cashflow-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--spacing-6);
    align-items: stretch;
}
.cashflow-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-6);
}

@media (max-width: 1024px) {
    .cashflow-grid { grid-template-columns: 1fr; }
}

/* Profitability scorecard — a fixed 3-column grid of KPI tiles in the (wide) Portfolio Health modal */
.cashflow-scorecard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-4);
    margin-top: var(--spacing-5);
}
@media (max-width: 720px) {
    .cashflow-scorecard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .cashflow-scorecard { grid-template-columns: 1fr; }
}

.cashflow-scorecard .stat-card {
    background: var(--color-surface-muted, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    /* Override the base .stat-card overflow:hidden so the KPI tooltip can float outside the tile. */
    overflow: visible;
}

/* KPI formula tooltip — a small "?" the user hovers/focuses to see how the figure is calculated. */
.kpi-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: var(--spacing-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: help;
    line-height: 0;
    vertical-align: middle;
}
/* Lift the whole trigger's stacking context while active so its bubble sits above every sibling tile. */
.kpi-tip:hover,
.kpi-tip:focus-within {
    color: var(--color-primary, var(--color-text));
    z-index: 99;
}
.kpi-tip__bubble {
    position: absolute;
    /* Sit above the icon and grow leftward, so it never covers the value or clips off the modal's right edge. */
    bottom: calc(100% + 8px);
    right: 0;
    left: auto;
    z-index: 99;
    width: max-content;
    max-width: 220px;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-text, #0b2545);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}
.kpi-tip:hover .kpi-tip__bubble,
.kpi-tip:focus-visible .kpi-tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header inside the scorecard modal (title + subtitle), clearing the close button */
.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    padding-right: var(--spacing-6);
}

/* Chart card */
.cashflow-chart-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
}
/* Right-hand controls: the Cumulative/Monthly toggle stacked above the legend. */
.cashflow-chart-card__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-3);
}
.cashflow-headline {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.cashflow-chart {
    position: relative;
    height: 320px;
    margin-top: var(--spacing-5);
}

/* Legend */
.cashflow-legend {
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.cashflow-legend__item { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.cashflow-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--projected { background: var(--color-primary); }
.dot--actual { background: var(--color-brand-navy); }

/* Line swatches (solid = actual, dashed = forecast, green = net in bank) */
.legend-line { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--color-primary); }
.legend-line--dashed { border-top: 2px dashed var(--color-brand-navy); }
.legend-line--net { border-top: 2px solid #16a34a; }

/* Income-vs-Target swatches: target (dashed navy) + the three income scenarios */
.legend-line--target { border-top: 2.5px dashed #0b2545; }
.legend-line--opt { border-top: 2.5px solid #16a34a; }
.legend-line--real { border-top: 2.5px solid #2563eb; }
.legend-line--pess { border-top: 2.5px solid #f59e0b; }

/* Per-scenario coverage chips under the income-vs-target chart */
.coverage-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}
@media (max-width: 640px) { .coverage-row { grid-template-columns: 1fr; } }
.coverage-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-05);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}
.coverage-chip__label { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
/* Help "?" pinned to the chip's top-right corner; its bubble drops below-left so it never clips the edge. */
.coverage-chip__tip { position: absolute; top: var(--spacing-2); right: var(--spacing-2); margin: 0; }
.coverage-chip__tip .kpi-tip__bubble {
    top: calc(100% + 6px);
    bottom: auto;
    right: 0;
    left: auto;
    transform: none;
    white-space: normal;
    text-transform: none;
}
.coverage-chip__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.coverage-chip__value.is-under { color: var(--color-danger); }
.coverage-chip__value.is-over { color: var(--color-success); }
.coverage-chip__pct { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* Variance line under the headline */
.cashflow-variance { margin-top: var(--spacing-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.cashflow-variance--ahead { color: var(--color-success); }
.cashflow-variance--behind { color: var(--color-danger); }

/* Filter controls (e.g. on the transactions card) */
.filter-group { display: flex; gap: var(--spacing-2); }
.filter-select {
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-1-5) var(--spacing-3);
    cursor: pointer;
}
.filter-select:hover { border-color: var(--color-border-strong); }

/* Clickable transaction rows (open the project drill-down) */
.tx-row { cursor: pointer; transition: background 0.12s ease; }
.tx-row:hover { background: var(--color-surface-alt); }
.tx-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* A project's movements are grouped under one rowspanned project cell; a stronger top border marks
   where one project's group ends and the next begins. */
.tx-row--group-start td { border-top: 1px solid var(--color-border-strong); }
.tx-row .tx-project { vertical-align: top; }

/* Cash out (negative amounts) reads red so direction is obvious at a glance. */
.data-table .num--out { color: var(--color-danger); }

/* ── Project drill-down modal ──────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
}
.modal[hidden] { display: none; }
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(2px);
}
.modal__dialog {
    position: relative;
    width: min(680px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-6);
}
/* Big modal — the portfolio profitability scorecard. Overflow visible so the KPI tooltips, which sit
   above the tiles, are never clipped by the dialog's scroll box (the scorecard is short — no scroll). */
.modal__dialog--wide {
    width: min(1040px, 100%);
    overflow: visible;
}
.modal__close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--spacing-1);
    border-radius: var(--radius-sm);
    line-height: 0;
}
.modal__close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.modal__loading { padding: var(--spacing-6); text-align: center; color: var(--color-text-secondary); }

/* Modal body — project cash-flow detail */
.cf-detail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding-right: var(--spacing-6); /* clear the close button */
}
.cf-detail__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); }
.cf-detail__ref { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--spacing-05); }
.cf-detail__chips { display: flex; align-items: center; gap: var(--spacing-2); flex-shrink: 0; }

.cf-detail__fees {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
}
.cf-fee {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}
.cf-fee__label { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.cf-fee__value { margin-top: var(--spacing-1); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.cf-fee__value--over { color: var(--color-success); }
.cf-fee__value--under { color: var(--color-danger); }
.cf-fee__hint { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-left: var(--spacing-05); }

.cf-detail__chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-2);
}
.cf-detail__chart { position: relative; height: 220px; }
.cf-detail__totals {
    display: flex;
    gap: var(--spacing-5);
    margin-top: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.cf-detail__totals strong { color: var(--color-text); font-weight: var(--font-weight-semibold); margin-left: var(--spacing-1); }

.empty-state--compact { padding: var(--spacing-5); }

/* Modal body — period (chart-click) breakdown */
.cf-breakdown__head { padding-right: var(--spacing-6); }
.cf-breakdown__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text); margin-top: var(--spacing-05); }
.cf-breakdown__totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}
.cf-breakdown__total {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
}
.cf-breakdown__total--net { border-color: var(--color-primary); }
.cf-breakdown__total-label { display: block; font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.cf-breakdown__total-value { display: block; margin-top: var(--spacing-1); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.cf-breakdown__total-value--out { color: var(--color-danger); }

/* Directors-report period chooser (in the modal). */
.report-field { margin-bottom: var(--spacing-3); }
.report-field .field__label { display: block; margin-bottom: var(--spacing-1); }
.report-form__select {
    width: 100%;
    height: 40px;
    padding: 0 var(--spacing-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.report-form__select:focus { outline: none; border-color: var(--color-primary); }
.report-field__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-5);
}

/* ── Pending milestones by month (ADR-017) ─────────────────────────────────────
   Opened from the Pending Milestone Invoices card into the shared modal: the workbook's projected
   milestones beside the forecast worksheets' committed figure per month. */
.pending-months__open {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-3);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}
.pending-months__open:hover { text-decoration: underline; }
.pending-months__table {
    margin-top: var(--spacing-4);
    min-width: 320px;
}
.pending-months__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-3);
    align-items: center;
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.pending-months__row > span:nth-child(2),
.pending-months__row > span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.pending-months__row--head {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--color-border);
}
.pending-months__row--head > span:last-child { display: inline-flex; align-items: center; justify-content: flex-end; }
.pending-months__month { color: var(--color-text-secondary); }
.pending-months__forecast--covered { color: var(--color-success); }
.pending-months__forecast--short { color: var(--color-danger); }
.pending-months__row--total {
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-1);
    padding-top: var(--spacing-3);
    font-weight: var(--font-weight-semibold);
}
.pending-months__link { margin-top: var(--spacing-4); font-size: var(--font-size-sm); }
.pending-months__link a { color: var(--color-primary); text-decoration: none; }
.pending-months__link a:hover { text-decoration: underline; }