/* ==========================================================================
   Dashboard — Monef composition mirrored for RTL.
   Layout responds to the space the shell leaves (sidebar expanded, collapsed
   or drawer) through container queries on .dash, not viewport media queries.
   Charts are laid out in timeline space (oldest first) and mirrored via --sx.
   ========================================================================== */

.dash {
  container: dash / inline-size;
  --sx: 1;
  --dash-gap: var(--sp-3);
  --dash-on-indigo: var(--tooltip-fg); /* near-white in both themes */
}
[dir="rtl"] .dash { --sx: -1; }

.dash-rise { animation: iv-rise var(--dur-4) var(--ease-out) backwards; animation-delay: calc(var(--rise, 0) * 45ms); }

/* Shared legend dot */
.dash-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--dot, var(--text-3)); }
.dash-dot--reveal { --dot: var(--chart-2); }
.dash-dot--change { --dot: var(--chart-1); }

/* ---------- Page head ---------- */
.dash-head .page-head__text { flex: 1 1 320px; }
.dash-head__sub { display: flex; align-items: flex-start; gap: var(--sp-2); }
.dash-head__sub .live-dot { flex: none; margin-top: 0.62em; }

.dash-actions { position: relative; }
.dash-pill { cursor: pointer; max-width: 100%; }
.dash-pill__range { color: var(--text-2); }
.dash-pill__sep { width: 1px; height: 18px; flex: none; background: var(--border-strong); }
.dash-pill__label { color: var(--text); max-width: 190px; }
.dash-pill__caret { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.dash-pill[aria-expanded="true"] { border-color: var(--border-strong); color: var(--text); }
.dash-pill[aria-expanded="true"] .dash-pill__caret { transform: rotate(180deg); }
.dash-pill--create .chip-icon { box-shadow: 0 6px 16px -8px var(--accent-glow); }
.dash-menu .dropdown__menu { min-width: 250px; }
.dash-menu__scroll { max-height: min(320px, 46vh); overflow-y: auto; overscroll-behavior: contain; }
.dash-menu__pin { margin-inline-start: auto; color: var(--text-3); }
.dash-menu .dropdown__item.is-active .dash-menu__pin { margin-inline-start: var(--sp-2); }

/* ---------- Grids ---------- */
.dash-monef, .dash-lower { display: grid; gap: var(--dash-gap); grid-template-columns: minmax(0, 1fr); }
.dash-side, .dash-main, .dash-duo, .dash-lower__side, .dash-lower__main { display: contents; }

.dash-monef { grid-template-areas: "kpis" "hero" "chart" "health" "env" "rot"; }
.dash-kpis { grid-area: kpis; }
.dash-hero { grid-area: hero; }
.dash-chart { grid-area: chart; }
.dash-health { grid-area: health; }
.dash-env { grid-area: env; }
.dash-rot { grid-area: rot; }

.dash-lower { grid-template-areas: "servers" "feed" "vault" "res"; }
.dash-servers { grid-area: servers; }
.dash-feed { grid-area: feed; }
.dash-vault { grid-area: vault; }
.dash-res-card { grid-area: res; }

@container dash (min-width: 680px) {
  .dash-monef { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "kpis kpis" "hero health" "chart chart" "env rot"; }
  .dash-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "servers servers" "vault res" "feed feed"; }
}

@container dash (min-width: 1000px) {
  .dash-monef, .dash-lower { grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr); grid-template-areas: "side main"; }
  .dash-side, .dash-main, .dash-lower__side, .dash-lower__main { display: flex; flex-direction: column; gap: var(--dash-gap); min-width: 0; }
  .dash-side, .dash-lower__side { grid-area: side; }
  .dash-main, .dash-lower__main { grid-area: main; }
  .dash-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dash-gap); }
  .dash-duo > * { grid-area: auto; }
  .dash-side > *, .dash-chart, .dash-lower__side > :last-child, .dash-lower__main > :last-child { flex: 1 1 auto; }
}

/* ---------- KPI cards ---------- */
.dash-kpis { container: kpis / inline-size; }
.dash-kpis__grid { display: grid; gap: var(--dash-gap); grid-template-columns: minmax(0, 1fr); }
@container kpis (min-width: 440px) {
  .dash-kpis__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi:last-child { grid-column: 1 / -1; }
}
@container kpis (min-width: 620px) {
  .dash-kpis__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-kpi:last-child { grid-column: auto; }
}
.dash-kpi { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); color: inherit; }
.dash-kpi__head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.dash-kpi__title { font-size: var(--fs-base); font-weight: var(--fw-regular); color: var(--text-title); line-height: var(--lh-snug); }
.dash-kpi .kpi__row { flex-wrap: nowrap; }
.dash-kpi .kpi__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-kpi--alert .kpi__value { color: var(--tone-amber-fg); }

/* ---------- Hero: quick search (Monef "AI assistant") ---------- */
.dash-hero { display: flex; flex-direction: column; min-height: 330px; }
.dash-hero .card__head { margin-bottom: 0; }
.dash-hero__help { background: var(--hero-chip); color: var(--hero-fg-2); box-shadow: inset 0 0 0 1px var(--hero-chip-border); }
.dash-hero__help:hover { background: var(--hero-chip-hover); color: var(--hero-fg); }
.dash-hero__title {
  margin: var(--sp-7) auto var(--sp-6);
  max-width: 13em;
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--hero-fg);
  text-wrap: balance;
}
.dash-hero__chips { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.dash-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  padding-inline: var(--sp-3) 5px;
  border-radius: var(--r-full);
  background: var(--hero-chip);
  border: 1px solid var(--hero-chip-border);
  color: var(--hero-fg);
  font-size: var(--fs-xs);
  white-space: nowrap;
  transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.dash-chip:hover { background: var(--hero-chip-hover); border-color: var(--hero-input-border); transform: translateY(-1px); }
.dash-chip__count {
  min-width: 24px; height: 24px;
  padding-inline: 7px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--tone-indigo-bg);
  color: var(--hero-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xs);
}

/* Glass ask pill: surface, gradient ring and focus glow come from .hero-field (components.css) */
.dash-ask {
  margin-top: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-2);
  height: 58px;
  padding-inline: var(--sp-5) 6px;
  border-radius: var(--r-full);
}
.dash-ask__input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; padding: 0;
  color: var(--hero-fg);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.dash-hero .hero-field .dash-ask__input::placeholder { color: var(--hero-fg-2); }
.dash-ask__input:focus-visible { box-shadow: none; }
.dash-ask__input::-webkit-search-cancel-button { display: none; }
.dash-ask__send {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bar-on);
  color: var(--dash-on-indigo);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dash-on-indigo) 35%, transparent), 0 10px 26px -10px var(--indigo);
  transition: transform var(--dur-2) var(--ease-spring), filter var(--dur-2);
}
.dash-ask__send:hover { filter: brightness(1.12); transform: scale(1.05); }
.dash-ask__send:active { transform: scale(0.94); }
.dash-ask__send:focus-visible { border-radius: 50%; }

/* ---------- Infrastructure health (Monef "Exchange") ---------- */
.dash-health { display: flex; flex-direction: column; }
.dash-uptime {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-2), color-mix(in srgb, var(--card-2) 40%, var(--card)));
  border: 1px solid var(--border);
  box-shadow: var(--glass-highlight);
  overflow: hidden;
}
.dash-uptime__top { display: flex; align-items: center; gap: var(--sp-2); }
.dash-uptime__top .delta { height: 22px; padding-inline: 7px; }
.dash-uptime__value { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-uptime__value small { font-size: var(--fs-md); color: var(--text-2); margin-inline-start: 2px; font-weight: var(--fw-regular); }
.dash-uptime__label { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.dash-spark { justify-self: end; width: 100%; max-width: 170px; height: 48px; overflow: visible; }
[dir="rtl"] .dash-spark { transform: scaleX(-1); }
.dash-spark__line {
  fill: none; stroke: var(--chart-1); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dash-draw 1200ms var(--ease-out) 300ms forwards;
}
.dash-spark__stop { stop-color: var(--chart-1); stop-opacity: 0.22; }
.dash-spark__stop--end { stop-opacity: 0; }
.dash-spark__area { animation: iv-fade var(--dur-4) 700ms backwards; }
.dash-spark__halo { fill: var(--chart-1); opacity: 0.18; animation: iv-pulse 2.4s ease-in-out infinite; }
.dash-spark__dot { fill: var(--text); stroke: var(--chart-1); stroke-width: 1.5; }

.dash-fx { margin-block: auto; padding-block: var(--sp-3) var(--sp-2); } /* centred in any spare height */
.dash-fx__row { display: flex; align-items: center; gap: var(--sp-3); min-height: 70px; min-width: 0; }
.dash-fx__disc {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.dash-fx__disc--green { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.dash-fx__disc--indigo { background: var(--tone-indigo-bg); color: var(--tone-indigo-fg); }
.dash-fx__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.dash-fx__name { font-size: var(--fs-md); color: var(--text-2); white-space: nowrap; }
.dash-fx__meta .delta { height: 22px; padding-inline: 7px; }
.dash-fx__value {
  margin-inline-start: auto;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-fx__value small { margin-inline-start: 4px; font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--text-3); }
.dash-fx__divider { display: flex; align-items: center; justify-content: center; height: 1px; background: var(--divider); }
.dash-fx__swap {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border-strong);
  color: var(--text-3);
}

.dash-status { padding-top: var(--sp-3); }
.dash-status__bar { display: flex; gap: 4px; height: 10px; }
.dash-status__seg {
  flex: var(--grow, 1) 1 0;
  min-width: 8px;
  border-radius: var(--r-full);
  background: var(--tone);
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) 200ms both;
}
.dash-status__seg--online { --tone: var(--tone-green); }
.dash-status__seg--maintenance { --tone: var(--tone-amber); }
.dash-status__seg--offline { --tone: var(--tone-red); }
.dash-status__seg--unknown { --tone: var(--tone-neutral); }
.dash-status__legend { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-2); }
.dash-status__item { display: inline-flex; align-items: center; gap: 6px; }
.dash-status__item b { color: var(--text); font-weight: var(--fw-semibold); }
.dash-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.dash-health__cta { margin-top: var(--sp-5); }
.dash-health__foot { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); }
.dash-health__foot b { color: var(--text); font-weight: var(--fw-medium); }

/* ---------- Access activity chart (Monef "Sales impact") ---------- */
.dash-chart { display: flex; flex-direction: column; }
.dash-chart__head { flex-wrap: wrap; }
.dash-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); margin-inline-start: auto; font-size: var(--fs-sm); color: var(--text-2); }
.dash-legend__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

.dash-chart__summary { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.dash-chart__kpi { justify-content: flex-start; }
.dash-chart__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.dash-chart__side-value { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1.2; color: var(--chart-1); }
.dash-chart__side-label { font-size: var(--fs-xs); color: var(--text-3); }

.dash-chart__body {
  --plot-h: 220px;
  flex: 1;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: minmax(var(--plot-h), 1fr) auto;
  column-gap: var(--sp-3);
  padding-top: var(--sp-7);
}
.dash-chart__axis { position: relative; }
.dash-chart__tick {
  position: absolute;
  inset-inline-end: 0;
  top: calc(var(--y) * 1%);
  transform: translateY(-50%);
  font-size: var(--fs-2xs);
  line-height: 1;
  color: var(--chart-label);
  white-space: nowrap;
}

.dash-chart__plot {
  position: relative;
  container-type: size;
  touch-action: pan-y;
  cursor: crosshair;
  border-radius: var(--r-xs);
  -webkit-user-select: none;
  user-select: none;
}
.dash-chart__plot:focus-visible { box-shadow: 0 0 0 6px var(--card), 0 0 0 8px color-mix(in srgb, var(--indigo) 60%, transparent); }
.dash-chart__svg, .dash-chart__hatch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] :is(.dash-chart__svg, .dash-chart__hatch) { transform: scaleX(-1); }
.dash-chart__hatch {
  background:
    repeating-linear-gradient(-45deg, var(--hatch) 0 1.5px, transparent 1.5px 7px),
    linear-gradient(to bottom, color-mix(in srgb, var(--chart-2) 20%, transparent), transparent 90%);
  -webkit-mask: var(--area) 0 0 / 100% 100% no-repeat;
  mask: var(--area) 0 0 / 100% 100% no-repeat;
  animation: iv-fade 900ms var(--ease-out) 450ms backwards;
}
.dash-chart__grid { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.dash-chart__line {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash-draw 1500ms var(--ease-out) 120ms forwards;
}
.dash-chart__line--reveal { stroke: var(--chart-2); }
.dash-chart__line--change { stroke: var(--chart-1); animation-delay: 280ms; }
@keyframes dash-draw { to { stroke-dashoffset: 0; } }

/* Overlays: anchored at the timeline origin and moved with transforms (cq units of the plot). */
.dash-chart__cross, .dash-chart__dot, .dash-chart__tip {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  pointer-events: none;
  transition: transform var(--dur-3) var(--ease-out);
}
.dash-chart__cross {
  top: -22px; bottom: 0;
  width: 1px;
  margin-inline-start: -0.5px;
  background: linear-gradient(to bottom, var(--text), color-mix(in srgb, var(--text) 35%, transparent));
  transform: translateX(calc(var(--p) * 1cqw * var(--sx)));
  animation: iv-fade var(--dur-4) 900ms backwards;
}
.dash-chart__cross::before {
  content: "";
  position: absolute;
  top: -3px;
  inset-inline-start: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent);
}
.dash-chart__dot {
  width: 12px; height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: var(--dot);
  border: 2.5px solid var(--card);
  box-shadow: 0 0 0 1px var(--dot), 0 0 14px var(--dot);
  animation: iv-fade var(--dur-4) 1000ms backwards;
}
.dash-chart__dot--reveal { --dot: var(--chart-2); transform: translate(calc(var(--p) * 1cqw * var(--sx)), calc(var(--yr) * 1cqh)); }
.dash-chart__dot--change { --dot: var(--chart-1); transform: translate(calc(var(--p) * 1cqw * var(--sx)), calc(var(--yc) * 1cqh)); }

