/* MIDE OS · Portal Cliente · MIDE WhatsApp. Layout of the view only: components come from
   ui/components.css and every value from ui/tokens.css. */
@layer views {
  .dash .ui-card-body { display: grid; gap: var(--mide-space-4); }
  .dash-launch { display: grid; gap: var(--mide-space-4); }
  .dash-summary { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-md); line-height: var(--mide-leading); }
  .dash-list { display: grid; margin: 0; padding: 0; list-style: none; }
  .dash-list > li + li { border-top: 1px solid var(--mide-line-2); }
  .dash-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mide-space-3); padding: var(--mide-space-3) 0; }
  .dash-row-text { display: grid; gap: 2px; min-width: 0; }
  .dash-row-text strong { color: var(--mide-ink); font-size: var(--mide-text-md); font-weight: var(--mide-weight-semibold); }
  .dash-row-text small { color: var(--mide-muted); font-size: var(--mide-text-xs); line-height: 1.4; }
  .dash-step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mide-accent-soft); color: var(--mide-accent); font: var(--mide-weight-bold) var(--mide-text-sm)/1 var(--mide-font); }
  .dash-time { color: var(--mide-muted); font-size: var(--mide-text-xs); white-space: nowrap; }
  /* A step the role cannot read: muted, with a padlock instead of a status chip. */
  /* Locked steps read as secondary with real colours, not opacity (opacity failed WCAG contrast). */
  .dash-row.is-locked .dash-row-text strong { color: var(--mide-ink-2); }
  .dash-row.is-locked .dash-row-text small { color: var(--mide-muted); }
  .dash-step-lock { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mide-neutral-bg); color: var(--mide-neutral); }
  .dash-step-lock .ui-icon { width: 14px; height: 14px; }
  /* Phones keep the status (chip, time or padlock) at the right of each row: one line per step,
     as the connections. Only below 360 px the chip and time drop under the text. */
  @media (max-width: 520px) {
    .dash-row { gap: var(--mide-space-2); }
    .dash-row > .dash-time { grid-column: 2; justify-self: start; }
  }
  @media (max-width: 359px) {
    .dash-row:not(.is-locked) { grid-template-columns: auto minmax(0, 1fr); }
    .dash-row:not(.is-locked) > .ui-chip { grid-column: 2; justify-self: start; }
  }
}