/*
  Dashboards: the segmented control that picks one, and the frame each is drawn in. Shared by
  DashboardViewTabs, DashboardPanel and the dashboards themselves, so it cannot live inside any one
  of them.

  Everything above the content on this page is chrome, and chrome here is expensive: the live board
  is scaled to fit whatever height is left over, so a row of buttons does not push the diagram down,
  it makes the diagram smaller. Hence one bar, one row: what you are looking at on the left, what
  changes it on the right.
*/

/* ---- Segmented control ---- */

.dash-tabs {
    position: relative;
    display: inline-grid;
    /* Equal columns, so the moving pill is exactly one column wide wherever it lands. */
    grid-template-columns: repeat(var(--dash-tab-count, 4), minmax(0, 1fr));
    gap: 0;
    padding: 0.1875rem;
    background: var(--rz-base-200, #eef1f4);
    border: 1px solid var(--rz-base-300, #e1e6ea);
    border-radius: 0.625rem;
    max-width: 100%;
}

.dash-tabs__thumb {
    position: absolute;
    top: 0.1875rem;
    bottom: 0.1875rem;
    left: 0.1875rem;
    width: calc((100% - 0.375rem) / var(--dash-tab-count, 4));
    transform: translateX(calc(var(--dash-tab-active, 0) * 100%));
    background: var(--rz-base-background-color, #fff);
    border-radius: 0.45rem;
    box-shadow:
        0 1px 2px rgba(16, 32, 48, 0.08),
        0 2px 8px rgba(16, 32, 48, 0.06);
    transition: transform 0.28s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
    pointer-events: none;
}

.dash-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.375rem 0.95rem;
    background: none;
    border: 0;
    border-radius: 0.45rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--rz-text-secondary-color, #5a6872);
    cursor: pointer;
    transition: color 0.18s var(--ease-out-quart, ease);
}

.dash-tab:hover {
    color: var(--rz-text-color, #2e3a45);
}

/* The selected tab is what names the dashboard now that the panel has no title of its own, so it is
   set like a title rather than like the label on a button. */
.dash-tab.is-active {
    color: var(--rz-primary, #39b388);
    font-weight: 600;
}

/* The pill already marks the selection, so the focus ring only has to be visible, not loud. */
.dash-tab:focus-visible {
    outline: 2px solid var(--rz-primary, #39b388);
    outline-offset: -2px;
}

.dash-tab .rzi {
    font-size: 1.0625rem;
    line-height: 1;
}

/* ---- Panel ---- */

.dash-panel {
    background: var(--rz-base-background-color, #fff);
    border: 1px solid var(--rz-base-300, #e1e6ea);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 32, 48, 0.04);
}

/*
  The one bar. It holds the tab strip and the dashboard's controls side by side, which is what lets
  the page get away with a single row of chrome instead of the four it used to draw — tabs, then a
  title repeating the selected tab, then the dashboard's own figures, then its own buttons.

  Sticky, so a tab with more content than fits keeps its period picker within reach rather than
  making the reader scroll back up to change what they are looking at.
*/
.dash-panel__head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    padding: 0.625rem 0.875rem;
    background: var(--rz-base-background-color, #fff);
    border-bottom: 1px solid var(--rz-base-200, #eef1f4);
    border-radius: 0.75rem 0.75rem 0 0;
    /*
      The page's scrolling area carries padding of its own, and a sticky child pins below it — which
      leaves a band above the bar that the content scrolls through in full view, as if the panel had
      sprung a leak. This is that band, painted in the bar's own colour: the same white the page is
      already on, so it shows only when there is something behind it to hide. A shadow rather than a
      pseudo-element because it must not take part in layout — the bar is one row and stays one row.
    */
    box-shadow: 0 -1.75rem 0 0 var(--rz-base-background-color, #fff);
}

.dash-panel__heading {
    min-width: 0;
}

.dash-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rz-text-title-color, #1c2733);
}

.dash-panel__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--rz-text-secondary-color, #5a6872);
}

/* Wraps rather than squeezing what is beside it: a period picker that has lost a button is
   unusable, a tab strip on its own line is only untidy. */
.dash-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-left: auto;
}

/* Pickers side by side otherwise read as one long strip of buttons. A rule between them says where
   one control ends and the next begins, which no amount of gap does on its own. It hangs off a
   wrapper rather than the picker itself, so it never lands on top of the picker's own frame. */
.dash-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dash-panel__toolbar > * + * {
    padding-left: 0.75rem;
    border-left: 1px solid var(--rz-base-300, #e1e6ea);
}

.dash-panel__body {
    padding: 1rem;
}

/* Switching tabs replaces the whole panel, so the new dashboard arrives rather than blinking into
   place. Reduced motion is handled globally in app.css. */
.dash-panel__body > * {
    animation: fadeIn 0.25s var(--ease-out-quart, ease) forwards;
}

/* Content made of cards needs a surface to sit on, or the cards read as a second frame around the
   panel rather than as items inside it. */
.dash-panel__body--sunken {
    background: var(--rz-base-100, #f6f8f9);
}

/*
  Content that is its own canvas — the live board — reaches the panel's edges instead of sitting on
  an inset rectangle inside it. A frame drawn a few pixels inside another frame is the same line
  twice, and here it also costs two centimetres of diagram.

  The tint moves onto the body so that everything below the bar is one surface. Left on the board
  itself, the figures above it stayed white and read as a second bar under the first, which is the
  arrangement this was meant to get rid of.
*/
.dash-panel__body--flush {
    padding: 0;
    background: var(--rz-base-50, #fafafa);
    border-radius: 0 0 0.75rem 0.75rem;
}

.dash-panel__body--flush .dhv-board {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* The cards space themselves; the panel already provides the gap after the last one. */
.dash-panel__body > :last-child.looc-chart-card,
.dash-panel__body > * > :last-child.looc-chart-card {
    margin-bottom: 0;
}

/* ---- Headline figure in a panel toolbar ---- */

/* A number the dashboard is summarised by — total throughput, data integrity — set beside the
   controls rather than in the subtitle, where a figure reads as part of a sentence. */
.dash-stat {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.dash-stat__value {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--rz-text-title-color, #1c2733);
    font-variant-numeric: tabular-nums;
}

.dash-stat__unit,
.dash-stat__label {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, #5a6872);
}

/* ---- Empty state ---- */

.dash-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color, #5a6872);
}

/* Below this the bar cannot hold a tab strip and a set of controls on one line, so it stops trying
   and stacks them — still two rows, which is what the page used to spend on chrome alone. */
@media (max-width: 1279.98px) {
    .dash-tabs {
        display: grid;
        width: 100%;
    }

    .dash-panel__toolbar {
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    /* No room for four labels side by side; the icons and the pill carry the meaning. */
    .dash-tab__label {
        display: none;
    }

    .dash-panel__body {
        padding: 0.75rem;
    }

    .dash-panel__body--flush {
        padding: 0;
    }
}