/* Douceur Hub components, copied from the Claude Design system bundle.css. */
/* Douceur Hub components. Arabic first: every rule uses logical properties so
   dir="rtl" and dir="ltr" both work. Values come from tokens.css (--name). */
.dh-root { direction: rtl; font-family: var(--font-ui); font-size: 14px; line-height: 22px; color: var(--ink-body); background: var(--bg); }
.dh-root *, .dh-root *::before, .dh-root *::after { box-sizing: border-box; }
.dh-num { font-variant-numeric: tabular-nums; }
.dh-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dh-icon--sm { width: 16px; height: 16px; }
.dh-flip { transform: scaleX(-1); }
[dir="ltr"] .dh-flip { transform: none; }
:where(.dh-root) :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button */
.dh-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding-inline: 18px; border-radius: var(--radius-pill); border: 1px solid transparent; font: 500 14px/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s; }
.dh-btn--sm { height: 32px; padding-inline: 12px; font-size: 13px; }
.dh-btn--primary { background: var(--primary); color: var(--on-primary); }
.dh-btn--primary:hover { filter: brightness(1.15); }
.dh-btn--accent { background: var(--accent); color: var(--on-accent); }
.dh-btn--accent:hover { filter: brightness(1.05); }
.dh-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.dh-btn--secondary:hover { background: var(--surface-sunk); }
.dh-btn--ghost { background: transparent; color: var(--ink); }
.dh-btn--ghost:hover { background: var(--surface-sunk); }
.dh-btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.dh-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Status pill */
.dh-pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding-inline: 10px; border-radius: var(--radius-pill); font: 500 12px/1 var(--font-ui); white-space: nowrap; }
.dh-pill .dh-icon { width: 14px; height: 14px; stroke-width: 2; }
.dh-pill--ok { background: var(--ok-bg); color: var(--ok); }
.dh-pill--warn { background: var(--warn-bg); color: var(--warn); }
.dh-pill--danger { background: var(--danger-bg); color: var(--danger); }
.dh-pill--info { background: var(--info-bg); color: var(--info); }
.dh-pill--neutral { background: var(--surface-sunk); color: var(--ink-muted); }

/* KPI card */
.dh-kpi { display: flex; flex-direction: column; gap: var(--space-3); padding: 20px var(--space-6) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; }
.dh-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dh-kpi__label { font: 500 13px/20px var(--font-ui); color: var(--ink-muted); }
.dh-kpi__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-brand); color: var(--ink); }
.dh-kpi__value { display: flex; align-items: baseline; gap: 6px; font: 600 30px/38px var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.dh-kpi__unit { font: 500 14px/1 var(--font-ui); color: var(--ink-muted); }
.dh-kpi__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font: 400 12px/18px var(--font-ui); color: var(--ink-muted); }
.dh-delta { display: inline-flex; align-items: center; gap: 2px; padding-inline: 6px; height: 22px; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.dh-delta .dh-icon { width: 12px; height: 12px; stroke-width: 2.25; }
.dh-delta--good { background: var(--ok-bg); color: var(--ok); }
.dh-delta--bad { background: var(--danger-bg); color: var(--danger); }
.dh-delta--flat { background: var(--surface-sunk); color: var(--ink-muted); }
.dh-spark { display: block; width: 100%; height: 48px; direction: ltr; }
.dh-spark__area { fill: var(--chart-area); }
.dh-spark__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dh-spark__dot { fill: var(--chart-2); stroke: var(--surface); stroke-width: 2; }
.dh-kpi__foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--line); font: 500 13px/20px var(--font-ui); }
.dh-kpi__foot a { color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.dh-kpi__foot a:hover { text-decoration: underline; }

/* Sidebar */
.dh-side { display: flex; flex-direction: column; gap: 2px; width: var(--sidebar-w); padding: var(--space-4) var(--space-3); background: var(--surface); border-inline-start: 1px solid var(--line); min-height: 100%; }
.dh-side--rail { width: var(--sidebar-rail); align-items: center; }
.dh-side__section { padding: var(--space-4) 12px var(--space-1); font: 500 12px/18px var(--font-ui); color: var(--ink-muted); }
.dh-side--rail .dh-side__section { display: none; }
.dh-nav { position: relative; display: flex; align-items: center; gap: 12px; height: var(--control-h); padding-inline: 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 500 14px/1 var(--font-ui); }
.dh-nav:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dh-nav--active { background: var(--surface-brand); font-weight: 600; }
.dh-nav--active::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: -12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
[dir="rtl"] .dh-nav--active::before { border-radius: 3px 0 0 3px; }
.dh-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-side--rail .dh-nav { width: 44px; padding: 0; justify-content: center; }
.dh-side--rail .dh-nav__label, .dh-side--rail .dh-nav__badge { display: none; }
.dh-nav__badge { min-width: 22px; height: 20px; padding-inline: 6px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font: 600 11px/20px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }

/* Top bar */
.dh-top { display: flex; align-items: center; gap: var(--space-4); height: var(--topbar-h); padding-inline: var(--space-4); background: var(--topbar); color: var(--on-topbar); }
.dh-top :focus-visible { outline-color: var(--accent); }
.dh-top__brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.dh-top__brand img { height: 30px; width: auto; }
.dh-top__name { font: 600 22px/1 var(--font-display); letter-spacing: 0; }
.dh-top__search { flex: 1; max-width: 520px; margin-inline: auto; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding-inline: 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-topbar) 10%, transparent); color: color-mix(in srgb, var(--on-topbar) 80%, transparent); font: 400 13px/1 var(--font-ui); }
.dh-top__search input { all: unset; flex: 1; color: var(--on-topbar); }
.dh-top__search input::placeholder { color: color-mix(in srgb, var(--on-topbar) 75%, transparent); }
.dh-top__kbd { font: 500 11px/1 var(--font-ui); padding: 4px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--on-topbar) 35%, transparent); direction: ltr; }
.dh-top__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.dh-top__iconbtn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: none; border: 0; color: inherit; cursor: pointer; }
.dh-top__iconbtn:hover { background: color-mix(in srgb, var(--on-topbar) 12%, transparent); }
.dh-top__count { position: absolute; inset-block-start: 2px; inset-inline-end: 0; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: 700 10px/18px var(--font-ui); text-align: center; }
.dh-top__user { display: flex; align-items: center; gap: var(--space-2); font: 500 13px/1 var(--font-ui); }
.dh-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-brand); color: var(--ink); font: 600 13px/1 var(--font-ui); }

