/* /Pages/Management/Companies/Forms/CompanyShipmentMethodsForm.razor.rz.scp.css */
.shipment-rule-card[b-vuba00cfz7] {
    border-left: 3px solid #0d6efd;
    transition: box-shadow 0.15s ease-in-out;
}

.shipment-rule-card:hover[b-vuba00cfz7] {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.075);
}

.shipment-rule-card.shipment-rule-card--invalid[b-vuba00cfz7] {
    border-left-color: #dc3545;
    background-color: #fdf2f2;
}

.shipment-rule-label[b-vuba00cfz7] {
    display: inline-block;
    min-width: 48px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
}

.shipment-rule-section[b-vuba00cfz7] {
    line-height: 1.9;
}

.shipment-rule-actions[b-vuba00cfz7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.min-width-0[b-vuba00cfz7] {
    min-width: 0;
}
/* /Pages/Sales/Funnel.razor.rz.scp.css */
/* Page-specific leftovers. Everything reusable now lives in the global component
   stylesheets: kpi-cards.css for the figure tiles, column-chart.css for the timeline
   card, donut-chart.css for the phase donut and its legend table,
   segmented-control.css for the period switch, filter-select.css for the year chip
   and the row they share. */

/* Data-freshness line -----------------------------------------------------
   Sits under the page title as running text, deliberately not in a card: it is a
   footnote about the data, not a control panel. The negative top margin pulls it
   up against the title, which BaseBMEPage leaves 1.53rem of space below. */

.sales-meta[b-tokjnvv0b1] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.sales-meta-sep[b-tokjnvv0b1] {
  color: #c9c7d4;
}

/* The refresh sits inline in that sentence, so it carries the line's own size and
   colour rather than a button's padding and chrome.

   Driven through DevExpress's own --dxbl-btn-* variables rather than by setting
   padding/color directly: that is how the theme itself styles the control, so
   there is no specificity fight to lose. ::deep is needed because the variables
   have to land on .dxbl-btn, which lives inside DxButton's own markup and is
   therefore out of this component's isolation scope. */
.sales-meta[b-tokjnvv0b1]  .dxbl-btn {
  --dxbl-btn-padding-x: 0;
  --dxbl-btn-padding-y: 0;
  --dxbl-btn-hover-padding-x: 0;
  --dxbl-btn-hover-padding-y: 0;
  --dxbl-btn-focus-padding-x: 0;
  --dxbl-btn-focus-padding-y: 0;
  --dxbl-btn-active-padding-x: 0;
  --dxbl-btn-active-padding-y: 0;
  --dxbl-btn-disabled-padding-x: 0;
  --dxbl-btn-disabled-padding-y: 0;
  --dxbl-btn-font-size: 0.8125rem;
  --dxbl-btn-color: #6b7280;
  --dxbl-btn-hover-color: #2563eb;
  --dxbl-btn-hover-bg: transparent;
  --dxbl-btn-image-spacing: 0.3rem;
  --dxbl-btn-link-text-decoration: none;
  --dxbl-btn-link-hover-color: #2563eb;
}
/* /Pages/Sales/Prospects.razor.rz.scp.css */
/* Page-specific leftovers. Everything reusable now lives in the global component
   stylesheets: kpi-cards.css for the figure tiles, column-chart.css for the timeline
   card, donut-chart.css for the phase donut and its legend table,
   segmented-control.css for the period switch, filter-select.css for the year chip
   and the row they share. */

/* Data-freshness line -----------------------------------------------------
   Sits under the page title as running text, deliberately not in a card: it is a
   footnote about the data, not a control panel. The negative top margin pulls it
   up against the title, which BaseBMEPage leaves 1.53rem of space below. */

.prospects-meta[b-kdo78o4qd8] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.prospects-meta-sep[b-kdo78o4qd8] {
  color: #c9c7d4;
}

/* The refresh sits inline in that sentence, so it carries the line's own size and
   colour rather than a button's padding and chrome.

   Driven through DevExpress's own --dxbl-btn-* variables rather than by setting
   padding/color directly: that is how the theme itself styles the control, so
   there is no specificity fight to lose. ::deep is needed because the variables
   have to land on .dxbl-btn, which lives inside DxButton's own markup and is
   therefore out of this component's isolation scope. */
.prospects-meta[b-kdo78o4qd8]  .dxbl-btn {
  --dxbl-btn-padding-x: 0;
  --dxbl-btn-padding-y: 0;
  --dxbl-btn-hover-padding-x: 0;
  --dxbl-btn-hover-padding-y: 0;
  --dxbl-btn-focus-padding-x: 0;
  --dxbl-btn-focus-padding-y: 0;
  --dxbl-btn-active-padding-x: 0;
  --dxbl-btn-active-padding-y: 0;
  --dxbl-btn-disabled-padding-x: 0;
  --dxbl-btn-disabled-padding-y: 0;
  --dxbl-btn-font-size: 0.8125rem;
  --dxbl-btn-color: #6b7280;
  --dxbl-btn-hover-color: #2563eb;
  --dxbl-btn-hover-bg: transparent;
  --dxbl-btn-image-spacing: 0.3rem;
  --dxbl-btn-link-text-decoration: none;
  --dxbl-btn-link-hover-color: #2563eb;
}
/* /Pages/Sales/Targets.razor.rz.scp.css */
/* Page-specific leftovers. Everything reusable now lives in the global component
   stylesheets: kpi-cards.css for the figure tiles, column-chart.css for the timeline
   card, donut-chart.css for the phase donut and its legend table,
   segmented-control.css for the period switch, filter-select.css for the year chip
   and the row they share. */

/* Data-freshness line -----------------------------------------------------
   Sits under the page title as running text, deliberately not in a card: it is a
   footnote about the data, not a control panel. The negative top margin pulls it
   up against the title, which BaseBMEPage leaves 1.53rem of space below. */

.targets-meta[b-ydly14ddgc] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.targets-meta-sep[b-ydly14ddgc] {
  color: #c9c7d4;
}

/* The refresh sits inline in that sentence, so it carries the line's own size and
   colour rather than a button's padding and chrome.

   Driven through DevExpress's own --dxbl-btn-* variables rather than by setting
   padding/color directly: that is how the theme itself styles the control, so
   there is no specificity fight to lose. ::deep is needed because the variables
   have to land on .dxbl-btn, which lives inside DxButton's own markup and is
   therefore out of this component's isolation scope. */
.targets-meta[b-ydly14ddgc]  .dxbl-btn {
  --dxbl-btn-padding-x: 0;
  --dxbl-btn-padding-y: 0;
  --dxbl-btn-hover-padding-x: 0;
  --dxbl-btn-hover-padding-y: 0;
  --dxbl-btn-focus-padding-x: 0;
  --dxbl-btn-focus-padding-y: 0;
  --dxbl-btn-active-padding-x: 0;
  --dxbl-btn-active-padding-y: 0;
  --dxbl-btn-disabled-padding-x: 0;
  --dxbl-btn-disabled-padding-y: 0;
  --dxbl-btn-font-size: 0.8125rem;
  --dxbl-btn-color: #6b7280;
  --dxbl-btn-hover-color: #2563eb;
  --dxbl-btn-hover-bg: transparent;
  --dxbl-btn-image-spacing: 0.3rem;
  --dxbl-btn-link-text-decoration: none;
  --dxbl-btn-link-hover-color: #2563eb;
}

/* Omzet Countdown ---------------------------------------------------------
   The page's headline figure, on the kpi-card shell from kpi-cards.css. Only the
   parts that shell does not already have live here: a row of three figures where
   one is the hero, and a meter carrying a marker for how far the year itself has
   got.

   WHY THE MARKER EXISTS
   ---------------------
   A bar against an annual target with no sense of elapsed time is unreadable —
   15% in February and 15% in November are the same bar and opposite readings. The
   marker is the reference the fill is judged against; without it the card invites
   the reader to feel fine about being a long way behind. It is decorative, and
   the footer states the same thing in words: that sentence, not the tick, is what
   a screen reader gets. */

.countdown-figures[b-ydly14ddgc] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 0;
  margin-top: 1.125rem;
}

/* A rule between the figures rather than a gap alone: they are three separate
   readings, not one sentence, and at these sizes space alone does not say so. */
.countdown-figure[b-ydly14ddgc] {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 1.5rem;
  border-left: 1px solid #eaecf1;
}

.countdown-figure:first-child[b-ydly14ddgc] {
  padding-left: 0;
  border-left: 0;
}

/* The card heading. kpi-cards.css keeps its title light and grey on purpose --
   on a tile in a row of tiles the eye should land on the number, not the label.
   This card is not in a row: it is the page's first heading, sitting above four
   cards that all use .column-chart-title. At weight 400 in grey it read as the
   weakest heading on a page where it is the most important one, so it takes the
   same treatment they do -- same size, same weight, same ink. */
.countdown-title[b-ydly14ddgc] {
  font-weight: 600;
  color: #111827;
}

.dark-layout .countdown-title[b-ydly14ddgc] {
  color: #fff;
}

/* The scope line. Not a subtitle in the ordinary sense -- it is the definition of
   every figure below it, and without it "gerealiseerd" reads as turnover when it
   means new business. Sits directly under the title, above the figures, because a
   caveat that arrives after the number has already been read is not a caveat. */
.countdown-scope[b-ydly14ddgc] {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.dark-layout .countdown-scope[b-ydly14ddgc] {
  color: #b4b7bd;
}

/* AMOUNT VERSUS DESCRIPTION
   -------------------------
   One rule carries the whole distinction, so nothing has to be judged by eye:
   an amount is near-black, a description is grey small-caps. Three carriers move
   at once between them -- size, weight and case -- because a single carrier is
   what makes a figure and its caption blur together at a glance.

   The euro sign is stepped back inside the amount: it is a unit, not part of the
   number, and at 36px it competes with the digits for the same attention. Size
   and weight only, never colour -- it is meaningful text and has to keep its
   contrast.

   Proportional figures, matching .kpi-card-value: tabular gives every digit a
   zero's width, which reads loose at display size. Tabular belongs in a column. */
.countdown-figure-value[b-ydly14ddgc] {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #111827;
  font-variant-numeric: proportional-nums;
}

/* The hero takes the tile value scale from kpi-cards.css, so the headline figure
   on this page is the same size as the headline figure on any other. */
.countdown-figure-hero .countdown-figure-value[b-ydly14ddgc] {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 0.6em keeps the sign clearly subordinate at both figure sizes; the negative
   letter-spacing above would otherwise pull the digits into it. */
.countdown-figure-currency[b-ydly14ddgc] {
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0.2em;
  vertical-align: baseline;
}

/* Grey small-caps, the same treatment the tables on this page give a column
   heading — a caption should read as a caption wherever it appears. 4.52:1 on
   the frame, which is the floor for text this size, so the grey cannot go
   paler than this. */
.countdown-figure-label[b-ydly14ddgc] {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #6b7280;
}

/* An amount inside a sentence, where it would otherwise be indistinguishable
   from the words around it. Weight and ink, not size: the line has to stay one
   line of prose. */
.countdown-amount[b-ydly14ddgc] {
  font-weight: 600;
  color: #374151;
  font-variant-numeric: tabular-nums;
}

/* Meter ------------------------------------------------------------------- */

.countdown-meter[b-ydly14ddgc] {
  position: relative;
  margin-top: 1.25rem;
}

/* Taller than the 8px on a tile meter: this is the one bar on the page that has
   a marker crossing it, and it needs the body to carry one. The navy is the same
   fill the bars in the tables and the lead cards use — the severity variants in
   kpi-cards.css override it when the state calls for it. */
.countdown-meter-track[b-ydly14ddgc] {
  --kpi-accent-rgb: 18, 58, 114;
  height: 12px;
  border-radius: 6px;
  margin-top: 0;
}

.countdown-meter-track .kpi-card-meter-fill[b-ydly14ddgc] {
  border-radius: 6px;
}

/* Crosses the whole bar and overhangs it, so it reads as a threshold rather than
   as another value sitting on it. Pulled back half its own width: the inline left
   is the position, and without this the line would sit beside it instead of on it.

   Dark core, white ring. Measured, because the obvious version does not work: a
   near-black tick on the navy fill is 1.58:1 -- the marker vanishes exactly where
   the fill has reached it, which is the one place it has to be visible. The ring
   is 11.2:1 on the navy and the core is 17.7:1 on the ring, so the mark holds over
   the fill, over the empty track and over the card behind its overhang. */
.countdown-pace-marker[b-ydly14ddgc] {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: #111827;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.92);
}

/* Endpoints only. The marker's own value is in the footer sentence — a third
   copy floating over the middle of the bar would read as a label for the
   midpoint, which is not where it is. */
.countdown-scale[b-ydly14ddgc] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}

/* Footer ------------------------------------------------------------------ */

.countdown-footer[b-ydly14ddgc] {
  gap: 0.35rem 0.75rem;
}

/* On its own line: a footnote about where the data comes from, not another item
   in the state sentence above it. */
.countdown-footnote[b-ydly14ddgc] {
  flex: 0 0 100%;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  /* 6.82:1 on the frame. The lighter #d1720c this page used before measured 3.20
     against it -- fine for a 24px figure, short for a footnote at 0.875rem. */
  color: #9a3412;
}

/* Narrow viewports -------------------------------------------------------- */

/* Three figures do not fit across a phone. Stacked, the vertical rule becomes a
   horizontal one — same job, and it keeps the readings separate. */
@media (max-width: 575.98px) {
  .countdown-figure[b-ydly14ddgc] {
    flex: 0 0 100%;
    padding: 0;
    border-left: 0;
  }

  .countdown-figure + .countdown-figure[b-ydly14ddgc] {
    padding-top: 0.75rem;
    border-top: 1px solid #eaecf1;
  }

  .countdown-figure-hero .countdown-figure-value[b-ydly14ddgc] {
    font-size: 1.875rem;
  }
}

/* Lead target cards ------------------------------------------------------- */

/* Still used by the lead cards below, which report a share under their bar. */
.countdown-caption[b-ydly14ddgc] {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: #6b7280;
}

/* The tile value class carries a top margin meant for a card with a header row
   above it; here the title is the card title, so it is pulled back. */
.targets-value[b-ydly14ddgc] {
  margin-top: 0.25rem;
}

.targets-fill-reached[b-ydly14ddgc] {
  background: #047857;
}

/* Dark layout -------------------------------------------------------------- */

/* Same rule as in light: every amount takes the one ink, the descriptions are the
   only grey. The old split between the hero and the other two is gone with it. */
.dark-layout .countdown-figure-value[b-ydly14ddgc],
.dark-layout .countdown-figure-hero .countdown-figure-value[b-ydly14ddgc] {
  color: #fff;
}

.dark-layout .countdown-amount[b-ydly14ddgc] {
  color: #d0d2d6;
}

.dark-layout .countdown-figure-label[b-ydly14ddgc],
.dark-layout .countdown-caption[b-ydly14ddgc] {
  color: #b4b7bd;
}

.dark-layout .countdown-figure[b-ydly14ddgc],
.dark-layout .countdown-figure + .countdown-figure[b-ydly14ddgc] {
  border-color: #3b4253;
}

.dark-layout .countdown-scale[b-ydly14ddgc] {
  color: #7983a0;
}

/* Inverted on the dark card: white core, dark ring, same measured job. */
.dark-layout .countdown-pace-marker[b-ydly14ddgc] {
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(33, 42, 61, 0.92);
}

.dark-layout .countdown-footnote[b-ydly14ddgc] {
  color: #ff9f43;
}