.dash-chart__tip {
  top: 6%;
  z-index: 2;
  min-width: 158px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--popover-bg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: var(--popover-backdrop);
  -webkit-backdrop-filter: var(--popover-backdrop);
  transform: translateX(calc(var(--p) * 1cqw * var(--sx) + 16px * var(--sx)));
  animation: iv-fade var(--dur-4) 1000ms backwards;
}
.dash-chart__tip.is-flipped { transform: translateX(calc((var(--p) * 1cqw - 100% - 16px) * var(--sx))); }
.dash-chart__tip-title { padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--divider); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.dash-chart__tip-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.dash-chart__tip-row + .dash-chart__tip-row { margin-top: 6px; }
.dash-chart__tip-row b { min-width: 2ch; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; }

.dash-chart__empty {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  max-width: calc(100% - 16px);
  height: 36px;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-4);
  border-radius: var(--r-full);
  background: var(--card-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.dash-chart__x { grid-column: 2; position: relative; height: 34px; }
.dash-chart__label {
  position: absolute;
  top: 12px;
  inset-inline-start: calc(var(--p) * 1%);
  width: 0;
  display: flex;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--chart-label);
  white-space: nowrap;
  transition: color var(--dur-2);
}
.dash-chart__label.is-active { color: var(--text); font-weight: var(--fw-medium); }
.dash-chart__label.is-sm { display: none; }

@container dash (max-width: 560px) {
  .dash-chart__body { --plot-h: 196px; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--sp-2); }
  .dash-chart__label.is-lg { display: none; }
  .dash-chart__label.is-sm { display: flex; }
  .dash-chart__tip { min-width: 0; padding: var(--sp-2) var(--sp-3); }
  .dash-chart__tip-row span { display: none; }
  .dash-chart__side { align-items: flex-start; text-align: start; }
}

/* ---------- Environment distribution (Monef "Expense breakdown") ---------- */
.dash-env { display: flex; flex-direction: column; }
.dash-env__cols { flex: 1; display: flex; align-items: stretch; margin-top: var(--sp-2); }
.dash-env__col { flex: var(--grow) 1 0; min-width: 76px; display: flex; flex-direction: column; justify-content: flex-end; }
.dash-env__pin { position: relative; flex: 1; min-height: 118px; }
.dash-env__pin::before {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 14px;
  width: 1px;
  height: calc(var(--stem) * 1% - 6px);
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--text) 55%, transparent));
  transform-origin: bottom;
  animation: dash-rise-y var(--dur-4) var(--ease-out) 300ms both;
}
.dash-env__pin::after {
  content: "";
  position: absolute;
  bottom: calc(var(--stem) * 1% - 6px);
  inset-inline-start: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text);
  animation: iv-fade var(--dur-4) 600ms backwards;
}
.dash-env__value {
  position: absolute;
  bottom: calc(var(--stem) * 1% - 22px);
  inset-inline-start: 26px;
  min-width: 44px;
  height: 34px;
  padding-inline: var(--sp-3);
  display: inline-grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--card-2);
  border: 1px solid var(--border);
  box-shadow: var(--glass-highlight);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  animation: iv-pop var(--dur-4) var(--ease-out) 500ms backwards;
}
.dash-env__band {
  margin-top: var(--sp-3);
  padding: 7px 3px;
  background-image: repeating-linear-gradient(-45deg, var(--border-strong) 0 2px, transparent 2px 8px);
}
.dash-env__col:first-child .dash-env__band { border-start-start-radius: var(--r-xs); border-end-start-radius: var(--r-xs); padding-inline-start: 6px; }
.dash-env__col:last-child .dash-env__band { border-start-end-radius: var(--r-xs); border-end-end-radius: var(--r-xs); padding-inline-end: 6px; }
.dash-env__seg {
  display: block;
  height: 42px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--card-3), var(--card-2));
  border: 1px solid var(--border-strong);
  box-shadow: var(--glass-highlight);
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) 200ms both;
}
.dash-env__col--production .dash-env__seg {
  background: var(--bar-on);
  border-color: color-mix(in srgb, var(--indigo) 60%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dash-on-indigo) 28%, transparent), 0 12px 26px -14px var(--indigo);
}
.dash-env__col--development .dash-env__seg { background: var(--sunken); }
.dash-env__label { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-3); padding-inline-start: 6px; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.dash-env__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-plum); box-shadow: 0 0 0 3px var(--tone-plum-bg); animation: iv-pulse 2.4s ease-in-out infinite; }
@keyframes dash-rise-y { from { transform: scaleY(0); } }

/* ---------- Rotation calendar (Monef "Monthly income") ---------- */
.dash-rot { display: flex; flex-direction: column; }
.dash-rot__row { justify-content: flex-start; }
.dash-bars {
  --bars-h: 128px;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.dash-bars__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.dash-bars__hit { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: var(--bars-h); border-radius: var(--r-md); }
.dash-bars__hit:focus-visible { box-shadow: none; }
.dash-bars__bar {
  position: relative;
  width: min(34px, 100%);
  height: calc(var(--h) * 1%);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--card-3), var(--bar-off));
  border: 1px solid var(--border);
  box-shadow: var(--glass-highlight);
  overflow: hidden;
  transform-origin: bottom;
  animation: dash-rise-y var(--dur-4) var(--ease-out) both;
  animation-delay: calc(var(--rise, 7) * 45ms + 120ms);
  transition: transform var(--dur-3) var(--ease-spring);
}
.dash-bars__bar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--bar-on);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.dash-bars__item.is-active .dash-bars__bar { border-color: transparent; box-shadow: 0 14px 30px -12px var(--indigo); }
.dash-bars__item.is-active .dash-bars__bar::after { opacity: 1; }
.dash-bars__hit:hover .dash-bars__bar, .dash-bars__hit:focus-visible .dash-bars__bar { transform: scaleX(1.08); }
.dash-bars__hit:focus-visible .dash-bars__bar { outline: 2px solid var(--indigo); outline-offset: 3px; }
.dash-bars__label { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; transition: color var(--dur-2); }
.dash-bars__item.is-active .dash-bars__label { color: var(--text); font-weight: var(--fw-medium); }