/* Page header */
.dh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); flex-wrap: wrap; }
.dh-head__title { margin: 0; font: 600 30px/38px var(--font-display); color: var(--ink); text-wrap: balance; }
.dh-head__sub { margin: 4px 0 0; font: 400 14px/22px var(--font-ui); color: var(--ink-muted); }
.dh-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dh-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dh-period { display: inline-flex; align-items: center; gap: 10px; height: var(--control-h); padding-inline: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 500 13px/1 var(--font-ui); }
.dh-period__chip { padding: 4px 8px; border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--ink-muted); font-size: 12px; }
.dh-head__updated { font: 400 12px/18px var(--font-ui); color: var(--ink-muted); }

/* Band */
.dh-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; padding: 28px 32px; border-radius: var(--radius-band); }
.dh-band--navy { background: var(--brand-navy); color: var(--brand-cream); }
.dh-band--cream { background: var(--surface-brand); color: var(--ink); }
.dh-band__pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; pointer-events: none; }
.dh-band--cream .dh-band__pattern { opacity: .18; }
.dh-band__body { position: relative; max-width: 620px; }
.dh-band__title { margin: 0; font: 600 34px/42px var(--font-display); text-wrap: balance; }
.dh-band__text { margin: 6px 0 0; font: 400 15px/24px var(--font-ui); opacity: .9; }
.dh-band__actions { position: relative; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dh-band--navy .dh-btn--secondary { background: transparent; color: var(--brand-cream); border-color: color-mix(in srgb, var(--brand-cream) 55%, transparent); }

/* Data table */
.dh-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.dh-table-scroll { overflow-x: auto; }
.dh-table__cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 20px; }
.dh-table__title { margin: 0; font: 600 18px/26px var(--font-ui); color: var(--ink); }
.dh-table { width: 100%; border-collapse: collapse; font: 400 14px/22px var(--font-ui); }
.dh-table th { position: sticky; top: 0; background: var(--surface-sunk); color: var(--ink-muted); font: 500 13px/20px var(--font-ui); text-align: start; padding: 10px var(--space-3); white-space: nowrap; border-block: 1px solid var(--line); }
.dh-table td { padding: 0 var(--space-3); height: 52px; border-bottom: 1px solid var(--line); color: var(--ink-body); vertical-align: middle; }
.dh-table tr:last-child td { border-bottom: 0; }
.dh-table tbody tr:hover td { background: var(--surface-sunk); }
.dh-table th:first-child, .dh-table td:first-child { padding-inline-start: 20px; }
.dh-table th:last-child, .dh-table td:last-child { padding-inline-end: 20px; }
.dh-table .dh-num-cell { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dh-table__strong { color: var(--ink); font-weight: 600; }
.dh-table__sub { display: block; font-size: 12px; line-height: 18px; color: var(--ink-muted); }

/* Empty state */
.dh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); }
.dh-empty__mark { width: 40px; height: auto; opacity: .7; margin-bottom: var(--space-2); }
.dh-empty__title { margin: 0; font: 600 26px/34px var(--font-display); color: var(--ink); }
.dh-empty__text { margin: 0 0 var(--space-3); max-width: 420px; color: var(--ink-muted); }

/* Field */
.dh-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dh-field__label { font: 500 13px/20px var(--font-ui); color: var(--ink); }
.dh-field__help { font: 400 12px/18px var(--font-ui); color: var(--ink-muted); }
.dh-field__error { display: flex; align-items: center; gap: 4px; font: 500 12px/18px var(--font-ui); color: var(--danger); }
.dh-input { width: 100%; height: var(--control-h); padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-input); background: var(--surface); color: var(--ink-body); font: 400 14px/22px var(--font-ui); }
.dh-input::placeholder { color: var(--ink-muted); }
.dh-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.dh-field--error .dh-input { border-color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .dh-root * { transition: none !important; animation: none !important; } }