/* Product-specific fine tuning. Design tokens live in Rax.Web;
   only deviations that belong to the ERP go here: the dashboard (K-109).

   The shell's own rules (settings drawer, extension list, single
   session scrim, startup screen) moved to Rax.Host's host.css (K-257).
   Not one colour, space or font size is INVENTED here; all are read
   from tokens.css. */

/* ------------------------------------------------------------
   DASHBOARD — container

   IT HAS ITS OWN SCROLLING and this was learned by MEASURING.

   The chain's comment (shell.css) says "rz-tabview-panels ← SCROLLS"
   but the computed value is `overflow-y: hidden`. The comment is not
   stale but incomplete: on the list screen what scrolls is the grid's
   OWN body, not the panel. Had the panel scrolled, the pager would have
   gone up together with the tab strip (K-061).

   So every tab content must set up its own scrolling. Written without
   measuring, the dashboard would CLIP its 1450px content in a 546px
   window — without even a scrollbar.
   (CLAUDE.md K-062: in a visual defect, measure first.)
   ------------------------------------------------------------ */

.erp-dashboard {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    padding: var(--sp-5);

    /* `max-width: 1400px` REMOVED — the same reason as `.rax-home` and
       `.rax-form-card`: on a 1920px screen with the menu hidden 520px
       stayed empty on the right. The dashboard's four panels are `1fr`,
       so the growing room goes to the charts. */

    /* FITS ON ONE SCREEN. Vertical flow: the header row and the four
       figures take their own height, EVERYTHING LEFT goes to the grid.
       Scrolling was not removed — it comes back when the floor below
       is reached; scrolling is the right answer rather than making the
       charts unreadable. */
    display: flex;
    flex-direction: column;
}

.erp-dashboard-error,
.erp-dashboard-empty {
    margin-block-start: var(--sp-4);
}

.erp-dashboard-empty {
    display: grid;
    place-items: center;
    min-height: 12rem;
}

/* Right-aligned header row — it replaces the title strip. It has NO
   line, padding or height of its own: drawing one more band would put
   the same thing back in place of the band that was removed. */
.erp-dashboard-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

/* Refresh button: a glyph drawn with the icon font, not a Radzen
   button — so it does not grow the row's height. */
.erp-dashboard-refresh {
    font-family: 'Material Symbols', 'Material Icons';
    font-size: calc(var(--fs-table) + 4px);
    line-height: 1;
    margin-inline-start: var(--sp-3);
    padding: var(--sp-2);
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--c-ink-3);
    cursor: pointer;
    vertical-align: middle;
}

.erp-dashboard-refresh:hover:not(:disabled) {
    background: var(--c-surface-2);
    border-color: var(--c-line);
    color: var(--c-accent);
}

.erp-dashboard-refresh:disabled { opacity: 0.4; cursor: default; }

/* ------------------------------------------------------------
   KEY FIGURES STRIP — four figures

   Not a card but a BUTTON: each figure opens a list. Its look stays
   the same as the panel (same border, same corner) — it tells that it
   is clickable on hover, instead of standing there like a permanent
   call-to-action button.
   ------------------------------------------------------------ */
.erp-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-block-start: var(--sp-4);
}

@media (max-width: 1100px) {
    .erp-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ONE COLUMN in a narrow tab. Measured: with two columns the card
   dropped to 200px and "80.613.677 ₺" overflowed, opening a horizontal
   scrollbar — a clipped figure cannot be read. */
@media (max-width: 640px) {
    .erp-kpi { grid-template-columns: minmax(0, 1fr); }
}

.erp-kpi-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);

    /* The left edge is THICK BUT VISIBLE. One round it was written
       `transparent` and the card's left border never showed — a box
       with three sides drawn and one open. The accent colour appears on
       hover; since the thickness is reserved up front it does not move. */
    border-inline-start: 2px solid var(--c-line);
    text-align: start;
    cursor: pointer;
    font: inherit;
}

.erp-kpi-card:hover {
    background: var(--c-surface-2);
    border-inline-start-color: var(--c-accent);
}

.erp-kpi-key {
    font-size: var(--fs-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}

/* The figure is the largest text on the screen — that is the
   dashboard's only job. It goes above --fs-page on purpose: on a list
   screen nothing is larger than the title, on the dashboard nothing is
   larger than the FIGURE. */
.erp-kpi-val {
    font-size: 22px;
    font-weight: var(--fw-medium);
    color: var(--c-ink);
    letter-spacing: -0.01em;

    /* `.rax-num` pulls digit alignment to the RIGHT — that rule is
       right for a grid cell, not for a card: the label starts on the
       left and if the figure runs away from it the card splits in two.
       Tabular digits stay, only the alignment is undone. */
    text-align: start;

    /* `.rax-num` also writes `white-space: nowrap` — right in a grid
       cell, undone here as a last resort: even on a card that dropped
       to one column, a figure that does not fit should wrap rather than
       be clipped. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.erp-kpi-val[data-risk='true'] { color: var(--c-neg); }

.erp-kpi-note {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

.erp-kpi-note[data-trend='up'] { color: var(--c-pos); }
.erp-kpi-note[data-trend='down'] { color: var(--c-neg); }

/* ------------------------------------------------------------
   CHART GRID

   FOUR EQUAL PANELS, two columns. Monthly revenue was full width for
   one round (a time axis wants horizontal room); since the month labels
   fit by slanting it was no longer needed, and with the four panels the
   same size the grid's rhythm is not broken.
   ------------------------------------------------------------ */
.erp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-block-start: var(--sp-4);

    /* THE GRID TAKES THE SPARE SPACE — charts are sized by the window,
       not by px. */
    flex: 1 1 auto;

    /*  THE FLOOR IS THE ROW'S JOB, NOT THE GRID'S (K-228).

        There used to be `min-height: 420px` and `grid-auto-rows: 1fr`
        here. Together they produced this: the grid stops at 420px, the
        FOUR panels share that height and each drops to 96px. Measured
        (769×630 window): panel 96, chart 35–70, SVG 10–50 pixels. The
        donut chart was squeezed to 10 pixels, the bars overflowed the
        card, the month labels piled on top of each other.

        `minmax(min-content, 1fr)` solves both cases at once:

          room available → the row grows with `1fr`, the dashboard
                           fits on one screen
          no room        → the row stops at `min-content`, the grid
                           grows and `.erp-dashboard` turns to scrolling

        So the choice between «fit» and «scroll» now looks at the
        window, not at a fixed number. The chart staying readable is
        inside `min-content`: `.erp-chart` gives the floor. */
    grid-auto-rows: minmax(min-content, 1fr);
    align-items: stretch;
}

/* The equalised height must not leave an empty band UNDER the panel:
   the panel flows vertically, the chart eats the space, the bottom
   strip sticks to the floor — so the bottom strips of two panels line up. */
.erp-dashboard-grid > .rax-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*  THE CHART FILLS THE SPACE, it does not sit at a fixed px. Radzen was
    measured to follow its container: when the box was pulled to 140px
    the SVG dropped to 140px. So the height is distributed here, not
    with numbers inside the `.razor`.

    THE CHART'S FLOOR IS HERE TOO (K-228).

    It used to say `min-height: 0` and the reason was right — if a flex
    item cannot shrink the panel overflows. But zero means "shrink as
    much as you like": when measured the SVG had dropped to 10 pixels
    and at that size no chart says anything.

    The floor is a VARIABLE, because the smallest size at which each
    chart is readable differs and the NUMBER OF CATEGORIES decides it:
    showing ten customers as horizontal bars needs three times the room
    of a three-step funnel. The panel declares the value itself
    (`--chart-min`), because it is the one that knows how many categories
    it draws.

    The unit is `rem`: if the density tier shrinks the text, the chart's
    floor may drop too — in the compact tier 11.7rem with a 13px root =
    152px, in the wide tier with 16px 187px. */
.erp-dashboard-grid > .rax-panel > .erp-chart {
    flex: 1 1 auto;
    min-height: var(--chart-min, 11.7rem);
    display: flex;
    flex-direction: column;
}

.erp-dashboard-grid > .rax-panel > .erp-chart > .rz-chart {
    flex: 1 1 auto;
    min-height: 0;
}
.erp-dashboard-grid > .rax-panel > .erp-dashboard-foot { margin-block-start: auto; }

/* Dropped to one column, equalising means nothing: nobody is side by
   side with anyone and `1fr` would inflate every panel to the tallest.

   `auto` CANNOT be smaller than `min-content` here, so the chart's floor
   is still kept; with four panels stacked the dashboard turns to
   scrolling and that is the right answer — trying to show four charts
   at once in a narrow window makes all four unreadable. */
@media (max-width: 1100px) {
    .erp-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }
}

.erp-chart {
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
}

/* Chart texts use the design's font family too. Radzen draws SVG text
   at its own scale; in the ERP it must be the same tone as the 11px
   column header. */
.erp-chart .rz-chart text {
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    fill: var(--c-ink-3);
}

/* ------------------------------------------------------------
   BOTTOM STRIP — the figure the chart does not tell

   The chart gives a ratio, this row gives the FIGURE. Both sit in the
   same panel because the boss looks at both.
   ------------------------------------------------------------ */
.erp-dashboard-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-line);
    background: var(--c-surface-2);
}

.erp-dashboard-fact {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}

.erp-dashboard-fact-key {
    font-size: var(--fs-caption);
    color: var(--c-ink-3);
}

.erp-dashboard-fact-val {
    font-size: var(--fs-table);
    color: var(--c-ink);
}

/* Chart tooltip: three lines, the label quiet, the figure readable.
   It is written inside Radzen's own box — Radzen draws the box. */
.erp-tip-key,
.erp-tip-val {
    display: block;
    line-height: var(--lh-tight);
}

.erp-tip-key {
    font-size: var(--fs-caption);
    opacity: 0.75;
}

.erp-tip-val {
    font-size: var(--fs-input);
    font-weight: var(--fw-medium);
    text-align: start;
}

.erp-dashboard-none {
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    font-size: var(--fs-body);
    color: var(--c-ink-3);
}