.dash-bars__tip {
  position: absolute;
  z-index: 2;
  top: max(0px, calc((100 - var(--h)) * var(--bars-h) / 100 - 4px));
  inset-inline-start: calc(50% + 32px);
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--popover-bg);
  -webkit-backdrop-filter: var(--popover-backdrop);
  backdrop-filter: var(--popover-backdrop);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.dash-bars__tip::before {
  content: "";
  position: absolute;
  top: 14px;
  inset-inline-start: -13px;
  border: 6px solid transparent;
  border-inline-end-color: var(--indigo);
}
.dash-bars__tip.is-flipped { inset-inline-start: auto; inset-inline-end: calc(50% + 32px); }
.dash-bars__tip.is-flipped::before { inset-inline-start: auto; inset-inline-end: -13px; border-inline-end-color: transparent; border-inline-start-color: var(--indigo); }
.dash-bars__item.is-active .dash-bars__tip { opacity: 1; transform: none; }
.dash-bars__tip-value { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.dash-bars__tip-title { padding-top: 6px; border-top: 1px solid var(--divider); font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- Critical & production servers ---------- */
.dash-servers { display: flex; flex-direction: column; }
.dash-srv { container: srv / inline-size; display: flex; flex-direction: column; }
.dash-srv li + li { border-top: 1px solid var(--divider); }
.dash-srv__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(96px, 0.8fr) auto minmax(90px, 1fr) minmax(90px, 1fr);
  grid-template-areas: "main state env cpu mem";
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-height: 66px;
  padding: var(--sp-2) var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
  border-radius: var(--r-md);
  color: inherit;
  transition: background var(--dur-1);
}
.dash-srv__row:hover { background: var(--row-hover); }
.dash-srv__row:hover .dash-srv__name { color: var(--accent-text); }
.dash-srv__main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-srv__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--fw-medium); color: var(--text); transition: color var(--dur-1); }
.dash-srv__flame { color: var(--tone-amber-fg); }
.dash-srv__host { font-size: var(--fs-xs); color: var(--text-3); text-align: start; }
.dash-srv__state { grid-area: state; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-srv__status { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.dash-srv__seen { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.dash-srv__env { grid-area: env; }
.dash-srv__meter { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.2em; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }
.dash-srv__meter--cpu { grid-area: cpu; }
.dash-srv__meter--mem { grid-area: mem; }
.dash-srv__meter .meter__bar { display: block; }
.dash-srv__meter-label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em; }
.dash-srv__meter-value { color: var(--text); text-align: end; font-variant-numeric: tabular-nums; }

@container srv (max-width: 600px) {
  .dash-srv__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "main env" "state state" "cpu mem";
    padding-block: var(--sp-3);
  }
  .dash-srv__env { justify-self: end; }
  .dash-srv__state { flex-direction: row; align-items: center; gap: var(--sp-2); }
  .dash-srv__seen::before { content: "·"; margin-inline-end: var(--sp-2); }
}

/* ---------- Activity feed ---------- */
.dash-feed { display: flex; flex-direction: column; }
.dash-feed .timeline { flex: 1; }

/* ---------- Credential health ring ---------- */
.dash-vault__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-5); }
.dash-vault__ring { position: relative; width: 152px; height: 152px; flex: none; }
.dash-vault__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dash-vault__track { fill: none; stroke: var(--chip); stroke-width: 11; }
.dash-vault__arc {
  fill: none;
  stroke: var(--tone);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: var(--dash) 100;
  stroke-dashoffset: var(--offset);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tone) 45%, transparent));
  animation: dash-arc 1100ms var(--ease-out) 300ms both;
}
.dash-vault__arc--green { --tone: var(--tone-green); }
.dash-vault__arc--amber { --tone: var(--tone-amber); }
.dash-vault__arc--red { --tone: var(--tone-red); }
@keyframes dash-arc { from { stroke-dasharray: 0 100; } }
.dash-vault__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.25; }
.dash-vault__center b { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.dash-vault__center span { font-size: var(--fs-xs); color: var(--text-3); }
.dash-vault__legend { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-vault__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 46px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--card-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: border-color var(--dur-2), color var(--dur-2);
}
.dash-vault__item:hover { border-color: var(--border-strong); color: var(--text); }
.dash-vault__item b { margin-inline-start: auto; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.dash-vault__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--tone); flex: none; }

