/* Local visual interaction pass: shared desktop context and keyboard affordances. */
:root {
  --focus-ring: #4f7397;
  --nav-active-line: #e7a06d;
  --surface-hover: #f7fafc;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-180%);
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff;
  color: #294967;
  box-shadow: 0 4px 18px rgba(27, 48, 73, .2);
  font-size: 12px;
  transition: transform 130ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Keep the current page context available while long tables and forms scroll. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(35, 50, 71, .02);
}

/* Make the active destination legible without relying on background contrast alone. */
.sidebar .nav-item {
  position: relative;
}

.sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nav-active-line);
}

/* A consistent keyboard ring is easier to see on the pale work surface. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #4f7397;
  outline-offset: 3px;
}

/* Preserve the row context when a keyboard user reaches an action inside a table. */
tbody tr:focus-within,
.crm-table tr:focus-within td {
  background: var(--surface-hover);
}

/* Reserve scrollbar space so filters and action rows do not jump when results change. */
.table-scroll,
.crm-table-wrap,
.entry-table {
  scrollbar-gutter: stable;
}

.crm-table-wrap[role="region"] {
  outline: none;
}

.crm-table-wrap[role="region"]:focus-visible {
  outline: 3px solid #4f7397;
  outline-offset: -3px;
}

.crm-customer-identity {
  min-width: 0;
  max-width: 100%;
}

#table-wrap .crm-customer-identity .customer-link {
  flex: 1 1 48px;
  min-width: 48px;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* At the smallest supported desktop width, let the queue context wrap below filters. */
@media (max-width: 1200px) {
  .wb-summary {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .wb-summary-context {
    grid-column: 1 / -1;
    text-align: left;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar {
    transition: none;
  }

  .skip-link {
    transition: none;
  }
}

/* Keep secondary copy readable on the white desktop surfaces. */
.helper,
.design-note,
.crm-resultbar,
.crm-bottom,
.crm-table th,
.site-footer,
.top-note {
  color: #64778a;
}

.wb-table small {
  color: #64778a;
}

/* At compact desktop widths the title can wrap taller than the original tab offset.
   Keep one sticky navigation row so the order view tabs never sit behind the heading. */
@media (max-width: 900px) {
  #order-workspace .compact-heading {
    position: relative;
    top: auto;
    z-index: auto;
  }
  #order-workspace .compact-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(36, 58, 82, .08);
  }
}

/* P1-3 (com-p1b): the queue context never forces one line. Long role names wrap
   inside their own column instead of squeezing the filters or overflowing.
   :root raises specificity because workbench.css arrives later in the hosted
   module bundle and would otherwise restore white-space:nowrap. */
:root .wb-summary {
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, max-content);
}

:root .wb-summary-context {
  min-width: 0;
  max-width: 320px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

:root .wb-summary-context b {
  overflow-wrap: anywhere;
}

@media (max-width: 1200px) {
  :root .wb-summary {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  :root .wb-summary-context {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 640px) {
  :root .wb-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
  }
}