@import "@hm-design/ui/dashboard-status.css";

/* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
.dashboard-story {
  --dashboard-work-progress: var(--hm-dashboard-status-active);
  --dashboard-work-hold: var(--hm-dashboard-status-hold);
  --dashboard-work-issue: var(--hm-dashboard-status-issue);
  --dashboard-work-badge-background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
}

/* Existing Badge outline variant, overridden through its component mappings only within Dashboard.
   Variant C has plain table text, so use its dark selected surface to keep the white done ink legible on HM's light table. */
.dashboard-story [data-slot="badge"][data-status] {
  --hm-badge-outline-text: var(--dashboard-status-color);
  --hm-badge-outline-background: var(--dashboard-work-badge-background);
  --hm-badge-outline-border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
}

.dashboard-story [data-status="active"] { --dashboard-status-color: var(--dashboard-work-progress); }
.dashboard-story [data-status="hold"] { --dashboard-status-color: var(--dashboard-work-hold); }
.dashboard-story [data-status="done"] { --dashboard-status-color: var(--hm-dashboard-status-done); }
.dashboard-story [data-status="issue"][data-issue="true"] { --dashboard-status-color: var(--dashboard-work-issue); }

.dashboard-story [data-story-slot="work-badges"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Story-only Variant C Compact Header (ui_viz patterns-variant-c--all). Geometry follows the reference: header 48 / padding-x 20,
   title + 18 after it, status bar 40 high floating from the header top and centred at 50% + 18px, padding-x 36, gap 8, 28px controls,
   1x16 dividers, bottom radius 16 with concave wings. Colours and type are HM tokens. Content join / padding stay Dashboard Layout's. */
.dashboard-story-compact [data-slot="dashboard-layout"] {
  background: var(--hm-dashboard-compact-background);
}

.dashboard-story-compact [data-story-slot="compact-header"] {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  background: var(--hm-dashboard-compact-background);
  color: var(--hm-dashboard-nav-text);
}

.dashboard-story-compact [data-story-slot="compact-brand"] {
  display: flex;
  flex: none;
  align-items: center;
  height: 48px;
  padding-right: 18px;
}

.dashboard-story-compact [data-story-slot="compact-brand"] strong,
.dashboard-story-compact [data-story-slot="compact-context"] {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  -webkit-text-stroke: var(--hm-dashboard-nav-text-stroke-width) var(--hm-dashboard-nav-text-stroke-color);
  paint-order: stroke fill;
}

.dashboard-story-compact [data-story-slot="compact-context"] {
  font-size: 13px;
}

.dashboard-story-compact [data-story-slot="compact-status"] {
  --compact-wing: var(--hm-sem-palette-green-default);
  position: absolute;
  top: 0;
  left: calc(50% + 18px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 36px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(90deg, var(--hm-sem-palette-green-default) 20%, var(--hm-sem-palette-green-light-1) 50%, var(--hm-sem-palette-green-default) 80%);
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent));
  white-space: nowrap;
}

.dashboard-story-compact [data-story-slot="compact-status"]::before,
.dashboard-story-compact [data-story-slot="compact-status"]::after {
  content: "";
  position: absolute;
  top: 0;
  width: 36px;
  height: 30px;
  pointer-events: none;
}

.dashboard-story-compact [data-story-slot="compact-status"]::before {
  left: -35px;
  border-radius: 0 20px 0 0;
  box-shadow: 18px 0 0 var(--compact-wing);
}

.dashboard-story-compact [data-story-slot="compact-status"]::after {
  right: -35px;
  border-radius: 20px 0 0 0;
  box-shadow: -18px 0 0 var(--compact-wing);
}

.dashboard-story-compact [data-story-slot="compact-divider"] {
  flex: none;
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: color-mix(in srgb, var(--hm-dashboard-nav-text-secondary) 30%, transparent);
}

.dashboard-story-compact [data-story-slot="compact-status-group"] {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Filter states follow the reference values (black 35/55%, selected Green Dark 2 90% with a Green Light 4 ring). No HM Semantic matches
   them (state.active / accent differ), so the exact HM palette primitives are used. Selected wins over hover, as in the reference. */
.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"] {
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
  background: color-mix(in srgb, var(--hm-sem-palette-black) 35%, transparent);
  color: color-mix(in srgb, var(--hm-sem-palette-white) 95%, transparent);
}

.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:hover {
  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 40%, transparent);
  background: color-mix(in srgb, var(--hm-sem-palette-black) 55%, transparent);
  color: var(--hm-sem-palette-white);
}

.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
  background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-palette-green-light-4) 35%, transparent);
  color: var(--hm-sem-palette-white);
}

/* Count ink shares dashboardWorkStatus with the table Badge; labels retain Reference white ink. */
.dashboard-story-compact [data-story-slot="compact-status"] [data-status] strong {
  color: var(--dashboard-status-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--hm-sem-palette-black) 22%, transparent);
  paint-order: stroke fill;
}

/* Issue is separately divided and has its own Default/Hover/Selected surface in Variant C. */
.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"] {
  background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 28%, transparent);
  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 45%, transparent);
  color: var(--hm-sem-palette-white);
}
.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"]:hover {
  background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 45%, transparent);
  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
}
.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"][aria-pressed="true"] {
  background: color-mix(in srgb, var(--hm-sem-action-destructive) 25%, transparent);
  border-color: color-mix(in srgb, var(--hm-sem-action-destructive) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-action-destructive) 40%, transparent);
}

.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:focus-visible {
  outline: var(--hm-dashboard-nav-focus-outline);
}

/* Compact geometry is shared by all viewports. Dashboard's native scroll frame preserves its minimum width. */