/* ---------- Project resource distribution ---------- */
.dash-res-card { display: flex; flex-direction: column; }
.dash-res__legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-4); font-size: var(--fs-xs); color: var(--text-2); }
.dash-res__legend li { display: inline-flex; align-items: center; gap: 6px; }
.dash-res__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--seg); }
.dash-res { display: flex; flex-direction: column; gap: var(--sp-4); }
.dash-res__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name total" "track track" "meta meta"; gap: 6px var(--sp-3); }
.dash-res__name { grid-area: name; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-weight: var(--fw-medium); color: var(--text); transition: color var(--dur-1); }
.dash-res__name:hover { color: var(--accent-text); }
.dash-res__code { font-size: var(--fs-2xs); color: var(--text-3); padding: 1px 6px; border-radius: 6px; background: var(--chip); }
.dash-res__pin { color: var(--tone-amber-fg); }
.dash-res__total { grid-area: total; font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.dash-res__total small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-3); }
.dash-res__track { grid-area: track; height: 10px; border-radius: var(--r-full); background: var(--chip); overflow: hidden; }
.dash-res__bar {
  display: flex; gap: 2px;
  height: 100%;
  width: calc(var(--w) * 1%);
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) 250ms both;
}
.dash-res__seg { flex: var(--grow) 1 0; min-width: 4px; border-radius: var(--r-full); background: var(--seg); }
.dash-res__seg--servers { --seg: var(--chart-2); }
.dash-res__seg--services { --seg: var(--chart-1); }
.dash-res__seg--credentials { --seg: var(--chart-3); }
.dash-res__meta { grid-area: meta; font-size: var(--fs-xs); color: var(--text-3); }
.dash-res__more { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- Shared with me: a shelf of the newest shares (dashboard/shared.html) ---------- */
.dash-shared { container: shared / inline-size; display: flex; flex-direction: column; gap: var(--sp-4); }
.dash-shared::before { /* a faint indigo wash behind the heading: the one "for you" block of the page */
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 120px;
  border-radius: inherit;
  background: radial-gradient(60% 120% at 100% 0, color-mix(in srgb, var(--indigo) 10%, transparent), transparent 70%);
  pointer-events: none;
}
[dir="ltr"] .dash-shared::before { background-position: 0 0; transform: scaleX(-1); }
.dash-shared__head { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.dash-shared__chip { box-shadow: 0 8px 20px -10px var(--indigo); }
.dash-shared__heading { flex: 1; min-width: 0; line-height: var(--lh-snug); }
.dash-shared__heading .card__subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin-top: 2px; }
.dash-shared__fresh { color: var(--accent-text); font-weight: var(--fw-medium); }
.dash-shared.is-read .dash-shared__fresh, .dash-shared.is-read .dash-shared__dot { display: none; }
.dash-shared__nav { display: flex; gap: 4px; flex: none; }
.dash-shared__nav .icon-btn:disabled { opacity: 0.35; cursor: default; }
.dash-shared__all {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  min-height: 36px; padding-inline: var(--sp-3) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
.dash-shared__all:hover { color: var(--text); border-color: var(--border-strong); background: var(--hover); }
.dash-shared__all .icon { flex: none; transition: transform var(--dur-2) var(--ease-out); }
.dash-shared__all:hover .icon { transform: translateX(calc(3px * var(--sx))); }
.dash-shared__count {
  display: grid; place-items: center;
  min-width: 22px; height: 22px; padding-inline: 6px;
  border-radius: var(--r-full);
  background: var(--chip);
  color: var(--text);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

/* The rail: one row of snap-aligned cards; prev/next appear (pointer devices) when it overflows. */
.dash-shared__rail {
  --fade-dir: to right;
  --fade-s: 0px;
  --fade-e: 0px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(272px, calc((100% - 3 * var(--sp-3)) / 4), 380px);
  gap: var(--sp-3);
  margin: -12px -6px -14px; /* room for the «جدید» badges, focus rings and the hover shadow inside the scroller */
  padding: 12px 6px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(var(--fade-dir), transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
  mask-image: linear-gradient(var(--fade-dir), transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
}
[dir="rtl"] .dash-shared__rail { --fade-dir: to left; }
.dash-shared__rail::-webkit-scrollbar { display: none; }
.dash-shared__rail:not(.at-start) { --fade-s: 40px; }
.dash-shared__rail:not(.at-end) { --fade-e: 40px; }

.dash-share {
  container: share / inline-size;
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card-2);
  scroll-snap-align: start;
  transition: border-color var(--dur-2), box-shadow var(--dur-3), transform var(--dur-3) var(--ease-out);
  animation: iv-rise var(--dur-4) var(--ease-out) backwards;
  animation-delay: calc(90ms + var(--i, 0) * 55ms);
}
.dash-share:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.dash-share.is-new {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--card-2)), var(--card-2) 55%);
}
.dash-shared.is-read .dash-share.is-new { border-color: var(--border); background: var(--card-2); }
.dash-shared.is-read .dash-share__new { display: none; }

.dash-share__head { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.dash-share__head > .avatar, .dash-share__head > .chip-icon { margin-top: 1px; }
.dash-share__text {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}
.dash-share__text b { color: var(--text); font-weight: var(--fw-medium); }
.dash-share__item { display: inline-flex; max-width: 100%; white-space: nowrap; color: var(--text-title); font-weight: var(--fw-semibold); }
.dash-share__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; transition: color var(--dur-1); }
.dash-share__title:hover { color: var(--accent-text); }
/* «جدید»: a small pill straddling the card's top edge, so it never takes room from the sentence. */
.dash-share__new {
  position: absolute;
  top: -10px; inset-inline-end: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding-inline: 7px 8px;
  border-radius: var(--r-full);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  box-shadow: 0 6px 14px -8px var(--accent-glow);
}
.dash-share__new::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: iv-pulse 2.4s ease-in-out infinite;
}

