/* TPA demo shared styles */

/* Page layout */
html, body { height: 100%; }
.pf-v6-c-page { min-height: 100vh; }
.pf-v6-c-page__sidebar[aria-hidden="true"] { display: none; }
.pf-v6-c-page__sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: start; }
.pf-v6-c-page.pf-m-sidebar-collapsed {
  grid-template-areas: "header header" "sidebar main";
  grid-template-columns: 0 1fr !important;
}
.pf-v6-c-page__main { font-size: 14px; }

/* Nav */
.pf-v6-c-nav__link { cursor: pointer; }
.pf-v6-c-nav__subnav { display: none; }
.pf-v6-c-nav__item.pf-m-expanded > .pf-v6-c-nav__subnav { display: block; }

/* Table */
.pf-v6-c-table { --pf-v6-c-table--BackgroundColor: transparent; }
.pf-v6-c-table__td a { cursor: pointer; text-decoration: none; color: var(--pf-t--global--text--color--link--default); }
.pf-v6-c-table__td a:hover { text-decoration: underline; }
.pf-v6-c-table__check { width: 45px; }
.pf-v6-c-table__action { width: 60px; text-align: right; }

/* Toolbar */
.pf-v6-c-toolbar:not(.pf-m-full-height) { padding: 8px 0; }
.pf-v6-c-toolbar__content-section { display: flex; align-items: center; gap: 16px; width: 100%; }
.pf-v6-c-toolbar__group { display: flex; align-items: center; gap: 8px; }
.pf-v6-c-toolbar__group.pf-m-align-end { margin-left: auto; color: var(--pf-t--global--text--color--subtle); font-size: 14px; }

/* Icon */
.pf-v6-c-icon { display: inline-flex; align-items: center; }
.pf-v6-c-icon__content { display: inline-flex; }
.pf-v6-icon-rh-ui { display: block; }

/* Flex layout */
.pf-v6-l-flex { display: flex; }
.pf-v6-l-flex.pf-m-align-items-center { align-items: center; }
.pf-v6-l-flex.pf-m-nowrap { flex-wrap: nowrap; }
.pf-v6-l-flex.pf-m-gap-sm { gap: 8px; }
.pf-v6-l-flex.pf-m-space-items-xs > * + * { margin-left: 4px; }
.pf-v6-l-flex.pf-m-space-items-sm > * + * { margin-left: 8px; }

/* Divider */
hr.pf-v6-c-divider.pf-m-vertical { display: inline-block; width: 1px; height: 1em; border: 0; background: var(--pf-t--global--border--color--default); margin: 0; vertical-align: middle; }

/* Label */
.pf-v6-c-label { display: inline-flex; align-items: center; }
.pf-v6-c-label.pf-m-compact { font-size: 0.75rem; padding: 1px 6px; border-radius: 30px; }
.pf-v6-c-label.pf-m-red { background-color: var(--pf-t--color--red--10); color: var(--pf-t--color--red--60); border: 1px solid var(--pf-t--color--red--20); }
.pf-v6-c-label.pf-m-orange { background-color: var(--pf-t--color--orange--10); color: var(--pf-t--color--orange--60); border: 1px solid var(--pf-t--color--orange--20); }
.pf-v6-c-label__content { display: inline-flex; align-items: center; gap: 4px; }
.pf-v6-c-label__icon { display: inline-flex; }
.pf-v6-theme-dark .pf-v6-c-label.pf-m-red { background-color: var(--pf-t--color--red--70); color: var(--pf-t--color--red--10); border-color: var(--pf-t--color--red--50); }
.pf-v6-theme-dark .pf-v6-c-label.pf-m-orange { background-color: var(--pf-t--color--orange--70); color: var(--pf-t--color--orange--10); border-color: var(--pf-t--color--orange--50); }

/* Label group */
.pf-v6-c-label-group { display: flex; }
.pf-v6-c-label-group__main { display: flex; }
.pf-v6-c-label-group__list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }

/* Tabs */
.pf-v6-c-page__main-section.pf-m-tabs { padding-bottom: 0; }

/* Code / monospace */
code { font-family: var(--pf-t--global--font--family--mono); font-size: 0.875em; word-break: break-all; }

/* Severity icon colors */
.tpa-icon-important { color: var(--pf-t--global--icon--color--severity--important--default); }
.tpa-icon-moderate  { color: var(--pf-t--global--icon--color--severity--moderate--default); }
.tpa-icon-minor     { color: var(--pf-t--global--icon--color--severity--minor--default); }

/* Donut chart */
.tpa-chart-wrap   { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tpa-chart-canvas { position: relative; height: 200px; width: 200px; flex-shrink: 0; }
.tpa-chart-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.tpa-chart-count  { font-size: 22px; font-weight: 600; color: var(--pf-t--global--text--color--regular); }
.tpa-chart-unit   { font-size: 11px; color: var(--pf-t--global--text--color--subtle); }
.tpa-chart-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.tpa-swatch       { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.tpa-swatch.pf-m-important { background: var(--pf-t--global--icon--color--severity--important--default); }
.tpa-swatch.pf-m-moderate  { background: var(--pf-t--global--icon--color--severity--moderate--default); }
.tpa-swatch.pf-m-minor     { background: var(--pf-t--global--icon--color--severity--minor--default); }

/* Empty state subtitle */
.tpa-empty-subtitle { margin-top: 1rem; color: var(--pf-t--global--text--color--subtle); }

/* CVSS vector string */
.cvss-vector { font-family: var(--pf-t--global--font--family--mono); font-size: 0.75rem; color: var(--pf-t--global--text--color--subtle); margin-top: 8px; word-break: break-all; }

/* Screen reader utility */
.pf-v6-u-screen-reader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }