/* Ported production chart styles (MakerSightsClient origin/main c728bf9c88).
   Every value comes from the production component's .styles.ts / .constants.ts
   or its Mantine/visx default; tokens are in colors_and_type.css. */

/* ---------- Text scale (common/components/Text) ---------- */
.ms-fc, .ms-qcard, .ms-heat, .ms-pgrid, .ms-legend, .ms-shbc, .ms-texts, .ms-pie, .ms-score { font-family: "PP Telegraf", "PPTelegraf", sans-serif; color: var(--text-general, #050301); }

/* ---------- Badge (common/components/Badge) ---------- */
.ms-badge { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 8px; border-radius: 900px;
  border: 1px solid transparent; font-size: 14px; font-weight: 400; letter-spacing: .25px; line-height: 18px; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; max-width: 100%; }
.ms-badge__ic { font-size: 16px; margin-right: 8px; flex-shrink: 0; display: flex; align-items: center; }
.ms-badge__inner { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.ms-badge--gray { background: var(--bg-gray-bg, #eef2f6); color: var(--text-general, #050301); border-color: var(--bg-gray-bg, #eef2f6); }
.ms-badge--primary { background: var(--bg-green-bg, #3a8518); color: #ffffff; border-color: var(--bg-green-bg, #3a8518); }
.ms-badge--yellow { background: var(--bg-yellow-bg, #d69d2b); color: var(--text-general, #050301); border-color: var(--bg-yellow-bg, #d69d2b); }
.ms-badge--outlined { border-color: var(--border-black-border, #050301); }
.ms-badge--call .ms-badge__ic { margin-right: 4px; }

/* ---------- ChartLegend (Group gap 16; item gap 8; Text md) ---------- */
.ms-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ms-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.ms-legend__label { font-size: 14px; line-height: 24px; letter-spacing: .042px; white-space: nowrap; }

/* ---------- FindingChartFrame ---------- */
.ms-fc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ms-fc__head { display: flex; flex-direction: column; gap: 4px; }
.ms-fc__title { font-size: 14px; font-weight: 600; line-height: 24px; color: var(--text-general, #050301); word-break: break-word; }
.ms-fc__seg { align-self: flex-start; cursor: default; }
.ms-fc__segdim { font-size: 12px; font-weight: 600; line-height: 1; flex-shrink: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fc__segsep { font-size: 14px; color: var(--icon-secondary, #636c79); flex-shrink: 0; }
.ms-fc__segval { font-size: 14px; line-height: 1; letter-spacing: .042px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-fc__foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Link subtle gray (Mantine Button variant="subtle") */
.ms-link-subtle, .ms-btn-subtle { display: inline-flex; align-items: center; height: 32px; padding: 0 12px 0 8px; border: 1px solid transparent;
  border-radius: 900px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-general, #050301); cursor: pointer; white-space: nowrap; }
.ms-btn-subtle { font-weight: 400; }
.ms-link-subtle i, .ms-btn-subtle i { font-size: 20px; margin-right: 8px; }
.ms-link-subtle:hover, .ms-btn-subtle:hover { background: var(--bg-gray-bg, #eef2f6); border-color: var(--bg-gray-bg, #eef2f6); }
.ms-link-subtle:active, .ms-btn-subtle:active { background: var(--divider, #e5ebf1); }
/* IconButton outlined gray (Mantine ActionIcon variant="outline") */
.ms-iconbtn-outlined, .ms-iconbtn-subtle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--button-outlined-border-secondary, #e5ebf1); background: transparent; color: var(--button-outlined-text, #050301); cursor: pointer; padding: 0; }
.ms-iconbtn-subtle { border-color: transparent; }
.ms-iconbtn-outlined i, .ms-iconbtn-subtle i { font-size: 20px; }
.ms-iconbtn-outlined:hover, .ms-iconbtn-subtle:hover { background: var(--bg-gray-bg, #eef2f6); }
.ms-iconbtn-outlined:active, .ms-iconbtn-subtle:active { background: var(--divider, #e5ebf1); }
@media (max-width: 575px) { .ms-iconbtn-outlined, .ms-iconbtn-subtle { width: 40px; height: 40px; } .ms-link-subtle, .ms-btn-subtle { height: 40px; } }

/* ---------- FindingChartFullScreen (Modal fullScreen) ---------- */
.ms-fs { position: fixed; inset: 0; z-index: 400; background: #ffffff; display: flex; flex-direction: column; }
.ms-fs__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--divider, #e5ebf1); }
.ms-fs__title { font-size: 20px; font-weight: 700; line-height: 24px; }
.ms-fs__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 24px 16px; }

/* ---------- ChartTooltip light ---------- */
.ms-tip { position: absolute; pointer-events: none; z-index: 100; max-width: 526px; border-radius: 8px; padding: 8px 12px;
  box-shadow: 0 4px 24px 0 rgba(4, 12, 21, .08); font-size: 14px; line-height: 24px; display: flex; flex-direction: column; gap: 4px; }
.ms-tip--light { background: #ffffff; color: var(--text-general, #050301); }
.ms-tip__t { font-weight: 600; }
.ms-tip__s { color: var(--text-secondary, #636c79); }

/* ---------- Shared SVG text ---------- */
.ms-axis-label { font-size: 12px; font-family: inherit; fill: var(--visx-tick-fill, #222222); }
.ms-axis-label--x { fill: var(--text-secondary, #636c79); }
.ms-bar-val { font-size: 12px; font-weight: 600; font-family: inherit; }

/* ---------- VerticalBarChart (FindingBucketChart host) ---------- */
.ms-vbc { position: relative; width: 100%; }
.ms-vbc__scroll { position: relative; width: 100%; overflow-x: auto; overflow-y: visible; }
.ms-vbc__svg { position: absolute; overflow: visible; margin-left: 8px; }
.ms-vbc__tick { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; height: 100%; padding: 0 4px; box-sizing: border-box; }
.ms-vbc__ticklab { font-size: 12px; line-height: 14px; text-align: center; overflow-wrap: break-word; color: var(--text-general, #050301);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

/* ---------- HorizontalBarChart ---------- */
.ms-hbc { position: relative; width: 100%; }
.ms-hbc__svg { position: absolute; left: 0; top: 0; }
.ms-hbc__lab { display: flex; align-items: center; gap: 4px; height: 100%; }
.ms-hbc__labtxt { font-size: 14px; line-height: 18px; text-align: left; color: var(--text-general, #050301);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* ---------- SimpleHorizontalBarChart ---------- */
.ms-shbc { display: flex; flex-direction: column; }
.ms-shbc__row { display: flex; flex-direction: column; gap: 8px; padding: 8px 24px; position: relative; }
.ms-shbc__row.is-click { cursor: pointer; }
.ms-shbc__row.is-hl { background: rgba(229, 232, 236, .5); border-radius: 8px; }
.ms-shbc__row.is-hl::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--base-charts-gray-main, #697687); border-radius: 8px; pointer-events: none; }
.ms-shbc__line { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 16px; }
.ms-shbc__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ms-shbc__label { font-size: 14px; line-height: 24px; letter-spacing: .042px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: break-word; }
.ms-shbc__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; font-size: 14px; }
/* Mantine Progress: 16px, radius 2, track gray[2] */
.ms-progress { position: relative; width: 100%; border-radius: 2px; background: var(--mantine-progress-track, #e9ecef); overflow: visible; }
.ms-progress__bar { position: relative; height: 100%; border-radius: 2px; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 4px; box-sizing: border-box; transition: width 400ms ease-out; min-width: 0; }
.ms-progress__lab { font-size: 12px; font-weight: 600; color: #ffffff; white-space: nowrap; line-height: 1; }
.ms-progress__lab--out { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; color: var(--base-brand-green-main, #3a8518); }

/* ---------- Heatmap ---------- */
.ms-heat__scroll { width: 100%; overflow-x: auto; }
.ms-heat { display: grid; grid-auto-rows: auto; padding: 8px; width: max-content; min-width: 100%; box-sizing: border-box; }
/* Composed text columns (no production equivalent) wrap inside the card
   rather than widening the grid to one line of prose. */
.ms-heat.has-text { width: 100%; }
.ms-heat__corner { position: sticky; left: 0; z-index: 2; background: #ffffff; display: flex; align-items: flex-end; padding: 0 16px 0 0; }
.ms-heat__cornerlab { font-size: 12px; font-weight: 600; line-height: 18px; color: var(--text-secondary, #636c79); }
.ms-heat__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 8px 8px 0; }
.ms-heat__col.is-text { align-items: flex-start; }
.ms-heat__collab { margin-top: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; word-break: break-word; }
.ms-heat__col.is-text .ms-heat__collab { text-align: left; }
.ms-heat__rowlab { display: flex; align-items: center; justify-content: flex-start; padding-right: 16px; font-size: 14px;
  position: sticky; left: 0; z-index: 1; background: #ffffff; }
.ms-heat__rowlabtxt { max-width: 200px; overflow-wrap: break-word; }
.ms-heat__cell { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ms-heat__cell--plain { color: var(--text-general, #050301); }
.ms-heat__cell--text { justify-content: flex-start; font-size: 14px; line-height: 18px; padding: 6px 8px; color: var(--text-secondary, #636c79); }
.ms-heat__cell--call { justify-content: flex-start; padding: 0 8px; }

/* ---------- ProductGrid (imageSize 90) ---------- */
.ms-pgrid { display: grid; grid-template-columns: repeat(auto-fit, 130px); }
.ms-pgrid.is-fill { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ms-pgrid__cell { position: relative; display: flex; flex-direction: column; gap: 4px; width: 130px; padding: 6px 16px; box-sizing: border-box; text-align: left; font-size: 12px; }
.ms-pgrid.is-fill .ms-pgrid__cell { width: 100%; }
.ms-pgrid__rank { font-size: 14px; line-height: 24px; color: var(--text-secondary, #636c79); }
.ms-pgrid__imgwrap { position: relative; width: max-content; display: flex; justify-content: center; }
.ms-pgrid.is-fill .ms-pgrid__imgwrap { width: 100%; }
.ms-pgrid__img { overflow: hidden; border-radius: 4px; border: 1px solid var(--divider, #e5ebf1); width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; background: #ffffff; box-sizing: border-box; }
.ms-pgrid.is-fill .ms-pgrid__img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.ms-pgrid__img img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.ms-pgrid__img .ti { font-size: 58px; color: var(--text-secondary, #636c79); }
.ms-pgrid__badge { position: absolute; top: -4px; right: -16px; }
.ms-pgrid.is-fill .ms-pgrid__badge { top: 4px; right: 4px; }
.ms-pgrid__name { font-size: 12px; font-weight: 600; line-height: 18px; word-break: break-word; }

/* ---------- ScoreBoard ---------- */
.ms-score { display: flex; flex-direction: column; gap: 8px; background: var(--base-system-bg, #f6fafd); border-radius: 8px; padding: 16px 32px 16px 24px; }
.ms-score__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ms-score__l { display: flex; align-items: center; gap: 8px; }
.ms-score__l i { font-size: 20px; color: var(--base-brand-green-main, #3a8518); }
.ms-score__t, .ms-score__v { font-size: 16px; font-weight: 600; line-height: 24px; }
.ms-score__v { color: var(--text-secondary, #636c79); flex-shrink: 0; }
.ms-score__cap { display: flex; justify-content: space-between; font-size: 12px; line-height: 18px; color: var(--text-secondary, #636c79); }
.ms-score__cap span:first-child { margin-left: 24px; }

/* ---------- LineEfficiencyChart ---------- */
.ms-le__legend { padding: 12px 0 8px; }
.ms-le__img { width: 40px; height: 40px; border-radius: 4px; overflow: hidden; display: flex; flex-shrink: 0; }
.ms-le__img img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- PieChart (Group gap 24; legend Stack gap 12) ---------- */
.ms-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.ms-pie__svg { flex-shrink: 0; align-self: flex-start; }
.ms-pie__legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 12px; }
.ms-pie__item { display: flex; align-items: center; gap: 16px; }
.ms-pie__vals { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.ms-pie__val { font-size: 14px; font-weight: 600; line-height: 24px; width: 40px; flex-shrink: 0; }
.ms-pie__lab { font-size: 14px; line-height: 24px; flex-grow: 1; }

/* ---------- Text responses ---------- */
.ms-texts { display: flex; flex-direction: column; }
.ms-texts__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--divider, #e5ebf1); }
.ms-texts__l { display: flex; align-items: center; gap: 8px; max-width: 85%; min-width: 0; }
.ms-texts__n { font-size: 14px; min-width: 32px; color: var(--text-secondary, #636c79); flex-shrink: 0; }
.ms-texts__img { width: 32px; height: 32px; border-radius: 4px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--divider, #e5ebf1); }
.ms-texts__img img { width: 100%; height: 100%; object-fit: contain; }
.ms-texts__t { font-size: 14px; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ms-texts__r { font-size: 14px; font-weight: 600; color: var(--base-brand-green-main, #3a8518); white-space: nowrap; }
.ms-texts__r.is-muted { font-weight: 400; color: var(--text-secondary, #636c79); }

/* ---------- QuestionCard (SurveyReport QuestionReport) ---------- */
.ms-qcard { display: flex; flex-direction: column; align-items: flex-start; border-radius: 12px; border: 1px solid var(--card-border, #e5ebf1);
  background: var(--card-bg, #ffffff); margin-bottom: 32px; overflow: visible; }
.ms-qcard__head { width: 100%; box-sizing: border-box; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 24px; min-height: 64px; }
.ms-qcard__title { display: flex; flex-direction: column; min-width: 0; }
.ms-qcard__h { margin: 0; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--text-general, #050301); }
.ms-qcard__title:has(.ms-qcard__sub) .ms-qcard__h { margin-bottom: 8px; }
.ms-qcard__sub { font-size: 14px; line-height: 24px; color: var(--text-secondary, #636c79); }
.ms-qcard__meta { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; flex-shrink: 0; }
.ms-qcard__type { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 900px; background: var(--bg-gray-bg, #eef2f6);
  font-size: 14px; line-height: 24px; font-weight: 400; color: var(--text-general, #050301); white-space: nowrap; }
.ms-qcard__type i { font-size: 20px; margin-right: 7px; }
.ms-qcard__sortwrap { position: relative; display: inline-flex; }
.ms-qcard__content { width: 100%; box-sizing: border-box; border-top: 1px solid var(--divider, #e5ebf1); padding: 8px 0 16px; }
.ms-qcard__foot { width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; padding: 12px 24px;
  border-top: 1px solid var(--divider, #e5ebf1); }
.ms-qcard__toggles { display: flex; align-items: center; }
.ms-qcard__tog { width: 32px; height: 32px; margin-right: 8px; border-radius: 8px; border: 0; background: transparent; color: var(--tab-default-text, #636c79);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ms-qcard__tog i { font-size: 20px; }
.ms-qcard__tog:hover { background: var(--bg-gray-bg, #eef2f6); }
.ms-qcard__tog.is-on { background: var(--tab-pills-selected-bg, #e5ebf1); color: var(--text-general, #050301); }
.ms-qcard__acts { display: flex; align-items: center; gap: 12px; }
@media (max-width: 767px) { .ms-qcard__tog { width: 40px; height: 40px; } }

/* View as table: the demo's own addition, drawn as a production subtle link. */
.ms-viewtbl i { font-size: 20px; }

/* Inside a Report slide thumbnail the chart has to shrink into the slot. */
.rp-viz .ms-fc__foot, .rp-viz .ms-fc__head { display: none; }
.rp-viz .ms-heat__scroll, .rp-viz .ms-vbc__scroll { overflow: visible; }

/* The finding's own sub-line and note, kept from the demo's findings as
   Text sm secondary (production's frame carries neither). */
.ms-fc__sub { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary, #636c79); }
.ms-fc__note { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary, #636c79); }
.ms-fc__stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-fc__stats .ms-score { flex: 1 1 240px; }
.ms-vbc__tickimg { display: flex; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.ms-vbc__tickimg img { width: 100%; height: 100%; object-fit: contain; }
/* QuestionReportVerticalSentimentChart root padding 8px 24px; legend row under it. */
.ms-qcard__pad { padding: 8px 24px; }
.ms-qcard__legend { padding-top: 8px; }
/* Menu (Mantine Menu as the sort IconButton opens it) */
.ms-menu { position: absolute; right: 0; top: 36px; z-index: 30; min-width: 200px; background: #ffffff; border: 1px solid var(--divider, #e5ebf1);
  border-radius: 8px; box-shadow: 0 4px 24px 0 rgba(4, 12, 21, .08); padding: 4px; }
.ms-menu__label { font-size: 12px; line-height: 18px; color: var(--text-secondary, #636c79); padding: 6px 12px; }
.ms-menu__item { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; padding: 8px 12px; border: 0; border-radius: 4px;
  background: transparent; font: inherit; font-size: 14px; color: var(--text-general, #050301); cursor: pointer; text-align: left; }
.ms-menu__item:hover { background: var(--bg-gray-bg, #eef2f6); }
/* PaginationWithDetails withPages=false, padding 16px 24px 0 */
.ms-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 24px 0; font-size: 14px; color: var(--text-secondary, #636c79); }
.ms-pager button:disabled { opacity: .4; cursor: default; }
.ms-texts__empty { padding: 12px 24px; font-size: 14px; color: var(--text-secondary, #636c79); }
.ms-qcard__piepad { padding: 16px 24px; }