/* HIPO operating workspace — the shared Bento shell for role-based portals. */
.workspace-shell {
  background: var(--color-surface-container-high);
  display: grid;
  grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
  min-height: 100svh;
}

.error-page {
  align-items: center;
  background: var(--color-surface-container-high);
  display: grid;
  min-height: 100svh;
  padding: var(--space-6);
}

.error-page__panel {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-outline-variant);
  border-top: var(--border-width-strong) solid var(--color-primary);
  border-radius: var(--shape-small);
  box-shadow: var(--elevation-1);
  margin: 0 auto;
  max-width: var(--layout-content-note);
  padding: var(--space-7);
}

.error-page h1 { font: var(--type-headline-large); letter-spacing: var(--tracking-heading); margin: var(--space-3) 0; }
.error-page__body { color: var(--color-on-surface-variant); font: var(--type-body-large); margin: 0 0 var(--space-6); }
.error-page__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.error-page[hidden], .workspace-shell[hidden] { display: none; }

.workspace-sidebar {
  background: var(--color-surface);
  border-right: var(--border-width) solid var(--color-outline-variant);
  color: var(--color-on-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4);
}

.workspace-brand {
  color: var(--color-brand-strong);
  display: inline-flex;
  text-decoration: none;
}

.workspace-brand img { display: block; height: auto; max-width: min(10rem, 24vw); width: 100%; }

.workspace-sidebar__eyebrow {
  color: var(--color-brand-strong);
  font: var(--type-label-mono);
  letter-spacing: var(--tracking-label-wide);
  margin: 0;
}

.workspace-nav {
  display: grid;
  gap: var(--space-1);
}

.workspace-nav-link {
  align-items: center;
  border-radius: var(--shape-extra-small);
  color: var(--color-on-surface-variant);
  display: flex;
  gap: var(--space-3);
  font: var(--type-label-large);
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  transition: background-color var(--motion-short-2) var(--ease-standard), color var(--motion-short-2) var(--ease-standard);
}

.workspace-nav-link::before {
  background: var(--color-outline);
  border-radius: var(--shape-full);
  content: "";
  flex: 0 0 var(--space-2);
  height: var(--space-2);
  width: var(--space-2);
}

.workspace-nav-link:hover,
.workspace-nav-link.is-active {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.workspace-nav-link.is-active::before { background: var(--color-primary); }

.workspace-sidebar__footer {
  border-top: var(--border-width) solid var(--color-outline-variant);
  margin-top: auto;
  padding-top: var(--space-5);
}

.workspace-sidebar__footer p {
  color: var(--color-on-surface-variant);
  font: var(--type-body-medium);
  margin: 0;
}

.workspace-main {
  min-width: 0;
  padding: var(--space-6) clamp(var(--space-5), 4vw, var(--space-10));
}

.workspace-topbar {
  align-items: center;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-outline-variant);
  border-radius: var(--shape-small);
  box-shadow: var(--elevation-1);
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  margin: 0 auto var(--space-5);
  max-width: var(--layout-content-commerce);
  padding: var(--space-4) var(--space-5);
}

.workspace-topbar__copy { min-width: 0; }
.workspace-topbar__title { font: var(--type-headline-medium); letter-spacing: var(--tracking-heading); margin: var(--space-1) 0; }
.workspace-topbar__body { color: var(--color-on-surface-variant); font: var(--type-body-medium); margin: 0; max-width: var(--layout-content-reading); }
.workspace-topbar__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: end; }
.workspace-signal { color: var(--color-brand-strong); font: var(--type-label-mono); letter-spacing: var(--tracking-label-wide); margin: 0; }

.workspace-bento {
  align-items: start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0 auto;
  max-width: var(--layout-content-commerce);
}

.bento-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-outline-variant);
  border-radius: var(--shape-small);
  box-shadow: var(--elevation-0);
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  padding: var(--space-5);
  transition: border-color var(--motion-short-2) var(--ease-standard), box-shadow var(--motion-short-2) var(--ease-standard), transform var(--motion-short-2) var(--ease-standard);
}

.bento-card:hover { border-color: var(--color-outline); box-shadow: var(--elevation-1); transform: translateY(calc(var(--space-1) * -1)); }
.bento-card--signal { background: var(--color-primary-container); border-color: var(--color-primary); }
.bento-card--wide { grid-column: span 7; }
.bento-card--narrow { grid-column: span 5; }
.bento-card--full { grid-column: 1 / -1; }
.bento-card__eyebrow { color: var(--color-on-surface-variant); font: var(--type-label-mono); letter-spacing: var(--tracking-label-wide); margin: 0; }
.bento-card--signal .bento-card__eyebrow { color: var(--color-brand-strong); }
.bento-card__title { font: var(--type-title-large); letter-spacing: var(--tracking-heading); margin: var(--space-2) 0 var(--space-3); }
.bento-card__body { color: var(--color-on-surface-variant); font: var(--type-body-medium); margin: 0; max-width: var(--layout-content-reading); }
.bento-card__meta { color: var(--color-on-surface-variant); font: var(--type-label-mono); margin: auto 0 0; padding-top: var(--space-5); }
.bento-heading-row { align-items: center; display: flex; gap: var(--space-3); }
.bento-status-dot { background: var(--color-success); border-radius: var(--shape-full); box-shadow: 0 0 0 var(--space-1) var(--color-success-container); flex: 0 0 var(--space-3); height: var(--space-3); width: var(--space-3); }

@media (max-width: 52rem) {
  .workspace-shell { grid-template-columns: 1fr; }
  .workspace-sidebar { border-bottom: var(--border-width) solid var(--color-outline-variant); border-right: 0; gap: var(--space-4); padding: var(--space-4) var(--layout-page-inline); }
  .workspace-nav { display: flex; gap: var(--space-2); overflow-x: auto; }
  .workspace-nav-link { flex: 0 0 auto; }
  .workspace-sidebar__footer { display: none; }
  .workspace-topbar { align-items: start; flex-direction: column; }
  .workspace-topbar__actions { justify-content: start; }
  .bento-card--wide, .bento-card--narrow { grid-column: span 6; }
}

@media (max-width: 35rem) {
  .workspace-main { padding-inline: var(--space-3); }
  .workspace-topbar { padding: var(--space-4); }
  .workspace-topbar__actions { width: 100%; }
  .workspace-topbar__actions .button { flex: 1 1 auto; }
  .workspace-bento { grid-template-columns: 1fr; }
  .bento-card--wide, .bento-card--narrow, .bento-card--full { grid-column: 1; }
  .bento-card { padding: var(--space-4); }
}