/* Dashboard layout for the ransomware and breach pages (the charts themselves are styled by charts.css). */
.dash { display: grid; gap: var(--s-4, 1rem); margin-block: var(--s-6, 1.5rem); }
.dash:empty { display: none; }
.dash .kpi-grid { display: grid; gap: var(--s-4, 1rem); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.dash .scroll-x { overflow-x: auto; }
.dash .scroll-x .chart { min-width: 34rem; }
.dash .dash-foot { font-size: 0.8125rem; opacity: 0.75; margin: 0; }
.group-grid { display: grid; gap: var(--s-4, 1rem); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.group-card { display: grid; gap: 0.35rem; padding: var(--s-4, 1rem); min-width: 0; }
.group-card h3 { font-size: 1rem; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a long one-word name ends in an ellipsis (full name in the title) instead of breaking mid-word */
.group-card .meta { margin: 0; font-size: 0.8125rem; opacity: 0.75; }
.group-card .stat-row { display: flex; align-items: end; justify-content: space-between; gap: 0.75rem; }
.group-card .big { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.group-card .spark { width: 6.5rem; height: 2rem; }
/* Visual QA: main.wrap already spaces sections with gap; margins doubled it. Paired 8/4 panels squeezed the donut legend and bar labels, so they split evenly. */
main.wrap > .dash { margin-block: 0; }
@media (min-width: 48rem) { .dash .dash-grid > .span-8, .dash .dash-grid > .span-4 { grid-column: span 6; } }
/* Group momentum table and the new groups list (overview). Numbers right aligned and tabular; arrows are text, coloured by class. */
.dash .table-scroll { overflow-x: auto; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.rank-table th, .rank-table td { padding: 0.45rem 0.5rem; text-align: left; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.rank-table thead th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); }
.rank-table tbody tr:last-child > * { border-bottom: 0; }
.rank-table tbody th { font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.rank-table .n, .rank-table .mv { text-align: right; }
.rank-table .rk { width: 2rem; color: hsl(var(--muted-foreground)); }
.rank-table .mv { font-weight: 700; font-size: 0.8125rem; }
.rank-table .mv-up { color: var(--sev-critical, #ef4444); }
.rank-table .mv-down { color: var(--sev-low, #22c55e); }
.rank-table .mv-flat { color: hsl(var(--muted-foreground)); }
.rank-table .chip { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.6875rem; letter-spacing: 0.03em; text-transform: uppercase; color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / 0.5); background: hsl(var(--primary) / 0.1); }
.new-wrap { display: grid; gap: 0.5rem; }
.new-wrap .meta { margin: 0; font-size: 0.8125rem; opacity: 0.75; }
.new-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.25rem 1rem; }
.new-groups li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid hsl(var(--border)); }
.new-groups .ng-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-groups .ng-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.new-groups .ng-meta { grid-column: 1 / -1; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
/* Groups reference table: group names in normal case and left aligned (table.queue th is uppercase site-wide), numbers right aligned with tabular figures. */
table.groups-table { font-variant-numeric: tabular-nums; }
table.groups-table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; text-align: left; font-weight: 600; }
table.groups-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Data breaches: the newest breaches as a two-column card grid, the rest as a compact table. */
.breach-grid { display: grid; gap: var(--s-4, 1rem); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .breach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
table.breach-table { font-variant-numeric: tabular-nums; }
table.breach-table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; text-align: left; font-weight: 600; }
table.breach-table .num { text-align: right; }
/* Claims by month: the country filter above the chart. */
.country-filter-wrap { display: grid; gap: 0.5rem; }
.country-filter-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; justify-self: start; }
.country-filter { min-height: 2.25rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-weight: 400; }
/* Recent claims: the rest behind a disclosure. On narrow screens each row is a compact two-line item (organisation and group, then date and country, muted). */
.more-claims { margin-top: var(--s-3, 0.75rem); }
.more-claims > summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; }
table.claims-table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; text-align: left; font-weight: 600; color: hsl(var(--foreground)); }
table.claims-table .c-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.claims-table .c-site { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
/* Group page: eyebrow + one-line summary above the name, the monthly chart beside top industries and countries, primary-coloured share bars. */
.grp-head .eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--primary)); }
.grp-head h1 { overflow-wrap: anywhere; }
.grp-summary { margin: 0; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.grp-dash { display: grid; gap: var(--s-4, 1rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 56rem) { .grp-dash { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .grp-dash.grp-dash-one { grid-template-columns: minmax(0, 1fr); } }
.grp-main { min-width: 0; }
.grp-side { display: grid; gap: var(--s-4, 1rem); min-width: 0; }
@media (min-width: 40rem) and (max-width: 55.99rem) { .grp-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gbl { padding: var(--s-4, 1rem); min-width: 0; }
.gbl-title { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.gbl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.gbl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: baseline; font-size: 0.875rem; }
.gbl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbl-n { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gbl-pct { font-weight: 400; color: hsl(var(--muted-foreground)); margin-left: 0.25rem; }
.gbl-bar { grid-column: 1 / -1; display: block; width: 100%; height: 0.5rem; border-radius: 999px; overflow: hidden; }
.gbl-trk { fill: hsl(var(--muted-foreground)); fill-opacity: 0.18; }
.gbl-fill { fill: hsl(var(--primary)); }
.grp-ref meter { -webkit-appearance: none; appearance: none; height: 0.5rem; border: 0; border-radius: 999px; background: hsl(var(--muted-foreground) / 0.18); }
.grp-ref meter::-webkit-meter-bar { background: hsl(var(--muted-foreground) / 0.18); border: 0; border-radius: 999px; height: 0.5rem; }
.grp-ref meter::-webkit-meter-optimum-value, .grp-ref meter::-webkit-meter-suboptimum-value, .grp-ref meter::-webkit-meter-even-less-good-value { background: hsl(var(--primary)); border-radius: 999px; }
.grp-ref meter::-moz-meter-bar { background: hsl(var(--primary)); border-radius: 999px; }
.grp-ref td { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  table.claims-table, table.claims-table tbody { display: block; width: 100%; min-width: 0; }
  table.claims-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.claims-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid hsl(var(--border)); }
  table.claims-table tr[hidden] { display: none; }
  table.claims-table th, table.claims-table td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  table.claims-table tbody th { grid-column: 1; grid-row: 1; font-weight: 600; overflow-wrap: anywhere; }
  table.claims-table .c-group { grid-column: 2; grid-row: 1; text-align: right; }
  table.claims-table .c-date { grid-column: 1; grid-row: 2; }
  table.claims-table .c-country { grid-column: 2; grid-row: 2; text-align: right; }
  table.claims-table .c-date, table.claims-table .c-country { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
  table.claims-table .c-site, table.claims-table .c-sector { display: none; }
  .tablewrap:has(> table.claims-table) { overflow-x: visible; }
}

/* Claim dates never wrap ("15 October / 2026"), on group pages too where the date cell has no class. */
table.claims-table td:last-child { white-space: nowrap; }

/* Phones: KPI tiles two to a row (the last one spans the row when the count is odd), not five full-width tiles stacked. */
@media (max-width: 40rem) { .dash .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }