/* Workspace console: compact readings lead the page; the historical chart and application table
   occupy the working column beside attention and recent activity. Shared tables, controls,
   semantic tokens and scoped data retain their existing contracts. */

.dashboard-page > .page-header { padding-block: 0; margin-bottom: 0; border: 0; }
.dashboard-page > .page-header .page-title { max-width: 32ch; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
.dashboard-page > .page-header .page-sub { max-width: 64ch; margin-top: 6px; font-size: var(--fs-base); line-height: 1.5; }
.dash { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.dash-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-workspace .card { min-width: 0; }
.dash-workspace .card-header { min-height: 0; padding: 16px; gap: 12px; }
.dash-workspace .card-title { font-size: var(--fs-xl); letter-spacing: var(--tracking-heading); }
.dash-workspace .card-title::before { display: none; }
.dash-workspace .card-sub { font-size: var(--fs-sm); line-height: 1.5; margin-top: 4px; }
.dash-workspace .card-body { padding: 16px; }
.dash-toolbar { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-block: -8px; }
.dash-toolbar-label { margin-inline-end: auto; color: var(--ink-3); font-size: var(--fs-sm); }
.dash-updated { color: var(--ink-3); font-size: var(--fs-sm); }
.dash-refresh-error { padding: 10px 14px; border: 1px solid var(--warn-line); border-radius: var(--r); color: var(--warn-text); background: var(--warn-soft); font-size: var(--fs-sm); }
.dash-app-guidance { padding: 12px 16px; border-top: 1px solid var(--line-1); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.dash-app-guidance[hidden], .dash-summary[hidden], .dash-readings[hidden], .dash-inventory[hidden], .dash-locations[hidden] { display: none; }
.dash-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }
.dash-empty-title { color: var(--ink-2); font-weight: 500; }

/* ---------- Five equal readings: real values and comparisons without a decorative hero ---------- */
.dash-summary { min-width: 0; }
.dash-summary .dash-readings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.dash-summary .dash-readings > .reading:nth-child(n) { grid-column: auto; padding: 14px 16px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-1); min-width: 0; }
.dash-readings .reading-label { color: var(--ink-2); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; letter-spacing: normal; text-transform: none; white-space: normal; line-height: 1.5; }
.dash-readings .reading.is-live .reading-label { color: var(--ink-2); }
.dash-readings .reading-label .truncate { white-space: normal; }
.dash-readings .reading-foot { gap: 4px 6px; flex-wrap: wrap; white-space: normal; min-height: 20px; font-size: var(--fs-sm); color: var(--ink-3); }
.dash-readings .reading-value { color: var(--ink-1); font-family: var(--font-mono); font-size: 28px; font-weight: 500; line-height: 1.2; margin-block: 4px; letter-spacing: -.025em; }
.dash-readings .reading.is-alert .reading-value { color: var(--danger-text); }
.dash-readings .reading .delta { font-size: var(--fs-sm); }
.dash-readings .dot.live { background: var(--ok); animation: none; }
.reading-note { flex: none; color: inherit; }
.reading-cmp { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.reading-note + .reading-cmp::before { content: "·"; margin-inline-end: 6px; }
.dash-readings .reading .sk-label { width: 50%; }
.dash-readings .reading .sk-figure { width: 34%; height: 26px; margin-block: 5px 3px; }
.dash-readings .reading .sk-foot { width: 58%; height: 10px; }

/* ---------- Authentication: a real plot or a concise section, with accessible historical ranges ---------- */
.dash-panel-head { align-items: flex-start; flex-wrap: wrap; }
.dash-panel-head > .grow { min-width: 140px; }
.dash-range .seg { flex-wrap: nowrap; }
.dash-range-control > summary { color: var(--ink-2); cursor: var(--cursor-action, pointer); font-size: var(--fs-sm); padding-block: 6px; }
.dash-range-control:not(.has-activity)[open] .dash-range { margin-top: 8px; }
.dash-range-control.has-activity > summary { display: none; }
.dash-auth.is-empty .card-header { border-bottom: 0; padding-bottom: 0; }
.dash-auth.is-empty .card-body { padding-top: 12px; }
.dash-auth.is-empty .chart-keys { display: none; }

/* ---------- Login activity: legend with totals above a compact plot; the same numbers as a table ---------- */
.dash-chart-body { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.chart-keys { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 28px; }
.chart-key { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chart-key .k { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--fs-sm); }
.chart-key .k::before { content: ""; width: 14px; border-top: 2px solid var(--key, var(--viz-1)); }
.chart-key.is-dashed .k::before { border-top-style: dashed; }
.chart-key .v { color: var(--ink-1); font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
.dash-chart { flex: none; height: 240px; min-height: 240px; }
.dash-chart .sk-chart { height: 100%; min-height: 0; }
.dash-chart.is-empty, .dash-chart.is-table { flex: none; height: auto; min-height: 0; }
.dash-chart-note { color: var(--ink-2); font-size: var(--fs-sm); }
.dash-chart-table { max-height: 320px; overflow: auto; border: 1px solid var(--line-1); border-radius: var(--r); }
.dash-chart-table thead { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.dash-chart[hidden], .dash-chart-tools[hidden] { display: none; }
.dash-chart-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-1); color: var(--ink-3); font-size: var(--fs-sm); }
.dash-chart-tools [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.dash-chart-table .table tbody th { padding: 8px var(--cell-px); border-bottom: 1px solid var(--line-1); font-weight: 400; color: var(--ink-2); text-align: start; }
.dash-chart-table .table tbody tr:last-child th { border-bottom: 0; }
.dash-inventory > .card-header { justify-content: flex-start; }
.dash-caption { caption-side: top; padding: 8px 12px; color: var(--ink-3); font-size: var(--fs-sm); text-align: start; }

/* ---------- License inventory: the total, a directly labelled bar, and the figures behind it ---------- */
.inventory { display: flex; flex-direction: column; gap: 14px; }
.inv-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.inv-figure { color: var(--ink-1); font-family: var(--font-mono); font-size: 28px; font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.inv-unit { color: var(--ink-2); font-size: var(--fs-sm); }
.inv-note { color: var(--ink-3); font-size: var(--fs-sm); }
.inv-note::before { content: "·"; margin-inline-end: 8px; }
.inv-chart { display: flex; flex-direction: column; gap: 6px; }
/* Label cells mirror the bar's segments (same flex weights and 2px gap); one too narrow for its text is hidden by
   the page rather than clipped. */
.inv-labels { display: flex; gap: 2px; min-height: 18px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 18px; }
.inv-label { flex-basis: 0; min-width: 3px; overflow: hidden; white-space: nowrap; }
.inv-label:not(:empty) { padding-inline-start: 6px; border-inline-start: 1px solid var(--line-3); }
.inv-label.is-hidden { border-inline-start-color: transparent; }
.inv-label.is-hidden > * { visibility: hidden; }
.inv-label .num { color: var(--ink-1); font-weight: 500; }
.inv-bar { height: 12px; border-radius: var(--r-sm); background: transparent; }
.inventory .sk-figure { width: 30%; height: 26px; }
.inventory .sk-bar { height: 12px; }
.inv-list { display: flex; flex-direction: column; }
.inv-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; min-height: 34px; border-bottom: 1px solid var(--line-1); font-size: var(--fs-sm); }
.inv-row:last-child { border-bottom: 0; }
.inv-row .swatch { width: 10px; height: 10px; border-radius: 2px; }
.inv-row .lbl { color: var(--ink-2); }
.inv-row .val { color: var(--ink-1); font-weight: 500; text-align: end; }
.inv-row .pct { color: var(--ink-3); font-size: var(--fs-sm); text-align: end; }
.inv-row.is-zero .val { color: var(--ink-3); font-weight: 400; }
.inventory-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; border-top: 1px solid var(--line-1); }
.inventory-facts:empty { display: none; }
.inventory-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 20px; }
.inventory-facts > div + div { border-inline-start: 1px solid var(--line-1); }
.inventory-facts dt { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); }
.inventory-facts dd { color: var(--ink-1); font-size: var(--fs-lg); font-weight: 600; }
.inventory-facts dd.sub { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 400; }

/* ---------- Applications: one working surface, with integrated table and contextual footer ---------- */
.dash-applications { overflow: hidden; }
.dash-app-count { margin-inline-start: 4px; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 400; }
.dash-apps .table-card { border: 0; border-radius: 0; box-shadow: none; }
.dash-apps .table tbody td { height: 54px; }
.dash-apps .table th:first-child, .dash-apps .table td:first-child { padding-inline-start: 16px; }
.dash-apps .table th:last-child, .dash-apps .table td:last-child { padding-inline-end: 16px; }
.dash-apps .table .cell-key { min-width: 160px; }
.dash-app-name { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dash-app-name .cell-sub { margin: 0; font-size: var(--fs-xs); }
.dash-app-name > a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.dash-app-name > a:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; border-radius: var(--r-sm); }
.dash-section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.dash-app { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.dash-app .avatar.app-mark { width: 28px; height: 28px; border-radius: var(--r); font-size: var(--fs-xs); border: 1px solid var(--line-1); }

/* ---------- Operational feed: action, time and actor, without timeline ornament ---------- */
.dash-activity { overflow: hidden; }
.dash-feed-wrap { max-height: 408px; overflow-y: auto; }
.dash-feed-wrap > .dash-empty { padding: 16px; }
.dash-feed-item { position: relative; padding: 12px 16px; font-size: var(--fs-base); }
.dash-feed-item.is-error { border-inline-start: 2px solid var(--danger); }
.dash-feed-item.is-warning { border-inline-start: 2px solid var(--warn); }
.dash-feed-item + .dash-feed-item { border-top: 1px solid var(--line-1); }
.dash-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dash-feed-action { color: var(--ink-1); font-weight: 500; overflow-wrap: anywhere; }
.dash-feed-time { flex-shrink: 0; color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; }
.dash-feed-item.is-error .dash-feed-action { color: var(--danger-text); }
.dash-feed-item.is-warning .dash-feed-action { color: var(--warn-text); }
.dash-feed-meta { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 4px; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }
.dash-feed-meta > span { min-width: 0; overflow-wrap: anywhere; }
.dash-feed-meta > span + span::before { content: "·"; margin-inline-end: 8px; }
.dash-activity-footer { padding: 8px 12px; border-top: 1px solid var(--line-1); }
.dash-activity-footer .btn { width: 100%; justify-content: space-between; }
.sk-feed { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 16px; padding: 16px; }

/* ---------- Device locations: one series, one hue; the remainder in the neutral. Name and figures on one line,
   the bar under them, so country names keep their width. ---------- */
.geo-list { display: flex; flex-direction: column; }
.dash-locations, .dash-versions, .dash-resellers { padding: 16px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-1); }
.dash-locations[hidden], .dash-versions[hidden], .dash-resellers[hidden] { display: none; }
.dash-versions .dash-section-head, .dash-resellers .dash-section-head { margin-bottom: 14px; }
.dash-locations .dash-section-head { margin-bottom: 12px; }
.geo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; grid-template-areas: "name val pct" "bar bar bar"; align-items: center; gap: 4px 12px; padding-block: 6px; font-size: var(--fs-sm); }
.geo-name { grid-area: name; min-width: 0; }
.geo-name .country { max-width: 100%; }
.geo-val { grid-area: val; color: var(--ink-1); font-weight: 500; text-align: end; }
.geo-pct { grid-area: pct; color: var(--ink-3); font-size: var(--fs-sm); text-align: end; }
.geo-bar { grid-area: bar; height: 6px; }
.geo-bar > span { display: block; height: 100%; min-width: 2px; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--viz-1); }
.geo-row.is-other .geo-bar > span { background: var(--viz-neutral); }
.geo-row.is-other .cn { color: var(--ink-3); }
.geo-foot { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-sm); }

.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 16px; padding-block: 10px; }

@media (max-width: 1100px) {
  .dash-workspace { grid-template-columns: minmax(0, 1fr); }
  .dash-main { display: contents; }
  .dash-applications { order: 2; }
  .dash-activity { order: 1; }
  .dash-auth { order: 0; }
  .dash-inventory { order: 3; }
  .dash-locations { order: 4; }
  .dash-feed-wrap { max-height: 320px; }
  .dash-summary .dash-readings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .dashboard-page > .page-header { gap: 10px; }
  .dashboard-page .page-actions > .btn-primary { margin-inline-start: 0; }
  .dashboard-page > .page-header .page-title { font-size: 28px; }
  .dash-toolbar { justify-content: flex-start; flex-wrap: wrap; margin-block: -8px; gap: 6px; }
  .dash-toolbar-label { display: none; }
  .dash-updated { margin-inline-end: auto; }
  .dash-workspace { gap: var(--s4); }
  .dash-workspace .card-header { padding: 14px 16px; }
  .dash-workspace .card-body { padding: 16px; }
  .dash-range-control > summary { min-height: 44px; padding-block: 12px; }
  .dash-app-guidance { padding: 12px 16px; }
  .dash-apps .table.is-list td { height: auto; }
  .dash-apps .table.is-list td:first-child, .dash-apps .table.is-list td:last-child { padding-inline: 0; }
  .dash-apps .table.is-list tr.row { min-height: 88px; padding-block: 12px; }
  .dash-apps .table.is-list .cell-key { min-width: 0; }
  .dash-app .avatar.app-mark { display: none; }
  .dash-summary .dash-readings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-summary .dash-readings > .reading:nth-child(n) { padding: 12px; }
  .dash-summary .dash-readings > .reading:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; }
  .dash-readings .reading:first-child .reading-value { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .dash-chart { height: 220px; min-height: 220px; }
}

/* ---------- Needs attention: counted conditions, each a link to its records; the soonest expiries listed under theirs ---------- */
/* The applications column spans both rows of the secondary column: attention above the feed (the panel is simply
   absent when the server does not report the block, and the feed moves up). */
.dash-workspace { grid-template-rows: auto 1fr; }
.dash-main { grid-column: 1; grid-row: 1 / -1; }
.dash-attention, .dash-activity { grid-column: 2; }
.dash-attention { overflow: hidden; }
.dash-attention-clear { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--ink-2); font-size: var(--fs-sm); }
.dash-attention-clear > .icon { color: var(--ok-text); }
.att-list { display: flex; flex-direction: column; }
.att-row + .att-row { border-top: 1px solid var(--line-1); }
.att-link { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) 12px; align-items: center; gap: 8px; min-height: 52px; padding: 12px 16px; color: var(--ink-1); font-size: var(--fs-base); line-height: 1.5; transition: background-color var(--t-fast); }
.att-link:hover { background: var(--state-row-hover); }
.att-link > .icon { color: var(--ink-3); }
.att-count { font-family: var(--figure-font); font-size: var(--fs-lg); font-weight: 500; min-width: 2ch; text-align: end; }
.att-row.is-warn .att-count { color: var(--warn-text); }
.att-row.is-danger .att-count { color: var(--danger-text); }
.att-label { min-width: 0; overflow-wrap: anywhere; }
.att-go { color: var(--ink-3); justify-self: end; opacity: .7; }
.att-soon { display: flex; flex-direction: column; padding: 0 16px 10px; }
.att-soon-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; font-size: var(--fs-sm); color: var(--ink-2); }
.att-soon-link:hover .att-key { color: var(--accent-text); }
.att-key { color: var(--ink-1); }
.att-app { color: var(--ink-3); }
.att-when { color: var(--warn-text); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .dash-workspace { grid-template-rows: none; }
  .dash-main { grid-column: auto; grid-row: auto; }
  .dash-attention, .dash-activity { grid-column: auto; }
  .dash-attention { order: 1; }
  .dash-activity { order: 3; }
  .dash-auth { order: 0; }
  .dash-inventory { order: 4; }
  .dash-locations { order: 5; }
  .dash-versions { order: 6; }
  .dash-resellers { order: 7; }
}
@media (max-width: 639px) {
  .att-link { padding-inline: 16px; }
  .att-soon { padding-inline: 16px 16px; }
}