/*
 * HUB-UNIFY-1 — the Daily Hub family's ONE skin (.dh-*), in the Work
 * Center's language (PO 2026-09-24: «ياخد نفس الثيم اللي في مركز العمل»).
 *
 * Rules of the house (work-center.css): page-scoped prefixed classes only,
 * logical properties everywhere (AR/EN from one sheet), no font-family,
 * every colour a role token from tokens.css — this sheet carries ZERO hex
 * literals (StylesheetHexRatchetTest budget 0), type never below
 * --ho-text-xs (TypeFloorTest).
 *
 * Layout contract (PO: «التصميم ميكونش فيه سكرول»): on a desktop viewport
 * the hub fills exactly the space under the topbar; only the work table
 * and the activity feed scroll, inside their own cards. Narrow or short
 * viewports fall back to the natural stacked flow (a phone cannot hold six
 * sections on one screen — said in the PR, not hidden).
 */

.dh {
    --dh-card: var(--ho-surface);
    --dh-line: var(--ho-line);
    --dh-line-soft: var(--ho-surface-inset);
    --dh-ink: var(--ho-ink);
    --dh-muted: var(--ho-ink-muted);
    --dh-brand: var(--ho-ink-brand);
    --dh-brand-soft: var(--ho-ground-brand);
    --dh-brand-line: var(--ho-line-brand);
    --dh-radius: 0.875rem;
    --dh-gap: 0.5rem;
    --dh-shadow: 0 1px 2px color-mix(in srgb, var(--ho-ink) 5%, transparent), 0 1px 3px color-mix(in srgb, var(--ho-ink) 7%, transparent);
    /* topbar (≈ 4.3rem) + the panel's page padding above and below the
       content (2 × 2rem) — measured on the live panel, one place */
    --dh-offset: 8.375rem;

    color: var(--dh-ink);
    display: flex;
    flex-direction: column;
    gap: var(--dh-gap);
    inline-size: 100%;
    font-variant-numeric: tabular-nums;
}

/* The whole hub on ONE screen — only where it genuinely fits: the two-column
   layout (table beside the feed, ≥1280px) AND the height to give the table
   real room (≥1000px; header + KPI row + insight band take ≈30rem — at 900px the table still got only ~3 rows). On a
   laptop (PO 2026-09-26, twice) a single fixed height squeezed the table to
   its header — or, once the feed stacked under it, to one row. */
@media (min-width: 1280px) and (min-height: 1000px) {
    .dh {
        block-size: calc(100dvh - var(--dh-offset));
        min-block-size: 0;
        overflow: hidden;
    }

    .dh-work { flex: 1 1 0; min-block-size: 0; }
    .dh-scroll { overflow-y: auto; min-block-size: 0; }
}

/* Two columns on a short screen: the table + feed row takes the first
   screen under the KPI row (both fill it, scrolling inside); the insight
   band follows below with a normal page scroll. */
@media (min-width: 1280px) and (max-height: 999.98px) {
    .dh-work { block-size: max(22rem, calc(100dvh - var(--dh-offset) - 16rem)); }
    .dh-scroll { overflow-y: auto; min-block-size: 0; }
}

/* 1024–1279px: the feed stacks UNDER the table — each keeps its own readable,
   bounded height (never one shared height, which squeezed the table to a
   single row), and the page scrolls. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dh-table-wrap { max-block-size: max(18rem, calc(100dvh - var(--dh-offset) - 17rem)); }
    .dh-tl { max-block-size: 26rem; }
}

.dh a { color: inherit; text-decoration: none; }
.dh .dh-ico { inline-size: 1rem; block-size: 1rem; flex: none; }
.dh .dh-ico-s { inline-size: 0.875rem; block-size: 0.875rem; flex: none; }
.dh [role="button"], .dh button, .dh a[href] { cursor: pointer; }
.dh :focus-visible { outline: 2px solid var(--ho-focus); outline-offset: 2px; border-radius: 0.375rem; }

/* ── header ─────────────────────────────────────────────────────────── */
.dh-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; flex-wrap: wrap; }
.dh-title { font-size: 1.3125rem; font-weight: 700; color: var(--dh-brand); line-height: 1.2; white-space: nowrap; }
.dh-sub { display: flex; align-items: center; gap: 0.375rem; color: var(--dh-muted); font-size: var(--ho-text-xs); margin-block-start: 0.1875rem; white-space: nowrap; }
.dh-live { display: inline-flex; align-items: center; gap: 0.3125rem; color: var(--ho-success-ink); font-weight: 600; }
.dh-live i { inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: var(--ho-success-line); box-shadow: 0 0 0 3px var(--ho-success-soft); }
.dh-ctrls { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; min-inline-size: 0; }

.dh-seg { display: inline-flex; background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: 0.6875rem; padding: 0.1875rem; box-shadow: var(--dh-shadow); }
.dh-seg > a, .dh-seg > button {
    display: flex; align-items: center; gap: 0.3125rem; padding: 0.3125rem 0.5rem; border-radius: 0.5rem;
    font-weight: 600; font-size: 0.78125rem; color: var(--ho-ink); white-space: nowrap; background: transparent; border: 0;
}
.dh-seg > .is-active { background: var(--dh-brand); color: var(--ho-surface); }
nav.dh-seg { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
@media (max-width: 767.98px) { .dh-ctrls { inline-size: 100%; } .dh-title { white-space: normal; } }
.dh-seg .dh-badge { font-size: var(--ho-text-xs); font-weight: 700; border-radius: 999px; padding: 0 0.375rem; background: var(--ho-danger-soft); color: var(--ho-danger-ink); line-height: 1.125rem; }
.dh-seg > .is-active .dh-badge { background: color-mix(in srgb, var(--ho-surface) 20%, transparent); color: var(--ho-surface); }

.dh-btn {
    display: flex; align-items: center; gap: 0.3125rem; border: 1px solid var(--dh-line); background: var(--dh-card);
    border-radius: 0.625rem; padding: 0.375rem 0.5625rem; font-weight: 600; font-size: 0.78125rem; white-space: nowrap;
    box-shadow: var(--dh-shadow); color: var(--ho-ink);
}
.dh-btn:hover { border-color: var(--dh-brand); }
.dh-date { border: 1px solid var(--dh-line); border-radius: 0.5rem; padding: 0.25rem 0.375rem; font-size: var(--ho-text-xs); background: var(--dh-card); color: var(--ho-ink); }

.dh-pop { position: absolute; inset-block-start: calc(100% + 0.375rem); inset-inline-end: 0; z-index: 30; min-inline-size: 16rem; max-block-size: 20rem; overflow-y: auto;
    background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: 0.75rem; box-shadow: 0 10px 30px color-mix(in srgb, var(--ho-ink) 14%, transparent); padding: 0.375rem; }
.dh-pop label, .dh-pop button { display: flex; align-items: center; gap: 0.5rem; inline-size: 100%; padding: 0.375rem 0.5rem; border-radius: 0.5rem; font-size: 0.78125rem; background: none; border: 0; text-align: start; }
.dh-pop label:hover, .dh-pop button:hover { background: var(--dh-brand-soft); }

/* ── search results ─────────────────────────────────────────────────── */
.dh-search { display: flex; align-items: center; gap: 0.375rem; border: 1px solid var(--dh-line); border-radius: 0.5625rem; padding: 0.25rem 0.625rem; color: var(--dh-muted); background: var(--dh-card); min-inline-size: 9rem; }
.dh-search input { border: 0; outline: none; background: transparent; font-size: var(--ho-text-xs); inline-size: 100%; color: var(--ho-ink); padding: 0; }
.dh-results { position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0; z-index: 30; inline-size: min(28rem, 90vw); background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: 0.75rem; box-shadow: 0 10px 30px color-mix(in srgb, var(--ho-ink) 14%, transparent); overflow: hidden; }
.dh-results a, .dh-results div { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-block-end: 1px solid var(--dh-line-soft); font-size: 0.78125rem; }
.dh-results a:hover { background: var(--dh-brand-soft); }

/* ── KPI cards ──────────────────────────────────────────────────────── */
.dh-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 1023.98px) { .dh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dh-k {
    background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); padding: 0.5625rem 0.875rem 0.5rem;
    box-shadow: var(--dh-shadow); display: flex; flex-direction: column; gap: 0.375rem; text-align: start; min-inline-size: 0;
    transition: transform 0.12s, box-shadow 0.12s;
}
a.dh-k:hover, button.dh-k:hover { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--ho-ink) 8%, transparent); }
a.dh-k:hover .dh-k-v, button.dh-k:hover .dh-k-v { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.dh-k.is-hot { border-color: var(--ho-accent-line); box-shadow: 0 0 0 1px var(--ho-accent-line), 0 3px 0 var(--ho-accent-line); }
.dh-k-hd { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dh-k-l { color: var(--dh-muted); font-size: var(--ho-text-xs); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-tile { inline-size: 2rem; block-size: 2rem; border-radius: 0.5625rem; display: grid; place-items: center; flex: none; }
.dh-k-row { display: flex; align-items: baseline; gap: 0.375rem; min-inline-size: 0; }
.dh-k-v { font-size: 1.5625rem; font-weight: 700; line-height: 1; letter-spacing: -0.3px; }
.dh-k-of { font-size: 0.8125rem; color: var(--dh-muted); font-weight: 500; }
.dh-spark { margin-inline-start: auto; flex: none; }
.dh-k-s { font-size: var(--ho-text-xs); display: flex; justify-content: space-between; gap: 0.5rem; color: var(--dh-muted); margin-block-start: auto; }
.dh-k-s > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-pbar { block-size: 4px; background: var(--dh-line-soft); border-radius: 9px; position: relative; }
.dh-pbar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 9px; max-inline-size: 100%; }
.dh-pbar u { position: absolute; inset-block: -2px; inline-size: 2px; background: var(--ho-ink); border-radius: 2px; }
.dh-na { font-size: var(--ho-text-xs); color: var(--dh-muted); line-height: 1.35; }

/* ── tones (one vocabulary for lanes, types, tiles) ─────────────────── */
.dh-t-call, .dh-t-info { background: var(--ho-info-soft); color: var(--ho-info-ink); }
.dh-t-wa, .dh-t-ok { background: var(--ho-success-soft); color: var(--ho-success-ink); }
.dh-t-fu, .dh-t-violet { background: var(--ho-unit-verify-fill); color: var(--ho-unit-verify-ink); }
.dh-t-rev, .dh-t-warn { background: var(--ho-warning-soft); color: var(--ho-warning-ink); }
.dh-t-hand, .dh-t-brand { background: var(--dh-brand-soft); color: var(--dh-brand); }
.dh-t-meet, .dh-t-accent { background: var(--ho-accent-soft); color: var(--ho-accent-ink); }
.dh-t-danger { background: var(--ho-danger-soft); color: var(--ho-danger-ink); }
.dh-t-neutral, .dh-t-muted { background: var(--dh-line-soft); color: var(--dh-muted); }
.dh-dot { inline-size: 0.4375rem; block-size: 0.4375rem; border-radius: 50%; flex: none; background: currentColor; }
.dh-danger { color: var(--ho-danger-ink); }
.dh-warn { color: var(--ho-warning-ink); }
.dh-ok { color: var(--ho-success-ink); }
.dh-muted { color: var(--dh-muted); }

/* ── work area ──────────────────────────────────────────────────────── */
.dh-work { display: grid; grid-template-columns: minmax(0, 1fr) 19.5rem; grid-template-rows: minmax(0, 1fr); gap: 0.625rem; }
@media (max-width: 1279.98px) { .dh-work { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; } }
.dh-card { background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; overflow: hidden; box-shadow: var(--dh-shadow); }

.dh-lanes { display: flex; gap: 0.375rem; padding: 0.5625rem 0.75rem; border-block-end: 1px solid var(--dh-line); align-items: center; overflow-x: auto; scrollbar-width: none; }
.dh-ln {
    display: flex; align-items: center; gap: 0.3125rem; border: 1px solid var(--dh-line); border-radius: 999px; padding: 0.25rem 0.5625rem;
    font-size: 0.78125rem; font-weight: 600; white-space: nowrap; color: var(--ho-ink); background: var(--dh-card); flex: none;
}
.dh-ln b { font-weight: 700; }
.dh-ln:hover { border-color: var(--dh-brand); }
.dh-ln.is-active { background: var(--dh-brand); color: var(--ho-surface); border-color: var(--dh-brand); }
.dh-ln-all { font-size: var(--ho-text-xs); font-weight: 600; color: var(--ho-info-ink); white-space: nowrap; display: flex; align-items: center; gap: 0.1875rem; margin-inline-start: auto; }

.dh-types { display: flex; gap: 0.3125rem; padding: 0.4375rem 0.75rem; border-block-end: 1px solid var(--dh-line); align-items: center; background: var(--ho-surface-sunken); overflow-x: auto; scrollbar-width: none; }
.dh-types-l { font-size: var(--ho-text-xs); color: var(--dh-muted); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 0.3125rem; flex: none; }
.dh-ty { display: flex; align-items: center; gap: 0.25rem; border-radius: 0.5rem; padding: 0.1875rem 0.5rem 0.1875rem 0.375rem; font-size: var(--ho-text-xs); font-weight: 600; white-space: nowrap; background: var(--dh-card); border: 1px solid var(--dh-line); color: var(--ho-ink); flex: none; }
.dh-ty b { color: var(--ho-danger-ink); font-weight: 700; }
.dh-ty:hover { border-color: var(--dh-brand); }
.dh-ty.is-active { border-color: var(--ho-danger-line); background: var(--ho-danger-soft); color: var(--ho-danger-ink); }
.dh-ty .dh-at { inline-size: 1.125rem; block-size: 1.125rem; border-radius: 0.3125rem; }

.dh-table-wrap { flex: 1 1 auto; min-block-size: 0; overflow: auto; scrollbar-width: thin; }
@media (max-width: 1023.98px) { .dh-table-wrap { max-block-size: 32rem; } }
.dh-table { inline-size: 100%; border-collapse: collapse; }
.dh-table th {
    position: sticky; inset-block-start: 0; z-index: 1; font-size: var(--ho-text-xs); color: var(--dh-muted); font-weight: 600; text-align: start;
    padding: 0.4375rem 0.5rem; background: var(--ho-surface-sunken); border-block-end: 1px solid var(--dh-line); white-space: nowrap;
}
.dh-table td { padding: 0.3125rem 0.4375rem; border-block-end: 1px solid var(--dh-line-soft); font-size: 0.78125rem; vertical-align: middle; }
.dh-table tbody tr.dh-row { cursor: pointer; }
.dh-table tbody tr.dh-row:hover td { background: var(--dh-brand-soft); }
.dh-who { display: flex; flex-direction: column; min-inline-size: 0; }
.dh-who b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 11rem; }
.dh-who span { font-size: var(--ho-text-xs); color: var(--dh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 18rem; }
.dh-row:hover .dh-who b { color: var(--ho-info-ink); text-decoration: underline; }
.dh-act { display: flex; align-items: center; gap: 0.5rem; }
.dh-act b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 9rem; }
.dh-at { inline-size: 1.625rem; block-size: 1.625rem; border-radius: 0.5rem; display: inline-grid; place-items: center; flex: none; }
.dh-due { display: flex; flex-direction: column; white-space: nowrap; }
.dh-due b { font-weight: 600; }
.dh-due span { font-size: var(--ho-text-xs); color: var(--dh-muted); }
.dh-due.is-late b { color: var(--ho-danger-ink); }
.dh-av { inline-size: 1.625rem; block-size: 1.625rem; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: var(--ho-text-xs); flex: none; }
.dh-owner { display: inline-flex; align-items: center; gap: 0.4375rem; white-space: nowrap; max-inline-size: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
a.dh-owner:hover { color: var(--ho-info-ink); text-decoration: underline; }
.dh-table td:last-child { inline-size: 1%; white-space: nowrap; }
.dh-ra { display: flex; gap: 0.3125rem; justify-content: flex-end; }
.dh-ib { inline-size: 1.75rem; block-size: 1.75rem; border: 1px solid var(--dh-line); border-radius: 0.5rem; display: grid; place-items: center; color: var(--ho-ink); background: var(--dh-card); }
.dh-ib:hover { border-color: var(--dh-brand); color: var(--dh-brand); }
.dh-pbtn { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0 0.6875rem; block-size: 1.75rem; border-radius: 0.5rem; background: var(--ho-accent-line); color: var(--ho-surface) !important; font-weight: 600; font-size: var(--ho-text-xs); white-space: nowrap; }
.dh-pbtn:hover { filter: brightness(0.95); }
.dh-meta { display: block; font-size: var(--ho-text-xs); color: var(--dh-muted); max-inline-size: 8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-loader td { text-align: center; color: var(--dh-muted); font-size: var(--ho-text-xs); padding: 0.625rem; border-block-end: 0; }
.dh-spin { display: inline-block; inline-size: 0.75rem; block-size: 0.75rem; border: 2px solid var(--dh-line); border-block-start-color: var(--dh-brand); border-radius: 50%; margin-inline-end: 0.4375rem; vertical-align: -2px; animation: dh-spin 0.8s linear infinite; }
@keyframes dh-spin { to { transform: rotate(360deg); } }
.dh-empty { padding: 1.5rem 1rem; text-align: center; color: var(--dh-muted); font-size: 0.78125rem; }
.dh-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.75rem; font-size: var(--ho-text-xs); color: var(--dh-muted); border-block-start: 1px solid var(--dh-line-soft); }

/* ── activity feed ─────────────────────────────────────────────────── */
.dh-fh { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem 0.5rem; }
.dh-fh h3, .dh-sh h3 { font-size: 0.84375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.dh-link { font-size: var(--ho-text-xs); color: var(--ho-info-ink) !important; font-weight: 600; display: flex; align-items: center; gap: 0.1875rem; margin-inline-start: auto; white-space: nowrap; }
.dh-link:hover { text-decoration: underline !important; }
.dh-ff { display: flex; gap: 0.25rem; padding: 0 0.875rem 0.5rem; border-block-end: 1px solid var(--dh-line); flex-wrap: wrap; }
.dh-ff button { font-size: var(--ho-text-xs); border-radius: 999px; padding: 0.125rem 0.625rem; color: var(--dh-muted); font-weight: 600; border: 1px solid var(--dh-line); background: var(--dh-card); }
.dh-ff button.is-active { background: var(--dh-brand); border-color: var(--dh-brand); color: var(--ho-surface); }
.dh-tl { padding: 0.375rem 0.875rem 0; flex: 1 1 auto; min-block-size: 0; overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 1279.98px) { .dh-tl { max-block-size: 26rem; } }
.dh-ev { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.5625rem; padding: 0.375rem 0; position: relative; }
.dh-ev:not(:last-of-type)::after { content: ""; position: absolute; inset-inline-start: 0.8125rem; inset-block-start: 2.125rem; inset-block-end: -0.375rem; inline-size: 1.5px; background: var(--dh-line-soft); }
.dh-ev .dh-av { inline-size: 1.75rem; block-size: 1.75rem; }
.dh-ev-1 { display: flex; justify-content: space-between; gap: 0.375rem; font-size: 0.78125rem; }
.dh-ev-1 b { font-weight: 600; }
.dh-ev-1 time { color: var(--dh-muted); font-size: var(--ho-text-xs); white-space: nowrap; }
.dh-ev-2 { font-size: var(--ho-text-xs); color: var(--ho-ink); margin-block-start: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dh-ev-3 { display: flex; gap: 0.3125rem; margin-block-start: 0.1875rem; flex-wrap: wrap; }
a.dh-ev:hover .dh-ev-1 b { color: var(--ho-info-ink); text-decoration: underline; }
.dh-tag { font-size: var(--ho-text-xs); border-radius: 0.375rem; padding: 0 0.4375rem; font-weight: 600; white-space: nowrap; }
.dh-more { display: flex; justify-content: center; padding: 0.5rem 0 0.75rem; }
.dh-more button { display: flex; align-items: center; gap: 0.375rem; border: 1px solid var(--dh-line); border-radius: 0.5625rem; padding: 0.3125rem 0.875rem; font-size: var(--ho-text-xs); font-weight: 600; color: var(--ho-ink); background: var(--dh-card); box-shadow: var(--dh-shadow); }
.dh-more button:hover { border-color: var(--dh-brand); }

/* ── insight band ──────────────────────────────────────────────────── */
.dh-band { background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: var(--dh-radius); display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1.2fr; box-shadow: var(--dh-shadow); flex: none; }
@media (max-width: 1279.98px) { .dh-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .dh-band { grid-template-columns: minmax(0, 1fr); } }
.dh-band > section { padding: 0.6875rem 0.9375rem 0.625rem; border-inline-start: 1px solid var(--dh-line-soft); display: flex; flex-direction: column; min-inline-size: 0; }
.dh-band > section:first-child { border-inline-start: 0; }
.dh-sh { display: flex; align-items: center; gap: 0.4375rem; margin-block-end: 0.5625rem; }
.dh-sh .dh-tile { inline-size: 1.5rem; block-size: 1.5rem; border-radius: 0.4375rem; }
.dh-pill { font-size: var(--ho-text-xs); border-radius: 999px; padding: 0 0.5rem; background: var(--dh-line-soft); color: var(--dh-muted); font-weight: 600; line-height: 1.25rem; white-space: nowrap; }
.dh-note { font-size: var(--ho-text-xs); color: var(--dh-muted); margin-block-start: auto; padding-block-start: 0.375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dh-pace { display: flex; gap: 0.875rem; align-items: center; min-inline-size: 0; }
.dh-ring { flex: none; position: relative; inline-size: 5rem; block-size: 5rem; display: grid; place-items: center; }
.dh-ring svg { position: absolute; inset: 0; }
.dh-ring-t { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.dh-ring-t b { font-size: 1.125rem; font-weight: 700; }
.dh-ring-t small { font-size: var(--ho-text-xs); color: var(--dh-muted); }

/* HUB-KPI-1 (PO 2026-09-26): the old counter look on the pulse cards — a ring
   (count / target) with the % and what is left beside it — and the team board
   the cards open (each person's attempts / positives, attributed to the doer). */
.dh-kpis-wrap { position: relative; }
/* HUB-FOCUS-1: the viewer's own «ركّز على», one item at a time. */
.dh-focus-body { display: block; min-block-size: 2.75rem; }
.dh-focus-item { display: flex; flex-direction: column; gap: 0.125rem; }
.dh-focus-item b { font-size: var(--ho-text-sm); font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dh-focus-item small { font-size: var(--ho-text-xs); color: var(--dh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-focus-dots { display: inline-flex; gap: 0.1875rem; align-items: center; }
.dh-focus-dots i { inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: var(--dh-line); }
.dh-focus-dots i.is-on { background: var(--ho-accent-line); }
.dh-k-ring { display: flex; align-items: center; gap: 0.75rem; min-inline-size: 0; }
.dh-ring-sm { inline-size: 4.25rem; block-size: 4.25rem; }
.dh-ring-sm .dh-ring-t b { font-size: 1rem; }
.dh-k-side { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; min-inline-size: 0; }
.dh-k-pct { font-size: 1.375rem; font-weight: 800; line-height: 1.1; }
.dh-board-pop { position: absolute; inset-inline: 0; top: calc(100% + 0.375rem); z-index: 30; background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: 0.875rem; padding: 0.75rem; box-shadow: 0 12px 32px color-mix(in srgb, var(--ho-ink) 16%, transparent); max-block-size: 22rem; overflow-y: auto; }
.dh-board-hd { display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.625rem; font-size: var(--ho-text-sm); }
.dh-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.375rem; }
.dh-board-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.5rem; border: 1px solid var(--dh-line); border-radius: 0.625rem; background: transparent; color: var(--ho-ink); text-align: start; font-size: var(--ho-text-sm); cursor: pointer; }
.dh-board-row:hover, .dh-board-row:focus-visible { background: var(--ho-surface-inset); }
.dh-board-name { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
.dh-board-sub { display: flex; align-items: center; gap: 0.375rem; }
.dh-board-sub .dh-pbar { flex: 1 1 auto; }
.dh-board-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dh-board-n { display: inline-flex; align-items: center; gap: 0.1875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dh-board-n small { font-size: var(--ho-text-xs); color: var(--dh-muted); font-weight: 500; }
.dh-board-n.dh-ok { color: var(--ho-success-ink); }
.dh-board-idle { display: block; margin-block-start: 0.5rem; font-size: var(--ho-text-xs); }
.dh-ppl { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; max-block-size: 6rem; overflow-y: auto; scrollbar-width: none; }
.dh-pr { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr) 2.25rem; gap: 0.125rem 0.4375rem; align-items: center; font-size: var(--ho-text-xs); background: none; border: 0; text-align: start; padding: 0; color: var(--ho-ink); }
.dh-pr .dh-av { inline-size: 1.375rem; block-size: 1.375rem; }
.dh-pr .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.dh-pr:hover .nm { color: var(--ho-info-ink); text-decoration: underline; }
.dh-pr b { text-align: end; font-weight: 700; }
.dh-pr .dh-pbar { grid-column: 2; margin-block-start: -3px; }

.dh-fn { display: flex; flex-direction: column; gap: 0.3125rem; }
.dh-st { display: grid; grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr) 3.25rem 2.75rem; gap: 0.5rem; align-items: center; font-size: var(--ho-text-xs); white-space: nowrap; border-radius: 0.375rem; }
a.dh-st:hover { background: var(--dh-brand-soft); }
.dh-st > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.dh-st .tk { block-size: 0.875rem; background: var(--dh-line-soft); border-radius: 0.25rem; overflow: hidden; }
.dh-st .tk i { display: block; block-size: 100%; border-radius: 0.25rem; background: var(--ho-info-line); }
.dh-st .n { text-align: end; font-weight: 700; }
.dh-st .p { text-align: end; color: var(--dh-muted); }
.dh-st.is-rest { color: var(--dh-muted); }
.dh-st.is-rest .tk i { background: var(--ho-line); }

.dh-ag { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; align-items: end; block-size: 4.625rem; }
.dh-agc { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; block-size: 100%; justify-content: flex-end; }
.dh-agc .c { font-size: 0.8125rem; font-weight: 700; }
.dh-agc .bb { inline-size: 100%; max-inline-size: 2.125rem; min-block-size: 3px; border-radius: 5px 5px 2px 2px; background: var(--dh-brand-line); }
.dh-agc.is-over .bb { background: var(--ho-danger-line); }
.dh-agc.is-over .c { color: var(--ho-danger-ink); }
a.dh-agc:hover .c { text-decoration: underline; }
a.dh-agc:hover .bb { filter: brightness(0.92); }
.dh-agd { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; margin-block-start: 0.25rem; }
.dh-agd span { text-align: center; font-size: var(--ho-text-xs); color: var(--dh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-agd span.is-over { color: var(--ho-ink); font-weight: 700; }

.dh-chips { display: flex; gap: 0.3125rem; margin-block-start: 0.4375rem; overflow-x: auto; scrollbar-width: none; }
.dh-chip { font-size: var(--ho-text-xs); border-radius: 0.375rem; padding: 0.0625rem 0.4375rem; font-weight: 600; white-space: nowrap; background: var(--dh-line-soft); color: var(--ho-ink); }
.dh-chip b { font-weight: 700; }
a.dh-chip:hover { background: var(--dh-brand-soft); color: var(--dh-brand); }
.dh-cov { display: flex; align-items: center; gap: 0.625rem; margin-block-end: 0.5rem; }
.dh-cov .big { font-size: 1.375rem; font-weight: 700; color: var(--ho-success-ink); line-height: 1; }
.dh-cov .sb { flex: 1; min-inline-size: 0; }
.dh-cov-bar { display: flex; block-size: 0.5rem; border-radius: 9px; overflow: hidden; gap: 2px; background: var(--dh-line-soft); }
.dh-cov-bar i { display: block; block-size: 100%; background: var(--ho-success-line); }
.dh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--dh-line-soft); border-radius: 0.625rem; overflow: hidden; }
.dh-stats > * { padding: 0.375rem 0.5rem; border-inline-start: 1px solid var(--dh-line-soft); min-inline-size: 0; }
.dh-stats > *:first-child { border-inline-start: 0; }
a.dh-stat:hover { background: var(--dh-brand-soft); }
.dh-stats .c { font-size: 0.9375rem; font-weight: 700; }
.dh-stats .d { font-size: var(--ho-text-xs); color: var(--dh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Motion: the spinner and hover lifts respect the OS setting; a feed hovered
   or focused never moves under the reader (the P7 feed rule, kept). */
.dh-tl:hover *, .dh-tl:focus-within * { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
    .dh *, .dh *::before, .dh *::after { animation:none!important; transition:none!important; }
}

/* HUB-UNIFY-6 «الكل» — each hub's own measure inside one KPI card (never summed) */
.dh-byhub { display: grid; grid-template-columns: 1fr 1fr; gap: .125rem .75rem; margin-block: .25rem; }
.dh-byhub a { display: flex; justify-content: space-between; gap: .375rem; font-size: var(--ho-text-xs); color: var(--ho-ink-muted); text-decoration: none; border-radius: .25rem; padding-inline: .25rem; }
.dh-byhub a:hover, .dh-byhub a:focus-visible { background: var(--ho-surface-sunken); color: var(--ho-ink); }
.dh-byhub b { color: var(--ho-ink); font-variant-numeric: tabular-nums; }
/* four cards (no fifth lane, e.g. «الكل») share the row evenly — no empty slot */
@media (min-width: 1024px) { .dh-kpis:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* HUB-UNIFY-7 — the unified feed: its filters, and «on behalf of» beside the real actor */
.dh-feed-kinds { padding: 0.375rem 0.75rem 0; }
button.dh-chip { border: 0; cursor: pointer; }
button.dh-chip:hover, .dh-chip.is-active { background: var(--dh-brand-soft); color: var(--dh-brand); }
.dh-ev-1 > .dh-muted { flex: 1; min-inline-size: 0; font-size: var(--ho-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }