/* Sales Performance Dashboard replica: layout and the few components the kit does not have. Colours come only
   from the kit tokens (web/kit/tokens.css); the artboard of 2026-10-29 is the visual reference. */

:root {
  --max: 1280px;
}

.app-loading,
.app-error {
  margin-top: var(--space-6);
  color: var(--muted);
}

.app-error {
  color: var(--danger);
}

/* ---------------------------------------------------------------- header and tabs */

.pf-brand__name {
  overflow-wrap: anywhere;
}

.m-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.m-tabs .pf-tabs {
  flex-wrap: nowrap;
  min-width: max-content;
}

/* ---------------------------------------------------------------- filter bar */

.filters {
  position: sticky;
  top: calc(var(--pf-banner-h) + env(safe-area-inset-top));
  z-index: 20;
  margin-top: var(--space-4);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Keyboard focus and anchors must not land under the sticky filter bar. The bar has no height token, so these are
   measured heights plus a little room: 90 px from 1200 px wide (wraps to 162 px below that, 234 px at 600 px),
   about 60 px collapsed under 600 px (the opened panel there is taller and is not covered). */
:root {
  --filters-h: 96px;
}

@media (max-width: 1199.98px) {
  :root {
    --filters-h: 168px;
  }
}

@media (max-width: 719.98px) {
  :root {
    --filters-h: 240px;
  }
}

@media (max-width: 599.98px) {
  :root {
    --filters-h: 68px;
  }
}

:root:has(body.pf-has-banner) {
  scroll-padding-top: calc(var(--pf-banner-h) + env(safe-area-inset-top) + var(--filters-h) + 8px);
}

.filters__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.filters__summary {
  color: var(--muted);
  font-size: 13px;
}

.filters__body {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 16px;
}

.f-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.f-field > .f-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.f-field .pf-select,
.f-field .pf-chip {
  min-height: 36px;
  font-size: 14px;
}

.f-months {
  display: flex;
  align-items: center;
  gap: 6px;
}

.f-spacer {
  flex: 1;
}

.f-note {
  max-width: 34ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* checkbox menus for Region and Category */
.menu {
  position: relative;
}

.menu > summary {
  display: inline-flex;
  align-items: center;
  min-width: 11rem;
  cursor: pointer;
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu > summary::after {
  content: "▾";
  margin-left: auto;
  padding-left: var(--space-2);
  color: var(--muted);
}

.menu__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.menu__list label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-2);
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.menu__list label:hover {
  background: var(--surface-2);
}

.menu__list input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* the chip of the active cross-filter or drill */
.xchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px 0 12px;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
}

.xchip--idle {
  padding-right: 12px;
  border-color: var(--border);
  color: var(--muted);
}

.xchip b {
  color: var(--accent);
  font-weight: 600;
}

.xchip__clear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------------------------- tiles, cards, charts */

.kpis {
  --min: 190px;
  margin-top: var(--space-4);
}

.kpis--4 {
  --min: 220px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.layout--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.layout .pf-card,
.wide.pf-card {
  padding: 18px 20px;
}

.wide {
  margin-top: var(--space-4);
}

.ct {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: var(--space-2);
}

.ct h2 {
  font-size: 16px;
  letter-spacing: 0;
}

.ct .sub {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.chart {
  width: 100%;
  height: 230px;
}

.chart--tall {
  height: 492px;
}

.chart--pareto {
  height: 250px;
}

.chart--mid {
  height: 300px;
}

.hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 12px;
}

.legend i {
  display: inline-block;
  width: 18px;
  height: 0;
  margin-right: 6px;
  border-top: 2px solid var(--accent);
  vertical-align: middle;
}

.legend i.py {
  border-top-style: dashed;
  border-color: var(--muted);
}

.legend i.bar {
  height: 10px;
  border: 0;
  background: var(--chart-1);
}

.legend i.pybar {
  height: 10px;
  border: 0;
  background: var(--muted);
}

.legend i.l2 {
  border-color: var(--chart-2);
}

.legend i.ok {
  height: 10px;
  border: 0;
  background: var(--ok);
}

.legend i.warn {
  height: 10px;
  border: 0;
  background: var(--warn);
}

/* segmented control (Analyse by) */
.segctl {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.segctl button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.segctl button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border);
}

/* breadcrumb of the category drill */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--muted);
  font-size: 13px;
}

.crumbs button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.crumbs .cur {
  color: var(--text);
  font-weight: 600;
}

.drill-pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 13px;
}

.drill-pick .pf-select {
  min-height: 36px;
}

/* ---------------------------------------------------------------- tables */

.table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.table-tools .pf-input {
  flex: 1 1 16rem;
  min-height: 40px;
}

.dbar {
  position: relative;
  display: block;
  min-width: 120px;
}

.dbar i {
  position: absolute;
  inset: 2px auto 2px 0;
  z-index: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 35%, var(--surface));
}

.dbar span {
  position: relative;
  z-index: 1;
  padding-left: 6px;
}

.pclass {
  font-family: var(--font-mono);
  font-weight: 700;
}

.sku {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: inherit;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 0.2em;
  cursor: help;
}

.att td.v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.att th {
  text-align: center;
}

.att th:first-child,
.att td:first-child {
  font-weight: 600;
  text-align: left;
}

.att-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.att-scale i {
  display: inline-block;
  width: 48px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.att-scale__low {
  background: color-mix(in srgb, var(--warn) 35%, var(--surface));
}

.att-scale__mid {
  background: var(--surface);
}

.att-scale__high {
  background: color-mix(in srgb, var(--ok) 35%, var(--surface));
}

/* product tooltip (hover or focus on a table row) */
.tip {
  position: fixed;
  z-index: 40;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.tip h3 {
  margin-bottom: var(--space-2);
  font-size: 14px;
}

.tip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 13px;
}

.tip__grid b {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
}

.tip__grid span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tip svg {
  width: 100%;
  height: 46px;
  margin-top: 10px;
}

/* ---------------------------------------------------------------- About dialog and footer */

.about {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.about::backdrop {
  background: rgb(0 0 0 / 55%);
}

.about__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.about__body h2 {
  font-size: var(--fs-lg);
}

.about__body h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-md);
}

.about__body p,
.about__body li {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.about__body ul {
  display: grid;
  gap: 4px;
  padding-left: 18px;
}

.about__close {
  justify-self: end;
}

.store-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: 13px;
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 719.98px) {
  .layout,
  .layout--even {
    grid-template-columns: 1fr;
  }

  .chart--tall {
    height: 320px;
  }
}

@media (max-width: 599.98px) {
  .kpis,
  .kpis--4 {
    --min: 150px;
  }

  .pf-kpi {
    padding: 12px 14px;
  }

  .pf-kpi__value {
    font-size: 22px;
  }

  .filters {
    padding: 10px 14px;
  }

  .filters__head {
    display: flex;
  }

  .filters__body {
    margin-top: var(--space-3);
  }

  .filters:not(.is-open) .filters__body {
    display: none;
  }

  .menu > summary {
    min-width: 9rem;
  }
}