.dash-share__meta {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  margin-top: calc(-1 * var(--sp-2));
  padding-inline-start: calc(30px + var(--sp-3)); /* under the sentence, past the avatar */
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}
.dash-share__meta time { flex: none; }
.dash-share__env { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--tone-plum-fg); }

/* Address chip: kind icon + user@host:port (or the site URL), copied as plain text. */
.dash-share__addr {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-width: 0; min-height: 38px;
  padding-inline: 6px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--sunken);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: start;
  cursor: copy;
  transition: border-color var(--dur-2), background var(--dur-2);
}
button.dash-share__addr:hover { border-color: var(--border-strong); background: var(--card); }
.dash-share__addr > .icon { flex: none; color: var(--text-3); }
.dash-share__addr.is-copied { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dash-share__addr.is-copied > .icon { color: var(--accent-text); }
.dash-share__addr.is-static { cursor: default; color: var(--text-2); border-style: dashed; background: transparent; }
.dash-share__kind {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  background: var(--chip);
  color: var(--text-2);
}
.is-production .dash-share__kind { background: var(--tone-plum-bg); color: var(--tone-plum-fg); }
.dash-share__addr-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-share__addr-text.mono { text-align: left; font-size: var(--fs-xs); }

.dash-share__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; margin-top: auto; }
.dash-share__foot > .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash-share__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.dash-share__act { --ib: 32px; }

@container share (max-width: 290px) {
  .dash-share__env-label { display: none; }
  .dash-share__meta { padding-inline-start: 0; margin-top: calc(-1 * var(--sp-1)); }
}
@container shared (max-width: 560px) {
  .dash-shared__head { align-items: flex-start; }
  .dash-shared__nav { display: none !important; } /* a swipe away on phones */
  .dash-shared__rail { grid-auto-columns: min(86%, 320px); }
  .dash-shared__all-label { display: none; }
  .dash-shared__all { padding-inline: var(--sp-2); }
}
@media (hover: none) {
  .dash-shared__nav { display: none !important; }
  .dash-share:hover { transform: none; box-shadow: none; }
}
@media (max-width: 767px) {
  .dash-share__act { --ib: 40px; }
  .dash-share .qv-copy { --btn-h: 40px; }
}

/* ---------- Share notices (bell dropdown + /notifications/, templates/core/notifications/list.html) ----------
   The rest of .notif-* lives in platform.css; this adds the author's avatar with the notice icon on its corner. */
.notif-item__who { position: relative; flex: none; display: grid; }
.notif-item__glyph {
  position: absolute;
  inset-block-end: -3px; inset-inline-end: -4px;
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--chip);
  box-shadow: 0 0 0 2px var(--panel);
}
.notif-page__card .notif-item__glyph { box-shadow: 0 0 0 2px var(--card); }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .dash-actions .dropdown { position: static; flex: 1 1 auto; }
  .dash-actions .dash-pill { width: 100%; }
  .dash-actions .dropdown__menu { inset-inline: 0; min-width: 0; }
  .dash-pill__range, .dash-pill__sep { display: none; }
  .dash-pill__caret { margin-inline-start: auto; }
}
@container dash (max-width: 420px) {
  .dash-hero__title { font-size: var(--fs-xl); margin-block: var(--sp-5) var(--sp-5); }
  .dash-fx__value { font-size: var(--fs-2xl); }
  .dash-env__col { min-width: 64px; }
  .dash-env__value { inset-inline-start: 20px; min-width: 36px; padding-inline: var(--sp-2); }
  .dash-bars { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-chart__line, .dash-spark__line { stroke-dasharray: none; }
}