/* =============================================================================
   Calculus - application styles
   -----------------------------------------------------------------------------
   Only what is this application's own and genuinely global. The shell and base
   styles come from Eyvi.Design (_content/Eyvi.Design/css/); this file never
   overrides them, but for the width a wide page asks for (the last section).
   Token-only: every value is a foundation token.
   ============================================================================= */

/* =============================================================================
   Figures
   -----------------------------------------------------------------------------
   GLOBAL because every screen writes out figures the server calculated - in a
   view's table, a line's row, a comparison - and they have to line up the same
   way in all of them. A scoped stylesheet cannot be shared between components.

   Right-aligned with tabular digits, so a column of amounts reads as a column:
   the decimal points sit under one another and a longer number is visibly a
   larger one. Never wrapped - half an amount on the next line is a different
   amount to the eye.
   ============================================================================= */
.figure {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A heading above a column of figures aligns with them. */
th.figure {
    text-align: right;
}

/* A row that adds up the rows beneath it. */
.total-row > th,
.total-row > td {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* =============================================================================
   Tables keep their words whole
   -----------------------------------------------------------------------------
   GLOBAL because every table in the application needs it. The foundation lets
   any word break anywhere, so that nothing can widen a page on a phone - and
   that also lets a table cell shrink to one letter, and a heading break in the
   middle of its word. A table that scrolls in its own box, or becomes cards on
   a phone, has no need of that: its cells keep their words and break between
   them.
   ============================================================================= */
.keep-words th,
.keep-words td {
    overflow-wrap: break-word;
}

/* =============================================================================
   Tabs
   -----------------------------------------------------------------------------
   GLOBAL because more than one screen has them - an estimate's parts, the
   home's list of commercial cases - and they look and behave the same on each.
   Links rather than buttons: each tab is an address, and the one shown says so
   with aria-current="page".

   A TAB IS DRAWN AS SOMETHING TO PRESS: a raised surface with an edge and
   rounded top corners, standing on the line under the row - words alone in a
   row read as a heading. The one shown has the pale fill a chosen segment has,
   and bold words, so it is told by more than its colour in either theme. Its
   edge is every tab's, so the line under the row runs on beneath it.
   ============================================================================= */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: var(--border-width) solid var(--color-border-strong);
}

.tabs__tab {
    display: inline-flex;
    align-items: center;
    min-height: var(--layout-touch-target-min);
    padding: var(--space-2) var(--space-4);
    /* On the line under the row, not above it. */
    margin-bottom: calc(var(--border-width) * -1);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background-color: var(--color-surface-container);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition:
        background-color var(--motion-duration-fast) var(--motion-easing-standard),
        border-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.tabs__tab:hover {
    border-color: var(--color-border-outline);
    color: var(--color-text);
    background-image: linear-gradient(var(--color-state-hover), var(--color-state-hover));
    text-decoration: none;
}

.tabs__tab:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: 2px;
}

.tabs__tab[aria-current="page"] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--font-weight-semibold);
}

/* =============================================================================
   The stages of a commercial case
   -----------------------------------------------------------------------------
   GLOBAL because a stage has one colour on every screen it is shown on: the
   pipeline, the list of commercial cases, a commercial case's own row. Each class sets
   one custom property, --chart-colour, the way the foundation's .chart-cat-N
   classes do, so the shape - a layer of the funnel, a step of a trail - decides
   where the colour goes. The colours are application tokens: see
   app-tokens.css for why they may be light, and what makes up for it.
   ============================================================================= */
.app-stage-lead { --chart-colour: var(--app-stage-lead); }
.app-stage-qualified { --chart-colour: var(--app-stage-qualified); }
.app-stage-offer { --chart-colour: var(--app-stage-offer); }
.app-stage-sold { --chart-colour: var(--app-stage-sold); }
.app-stage-lost { --chart-colour: var(--app-stage-lost); }

/* =============================================================================
   Wide pages
   -----------------------------------------------------------------------------
   GLOBAL because the shell's content area is the shell's, and a page's scoped
   stylesheet cannot reach the element it is drawn in. A page that is read
   across rather than down - the estimate, its lines' rows and its views'
   columns - marks an element of its own wide-page, and the content area takes
   90 % of the width beside the navigation instead of the shell's reading
   width. Never less than that width: on a narrower window a wide page is as
   wide as any other.
   ============================================================================= */
.app-content:has(.wide-page) {
    max-width: max(var(--layout-content-max-width), 90%);
}