/* Repair operations shell */
.shell {
  background: #f4f4f4;
  --app-side-space: clamp(32px, 4.5vw, 92px);
  --app-content-max: 1580px;
  --inventory-side-space: clamp(16px, 1.8vw, 36px);
}

/* ==========================================================================
   Metrics — personal Commission Center
   ========================================================================== */
.cp #metrics-page .commission-center {
  display: grid;
  min-width: 0;
  width: 100%;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-1);
  border-top: var(--space-1) solid var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent-soft) 35%, var(--surface));
}

.cp #metrics-page .commission-center > *,
.cp #metrics-page #commission-content,
.cp #metrics-page .commission-tabs,
.cp #metrics-page .commission-tabs button {
  min-width: 0;
}

.cp #metrics-page .commission-center.hidden {
  display: none;
}

.cp #metrics-page .commission-center-head,
.cp #metrics-page .commission-scope-row,
.cp #metrics-page .commission-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cp #metrics-page .commission-center-head h2,
.cp #metrics-page .commission-card-head h3 {
  margin: 0;
  color: var(--content-1);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #metrics-page .commission-center-head h2 {
  margin-top: var(--space-1);
  font-size: var(--text-2xl);
}

.cp #metrics-page .commission-center-head p {
  margin: var(--space-1) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #metrics-page .commission-eyebrow,
.cp #metrics-page .commission-card-kicker {
  display: block;
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: normal;
  text-transform: uppercase;
}

.cp #metrics-page .commission-tabs {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cp #metrics-page .commission-tabs button {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.cp #metrics-page .commission-tabs button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #metrics-page .commission-tabs button.active {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #metrics-page .commission-scope-row {
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--cp-accent) 18%, var(--border-1));
}

.cp #metrics-page #commission-privacy-note {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: right;
}

.cp #metrics-page .commission-cycle-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp #metrics-page .commission-cycle-strip > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--border-1);
}

.cp #metrics-page .commission-cycle-strip > div:last-child {
  border-right: 0;
}

.cp #metrics-page .commission-cycle-strip span,
.cp #metrics-page .commission-amount-card span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #metrics-page .commission-cycle-strip strong {
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .commission-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(calc(var(--space-10) * 7), 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.cp #metrics-page .commission-primary-grid.chart-only {
  grid-template-columns: minmax(0, 1fr);
}

.cp #metrics-page :where(.commission-chart-card, .commission-progress-card, .commission-team-panel, .commission-details) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page :where(.commission-chart-card, .commission-progress-card, .commission-team-panel) {
  padding: var(--space-4);
}

.cp #metrics-page .commission-card-head h3 {
  margin-top: var(--space-1);
  font-size: var(--text-base);
}

.cp #metrics-page .commission-card-head > strong,
.cp #metrics-page .commission-card-head > span:not(.commission-progress-state) {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #metrics-page .commission-category-chart {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.cp #metrics-page .commission-chart-row {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 3), calc(var(--space-10) * 4)) minmax(0, 1fr) var(--space-8);
  align-items: center;
  gap: var(--space-3);
}

.cp #metrics-page .commission-team-chart-row {
  grid-template-columns: minmax(calc(var(--space-10) * 3), calc(var(--space-10) * 4)) minmax(0, 1fr) var(--space-8) auto;
  padding: var(--space-1);
  border-radius: var(--radius-md);
}

.cp #metrics-page .commission-team-chart-row.is-expanded {
  background: var(--cp-accent-soft);
}

.cp #metrics-page .commission-chart-label {
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .commission-chart-track {
  height: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.cp #metrics-page .commission-chart-track span {
  display: block;
  width: 0;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--commission-chart-color, var(--cp-accent));
  transition: width var(--dur-slow) var(--ease-out);
}

.cp #metrics-page .commission-team-total-track {
  background: transparent;
}

.cp #metrics-page .commission-team-total-bar {
  display: flex;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  transition: width var(--dur-slow) var(--ease-out);
}

.cp #metrics-page .commission-team-total-bar > .commission-team-segment {
  flex: 0 0 auto;
  min-width: 0;
  border-radius: 0;
  background: var(--commission-chart-color, var(--cp-accent));
}

.cp #metrics-page .commission-team-total-bar > .commission-team-segment:first-child {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.cp #metrics-page .commission-team-total-bar > .commission-team-segment:last-child {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.cp #metrics-page .commission-team-total-bar > .commission-team-segment:only-child {
  border-radius: var(--radius-pill);
}

.cp #metrics-page .commission-member-toggle {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--cp-accent);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.cp #metrics-page .commission-member-toggle:hover,
.cp #metrics-page .commission-member-toggle[aria-expanded="true"] {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #metrics-page .commission-member-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.cp #metrics-page .commission-chart-row strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  text-align: right;
}

.cp #metrics-page .commission-chart-tone-1 { --commission-chart-color: var(--cp-accent); }
.cp #metrics-page .commission-chart-tone-2 { --commission-chart-color: var(--cp-category-regular); }
.cp #metrics-page .commission-chart-tone-3 { --commission-chart-color: var(--cp-success); }
.cp #metrics-page .commission-chart-tone-4 { --commission-chart-color: var(--cp-warning); }
.cp #metrics-page .commission-chart-tone-5 { --commission-chart-color: var(--content-3); }

.cp #metrics-page .commission-chart-axis {
  display: flex;
  justify-content: space-between;
  margin: var(--space-2) var(--space-10) 0 calc(var(--space-10) * 4 + var(--space-3));
  border-top: 1px solid var(--border-1);
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #metrics-page .commission-chart-axis span {
  transform: translateY(var(--space-1));
}

.cp #metrics-page .commission-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #metrics-page .commission-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cp #metrics-page .commission-chart-legend i {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-circle);
  background: var(--commission-chart-color, var(--cp-accent));
}

.cp #metrics-page .commission-progress-state {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

.cp #metrics-page .commission-progress-state.commission-progress-at-risk {
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 72%, var(--content-1));
}

.cp #metrics-page .commission-progress-state.commission-progress-urgent {
  background: color-mix(in srgb, var(--cp-danger) 12%, var(--surface));
  color: var(--cp-danger);
}

.cp #metrics-page .commission-progress-state.commission-progress-goal-met {
  background: color-mix(in srgb, var(--cp-success) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 72%, var(--content-1));
}

.cp #metrics-page .commission-progress-number {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.cp #metrics-page .commission-progress-number strong {
  color: var(--content-1);
  font-size: calc(var(--text-2xl) + var(--space-2));
  font-weight: var(--weight-black);
  line-height: 1;
}

.cp #metrics-page .commission-progress-number span,
.cp #metrics-page .commission-progress-card p {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #metrics-page .commission-progress-track {
  height: var(--space-3);
  margin-top: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.cp #metrics-page .commission-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--cp-accent);
  transition: width var(--dur-slow) var(--ease-out);
}

.cp #metrics-page .commission-progress-card p {
  margin: var(--space-3) 0 0;
  line-height: var(--leading-body);
}

.cp #metrics-page .commission-amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 4), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cp #metrics-page .commission-amount-card {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cp #metrics-page .commission-amount-at-risk {
  border-left-color: var(--cp-warning);
}

.cp #metrics-page .commission-amount-card strong {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.cp #metrics-page .commission-amount-card small {
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #metrics-page .commission-team-panel,
.cp #metrics-page .commission-details {
  margin-top: var(--space-4);
}

.cp #metrics-page .commission-table-wrap {
  margin-top: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: auto;
}

.cp #metrics-page .commission-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--content-1);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.cp #metrics-page .commission-table :where(th, td) {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-1);
  text-align: left;
}

.cp #metrics-page .commission-table th {
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #metrics-page .commission-table tbody tr:last-child td {
  border-bottom: 0;
}

.cp #metrics-page .commission-table tbody tr:hover {
  background: var(--surface-hover);
}

.cp #metrics-page .commission-team-name,
.cp #metrics-page .commission-table-total,
.cp #metrics-page .commission-table-money {
  color: var(--content-1);
  font-weight: var(--weight-black);
}

.cp #metrics-page .commission-details {
  padding: 0;
  overflow: hidden;
}

.cp #metrics-page .commission-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc(var(--space-10) + var(--space-2));
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  cursor: pointer;
  list-style: none;
}

.cp #metrics-page .commission-details summary::-webkit-details-marker {
  display: none;
}

.cp #metrics-page .commission-details summary::after {
  content: "+";
  color: var(--cp-accent);
  font-size: var(--text-xl);
}

.cp #metrics-page .commission-details[open] summary::after {
  content: "−";
}

.cp #metrics-page .commission-details summary small {
  margin-left: auto;
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #metrics-page .commission-details .commission-table-wrap {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
}

.cp #metrics-page .commission-empty {
  padding: var(--space-5);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 900px) {
  .cp #metrics-page .commission-primary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #metrics-page .commission-cycle-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #metrics-page .commission-cycle-strip > div:nth-child(2) {
    border-right: 0;
  }

  .cp #metrics-page .commission-cycle-strip > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border-1);
  }
}

@media (max-width: 620px) {
  .cp #metrics-page .commission-center {
    padding: var(--space-3);
  }

  .cp #metrics-page .commission-center-head,
  .cp #metrics-page .commission-scope-row {
    align-items: stretch;
    flex-direction: column;
  }

  .cp #metrics-page .commission-tabs {
    width: 100%;
  }

  .cp #metrics-page .commission-tabs button {
    width: auto;
    flex: 1;
  }

  .cp #metrics-page #commission-privacy-note {
    text-align: left;
  }

  .cp #metrics-page .commission-cycle-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #metrics-page .commission-cycle-strip > div,
  .cp #metrics-page .commission-cycle-strip > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }

  .cp #metrics-page .commission-cycle-strip > div:last-child {
    border-bottom: 0;
  }

  .cp #metrics-page .commission-chart-row {
    grid-template-columns: minmax(calc(var(--space-10) * 2), calc(var(--space-10) * 3)) minmax(0, 1fr) var(--space-6);
    gap: var(--space-2);
  }

  .cp #metrics-page .commission-chart-axis {
    margin-left: calc(var(--space-10) * 3 + var(--space-2));
    margin-right: var(--space-8);
  }

  .cp #metrics-page .commission-amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .cp #metrics-page .commission-amount-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Metrics productivity analytics — admin-only chart-first reports
   ========================================================================== */
.cp #metrics-page .metric-time-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cp #metrics-page .metric-time-report-head > div:first-child {
  min-width: min(100%, calc(var(--space-10) * 6));
  display: grid;
  gap: var(--space-1);
}

.cp #metrics-page .metric-time-selector {
  max-width: 100%;
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  overflow-x: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cp #metrics-page .metric-time-selector button {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard);
}

.cp #metrics-page .metric-time-selector button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #metrics-page .metric-time-selector button.active {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #metrics-page .metric-time-card small {
  display: block;
  margin-top: var(--space-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #metrics-page .metric-time-card-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 3), 1fr));
}

.cp #metrics-page .metric-time-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.cp #metrics-page .metric-time-chart-panel {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cp #metrics-page .metric-time-chart-grouped {
  margin: 0 var(--space-4) var(--space-4);
}

.cp #metrics-page .metric-time-chart-panel h4,
.cp #metrics-page .metric-time-chart-cluster h5 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #metrics-page .metric-time-chart {
  min-height: calc(var(--space-10) * 3);
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cp #metrics-page .metric-time-chart-axis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
  padding-left: calc(var(--space-10) * 4 + var(--space-4));
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #metrics-page .metric-time-chart-axis span {
  text-align: center;
}

.cp #metrics-page .metric-time-chart-axis span:first-child {
  text-align: left;
}

.cp #metrics-page .metric-time-chart-axis span:last-child {
  text-align: right;
}

.cp #metrics-page .metric-time-chart-cluster {
  display: grid;
  gap: var(--space-2);
}

.cp #metrics-page .metric-time-chart-cluster + .metric-time-chart-cluster {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.cp #metrics-page .metric-time-chart-cluster h5 {
  color: var(--content-2);
}

.cp #metrics-page .metric-time-chart-row {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 3), calc(var(--space-10) * 4)) minmax(calc(var(--space-10) * 3), 1fr) minmax(calc(var(--space-10) * 2), auto);
  align-items: center;
  gap: var(--space-3);
}

.cp #metrics-page .metric-time-chart-label {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.cp #metrics-page .metric-time-chart-label strong,
.cp #metrics-page .metric-time-chart-value {
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .metric-time-chart-label small {
  overflow: hidden;
  color: var(--content-3);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .metric-time-chart-value {
  text-align: right;
}

.cp #metrics-page .metric-time-chart-plot {
  position: relative;
  height: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.cp #metrics-page .metric-time-chart-guides,
.cp #metrics-page .metric-time-chart-bar {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
}

.cp #metrics-page .metric-time-chart-guides {
  width: 100%;
  background: linear-gradient(
    to right,
    transparent 24%, var(--border-1) 25%, transparent 26%,
    transparent 49%, var(--border-1) 50%, transparent 51%,
    transparent 74%, var(--border-1) 75%, transparent 76%
  );
}

.cp #metrics-page .metric-time-chart-bar {
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-accent-hover) 35%, transparent);
  transition: width var(--dur-base) var(--ease-out);
}

.cp #metrics-page .metric-time-details {
  margin: 0 var(--space-4) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.cp #metrics-page .metric-time-details summary {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-standard);
}

.cp #metrics-page .metric-time-details summary:hover {
  background: var(--surface-hover);
}

.cp #metrics-page .metric-time-details[open] summary {
  border-bottom: 1px solid var(--border-1);
}

.cp #metrics-page .metric-time-details .metric-time-table-wrap {
  margin: var(--space-4);
  box-shadow: none;
}

.cp #metrics-page .metric-time-details .metric-time-grid {
  padding: var(--space-4);
}

.cp #metrics-page .metric-time-details .metric-time-grid .metric-time-table-wrap {
  margin: 0;
}

@media (max-width: 1050px) {
  .cp #metrics-page .metric-time-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cp #metrics-page .metric-time-report-head {
    align-items: stretch;
  }

  .cp #metrics-page .metric-time-selector {
    width: 100%;
  }

  .cp #metrics-page .metric-time-chart-grid,
  .cp #metrics-page .metric-time-chart-panel {
    padding: var(--space-3);
  }

  .cp #metrics-page .metric-time-chart-grouped,
  .cp #metrics-page .metric-time-details {
    margin-inline: var(--space-3);
  }

  .cp #metrics-page .metric-time-chart-axis {
    display: none;
  }

  .cp #metrics-page .metric-time-chart-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .cp #metrics-page .metric-time-chart-label {
    grid-column: 1;
  }

  .cp #metrics-page .metric-time-chart-value {
    grid-column: 2;
    grid-row: 1;
  }

  .cp #metrics-page .metric-time-chart-plot {
    grid-column: 1 / -1;
  }

  .cp #metrics-page .metric-time-details .metric-time-table-wrap {
    margin: var(--space-3);
  }
}

/* Repair intake — fixed-price diagnostic level guidance. */
.repair-service-request {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.repair-service-request legend {
  margin-bottom: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.repair-service-request-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.repair-service-request-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  cursor: pointer;
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.repair-service-request-option:hover,
.repair-service-request-option:focus-within {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

.repair-service-request-option.is-selected {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
}

.repair-service-request-option input {
  width: auto;
  min-height: 0;
  margin: var(--space-1) 0 0;
  accent-color: var(--cp-accent);
}

.repair-service-request-option > span {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.repair-service-request-option strong {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.repair-service-request-option small {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.repair-diagnostic-guide {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-accent-soft) 42%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.repair-diagnostic-guide.hidden,
#repair-diagnostic-guide-host.hidden {
  display: none;
}

.repair-diagnostic-guide[data-missing-required] {
  border-color: var(--cp-danger);
}

.repair-diagnostic-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.repair-diagnostic-guide-head > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.repair-diagnostic-guide-head > div > span {
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

.repair-diagnostic-guide-head strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.repair-diagnostic-guide-head p,
.repair-diagnostic-turnaround-note {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.repair-diagnostic-guide-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: var(--cp-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  white-space: nowrap;
}

.repair-diagnostic-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-10) * 6)), 1fr));
  gap: var(--space-3);
}

.repair-fast-panel .repair-diagnostic-card,
.repair-diagnostic-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.repair-diagnostic-card:hover,
.repair-diagnostic-card:focus-visible {
  border-color: var(--cp-accent);
  outline: none;
  box-shadow: var(--focus-ring);
  transform: translateY(calc(var(--space-1) * -1));
}

.repair-diagnostic-card.is-selected {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  box-shadow: var(--focus-ring);
}

.repair-diagnostic-card[data-diagnostic-depth="2"] {
  background: color-mix(in srgb, var(--cp-accent-soft) 22%, var(--surface));
}

.repair-diagnostic-card[data-diagnostic-depth="3"] {
  background: color-mix(in srgb, var(--cp-accent-soft) 42%, var(--surface));
}

.repair-diagnostic-card[data-diagnostic-depth].is-selected {
  background: var(--cp-accent-soft);
}

.repair-diagnostic-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.repair-diagnostic-card-level,
.repair-diagnostic-card-price {
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

.repair-diagnostic-card-depth {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.repair-diagnostic-card-depth-bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--space-4), 1fr));
  gap: var(--space-1);
  width: min(42%, calc(var(--space-10) * 3));
}

.repair-diagnostic-card-depth-bars > span {
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--border-1);
}

.repair-diagnostic-card-depth-bars > span.is-filled {
  background: var(--cp-accent);
}

.repair-diagnostic-card-level {
  color: var(--cp-accent-hover);
  text-transform: uppercase;
}

.repair-diagnostic-card-price {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  white-space: nowrap;
}

.repair-diagnostic-card > strong {
  color: var(--content-1);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}

.repair-diagnostic-card-section {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.repair-diagnostic-card-section small {
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

.repair-diagnostic-card-section b {
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.repair-diagnostic-card-section > span {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.repair-diagnostic-card-next {
  align-self: end;
}

.repair-diagnostic-progression {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.repair-diagnostic-progression strong {
  color: var(--content-1);
}

.repair-diagnostic-progression-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.repair-diagnostic-progression-steps > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.repair-diagnostic-progression-steps b {
  display: grid;
  flex: 0 0 var(--space-6);
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.repair-diagnostic-progression > small {
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.repair-diagnostic-payment-policy {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 58%, var(--border-1));
  border-left-width: var(--space-1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
}

.repair-diagnostic-payment-policy-icon {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-circle);
  background: var(--cp-warning);
  color: var(--cp-warning-content);
  font-weight: var(--weight-black);
}

.repair-diagnostic-payment-policy > span:last-child {
  display: grid;
  gap: var(--space-1);
}

.repair-diagnostic-payment-policy strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.repair-diagnostic-payment-policy small {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.repair-diagnostic-admin-override {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.repair-diagnostic-selection-status {
  margin: 0;
  color: var(--cp-accent-hover);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.repair-diagnostic-turnaround-note strong {
  color: var(--content-1);
}

@media (max-width: 640px) {
  .repair-service-request-options,
  .repair-diagnostic-progression {
    grid-template-columns: 1fr;
  }

  .repair-diagnostic-progression-steps {
    grid-template-columns: 1fr;
  }

  .repair-diagnostic-guide {
    padding: var(--space-3);
  }

  .repair-diagnostic-progression strong {
    white-space: normal;
  }

  .repair-diagnostic-admin-override {
    align-items: stretch;
    flex-direction: column;
  }
}

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

  .repair-diagnostic-card:hover,
  .repair-diagnostic-card:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Dashboard and My Work dark theme
   --------------------------------------------------------------------------
   The preference intentionally scopes semantic token overrides to the converted
   workspace pages. Other sections remain light until their own migration.
   ========================================================================== */
html[data-dashboard-theme="dark"] :is(#home-page, #my-work-page) {
  --surface: var(--cp-dashboard-dark-surface);
  --surface-2: var(--cp-dashboard-dark-surface-2);
  --surface-3: var(--cp-dashboard-dark-surface-3);
  --surface-hover: var(--cp-dashboard-dark-surface-hover);
  --content-1: var(--cp-dashboard-dark-content-1);
  --content-2: var(--cp-dashboard-dark-content-2);
  --content-3: var(--cp-dashboard-dark-content-3);
  --border-1: var(--cp-dashboard-dark-border-1);
  --border-2: var(--cp-dashboard-dark-border-2);
  --cp-accent-soft: var(--cp-dashboard-dark-accent-soft);
  --surface-1: var(--cp-dashboard-dark-surface);
  --surface-subtle: var(--cp-dashboard-dark-surface-2);
  --border-subtle: var(--cp-dashboard-dark-border-1);
  --border-strong: var(--cp-dashboard-dark-border-2);
  --content-strong: var(--cp-dashboard-dark-content-1);
  --content-muted: var(--cp-dashboard-dark-content-2);
  --content-subtle: var(--cp-dashboard-dark-content-3);
  --line-2: var(--cp-dashboard-dark-border-1);
}

html[data-dashboard-theme="dark"] #receive-page {
  --surface: var(--cp-dashboard-dark-surface);
  --surface-2: var(--cp-dashboard-dark-surface-2);
  --surface-3: var(--cp-dashboard-dark-surface-3);
  --surface-hover: var(--cp-dashboard-dark-surface-hover);
  --content-1: var(--cp-dashboard-dark-content-1);
  --content-2: var(--cp-dashboard-dark-content-2);
  --content-3: var(--cp-dashboard-dark-content-3);
  --border-1: var(--cp-dashboard-dark-border-1);
  --border-2: var(--cp-dashboard-dark-border-2);
  --cp-accent-soft: var(--cp-dashboard-dark-accent-soft);
}

body.dashboard-dark-active,
body.dashboard-dark-active .shell {
  background: var(--cp-dashboard-dark-canvas);
}

body.dashboard-dark-active #home-page .dashboard-title-bar,
body.dashboard-dark-active #home-page .dashboard-title-bar h2,
body.dashboard-dark-active #my-work-page .dashboard-title-bar,
body.dashboard-dark-active #my-work-page .dashboard-title-bar h2 {
  background: var(--cp-dashboard-dark-surface-2);
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active :is(#home-page, #my-work-page) .dashboard-title-bar {
  border-bottom-color: var(--cp-dashboard-dark-border-1);
}

body.dashboard-dark-active #receive-page {
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active :is(#home-page, #my-work-page) .repair-panel-title {
  background: var(--cp-dashboard-dark-surface-3);
}

body.dashboard-dark-active #home-page .dashboard-op-card.warning strong,
body.dashboard-dark-active #home-page .progress-metric.warning strong {
  color: var(--cp-warning);
}

body.dashboard-dark-active #home-page .progress-metric.critical strong {
  color: var(--cp-danger);
}

/* Inventory Detail — page-scoped selection and atomic bulk correction flow. */
.cp #inventory-detail-section .inventory-detail-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.cp #inventory-detail-section .inventory-detail-table :is(.check-col, .device-actions-th, .device-actions-cell) {
  position: sticky;
  z-index: var(--z-base);
  background: var(--surface);
}

.cp #inventory-detail-section .inventory-detail-table .check-col {
  left: 0;
  z-index: calc(var(--z-base) + 1);
  box-shadow: var(--space-1) 0 var(--space-2) color-mix(in srgb, var(--content-1) 8%, transparent);
}

.cp #inventory-detail-section .inventory-detail-table :is(.device-actions-th, .device-actions-cell) {
  right: 0;
  box-shadow: none;
}

.cp #inventory-detail-section .inventory-detail-table :is(th.check-col, .device-actions-th) {
  z-index: calc(var(--z-sticky) + 1);
  background: var(--surface-2);
}

.cp #inventory-detail-section .inventory-detail-table .inv-det-unit-row.is-selected,
.cp #inventory-detail-section .inventory-detail-table .inv-det-unit-row.is-selected > :is(.check-col, .device-actions-cell) {
  background: var(--cp-accent-soft);
}

.cp #inventory-item-detail-page .iid-units-table tr.is-selected,
.cp #inventory-item-detail-page .iid-units-table tr.is-selected > :is(.check-col, .device-actions-cell) {
  background: var(--cp-accent-soft);
}

.cp #inventory-detail-section .inventory-detail-table input[type="checkbox"]:disabled,
.cp #inventory-item-detail-page .iid-units-table .iid-row-cb:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cp #inventory-page #inv-actions-menu .inv-row-menu-item:disabled,
.cp #inventory-item-detail-page #iid-section-actions-menu .inv-row-menu-item:disabled {
  cursor: not-allowed;
  background: var(--surface);
  color: var(--content-3);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card {
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--space-10) * 14));
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card .newpo-modal-head {
  flex: 0 0 auto;
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--border-1);
  background: var(--surface-2);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card .newpo-modal-head h3 {
  color: var(--content-1);
  font-size: var(--text-lg);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-summary {
  margin: var(--space-1) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card .newpo-modal-body {
  overflow-y: auto;
  padding: var(--space-4);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card .newpo-modal-foot {
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-color: var(--border-1);
  background: var(--surface-2);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card .newpo-modal-field {
  margin-bottom: var(--space-4);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card .newpo-modal-field label {
  margin-bottom: var(--space-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card :is(input, select, textarea) {
  width: 100%;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
  color: var(--content-1);
  font: inherit;
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card textarea {
  min-height: calc(var(--space-10) * 2);
  resize: vertical;
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-card :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
  border-color: var(--cp-accent);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-value-hint,
.cp #inventory-detail-bulk-modal .inv-det-bulk-loading,
.cp #inventory-detail-bulk-modal .inv-det-bulk-refurb-copy p {
  margin: var(--space-2) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-alert {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--cp-danger-soft);
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.cp #inventory-detail-bulk-modal #inventory-detail-bulk-retry {
  margin-bottom: var(--space-3);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-refurb-copy {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #inventory-detail-bulk-modal .inv-det-bulk-refurb-copy strong {
  color: var(--content-1);
  font-size: var(--text-base);
}

.cp #inventory-detail-section .inv-det-load-error {
  padding: var(--space-5);
  color: var(--cp-danger);
  text-align: center;
}

.cp #inventory-detail-section .inv-det-load-error .btn {
  margin-left: var(--space-2);
}

@media (max-width: 620px) {
  .cp #inventory-detail-bulk-modal {
    align-items: flex-end;
    padding: var(--space-2);
  }

  .cp #inventory-detail-bulk-modal .inv-det-bulk-card {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - var(--space-4));
  }

  .cp #inventory-detail-bulk-modal .inv-det-bulk-card .newpo-modal-foot .btn {
    flex: 1 1 0;
  }
}

/* Metrics interaction follow-up — loading, exports, and combined trend view */
.cp #metrics-page .metrics-loading-state {
  position: fixed;
  z-index: var(--z-overlay);
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-12);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  color: var(--content-1);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transform: translate(-50%, -50%);
}

.cp #metrics-page .metrics-loading-state.hidden {
  display: none;
}

.cp #metrics-page .metrics-loading-spinner {
  width: var(--space-5);
  height: var(--space-5);
  border: var(--space-1) solid var(--border-2);
  border-top-color: var(--cp-accent);
  border-radius: var(--radius-full);
  animation: metrics-loading-spin 0.7s linear infinite;
}

.cp #metrics-page.is-loading .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"] {
  opacity: 0.46;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.cp #metrics-page .metrics-filter-row :disabled {
  cursor: wait;
  opacity: 0.72;
}

.cp #metrics-page .metrics-detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cp #metrics-page .metrics-detail-export.is-disabled {
  pointer-events: none;
  opacity: 0.52;
}

.cp #metrics-page .metric-trend-selector [data-trend-metric]::before {
  display: inline-block;
  width: var(--space-2);
  height: var(--space-2);
  margin-right: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--content-3);
  content: "";
}

.cp #metrics-page .metric-trend-selector [data-trend-metric="sales"]::before { background: var(--cp-accent); }
.cp #metrics-page .metric-trend-selector [data-trend-metric="refunds"]::before { background: var(--cp-danger); }
.cp #metrics-page .metric-trend-selector [data-trend-metric="tickets"]::before { background: var(--content-3); }
.cp #metrics-page .metric-trend-selector [data-trend-metric="closed"]::before { background: var(--cp-success); }
.cp #metrics-page .metric-trend-selector [data-trend-metric="all"]::before {
  background: conic-gradient(
    var(--cp-accent) 0 25%,
    var(--cp-danger) 25% 50%,
    var(--content-3) 50% 75%,
    var(--cp-success) 75% 100%
  );
}

.cp #metrics-page .metric-sales-bars.all-series {
  grid-template-columns: repeat(4, minmax(var(--space-1), 1fr));
  gap: var(--space-1);
}

.cp #metrics-page .metric-trend-axis.mixed-scale {
  min-width: calc(var(--space-10) * 3);
}

.cp #metrics-page .metric-sales-chart.all-series .metric-sales-day > span {
  font-size: var(--text-xs);
}

@keyframes metrics-loading-spin {
  to { transform: rotate(1turn); }
}

@media (max-width: 620px) {
  .cp #metrics-page .metrics-detail-head,
  .cp #metrics-page .metrics-detail-actions {
    align-items: stretch;
  }

  .cp #metrics-page .metrics-detail-head {
    flex-direction: column;
  }

  .cp #metrics-page .metrics-detail-actions > * {
    flex: 1 1 0;
    justify-content: center;
  }

  .cp #metrics-page .metric-trend-layout:has(.metric-trend-axis.mixed-scale) {
    grid-template-columns: calc(var(--space-10) * 2) minmax(0, 1fr);
  }

  .cp #metrics-page .metric-trend-axis.mixed-scale {
    min-width: calc(var(--space-10) * 2);
    font-size: var(--text-2xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp #metrics-page .metrics-loading-spinner {
    animation: none;
  }
}

.topbar {
  min-height: 54px;
  padding: 0 clamp(18px, 2.5vw, 36px);
  gap: 14px;
  z-index: var(--cp-z-app-chrome);
  border-bottom: 1px solid #d8d8d8;
  background: #050505;
  color: #eeeeee;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-wrap: nowrap;
  min-width: 0;
  font-family: var(--sans);
}

.brand {
  flex: 1 1 0;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

.brand-logo {
  width: auto;
  height: 40px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}
.brand-logo-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  line-height: 0;
}
.brand-logo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.brand-logo-btn:hover .brand-logo { opacity: 0.88; }

.top-nav {
  gap: 0;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.top-nav::-webkit-scrollbar {
  display: none;
}

.nav-btn {
  position: relative;
  flex: 0 0 auto;
  height: 54px;
  padding: 0 11px;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #e4e4e4;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}

.top-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.nav-btn:hover,
.nav-btn.active {
  color: #ffffff;
  background: #000000;
}

.nav-btn.active {
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav-btn:disabled {
  opacity: 1;
  cursor: default;
}

.nav-btn.module-soon:hover {
  background: transparent;
}

.nav-menu {
  position: relative;
}

.nav-menu.hidden {
  display: none;
}

.nav-menu.open .nav-dropdown {
  display: grid;
}

.nav-dropdown {
  /* position: fixed (not absolute) so the dropdown escapes the .topbar's
     overflow clip + stacking context — the topbar gets overflow-x:auto /
     overflow:hidden at narrow widths, which was cutting the menu off. The
     JS (openNavMenu in app.js) sets top/left from the nav button's rect. */
  position: fixed;
  z-index: var(--cp-z-floating);
  display: none;
  min-width: 162px;
  padding: 9px 0 8px;
  background: #000000;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.account-menu {
  z-index: var(--cp-z-floating);
}

.nav-dropdown-wide {
  min-width: 218px;
}

.nav-reports-dropdown {
  width: auto;
  min-width: 190px;
  max-height: none;
  overflow: visible;
  padding: 9px 0 8px;
  display: none;
}

.nav-menu.open .nav-reports-dropdown {
  display: block;
}

.nav-reports-overview {
  grid-column: 1 / -1;
  border-bottom: 1px solid #242424;
}

.nav-report-group {
  min-width: 0;
}

.nav-report-heading {
  padding: 8px 10px 5px;
  color: #a8b3c7;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-report-item {
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}

.nav-menu.align-right .nav-dropdown {
  left: auto;
  right: 0;
}

.nav-dropdown-item {
  min-height: 37px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  background: #000000;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
}

.nav-dropdown-item:hover:not(:disabled) {
  background: #101010;
}

.nav-dropdown-item:disabled {
  color: #ffffff;
  cursor: default;
}

.nav-plus {
  width: 18px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.nav-dropdown-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 18px;
}

.top-actions {
  flex: 0 1 auto;
  margin-left: auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.top-actions .status-pill,
.top-actions .register-chip,
.top-actions .worker-pill {
  min-width: 0;
  max-width: clamp(132px, 13vw, 220px);
}

.top-actions .status-pill span:last-child,
.register-chip-name,
.worker-pill #worker-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-search {
  height: 38px;
  display: flex;
  align-items: stretch;
  background: #ffffff;
}

.top-search input {
  width: min(190px, 14vw);
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #666666;
  padding: 0 12px;
  font-size: 16px;
  box-shadow: none;
}

.top-search input:focus {
  border: 0;
  box-shadow: none;
  background: #ffffff;
}

.top-search button,
.top-square-btn {
  min-width: 54px;
  border-radius: 4px;
  background: var(--accent);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.top-search button:hover,
.top-square-btn:hover,
.quick-actions .btn-primary:hover {
  background: var(--accent-hover);
}

.top-icon-btn:disabled,
.top-square-btn:disabled,
.round-action:disabled,
.inventory-filter-pill:disabled {
  cursor: default;
  opacity: 0.55;
}

.top-icon-btn:disabled:hover,
.top-square-btn:disabled:hover,
.round-action:disabled:hover,
.inventory-filter-pill:disabled:hover {
  background: inherit;
}

.top-icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: transparent;
}

.top-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-square-btn {
  width: 46px;
  height: 38px;
}

.status-pill {
  height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: #333333;
  color: #eeeeee;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
}

.worker-pill {
  height: 54px;
  border: 0;
  border-radius: 0;
  background: #3a3a3a;
  color: #ffffff;
  font-size: 14px;
  gap: 10px;
}

.worker-pill #worker-label {
  font-family: var(--sans);
  color: #dfdfdf;
  font-size: 11px;
  letter-spacing: 0;
}

.worker-pill #worker-label::before {
  content: none;
}

.worker-avatar {
  --worker-avatar-size: calc(var(--space-8) + var(--space-1));
  width: var(--worker-avatar-size);
  height: var(--worker-avatar-size);
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--content-inv) 22%, transparent);
  border-radius: var(--radius-md);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--cp-accent) 24%, var(--surface-3));
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  flex: 0 0 var(--worker-avatar-size);
}

.worker-avatar.has-image {
  background: var(--surface-3);
}

.worker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.worker-pill-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.worker-pill #worker-name {
  font-weight: 400;
}

.top-actions .account-menu-btn {
  height: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 4px;
  background: #333333;
  color: #ffffff;
}

.home-main {
  width: min(var(--app-content-max), calc(100% - var(--app-side-space) * 2));
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: 34px 0 64px;
  display: block;
}

.camera-page {
  width: min(1180px, calc(100% - var(--app-side-space) * 2));
  margin: 0 auto;
  padding: 34px 0 64px;
  position: relative;
  z-index: 1;
}

.tickets-page,
.quick-sale-page,
.repair-ticket-page,
.trade-in-page,
.inventory-page,
.customers-page,
.reports-page,
.metrics-page,
.staff-page {
  width: min(var(--app-content-max), calc(100% - var(--app-side-space) * 2));
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: 34px 0 64px;
}

.tickets-page,
.reports-page,
.metrics-page,
.staff-page {
  width: calc(100% - var(--app-side-space) * 2);
  max-width: none;
}

#tickets-page.tickets-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 0;
}

#tickets-page > .dashboard-breadcrumb {
  display: none;
}

.inventory-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 18px;
}

#inventory-page.inventory-page {
  padding-top: 0;
}

#inventory-page > .dashboard-breadcrumb {
  display: none;
}

.quick-sale-page,
.repair-ticket-page,
.trade-in-page {
  padding-bottom: 0;
}

.quick-sale-page,
.repair-ticket-create-page,
.trade-in-page {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 12px 20px 80px;
}

/* The dedicated Repair ticket detail is an operational workspace, like the
   Trade-In and Refurbish ticket views. It should not inherit the generic
   1580px centered app width on large monitors. */
.repair-ticket-page {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 12px 20px 80px;
}

.repair-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px;
}

.repair-device-grid .repair-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.repair-device-grid .repair-field > span {
  color: #657282;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-device-grid input,
.repair-device-grid select,
.repair-device-grid textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #ffffff;
  color: #26313e;
  font-size: 14px;
  font-weight: 600;
}

.repair-device-grid textarea {
  min-height: 92px;
  resize: vertical;
}

.sale-ticket-shell {
  min-height: calc(100vh - 108px);
  display: grid;
  /* Wider sidebar to match the Repair / Trade-In detail layout — the old
     200px column looked thin and dated next to them. */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
  position: relative;
  background: #ffffff;
}

.sale-ticket-main {
  min-width: 0;
  padding-bottom: 64px;
}

/* ── Sale detail header — mirrors the Trade-In structured header so the three
   ticket detail views share one visual language. Dark navy bar with a kicker
   + big ticket number on the left and a bordered Customer box on the right. */
.sale-ticket-page .sale-ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  border-radius: 6px;
  padding: 16px 18px;
  background: #023047;
  color: #ffffff;
  font-size: inherit;
  font-weight: inherit;
}
.sale-ticket-page .sale-ticket-title,
.sale-ticket-page .sale-ticket-header-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.sale-ticket-page .sale-ticket-kicker,
.sale-ticket-page .sale-ticket-header-meta span {
  color: #9fb0c3;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sale-ticket-page .sale-ticket-title strong {
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.15;
}
/* "SALE" chip in front of the ticket number, matching the TRADE-IN chip. */
.sale-ticket-page .sale-ticket-title strong::before {
  content: "SALE";
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 7px;
  border: 1px solid var(--ticket-view-accent-soft, #9bd8e8);
  border-radius: 999px;
  background: var(--ticket-view-chip-bg, #e0f7ff);
  color: var(--ticket-view-chip-ink, #06485c);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  vertical-align: middle;
  transform: translateY(-1px);
}
.sale-ticket-page .sale-ticket-header-meta {
  min-width: min(320px, 100%);
  padding: 9px 12px;
  border: 1px solid #526175;
  border-radius: 5px;
  background: #1b2635;
}
.sale-ticket-page .sale-ticket-header-meta strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

/* Status bar + location strip sized to match the Repair/Trade detail rows. */
.sale-ticket-page .sale-ticket-status-row {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0;
  border-radius: 6px;
  overflow: hidden;
}
.sale-ticket-page .sale-status-bar {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 900;
}
.sale-ticket-page .sale-location-strip {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 13px;
}

.trade-items-body {
  min-height: 210px;
}

.sale-title-bar,
.sale-section-title {
  min-height: 52px;
  display: flex;
  align-items: center;
  background: #4a4a4a;
  color: #ffffff;
}

.sale-title-bar {
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
}

.sale-title-bar h2 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
}

.sale-title-bar h2 span {
  margin-right: 4px;
  font-size: 17px;
}

.sale-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 24px 22px;
}

.sale-state-pill,
.sale-location-pill {
  min-height: 46px;
  border-radius: 4px;
  background: #9a9a9a;
  color: #ffffff;
  font-weight: 800;
}

.sale-state-pill {
  justify-content: center;
  text-align: center;
}

.sale-location-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
}

.sale-location-pill strong {
  color: #ffffff;
}

.ticket-work-timer {
  min-height: 46px;
  display: none !important;
  grid-template-columns: auto minmax(82px, max-content) auto;
  align-items: center;
  gap: 12px;
  margin: 0 22px 16px;
  padding: 10px 14px;
  border: 1px solid #cfd7df;
  border-left: 5px solid #7a8794;
  border-radius: 4px;
  background: #f8fafc;
  color: #293241;
}

.ticket-work-timer-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #657282;
}

.ticket-work-timer-value {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 20px;
  color: #202936;
}

.ticket-work-timer-state {
  justify-self: end;
  min-width: 86px;
  font-size: 13px;
  font-weight: 800;
  color: #657282;
  text-align: right;
}

.ticket-work-timer[data-state="running"] {
  border-left-color: #1f8f4d;
  background: #f1fbf5;
}

.ticket-work-timer[data-state="running"] .ticket-work-timer-state {
  color: #16713b;
}

.ticket-work-timer[data-state="saved"] {
  border-left-color: #246bb2;
  background: #f3f8fd;
}

.ticket-work-timer[data-state="saved"] .ticket-work-timer-state {
  color: #245e99;
}

.repair-fast-shell {
  min-height: calc(100vh - 140px);
  display: grid;
  gap: 18px;
  padding-bottom: 76px;
}

.repair-fast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  background: #ffffff;
}

.repair-fast-kicker {
  display: block;
  margin-bottom: 4px;
  color: #657282;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-fast-header h2 {
  margin: 0;
  color: #26313e;
  font-size: 24px;
  font-weight: 800;
}

.repair-fast-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.repair-fast-header-actions .ticket-work-timer {
  min-width: 260px;
  margin: 0;
}

.repair-fast-save-top {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: #1976d2;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  /* Without this, clicking the button's text label (center) can start a text
     selection in Safari, which swallows the click so no `click` event fires —
     the "Save works on the edges but not the middle" bug. Buttons never need
     selectable text. */
  -webkit-user-select: none;
  user-select: none;
}

.repair-fast-save-top:hover {
  background: #145ea8;
}

.repair-fast-save-top:disabled {
  background: #d7dce3;
  color: #697386;
  cursor: default;
}

.ticket-create-final-save {
  min-width: 160px;
}

/* Same text-selection-swallows-click guard as .repair-fast-save-top, for the
   other labelled action buttons in the ticket-create flow. */
.repair-fast-step-actions .btn,
.ticket-create-final-save,
.ticket-create-charge-btn {
  -webkit-user-select: none;
  user-select: none;
}

.ticket-create-shell [data-create-step-next].is-blocked,
.repair-ticket-page [data-fast-step-next].is-blocked {
  border-color: #c9ced6;
  background: #d9dde4;
  color: #6b7280;
  box-shadow: none;
  opacity: 0.92;
  cursor: help;
}

.repair-fast-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.35fr);
  gap: var(--space-6);
  align-items: start;
}

.repair-fast-panel {
  min-width: 0;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  background: #ffffff;
  overflow: visible;
}

.repair-fast-problem-panel,
.repair-fast-part-panel,
.repair-fast-essentials-panel {
  grid-column: 1 / -1;
}

.repair-fast-panel-head {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid #e6ebf0;
  background: #f7f9fb;
}

.repair-fast-panel-head > span {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #26313e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.repair-fast-panel-head h3 {
  margin: 0;
  color: #26313e;
  font-size: 16px;
  font-weight: 900;
}

.repair-fast-panel-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.repair-ticket-shell .ticket-fast-customer-panel {
  margin: 24px 22px 26px;
}

.repair-fast-customer-extra {
  display: grid;
  gap: 10px;
}

.repair-fast-customer-extra .repair-customer-row {
  min-height: 0;
  padding: 0;
}

.repair-fast-customer-extra .repair-customer-row input {
  flex: 1;
  width: 100%;
}

.repair-fast-panel input,
.repair-fast-panel select,
.repair-fast-panel textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #ffffff;
  color: #26313e;
  font-size: 15px;
  font-weight: 600;
}

.repair-fast-panel textarea {
  min-height: 116px;
  resize: vertical;
}

.repair-fast-search {
  position: relative;
  display: grid;
  gap: 8px;
}

.repair-fast-search .repair-customer-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(38, 49, 62, 0.14);
}

.repair-fast-search .repair-customer-search-results:empty {
  display: none;
}

.repair-fast-search .repair-customer-search-item {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #eef2f6;
  background: #ffffff;
  color: #26313e;
  text-align: left;
  cursor: pointer;
}

.repair-fast-search .repair-customer-search-item:hover {
  background: #f4f8fc;
}

.repair-fast-search .repair-customer-search-item strong,
.repair-fast-search .repair-customer-search-item span {
  display: block;
}

.repair-fast-search .repair-customer-search-item span,
.repair-fast-search .repair-customer-search-empty {
  color: #657282;
  font-size: 13px;
}

.repair-fast-search .repair-customer-search-empty {
  padding: 12px;
}

.repair-fast-customer-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr);
  gap: 10px;
}

.repair-fast-linked-customer {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #f8fafc;
}

.repair-fast-linked-customer > div:first-child {
  min-width: 0;
}

.repair-fast-linked-customer strong,
.repair-fast-linked-customer span {
  display: block;
  overflow-wrap: anywhere;
}

.repair-fast-linked-customer strong {
  color: #26313e;
  font-size: 17px;
}

.repair-fast-linked-customer span {
  color: #657282;
  font-size: 13px;
}

.repair-fast-linked-customer button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 4px;
  background: #e9eef3;
  color: #374151;
  font-size: 20px;
  cursor: pointer;
}

.repair-fast-part-body {
  display: grid;
  gap: var(--space-5);
}

.repair-fast-parts-panel .repair-fast-panel-body {
  gap: var(--space-5);
  padding: var(--space-5);
}

.repair-fast-parts-actions {
  display: grid;
  grid-template-columns: minmax(220px, max-content) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.repair-fast-parts-results {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.repair-fast-part-picker {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 4px;
  background: #26313e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.repair-fast-part-picker:hover {
  background: #111827;
}

.repair-fast-selected-parts {
  display: grid;
  gap: 8px;
}

.repair-fast-selected-part,
.repair-fast-part-empty {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #f8fafc;
}

.repair-fast-selected-part strong,
.repair-fast-selected-part span {
  display: block;
}

.repair-fast-selected-part strong {
  color: #26313e;
  font-size: 15px;
}

.repair-fast-selected-part span,
.repair-fast-part-empty {
  color: #657282;
  font-size: 13px;
}

.repair-fast-selected-part button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 4px;
  background: #e9eef3;
  color: #374151;
  font-size: 20px;
  cursor: pointer;
}

.repair-fast-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  min-width: 0;
}

.repair-fast-issue-buttons,
.repair-fast-choice > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.repair-fast-issue-buttons button,
.repair-fast-choice button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #f8fafc;
  color: #374151;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.repair-fast-issue-buttons button:hover,
.repair-fast-choice button:hover,
.repair-fast-issue-buttons button.active,
.repair-fast-choice button.active {
  border-color: #1976d2;
  background: #eef6ff;
  color: #145ea8;
}

.repair-fast-essentials-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.repair-fast-checkin-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #023047;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(2, 48, 71, 0.04);
}

.repair-fast-checkin-device {
  grid-column: span 4;
}

.repair-fast-checkin-logistics {
  grid-column: span 5;
}

.repair-fast-checkin-notes {
  grid-column: span 3;
}

.repair-fast-checkin-warnings,
.repair-fast-checkin-timing {
  grid-column: span 6;
}

.repair-fast-checkin-equipment-bin {
  grid-column: span 3;
}

.repair-fast-checkin-timing {
  grid-column: span 9;
}

.repair-fast-checkin-group-wide {
  grid-column: 1 / -1;
}

.repair-fast-checkin-group-head {
  display: grid;
  gap: 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e5edf5;
}

.repair-fast-checkin-group-head strong {
  color: #023047;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.repair-fast-checkin-group-head p {
  margin: 0;
  color: #657282;
  font-size: 11px;
  line-height: 1.3;
}

.repair-fast-checkin-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 9px;
  min-width: 0;
}

.repair-fast-checkin-group-wide .repair-fast-checkin-group-body {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.repair-fast-checkin-timing .repair-fast-checkin-group-body {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
}

.repair-fast-choice {
  display: grid;
  align-content: start;
  gap: 6px;
}

.repair-fast-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.repair-fast-minimum-fee-field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.repair-fast-minimum-fee-controls {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.repair-fast-minimum-fee-controls > label {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-minimum-fee-money-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
}

.repair-minimum-fee-money-field:focus-within {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

.repair-minimum-fee-money-field > span {
  padding-left: var(--space-3);
  color: var(--content-2);
  font-family: var(--mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  pointer-events: none;
}

.repair-minimum-fee-money-field input {
  min-width: 0;
  min-height: calc(var(--space-8) + var(--space-2));
  border: 0;
  border-radius: 0;
  padding: 0 var(--space-3) 0 var(--space-1);
  background: transparent;
  color: var(--content-1);
  box-shadow: none;
  font-family: var(--mono);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.repair-minimum-fee-money-field input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.repair-minimum-fee-explanation {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 26%, var(--border-2));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent-soft) 58%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.repair-minimum-fee-explanation p {
  margin: 0;
}

.repair-minimum-fee-explanation strong {
  color: var(--content-1);
}

.repair-minimum-fee-script {
  color: var(--content-1);
}

@media (max-width: 760px) {
  .repair-fast-checkin-timing .repair-fast-checkin-group-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.repair-fast-choice > span,
.repair-fast-field > span {
  color: #657282;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-fast-essentials-panel .repair-fast-choice button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.repair-fast-essentials-panel .repair-fast-field select,
.repair-fast-essentials-panel input[type="text"] {
  min-height: 36px;
  font-size: 14px;
}

.repair-fast-essentials-grid textarea {
  grid-column: 1 / -1;
  min-height: 74px;
}

.repair-fast-acknowledgements {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.repair-fast-ack-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid #cbd8e5;
  border-radius: 10px;
  background: #ffffff;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.repair-fast-ack-card:hover {
  border-color: #8ecae6;
  box-shadow: 0 10px 24px rgba(2, 48, 71, 0.08);
  transform: translateY(-1px);
}

.repair-fast-ack-card input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: #0f9dcc;
}

.repair-fast-ack-copy {
  display: grid;
  gap: 3px;
}

.repair-fast-ack-copy strong {
  color: #12263f;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.repair-fast-ack-copy em {
  color: #526173;
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.repair-fast-action-bar {
  justify-content: flex-end;
}

.repair-fast-action-bar .repair-action-save {
  min-width: 180px;
  min-height: 42px;
  font-size: 15px;
}

.ticket-fast-shell {
  min-height: calc(100vh - 140px);
}

.ticket-create-shell {
  --ticket-create-accent: #fb8500;
  --ticket-create-accent-dark: #9a4a00;
  --ticket-create-accent-soft: #fff3e0;
  --ticket-create-accent-border: #ffd0a3;
  --ticket-create-accent-ink: #703600;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  align-items: start;
}

.quick-sale-fast-shell {
  --ticket-create-accent: #219ebc;
  --ticket-create-accent-dark: #126782;
  --ticket-create-accent-soft: #e0f7ff;
  --ticket-create-accent-border: #9bd8e8;
  --ticket-create-accent-ink: #06485c;
}

.quick-sale-fast-shell[data-sale-create-mode="special_order"] {
  --ticket-create-accent: #111827;
  --ticket-create-accent-dark: #030712;
  --ticket-create-accent-soft: #f3f4f6;
  --ticket-create-accent-border: #d1d5db;
  --ticket-create-accent-ink: #111827;
}

.quick-sale-fast-shell[data-sale-create-mode="special_order"] .btn-primary:not(:disabled),
.quick-sale-fast-shell[data-sale-create-mode="special_order"] #quick-sale-charge-btn:not(:disabled) {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.quick-sale-fast-shell[data-sale-create-mode="special_order"] .btn-primary:not(:disabled):hover,
.quick-sale-fast-shell[data-sale-create-mode="special_order"] #quick-sale-charge-btn:not(:disabled):hover {
  border-color: #030712;
  background: #030712;
  color: #ffffff;
}

.trade-in-fast-shell {
  --ticket-create-accent: #ffb703;
  --ticket-create-accent-dark: #9a6500;
  --ticket-create-accent-soft: #fff7db;
  --ticket-create-accent-border: #ffe08a;
  --ticket-create-accent-ink: #6f4c00;
}

.repair-create-shell,
.repair-fast-shell.ticket-create-shell:not(.quick-sale-fast-shell):not(.trade-in-fast-shell) {
  --ticket-create-accent: #fb8500;
  --ticket-create-accent-dark: #9a4a00;
  --ticket-create-accent-soft: #fff3e0;
  --ticket-create-accent-border: #ffd0a3;
  --ticket-create-accent-ink: #703600;
}

.sale-ticket-shell.ticket-create-shell {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 18px;
  background: transparent;
}

.ticket-create-shell .repair-fast-header {
  border-top: 5px solid var(--ticket-create-accent);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.02);
}

.ticket-create-shell .repair-fast-kicker {
  color: var(--ticket-create-accent-dark);
}

.ticket-create-shell .repair-fast-header h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ticket-create-shell .repair-fast-header h2::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--ticket-create-accent);
  box-shadow: 0 0 0 4px var(--ticket-create-accent-soft);
}

.ticket-create-shell .repair-fast-save-top {
  background: var(--ticket-create-accent);
}

.ticket-create-shell .repair-fast-save-top:hover {
  background: var(--ticket-create-accent-dark);
}

.ticket-create-shell .repair-fast-save-top.is-blocked,
.ticket-create-shell .repair-fast-save-top.is-blocked:hover,
.repair-ticket-action-bar .repair-action-save.is-blocked,
.repair-ticket-action-bar .repair-action-save.is-blocked:hover {
  background: #d9dde4;
  color: #6b7280;
  box-shadow: none;
  cursor: help;
}

.ticket-create-shell [data-missing-required],
.repair-ticket-page [data-missing-required] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16) !important;
}

.ticket-create-shell input[data-missing-required],
.ticket-create-shell select[data-missing-required],
.ticket-create-shell textarea[data-missing-required],
.repair-ticket-page input[data-missing-required],
.repair-ticket-page select[data-missing-required],
.repair-ticket-page textarea[data-missing-required] {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23dc2626'/%3E%3Cpath d='M9 4.2v5.7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='13' r='1.2' fill='white'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  background-position: right 10px center !important;
  padding-right: 36px !important;
}

.ticket-create-shell [data-missing-required]:not(input):not(select):not(textarea),
.repair-ticket-page [data-missing-required]:not(input):not(select):not(textarea) {
  position: relative;
  border-radius: 10px;
}

.ticket-create-shell .repair-fast-field[data-missing-required] > span,
.ticket-create-shell [data-missing-required] .repair-fast-field > span,
.ticket-create-shell [data-missing-required] > span,
.repair-ticket-page .repair-fast-field[data-missing-required] > span,
.repair-ticket-page [data-missing-required] .repair-fast-field > span,
.repair-ticket-page [data-missing-required] > span {
  color: #991b1b;
}

.ticket-create-shell .ticket-fast-check-grid[data-missing-required],
.repair-ticket-page .ticket-fast-check-grid[data-missing-required] {
  border-color: #dc2626 !important;
  background: #fff5f5;
}

.ticket-create-shell [data-missing-required]:not(input):not(select):not(textarea)::after,
.repair-ticket-page [data-missing-required]:not(input):not(select):not(textarea)::after {
  content: "!";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.25);
}

.ticket-create-shell .ticket-work-timer {
  border-left-color: var(--ticket-create-accent);
}

.ticket-create-shell .repair-fast-panel {
  border-color: #dce3eb;
}

.ticket-create-shell .repair-fast-panel-head {
  border-bottom-color: var(--ticket-create-accent-border);
  background: var(--ticket-create-accent-soft);
}

.ticket-create-shell .repair-fast-panel-head > span {
  background: var(--ticket-create-accent);
}

.ticket-create-shell .repair-fast-panel-head h3 {
  color: var(--ticket-create-accent-ink);
}

.ticket-create-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.ticket-create-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: calc(54px + 12px);
  min-width: 0;
}

.ticket-shell-stacked {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px) !important;
}

.ticket-sections-stack {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 1240px) {
  .ticket-shell-stacked {
    grid-template-columns: 1fr !important;
  }

  .ticket-shell-stacked .ticket-create-sidebar,
  .ticket-shell-stacked .sale-ticket-sidebar,
  .ticket-shell-stacked .trade-ticket-sidebar,
  .ticket-shell-stacked .refurbish-ticket-sidebar,
  .ticket-shell-stacked .repair-ticket-sidebar {
    position: static;
    top: auto;
  }
}

.ticket-create-nav-box,
.ticket-create-financial-box {
  overflow: hidden;
  border: 1px solid #dce3eb;
  border-radius: 4px;
  background: #ffffff;
}

.ticket-create-nav-head,
.ticket-create-financial-head {
  padding: 9px 12px;
  background: var(--ticket-create-accent-dark);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.ticket-create-nav-body {
  display: grid;
  gap: 2px;
  padding: 6px 4px;
}

.ticket-create-nav-body a,
.ticket-create-nav-body button,
.ticket-create-nav-foot a,
.ticket-create-nav-foot button {
  min-height: 34px;
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 3px;
  padding: 0 12px;
  background: transparent;
  color: #26313e;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ticket-create-nav-body a:hover,
.ticket-create-nav-body button:hover,
.ticket-create-nav-body button.active {
  background: var(--ticket-create-accent-soft);
  color: var(--ticket-create-accent-ink);
}

.ticket-create-nav-body button:disabled {
  background: transparent;
  color: #9aa7b6;
  cursor: not-allowed;
}

.ticket-create-nav-body button.is-complete:not(.active) {
  color: #1d7a46;
}

.ticket-create-nav-foot {
  padding: 8px 12px;
  border-top: 1px solid #e7edf3;
}

.ticket-create-nav-foot a,
.ticket-create-nav-foot button {
  min-height: auto;
  padding: 0;
  color: var(--ticket-create-accent-dark);
  font-size: 12px;
}

.ticket-create-nav-foot span {
  display: block;
  color: #627387;
  font-size: 12px;
  line-height: 1.45;
}

.ticket-create-sidebar .ticket-fast-finance-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 10px 12px 0;
}

.ticket-create-sidebar .ticket-fast-finance-summary div {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
}

.ticket-create-sidebar .ticket-fast-finance-summary span {
  color: #26313e;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

.ticket-create-sidebar .ticket-fast-finance-summary strong {
  color: #26313e;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.ticket-create-sidebar .ticket-fast-finance-summary .ticket-fast-finance-balance {
  min-height: 84px;
  justify-content: center;
  margin: 10px -12px 0;
  border: 0;
  border-radius: 0;
  background: #023047;
}

.ticket-create-sidebar .ticket-fast-finance-summary .ticket-fast-finance-balance span {
  display: none;
}

.ticket-create-sidebar .ticket-fast-finance-summary .ticket-fast-finance-balance strong {
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.ticket-financial-focus {
  outline: 3px solid rgba(25, 113, 194, 0.35);
  outline-offset: 3px;
}

.repair-fast-panel-hidden {
  display: none !important;
}

.repair-fast-step-footer {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e8eef5;
}

.repair-fast-step-hint {
  color: #627387;
  font-size: 13px;
  line-height: 1.45;
}

.repair-fast-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.repair-fast-step-actions .btn {
  min-width: 132px;
}

.repair-fast-step-actions > span {
  display: block;
  min-width: 132px;
}

.repair-fast-essentials-footer {
  grid-column: 1 / -1;
}

.ticket-fast-grid {
  grid-template-columns: minmax(min(280px, 100%), .85fr) minmax(0, 1.6fr);
}

.ticket-fast-main-panel,
.ticket-fast-evaluation-panel,
.ticket-fast-notes-panel {
  min-width: 0;
}

.ticket-fast-evaluation-panel,
.ticket-fast-notes-panel {
  grid-column: 1 / -1;
}

.ticket-fast-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
}

.ticket-fast-button-row .btn,
.customer-display-actions .btn {
  width: auto;
  min-height: 36px;
  min-width: 118px;
  max-width: 100%;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  text-align: center;
}

.ticket-inline-customer-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}

.ticket-inline-customer-search {
  min-width: 0;
}

.ticket-inline-customer-actions {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.ticket-inline-customer-create-btn {
  min-height: 44px;
  white-space: nowrap;
}

.ticket-inline-customer-results {
  text-align: left;
}

.ticket-fast-note {
  color: #657282;
  font-size: 13px;
  line-height: 1.35;
}

.ticket-fast-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px;
}

.ticket-fast-field-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.ticket-fast-field-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.ticket-fast-field-grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}

.ticket-fast-combo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 8px;
}

.ticket-fast-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #ffffff;
}

.ticket-fast-check-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #26313e;
  font-size: 13px;
  font-weight: 700;
}

.ticket-fast-check-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #1976d2;
}

.ticket-fast-wide-field {
  grid-column: span 2;
}

.repair-fast-financial-panel {
  grid-column: 1 / -1;
}

.ticket-fast-finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.ticket-fast-finance-summary div {
  display: grid;
  gap: 4px;
  min-height: 62px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  padding: 10px 12px;
  background: #f8fafc;
}

.ticket-fast-finance-summary span {
  color: #657282;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ticket-fast-finance-summary strong {
  color: #26313e;
  font-size: 17px;
  font-weight: 900;
}

.ticket-fast-finance-summary .ticket-fast-finance-balance {
  border-color: #26313e;
  background: #26313e;
}

.ticket-fast-finance-summary .ticket-fast-finance-balance span,
.ticket-fast-finance-summary .ticket-fast-finance-balance strong {
  color: #ffffff;
}

.quick-sale-inventory-search .repair-customer-search-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.quick-sale-inventory-search .repair-customer-search-item small {
  color: #657282;
  font-weight: 800;
}

.repair-detail-work-timer {
  margin-top: -8px;
}

.repair-draft-leave-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 10000;
}

.repair-draft-leave-card {
  background: #ffffff;
  border: 1px solid #d6dee8;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  color: #233142;
  display: grid;
  gap: 14px;
  max-width: 460px;
  padding: 26px;
  position: relative;
  width: min(100%, 460px);
}

.repair-draft-leave-close {
  align-items: center;
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  font-size: 28px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 12px;
  top: 10px;
  width: 34px;
}

.repair-draft-leave-close:hover {
  color: #1f2937;
}

.repair-draft-leave-icon {
  align-items: center;
  background: #fff3cd;
  border: 1px solid #ffd66b;
  color: #8a5a00;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.repair-draft-leave-card h3 {
  color: #172235;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0;
}

.repair-draft-leave-card p {
  color: #526173;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

.repair-draft-leave-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.repair-draft-leave-actions button {
  border: 1px solid #c9d4e2;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  min-height: 42px;
  padding: 0 16px;
}

.repair-draft-leave-primary {
  background: #127a4b;
  border-color: #127a4b;
  color: #ffffff;
}

.repair-draft-leave-primary:hover {
  background: #0f683f;
}

.repair-draft-leave-secondary {
  background: #ffffff;
  color: #314154;
}

.repair-draft-leave-secondary:hover {
  background: #eef3f8;
}

@media (max-width: 560px) {
  .ticket-work-timer {
    grid-template-columns: 1fr auto;
    margin-inline: 14px;
  }

  .ticket-work-timer-state {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

/* Quick Sale customer summary -------------------------------------------- */

.cp #quick-sale-page .quick-sale-customer-summary:is(
  [data-customer-summary-state="selected"],
  [data-customer-summary-state="walk-in"]
) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #quick-sale-page .quick-sale-customer-summary-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.cp #quick-sale-page .quick-sale-customer-avatar {
  display: grid;
  flex: 0 0 calc(var(--space-10) + var(--space-2));
  width: calc(var(--space-10) + var(--space-2));
  height: calc(var(--space-10) + var(--space-2));
  place-items: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 78%, var(--content-1));
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: 1;
}

.cp #quick-sale-page .quick-sale-customer-summary[data-customer-summary-state="empty"] .quick-sale-customer-avatar {
  display: none;
}

.cp #quick-sale-page .quick-sale-customer-identity {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.cp #quick-sale-page .quick-sale-customer-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.cp #quick-sale-page .quick-sale-customer-name-row > strong {
  min-width: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #quick-sale-page .quick-sale-customer-selected-badge {
  width: fit-content;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 78%, var(--content-1));
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  overflow-wrap: normal;
  white-space: nowrap;
}

.cp #quick-sale-page .quick-sale-customer-summary[data-customer-summary-state="selected"] #quick-sale-customer-details {
  display: none;
}

.cp #quick-sale-page .quick-sale-customer-company {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body);
}

.cp #quick-sale-page .quick-sale-customer-summary svg {
  flex: 0 0 auto;
  width: var(--text-lg);
  height: var(--text-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp #quick-sale-page .quick-sale-customer-actions {
  align-items: center;
  align-self: center;
}

.cp #quick-sale-page .quick-sale-customer-change {
  width: auto;
  min-height: calc(var(--space-8) + var(--space-1));
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cp-accent);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp #quick-sale-page .quick-sale-customer-change:hover {
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
}

.cp #quick-sale-page .quick-sale-customer-change:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp #quick-sale-page .quick-sale-customer-info {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-1);
}

.cp #quick-sale-page .quick-sale-customer-info > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.cp #quick-sale-page .quick-sale-customer-info dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.cp #quick-sale-page .quick-sale-customer-info dd {
  min-width: 0;
  margin: 0 0 0 calc(var(--text-lg) + var(--space-2));
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.cp #quick-sale-page .quick-sale-customer-history {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.cp #quick-sale-page .quick-sale-customer-history > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cp #quick-sale-page .quick-sale-customer-history > span + span {
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-1);
}

@media (max-width: 720px) {
  .cp #quick-sale-page .quick-sale-customer-summary:is(
    [data-customer-summary-state="selected"],
    [data-customer-summary-state="walk-in"]
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #quick-sale-page .quick-sale-customer-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .cp #quick-sale-page .quick-sale-customer-actions .btn {
    flex: 0 1 auto;
  }

  .cp #quick-sale-page .quick-sale-customer-info {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #quick-sale-page .quick-sale-customer-history {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cp #quick-sale-page .quick-sale-customer-history > span + span {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 1240px) {
  .ticket-create-shell,
  .sale-ticket-shell.ticket-create-shell {
    grid-template-columns: 1fr;
  }

  .ticket-create-sidebar {
    position: static;
  }
}

@media (max-width: 1100px) {
  .ticket-create-shell,
  .sale-ticket-shell.ticket-create-shell,
  .repair-fast-grid,
  .ticket-fast-grid,
  .ticket-fast-finance-summary,
  .ticket-fast-field-grid,
  .ticket-fast-field-grid-2,
  .ticket-fast-field-grid-4,
  .ticket-fast-field-grid-5,
  .repair-fast-device-grid,
  .repair-fast-part-body,
  .repair-fast-parts-actions,
  .repair-fast-essentials-grid,
  .repair-device-grid {
    grid-template-columns: 1fr;
  }

  .ticket-create-sidebar {
    position: static;
  }

  .repair-fast-essentials-grid textarea {
    grid-column: auto;
  }

  .repair-fast-checkin-group-wide,
  .repair-fast-checkin-equipment-bin,
  .repair-fast-checkin-timing,
  .repair-fast-essentials-footer {
    grid-column: auto;
  }

  .ticket-fast-wide-field {
    grid-column: auto;
  }

  .ticket-fast-check-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  .repair-fast-header {
    align-items: stretch;
    flex-direction: column;
  }

  .repair-fast-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .repair-fast-header-actions .ticket-work-timer {
    min-width: 0;
  }

  .repair-fast-save-top {
    width: 100%;
  }

  .repair-fast-customer-fields {
    grid-template-columns: 1fr;
  }

  .ticket-fast-button-row {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
  }

  .ticket-fast-button-row .btn {
    flex: 1 1 150px;
  }

  .ticket-inline-customer-controls {
    grid-template-columns: 1fr;
  }

  .repair-fast-search .ticket-inline-customer-results {
    position: static;
    margin-top: var(--space-1);
  }

  .ticket-inline-customer-actions {
    flex-wrap: wrap;
  }

  .ticket-inline-customer-actions .ticket-inline-customer-create-btn {
    flex: 1 1 150px;
  }

  .ticket-inline-customer-create-btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .ticket-fast-check-grid {
    grid-template-columns: 1fr;
  }
}

.sale-warning {
  min-height: 118px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 12px 14px 22px;
  padding: 16px 24px;
  border: 1px solid #f3e5ba;
  border-radius: 4px;
  background: #fff9df;
  color: #bd8b3f;
}

.sale-warning strong {
  display: block;
  margin-bottom: 12px;
  color: #bd8b3f;
}

.sale-warning p {
  margin: 0;
  color: #bd8b3f;
}

.sale-terminal-icon {
  width: 46px;
  height: 34px;
  border: 4px solid #bd9b56;
  border-radius: 4px;
  position: relative;
}

.sale-terminal-icon::before,
.sale-terminal-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  background: #bd9b56;
  transform: translateX(-50%);
}

.sale-terminal-icon::before {
  bottom: -12px;
  width: 18px;
  height: 8px;
}

.sale-terminal-icon::after {
  bottom: -16px;
  width: 34px;
  height: 4px;
}

.sale-section-title {
  padding: 0 22px;
  font-size: 20px;
  font-weight: 300;
}

.sale-panel-row {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 24px 22px 48px;
  padding: 0 22px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  background: #f7f7f7;
  color: #666666;
}

.sale-panel-row .btn {
  margin-left: auto;
}

.sale-items-body {
  min-height: 208px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 28px;
  padding: 26px 22px 42px;
  background: #ffffff;
}

.sale-item-space {
  min-height: 140px;
}

.ticket-intake-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  padding-bottom: 12px;
}

.ticket-intake-grid-wide {
  padding: 10px 0 0;
}

.ticket-intake-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #666666;
  font-size: 12px;
  font-weight: 700;
}

.ticket-intake-grid input,
.ticket-intake-grid select,
.ticket-intake-grid textarea {
  min-width: 0;
  width: 100%;
}

.repair-promise-field {
  display: grid;
  gap: 8px;
  grid-column: span 2;
  min-width: 0;
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
}

.repair-fast-checkin-timing .repair-promise-field {
  grid-column: auto;
  gap: 5px;
}

.repair-promise-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.repair-fast-checkin-timing .repair-promise-heading {
  display: grid;
  gap: 1px;
}

.repair-promise-heading small {
  color: #7c8797;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.repair-fast-checkin-timing .repair-promise-heading small {
  font-size: 10.5px;
}

.repair-promise-picker {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #d8e3ee;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(142, 202, 230, 0.22), rgba(255, 255, 255, 0.92) 48%),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.repair-fast-checkin-timing .repair-promise-picker {
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
}

.repair-promise-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.repair-fast-checkin-timing .repair-promise-presets {
  gap: 5px;
}

.repair-promise-presets button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid #b9d5e6;
  border-radius: 999px;
  background: #ffffff;
  color: #175a78;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.repair-fast-checkin-timing .repair-promise-presets button {
  min-height: 27px;
  padding: 0 8px;
  font-size: 11px;
}

.repair-promise-presets button:hover,
.repair-promise-presets button.active {
  border-color: #219ebc;
  box-shadow: 0 0 0 3px rgba(33, 158, 188, 0.16);
  transform: translateY(-1px);
}

.repair-promise-presets button.muted {
  border-color: #d1d5db;
  color: #6b7280;
}

.repair-promise-presets button.muted.active {
  border-color: #023047;
  background: #eef5f8;
  color: #023047;
}

.repair-promise-custom-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.65fr);
  gap: 8px;
}

.repair-fast-checkin-timing .repair-promise-custom-row {
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.75fr);
  gap: 6px;
}

.repair-promise-custom-row label,
.repair-promise-time-field {
  display: grid;
  gap: 4px;
  color: #536174;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.repair-fast-checkin-timing .repair-promise-custom-row label,
.repair-fast-checkin-timing .repair-promise-time-field {
  font-size: 10px;
}

.repair-promise-custom-row input {
  min-height: 38px;
  border: 1px solid #cfdbe7;
  border-radius: 10px;
  background: #ffffff;
  color: #0f2137;
  font-size: 14px;
  font-weight: 800;
}

.repair-fast-checkin-timing .repair-promise-custom-row input {
  min-height: 34px;
  font-size: 13px;
}

.repair-promise-custom-row input:focus {
  border-color: #219ebc;
  box-shadow: 0 0 0 3px rgba(33, 158, 188, 0.16);
  outline: none;
}

.repair-promise-time-field {
  min-width: 0;
}

.promised-time-picker {
  position: relative;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  text-transform: none;
}

.promised-time-picker.is-open {
  z-index: var(--z-overlay);
}

.promised-time-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
  color: var(--content-placeholder);
  font: inherit;
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    background-color var(--dur-micro) var(--ease-standard);
}

.promised-time-trigger:hover,
.promised-time-trigger:focus-visible,
.promised-time-picker.is-open .promised-time-trigger {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.promised-time-trigger.has-value {
  border-color: var(--field-filled-border);
  background: var(--field-filled-surface);
  color: var(--content-1);
}

.promised-time-trigger.is-legacy {
  border-color: var(--cp-warning);
}

.promised-time-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.promised-time-trigger-icon {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.promised-time-panel {
  position: absolute;
  z-index: var(--z-overlay);
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(320px, calc(100vw - var(--space-8)));
  max-height: var(--promised-time-panel-max-height, calc(100vh - var(--space-8)));
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.promised-time-panel.is-portaled {
  position: fixed;
  right: auto;
  bottom: auto;
}

.promised-time-picker.opens-up .promised-time-panel {
  top: auto;
  bottom: calc(100% + var(--space-2));
}

.promised-time-picker.align-start .promised-time-panel {
  right: auto;
  left: 0;
}

.promised-time-panel[hidden] {
  display: none;
}

.promised-time-panel-head {
  position: sticky;
  z-index: 1;
  top: calc(-1 * var(--space-3));
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr minmax(48px, auto);
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-top: var(--space-3);
  background: var(--surface);
}

.promised-time-title {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  text-align: center;
}

.promised-time-back,
.promised-time-close {
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.promised-time-back:hover,
.promised-time-close:hover,
.promised-time-back:focus-visible,
.promised-time-close:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.promised-time-options {
  display: grid;
  gap: var(--space-2);
}

.promised-time-hour-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.promised-time-minute-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promised-time-option {
  min-height: 38px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.promised-time-option:hover,
.promised-time-option:focus-visible {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--content-inv);
  outline: none;
}

.promised-time-empty,
.promised-time-hint {
  margin: 0;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: normal;
  text-transform: none;
}

.promised-time-empty {
  padding: var(--space-3);
  text-align: center;
}

.promised-time-hint.is-warning {
  color: var(--cp-warning);
  font-weight: var(--weight-bold);
}

.repair-fast-checkin-timing .promised-time-trigger {
  min-height: 34px;
  font-size: var(--text-sm);
}

.repair-promise-preview {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(2, 48, 71, 0.08);
  color: #023047;
  font-size: 12px;
  font-weight: 900;
}

.repair-fast-checkin-timing .repair-promise-preview {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 11.5px;
}

@media (max-width: 760px) {
  .repair-fast-checkin-timing .repair-promise-custom-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.repair-detail-fact-promised {
  grid-column: 1 / -1;
}

.repair-promise-field-inline {
  grid-column: auto;
  gap: var(--space-2, 8px);
}

.repair-promise-field-inline .repair-promise-picker {
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--cp-accent-soft, #e6f4fa) 44%, var(--surface, #ffffff));
  box-shadow: none;
}

.repair-promise-field-inline .repair-promise-preview {
  min-height: 32px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 10%, var(--surface, #ffffff));
  color: var(--content-1, #111827);
}

.repair-promise-inline-actions {
  display: flex;
  justify-content: flex-end;
}

.repair-promise-save-btn {
  min-height: 32px;
  border: 1px solid var(--cp-accent, #0797ca);
  border-radius: var(--radius-sm, 6px);
  padding: 0 var(--space-3, 12px);
  background: var(--cp-accent, #0797ca);
  color: var(--cp-accent-content, #ffffff);
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-black, 900);
  cursor: pointer;
  transition: background-color var(--dur-micro, 80ms) var(--ease-standard, ease),
              opacity var(--dur-micro, 80ms) var(--ease-standard, ease);
}

.repair-promise-save-btn:hover {
  background: var(--cp-accent-hover, #087eaa);
}

.repair-promise-save-btn:disabled {
  cursor: wait;
  opacity: 0.62;
}

.sale-catalog-tools {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 16px;
  color: #666666;
}

.sale-catalog-tools > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sale-link-btn {
  color: #9bd4ef;
  font-size: 14px;
  font-weight: 800;
}

.sale-catalog-tools label {
  display: grid;
  gap: 6px;
  color: #666666;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sale-catalog-tools input[type="search"] {
  width: 285px;
}

.sale-discount-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sale-discount-row input {
  width: 70px;
}

.sale-discount-row select {
  width: 74px;
}

.sale-info-row {
  min-height: 42px;
  margin: 24px 22px 70px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background: #eeeeee;
  color: #666666;
  font-size: 14px;
}

.sale-side-nav {
  min-height: calc(100vh - 108px);
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto;
  background: #7b7b7b;
  color: #ffffff;
  border-left: 1px solid #666666;
}

.sale-side-title,
.sale-side-total {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: #858585;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.sale-side-nav a,
.sale-side-nav button {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid #6d6d6d;
  color: #eeeeee;
  background: #eeeeee;
  color: #666666;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
}

.sale-side-nav button {
  background: #7b7b7b;
  color: #ffffff;
}

.sale-side-spacer {
  min-height: 220px;
}

.sale-side-total {
  align-self: end;
}

.sale-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  background: linear-gradient(#545454, #333333);
}

.sale-bottom-bar .btn {
  min-height: 32px;
}

.repair-title-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.repair-title-controls label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #dddddd;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.repair-title-controls select {
  width: 178px;
  min-height: 34px;
}

.repair-customer-row {
  min-height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
}

.repair-customer-row input {
  width: 260px;
}

.repair-forms-wrap {
  padding: 22px;
}

.repair-forms-table {
  width: 100%;
  border-collapse: collapse;
  color: #5f5f5f;
  font-size: 15px;
}

.repair-forms-table th {
  height: 42px;
  padding: 0 10px;
  border: 1px solid #d7d7d7;
  background: #d4d4d4;
  color: #666666;
  font-weight: 800;
  text-align: left;
}

.repair-forms-table td {
  height: 84px;
  padding: 10px 14px;
  border: 1px solid #dddddd;
  background: #ffffff;
  vertical-align: middle;
}

.repair-forms-table tr.selected td {
  background: #eaf8ff;
}

.repair-forms-table em {
  color: #666666;
}

.repair-forms-table button {
  color: #16a5df;
  font-size: 24px;
}

.repair-blank-section {
  min-height: 220px;
}

.repair-notes-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #666666;
}

.repair-notes-empty .round-action {
  justify-self: end;
  margin-right: 22px;
}

.repair-notes-empty h3 {
  margin: 0;
  color: #666666;
  font-size: 26px;
}

.repair-notes-empty > button:last-child {
  color: #008ed0;
  font-size: 15px;
}

#tickets-list-view {
  border-radius: 0;
  overflow: hidden;
}

#tickets-list-view .panel-head {
  min-height: 42px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  background: #4a4a4a;
  color: #ffffff;
}

#tickets-list-view .panel-head-row {
  width: 100%;
  align-items: center;
}

#tickets-list-view .panel-head .eyebrow {
  display: none;
}

#tickets-list-view .panel-head h2 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
}

#tickets-list-view .stat-pill-inline {
  display: none;
}

#tickets-list-view .stat-pill-value,
#tickets-list-view .stat-pill-label {
  color: #ffffff;
}

#tickets-list-view .panel-body {
  padding: 0;
}

#tickets-list-view .tickets-toolbar,
#tickets-list-view .custom-date-row,
#tickets-list-view .tickets-filter-row,
#tickets-list-view .results-head,
#tickets-list-view .selection-toolbar,
#tickets-list-view .tickets-list,
#tickets-list-view .empty,
#tickets-list-view .pagination {
  margin-left: 0;
  margin-right: 0;
}

#tickets-list-view .tickets-list {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

#tickets-list-view .tickets-toolbar {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 0 22px;
}

#tickets-list-view .tickets-toolbar .input-wrap,
#tickets-list-view .tickets-toolbar .select-wrap {
  width: auto;
  min-width: 145px;
}

#tickets-list-view .tickets-toolbar .input-wrap {
  min-width: 260px;
}

#tickets-list-view .tickets-filter-row,
#tickets-list-view .results-head,
#tickets-list-view .selection-toolbar {
  padding-left: 22px;
  padding-right: 22px;
}

#tickets-list-view .results-title-row h3,
#tickets-list-view .results-title-row .page-size-label,
#tickets-list-view .tickets-filter {
  display: none;
}

#tickets-list-view .results-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  color: #666666;
}

/* Legacy #tickets-list-view .ticket-row grid layout — DEPRECATED. The
   Tickets queue now uses a real HTML <table class="tickets-queue-table">
   defined ~3390 above. These selectors are intentionally neutralized so
   any pre-table .ticket-row markup falls back to default block flow. */

#tickets-list-view .ticket-number {
  gap: 6px;
  color: #008ed0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  overflow: visible;
}

#tickets-list-view .ticket-type svg {
  width: 18px;
  height: 18px;
  color: #666666;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#tickets-list-view .ticket-location,
#tickets-list-view .ticket-archivos,
#tickets-list-view .ticket-actualizado,
#tickets-list-view .ticket-notes {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#tickets-list-view .ticket-actualizado {
  justify-self: stretch;
  color: #5f5f5f;
  font-family: var(--sans);
  font-size: 14px;
  text-align: left;
}

#tickets-list-view .ticket-number-text {
  color: #008ed0;
  max-width: 100%;
  overflow: visible;
  text-align: left;
  white-space: nowrap;
}

#tickets-list-view .ticket-cover {
  display: none;
}

#tickets-list-view .ticket-subline {
  display: block;
  margin-top: 2px;
  color: #777777;
  font-size: 12px;
}

#tickets-list-view .ticket-status {
  color: #18a33c;
  font-weight: 500;
}

#tickets-list-view .ticket-muted {
  color: #9a9a9a;
}

#tickets-list-view .ticket-timer {
  color: #e6372f;
  font-weight: 500;
}

#tickets-list-view .ticket-note-button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #0098dc;
  border-radius: 4px;
  color: #008ed0;
  background: #ffffff;
  font-size: 14px;
}

#tickets-list-view .ticket-actions {
  width: 100%;
  justify-content: center;
  gap: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   Ticket queue visual harmony — see grid-template-columns in app.css
   ~1406. The 14-column grid is tight, so we explicitly:
   1) Let head cells overflow so labels like "Location" never get cut to
      "Loca" by a narrow track.
   2) Force every cell to participate in min-width:0 so the parent grid
      can actually shrink the column instead of letting text balloon.
   3) Make the location/muted/notes cells one-line + ellipsis with a
      smaller subline below — fixes the "Compupod / Inc." text wrap and
      keeps row heights even.
   ───────────────────────────────────────────────────────────────────── */
#tickets-list-view .ticket-row > * {
  min-width: 0;
}

#tickets-list-view .ticket-row-head > div {
  overflow: visible;        /* Allow header text to escape narrow tracks */
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0;
}

/* Location cell — one-line name + small bin subline. Both clipped with
   ellipsis. Fixes the "mpupod / Bin: -" multi-line wrap visible in the
   user's screenshot. */
#tickets-list-view .ticket-location {
  overflow: hidden;
  font-size: 13px;
  color: #333333;
  line-height: 1.25;
}
#tickets-list-view .ticket-location > :first-child,
#tickets-list-view .ticket-location {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#tickets-list-view .ticket-location .ticket-subline {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

/* Generic muted cells (Customer, Sales, Receipts, Est., and any
   optional column rendered via the fall-through .ticket-muted) — keep
   them on a single line so the row stays a consistent height. */
#tickets-list-view .ticket-muted,
#tickets-list-view .ticket-status,
#tickets-list-view .ticket-workers,
#tickets-list-view .ticket-archivos,
#tickets-list-view .ticket-actualizado,
#tickets-list-view .ticket-notes {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* The Notes cell holds a button — make sure the button itself ellipses
   instead of forcing a wider track. */
#tickets-list-view .ticket-note-button {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tickets-list-view .ticket-actions .icon-action {
  width: 26px;
  height: 30px;
  min-height: 30px;
  border-radius: 0;
  background: transparent;
  color: #075174;
  border: 0;
}

.inventory-shell {
  background: #ffffff;
  min-width: 0;
}

.customers-shell {
  background: #ffffff;
  min-width: 0;
}

.staff-shell {
  display: grid;
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  align-items: start;
  background: #ffffff;
  min-width: 0;
  overflow: hidden;
}

.reports-shell {
  background: #ffffff;
  min-height: calc(100vh - 120px);
  min-width: 0;
}

.reports-menu {
  min-height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px clamp(18px, 2.5vw, 34px);
  background: #4a4a4a;
  color: #ffffff;
}

.reports-menu strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.reports-menu button {
  min-height: 34px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 4px;
  padding: 0 8px;
}

.reports-menu-trigger::after {
  content: "  ▾";
  color: #a9a9a9;
  font-size: 11px;
}

.reports-menu button.active {
  background: rgba(255, 255, 255, 0.18);
}

.reports-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  padding: 34px clamp(18px, 2.5vw, 36px) 64px;
  color: #555555;
}

.metrics-shell {
  background: #ffffff;
  min-height: calc(100vh - 120px);
}

.metrics-title-bar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 22px;
  background: #4a4a4a;
  color: #ffffff;
}

.metrics-title-copy {
  min-width: 220px;
}

.metrics-title-bar h2 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
}

.metrics-title-bar span {
  color: #d6d6d6;
  font-size: 13px;
}

.metrics-filter-row {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.metrics-filter-row label {
  display: grid;
  gap: 4px;
  margin: 0;
}

.metrics-filter-row label span {
  color: #d6d6d6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.metrics-filter-row select,
.metrics-filter-row input {
  width: 150px;
  min-height: 34px;
  border: 1px solid #d8dde3;
  border-radius: 3px;
  background: #ffffff;
  color: #26313d;
  font-size: 13px;
}

.metrics-filter-row .btn {
  min-height: 34px;
  padding-inline: 16px;
}

.metrics-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  border-bottom: 1px solid #dddddd;
}

.metric-card {
  min-height: 122px;
  padding: 18px 20px;
  border-right: 1px solid #dddddd;
  background: #ffffff;
}

.metric-card:last-child {
  border-right: 0;
}

.metric-card span {
  display: block;
  color: #777777;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin: 10px 0 5px;
  color: #1f2937;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1;
  letter-spacing: 0;
}

.metric-card small {
  color: #8a8a8a;
  font-size: 13px;
}

.metric-card.alert-card strong {
  color: #e04b43;
}

.metrics-ops-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  border-bottom: 1px solid #dddddd;
  background: #f8fafc;
}

.metric-op-tile {
  min-height: 78px;
  padding: 14px 18px;
  border-right: 1px solid #dddddd;
}

.metric-op-tile:last-child {
  border-right: 0;
}

.metric-op-tile span {
  display: block;
  color: #6d7480;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.metric-op-tile strong {
  display: block;
  margin-top: 8px;
  color: #26313d;
  font-size: 24px;
  line-height: 1;
}

.metric-op-tile.warning strong {
  color: #d97706;
}

.metrics-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr) minmax(280px, .8fr);
  gap: 18px;
  padding: 22px;
}

.metric-panel {
  min-width: 0;
  border: 1px solid #dddddd;
  background: #ffffff;
}

.metric-panel-wide {
  grid-column: span 2;
}

.metric-panel-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid #dddddd;
  background: #023047;
  color: #ffffff;
}

.metric-panel-head h3 {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
}

.metric-panel-head span {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
}

.metric-sales-chart {
  min-height: 286px;
  display: flex;
  align-items: end;
  gap: 9px;
  padding: 22px 18px 18px;
  overflow-x: auto;
}

.metric-sales-day {
  flex: 1 0 48px;
  min-width: 48px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 8px;
  color: #666666;
  text-align: center;
  font-size: 12px;
}

.metric-sales-bars {
  height: 210px;
  display: grid;
  grid-template-columns: repeat(4, minmax(7px, 1fr));
  gap: 4px;
  align-items: end;
}

.metric-sales-bars i {
  display: block;
  min-height: 0;
  border-radius: 3px 3px 0 0;
}

.metric-sales-bars .sales {
  height: var(--sales-height);
  background: #1298cf;
}

.metric-sales-bars .refunds {
  height: var(--refund-height);
  background: #e04b43;
}

.metric-sales-bars .tickets {
  height: var(--ticket-height);
  background: #94a3b8;
}

.metric-sales-bars .closed {
  height: var(--closed-height);
  background: #22c55e;
}

.metric-sales-day small,
.metric-sales-day span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-sales-day small {
  color: #777777;
}

.metric-sales-day span {
  color: #3f4c59;
  font-size: 11px;
  font-weight: 800;
}

.metric-sales-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 0 18px 18px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.metric-sales-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.metric-sales-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.metric-sales-legend .sales { background: #1298cf; }
.metric-sales-legend .refunds { background: #e04b43; }
.metric-sales-legend .tickets { background: #94a3b8; }
.metric-sales-legend .closed { background: #22c55e; }

.metric-list-panel {
  min-height: 286px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
}

.metric-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 12px;
  align-items: center;
}

.metric-list-row strong,
.metric-list-row span {
  display: block;
}

.metric-list-row strong {
  overflow: hidden;
  color: #3f4c59;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-list-row span {
  color: #888888;
  font-size: 12px;
}

.metric-list-row em {
  color: #26313d;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.metric-list-bar {
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf1;
}

.metric-list-bar span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #1298cf;
}

.metric-cash-grid {
  min-height: 286px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.metric-cash-tile {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  border: 1px solid #dfe5ec;
  border-radius: 6px;
  background: #f8fafc;
}

.metric-cash-tile span {
  color: #6d7480;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.metric-cash-tile strong {
  color: #26313d;
  font-size: 22px;
  line-height: 1;
}

.metric-time-report {
  margin: 0 22px 22px;
  overflow: hidden;
  border-color: #d7dee7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.metric-time-report .metric-panel-head {
  min-height: 56px;
  padding: 0 18px;
  background: #023047;
}

.metric-time-report .metric-panel-head h3 {
  color: #ffffff;
  font-size: 17px;
}

.metric-time-report .metric-panel-head span {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
}

.metric-time-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e4e9ef;
  background: #ffffff;
}

.metric-time-card {
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid #dce3eb;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.metric-time-card span,
.metric-time-table-title {
  color: #777777;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.metric-time-card strong {
  display: block;
  margin-top: 8px;
  color: #3f4c59;
  font-size: clamp(26px, 2.1vw, 34px);
  line-height: 1;
}

.metric-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.metric-time-worker-type-wrap {
  margin: 0 18px 18px;
}

.metric-time-table-wrap {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce3eb;
  border-radius: 8px;
  background: #ffffff;
}

.metric-time-table-title {
  margin: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e5eaf0;
  background: #f8fafc;
}

.metric-time-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  color: #555555;
  font-size: 13px;
}

.metric-time-table th,
.metric-time-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}

.metric-time-table th {
  color: #6d7480;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.metric-time-table td {
  overflow-wrap: anywhere;
}

.metric-time-table tbody tr:nth-child(even) {
  background: #fbfdff;
}

.metric-time-table tbody tr:hover {
  background: #f3f8fc;
}

.metric-time-table td:nth-child(n + 2),
.metric-time-table th:nth-child(n + 2) {
  text-align: right;
  white-space: nowrap;
}

.metric-time-worker-type-wrap .metric-time-table th:nth-child(2),
.metric-time-worker-type-wrap .metric-time-table td:nth-child(2),
.metric-time-table-status th:nth-child(2),
.metric-time-table-status td:nth-child(2) {
  text-align: left;
}

.metric-time-table-staff th:first-child,
.metric-time-table-staff td:first-child {
  width: 46%;
}

.metric-time-table-type th:first-child,
.metric-time-table-type td:first-child {
  width: 50%;
}

.metric-time-table-worker-type th:first-child,
.metric-time-table-worker-type td:first-child {
  width: 28%;
}

.metric-time-table-worker-type th:nth-child(2),
.metric-time-table-worker-type td:nth-child(2) {
  width: 20%;
}

.metric-time-table-status th:first-child,
.metric-time-table-status td:first-child {
  width: 30%;
}

.metric-time-table-status th:nth-child(2),
.metric-time-table-status td:nth-child(2) {
  width: 22%;
}

.metric-time-table-department th:first-child,
.metric-time-table-department td:first-child {
  width: 42%;
}

.metric-time-table-task-worker th:first-child,
.metric-time-table-task-worker td:first-child,
.metric-time-table-task-category th:first-child,
.metric-time-table-task-category td:first-child,
.metric-time-table-task-department th:first-child,
.metric-time-table-task-department td:first-child {
  width: 46%;
}

.metric-time-task-detail-wrap .metric-time-table th:first-child,
.metric-time-task-detail-wrap .metric-time-table td:first-child {
  width: 30%;
}

.metric-time-task-detail-wrap .metric-time-table th:nth-child(2),
.metric-time-task-detail-wrap .metric-time-table td:nth-child(2) {
  width: 18%;
  text-align: left;
}

.metric-time-task-detail-wrap .metric-time-table th:nth-child(3),
.metric-time-task-detail-wrap .metric-time-table td:nth-child(3) {
  width: 14%;
  text-align: left;
}

.metric-time-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid #d6dee8;
  border-radius: 999px;
  background: #f8fafc;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-time-badge-status {
  background: #eef6ff;
  border-color: #c9e3ff;
  color: #155b8a;
}

.metric-time-badge-type {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.metric-time-badge-type.metric-time-badge-repair {
  background: #fff3e0;
  border-color: #ffd0a3;
  color: #703600;
}

.metric-time-badge-type.metric-time-badge-quick-sale,
.metric-time-badge-type.metric-time-badge-sale {
  background: #e0f7ff;
  border-color: #9bd8e8;
  color: #06485c;
}

.metric-time-badge-type.metric-time-badge-trade-in,
.metric-time-badge-type.metric-time-badge-tradein {
  background: #fff7db;
  border-color: #ffe08a;
  color: #6f4c00;
}

.metric-time-badge-type.metric-time-badge-quote {
  background: #fff7db;
  border-color: #e8c76a;
  color: #6d520b;
}

.metric-time-badge-type.metric-time-badge-refurbishment {
  background: #e8f0fb;
  border-color: #9fbfe0;
  color: #244d7a;
}

.metric-time-badge-type.metric-time-badge-task,
.metric-time-badge-type.metric-time-badge-tarea {
  background: #e9f6fb;
  border-color: #cae8f5;
  color: #07566b;
}

.metric-time-badge-task-category {
  background: #eefbf3;
  border-color: #c9eed6;
  color: #166534;
}

.metric-time-badge-department {
  background: #f5f5f5;
  border-color: #dedede;
  color: #4b5563;
  text-transform: capitalize;
}

.metric-time-badge-sales {
  background: #fff1f1;
  border-color: #ffd1d1;
  color: #b42318;
}

.metric-time-badge-workshop {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.metric-time-badge-support {
  background: #f5f0ff;
  border-color: #ddd1ff;
  color: #6d28d9;
}

.metric-time-badge-neutral {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.metric-time-badge-tone-red {
  background: #fff1f1;
  border-color: #fecaca;
  color: #dc2626;
}

.metric-time-badge-tone-blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.metric-time-badge-tone-green {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}

.metric-time-badge-tone-purple {
  background: #f5f0ff;
  border-color: #ddd1ff;
  color: #6d28d9;
}

.metric-time-badge-tone-magenta {
  background: #fdf4ff;
  border-color: #f5d0fe;
  color: #c026d3;
}

.metric-time-badge-tone-amber {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.metric-time-badge-tone-orange {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.metric-time-badge-tone-cyan {
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #0891b2;
}

.metric-time-badge-tone-teal {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0f766e;
}

.metric-time-badge-tone-indigo {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4f46e5;
}

.metric-time-badge-tone-gray,
.metric-time-badge-tone-slate {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.metric-chart-empty,
.metrics-empty {
  color: #888888;
  font-size: 14px;
  text-align: center;
}

.metric-chart-empty {
  width: 100%;
  align-self: center;
}

.metrics-empty {
  padding: 0 22px 26px;
}

@media (max-width: 1050px) {
  .metrics-card-grid,
  .metrics-ops-grid,
  .metrics-analysis-grid,
  .metric-time-card-grid,
  .metric-time-grid {
    grid-template-columns: 1fr;
  }

  .metric-panel-wide {
    grid-column: auto;
  }

  .metric-card,
  .metric-op-tile {
    border-right: 0;
    border-bottom: 1px solid #dddddd;
  }

  .metric-card:last-child,
  .metric-op-tile:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .metrics-title-bar {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 16px;
  }

  .metrics-filter-row,
  .metrics-filter-row label,
  .metrics-filter-row select,
  .metrics-filter-row input,
  .metrics-filter-row .btn {
    width: 100%;
  }

  .metrics-analysis-grid,
  .metric-time-grid {
    padding: 14px;
  }

  .metric-cash-grid {
    grid-template-columns: 1fr;
  }

  .metric-time-report {
    margin-inline: 14px;
  }

  .metric-time-worker-type-wrap {
    margin-inline: 14px;
  }

  .metric-time-table {
    min-width: 520px;
  }

  .metric-time-table-wrap {
    overflow-x: auto;
  }
}

.reports-content > p {
  margin: 0 0 18px;
  font-size: 15px;
}

.report-group {
  display: inline-block;
  width: min(100%, 320px);
  vertical-align: top;
  margin: 0 26px 26px 0;
  padding: 0;
}

.report-group h3 {
  margin: 0 0 10px;
  color: #555555;
  font-size: 20px;
  font-weight: 500;
}

.report-group ul {
  margin: 0 0 0 28px;
  padding: 0;
}

.report-group li {
  margin: 3px 0;
  color: #666666;
}

.report-group button {
  color: #008ed0;
  font-size: 15px;
  text-align: left;
}

.report-group button:hover {
  color: #006d9f;
  text-decoration: underline;
}

.reports-menu-item {
  position: relative;
  display: inline-flex;
  align-self: stretch;
}

.reports-menu-trigger {
  min-height: 46px;
  padding: 0 14px;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.reports-menu-item.open .reports-menu-trigger,
.reports-menu-trigger:hover {
  background: #262626;
}

.reports-menu-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 40;
  display: none;
  min-width: 240px;
  max-height: min(620px, calc(100vh - 170px));
  overflow-y: auto;
  padding: 8px 0;
  background: #303030;
  border: 1px solid #1f1f1f;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.reports-menu-item.open .reports-menu-dropdown {
  display: block;
}

.reports-menu-option {
  display: block;
  width: 100%;
  padding: 8px 18px;
  color: #f4f4f5;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}

.reports-menu-option:hover {
  background: #404040;
  color: #ffffff;
}

.report-detail-section {
  border: 1px solid #d8dee7;
  border-radius: 8px;
  padding: clamp(18px, 2.1vw, 28px);
  background: #ffffff;
  margin-bottom: 26px;
  min-width: 0;
  overflow: hidden;
}

.report-detail-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.report-detail-titlebar h2 {
  margin: 2px 0 4px;
  color: #1f2937;
  font-size: 1.25rem;
}

.report-detail-titlebar p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}

.report-detail-actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.report-detail-filters,
.report-detail-extra-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.report-detail-date {
  display: grid;
  gap: 4px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.report-detail-date input,
.report-detail-date select {
  min-height: 36px;
  border: 1px solid #cfd6e2;
  border-radius: 6px;
  padding: 0 10px;
  color: #1f2937;
  font: inherit;
}

.report-detail-cards {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin-bottom: 22px;
}

.report-detail-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

#report-detail-table {
  min-width: 860px;
}

.staff-filter-panel {
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-right: 1px solid #d8d8d8;
  background: #f8f8f8;
}

.staff-filter-title {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: #e4e9ef;
  color: #5f5f5f;
  font-size: 16px;
}

.staff-filter-title svg {
  width: 16px;
  height: 16px;
  fill: #666666;
}

.staff-filter-body {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
}

.staff-filter-panel label {
  color: #555555;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.staff-location-pill {
  min-height: 34px;
  width: 100%;
  padding: 0 12px;
  border-radius: 4px;
  background: #e4e9ef;
  color: #666666;
  font-weight: 700;
}

.staff-roles {
  display: grid;
  gap: 8px;
}

.staff-roles > label:first-child {
  margin-bottom: 2px;
}

.staff-roles label:not(:first-child) {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #555555;
  font-size: 14px;
}

.staff-roles input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 0;
  flex: 0 0 14px;
}

.staff-roles-title {
  font-weight: 600;
  color: #2c4054;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Position badges on the Staff table */
.staff-position-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #eef1f5;
  color: #2c4054;
  white-space: nowrap;
}

.staff-position-badge.staff-position-location-admin   { background: #ede9fe; color: #5b21b6; }
.staff-position-badge.staff-position-manager          { background: #dbeafe; color: #1e40af; }
.staff-position-badge.staff-position-inventory-manager{ background: #fef3c7; color: #92400e; }
.staff-position-badge.staff-position-shift-lead       { background: #fce7f3; color: #9d174d; }
.staff-position-badge.staff-position-sales            { background: #dcfce7; color: #166534; }
.staff-position-badge.staff-position-technician       { background: #cffafe; color: #155e75; }

.staff-department-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Department badges reuse the system's real status color language:
   sales=red, workshop=blue, inventory=green, support=purple (the hues each
   department's ticket statuses already use), plus indigo/teal for the
   staff-only departments. */
.staff-department-sales     { background: #fde8e8; color: #b91c1c; }
.staff-department-workshop  { background: #e3f0fc; color: #1565c0; }
.staff-department-inventory { background: #e8f5e9; color: #2e7d32; }
.staff-department-support   { background: #f0ebfe; color: #6b21a8; }
.staff-department-management{ background: #e5e7fb; color: #3730a3; }
.staff-department-neutral   { background: #eceff1; color: #546e7a; }
.staff-department-auto      { background: #f1f5f9; color: #64748b; }

.staff-filter-footer {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 18px 16px 28px;
  border-top: 1px solid #d8d8d8;
  background: #f3f3f3;
}

.staff-filter-footer .btn {
  width: 124px;
}

.staff-main {
  min-width: 0;
}

.staff-title-bar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  background: #4a4a4a;
  color: #ffffff;
}

.staff-title-bar h2 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
}

.staff-title-bar h2 span {
  color: #d2d2d2;
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
}

.staff-title-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.staff-title-actions button {
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
}

.staff-section-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 22px 0;
  background: #ffffff;
}

.staff-section-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #f6f6f6;
  color: #5f5f5f;
  font-weight: 700;
}

.staff-section-tabs button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.staff-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(110px, auto) auto auto auto;
  align-items: end;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid #eeeeee;
  background: #fbfbfb;
}

.staff-checkbox-field {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #555555;
  font-size: 14px;
}

.staff-checkbox-field input {
  width: 16px;
  height: 16px;
  min-height: 0;
}

/* Long-label checkbox that takes its own row in the staff add form grid. */
.staff-checkbox-field-wide {
  grid-column: 1 / -1;
  padding: 2px 0;
}

.staff-attendance-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.4fr auto;
  align-items: end;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid #eeeeee;
  background: #fbfbfb;
}

.staff-overview-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 22px 18px;
}

.staff-overview-head h3 {
  margin: 0;
  color: #5f5f5f;
  font-size: 18px;
  font-weight: 400;
}

.staff-view-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5f5f5f;
  font-size: 14px;
}

.staff-view-controls select {
  min-height: 34px;
  width: 108px;
}

.staff-view-controls strong {
  margin-left: 16px;
}

.staff-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
}

.staff-table {
  width: 100%;
  min-width: 1260px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #5f5f5f;
  font-size: 14px;
}

.staff-table th,
.staff-table td {
  height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid #dcdcdc;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-table th {
  background: #e4e9ef;
  color: #666666;
  font-weight: 800;
}

.staff-table tbody tr:hover {
  background: #f7f7f7;
}

.staff-table th:nth-child(1),
.staff-table td:nth-child(1) {
  width: 170px;
}

.staff-table th:nth-child(2),
.staff-table td:nth-child(2) {
  width: 115px;
}

.staff-table th:nth-child(3),
.staff-table td:nth-child(3) {
  width: 115px;
}

.staff-table th:nth-child(4),
.staff-table td:nth-child(4) {
  width: 80px;
}

.staff-table th:nth-child(5),
.staff-table td:nth-child(5) {
  width: 170px;
}

.staff-table th:nth-child(6),
.staff-table td:nth-child(6) {
  width: 105px;
}

.staff-table th:nth-child(7),
.staff-table td:nth-child(7) {
  width: 140px;
}

.staff-table th:nth-child(8),
.staff-table td:nth-child(8) {
  width: 75px;
}

.staff-table th:nth-child(9),
.staff-table td:nth-child(9) {
  width: 120px;
}

.staff-table th:nth-child(10),
.staff-table td:nth-child(10) {
  width: 155px;
}

.staff-name-cell {
  font-weight: 600;
}

.staff-active-badge {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  background: #50ad51;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.staff-actions-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.staff-empty-cell {
  padding: 22px;
  color: #888888;
}

.staff-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 32px;
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
  background: #ffffff;
}

.staff-edit-btn {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: var(--accent);
  clip-path: polygon(12% 72%, 10% 92%, 30% 88%, 86% 32%, 68% 14%);
}

.staff-delete-btn {
  color: #c73f3f;
  font-size: 12px;
}

.staff-delete-btn:disabled {
  color: #c7c7c7;
  cursor: default;
}

.staff-import-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin: 14px 22px 0;
  padding: 16px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background: #f7f7f7;
}

.staff-import-bar input {
  min-height: 34px;
  min-width: 0;
}

.staff-table .team-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.staff-table .team-actions .btn {
  min-height: 34px;
  padding: 0 12px;
}

.staff-attendance-table {
  min-width: 1100px;
}

/* Staff redesign: operational layout aligned with the newer ticket views. */
.staff-page {
  --staff-accent: #0ea5a4;
  --staff-accent-dark: #0f766e;
  --staff-panel: #ffffff;
  --staff-line: #d8e1ea;
  --staff-muted: #66758a;
}

.staff-shell {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.staff-filter-panel,
.staff-main {
  border: 1px solid var(--staff-line);
  border-radius: 6px;
  background: var(--staff-panel);
  box-shadow: 0 12px 28px rgba(31, 42, 55, 0.06);
  overflow: hidden;
}

.staff-filter-panel {
  min-height: auto;
  border-right: 1px solid var(--staff-line);
}

.staff-filter-title,
.staff-title-bar {
  border-top: 4px solid var(--staff-accent);
  background: #243244;
  color: #ffffff;
}

.staff-filter-title {
  min-height: 54px;
  padding: 0 18px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.staff-filter-title svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.staff-filter-body {
  gap: 14px;
  padding: 18px;
}

.staff-filter-panel label,
.staff-form label,
.staff-attendance-form label,
.staff-edit-card label {
  color: #5f6f83;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.staff-filter-panel input,
.staff-filter-panel select,
.staff-form input,
.staff-form select,
.staff-attendance-form input,
.staff-attendance-form select,
.staff-edit-card input,
.staff-edit-card select {
  min-height: 40px;
  border: 1px solid #cbd6e2;
  border-radius: 5px;
  background: #ffffff;
  color: #253244;
  font-size: 14px;
}

.staff-form select.staff-multi-select,
.staff-edit-card select.staff-multi-select {
  min-height: 126px;
  padding: 7px 9px;
}

.staff-roles {
  gap: 9px;
}

.staff-roles label:not(:first-child) {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d8e1ea;
  border-radius: 5px;
  background: #f7fafc;
  color: #2e3a4c;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.staff-roles-title {
  color: #243244;
  font-size: 12px;
  letter-spacing: 0;
}

.staff-filter-footer {
  gap: 10px;
  justify-items: stretch;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--staff-line);
  background: #f7fafc;
}

.staff-filter-footer .btn {
  width: 100%;
  min-height: 40px;
}

.staff-title-bar {
  min-height: 72px;
  padding: 14px 20px;
  box-shadow: inset 4px 0 0 var(--staff-accent);
}

.staff-title-bar h2 {
  display: grid;
  gap: 3px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.staff-title-bar h2::before {
  content: "STAFF";
  width: max-content;
  padding: 2px 7px;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  background: #ccfbf1;
  color: #115e59;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.staff-title-bar h2 span {
  color: #99f6e4;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.staff-title-actions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #526175;
  border-radius: 5px;
  background: #1b2635;
  color: #ffffff;
  font-weight: 800;
}

.staff-title-actions button:hover {
  border-color: var(--staff-accent);
}

.staff-section-tabs {
  gap: 0;
  padding: 14px 20px 0;
  background: #ffffff;
}

.staff-section-tabs button {
  border-radius: 5px;
  min-height: 38px;
  padding: 0 16px;
}

.staff-section-tabs button.active {
  border-color: var(--staff-accent);
  background: var(--staff-accent);
}

.staff-form,
.staff-attendance-form {
  margin: 16px 20px 0;
  border: 1px solid var(--staff-line);
  border-radius: 6px;
  background: #f8fbfd;
}

.staff-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  padding: 18px 20px 0;
}

.staff-summary-strip article {
  min-height: 86px;
  padding: 15px 16px;
  border: 1px solid var(--staff-line);
  border-left: 4px solid var(--staff-accent);
  border-radius: 6px;
  background: #f8fbfd;
}

.staff-summary-strip span {
  display: block;
  color: var(--staff-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.staff-summary-strip strong {
  display: block;
  margin-top: 8px;
  color: #253244;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.staff-overview-head {
  padding: 22px 20px 14px;
}

.staff-overview-head h3 {
  color: #253244;
  font-size: 18px;
  font-weight: 900;
}

.staff-overview-head h3 strong {
  color: var(--staff-accent-dark);
}

.staff-view-controls {
  color: var(--staff-muted);
  font-weight: 700;
}

.staff-table-wrap {
  margin: 0 20px 20px;
  border: 1px solid var(--staff-line);
  border-radius: 6px;
  background: #ffffff;
}

.staff-table {
  width: 100%;
  color: #2e3a4c;
  font-size: 13px;
}

.staff-list-table {
  min-width: 1180px;
  table-layout: fixed;
}

.staff-attendance-table {
  min-width: 1100px;
  table-layout: auto;
}

.staff-table th,
.staff-table td {
  height: 46px;
  padding: 9px 12px;
  border-bottom: 1px solid #e5ebf1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-table th {
  background: #eaf0f6;
  color: #4c5d70;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-list-table th:nth-child(1),
.staff-list-table td:nth-child(1) { width: 14%; }
.staff-list-table th:nth-child(2),
.staff-list-table td:nth-child(2) { width: 12%; }
.staff-list-table th:nth-child(3),
.staff-list-table td:nth-child(3) { width: 10%; }
.staff-list-table th:nth-child(4),
.staff-list-table td:nth-child(4) { width: 16%; }
.staff-list-table th:nth-child(5),
.staff-list-table td:nth-child(5) { width: 9%; }
.staff-list-table th:nth-child(6),
.staff-list-table td:nth-child(6) { width: 11%; }
.staff-list-table th:nth-child(7),
.staff-list-table td:nth-child(7) { width: 6%; }
.staff-list-table th:nth-child(8),
.staff-list-table td:nth-child(8) { width: 10%; }
.staff-list-table th:nth-child(9),
.staff-list-table td:nth-child(9) {
  width: 150px;
  min-width: 150px;
  overflow: visible;
}

.staff-list-table th:nth-child(2),
.staff-list-table td:nth-child(2),
.staff-list-table th:nth-child(9),
.staff-list-table td:nth-child(9) {
  overflow: visible;
  white-space: normal;
}

.staff-list-table th:nth-child(9),
.staff-list-table td:nth-child(9) {
  position: sticky;
  right: 0;
  z-index: 1;
  padding-left: 8px;
  padding-right: 14px;
  background: var(--surface);
  box-shadow: calc(var(--space-2) * -1) 0 var(--space-3) calc(var(--space-3) * -1)
    color-mix(in srgb, var(--content-1) 65%, transparent);
}

.staff-list-table th:nth-child(9) {
  z-index: 2;
  background: var(--surface-2);
}

.staff-table tbody tr:hover {
  background: #f5fbfb;
}

.staff-list-table tbody tr:hover td:nth-child(9) {
  background: var(--surface-hover);
}

.staff-name-cell {
  color: #253244;
  font-weight: 900;
}

.team-pin {
  color: #8091a6;
  font-weight: 900;
}

.staff-role-badge,
.staff-position-badge,
.staff-department-badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.staff-role-badge {
  background: #e0f2fe;
  color: #075985;
}

/* User Type uses a grayscale ramp (not used anywhere else in the system), so
   roles read as a distinct dimension and never clash with status/department
   colors. Darker = more senior. */
.staff-role-viewer { background: #f8fafc; color: #94a3b8; border: 1px solid #e2e8f0; }
.staff-role-worker { background: #e2e8f0; color: #334155; }
.staff-role-admin { background: #94a3b8; color: #0f172a; }
.staff-role-superadmin { background: #334155; color: #ffffff; }
.staff-role-super-admin { background: #334155; color: #ffffff; }
.staff-role-support { background: #e2e8f0; color: #334155; }
.staff-role-inventory { background: #e2e8f0; color: #334155; }
.staff-role-sales { background: #e2e8f0; color: #334155; }
.staff-role-technician { background: #e2e8f0; color: #334155; }
.staff-role-human-resources { background: #e2e8f0; color: #334155; }

.staff-position-badge {
  background: #eef1f5;
  color: #2c4054;
}

.staff-position-super-admin { background: #fee2e2; color: #991b1b; }
.staff-position-admin { background: #ede9fe; color: #5b21b6; }
.staff-position-support { background: #fef3c7; color: #92400e; }
.staff-position-inventory { background: #e0f2fe; color: #075985; }
.staff-position-sales { background: #dcfce7; color: #166534; }
.staff-position-technician { background: #cffafe; color: #155e75; }
.staff-position-human-resources { background: #fce7f3; color: #9d174d; }

.staff-department-human-resources { background: #e0f2f1; color: #0f766e; }

.staff-badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.staff-active-badge {
  min-width: 38px;
  border-radius: 999px;
  background: #22c55e;
}

.staff-active-badge.inactive {
  background: #e5e7eb;
  color: #475569;
}

.staff-table .team-actions .btn {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  font-weight: 900;
  flex: 0 0 auto;
}

.staff-table .team-actions .btn-secondary {
  border-color: #1f6d93;
  background: #0b77a5;
  color: #ffffff;
}

.staff-table .team-actions .btn-danger {
  background: #c93535;
  color: #ffffff;
}

.staff-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.58);
}

.staff-edit-modal.hidden {
  display: none;
}

.staff-edit-card {
  width: min(860px, 100%);
  max-height: min(92vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
}

.staff-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-top: 4px solid var(--staff-accent);
  background: #243244;
  color: #ffffff;
  box-shadow: inset 4px 0 0 var(--staff-accent);
}

.staff-edit-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.staff-edit-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ccfbf1;
  color: #115e59;
  font-weight: 900;
}

.staff-edit-kicker {
  color: #99f6e4;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.staff-edit-head h3 {
  margin: 2px 0 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
}

.staff-edit-close {
  width: 38px;
  height: 38px;
  border-radius: 5px;
  background: #1b2635;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
}

.staff-edit-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px;
  background: #f4f7fa;
}

.staff-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.staff-edit-pin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.staff-edit-pin-row .btn {
  min-height: 40px;
  border-radius: 5px;
}

.staff-edit-active {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #cbd6e2;
  border-radius: 5px;
  background: #ffffff;
}

.staff-edit-active input {
  width: 16px;
  height: 16px;
  min-height: 0;
}

.staff-edit-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid #d8e1ea;
  background: #ffffff;
}

.staff-edit-foot .btn {
  min-height: 40px;
  min-width: 112px;
  border-radius: 5px;
}

@media (max-width: 1320px) {
  .staff-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .staff-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .staff-summary-strip,
  .staff-edit-grid {
    grid-template-columns: 1fr;
  }

  .staff-table-wrap,
  .staff-form,
  .staff-attendance-form {
    margin-left: 14px;
    margin-right: 14px;
  }

  .staff-edit-modal {
    padding: 10px;
  }

  .staff-edit-head,
  .staff-edit-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.settings-page {
  min-height: 100%;
  padding: 48px 5vw 72px;
  background: #f4f4f4;
}

.settings-shell {
  background: #ffffff;
  border: 1px solid #dcdcdc;
}

.settings-title-bar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 22px;
  background: #4a4a4a;
  color: #ffffff;
}

.settings-title-bar h2 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
}

.settings-title-bar p {
  margin: 4px 0 0;
  color: #dddddd;
  font-size: 13px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
}

.settings-panel {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background: #fbfbfb;
  padding: 18px;
}

.settings-panel h3 {
  margin: 0 0 14px;
  color: #5f5f5f;
  font-size: 17px;
}

.settings-panel-wide {
  grid-column: 1 / -1;
}

.settings-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-panel-title-row h3 {
  margin: 0;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-form-grid.compact {
  margin-top: 14px;
}

.settings-wide-field {
  grid-column: 1 / -1;
}

.settings-panel textarea {
  resize: vertical;
}

.settings-toggle-list {
  display: grid;
  gap: 12px;
}

.settings-toggle-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #555555;
  font-size: 14px;
}

.settings-toggle-list input {
  width: 16px;
  height: 16px;
  min-height: 0;
}

.settings-discount-rules {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

/* Legacy .settings-discount-rule / -check / -remove rules removed —
   replaced by the v2 cards inside .settings-grid-v2 (see Settings page v2
   block further down in this file). The new HTML structures rules as
   header + dropdown row + access blocks instead of a single 7-col strip. */

.settings-readonly-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-readonly-grid div {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  background: #ffffff;
}

.settings-readonly-grid span {
  color: #777777;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.settings-readonly-grid strong {
  color: #333333;
  font-size: 16px;
}

.inventory-title-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  background: #4a4a4a;
  color: #ffffff;
}

.inventory-title-bar h2 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0;
}

#inventory-page .inventory-title-bar h2 {
  white-space: nowrap;
}

.inventory-title-bar .inventory-page-subtitle,
.inventory-title-bar #inventory-page-subtitle {
  color: #cfcfcf;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
}

.inventory-toolbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 22px 8px;
}

.inventory-view-controls,
.inventory-page-controls,
.inventory-actions,
.inventory-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Customer toolbar is hidden entirely in devices subsection — devices has its
   own toolbar with kebab + add buttons on the right side. */

/* Purchase Orders list — small ID badge in the first column. */
.po-id-badge {
  display: inline-block;
  background: #e5e7eb;
  color: #374151;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'SF Mono', Menlo, monospace;
}

/* =========================================================================
   New Purchase Order page
   ========================================================================= */
.newpo-page {
  background: #f3f4f6;
  min-height: calc(100vh - 60px);
}
.newpo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.newpo-breadcrumb {
  display: flex;
  gap: 6px;
  font-size: 0.85rem;
  color: #6b7280;
}
.newpo-breadcrumb span:last-child { color: #1971c2; }
.newpo-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.newpo-top-actions .btn { font-size: 0.85rem; padding: 6px 14px; }
.newpo-ms-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  background: linear-gradient(180deg, #e5bd4d 0%, #c89221 100%);
  border: 1px solid #a77414;
  border-radius: 4px;
  color: #1f2937;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  cursor: pointer;
}
.newpo-ms-import-btn:hover {
  background: linear-gradient(180deg, #f0cb64 0%, #d29b27 100%);
}
.newpo-ms-import-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.28);
}
.newpo-ms-logo {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.18);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.16);
}
.newpo-ms-logo-m,
.newpo-ms-logo-s {
  position: absolute;
  font-family: Arial Black, Impact, sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}
.newpo-ms-logo-m {
  top: -7px;
  left: 6px;
  color: #050505;
  font-size: 25px;
}
.newpo-ms-logo-s {
  left: 7px;
  bottom: -9px;
  color: #e42d1d;
  font-size: 34px;
}
.newpo-ms-logo-lg {
  width: 48px;
  height: 48px;
  border-radius: 5px;
}
.newpo-ms-logo-lg .newpo-ms-logo-m {
  top: -10px;
  left: 10px;
  font-size: 41px;
}
.newpo-ms-logo-lg .newpo-ms-logo-s {
  left: 10px;
  bottom: -14px;
  font-size: 58px;
}
.btn.btn-outline {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  border-radius: 4px;
  cursor: pointer;
}
.btn.btn-outline:hover { background: #f9fafb; border-color: #9ca3af; }

.newpo-header {
  background: #4b5563;
  color: #fff;
  padding: 14px 22px;
}
.newpo-header h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }

.newpo-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 18px 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .newpo-layout { grid-template-columns: 1fr; }
}

/* --- Sidebar --- */
.newpo-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.newpo-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #4b5563;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px 4px 0 0;
}
.newpo-section-head svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
}
.newpo-summary, .newpo-supplier, .newpo-tracking {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.newpo-status-pill {
  display: block;
  width: calc(100% - 24px);
  margin: 12px;
  padding: 10px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: default;
}
.newpo-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 8px;
}
.newpo-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.newpo-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: #f3f4f6;
  border-radius: 4px;
  color: #6b7280;
  flex: none;
}
.newpo-field-icon svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
}
.newpo-field input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.82rem;
  background: #fff;
  color: #374151;
}
.newpo-field input[type="number"] { text-align: right; }
.newpo-field input::placeholder { color: #9ca3af; }
.newpo-field input:focus { outline: none; border-color: #1971c2; }
.newpo-totals {
  border-top: 1px solid #e5e7eb;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}
.newpo-totals > div {
  display: flex;
  justify-content: space-between;
  color: #6b7280;
}
.newpo-totals strong { color: #1f2937; }
.newpo-supplier select {
  width: calc(100% - 24px);
  margin: 12px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.88rem;
  background: #fff;
}
.newpo-supplier-control {
  display: flex;
  flex-direction: column;
}
.newpo-tracking .newpo-fields {
  padding-top: 12px;
}
.newpo-tracking-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 12px 12px;
  padding: 10px 11px;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}
.newpo-tracking-status a {
  color: #0f766e;
  text-decoration: none;
  font-weight: 800;
}
.newpo-tracking-status a:hover {
  text-decoration: underline;
}
.newpo-link {
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  display: block;
  text-align: center;
  background: #1971c2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.newpo-link:hover { background: #155a9e; }

/* --- Main panel --- */
.newpo-main {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.newpo-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 6px 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.newpo-tabs {
  display: flex;
  gap: 4px;
}
.newpo-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #6b7280;
  cursor: pointer;
}
.newpo-tab svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
}
.newpo-tab.active {
  background: #1971c2;
  color: #fff;
  border-color: #1971c2;
}
.newpo-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4b5563;
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  padding: 0 4px;
  font-size: 0.72rem;
}
.newpo-tab.active .newpo-tab-badge { background: #fff; color: #1971c2; }

.newpo-date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #374151;
}
.newpo-date input[type="date"] {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.82rem;
}
.newpo-date-hint {
  color: #6b7280;
  font-size: 0.75rem;
}
.newpo-rush {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.newpo-rush input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: #1971c2;
}

.newpo-panel-head {
  background: #4b5563;
  color: #fff;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 600;
}
.newpo-panel-body { padding: 16px; }

/* Catalog search */
.newpo-catalog {
  margin-bottom: 16px;
}
.newpo-catalog-label {
  font-size: 0.85rem;
  color: #374151;
  margin-bottom: 6px;
}
.newpo-catalog-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.newpo-catalog-row input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.88rem;
}
.newpo-catalog-results {
  margin-top: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.newpo-catalog-results.hidden { display: none; }
.newpo-catalog-results-item {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}
.newpo-catalog-results-item:last-child { border-bottom: none; }
.newpo-catalog-results-item:hover { background: #eff6ff; }
.newpo-catalog-results-item small { color: #9ca3af; }

/* Subtabs (Reorder Required) */
.newpo-subtabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 14px;
}
.newpo-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 0.86rem;
  color: #6b7280;
  cursor: pointer;
}
.newpo-subtab.active {
  color: #1971c2;
  border-bottom-color: #1971c2;
  font-weight: 600;
}
.newpo-subtab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f59e0b;
  color: #fff;
  border-radius: 999px;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  font-size: 0.72rem;
}
.newpo-subpanel-note {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 12px;
}

.newpo-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.newpo-table-actions .btn {
  font-size: 0.82rem;
  padding: 5px 12px;
}
.newpo-table-actions input[type="search"] {
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.82rem;
  min-width: 200px;
}

/* Tables */
.newpo-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.newpo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.newpo-table thead {
  background: #f3f4f6;
}
.newpo-table th {
  padding: 8px;
  text-align: left;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.newpo-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.newpo-table tbody tr:hover { background: #f9fafb; }
.newpo-check { width: 32px; text-align: center; }
/* Row/select-all selection checkboxes: give them a real, comfortable size and
   click target — a global input height was stretching the native checkbox into
   a tiny stretched control that was hard to see and click. */
#new-purchase-order-page .newpo-check input[type="checkbox"],
.newpo-itemlist-table .newpo-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
  accent-color: #16a34a;
  appearance: auto;
  -webkit-appearance: checkbox;
  vertical-align: middle;
  flex: none;
}
.newpo-add-col { width: 44px; text-align: center; }
.newpo-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: #1971c2;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  cursor: pointer;
}
.newpo-add-btn:hover { background: #155a9e; }
.newpo-add-btn:disabled {
  background: #9ca3af;
  cursor: default;
}
.newpo-empty {
  padding: 24px;
  text-align: center;
  color: #6b7280;
  font-size: 0.88rem;
}

/* Item list editable fields */
.newpo-itemlist-table input[type="number"],
.newpo-itemlist-table input[type="text"] {
  width: 80px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.82rem;
  text-align: right;
}
.newpo-itemlist-table input.newpo-note-input {
  width: 140px;
  text-align: left;
}
.newpo-itemlist-table input.newpo-supplier-sku-input {
  width: 120px;
  text-align: left;
}
.newpo-row-remove {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.1rem;
  cursor: pointer;
}
.newpo-row-remove:hover { color: #ef4444; }

/* Item List tab — top/bottom Catalog + action rows */
.newpo-il-catalog { margin-bottom: 14px; }
.newpo-il-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #f3f4f6;
}
.newpo-il-actions:first-of-type { border-top: none; padding-top: 4px; }
.newpo-il-actions .btn { font-size: 0.82rem; padding: 5px 14px; }
.newpo-il-actions .btn-primary {
  background: #1971c2;
  border: 1px solid #1971c2;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.newpo-il-actions .btn-primary:disabled { background: #9ca3af; border-color: #9ca3af; cursor: default; }
.newpo-il-empty-rule { height: 0; }

/* Change Log section (PO Detail) */
.newpo-change-log {
  margin: 18px 22px 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.newpo-change-log-head {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #4b5563;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.newpo-change-log-body { font-size: 0.85rem; }
.newpo-log-row {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}
.newpo-log-row:last-child { border-bottom: none; }
.newpo-log-actor { font-weight: 500; color: #1f2937; }
.newpo-log-summary { color: #6b7280; }
.newpo-log-time { color: #9ca3af; text-align: right; font-size: 0.82rem; }

@media (max-width: 640px) {
  .cp #new-purchase-order-page .newpo-log-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .cp #new-purchase-order-page :where(
    .newpo-log-actor,
    .newpo-log-summary,
    .newpo-log-time
  ) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cp #new-purchase-order-page .newpo-log-time {
    text-align: left;
  }
}

/* Receiving column + Received column on Item List */
.newpo-itemlist-table th.newpo-col-received,
.newpo-itemlist-table th.newpo-col-receiving { white-space: nowrap; text-align: center; }
.newpo-itemlist-table td.newpo-col-received { text-align: center; font-variant-numeric: tabular-nums; color: #1f2937; }
.newpo-itemlist-table td.newpo-col-receiving { text-align: center; }
.newpo-itemlist-table td.newpo-col-receiving input[type="number"] {
  width: 70px;
  text-align: right;
  background: #f0fdf4;
  border-color: #86efac;
}
.newpo-itemlist-table td.newpo-col-receiving input[type="number"]:disabled {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
}
.newpo-receive-controls {
  display: inline-grid;
  grid-template-columns: 70px 132px 112px;
  align-items: center;
  gap: 6px;
  min-width: 326px;
}
.newpo-receive-controls select,
.newpo-receive-controls input[type="text"] {
  height: 28px;
  min-width: 0;
  border: 1px solid #cfd6dd;
  border-radius: 3px;
  background: #ffffff;
  color: #374151;
  font-size: 12px;
  padding: 3px 6px;
}
.newpo-receive-controls input[type="text"] {
  width: 112px;
}
.newpo-receive-controls select:disabled,
.newpo-receive-controls input[type="text"]:disabled {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
}

/* Read-only inputs in Item List rows (edit mode) — grey them out visually */
.newpo-itemlist-table input[readonly] {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}

/* Edit Selected modal */
.newpo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.newpo-modal-card {
  background: #fff;
  border-radius: 6px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.newpo-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.newpo-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #1f2937; }
.newpo-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}
.newpo-modal-close:hover { color: #1f2937; }
.newpo-modal-body { padding: 16px; }
.newpo-modal-hint {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0 0 14px;
  line-height: 1.35;
}
.newpo-modal-hint span { font-weight: 600; color: #1f2937; }
.newpo-modal-field { margin-bottom: 12px; }
.newpo-modal-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}
.newpo-modal-field input,
.newpo-modal-field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.9rem;
}
.newpo-modal-field input:focus,
.newpo-modal-field select:focus { outline: none; border-color: #1971c2; box-shadow: 0 0 0 2px rgba(25, 113, 194, 0.2); }
.newpo-bulk-edit-option {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 1fr);
  align-items: center;
  gap: var(--space-3);
}
.newpo-bulk-edit-option.newpo-bulk-edit-option-only { grid-template-columns: 1fr; }
.newpo-bulk-edit-option > label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  cursor: pointer;
}
.newpo-bulk-edit-option > label input {
  width: auto;
  margin: 0;
}
.newpo-bulk-edit-option > input:disabled,
.newpo-bulk-edit-option > select:disabled {
  background: var(--surface-3);
  color: var(--content-3);
  cursor: not-allowed;
}
.newpo-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}
.newpo-ms-modal-card {
  max-width: min(1480px, 98vw);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
}
.newpo-ms-modal-card .newpo-modal-body {
  overflow: auto;
}
.newpo-ms-modal-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px;
  background: #fff7df;
  border: 1px solid #ead392;
  border-radius: 5px;
}
.newpo-ms-modal-intro strong {
  display: block;
  margin-bottom: 4px;
  color: #1f2937;
  font-size: 0.95rem;
}
.newpo-ms-modal-intro span {
  color: #6b7280;
  font-size: 0.86rem;
}
.newpo-ms-order-field span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
.newpo-ms-preview {
  margin-top: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.newpo-ms-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #1f2937;
  color: #fff;
}
.newpo-ms-preview-head strong {
  display: block;
  font-size: 1rem;
}
.newpo-ms-preview-head span {
  display: block;
  margin-top: 3px;
  color: #d1d5db;
  font-size: 0.82rem;
}
.newpo-ms-existing {
  flex: 0 0 auto;
  background: #fde68a;
  color: #78350f !important;
  border-radius: 999px;
  padding: 4px 9px;
  font-weight: 700;
}
.newpo-ms-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 1px;
  background: #e5e7eb;
}
.newpo-ms-summary-grid > div {
  min-width: 0;
  background: #fff;
  padding: 10px 12px;
}
.newpo-ms-summary-grid span {
  display: block;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.newpo-ms-summary-grid strong {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.newpo-ms-section-title {
  padding: 12px 14px 8px;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.newpo-ms-lines-wrap {
  overflow-x: auto;
  padding: 0 14px 14px;
}
.newpo-ms-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 1040px;
}
.newpo-ms-lines-table th,
.newpo-ms-lines-table td {
  border: 1px solid #e5e7eb;
  padding: 8px 9px;
  vertical-align: top;
}
.newpo-ms-lines-table th {
  background: #f3f4f6;
  color: #374151;
  font-size: 0.74rem;
  text-align: left;
  text-transform: uppercase;
}
.newpo-ms-lines-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.newpo-ms-lines-table small {
  display: block;
  color: #6b7280;
  margin-top: 2px;
}
.newpo-ms-product-thumb {
  width: 58px;
  height: 58px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.newpo-ms-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.newpo-ms-product-thumb-empty {
  color: #9ca3af;
  font-size: 0.68rem;
  text-align: center;
  padding: 4px;
  background: #f9fafb;
}
.newpo-ms-unmatched {
  color: #b45309;
  font-weight: 700;
}
.newpo-ms-empty {
  color: #6b7280;
  font-size: 0.86rem;
  padding: 12px 14px;
}
.newpo-ms-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}
.newpo-ms-address-card {
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 10px 12px;
  background: #f9fafb;
  color: #374151;
  font-size: 0.84rem;
  line-height: 1.45;
}
.newpo-ms-address-card strong {
  display: block;
  margin-bottom: 5px;
  color: #111827;
  text-transform: capitalize;
}
.newpo-ms-done:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 920px) {
  .newpo-ms-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newpo-ms-address-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .newpo-top { align-items: flex-start; flex-direction: column; }
  .newpo-top-actions { width: 100%; justify-content: stretch; }
  .newpo-top-actions .btn { flex: 1 1 auto; }
  .newpo-ms-import-btn { justify-content: center; width: 100%; }
  .newpo-ms-summary-grid { grid-template-columns: 1fr; }
}

/* Modern PO workspace refresh */
.newpo-page {
  background: #f6f7f9;
  color: #111827;
}
.newpo-top {
  position: sticky;
  top: 54px;
  z-index: 45;
  padding: 10px clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid #dde3ea;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}
.newpo-breadcrumb {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
}
.newpo-breadcrumb span:last-child { color: #2563eb; }
.newpo-top-actions .btn {
  min-height: 36px;
  border-radius: 6px;
  font-weight: 700;
}
.newpo-top-actions .btn-secondary,
.newpo-il-actions .btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.newpo-top-actions .btn-secondary:hover,
.newpo-il-actions .btn-primary:hover {
  background: #0d625c;
  border-color: #0d625c;
}
.newpo-ms-import-btn {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
  box-shadow: none;
}
.newpo-ms-import-btn:hover { background: #ffedd5; }
.newpo-ms-blockers {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
}
.newpo-ms-blockers strong {
  display: block;
  margin-bottom: 4px;
}
.newpo-ms-blockers ul {
  margin: 0;
  padding-left: 18px;
}
.newpo-ms-warnings {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}
.newpo-ms-warnings strong {
  display: block;
  margin-bottom: 4px;
}
.newpo-ms-warnings ul {
  margin: 0;
  padding-left: 18px;
}
.newpo-ms-line-unmatched {
  background: #fff7ed;
}
/* MobileSentrix order-link dialog (Place Order → "already ordered on MS?"). */
.newpo-ms-link-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.newpo-ms-link-foot-spacer { flex: 1; }
.newpo-ms-link-skip {
  color: #6b7280;
}
.newpo-mslink-clean {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  font-weight: 600;
}
.newpo-mslink-note {
  margin: 10px 0;
  padding: 8px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.85rem;
}
.newpo-mslink-issue {
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}
.newpo-mslink-issue-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.newpo-mslink-issue-head span {
  color: #6b7280;
  font-size: 0.82rem;
  white-space: nowrap;
}
.newpo-mslink-issue-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.newpo-mslink-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}
.newpo-mslink-choice input {
  /* Page-level input styling inflates radios inside overlays — pin the size. */
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: #2563eb;
}
.newpo-mslink-choice small {
  display: block;
  color: #6b7280;
  font-weight: 400;
}
.newpo-mslink-choice.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.newpo-ms-link-review { max-height: 46vh; overflow-y: auto; }
.newpo-unlinked-line {
  color: #b45309 !important;
  font-weight: 700;
}
.newpo-unlinked-ticket-line {
  color: #6b7280 !important;
  font-weight: 600;
}
/* Compact side-by-side catalog/ticket meta row on PO lines */
.newpo-line-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  margin-top: 4px;
}
.newpo-line-meta-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.newpo-line-meta-group small,
.newpo-line-meta-group .newpo-line-jump {
  font-size: 11px;
}
.newpo-line-jump {
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.newpo-line-jump:hover {
  text-decoration: underline;
}
.newpo-unlinked-receive {
  display: inline-block;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 0.74rem;
  font-weight: 700;
}
.newpo-link-line-btn {
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.newpo-link-line-btn:hover {
  background: #fef3c7;
}
.newpo-change-catalog-btn {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-xs);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.newpo-change-catalog-btn:hover {
  background: color-mix(in srgb, var(--cp-accent-soft) 70%, var(--cp-accent));
}
.newpo-linked-catalog-line,
.newpo-catalog-locked-line {
  display: block;
  margin-top: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
}
.newpo-catalog-change-card {
  max-width: 680px;
}
.newpo-catalog-change-warning {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 9%, var(--surface));
  color: var(--content-1);
}
.newpo-catalog-change-warning strong {
  color: var(--cp-warning);
  font-size: var(--text-sm);
}
.newpo-catalog-change-warning span {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.newpo-catalog-change-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.newpo-catalog-change-item {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-3);
}
.newpo-catalog-change-item-new {
  border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--border-1));
  background: var(--cp-accent-soft);
}
.newpo-catalog-change-label {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.newpo-catalog-change-item strong {
  overflow-wrap: anywhere;
  color: var(--content-1);
  font-size: var(--text-sm);
}
.newpo-catalog-change-item small {
  overflow-wrap: anywhere;
  color: var(--content-2);
  font-size: var(--text-xs);
}
.newpo-catalog-change-arrow {
  align-self: center;
  color: var(--cp-accent);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.newpo-catalog-change-impact {
  margin: 0 0 var(--space-4);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.newpo-catalog-change-card .newpo-modal-field > span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
@media (max-width: 620px) {
  .newpo-catalog-change-grid {
    grid-template-columns: 1fr;
  }
  .newpo-catalog-change-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}
.newpo-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 2.4vw, 34px);
  color: #111827;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}
.newpo-title-block {
  min-width: 0;
}
.newpo-kicker {
  display: block;
  margin-bottom: 4px;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.newpo-header h2 {
  color: #111827;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.15;
}
.newpo-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.newpo-header-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #dbe2ea;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
}
.newpo-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 10px;
  min-width: min(520px, 48vw);
}
.newpo-metric {
  padding: 10px 12px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: #fbfcfe;
}
.newpo-metric span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.newpo-metric strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 1.08rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.newpo-metric-total {
  border-color: #99f6e4;
  background: #ecfdf5;
}
.newpo-layout {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 20px;
  padding: 20px clamp(18px, 2.4vw, 34px) 32px;
}
.newpo-sidebar {
  position: sticky;
  top: 128px;
}
.newpo-summary,
.newpo-supplier,
.newpo-tracking,
.newpo-main {
  border: 1px solid #dde5ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.newpo-section-head,
.newpo-panel-head {
  background: #f8fafc;
  color: #111827;
  border-bottom: 1px solid #e5edf5;
  font-weight: 800;
}
.newpo-section-head {
  border-radius: 8px 8px 0 0;
}
.newpo-status-pill {
  min-height: 38px;
  border-radius: 7px;
  background: #2563eb;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.newpo-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 0 12px 12px;
}
.newpo-flow span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
}
.newpo-flow span.is-complete {
  border-color: #99f6e4;
  background: #ccfbf1;
  color: #115e59;
}
.newpo-flow span.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.newpo-field {
  min-height: 38px;
  border: 1px solid #e5edf5;
  border-radius: 7px;
  background: #f8fafc;
  padding: 3px;
}
.newpo-field-icon {
  background: transparent;
  color: #0f766e;
}
.newpo-field input,
.newpo-supplier select,
.newpo-catalog-row input[type="search"],
.newpo-table-actions input[type="search"],
.newpo-date input[type="date"] {
  min-height: 36px;
  border-color: #d8e1eb;
  border-radius: 6px;
}
.newpo-field input:focus,
.newpo-supplier select:focus,
.newpo-catalog-row input[type="search"]:focus,
.newpo-table-actions input[type="search"]:focus,
.newpo-date input[type="date"]:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}
.newpo-totals {
  gap: 8px;
  background: #fbfcfe;
}
.newpo-totals > div:last-child strong {
  color: #0f766e;
  font-size: 1.02rem;
}
.newpo-link {
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
}
.newpo-link:hover {
  background: #dbeafe;
}
.newpo-main {
  overflow: visible;
}
.newpo-tabs-row {
  padding: 10px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e5edf5;
}
.newpo-tabs {
  padding: 3px;
  border: 1px solid #dbe3ed;
  border-radius: 999px;
  background: #f8fafc;
}
.newpo-tab {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-weight: 800;
}
.newpo-tab.active {
  background: #111827;
  color: #fff;
}
.newpo-tab.active .newpo-tab-badge {
  color: #111827;
}
.newpo-date {
  min-height: 38px;
  padding: 4px 8px;
  border: 1px solid #e5edf5;
  border-radius: 999px;
  background: #fbfcfe;
}
.newpo-panel-head {
  padding: 12px 16px;
  font-size: 0.86rem;
  text-transform: uppercase;
}
.newpo-panel-body {
  padding: 16px;
}
.newpo-catalog {
  margin-bottom: 12px;
}
.newpo-il-catalog {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}
.newpo-catalog-row {
  gap: 8px;
}
.newpo-catalog-row input[type="search"] {
  font-size: 0.94rem;
}
.newpo-subtabs {
  border-bottom-color: #e5edf5;
}
.newpo-subtab {
  border-radius: 6px 6px 0 0;
  font-weight: 800;
}
.newpo-subtab.active {
  color: #0f766e;
  border-bottom-color: #0f766e;
}
.newpo-table-wrap {
  border-color: #dce5ef;
  border-radius: 8px;
}
.newpo-table {
  font-size: 0.81rem;
}
.newpo-table thead {
  background: #f8fafc;
}
.newpo-table th {
  color: #475569;
  border-bottom-color: #dce5ef;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.newpo-table td {
  padding: 8px;
  border-bottom-color: #edf2f7;
}
.newpo-table tbody tr:hover {
  background: #f8fbff;
}
.newpo-add-btn {
  border-radius: 50%;
  background: #0f766e;
}
.newpo-add-btn:hover {
  background: #0d625c;
}
.newpo-itemlist-table input[type="number"],
.newpo-itemlist-table input[type="text"] {
  min-height: 32px;
  border-color: #d8e1eb;
  border-radius: 6px;
}
.newpo-itemlist-table input.newpo-note-input {
  width: min(170px, 22vw);
}
.newpo-itemlist-table input.newpo-supplier-sku-input {
  width: min(150px, 20vw);
  text-align: left;
}
.newpo-il-actions {
  gap: 12px;
  border-top-color: #edf2f7;
}
.newpo-il-actions .btn {
  min-height: 34px;
  border-radius: 6px;
  font-weight: 800;
}
.newpo-il-actions .btn-outline:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}
.newpo-empty {
  color: #64748b;
}
@media (max-width: 1180px) {
  .newpo-header {
    flex-direction: column;
  }
  .newpo-metrics {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 900px) {
  .newpo-top,
  .newpo-sidebar {
    position: static;
  }
  .newpo-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .newpo-header,
  .newpo-layout {
    padding-left: 12px;
    padding-right: 12px;
  }
  .newpo-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .newpo-tabs,
  .newpo-date,
  .newpo-il-actions {
    width: 100%;
  }
  .newpo-tabs {
    overflow-x: auto;
  }
  .newpo-il-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .newpo-il-actions > div {
    display: flex;
    gap: 8px;
  }
}

/* Print sheet — hidden in normal mode, only used by _newPoPrint() via new window. */
.newpo-print-sheet { display: none; }

/* ============================================================================
   Reconciled view — read-only PO detail
   ============================================================================ */
.newpo-reconciled-view {
  background: #fff;
  margin: 12px;
  border-radius: 4px;
  font-size: 0.9rem;
}
.newpo-recon-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 10px 18px;
  background: #4b5563;
  border-radius: 4px 4px 0 0;
}
.newpo-recon-toolbar .btn-link {
  background: none;
  border: none;
  color: #fff;
  font-size: 0.86rem;
  cursor: pointer;
  padding: 4px 6px;
}
.newpo-recon-toolbar .btn-link:hover { color: #cbd5e1; text-decoration: underline; }
.newpo-recon-titlebar {
  background: #6b7280;
  color: #fff;
  padding: 8px 18px;
  font-size: 0.92rem;
  font-weight: 500;
}
.newpo-recon-body {
  padding: 24px 28px 32px;
  position: relative;
}
.newpo-recon-toprow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 20px;
}
.newpo-recon-company h1 {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1f2937;
}
.newpo-recon-addr {
  color: #374151;
  line-height: 1.55;
}
.newpo-recon-meta {
  text-align: right;
}
.newpo-recon-meta h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #9ca3af;
}
.newpo-recon-dl {
  margin: 0;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 4px 14px;
  text-align: right;
}
.newpo-recon-dl > div { display: contents; }
.newpo-recon-dl dt {
  color: #374151;
  font-weight: 600;
}
.newpo-recon-dl dd {
  margin: 0;
  color: #6b7280;
  text-align: left;
}

/* Diagonal Reconciled stamp */
.newpo-recon-stamp {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translate(-50%, 0) rotate(-12deg);
  background: rgba(75, 85, 99, 0.78);
  color: #fff;
  padding: 8px 38px;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  border-radius: 6px;
  text-transform: capitalize;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.newpo-recon-stamp-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.newpo-recon-stamp-close:hover { color: #f3f4f6; }

/* Cards row */
.newpo-recon-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.newpo-recon-card {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 14px 16px;
  background: #fff;
  min-height: 100px;
}
.newpo-recon-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2937;
}
.newpo-recon-card div { color: #374151; line-height: 1.55; font-size: 0.88rem; }

.newpo-recon-label-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.newpo-recon-label-selection-copy {
  display: grid;
  gap: var(--space-1);
  color: var(--content-1);
}
.newpo-recon-label-selection-copy span {
  color: var(--content-2);
  font-size: var(--text-xs);
}
.newpo-recon-print-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}
.newpo-recon-print-row .btn { font-size: 0.78rem; padding: 5px 10px; color: #6b7280; }

/* Line table */
.newpo-recon-table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 22px;
}
.newpo-recon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.newpo-recon-table thead th {
  background: #f3f4f6;
  color: #374151;
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid #d1d5db;
}
.newpo-recon-table th.num,
.newpo-recon-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.newpo-recon-table tbody td {
  padding: 10px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: top;
}
.newpo-recon-table .info-i {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-left: 3px;
  cursor: help;
}
.newpo-recon-table .newpo-check input:not(:disabled) { cursor: pointer; }
.newpo-recon-table tbody tr.is-label-selected td {
  background: color-mix(in srgb, var(--cp-accent-soft) 70%, var(--surface));
}
.newpo-recon-table tbody tr.is-label-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--cp-accent);
}
.newpo-recon-table .bin-note {
  color: #6b7280;
  font-size: 0.78rem;
  margin-top: 2px;
}
.newpo-recon-totals-row td {
  background: #f9fafb;
  font-weight: 600;
  color: #1f2937;
  border-top: 1px solid #d1d5db;
  border-bottom: none;
}

@media (max-width: 880px) {
  .newpo-recon-label-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .newpo-recon-print-row {
    justify-content: flex-start;
  }
}

/* Bottom grid (Remarks + Totals + Reconciliation) */
.newpo-recon-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.newpo-recon-remarks h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2937;
}
.newpo-recon-remarks-body {
  background: #fef3c7;
  padding: 8px 10px;
  border-radius: 3px;
  color: #1f2937;
  font-weight: 500;
  min-height: 32px;
  white-space: pre-wrap;
}

.newpo-recon-totals-card,
.newpo-recon-reconciliation-card {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.newpo-recon-totals-card header,
.newpo-recon-reconciliation-card header {
  background: #1f2937;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.newpo-recon-totals-card header .info-i,
.newpo-recon-reconciliation-card header .info-i { color: #9ca3af; }
.newpo-recon-totals-row-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid #f3f4f6;
  font-size: 0.86rem;
  color: #374151;
}
.newpo-recon-totals-row-item:first-of-type { border-top: none; }
.newpo-recon-totals-row-item.newpo-recon-totals-grand {
  background: #1f2937;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px;
  border-top: none;
}
.newpo-recon-diff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #16a34a;
  color: #fff;
  padding: 12px;
  font-weight: 700;
  font-size: 1rem;
}
.newpo-recon-diff.has-variance { background: #dc2626; }

@media (max-width: 980px) {
  .newpo-recon-toprow,
  .newpo-recon-cards,
  .newpo-recon-bottom-grid { grid-template-columns: 1fr; }
  .newpo-recon-meta { text-align: left; }
  .newpo-recon-stamp { font-size: 1.2rem; padding: 6px 22px; top: 60px; }
}

/* ===== Cancelled view — red variant of Reconciled view ===== */
.newpo-cancelled-toolbar { background: #991b1b !important; }
.newpo-cancelled-titlebar { background: #b91c1c !important; }
.newpo-cancel-stamp {
  background: rgba(220, 38, 38, 0.82) !important;
  letter-spacing: 3px;
}
.newpo-cancel-totals-grand {
  background: #991b1b !important;
}
.newpo-cancel-bottom-grid {
  grid-template-columns: 1fr 1fr !important;
}

@media print {
  /* Hide everything except a dedicated print sheet (kept for fallback). */
  body * { visibility: hidden; }
  .newpo-print-sheet, .newpo-print-sheet * { visibility: visible; }
  .newpo-print-sheet {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

/* Notes — rich-text editor */
.newpo-rte {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.newpo-rte-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.newpo-rte-toolbar button {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #374151;
  line-height: 1;
}
.newpo-rte-toolbar button:hover { background: #eff6ff; border-color: #1971c2; }
.newpo-rte-toolbar button.is-active {
  background: #dbeafe;
  border-color: #1971c2;
  color: #1971c2;
}
.newpo-rte-toolbar select {
  padding: 3px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.8rem;
  background: #fff;
  color: #374151;
}
.newpo-rte-sep {
  width: 1px;
  height: 22px;
  background: #e5e7eb;
  margin: 0 2px;
}
.newpo-rte-editor {
  min-height: 280px;
  max-height: 520px;
  overflow-y: auto;
  padding: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #1f2937;
  outline: none;
}
.newpo-rte-editor:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}
.newpo-rte-source {
  width: 100%;
  min-height: 280px;
  padding: 12px;
  border: none;
  border-top: 1px solid #e5e7eb;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.85rem;
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
}

.inventory-view-controls {
  flex-wrap: wrap;
  color: #5f5f5f;
  font-size: 14px;
}

.filter-icon svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: #b7bcc1;
}

.inventory-view-controls select,
.inventory-page-controls select,
.inventory-filters select {
  width: auto;
  min-height: 34px;
  min-width: 108px;
  padding: 0 34px 0 10px;
}

.inventory-view-controls #inventory-view,
.inventory-filters #inventory-category {
  min-width: 178px;
}

.inventory-view-controls #inventory-page-size,
.inventory-page-controls #inventory-page-select {
  min-width: 72px;
}

.inventory-view-controls strong {
  color: #5f5f5f;
  font-size: 14px;
}

.inventory-page-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #7d8389;
  border-radius: 4px;
}

.inventory-page-btn:hover:not(:disabled) {
  background: #f0f0f0;
  color: #333333;
}

.inventory-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.inventory-page-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round-action {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
}

.round-action.secondary {
  background: #0f5377;
}

.round-action.primary {
  background: var(--accent);
}

.round-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inventory-filters {
  flex-wrap: wrap;
  padding: 8px 22px 14px;
}

.inventory-filter-pill {
  min-height: 42px;
  min-width: 250px;
  padding: 0 20px;
  border-radius: 4px;
  background: #e9edf2;
  color: #666666;
  font-weight: 800;
  text-align: left;
}

.inventory-filters input {
  width: min(260px, 100%);
  min-height: 34px;
  border-color: transparent;
  color: var(--accent);
}

.inventory-filters input::placeholder {
  color: var(--accent);
  opacity: 1;
}

.inventory-reset {
  min-height: 34px;
  color: #9ca3af;             /* gray by default — only blue when filters are active */
  cursor: default;
}
.inventory-reset:hover { text-decoration: none; }
.inventory-reset.is-active {
  cursor: pointer;
}
.inventory-reset.is-active:hover { text-decoration: underline; }

.inventory-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 10px;
}

.inventory-section-tabs :where(button, a) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #cfd7df;
  border-radius: 3px;
  background: #f7f9fb;
  color: #4f5b66;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.inventory-section-tabs :where(button, a).active {
  border-color: #0997c7;
  background: #0997c7;
  color: #ffffff;
}

.inventory-title-bar .inventory-section-tabs {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  padding: 0;
  gap: 4px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.inventory-title-bar .inventory-section-tabs button {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 9px;
  border-color: #666666;
  background: #555555;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.inventory-title-bar .inventory-section-tabs button.active {
  border-color: #0997c7;
  background: #0997c7;
  color: #ffffff;
}

.inventory-title-bar .inventory-section-tabs button:hover:not(.active) {
  background: #606060;
  color: #ffffff;
}

@media (max-width: 980px) {
  #inventory-page .inventory-title-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #inventory-page .inventory-title-bar h2 {
    white-space: normal;
  }

  #inventory-page .inventory-title-bar .inventory-section-tabs {
    width: 100%;
    justify-content: flex-start;
  }
}

.inventory-section-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 22px 12px;
}

.inventory-section-note {
  color: #666666;
  font-size: 13px;
  line-height: 1.4;
}

.inventory-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 22px 14px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  overflow: hidden;
}

.inventory-summary-strip > div {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border-right: 1px solid #e1e1e1;
  background: #fbfbfb;
}

.inventory-summary-strip > div:last-child {
  border-right: 0;
}

.inventory-summary-strip span {
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-summary-strip strong {
  color: #555555;
  font-size: 24px;
  line-height: 1;
}

.customers-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 22px 14px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  overflow: hidden;
}

.customers-summary-strip > div {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border-right: 1px solid #e1e1e1;
  background: #fbfbfb;
}

.customers-summary-strip > div:last-child {
  border-right: 0;
}

.customers-summary-strip span {
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.customers-summary-strip strong {
  color: #555555;
  font-size: 24px;
  line-height: 1;
}

.inventory-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.customers-table-wrap {
  width: 100%;
  overflow-x: auto;
}

#cash-transactions-wrap {
  width: 100%;
  overflow-x: auto;
}

.inventory-table {
  width: 100%;
  min-width: 1580px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #5f5f5f;
  font-size: 14px;
}

.inventory-detail-table {
  min-width: 1760px;
}

.inventory-counts-table {
  min-width: 1900px;
}

.inventory-rma-table {
  min-width: 1740px;
}

.inventory-rma-table .check-col {
  width: 36px;
  text-align: center;
}

.inventory-rma-batch-bar {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dfe4ea;
  border-bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 46px;
  padding: 7px 10px;
}

.inventory-rma-batch-summary {
  align-items: baseline;
  color: #5f6770;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.inventory-rma-batch-summary strong {
  color: #1f2937;
  font-size: 12px;
}

.inventory-rma-batch-summary span {
  font-size: 12px;
}

.inventory-rma-batch-actions,
.rma-batch-detail-actions,
.rma-batch-modal-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-rma-batch-actions .btn,
.rma-batch-detail-actions .btn,
.rma-batch-modal-head-actions .btn,
.rma-small-modal-card .btn {
  min-height: 30px;
  padding: 5px 10px;
}

.inventory-reorder-action-bar {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dfe4ea;
  border-bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 48px;
  padding: 7px 10px;
}

.inventory-reorder-supplier {
  align-items: center;
  color: #475569;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}

.inventory-reorder-supplier input {
  border: 1px solid #d6dde6;
  border-radius: 4px;
  color: #0f172a;
  font-size: 12px;
  min-height: 30px;
  min-width: 180px;
  padding: 5px 9px;
}

.inventory-reorder-table {
  min-width: 1360px;
}

.inventory-reorder-table .check-col {
  text-align: center;
  width: 38px;
}

.inventory-reorder-table td small {
  color: #64748b;
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.inventory-reorder-qty {
  border: 1px solid #d6dde6;
  border-radius: 4px;
  color: #0f172a;
  font-size: 12px;
  min-height: 28px;
  padding: 4px 7px;
  width: 72px;
}

.receive-station-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.receive-station-scan-panel,
.receive-station-results-panel {
  background: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 6px;
  min-width: 0;
}

.receive-station-scan-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.receive-station-panel-head {
  align-items: baseline;
  border-bottom: 1px solid #edf0f4;
  color: #64748b;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 30px;
  padding: 0 0 8px;
}

.receive-station-panel-head strong {
  color: #1f2937;
  font-size: 13px;
}

.receive-station-panel-head span {
  font-size: 12px;
  min-width: 0;
  text-align: right;
}

.receive-station-result-card {
  border-left: 3px solid var(--border-2);
  display: grid;
  gap: var(--space-2);
  max-width: 48ch;
  min-width: 250px;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  white-space: normal;
}

.receive-station-result-card.is-paid {
  border-left-color: var(--cp-success);
}

.receive-station-result-card.is-pending {
  border-left-color: var(--cp-warning);
}

.receive-station-result-card.is-rejected {
  border-left-color: var(--cp-danger);
}

.receive-station-result-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.receive-station-result-summary {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.receive-station-pending-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.receive-station-pending-chip {
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  padding: 4px var(--space-2);
}

.receive-station-result-details {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.receive-station-result-details summary {
  color: var(--cp-accent);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  width: max-content;
}

.receive-station-result-details small {
  display: block;
  line-height: var(--leading-snug);
  margin-top: var(--space-1);
  max-width: 46ch;
  overflow-wrap: anywhere;
  white-space: normal;
}

.receive-station-field {
  color: #475569;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}

.receive-station-field input {
  border: 1px solid #129bd8;
  border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(18, 155, 216, 0.10);
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  min-height: 46px;
  padding: 8px 10px;
  width: 100%;
}

.receive-station-field input:focus {
  box-shadow: 0 0 0 3px rgba(18, 155, 216, 0.20);
  outline: none;
}

.receive-station-results-panel {
  overflow: hidden;
}

.receive-station-results-panel .receive-station-panel-head {
  padding: 8px 10px;
}

.receive-station-table-wrap {
  border: 0;
}

.receive-station-results-panel .receive-station-table-wrap {
  max-height: 420px;
  overflow-y: auto;
}

.receive-station-table {
  min-width: 680px;
}

.receive-station-table th,
.receive-station-table td {
  white-space: nowrap;
}

.receive-station-table td:last-child {
  white-space: normal;
}

.receive-station-table .receive-station-tracking {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.receive-station-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
  text-transform: uppercase;
}

.receive-station-note {
  color: var(--content-3);
  display: -webkit-box;
  font-size: var(--text-xs);
  line-height: 1.35;
  margin-top: var(--space-1);
  max-width: 460px;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.receive-station-result-action {
  justify-self: start;
}

@keyframes receive-station-row-flash {
  0%,
  28% {
    background: color-mix(in srgb, var(--cp-warning) 20%, var(--surface));
  }
  100% {
    background: transparent;
  }
}

.receive-station-row-flash {
  animation: receive-station-row-flash 1.5s var(--ease-out);
}
.receive-station-badge.matched {
  background: #dcfce7;
  color: #166534;
}

.receive-station-badge.unidentified {
  background: #fff7ed;
  color: #9a3412;
}

.receive-station-badge.error {
  background: #fee2e2;
  color: #991b1b;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-panel:not([open]) > :not(summary) {
  display: none !important;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-panel {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 24%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-accent-soft) 72%, var(--surface));
  box-shadow: var(--shadow-sm);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-head {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  list-style: none;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-head::-webkit-details-marker {
  display: none;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-head::marker {
  content: "";
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-heading {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  min-width: 0;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-badge {
  background: var(--cp-accent);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-sm);
  color: var(--cp-accent-content);
  display: grid;
  flex: 0 0 calc(var(--space-10) + var(--space-4));
  height: calc(var(--space-10) + var(--space-4));
  place-items: center;
  width: calc(var(--space-10) + var(--space-4));
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-badge svg,
:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-chevron svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-badge svg {
  height: var(--space-6);
  width: var(--space-6);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-copy {
  min-width: 0;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-eyebrow {
  color: var(--content-3);
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: .08em;
  text-transform: uppercase;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-copy h2 {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  margin: var(--space-1) 0;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-copy p {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  margin: 0;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-head-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-chevron {
  border-radius: var(--radius-circle);
  color: var(--content-3);
  display: grid;
  flex: 0 0 var(--space-8);
  height: var(--space-8);
  place-items: center;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  width: var(--space-8);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-chevron svg {
  height: var(--space-5);
  stroke-width: 2;
  width: var(--space-5);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-panel[open] .trade-final-inspection-chevron {
  color: var(--cp-accent);
  transform: rotate(180deg);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-card {
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-4);
  padding: var(--space-5);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-head {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-head > div {
  min-width: 0;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-head h4 {
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin: 0;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-head p {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  margin: var(--space-1) 0 0;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-badge {
  border-radius: var(--radius-circle);
  display: grid;
  flex: 0 0 36px;
  height: 36px;
  place-items: center;
  width: 36px;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-badge svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  width: 18px;
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-badge--inspection {
  background: color-mix(in srgb, var(--cp-accent) 14%, var(--surface));
  color: var(--cp-accent);
}

:where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-badge--offer {
  background: color-mix(in srgb, var(--cp-success) 13%, var(--surface));
  color: var(--cp-success);
}

:where(#receive-page, #inventory-receive-station-section, #inventory-pending-price-section) .ti-pill {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  gap: var(--space-1);
  padding: 3px var(--space-3);
  white-space: nowrap;
}

:where(#receive-page, #inventory-receive-station-section, #inventory-pending-price-section) .ti-pill svg {
  fill: none;
  flex: 0 0 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  width: 14px;
}

:where(#receive-page, #inventory-receive-station-section, #inventory-pending-price-section) .ti-pill--pending {
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-warning) 24%, var(--border-1));
  color: color-mix(in srgb, var(--cp-warning) 82%, var(--content-1));
}

:where(#receive-page, #inventory-receive-station-section, #inventory-pending-price-section) .ti-pill--approved {
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-accent) 24%, var(--border-1));
  color: color-mix(in srgb, var(--cp-accent) 78%, var(--content-1));
}

:where(#receive-page, #inventory-receive-station-section, #inventory-pending-price-section) .ti-pill--paid {
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-success) 24%, var(--border-1));
  color: color-mix(in srgb, var(--cp-success) 78%, var(--content-1));
}

:where(#receive-page, #inventory-receive-station-section, #inventory-pending-price-section) .ti-pill--rejected {
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-danger) 22%, var(--border-1));
  color: color-mix(in srgb, var(--cp-danger) 78%, var(--content-1));
}

:where(#receive-page, #inventory-receive-station-section, #inventory-pending-price-section) .ti-pill--default {
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  color: var(--content-2);
}

.receive-station-workspace {
  background: color-mix(in srgb, var(--cp-accent-soft) 72%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-accent) 24%, var(--border-1));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-4);
  grid-column: 1 / -1;
  min-width: 0;
  padding: var(--space-5);
}

.receive-station-workspace-head,
.receive-station-subsection-head {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.receive-station-workspace-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.receive-station-workspace-head h2 {
  color: var(--content-1);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: var(--space-1) 0;
}

.receive-station-workspace-meta {
  align-items: center;
  color: var(--content-2);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-2);
  line-height: var(--leading-body);
  margin: 0;
}

.receive-station-workspace-meta.is-error {
  color: var(--cp-danger);
}

.receive-station-guided-imei-form {
  align-items: end;
  display: flex;
  flex: 0 1 auto;
  gap: var(--space-3);
  margin-top: var(--space-3);
  max-width: 480px;
}

.receive-station-guided-imei-form .receive-station-field {
  flex: 1;
}

.receive-station-subsection {
  border-top: 1px solid var(--border-1);
  min-width: 0;
  padding-top: var(--space-4);
}

.receive-station-subsection-head {
  align-items: center;
}

.receive-station-subsection-head h3 {
  color: var(--content-1);
  font-size: var(--text-lg);
  margin: 0;
}

.receive-station-guided-order,
.receive-station-guided-device-card {
  margin-top: var(--space-4);
}

.receive-station-guided-order-head,
.receive-station-guided-device-head {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.receive-station-guided-order-head div,
.receive-station-guided-device-head div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.receive-station-guided-order-head span,
.receive-station-guided-device-head span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.receive-station-guided-progress {
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}

.receive-station-guided-progress span {
  background: var(--cp-accent);
  display: block;
  height: 100%;
  transition: width var(--dur-base) var(--ease-out);
}

.receive-station-guided-progress-overall {
  margin-top: var(--space-3);
}

.receive-station-guided-progress-copy {
  align-items: baseline;
  color: var(--content-1);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.receive-station-guided-progress-copy span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.receive-station-guided-lines {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.receive-station-guided-line > div:first-child {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.receive-station-guided-line span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.receive-station-guided-complete,
.receive-station-guided-message {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  color: var(--content-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
}

.receive-station-guided-complete {
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--cp-success) 35%, var(--border-1));
  color: var(--cp-success);
  font-weight: var(--weight-bold);
}

.receive-station-guided-complete,
.receive-station-guided-done {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.receive-station-guided-complete svg,
.receive-station-guided-done svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  width: 16px;
}

.receive-station-guided-done {
  color: var(--cp-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  margin-top: var(--space-2);
}

.receive-station-guided-message.is-error {
  background: var(--cp-danger-soft);
  border-color: color-mix(in srgb, var(--cp-danger) 30%, var(--border-1));
  color: var(--cp-danger);
}

.receive-station-guided-imei {
  font-family: var(--mono);
  white-space: nowrap;
}

.receive-station-guided-identity {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--content-2);
  padding: var(--space-2) var(--space-3);
}

.receive-station-guided-device-facts {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-4);
}

.receive-station-guided-device-facts div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.receive-station-guided-device-facts span,
.receive-station-guided-line-select span {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.receive-station-guided-device-facts strong.good { color: var(--cp-success); }
.receive-station-guided-device-facts strong.warning { color: var(--cp-warning); }
.receive-station-guided-device-facts strong.danger { color: var(--cp-danger); }

.receive-station-guided-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.receive-station-guided-warnings span {
  white-space: normal;
}

.receive-station-guided-warnings span.is-danger {
  background: var(--cp-danger-soft);
  border-color: color-mix(in srgb, var(--cp-danger) 30%, var(--border-1));
  color: var(--cp-danger);
}

.receive-station-guided-line-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: 0;
  min-width: 0;
}

.receive-station-guided-confirm-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-4);
  max-width: 760px;
}

.receive-station-guided-step-head > .ti-pill {
  margin-left: auto;
}

.receive-station-guided-line-select select {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  min-height: 40px;
  padding: 0 var(--space-2);
}

#receive-station-guided-confirm {
  margin-top: var(--space-3);
}

.receive-station-parts-table td {
  vertical-align: middle;
}

.receive-station-parts-table .receive-station-guided-done {
  margin-top: 0;
}

.receive-station-parts-table {
  min-width: 680px;
}

.receive-station-part-destination {
  color: var(--content-2);
  display: block;
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.receive-station-parts-bin-field {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  max-width: 280px;
}

.receive-station-parts-bin-field > span:first-child {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.receive-station-parts-bin-controls {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: minmax(88px, auto) minmax(130px, 1fr);
}

.receive-station-parts-bin-controls :is(select, input) {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  min-height: 36px;
  min-width: 0;
  padding: 0 var(--space-2);
}

.receive-station-parts-bin-controls :is(select, input):focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 18%, transparent);
  outline: none;
}

.receive-station-parts-bin-controls input[aria-invalid="true"] {
  border-color: var(--cp-danger);
}

.receive-station-parts-check {
  text-align: center;
  width: 42px;
}

.receive-station-parts-count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.receive-station-parts-receive-cell {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.receive-station-parts-qty {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  min-height: 40px;
  padding: 0 var(--space-2);
  text-align: right;
  width: 5.5rem;
}

.receive-station-parts-status,
.receive-station-parts-condition {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  min-height: 40px;
  padding: 0 var(--space-2);
  width: 180px;
}

.receive-station-parts-serial-cell {
  display: grid;
  gap: var(--space-1);
  min-width: 230px;
}

.receive-station-parts-serials {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  font-family: var(--mono);
  font-size: var(--text-sm);
  line-height: 1.4;
  min-height: 64px;
  padding: var(--space-2);
  resize: vertical;
  width: 100%;
}

.receive-station-parts-serials:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 18%, transparent);
  outline: none;
}

.receive-station-parts-serials[aria-invalid="true"] {
  border-color: var(--cp-danger);
}

.receive-station-parts-serial-cell small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.receive-station-parts-serial-cell small.is-error {
  color: var(--cp-danger);
  font-weight: var(--weight-bold);
}

.receive-station-muted-placeholder {
  color: var(--content-3);
}

.receive-station-parts-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.receive-station-parts-actions-spacer {
  flex: 1 1 auto;
}

.receive-station-label-actions {
  justify-content: space-between;
}

.receive-station-label-primary-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.receive-station-label-primary-actions .btn {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  justify-content: center;
}

.receive-station-label-primary-actions .btn svg {
  fill: none;
  flex: 0 0 16px;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 16px;
}

.receive-station-label-workflow {
  display: grid;
  gap: var(--space-4);
}

.receive-station-label-summary {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.receive-station-label-summary > div {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.receive-station-label-summary span {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.receive-station-label-summary strong {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.receive-station-label-steps {
  display: grid;
  gap: var(--space-3);
}

.receive-station-label-step {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
}

.receive-station-label-step.is-active {
  background: color-mix(in srgb, var(--cp-accent) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
}

.receive-station-label-step.is-locked {
  background: var(--surface-2);
}

.receive-station-label-step-number {
  align-items: center;
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
  border-radius: var(--radius-pill);
  color: var(--cp-accent);
  display: inline-flex;
  flex: 0 0 36px;
  font-weight: var(--weight-bold);
  height: 36px;
  justify-content: center;
}

.receive-station-label-step-number svg,
.receive-station-label-step .btn svg {
  fill: none;
  height: var(--space-4);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: var(--space-4);
}

.receive-station-label-step-copy {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-1);
  min-width: 0;
}

.receive-station-label-step-copy h4,
.receive-station-label-step-copy p {
  margin: 0;
}

.receive-station-label-step-copy h4 {
  color: var(--content-1);
}

.receive-station-label-step-copy p {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.receive-station-ticket-label-list {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.receive-station-ticket-label-list li {
  color: var(--content-2);
  display: flex;
  font-size: var(--text-xs);
  gap: var(--space-3);
  justify-content: space-between;
}

.receive-station-ticket-label-list strong {
  color: var(--content-1);
}

.receive-station-label-price-fix {
  display: grid;
  gap: var(--space-2);
}

.receive-station-label-price-list {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.receive-station-label-price-list li {
  align-items: center;
  color: var(--content-2);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-2) var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.receive-station-label-price-list li + li {
  border-top: 1px solid var(--border-1);
}

.receive-station-label-price-list strong {
  color: var(--content-1);
}

.receive-station-label-price-controls {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.receive-station-label-price-input {
  align-items: center;
  color: var(--content-2);
  display: inline-flex;
  gap: var(--space-1);
}

.receive-station-label-price-input input {
  width: 7rem;
}

.receive-station-label-recovery {
  border-top: 1px solid var(--border-1);
  padding-top: var(--space-3);
}

.receive-station-label-recovery > summary {
  color: var(--content-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.receive-station-label-recovery-body {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.receive-station-label-recovery-body > div:first-child {
  display: grid;
  gap: var(--space-1);
}

.receive-station-label-recovery-body > div:first-child > span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.receive-station-label-order-actions {
  align-items: center;
  background: color-mix(in srgb, var(--cp-accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-accent) 24%, var(--border-1));
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-3);
}

.receive-station-label-order-actions > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.receive-station-label-order-actions strong {
  color: var(--content-1);
}

.receive-station-label-order-actions span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.receive-station-label-order-actions .btn {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  justify-content: center;
}

.receive-station-label-order-actions .btn svg {
  fill: none;
  height: var(--space-4);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: var(--space-4);
}

.receive-station-label-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.75fr);
  min-width: 0;
}

.receive-station-label-layout.is-last-group {
  grid-template-columns: minmax(0, 1fr);
}

.receive-station-label-current {
  border-top: 3px solid var(--cp-accent);
  min-width: 0;
  padding-top: var(--space-4);
}

.receive-station-label-current-head,
.receive-station-label-queue-head {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.receive-station-label-current-head h4 {
  color: var(--content-1);
  margin: var(--space-1) 0;
}

.receive-station-label-current-head p {
  color: var(--content-2);
  font-size: var(--text-sm);
  margin: 0;
}

.receive-station-label-units {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: var(--space-4);
}

.receive-station-label-unit {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
  padding: var(--space-2);
}

.receive-station-label-unit > span:last-child {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.receive-station-label-unit strong {
  color: var(--content-1);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.receive-station-label-unit .ti-pill {
  justify-self: start;
}

.receive-station-label-unit-code {
  align-items: center;
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
  border-radius: var(--radius-sm);
  color: var(--content-1);
  display: flex;
  font-family: var(--mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  justify-content: center;
  min-height: 44px;
}

.receive-station-label-unit-more {
  align-items: center;
  color: var(--content-2);
  display: flex;
  font-size: var(--text-sm);
  justify-content: center;
  min-height: 60px;
}

.receive-station-label-alert {
  align-items: flex-start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr);
}

.receive-station-label-alert > span:first-child {
  align-items: center;
  background: var(--surface);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.receive-station-label-alert svg,
.receive-station-label-recovery-icon svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  width: 16px;
}

.receive-station-label-alert > div {
  display: grid;
  gap: var(--space-1);
}

.receive-station-label-alert strong {
  color: var(--content-1);
}

.receive-station-label-alert.is-error strong {
  color: var(--cp-danger);
}

.receive-station-label-queue {
  border-left: 1px solid var(--border-1);
  min-width: 0;
  padding-left: var(--space-4);
}

.receive-station-label-queue-head {
  align-items: baseline;
  border-bottom: 1px solid var(--border-1);
  padding-bottom: var(--space-2);
}

.receive-station-label-queue-head span,
.receive-station-label-queue-row small {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.receive-station-label-queue-row {
  align-items: center;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.receive-station-label-queue-index {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  color: var(--content-2);
  display: inline-flex;
  flex: 0 0 28px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  height: 28px;
  justify-content: center;
}

.receive-station-label-queue-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.receive-station-label-queue-row strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.receive-station-label-recovery-summary {
  align-items: center;
  background: color-mix(in srgb, var(--cp-danger) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-danger) 24%, var(--border-1));
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--space-3);
}

.receive-station-label-recovery-icon {
  align-items: center;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  border-radius: var(--radius-pill);
  color: var(--cp-danger);
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.receive-station-label-recovery-summary > div,
.receive-station-label-recovery-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.receive-station-label-recovery-summary strong,
.receive-station-label-recovery-copy strong {
  color: var(--content-1);
}

.receive-station-label-recovery-summary span,
.receive-station-label-recovery-copy span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.receive-station-label-recovery-list {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  overflow: hidden;
}

.receive-station-label-recovery-row {
  align-items: center;
  background: var(--surface);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-3);
}

.receive-station-label-recovery-row + .receive-station-label-recovery-row {
  border-top: 1px solid var(--border-1);
}

.receive-station-label-recovery-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.receive-station-label-complete {
  align-items: center;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.receive-station-label-complete h4 {
  color: var(--content-1);
  margin: 0;
}

.receive-station-label-complete p {
  color: var(--content-2);
  margin: var(--space-1) 0 0;
}

.pending-price-panel {
  min-width: 0;
}

.pending-price-panel-head {
  align-items: center;
}

.pending-price-panel-head h3,
.pending-price-card h4 {
  color: var(--content-1);
  margin: 0;
}

.pending-price-panel-head p,
.pending-price-card-head p {
  color: var(--content-2);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

.pending-price-count:not(.ti-pill),
.pending-price-source-tag:not(.ti-pill) {
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  border-radius: var(--radius-pill);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

.pending-price-filter-form {
  align-items: end;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pending-price-filter-form label {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.pending-price-filter-form input {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  min-height: 38px;
  padding: 0 var(--space-2);
  width: min(320px, 100%);
}

.pending-price-list {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-4);
}

.pending-price-batch-bar {
  align-items: center;
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-4);
  padding: var(--space-3);
}

.pending-price-batch-select-all,
.pending-price-card-select {
  align-items: center;
  color: var(--content-1);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  gap: var(--space-1);
}

.pending-price-batch-select-all input[type="checkbox"],
.pending-price-card-select input[type="checkbox"] {
  flex: 0 0 var(--space-5);
  height: var(--space-5);
  margin: 0;
  min-height: 0;
  width: var(--space-5);
}

.pending-price-batch-select-all span,
.pending-price-card-select span {
  white-space: nowrap;
}

.pending-price-batch-select-all,
.pending-price-batch-bar > .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.pending-price-batch-summary {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pending-price-batch-summary strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.pending-price-batch-summary span {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.pending-price-loading {
  color: var(--content-2);
  padding: var(--space-5);
  text-align: center;
}

.pending-price-card {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  position: relative;
}

.pending-price-card:has(.pending-price-exit-menu[open]) {
  z-index: var(--z-dropdown);
}

.pending-price-card-head {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.pending-price-card-head > div {
  min-width: 0;
}

.pending-price-card-copy {
  flex: 1 1 auto;
}

.pending-price-card-meta {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-2);
}

.pending-price-card-select {
  justify-content: flex-end;
  margin-bottom: 0;
  width: 100%;
}

@media (min-width: 901px) {
  .pending-price-batch-bar {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(240px, 1fr) auto;
  }

  .pending-price-card-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) minmax(220px, auto);
  }

  .pending-price-card-meta {
    min-width: 220px;
  }
}

.pending-price-card h4 {
  font-size: var(--text-lg);
  margin-top: var(--space-2);
}

.pending-price-imei {
  color: var(--content-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.pending-price-imei strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.pending-price-auto,
.pending-price-cost,
.pending-price-required {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.pending-price-auto {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}

.pending-price-section-label {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.pending-price-section-label span {
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.pending-price-section-label em {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-style: normal;
}

.pending-price-facts,
.pending-price-diagnostics-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pending-price-fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pending-price-fact span,
.pending-price-cost > span {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.pending-price-fact strong,
.pending-price-cost strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.pending-price-diagnostics {
  border-top: 1px solid var(--border-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.pending-price-diagnostics summary {
  color: var(--cp-accent);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.pending-price-diagnostics-body {
  margin-top: var(--space-3);
}

.pending-price-diagnostics-empty {
  color: var(--content-2);
  font-size: var(--text-sm);
  margin: 0;
}

.pending-price-diagnostics-empty.is-error {
  color: var(--cp-danger);
}

.pending-price-risk-row {
  margin-top: var(--space-3);
}

.pending-price-risk-badge {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  color: var(--content-2);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: var(--space-1) var(--space-2);
}

.pending-price-risk-badge.is-low {
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--cp-success) 34%, var(--border-1));
  color: var(--cp-success);
}

.pending-price-risk-badge.is-warning {
  background: color-mix(in srgb, var(--cp-warning) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--cp-warning) 34%, var(--border-1));
  color: var(--cp-warning);
}

.pending-price-risk-badge.is-high {
  background: var(--cp-danger-soft);
  border-color: color-mix(in srgb, var(--cp-danger) 34%, var(--border-1));
  color: var(--cp-danger);
}

.pending-price-risk-flags {
  margin-top: var(--space-3);
}

.pending-price-risk-flags > strong {
  color: var(--content-1);
  font-size: var(--text-xs);
}

.pending-price-risk-flags ul {
  color: var(--content-2);
  font-size: var(--text-xs);
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}

.pending-price-cost {
  align-items: baseline;
  background: color-mix(in srgb, var(--cp-warning) 8%, var(--surface));
  display: flex;
  justify-content: space-between;
}

.pending-price-required {
  border: 1px dashed color-mix(in srgb, var(--cp-accent) 48%, var(--border-1));
}

.pending-price-required .pending-price-section-label span,
.pending-price-required .pending-price-section-label em {
  color: var(--cp-accent);
}

.pending-price-inputs {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pending-price-inputs label {
  color: var(--content-1);
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  gap: var(--space-1);
}

.pending-price-inputs input,
.pending-price-inputs select {
  background: var(--surface);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  min-height: 40px;
  padding: 0 var(--space-2);
}

.pending-price-required .btn {
  margin-top: var(--space-3);
  width: 100%;
}

.pending-price-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pending-price-card-actions .btn {
  margin: 0;
  width: auto;
}

.pending-price-exit-menu {
  margin-left: auto;
  position: relative;
}

.pending-price-exit-menu summary {
  color: var(--content-2);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  list-style: none;
}

.pending-price-exit-menu summary::-webkit-details-marker {
  display: none;
}

.pending-price-exit-menu summary::after {
  content: "▾";
  margin-left: var(--space-1);
}

.pending-price-exit-menu > div {
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-1);
  min-width: 150px;
  padding: var(--space-1);
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-dropdown);
}

.pending-price-exit-menu button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--content-1);
  cursor: pointer;
  font: inherit;
  padding: var(--space-2);
  text-align: left;
}

.pending-price-exit-menu button:hover,
.pending-price-exit-menu button:focus-visible {
  background: var(--surface-2);
  color: var(--cp-danger);
}

@media (max-width: 1180px) {
  .receive-station-label-layout {
    grid-template-columns: 1fr;
  }

  .receive-station-label-queue {
    border-left: 0;
    border-top: 1px solid var(--border-1);
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .receive-station-label-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .receive-station-label-primary-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .receive-station-layout {
    grid-template-columns: 1fr;
  }

  .receive-station-guided-imei-form {
    align-items: stretch;
    flex-direction: column;
  }

  .receive-station-workspace-head {
    flex-direction: column;
  }

  .receive-station-guided-device-facts {
    grid-template-columns: 1fr;
  }

  :where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-head,
  :where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-heading {
    align-items: flex-start;
  }

  :where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-head {
    flex-direction: column;
  }

  :where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-head-actions {
    justify-content: space-between;
    width: 100%;
  }

  .receive-station-guided-step-head {
    flex-wrap: wrap;
  }

  .receive-station-guided-step-head > .ti-pill {
    margin-left: 48px;
  }

  .receive-station-guided-confirm-grid {
    grid-template-columns: 1fr;
  }

  .receive-station-label-layout {
    grid-template-columns: 1fr;
  }

  .receive-station-label-queue {
    border-left: 0;
    border-top: 1px solid var(--border-1);
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .receive-station-label-recovery-summary,
  .receive-station-label-recovery-row {
    align-items: flex-start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .receive-station-label-recovery-summary > .btn,
  .receive-station-label-recovery-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .receive-station-label-recovery-actions > .btn {
    flex: 1 1 auto;
  }

  .receive-station-label-primary-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .receive-station-label-order-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .receive-station-label-order-actions > .btn {
    width: 100%;
  }

  .receive-station-label-primary-actions > .btn {
    width: 100%;
  }

  .pending-price-panel-head,
  .pending-price-filter-form,
  .pending-price-card-head,
  .pending-price-cost,
  .pending-price-batch-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .pending-price-filter-form input {
    width: 100%;
  }

  .pending-price-list,
  .pending-price-facts,
  .pending-price-diagnostics-grid,
  .pending-price-inputs {
    grid-template-columns: 1fr;
  }

  .pending-price-card-meta {
    align-items: flex-start;
    padding-left: 48px;
  }

  .pending-price-exit-menu {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .receive-station-workspace {
    padding: var(--space-3);
  }

  .receive-station-subsection-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .receive-station-parts-actions > .btn,
  .receive-station-parts-actions-spacer {
    flex: 1 1 100%;
  }

  .receive-station-label-layout,
  .receive-station-label-complete {
    grid-template-columns: 1fr;
  }

  .receive-station-label-summary {
    grid-template-columns: 1fr;
  }

  .receive-station-label-step {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .receive-station-label-step .btn {
    margin-left: calc(36px + var(--space-3));
    width: calc(100% - 36px - var(--space-3));
  }

  .receive-station-label-queue {
    border-left: 0;
    border-top: 1px solid var(--border-1);
    padding-left: 0;
    padding-top: var(--space-4);
  }

  :where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-panel {
    padding: var(--space-3);
  }

  :where(#inventory-receive-station-section, #inventory-pending-price-section) .trade-final-inspection-badge {
    flex-basis: var(--space-10);
    height: var(--space-10);
    width: var(--space-10);
  }

  :where(#inventory-receive-station-section, #inventory-pending-price-section) .ti-step-card {
    padding: var(--space-3);
  }

  .receive-station-guided-progress-copy,
  .receive-station-guided-line > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .receive-station-guided-step-head > .ti-pill,
  .pending-price-card-meta {
    margin-left: 0;
    padding-left: 0;
  }

  .pending-price-card-head {
    flex-wrap: wrap;
  }

  .pending-price-card-meta {
    flex-basis: 100%;
  }

  .pending-price-batch-select-all,
  .pending-price-batch-summary,
  .pending-price-batch-bar > .btn {
    width: 100%;
  }
}

.rma-price-cost {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 1px;
}

.rma-price-cost > div {
  white-space: nowrap;
}

.rma-price-cost em {
  color: #4f4f4f;
  font-style: italic;
  font-weight: 800;
}

.rma-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.rma-cond-line {
  color: #555555;
  font-size: 11px;
  font-style: italic;
  line-height: 1.1;
}

.rma-inline-link {
  color: #009bd8;
  font-weight: 700;
  text-decoration: none;
}

.rma-inline-link:hover {
  text-decoration: underline;
}

.rma-override-status-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #22a7de;
  cursor: pointer;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  width: 28px;
}

.rma-override-status-btn:hover {
  background: #eef8fd;
  color: #008ec3;
}

.rma-override-status-btn svg {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.rma-manual-modal-backdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 10000;
}

.rma-manual-modal {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  width: min(620px, calc(100vw - 32px));
}

.rma-manual-modal-head {
  align-items: center;
  background: #27a9dc;
  color: #ffffff;
  display: flex;
  height: 70px;
  justify-content: center;
  position: relative;
}

.rma-manual-modal-head h3 {
  font-size: 32px;
  font-weight: 400;
  margin: 0;
}

.rma-manual-close {
  background: transparent;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  font-size: 42px;
  font-weight: 200;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.rma-manual-form {
  padding: 38px 76px 44px;
}

.rma-manual-field {
  align-items: start;
  color: #606060;
  display: grid;
  font-size: 16px;
  gap: 18px;
  grid-template-columns: 110px 1fr;
  margin-bottom: 22px;
}

.rma-manual-field > span {
  font-weight: 700;
  padding-top: 7px;
  text-align: right;
}

.rma-manual-field select,
.rma-manual-field textarea {
  border: 1px solid #c7c7c7;
  border-radius: 4px;
  color: #4f4f4f;
  font: inherit;
  width: 100%;
}

.rma-manual-field select {
  height: 34px;
  padding: 4px 10px;
}

.rma-manual-field textarea {
  min-height: 126px;
  padding: 8px 10px;
  resize: vertical;
}

.rma-manual-actions {
  display: flex;
  justify-content: center;
  padding-top: 48px;
}

.rma-manual-submit {
  background: #099bd3;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  height: 46px;
  min-width: 140px;
}

.rma-manual-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.rma-batch-modal-card {
  max-height: min(88vh, 900px);
  max-width: min(1380px, 96vw);
  width: 100%;
}

.rma-batch-modal-body {
  max-height: calc(88vh - 58px);
  overflow: auto;
}

.rma-batches-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(520px, 0.9fr) minmax(420px, 1fr);
}

.rma-batch-list-panel,
.rma-batch-detail-panel {
  min-width: 0;
}

.rma-batch-list-table,
.rma-batch-items-table {
  min-width: 720px;
}

.rma-batch-list-table tbody tr.is-active {
  background: #eef8fd;
}

.rma-batch-number-btn,
.rma-batch-link-btn {
  background: transparent;
  border: 0;
  color: #009bd8;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.rma-batch-number-btn:hover,
.rma-batch-link-btn:hover {
  text-decoration: underline;
}

.rma-batch-legacy-note {
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}

.rma-batch-detail-panel {
  border: 1px solid #dfe4ea;
  border-radius: 4px;
  overflow: hidden;
}

.rma-batch-empty-detail,
.rma-batch-loading,
.rma-batch-error {
  align-items: center;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 220px;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.rma-batch-empty-detail strong {
  color: #1f2937;
}

.rma-batch-error {
  color: #b91c1c;
}

.rma-batch-detail-head {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #dfe4ea;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.rma-batch-detail-head span,
.rma-batch-notes span {
  color: #6b7280;
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
}

.rma-batch-detail-head h4 {
  color: #1f2937;
  font-size: 18px;
  margin: 0;
}

.rma-batch-fields {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rma-batch-field {
  border-bottom: 1px solid #edf0f3;
  min-width: 0;
  padding: 9px 12px;
}

.rma-batch-field:nth-child(odd) {
  border-right: 1px solid #edf0f3;
}

.rma-batch-field span {
  color: #6b7280;
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}

.rma-batch-field strong {
  color: #374151;
  display: block;
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rma-batch-notes {
  border-bottom: 1px solid #edf0f3;
  padding: 10px 12px;
}

.rma-batch-notes p {
  color: #374151;
  font-size: 12px;
  margin: 0;
  overflow-wrap: anywhere;
}

.rma-batch-items-wrap {
  overflow: auto;
}

.rma-small-modal-card {
  max-width: min(620px, 96vw);
  width: 100%;
}

.rma-form-grid {
  display: grid;
  gap: 0 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rma-form-grid-wide {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .inventory-rma-batch-bar,
  .inventory-reorder-action-bar,
  .rma-batch-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-rma-batch-actions,
  .inventory-reorder-action-bar .inventory-rma-batch-actions,
  .rma-batch-detail-actions {
    justify-content: flex-start;
  }

  .rma-batches-grid {
    grid-template-columns: 1fr;
  }

  .rma-batch-list-table,
  .rma-batch-items-table {
    min-width: 700px;
  }
}

@media (max-width: 620px) {
  .rma-batch-fields,
  .rma-form-grid {
    grid-template-columns: 1fr;
  }

  .rma-batch-field:nth-child(odd) {
    border-right: 0;
  }
}

.inventory-orders-table {
  min-width: 1280px;
}

.inventory-count-input {
  width: 76px;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid #cbd5df;
  border-radius: 4px;
  background: #ffffff;
  color: #4f4f4f;
  font: inherit;
}

.inventory-variance {
  font-weight: 800;
}

.inventory-variance.pos {
  color: #168555;
}

.inventory-variance.neg {
  color: #b84232;
}

.inventory-variance.neutral {
  color: #777777;
}

.inventory-status-cell.ok {
  color: #168555;
  font-weight: 800;
}

.inventory-status-cell.low {
  color: #b66b00;
  font-weight: 800;
}

.inventory-status-cell.out {
  color: #b84232;
  font-weight: 800;
}

.inventory-table th,
.inventory-table td {
  height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid #dcdcdc;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customers-table {
  width: 100%;
  min-width: 1390px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #5f5f5f;
  font-size: 14px;
}

.customer-devices-table {
  min-width: 0;
  table-layout: auto;
  font-size: 11.5px;
  width: 100%;
}
.customer-devices-table th,
.customer-devices-table td {
  padding: 4px 6px;
  height: 34px;
  width: auto !important;   /* override .customers-table nth-child fixed widths */
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-devices-table th {
  font-size: 11px;
  letter-spacing: 0;
}
.customer-devices-table td .cp-ticket-link { font-size: 11.5px; }
/* Long text columns: cap and ellipsis. (Description, Diagnostic, Resolution.) */
.customer-devices-table td.dev-long,
.customer-devices-table th.dev-long-th { max-width: 110px; }
/* Compact columns: ID, SKU, Carrier, UPC, Actions. */
.customer-devices-table td.dev-compact,
.customer-devices-table th.dev-compact-th { max-width: 60px; }
/* Smaller badge inside cells */
.customer-devices-table .device-badge {
  font-size: 10px;
  padding: 2px 5px;
}
.customer-devices-table .device-action-magnify { width: 24px; height: 24px; }
.customer-devices-table .device-action-magnify svg { width: 13px; height: 13px; }
.customer-devices-table .device-actions-th,
.customer-devices-table .device-actions-cell { width: 44px !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Tickets Queue table — mirrors customers-devices structure with explicit
   percentage column widths (table-layout: fixed) so columns never overlap
   and the last cell always sits flush with the right edge. Sum = 100% so
   there's no white gap on wide monitors and no overflow on narrow ones.

   Default 14 RepairQ columns:
   #(6) TT(3) Status(8) Location(8) Items/Devices(14) Assignee(7)
   Customer(11) Sales(5) Receipts(5) Date(7) Est.(5) Timer(6)
   Notes(12) Actions(3)  = 100%
   ───────────────────────────────────────────────────────────────────────── */
.customers-table.tickets-queue-table {
  table-layout: fixed;
  /* `!important` here because `.customer-devices-table th,td { width: auto
     !important }` higher in the file also sets the cells, which causes the
     fixed-layout pass to fall back to equal columns. We win the cascade with
     !important on the table-level rule AND on each nth-child column width. */
  width: 100% !important;
  min-width: 1560px;
  border-collapse: collapse;
  color: #5f5f5f;
}
.customers-table.tickets-queue-table th,
.customers-table.tickets-queue-table td {
  padding: 5px 8px;
  height: 50px;
  /* Override .customer-devices-table's `max-width: 120px` + `width: auto
     !important` so the nth-child percentages below define column widths
     instead. Both !important to beat the upstream cell rule. */
  max-width: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.25;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid #dcdcdc;
}
.customers-table.tickets-queue-table th {
  background: #e6ebf0;
  color: #60666c;
  font-weight: 700;
  font-size: 11px;
  height: 36px;
}
.tickets-queue-table tbody tr {
  background: #ffffff;
  color: #5f5f5f;
}
.tickets-queue-table tbody tr:hover {
  background: #f1f1f1;
}
.tickets-queue-table tbody tr.selected {
  background: #e8f4fb;
}

/* Sortable header trigger — inherits font from <th> and behaves like the
   .customers-table sortable buttons. */
.tickets-queue-table th .sortable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.tickets-queue-table th .sortable .sort-arrow {
  display: inline-block;
  font-size: 8px;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tickets-queue-table th .sortable.active { color: #0797ca; }
.tickets-queue-table th .sortable.active .sort-arrow { opacity: 1; }
.tickets-queue-table th .sortable.desc .sort-arrow { transform: rotate(180deg); }

/* ID / ticket number — colored like a link, no underline until hover. */
.tickets-queue-table .ticket-number-text {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #008ed0;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.tickets-queue-table .ticket-number-text:hover { text-decoration: underline; }

/* Status cell — semantic badge colors from the canonical status registry. */
.tickets-queue-table .ticket-status {
  color: inherit;
  font-weight: 500;
}
.tickets-queue-table .ticket-status-badge {
  display: inline;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent !important;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.tickets-queue-table .ticket-status-color-blue {
  color: #008ed0;
}
.tickets-queue-table .ticket-status-color-cyan {
  color: #008ed0;
}
.tickets-queue-table .ticket-status-color-teal {
  color: #008d78;
}
.tickets-queue-table .ticket-status-color-green {
  color: #39a84a;
}
.tickets-queue-table .ticket-status-color-amber {
  color: #ff8a00;
}
.tickets-queue-table .ticket-status-color-orange {
  color: #ff8a00;
}
.tickets-queue-table .ticket-status-color-purple {
  color: #7952b3;
}
.tickets-queue-table .ticket-status-color-magenta {
  color: #bd3bbd;
}
.tickets-queue-table .ticket-status-color-indigo {
  color: #5363c2;
}
.tickets-queue-table .ticket-status-color-red {
  color: #ef4444;
}
.tickets-queue-table .ticket-status-color-gray,
.tickets-queue-table .ticket-status-color-slate,
.tickets-queue-table .ticket-status-color-dark {
  color: #5f5f5f;
}
.tickets-queue-table .ticket-timer  { color: #e6372f; font-weight: 500; }

.tickets-queue-table .ticket-cell-wide {
  display: none;
}

.tickets-queue-table .ticket-cell-compact,
.tickets-queue-table .ticket-cell-primary,
.tickets-queue-table .ticket-cell-secondary {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tickets-queue-table .ticket-cell-secondary {
  margin-top: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.tickets-queue-table .ticket-cell-compact .ticket-location-main,
.tickets-queue-table .ticket-subline,
.tickets-queue-table .ticket-date-line,
.tickets-queue-table .ticket-date-subline {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tickets-queue-table :is(.tq-col-location, .tq-col-date-range, .tq-col-est) > .app-row-link--cell {
  flex-direction: column;
  align-items: flex-start;
}

.tickets-queue-table .ticket-subline,
.tickets-queue-table .ticket-date-subline {
  margin-top: 2px;
  color: #6f7781;
  font-size: 11px;
  line-height: 1.2;
}

.tickets-queue-table .tq-col-customer {
  color: #1398d5;
  font-weight: 500;
}

.tickets-queue-table .ticket-estimate-active {
  color: #ff8a00;
  font-weight: 500;
}

/* Notes cell — RepairQ-style plain text, with outline only for Add Note. */
#tickets-list-view .tickets-queue-table .ticket-note-button {
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5f5f5f;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
#tickets-list-view .tickets-queue-table .ticket-note-button:hover {
  color: #008ed0;
}
#tickets-list-view .tickets-queue-table .ticket-note-add {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid #0098dc;
  border-radius: 4px;
  background: #ffffff;
  color: #008ed0;
}

@media (min-width: 1800px) {
  .tickets-queue-table .ticket-cell-wide {
    display: inline;
  }

  .tickets-queue-table .ticket-cell-compact {
    display: none;
  }

  .tickets-queue-table .ticket-date-line,
  .tickets-queue-table .ticket-date-subline,
  .tickets-queue-table .ticket-location-operational {
    display: inline;
    margin-top: 0;
  }

  .tickets-queue-table .ticket-date-subline::before,
  .tickets-queue-table .ticket-location-operational::before {
    content: " · ";
    color: var(--content-3);
  }

  .tickets-queue-table :is(.tq-col-location, .tq-col-date-range, .tq-col-est) > .app-row-link--cell {
    flex-direction: row;
    align-items: center;
  }
}

/* Ticket Type icon cell — centered SVG, no text. Small, minimal monoline glyphs
   so the column stays a quiet hint rather than a loud badge. */
.tickets-queue-table .tq-col-ticket-type {
  text-align: center;
}
.tickets-queue-table .tq-col-ticket-type svg,
.tickets-queue-table .tt-cell svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #5f6368;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  opacity: 0.95;
}
.tickets-queue-table .tt-cell[data-ticket-type="repair"] svg,
.tickets-queue-table .tt-cell[data-ticket-type="quick_sale"] svg,
.tickets-queue-table .tt-cell[data-ticket-type="sale"] svg,
.tickets-queue-table .tt-cell[data-ticket-type="trade_in"] svg,
.tickets-queue-table .tt-cell[data-ticket-type="tradein"] svg,
.tickets-queue-table .tt-cell[data-ticket-type="quote"] svg,
.tickets-queue-table .tt-cell[data-ticket-type="task"] svg,
.tickets-queue-table .tt-cell[data-ticket-type="refurbishment"] svg {
  stroke: #5f6368;
}

/* Post-sale origin banner — "↩ Warranty re-repair of ticket #2002 · Open →"
   shown at the top of a child ticket so staff can jump to the original. Full
   width, clickable, tinted by relation to match the queue TT icons. */
.ticket-origin-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f3f4f6;
  color: #374151;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.ticket-origin-banner:hover { filter: brightness(0.98); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.ticket-origin-banner-arrow { font-size: 15px; line-height: 1; }
.ticket-origin-banner-text { flex: 1; min-width: 0; }
.ticket-origin-banner-text strong { font-weight: 700; }
.ticket-origin-banner-cta { font-weight: 700; opacity: 0.85; white-space: nowrap; }
.ticket-origin-banner.is-warranty {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}
.ticket-origin-banner.is-exchange {
  border-color: rgba(8, 145, 178, 0.35);
  background: rgba(8, 145, 178, 0.08);
  color: #0e7490;
}
.ticket-origin-banner.is-return {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.08);
  color: #b45309;
}

/* Returns use a distinct type badge in the queue while keeping the compact TT
   column. The icon and color remain semantic type cues, not a ticket status. */
.tickets-queue-table .tt-cell[data-ticket-type="return"] svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: var(--space-1);
  border-radius: var(--radius-circle);
  background: var(--cp-accent-soft);
  stroke: var(--cp-accent);
  stroke-width: 2;
}

/* Warranty re-repairs and exchanges keep the icon language but get their own
   tinted circle so post-sale children stand out from regular tickets. */
.tickets-queue-table .tt-cell[data-origin-relation="warranty"] svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: var(--space-1);
  border-radius: var(--radius-circle);
  background: rgba(124, 58, 237, 0.12);
  stroke: #6d28d9;
  stroke-width: 2;
}
.tickets-queue-table .tt-cell[data-origin-relation="exchange"] svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: var(--space-1);
  border-radius: var(--radius-circle);
  background: rgba(8, 145, 178, 0.12);
  stroke: #0e7490;
  stroke-width: 2;
}

/* Actions cell — kebab button, centered, fixed-width handled by nth-child. */
.tickets-queue-table .device-actions-cell {
  text-align: center;
  overflow: visible;
}
.tickets-queue-table .device-actions-cell .row-menu-btn {
  background: transparent;
  border: 0;
  display: inline-grid;
  place-items: center;
  gap: 2px;
  padding: 4px 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.tickets-queue-table .device-actions-cell .row-menu-btn span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0f5377;
  display: block;
}
.tickets-queue-table .device-actions-cell .row-menu-btn:hover span {
  background: #008ed0;
}

/* Tickets table wrap — let the wrap fill the panel-body, prevent horizontal
   scrolling when columns sum to 100%. */
.tickets-table-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 0 22px 24px;
}

#tickets-list-view #tickets-empty.empty {
  min-height: 112px;
  margin: 0 22px 24px;
  padding: 24px;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  background: #ffffff;
  color: #777777;
}

#tickets-list-view #tickets-empty .empty-icon {
  display: none;
}

#tickets-list-view #tickets-empty .empty-title {
  color: #666666;
  font-size: 14px;
}

#tickets-list-view #tickets-empty .empty-body {
  max-width: none;
  color: #777777;
  font-size: 12px;
}

.customers-table th,
.customers-table td {
  height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid #dcdcdc;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-table th {
  height: 42px;
  background: #e4e9ef;
  color: #666666;
  font-weight: 800;
}

.customers-table th {
  height: 42px;
  background: #e4e9ef;
  color: #666666;
  font-weight: 800;
}

.inventory-table tbody tr:hover {
  background: #f9fcfe;
}

.customers-table tbody tr:hover {
  background: #f1f1f1;
}

.inventory-table .check-col {
  width: 44px;
  text-align: center;
}

.inventory-summary-table .check-col,
.inventory-detail-table .check-col,
.inventory-counts-table .check-col,
.inventory-rma-table .check-col {
  width: 42px !important;
  min-width: 42px;
  text-align: center;
}

.inventory-summary-table .check-col input[type="checkbox"],
.inventory-detail-table .check-col input[type="checkbox"],
.inventory-counts-table .check-col input[type="checkbox"],
.inventory-rma-table .check-col input[type="checkbox"],
.settings-item-types-table.inventory-item-types-table input[type="checkbox"],
.inventory-item-types-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 0;
  margin: 0;
  accent-color: #009bd8;
  vertical-align: middle;
}

.inventory-item-types-table {
  table-layout: fixed;
}

.inventory-item-types-table .inventory-item-type-name-col {
  width: 28%;
}

.inventory-item-types-table .inventory-item-type-count-col,
.inventory-item-types-table .inventory-item-type-rule-col,
.inventory-item-types-table .inventory-item-type-enforce-col,
.inventory-item-types-table .inventory-item-type-flag-col {
  width: 12%;
}

.inventory-item-types-table th:first-child,
.inventory-item-types-table td:first-child {
  text-align: left;
}

.inventory-item-types-table th:nth-child(2),
.inventory-item-types-table td:nth-child(2),
.inventory-item-types-table th:nth-child(n+3),
.inventory-item-types-table td:nth-child(n+3) {
  text-align: center;
}

.inventory-item-types-table input[type="checkbox"] {
  display: inline-block;
  margin: 0;
}

/* Inventory tables intentionally override the shared Customers/Devices table
   defaults. The underlying markup reuses those classes, but inventory needs a
   denser, RepairQ-like data grid. */
.inventory-page .customers-table-wrap {
  border-top: 1px solid #dfe4ea;
}

.inventory-page .customer-devices-table {
  min-width: 1420px;
  color: #5d6268;
  font-size: 12px;
  line-height: 1.2;
}

.inventory-page .inventory-detail-table,
.inventory-page .iid-units-table {
  min-width: 1760px;
}

.inventory-page .inventory-counts-table {
  min-width: 1900px;
  table-layout: fixed;
}

.inventory-page .inventory-rma-table {
  min-width: 1500px;
}

.inventory-page .customer-devices-table th,
.inventory-page .customer-devices-table td {
  height: 32px;
  padding: 4px 8px;
  border-bottom-color: #dfe3e7;
  max-width: 150px;
  font-size: 12px;
  vertical-align: middle;
}

.inventory-page .customer-devices-table th {
  height: 31px;
  background: #e6ebf0;
  color: #60666c;
  font-size: 11px;
  font-weight: 700;
}

.inventory-page .customer-devices-table tbody tr:hover {
  background: #f6f9fb;
}

.inventory-page .customer-devices-table td .cp-ticket-link {
  font-size: 12px;
}

.inventory-page .inventory-summary-table .check-col,
.inventory-page .inventory-detail-table .check-col,
.inventory-page .inventory-counts-table .check-col,
.inventory-page .inventory-rma-table .check-col,
.inventory-page .iid-units-table .check-col {
  width: 34px !important;
  min-width: 34px;
  max-width: 34px;
}

.inventory-page .inventory-summary-table .check-col input[type="checkbox"],
.inventory-page .inventory-detail-table .check-col input[type="checkbox"],
.inventory-page .inventory-counts-table .check-col input[type="checkbox"],
.inventory-page .inventory-rma-table .check-col input[type="checkbox"],
.inventory-page .iid-units-table .check-col input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-width: 15px;
}

.inventory-page .customer-devices-table .device-actions-th,
.inventory-page .customer-devices-table .device-actions-cell {
  width: 56px !important;
  min-width: 56px;
  max-width: 56px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.inventory-page .row-menu-btn {
  width: 28px;
  min-height: 28px;
  padding: 2px 0;
}

.inventory-page .row-menu-btn svg {
  width: 18px;
  height: 18px;
}

.inventory-page .row-menu-btn span {
  width: 4px;
  height: 4px;
}

.inventory-page .customer-devices-table .device-badge,
.inventory-page .device-badge {
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.2;
}

.inventory-page .inventory-counts-table th,
.inventory-page .inventory-counts-table td {
  vertical-align: top;
}

.inventory-page .inventory-counts-table .invcounts-col-status { width: 82px; }
.inventory-page .inventory-counts-table .invcounts-col-type { width: 148px; }
.inventory-page .inventory-counts-table .invcounts-col-name { width: 280px; }
.inventory-page .inventory-counts-table .invcounts-col-sku { width: 122px; }
.inventory-page .inventory-counts-table .invcounts-col-bin { width: 78px; }
.inventory-page .inventory-counts-table .invcounts-col-date { width: 126px; }
.inventory-page .inventory-counts-table .invcounts-col-person { width: 106px; }
.inventory-page .inventory-counts-table .invcounts-col-num {
  width: 74px;
  text-align: center;
}
.inventory-page .inventory-counts-table .invcounts-col-reconciled-variance {
  width: 142px;
  text-align: center;
}
.inventory-page .inventory-counts-table .invcounts-col-notes { width: 120px; }
.inventory-page .inventory-counts-table .invcounts-col-small { width: 86px; }

.inventory-page .inventory-counts-row {
  cursor: pointer;
}

.inventory-page .invcounts-name-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.15;
}

.inventory-page .invcounts-name-main,
.inventory-page .inventory-counts-table .invcounts-col-type,
.inventory-page .inventory-counts-table .invcounts-col-notes {
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-page .invcounts-name-main {
  color: #5d6268;
  font-weight: 600;
}

.inventory-page .invcounts-name-sub {
  color: #6b7280;
  font-size: 11px;
}

.inventory-page .inventory-name-btn,
.inventory-page .inv-sum-name-text {
  color: #5d6268;
  font-size: 12px;
  font-weight: 500;
}

.inventory-page .inv-sum-name-pencil {
  margin-left: 4px;
}

.inventory-page .inventory-detail-table .inv-det-cell-sub {
  display: block;
  margin-top: 2px;
  color: #6f7781;
  font-size: 11px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-page .inventory-detail-table .inv-det-name-cell {
  min-width: 210px;
  max-width: 300px;
}

.inventory-page .inv-det-name-inner {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.inventory-page .inv-det-name-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-page .inv-det-name-pencil {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f9fda;
  cursor: pointer;
  vertical-align: middle;
}

.inventory-page .inv-det-name-pencil svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inventory-page .inv-det-links-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.inventory-page .inv-det-links-wrap::before {
  content: "";
  position: absolute;
  left: -28px;
  right: -28px;
  bottom: 100%;
  height: 14px;
}

.inventory-page .inventory-detail-table td.inv-det-links-cell {
  overflow: visible;
}

.inventory-page .inv-det-links-badge {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.inventory-page .inv-det-links-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 25;
  min-width: 136px;
  padding: 5px 0;
  border: 1px solid #cfd8e3;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 220ms;
  visibility: hidden;
}

.inventory-page .inv-det-links-popover::before,
.inventory-page .inv-det-links-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}

.inventory-page .inv-det-links-popover::before {
  bottom: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #cfd8e3;
}

.inventory-page .inv-det-links-popover::after {
  bottom: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ffffff;
}

.inventory-page .inv-det-links-wrap:hover .inv-det-links-popover,
.inventory-page .inv-det-links-wrap:focus-within .inv-det-links-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
  visibility: visible;
}

.inventory-page .inv-det-links-pop-row {
  display: block;
  padding: 5px 10px;
  color: #0f9fda;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.inventory-page .inv-det-links-pop-row:hover {
  background: #f1f7fb;
  text-decoration: none;
}

.inventory-page .inv-sum-name-pencil svg {
  width: 11px;
  height: 11px;
}

.inventory-config-panel {
  display: grid;
  gap: 12px;
  padding: 14px 18px 20px;
}

/* The game catalog has two explicit actions, so it must not inherit the
   inventory grids' narrow sticky kebab column. Keep both controls usable at
   ordinary counter-screen widths while retaining horizontal overflow on
   smaller screens. */
.cp #inventory-page .inventory-config-panel .game-catalog-products-table {
  min-width: calc(var(--space-10) * 18);
  table-layout: fixed;
}

.cp #inventory-page .inventory-config-panel .game-catalog-products-table :is(th, td):nth-child(1) { width: 22%; }
.cp #inventory-page .inventory-config-panel .game-catalog-products-table :is(th, td):nth-child(2) { width: 18%; }
.cp #inventory-page .inventory-config-panel .game-catalog-products-table :is(th, td):nth-child(3) { width: 21%; }
.cp #inventory-page .inventory-config-panel .game-catalog-products-table :is(th, td):nth-child(4) { width: 9%; }
.cp #inventory-page .inventory-config-panel .game-catalog-products-table :is(th, td):nth-child(5) { width: 10%; }

.cp #inventory-page .inventory-config-panel .game-catalog-products-table :is(th, td):last-child {
  position: static;
  width: 20% !important;
  min-width: 0;
  max-width: none;
  padding-inline: var(--space-2);
  white-space: normal;
  text-align: left;
}

.inventory-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inventory-config-head h3 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.2;
}

.inventory-config-head p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.inventory-defaults-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) repeat(2, minmax(240px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.inventory-defaults-grid .field {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #ffffff;
}

.inventory-defaults-grid .field label {
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
}

.inventory-defaults-grid .field input {
  width: 100%;
  min-height: 30px;
  border: 1px solid #d6dde6;
  border-radius: 4px;
  padding: 5px 9px;
  color: #0f172a;
  font-size: 12px;
}

.inventory-defaults-status {
  min-height: 18px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.inventory-defaults-status.success { color: #047857; }
.inventory-defaults-status.error { color: #b91c1c; }

@media (max-width: 980px) {
  .inventory-config-head {
    display: grid;
  }
  .inventory-defaults-grid {
    grid-template-columns: 1fr;
  }
}

.inventory-table th:nth-child(2),
.inventory-table td:nth-child(2) {
  width: 190px;
}

.inventory-table th:nth-child(3),
.inventory-table td:nth-child(3) {
  width: 130px;
}

.inventory-table th:nth-child(4),
.inventory-table td:nth-child(4) {
  width: 150px;
}

.inventory-table th:nth-child(5),
.inventory-table td:nth-child(5) {
  width: 300px;
}

.inventory-table th:nth-child(6),
.inventory-table td:nth-child(6) {
  width: 95px;
}

.inventory-table th:nth-child(n+7),
.inventory-table td:nth-child(n+7) {
  text-align: center;
}

.inventory-table th:nth-child(15),
.inventory-table td:nth-child(15) {
  width: 160px;
  text-align: left;
}

.customers-table th:nth-child(1),
.customers-table td:nth-child(1) {
  width: 220px;
}

.customers-table th:nth-child(2),
.customers-table td:nth-child(2) {
  width: 150px;
}

.customers-table th:nth-child(3),
.customers-table td:nth-child(3) {
  width: 150px;
}

.customers-table th:nth-child(4),
.customers-table td:nth-child(4) {
  width: 150px;
}

.customers-table th:nth-child(5),
.customers-table td:nth-child(5) {
  width: 220px;
}

.customers-table th:nth-child(6),
.customers-table td:nth-child(6) {
  width: 110px;
}

/* Receive Station tables size their own columns — undo the generic
   customers-table fixed column widths and the page-wide min-widths
   (.customers-table 1390px / .inventory-page .customer-devices-table 1420px),
   which inflated these narrow tables past their panel and hid the trailing
   Pending/Open and Condition columns behind a horizontal scrollbar. */
.receive-station-table th:nth-child(n),
.receive-station-table td:nth-child(n) {
  width: auto;
}

.receive-station-table th.receive-station-parts-check,
.receive-station-table td.receive-station-parts-check {
  width: 42px;
}

.customers-table.receive-station-table,
.inventory-page .customers-table.receive-station-table {
  min-width: 0;
}

.customers-table.receive-station-parts-table {
  min-width: 680px;
  table-layout: auto;
}

.customers-table th:nth-child(7),
.customers-table td:nth-child(7),
.customers-table th:nth-child(8),
.customers-table td:nth-child(8) {
  width: 150px;
}

.customers-table th:nth-child(9),
.customers-table td:nth-child(9) {
  width: 190px;
}

.customers-table th:nth-child(10),
.customers-table td:nth-child(10) {
  width: 90px;
  text-align: center;
}

/* Reorderable queues size columns by their semantic classes or content. The
   legacy customers-table nth-child widths remain available to static tables. */
.reorderable-columns-table.reorderable-columns-table th,
.reorderable-columns-table.reorderable-columns-table td {
  width: auto !important;
}

#tickets-list-view .tickets-queue-table :is(th, td) { width: 132px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-number) { width: 94px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-ticket-type) { width: 52px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-location) { width: 126px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-items-devices) { width: 210px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-status) { width: 130px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-assignee, .tq-col-customer) { width: 160px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-sales, .tq-col-receipts) { width: 96px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-date-range) { width: 120px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-estimate, .tq-col-timer) { width: 96px !important; }
#tickets-list-view .tickets-queue-table :is(.tq-col-notes) { width: 190px !important; }

.inventory-name-btn {
  max-width: 100%;
  color: #5f5f5f;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-name-btn::after {
  content: "";
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: -1px;
  background: currentColor;
  clip-path: polygon(12% 72%, 10% 92%, 30% 88%, 86% 32%, 68% 14%);
  color: var(--accent);
}

.customer-name-btn {
  max-width: 100%;
  color: #5f5f5f;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-name-btn:hover {
  color: var(--accent);
}

.stock-badge {
  min-width: 18px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.stock-badge.ok {
  background: #35a853;
}

.stock-badge.low {
  background: #ff9818;
}

.stock-badge.out {
  background: #e04b43;
}

.row-menu-btn {
  width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  gap: 2px;
  padding: 6px 0;
}

.row-menu-btn span {
  width: 5px;
  height: 5px;
  display: block;
  border-radius: 50%;
  background: #0f5377;
}

.inventory-empty {
  margin: 18px 22px 24px;
  padding: 18px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background: #f8f8f8;
  color: #777777;
}

.dashboard-breadcrumb {
  height: 34px;
  display: flex;
  align-items: center;
  color: #777777;
}

.dashboard-breadcrumb svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.repair-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(330px, 0.9fr);
  gap: 32px;
  align-items: start;
}

.dashboard-left,
.dashboard-side {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.repair-panel {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

.repair-panel-title {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 24px;
  background: #4a4a4a;
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
}

.repair-panel-title svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compact-title {
  min-height: 44px;
  font-size: 17px;
}

.repair-panel-body {
  padding: 20px 24px;
}

.alerts-panel .repair-panel-body {
  padding: 0;
}

.daily-strip {
  display: grid;
  grid-template-columns: minmax(170px, 1.35fr) minmax(96px, 0.55fr);
  border-bottom: 1px solid #eeeeee;
  background: #ffffff;
}
.my-work-strip {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.daily-strip > div {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px 20px;
  border-right: 1px solid #eeeeee;
}

.daily-strip > div:last-child {
  border-right: 0;
}

.daily-label {
  color: #8b8b8b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.daily-strip strong {
  color: #5f5f5f;
  font-size: 21px;
  line-height: 1.1;
}

.dashboard-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #eeeeee;
  background: #fbfbfb;
}

.dashboard-op-card {
  min-height: 98px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px 20px;
  border: 0;
  border-right: 1px solid #eeeeee;
  background: transparent;
  color: #666666;
  text-align: left;
}

.dashboard-op-card:last-child {
  border-right: 0;
}

.dashboard-op-card:hover,
.dashboard-op-card:focus-visible {
  background: #f3f8fb;
}

.dashboard-op-card span {
  color: #8b8b8b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard-op-card strong {
  color: #4f4f4f;
  font-size: 24px;
  line-height: 1;
}

.dashboard-op-card small {
  color: #8a8a8a;
  font-size: 13px;
}

.dashboard-op-card.warning strong {
  color: #d98316;
}

.dashboard-op-card.danger strong {
  color: #c14141;
}

.ticket-progress {
  min-height: 280px;
  display: grid;
  place-items: center;
  gap: 20px;
  padding: 32px 20px 36px;
}

.ticket-progress h2 {
  color: #666666;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.progress-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}

.progress-metric {
  min-height: 146px;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  padding: 16px 24px;
  border-right: 1px solid #e6e6e6;
  background: #ffffff;
  color: #777777;
}

.progress-metric:last-child {
  border-right: 0;
}

.progress-metric strong {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
}

.progress-metric span {
  color: #8b8b8b;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.progress-metric.warning strong {
  border-color: #ff9818;
  background: #ff9818;
  color: #ffffff;
}

.progress-metric.critical strong {
  border-color: #e04b43;
  background: #e04b43;
  color: #ffffff;
}

.dashboard-alert-list {
  display: grid;
  gap: 16px;
  padding: 0 24px 24px;
}

.dashboard-ops-alerts {
  display: grid;
  gap: 16px;
  padding: 0 24px 24px;
}

.dashboard-ops-alert {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d9e3e8;
  border-radius: 4px;
  background: #f7fbfd;
}

.dashboard-ops-alert.warning {
  border-color: #f3e4b7;
  background: #fff9df;
}

.dashboard-ops-alert.danger {
  border-color: #efd0d1;
  background: #f5dddd;
}

.dashboard-ops-alert-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
}

.dashboard-ops-alert-head h3 {
  margin: 0;
  color: #5f5f5f;
  font-size: 18px;
  font-weight: 800;
}

.dashboard-ops-alert-head span {
  color: #777777;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-mini-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 13px;
}

.dashboard-mini-table th,
.dashboard-mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eeeeee;
  color: #666666;
  text-align: left;
}

.dashboard-mini-table th {
  color: #777777;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-alert {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 18px 22px;
  border: 1px solid #f3e4b7;
  border-radius: 4px;
  background: #fff9df;
  color: #bd8a35;
}

.dashboard-alert.danger {
  border-color: #efd0d1;
  background: #f5dddd;
  color: #c14141;
}

.barcode-lines {
  width: 68px;
  height: 52px;
  background:
    repeating-linear-gradient(
      90deg,
      currentColor 0 2px,
      transparent 2px 5px,
      currentColor 5px 8px,
      transparent 8px 13px
    );
  opacity: 0.85;
}

.dashboard-alert h3 {
  margin: 0 0 12px;
  color: currentColor;
  font-size: 20px;
  font-weight: 800;
}

.dashboard-alert p {
  margin: 0 0 16px;
  color: currentColor;
  font-size: 15px;
  line-height: 1.45;
}

.dashboard-alert .btn {
  min-width: min(320px, 100%);
}

.dashboard-empty {
  margin: 0 24px 24px;
  padding: 18px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  background: #f8f8f8;
  color: #777777;
  font-size: 15px;
}

.dashboard-select {
  width: min(262px, 100%);
  margin-bottom: 10px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-actions .btn {
  min-height: 39px;
  border-radius: 4px;
  box-shadow: none;
  padding-inline: 12px;
  white-space: normal;
}

.quick-actions .btn-primary:disabled {
  background: #d6d6d6;
  color: #777777;
  cursor: not-allowed;
}

.dashboard-activity-list {
  display: grid;
  gap: 10px;
}

.dashboard-activity-row {
  display: grid;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
}

.dashboard-activity-row:last-child {
  border-bottom: 0;
}

.dashboard-activity-row strong {
  color: #5f5f5f;
  font-size: 14px;
}

.dashboard-activity-row span {
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.35;
}

.panel,
.tickets-list,
.media-card,
.team-row,
.activity-row {
  background: #ffffff;
  border-color: #dddddd;
  box-shadow: none;
}

.panel::before {
  content: none;
}

.panel-head {
  padding-top: 22px;
}

.eyebrow {
  color: var(--accent);
  letter-spacing: 0.08em;
}

input,
select,
textarea {
  min-height: 38px;
  border-radius: 4px;
  background: #ffffff;
  color: #555555;
  border-color: #cccccc;
  font-size: 14px;
  box-shadow: none;
}

datalist option,
input[list] option,
select[data-manufacturer-select] option {
  background: var(--surface);
  color: var(--content-1);
}

.manufacturer-combobox {
  position: relative;
  display: grid;
  flex: 1 1 0;
  gap: var(--space-1);
  min-width: 0;
}

.manufacturer-combobox > input {
  width: 100%;
  min-width: 0;
}

.manufacturer-combobox-list {
  position: fixed;
  z-index: var(--z-overlay);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.manufacturer-combobox-list[hidden] {
  display: none;
}

.manufacturer-combobox-option {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
}

.manufacturer-combobox-option:hover,
.manufacturer-combobox-option:focus-visible,
.manufacturer-combobox-option.is-active {
  background: var(--cp-accent-soft);
  color: var(--content-1);
  outline: none;
}

.manufacturer-combobox-empty {
  padding: var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.manufacturer-combobox-error {
  color: var(--cp-danger);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

/* Native select/datalist popovers inherit the control's color-scheme in
   Safari. Pin light workspaces to light controls so manufacturer suggestions
   never become white text on a white browser-owned popup. */
html:not([data-dashboard-theme="dark"]) :is(input[list], select[data-manufacturer-select]) {
  color-scheme: light;
}

html[data-dashboard-theme="dark"] body.dashboard-dark-active :is(input[list], select[data-manufacturer-select]) {
  color-scheme: dark;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(7, 151, 202, 0.16);
}

label {
  color: #6d6d6d;
  letter-spacing: 0.08em;
}

.segmented {
  background: #eeeeee;
  border-color: #d2d2d2;
  border-radius: 4px;
}

.segmented button {
  border-radius: 3px;
  color: #666666;
}

.dropzone {
  min-height: 150px;
  background: #f8f8f8;
  border-color: #d2d2d2;
  border-radius: 4px;
}

.dropzone:hover {
  background: #eef8fc;
  border-color: var(--accent);
}

.drop-icon {
  background: #ffffff;
  border-color: #dddddd;
  border-radius: 5px;
  box-shadow: none;
}

.btn {
  min-height: 40px;
  border-radius: 4px;
  font-weight: 700;
}

.btn-primary {
  color: #ffffff;
  background: var(--accent);
  box-shadow: none;
}

.btn-primary:disabled {
  background: rgba(7, 151, 202, 0.35);
  color: rgba(255, 255, 255, 0.88);
}

.btn-secondary {
  background: #15577a;
  border-color: #15577a;
  color: #ffffff;
}

.btn-secondary:hover {
  background: #104765;
  border-color: #104765;
}

.po-line-action-btn {
  font-size: 0.78rem;
  padding: 2px 10px;
}

.inv-movement-head,
.inv-movement-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 72px 120px minmax(150px, 1.4fr) minmax(90px, 1fr) minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
}

.inv-movement-head {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.inv-movements-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.inv-movement-row {
  border: 1px solid #d8dee7;
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  font-size: 0.82rem;
}

.inv-movement-type {
  font-weight: 700;
  color: #1f2937;
}

.inv-movement-delta {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
}

.inv-movement-delta.pos {
  color: #167449;
}

.inv-movement-delta.neg {
  color: #b42318;
}

.inv-movement-range,
.inv-movement-date,
.inv-movement-actor,
.inv-movement-reference,
.inv-movement-context,
.inv-movement-reason {
  color: #475569;
}

.inv-movement-reference {
  font-weight: 700;
}

.inv-movement-context {
  grid-column: 1 / -1;
  color: #334155;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.inv-movement-reason {
  grid-column: 1 / -1;
  border-top: 1px solid #eef2f7;
  padding-top: 7px;
  color: #64748b;
  overflow-wrap: anywhere;
}

.inv-movements-pagination {
  margin-top: 10px;
  color: #64748b;
  font-size: 0.8rem;
}

.report-live-section {
  border: 1px solid #d8dee7;
  border-radius: 8px;
  padding: clamp(18px, 2.1vw, 28px);
  background: #ffffff;
  margin-bottom: 26px;
  min-width: 0;
  overflow: hidden;
}

.report-system-log {
  margin: 0 0 28px;
  padding: clamp(18px, 2.1vw, 26px);
  border: 1px solid #d8dee7;
  border-radius: 8px;
  background: #ffffff;
  min-width: 0;
  overflow: hidden;
}

.report-system-log .activity-toolbar {
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1.2fr) auto;
}

.report-system-log .activity-list {
  overflow-x: auto;
}

.report-system-log .activity-row {
  min-width: 900px;
}

.report-live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.report-eyebrow {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.report-live-header h2,
.report-live-section h3 {
  margin: 0;
  color: #1f2937;
}

.report-live-header h2 {
  font-size: 1.15rem;
}

.report-live-section h3 {
  font-size: 0.92rem;
  margin-bottom: 8px;
}

.report-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-controls input {
  min-height: 36px;
}

.report-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 14px;
}

.report-card {
  border: 1px solid #d8dee7;
  border-radius: 6px;
  padding: 14px 16px;
  background: #f8fafc;
}

.report-card span {
  display: block;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 700;
}

.report-card strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 1.35rem;
}

.report-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.report-table-grid > section,
.report-closed-registers,
.report-usage-detail,
.report-profitability,
.report-inventory-orders,
.report-queues {
  min-width: 0;
  overflow-x: auto;
}

.report-closed-registers {
  margin-top: 24px;
}

.report-usage-detail {
  margin-top: 24px;
}

.report-profitability {
  margin-top: 24px;
}

.report-inventory-orders {
  margin-top: 24px;
}

.report-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.report-subheader > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #64748b;
  font-size: 0.78rem;
}

.report-subheader strong {
  color: #1f2937;
}

.report-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  font-size: 0.82rem;
}

.report-table th,
.report-table td {
  width: auto !important;
  min-width: 0 !important;
  height: 44px;
  padding: 10px 12px;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.report-usage-detail .report-table,
.report-profitability .report-table,
.report-inventory-orders .report-table,
.report-queues .report-table {
  min-width: 980px;
}

.report-table-grid .report-table {
  min-width: 640px;
}

.btn-danger {
  background: #c73f3f;
  border-color: #c73f3f;
  color: #ffffff;
}

@media (max-width: 1540px) {
  .topbar .top-search {
    display: none;
  }

  .topbar {
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand {
    flex: 1 1 0;
    min-width: 0;
  }

  .top-actions {
    margin-left: auto;
  }

  .top-nav {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  .nav-btn {
    height: 42px;
    padding: 0 9px;
    font-size: 13px;
  }

  .status-pill,
  .worker-pill,
  .top-actions .account-menu-btn {
    height: 38px;
    min-height: 38px;
  }
}

@media (max-width: 1320px) {
  .topbar {
    flex-wrap: wrap;
  }

  .brand {
    flex: 1 1 100%;
    width: 100%;
  }

  .top-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 1280px) {
  .module-soon:nth-of-type(n+6) {
    display: none;
  }

  .repair-dashboard {
    gap: 22px;
  }

  .inventory-toolbar {
    grid-template-columns: 1fr auto;
  }

  .inventory-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .inventory-page-controls {
    justify-self: start;
  }

  .daily-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .dashboard-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-op-card:nth-child(even) {
    border-right: 0;
  }

  .daily-strip strong {
    font-size: 18px;
  }
}

@media (max-width: 980px) {
  .topbar {
    min-height: auto;
    padding: 10px 14px;
    flex-wrap: wrap;
  }

  .nav-btn {
    height: 40px;
  }

  .repair-dashboard {
    grid-template-columns: 1fr;
  }

  .staff-shell {
    grid-template-columns: 1fr;
  }

  .staff-filter-panel {
    min-height: auto;
    border-right: 0;
  }

  .staff-filter-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-roles {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .staff-roles > label:first-child {
    grid-column: 1 / -1;
  }

  .staff-filter-footer {
    display: flex;
    justify-content: flex-start;
  }

  .staff-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-toolbar {
    grid-template-columns: 1fr;
  }

  .inventory-actions {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }

  .inventory-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customers-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-live-header,
  .report-subheader {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-card-grid,
  .report-table-grid {
    grid-template-columns: 1fr;
  }

  .daily-strip > div {
    border-bottom: 1px solid #eeeeee;
  }

  .daily-strip > div:nth-child(even) {
    border-right: 0;
  }
}

@media (max-width: 620px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
  }

  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .brand-copy {
    width: 100%;
    min-width: 0;
  }

  .top-nav {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .module-soon {
    display: none;
  }

  .top-actions {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .status-pill,
  .worker-pill {
    height: 42px;
  }

  .top-icon-btn[aria-label="Tags"] {
    display: none;
  }

  .worker-pill {
    flex: 1 1 180px;
    min-width: 0;
  }

  .worker-pill #worker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-actions .account-menu-btn {
    flex: 0 0 44px;
  }

  .home-main {
    padding: 18px 12px 48px;
  }

  .inventory-page,
  .customers-page,
  .reports-page,
  .staff-page,
  .tickets-page {
    padding: 18px 12px 48px;
  }

  .repair-panel-title {
    padding: 0 14px;
    font-size: 18px;
  }

  .repair-panel-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .inventory-title-bar,
  .inventory-toolbar,
  .inventory-filters {
    padding-left: 14px;
    padding-right: 14px;
  }

  .staff-title-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px;
  }

  .staff-title-actions {
    flex-wrap: wrap;
  }

  .staff-filter-body,
  .staff-roles,
  .staff-form {
    grid-template-columns: 1fr;
  }

  .staff-overview-head {
    align-items: flex-start;
    flex-direction: column;
    padding-left: 14px;
    padding-right: 14px;
  }

  .staff-import-bar {
    margin-left: 14px;
    margin-right: 14px;
  }

  .staff-import-bar {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .report-system-log .activity-toolbar {
    grid-template-columns: 1fr;
  }

  .inventory-view-controls,
  .inventory-page-controls,
  .inventory-filters {
    align-items: stretch;
  }

  .inventory-view-controls select,
  .inventory-page-controls select,
  .inventory-filters select,
  .inventory-filter-pill,
  .inventory-filters input {
    width: 100%;
    min-width: 0;
  }

  .inventory-summary-strip {
    grid-template-columns: 1fr;
    margin-left: 14px;
    margin-right: 14px;
  }

  .customers-summary-strip {
    grid-template-columns: 1fr;
    margin-left: 14px;
    margin-right: 14px;
  }

  .inventory-summary-strip > div {
    border-right: 0;
    border-bottom: 1px solid #e1e1e1;
  }

  .customers-summary-strip > div {
    border-right: 0;
    border-bottom: 1px solid #e1e1e1;
  }

  .inventory-summary-strip > div:last-child {
    border-bottom: 0;
  }

  .customers-summary-strip > div:last-child {
    border-bottom: 0;
  }

  .daily-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-ops-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-op-card {
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid #eeeeee;
    padding: 14px;
  }

  .dashboard-op-card:last-child {
    border-bottom: 0;
  }

  .dashboard-ops-alerts {
    padding: 0 14px 18px;
  }

  .dashboard-ops-alert {
    padding: 14px;
  }

  .dashboard-ops-alert-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .dashboard-ops-alert-head span {
    white-space: normal;
  }

  .dashboard-mini-table {
    font-size: 12px;
  }

  .dashboard-mini-table th,
  .dashboard-mini-table td {
    padding: 7px 8px;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .daily-strip > div {
    min-height: 62px;
    border-right: 0;
  }

  .ticket-progress {
    min-height: auto;
    padding: 24px 14px;
  }

  .progress-card {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .progress-metric {
    min-height: 116px;
    border-right: 0;
    border-bottom: 1px solid #e6e6e6;
  }

  .progress-metric:last-child {
    border-bottom: 0;
  }

  .dashboard-alert-list {
    padding: 0 14px 18px;
  }

  .dashboard-alert {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dashboard-empty {
    margin: 0 14px 18px;
  }
}

/* Domain ticket detail panel */
.domain-ticket-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 32px;
}

.domain-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8e8e8;
}

.domain-field.full-width {
  grid-column: 1 / -1;
}

.domain-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
}

.domain-field-value {
  font-size: 15px;
  color: #222222;
  word-break: break-word;
}

.domain-field-value.muted {
  color: #aaaaaa;
  font-style: italic;
}

.domain-ticket-section-head {
  grid-column: 1 / -1;
  padding: 18px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid #e8e8e8;
}

@media (max-width: 600px) {
  .domain-ticket-fields {
    grid-template-columns: 1fr;
  }
  .domain-field.full-width {
    grid-column: 1;
  }
  .domain-ticket-section-head {
    grid-column: 1;
  }
}

/* ---- Customer panel row (Quick Sale / Repair / Trade-In forms) ---- */

.customer-panel-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.customer-display-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.customer-display-info strong {
  font-size: 0.98rem;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-display-info span {
  font-size: 0.82rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-display-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* ---- Customer picker modal ---- */

.customer-picker-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
}

.customer-picker-modal.hidden {
  display: none;
}

.customer-picker-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  width: min(480px, 96vw);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.customer-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.customer-picker-title {
  font-weight: 600;
  font-size: 0.97rem;
  color: #222;
}

.customer-picker-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #999;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}

.customer-picker-close:hover {
  background: #f0f0f0;
  color: #555;
}

.customer-picker-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.customer-picker-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  outline: none;
}

.customer-picker-create-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.customer-picker-input:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.customer-picker-status {
  padding: 16px 18px;
  text-align: center;
  font-size: 0.87rem;
  color: #888;
  flex-shrink: 0;
}

.customer-picker-results {
  overflow-y: auto;
  flex: 1;
}

.customer-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 11px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid #f3f3f3;
  cursor: pointer;
  text-align: left;
}

.customer-picker-item:hover {
  background: #f5f8ff;
}

.customer-picker-item-name {
  font-weight: 500;
  font-size: 0.93rem;
  color: #222;
}

.customer-picker-item-sub {
  font-size: 0.8rem;
  color: #888;
}

.inventory-picker-stock-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: 700;
}

.inventory-picker-stock-label:not(:first-child) {
  margin-left: var(--space-2);
}

.inventory-picker-stock-value {
  display: inline-grid;
  min-width: var(--space-6);
  min-height: var(--space-6);
  place-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--content-inv);
  font-size: var(--text-xs);
  line-height: 1;
}

.inventory-picker-stock-value-available {
  background: var(--cp-success);
}

.inventory-picker-stock-value-pulled {
  background: var(--content-3);
}

.inventory-picker-stock-row-muted {
  color: var(--content-3);
  font-weight: 600;
}

.customer-picker-item-name-row,
.customer-name-with-membership {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.customer-membership-badge,
.repair-fast-linked-customer .customer-membership-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 78%, var(--content-1));
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
  overflow-wrap: normal;
  white-space: nowrap;
  cursor: default;
}

button.customer-membership-badge {
  cursor: pointer;
}

button.customer-membership-badge:hover {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--surface));
}

button.customer-membership-badge:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

.customer-membership-badge svg {
  flex: 0 0 auto;
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.repair-customer-info .customer-name-with-membership > strong,
.repair-fast-linked-customer .customer-name-with-membership > strong {
  min-width: 0;
}

.customer-membership-devices-panel {
  width: min(34rem, calc(100vw - (2 * var(--space-4))));
  max-height: min(42rem, calc(100vh - (2 * var(--space-6))));
}

.customer-membership-devices-panel .inv-form-header {
  align-items: flex-start;
}

.customer-membership-devices-panel .inv-form-header h2,
.customer-membership-devices-panel .inv-form-header p {
  margin: 0;
}

.customer-membership-devices-panel .inv-form-header h2 {
  color: var(--content-1);
  font-size: var(--text-xl);
}

.customer-membership-devices-panel .inv-form-header p {
  margin-top: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.customer-membership-devices-kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.customer-membership-devices-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow: auto;
}

.customer-membership-device-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.customer-membership-device-number {
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.customer-membership-device-card > strong {
  color: var(--content-1);
  font-size: var(--text-md);
}

.customer-membership-device-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.customer-membership-device-card code {
  color: var(--content-1);
  font-family: var(--mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.customer-membership-devices-loading,
.customer-membership-devices-empty {
  padding: var(--space-5);
  border: 1px dashed var(--border-1);
  border-radius: var(--radius-lg);
  color: var(--content-2);
  text-align: center;
}

@media (max-width: 540px) {
  .customer-picker-search-row {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-picker-create-btn {
    width: 100%;
  }
}

/* ── Domain ticket detail head actions ─────────────────────────────────────── */
.detail-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Domain ticket edit form ────────────────────────────────────────────────── */
.domain-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}

.domain-edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.domain-edit-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.domain-edit-input,
.domain-edit-select,
.domain-edit-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 0.93rem;
  font-family: inherit;
  color: #222;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.domain-edit-input:focus,
.domain-edit-select:focus,
.domain-edit-textarea:focus {
  outline: none;
  border-color: #0071e3;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15);
}

.domain-edit-textarea {
  resize: vertical;
  min-height: 72px;
}

.domain-edit-customer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.domain-edit-customer-name {
  font-size: 0.93rem;
  color: #222;
  flex: 1 1 auto;
  min-width: 0;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 0.82rem;
}

/* ── Domain ticket activity ─────────────────────────────────────────────────── */
.ticket-activity-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.ticket-activity-row {
  border: 1px solid #d8dee7;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.ticket-activity-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ticket-activity-main strong {
  font-size: 13px;
  color: #1f2937;
}

.ticket-activity-main span,
.ticket-activity-detail {
  color: #64748b;
  font-size: 12px;
}

.ticket-activity-detail {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.domain-workflow-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.domain-workflow-btn {
  min-height: 34px;
}

/* Venmo/Zelle/PayPal refund record fields (Refunded by + reference). */
#payment-refund-external-fields {
  margin-top: var(--space-3);
}

.payment-cash-register-note {
  border: 1px solid #d8dee7;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px;
  color: #334155;
  background: #f8fafc;
}

.payment-cash-register-note[data-state="open"] {
  border-color: #bbf7d0;
  color: #166534;
  background: #f0fdf4;
}

.payment-cash-register-note[data-state="closed"] {
  border-color: #fed7aa;
  color: #9a3412;
  background: #fff7ed;
}

#register-startup-modal[data-mode="workstation-mismatch"] .inv-form-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

#register-startup-modal .register-startup-override-btn {
  width: 100%;
  min-height: 48px;
}

#register-startup-modal .register-startup-signout-btn {
  width: 100%;
  min-height: 56px;
  border: 1px solid var(--cp-danger);
  border-radius: var(--radius-md);
  background: var(--cp-danger);
  color: var(--content-inv);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

#register-startup-modal .register-startup-signout-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cp-danger) 82%, var(--content-1));
  background: color-mix(in srgb, var(--cp-danger) 82%, var(--content-1));
  color: var(--content-inv);
}

/* ---- Inventory item form modal ---- */

.inv-form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
}

.inv-form-overlay.hidden {
  display: none;
}

.inv-form-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  width: min(680px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inv-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.inv-form-title {
  font-weight: 600;
  font-size: 0.97rem;
  color: #222;
}

.inv-form-body {
  padding: 16px 18px 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

.inv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.inv-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inv-field-wide {
  grid-column: 1 / -1;
}

.inv-field label {
  font-size: 0.77rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inv-field input {
  padding: 6px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.88rem;
  color: #222;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.inv-field input:focus {
  border-color: var(--accent);
}

.inv-form-error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: 0.85rem;
}

.inv-form-error.hidden {
  display: none;
}

.inv-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #e8e8e8;
  flex-shrink: 0;
  margin-top: 14px;
}

.inv-field select,
.inv-field textarea {
  padding: 6px 9px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.88rem;
  color: #222;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.inv-field select:focus,
.inv-field textarea:focus {
  border-color: var(--accent);
}

/* --- Customer form (RepairQ-style sidebar layout) --- */
#customer-form-modal .inv-form-panel {
  width: min(880px, 96vw);
}

#customer-form-modal .inv-form-body {
  padding: 0;
}

.cust-layout {
  display: flex;
  align-items: stretch;
}

.cust-tabs {
  display: flex;
  flex-direction: column;
  flex: 0 0 152px;
  border-right: 1px solid #ececec;
  background: #fafafa;
  padding: 8px 0;
}

.cust-tab {
  border: none;
  background: none;
  text-align: left;
  padding: 11px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s;
}

.cust-tab:hover {
  color: #374151;
  background: #f1f1f1;
}

.cust-tab-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: #fff;
}

.cust-tab-req {
  color: #e11d48;
  margin-left: 2px;
}

.cust-panels {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 380px;
  padding: 20px 22px;
}

.cust-tab-panel {
  display: none;
}

.cust-tab-panel-active {
  display: block;
}

/* Clean, RepairQ-style labels (override the uppercase inventory style) */
.cust-form .inv-field label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
}

.cust-form .inv-field input,
.cust-form .inv-field select {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  height: 38px;
}

.cust-form .inv-form-grid {
  gap: 14px 18px;
}

.cust-radio-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 2px;
}

.cust-form .inv-field label.cust-radio,
.cust-form .inv-field label.cust-check {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.88rem;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cust-radio input,
.cust-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.cust-inline {
  display: flex;
  gap: 8px;
}

.cust-inline input {
  flex: 1 1 auto;
  min-width: 0;
}

.cust-inline select {
  flex: 0 0 70px;
}

.cust-form .inv-form-error {
  margin: 12px 18px 0;
}

/* Blue centered header like RepairQ */
#customer-form-modal .inv-form-header {
  background: #4a9fd8;
  justify-content: center;
  position: relative;
  padding: 16px 18px;
  border-bottom: none;
}

#customer-form-modal .inv-form-title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}

#customer-form-modal .customer-picker-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.85;
}

#customer-form-modal .customer-picker-close:hover {
  opacity: 1;
}

/* Whole modal uses the clean sans font (match the title) */
#customer-form-modal,
#customer-form-modal input,
#customer-form-modal select,
#customer-form-modal textarea,
#customer-form-modal button {
  font-family: var(--sans);
}

/* ===== Customer profile page (RepairQ-style detail) ===== */
#customer-profile-page {
  font-family: var(--sans);
  padding: 16px 22px 40px;
}

.cprofile-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

.cprofile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 4px;
}

.cprofile-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cprofile-add-btn {
  width: var(--space-10);
  min-width: var(--space-10);
  height: var(--space-10);
  min-height: var(--space-10);
  padding: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-xl);
  line-height: 1;
}

#cprofile-new-ticket-menu {
  min-width: 160px;
}

.cprofile-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2937;
}

.cprofile-sub {
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  color: #9ca3af;
  margin-left: 6px;
}

.cprofile-phone {
  color: #6b7280;
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.cprofile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.cp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
  padding: 10px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.cp-stat-num {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
}

.cp-stat-label {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 2px;
}

.cprofile-layout {
  display: flex;
  gap: 0;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  min-height: 420px;
}

.cprofile-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 170px;
  background: #fafafa;
  border-right: 1px solid #ececec;
  padding: 8px 0;
}

.cprofile-tab {
  border: none;
  background: none;
  text-align: left;
  padding: 11px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.cprofile-tab:hover {
  color: #374151;
  background: #f1f1f1;
}

.cprofile-tab-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: #fff;
}

.cprofile-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 26px;
}

.cp-section + .cp-section {
  margin-top: 26px;
}

.cp-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #374151;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.cp-row {
  display: flex;
  padding: 6px 0;
  font-size: 0.9rem;
}

.cp-row-label {
  flex: 0 0 220px;
  color: #9ca3af;
  text-align: right;
  padding-right: 18px;
}

.cp-row-value {
  flex: 1 1 auto;
  color: #1f2937;
  min-width: 0;
  word-break: break-word;
}

.cp-yes { color: #16a34a; font-weight: 700; }
.cp-no { color: #dc2626; font-weight: 700; }

.cp-empty {
  padding: 24px 4px;
  color: #6b7280;
  font-size: 0.92rem;
}

.cp-table-wrap { overflow-x: auto; }

.cp-ticket-link {
  color: #1971c2;
  text-decoration: none;
  font-weight: 600;
}
.cp-ticket-link:hover { text-decoration: underline; }

.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.cp-table th {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 2px solid #eee;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
}

.cp-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #f1f1f1;
  color: #1f2937;
}

.cp-table tbody tr:hover { background: #f9fafb; }

.cp-credit-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.cp-credit-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.cp-credit-ledger {
  background: #ffffff;
  border: 1px solid #e1e7ee;
  border-radius: 10px;
  overflow: hidden;
}

.cp-credit-loading {
  padding: 18px;
  text-align: center;
  color: #6b7a8c;
  font-size: 13.5px;
}

.cp-credit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cp-credit-table thead th {
  background: #f3f6f9;
  color: #46556a;
  font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid #e1e7ee;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.cp-credit-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
  color: #1f2c3d;
}

.cp-credit-amount-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp-credit-pos { color: #15803d; font-weight: 600; }
.cp-credit-neg { color: #b91c1c; font-weight: 600; }

.cp-credit-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #eef1f5;
  color: #46556a;
}

.cp-credit-badge-earn       { background: #dcfce7; color: #166534; }
.cp-credit-badge-redeem     { background: #fef3c7; color: #92400e; }
.cp-credit-badge-adjustment { background: #e0e7ff; color: #3730a3; }
.cp-credit-badge-void       { background: #fee2e2; color: #991b1b; }

.cp-credit-voided {
  margin-top: 3px;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 600;
}

.cp-credit-void-btn {
  background: transparent;
  border: 1px solid #cbd2db;
  color: #46556a;
  font-size: 14px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 6px;
}

.cp-credit-void-btn:hover {
  background: #f1f5f9;
  border-color: #b91c1c;
  color: #b91c1c;
}

.cp-note-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-base);
  color: var(--content-1);
  line-height: var(--leading-body);
}

#customer-profile-page .cp-note-composer {
  display: grid;
  gap: var(--space-3);
}

#customer-profile-page .cp-note-input {
  width: 100%;
  min-height: calc(var(--space-10) * 3);
  resize: vertical;
}

#customer-profile-page .cp-note-composer-actions,
#customer-profile-page .cp-note-selected-heading,
#customer-profile-page .cp-note-upload-status-row,
#customer-profile-page .cp-note-card-header,
#customer-profile-page .cp-note-card-actions,
#customer-profile-page .cp-note-attachment-actions {
  display: flex;
  align-items: center;
}

#customer-profile-page .cp-note-composer-actions {
  justify-content: space-between;
  gap: var(--space-3);
}

#customer-profile-page .cp-note-choose-images {
  gap: var(--space-2);
}

#customer-profile-page .cp-note-icon {
  display: inline-block;
  flex: 0 0 var(--space-4);
  width: var(--space-4);
  height: var(--space-4);
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#customer-profile-page .cp-note-icon-upload {
  -webkit-mask-image: url('/assets/static/lucide-icons/upload.svg');
  mask-image: url('/assets/static/lucide-icons/upload.svg');
}

#customer-profile-page .cp-note-icon-eye {
  -webkit-mask-image: url('/assets/static/lucide-icons/eye.svg');
  mask-image: url('/assets/static/lucide-icons/eye.svg');
}

#customer-profile-page .cp-note-icon-download {
  -webkit-mask-image: url('/assets/static/lucide-icons/download.svg');
  mask-image: url('/assets/static/lucide-icons/download.svg');
}

#customer-profile-page .cp-note-icon-x {
  -webkit-mask-image: url('/assets/static/lucide-icons/x.svg');
  mask-image: url('/assets/static/lucide-icons/x.svg');
}

#customer-profile-page .cp-note-icon-file {
  width: var(--space-8);
  height: var(--space-8);
  flex-basis: var(--space-8);
  -webkit-mask-image: url('/assets/static/lucide-icons/file-text.svg');
  mask-image: url('/assets/static/lucide-icons/file-text.svg');
}

#customer-profile-page .cp-note-selected-images {
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

#customer-profile-page .cp-note-selected-heading {
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#customer-profile-page .cp-note-clear-images {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cp-accent-hover);
  font: inherit;
  cursor: pointer;
}

#customer-profile-page .cp-note-clear-images:hover {
  background: var(--cp-accent-soft);
}

#customer-profile-page .cp-note-selected-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-10) * 5)), 1fr));
  gap: var(--space-2);
}

#customer-profile-page .cp-note-selected-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) var(--space-8);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
}

#customer-profile-page .cp-note-selected-card img {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-3);
}

#customer-profile-page .cp-note-selected-details,
#customer-profile-page .cp-note-attachment-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

#customer-profile-page .cp-note-selected-name,
#customer-profile-page .cp-note-attachment-name {
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#customer-profile-page .cp-note-selected-size,
#customer-profile-page .cp-note-attachment-size {
  color: var(--content-3);
  font-size: var(--text-xs);
}

#customer-profile-page .cp-note-remove-image {
  display: inline-grid;
  width: var(--space-8);
  height: var(--space-8);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--content-2);
  cursor: pointer;
}

#customer-profile-page .cp-note-remove-image:hover {
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
}

#customer-profile-page .cp-note-upload-status {
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
}

#customer-profile-page .cp-note-upload-status.is-error {
  border-color: color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
}

#customer-profile-page .cp-note-upload-status.is-success {
  border-color: color-mix(in srgb, var(--cp-success) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 8%, var(--surface));
  color: var(--cp-success);
}

#customer-profile-page .cp-note-upload-status-row {
  justify-content: space-between;
  gap: var(--space-3);
}

#customer-profile-page .cp-note-upload-percent {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
}

#customer-profile-page .cp-note-upload-track {
  height: var(--space-1);
  margin-top: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--border-1);
}

#customer-profile-page .cp-note-upload-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--cp-accent);
  transition: width var(--dur-fast) var(--ease-standard);
}

#customer-profile-page .cp-note-list {
  display: grid;
  gap: var(--space-3);
}

#customer-profile-page .cp-note-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

#customer-profile-page .cp-note-card.is-important {
  border-left-color: var(--cp-warning);
  border-left-width: var(--space-1);
}

#customer-profile-page .cp-note-card-header {
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
}

#customer-profile-page .cp-note-card-meta {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

#customer-profile-page .cp-note-card-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

#customer-profile-page .cp-delete-note-action {
  white-space: nowrap;
}

#customer-profile-page .cp-note-card-header strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--content-1);
}

#customer-profile-page .cp-note-card-header time {
  flex: none;
  color: var(--content-3);
  font-size: var(--text-xs);
}

#customer-profile-page .cp-note-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-10) * 6)), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

#customer-profile-page .cp-note-attachment {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

#customer-profile-page .cp-note-attachment-preview {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-3);
  color: var(--content-3);
}

#customer-profile-page a.cp-note-attachment-preview:focus-visible,
#customer-profile-page .cp-note-clear-images:focus-visible,
#customer-profile-page .cp-note-remove-image:focus-visible,
#customer-profile-page .cp-note-attachment-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

#customer-profile-page .cp-note-attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-standard);
}

#customer-profile-page a.cp-note-attachment-preview:hover img {
  transform: scale(1.02);
}

#customer-profile-page .cp-note-attachment-details {
  padding: var(--space-3);
}

#customer-profile-page .cp-note-attachment-actions {
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0 var(--space-2) var(--space-2);
}

#customer-profile-page .cp-note-attachment-action {
  display: inline-flex;
  min-height: var(--space-8);
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cp-accent-hover);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
}

#customer-profile-page .cp-note-attachment-action:hover:not(:disabled) {
  background: var(--cp-accent-soft);
}

#customer-profile-page .cp-note-attachment-action.is-danger {
  color: var(--cp-danger);
}

#customer-profile-page .cp-note-attachment-action.is-danger:hover:not(:disabled) {
  background: var(--cp-danger-soft);
}

#customer-profile-page .cp-note-attachment-action:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 640px) {
  #customer-profile-page .cp-note-composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #customer-profile-page .cp-note-composer-actions .btn {
    width: 100%;
  }

  #customer-profile-page .cp-note-selected-heading,
  #customer-profile-page .cp-note-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #customer-profile-page .cp-note-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #customer-profile-page .cp-note-attachments,
  #customer-profile-page .cp-note-selected-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #customer-profile-page .cp-note-attachment-action,
  #customer-profile-page .cp-note-remove-image,
  #customer-profile-page .cp-note-clear-images {
    min-height: var(--space-10);
  }
}

.cp-important-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.cp-important-note-toggle input {
  accent-color: var(--cp-warning);
}

.cp-important-note-row {
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
}

.cp-important-note-badge,
.customer-picker-item-important {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--space-1);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 40%, var(--border-1));
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  background: color-mix(in srgb, var(--cp-warning) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 78%, var(--content-1));
  font-size: var(--text-xs);
  font-weight: 700;
}

.cp-important-note-action {
  white-space: nowrap;
}

.cp-important-note-action.is-active {
  border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  color: color-mix(in srgb, var(--cp-warning) 78%, var(--content-1));
}

.customer-important-note-alert {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--cp-warning) 42%, var(--border-1));
  border-left: 4px solid var(--cp-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
}

.customer-important-note-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: var(--cp-warning);
  color: var(--content-inv);
  font-weight: 800;
}

.customer-important-note-alert strong {
  display: block;
  margin-bottom: var(--space-1);
  color: color-mix(in srgb, var(--cp-warning) 78%, var(--content-1));
  font-size: var(--text-sm);
}

.customer-important-note-alert p {
  margin: 0;
  white-space: pre-wrap;
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.repair-fast-linked-customer + .customer-important-note-alert {
  margin-top: var(--space-3);
}

.report-ticket-link {
  color: var(--cp-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--cp-accent) 35%, transparent);
  text-underline-offset: 2px;
}

.report-ticket-link:hover,
.report-ticket-link:focus-visible {
  color: var(--cp-accent);
  text-decoration-color: currentColor;
}

/* Edit columns modal */
.cust-cols-panel { width: min(560px, 96vw); }

.cust-cols-hint {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 12px;
}

.cust-cols-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

/* Section grouping inside the Tickets Edit Columns modal — each section is a
   full-width header followed by a 2-column grid of checkbox rows. Used by
   openTicketColumnsModal() in app-tickets.js. */
.cust-cols-section {
  grid-column: 1 / -1;
}

.cust-cols-section-title {
  margin: 12px 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.cust-cols-section:first-child .cust-cols-section-title {
  margin-top: 0;
}

.cust-cols-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

.cust-col-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #374151;
  cursor: pointer;
  padding: 3px 0;
}

.cust-col-item input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  flex: none;
}

/* Search input above the column list — type to filter the ~84 optional
   columns. Section headers whose children are all filtered out are hidden
   too. See openTicketColumnsModal() in app-tickets.js for the wiring. */
.cust-cols-search-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 10px;
  background: inherit;
}
.cust-cols-search {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cust-cols-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 142, 208, 0.18);
}
.cust-cols-search::placeholder { color: #9ca3af; }

.cust-cols-empty {
  margin: 12px 0 0;
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
}
.cust-cols-empty.hidden { display: none; }

/* Compact toolbar dropdowns (Viewing / View). */
.dev-tb-mini {
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.8rem;
  background: #fff;
  height: 26px;
  min-width: 64px;
  max-width: 110px;
}
.dev-tb-lbl {
  color: #6b7280;
  font-size: 0.82rem;
}

/* Date chip + popover. */
.devices-date-chip-wrap {
  position: relative;
  display: inline-flex;
}
.devices-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.84rem;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
.devices-date-chip:hover { border-color: #1971c2; }
.devices-date-chip[aria-expanded="true"] { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); }
.devices-date-chip-label { color: #374151; }
.devices-date-chip-caret {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2;
}
.devices-date-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--cp-z-floating);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  padding: 10px 12px 10px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: none;
}
.devices-date-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.devices-date-section-title-2 { margin-top: 8px; }
.devices-date-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 0.78rem;
  color: #374151;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.devices-date-radio span { text-transform: none; letter-spacing: 0; }
.devices-date-radio input[type="radio"] {
  width: 13px; height: 13px;
  accent-color: #1971c2;
}
.devices-date-custom-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 0 21px;
}
.devices-date-custom-row input[type="date"] {
  padding: 2px 4px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.72rem;
  color: #374151;
  width: 88px;
}
.devices-date-type-select {
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.78rem;
  background: #fff;
  margin-top: 1px;
  height: 26px;
}
.devices-date-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.devices-date-actions .btn-primary {
  min-width: 72px;
  font-size: 0.8rem;
  padding: 4px 12px;
}

/* Group that keeps +Filter / +Keyword / Reset together on the same row */
.devices-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* + Filter popover */
.devices-add-filter-wrap { position: relative; display: inline-block; }
.devices-add-filter-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--cp-z-floating);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  padding: 6px;
  width: 180px;
}
.devices-add-filter-search {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.devices-add-filter-list {
  list-style: none;
  margin: 0; padding: 0;
  max-height: 260px;
  overflow-y: auto;
}
.devices-add-filter-list li {
  padding: 6px 8px;
  font-size: 0.82rem;
  color: #374151;
  cursor: pointer;
  border-radius: 4px;
}
.devices-add-filter-list li:hover,
.devices-add-filter-list li.is-active {
  background: #d1d5db;
  color: #111827;
}
.devices-extra-chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.devices-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 3px 8px 3px 10px;
  font-size: 0.78rem;
  color: #374151;
  white-space: nowrap;
}
.devices-extra-chip { cursor: pointer; }
.devices-extra-chip:hover { border-color: #1971c2; }
.devices-extra-chip-label { color: #1971c2; }
.devices-extra-chip-x {
  cursor: pointer;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
}
.devices-extra-chip-x:hover { color: #ef4444; }

/* Multi-select dropdown for a filter chip (Ticket Status, Manufacturer, …). */
.devices-multiselect-popover {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 280px;
  max-width: 340px;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.devices-ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 4px;
  border-bottom: 1px solid #f3f4f6;
}
.devices-ms-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #1f2937;
}
.devices-ms-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.devices-ms-close:hover {
  color: #ef4444;
  background: #fee2e2;
}
.devices-ms-footer {
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.devices-ms-save {
  font-size: 0.8rem;
  padding: 4px 16px;
  min-width: 72px;
}
/* Text-input chip popover (Phone, Last Name, Email). */
.devices-ms-text-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.86rem;
  color: #374151;
  box-sizing: border-box;
}
.devices-ms-text-input:focus { outline: none; border-color: #1971c2; }
/* Standalone date popover (used by Customers Date Range chip). */
.devices-date-popover-standalone .devices-date-section-title { margin-top: 4px; }
.devices-ms-search {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.85rem;
  box-sizing: border-box;
}
.devices-ms-actions {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 6px;
}
.devices-ms-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 0.8rem;
  color: #1971c2;
  cursor: pointer;
}
.devices-ms-action:hover { background: #eff6ff; }
.devices-ms-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1971c2;
}
.devices-ms-list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1;
  max-height: 320px;
}
.devices-ms-list li {
  padding: 0;
}
.devices-ms-list li label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 0.85rem;
  color: #374151;
  cursor: pointer;
  border-radius: 4px;
}
.devices-ms-list li label:hover { background: #f3f4f6; }
.devices-ms-list input[type="checkbox"],
.devices-ms-list input[type="radio"] {
  /* Override the global `input { min-height: 38px }` rule so neither the
     multi-select checkboxes nor the single-select radios blow up into giant
     empty circles (which is what the Approval popover was showing). */
  width: 14px; height: 14px;
  min-height: 0; min-width: 0;
  margin: 0;
  flex: 0 0 14px;
  accent-color: #1971c2;
  cursor: pointer;
}
.devices-ms-list li label span {
  flex: 1 1 auto;
  color: #111827;
  font-size: 0.85rem;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.devices-ms-list li.devices-ms-section-header {
  padding: 8px 8px 4px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  cursor: default;
}
.devices-ms-list li.devices-ms-section-header:first-child {
  border-top: 0;
}

/* Devices subsection (RepairQ-style) */
.devices-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 22px 14px;
}
.devices-toolbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  min-height: 36px;
}
.devices-toolbar-row-top {
  justify-content: space-between;
  gap: 16px;
}
.devices-pagination-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: #374151;
  white-space: nowrap;
  flex-wrap: wrap;
  min-width: 0;
}
/* Row 2: filters live here. Allows the row to wrap on narrow viewports. */
.devices-toolbar-row-filters {
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.devices-pagination-summary > * { flex: none; }
.devices-pagination-summary select {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.86rem;
  background: #fff;
}
.devices-pagination-summary .filter-icon svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
}
.devices-pagination-summary #devices-range {
  margin-left: 4px;
  font-weight: 600;
  color: #1f2937;
}
.devices-right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  flex-wrap: nowrap;
}
.devices-right-controls .round-action {
  width: 34px;
  height: 34px;
}
.devices-pagination-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  flex-wrap: nowrap;
}
.devices-pagination-nav button {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 4px;
  min-width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #374151;
  padding: 0 6px;
}
.devices-pagination-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.devices-pagination-nav #devices-page-indicator {
  min-width: 28px;
  padding: 0 8px;
  text-align: center;
  font-weight: 600;
  color: #1f2937;
}
.devices-pagination-nav #devices-menu-btn {
  margin-left: 8px;
}
.devices-toolbar-row-filters {
  background: #f3f4f6;
  padding: 8px 12px;
  border-radius: 6px;
  gap: 10px;
  flex-wrap: wrap;
}
.devices-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.85rem;
  color: #6b7280;
  white-space: nowrap;
  min-height: 30px;
}
.devices-filter-chip > span:first-child { color: #6b7280; }
.devices-filter-chip select,
.devices-filter-chip input {
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: #1971c2;
  padding: 0;
  min-width: 0;
}
.devices-filter-chip input[type="date"] { width: 110px; }
.devices-link-btn {
  background: none;
  border: none;
  color: #1971c2;
  font-size: 0.86rem;
  cursor: pointer;
  padding: 4px 8px;
  white-space: nowrap;
}
.devices-link-btn:hover { text-decoration: underline; }
.devices-link-muted { color: #9ca3af; cursor: default; }
.devices-link-muted:hover { text-decoration: none; }
.devices-link-active { color: #1971c2; font-weight: 600; cursor: pointer; }
.devices-link-active:hover { text-decoration: underline; }
/* Matches the customers +Keyword input exactly (transparent border + accent color). */
.devices-keyword-input {
  width: min(260px, 100%);
  min-width: 240px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--accent);
  background: #fff;
}
.devices-keyword-input::placeholder {
  color: var(--accent);
  opacity: 1;
}

/* Inventory screens are data-dense workspaces. Keep the toolbar closer to
   RepairQ's compact control row without changing Customers/Devices. */
.inventory-page .devices-toolbar {
  gap: 6px;
  padding: 8px 18px 10px;
}

.inventory-page .devices-toolbar-row {
  min-height: 30px;
  gap: 10px;
}

.inventory-page .devices-toolbar-row-top {
  gap: 12px;
}

.inventory-page .devices-pagination-summary {
  gap: 8px;
  font-size: 12px;
  line-height: 1.2;
}

.inventory-page .devices-pagination-summary .filter-icon svg {
  width: 15px;
  height: 15px;
}

.inventory-page .dev-tb-lbl,
.inventory-page .devices-link-btn,
.inventory-page .devices-date-chip,
.inventory-page .devices-extra-chip {
  font-size: 12px;
}

.inventory-page .dev-tb-mini,
.inventory-page .devices-pagination-summary select {
  height: 27px;
  min-height: 27px;
  padding: 2px 24px 2px 7px;
  font-size: 12px;
}

.inventory-page .dev-tb-mini {
  max-width: 134px;
}

.inventory-page .devices-date-chip {
  min-height: 27px;
  padding: 3px 9px;
  border-radius: 4px;
}

.inventory-page .devices-actions-group {
  gap: 7px;
}

.inventory-page .devices-link-btn {
  padding: 3px 6px;
}

.inventory-page .devices-keyword-input {
  min-height: 28px;
  min-width: 190px;
  padding: 4px 8px;
  font-size: 12px;
}

.inventory-page .devices-right-controls {
  gap: 8px;
  margin-left: auto;
}

.inventory-page .devices-pagination-nav {
  gap: 3px;
}

.inventory-page .devices-pagination-nav button {
  min-width: 28px;
  height: 28px;
  padding: 0 5px;
  font-size: 13px;
}

.inventory-page .devices-pagination-nav #inv-page-indicator,
.inventory-page .devices-pagination-nav #iid-page-indicator {
  min-width: 24px;
  padding: 0 5px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}

.inventory-page .devices-right-controls .round-action,
.inventory-page .round-action {
  width: 32px;
  height: 32px;
}

.inventory-page .round-action svg {
  width: 18px;
  height: 18px;
}

/* Customers / Devices — RepairQ-style page shell and dense data grids. */
#customers-page.customers-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 0;
}

#customers-page > .dashboard-breadcrumb {
  display: none;
}

#customers-page .customers-shell {
  min-height: calc(100vh - 120px);
}

#customers-page .inventory-title-bar {
  min-height: 42px;
  padding: 0 18px;
}

#customers-page #customers-page-title {
  white-space: nowrap;
}

#customers-page #customers-page-subtitle,
#customers-page #customers-section-tabs {
  display: none;
}

#customers-page .inventory-toolbar {
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 14px 22px 8px;
}

#customers-page .inventory-view-controls {
  gap: 10px;
  flex-wrap: nowrap;
  color: #5f5f5f;
  font-size: 12px;
  line-height: 1.2;
}

#customers-page .inventory-view-controls select,
#customers-page .inventory-page-controls select,
#customers-page .devices-pagination-summary select,
#customers-page .dev-tb-mini {
  height: 29px;
  min-height: 29px;
  padding: 2px 24px 2px 8px;
  font-size: 12px;
}

#customers-page .inventory-view-controls #customers-view {
  min-width: 150px;
}

#customers-page .inventory-view-controls #customers-page-size,
#customers-page .inventory-page-controls #customers-page-select {
  min-width: 70px;
}

#customers-page .inventory-view-controls strong,
#customers-page .devices-pagination-summary,
#customers-page .devices-pagination-summary #devices-range {
  font-size: 12px;
}

#customers-page .inventory-page-controls,
#customers-page .devices-pagination-nav {
  gap: 4px;
}

#customers-page .inventory-page-btn,
#customers-page .devices-pagination-nav button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
}

#customers-page .inventory-page-btn svg {
  width: 18px;
  height: 18px;
}

#customers-page .inventory-actions .round-action,
#customers-page .devices-right-controls .round-action {
  width: 34px;
  height: 34px;
}

#customers-page .inventory-actions .round-action svg,
#customers-page .devices-right-controls .round-action svg {
  width: 18px;
  height: 18px;
}

#customers-page .inventory-filters {
  gap: 12px;
  padding: 8px 22px 12px;
  background: #ffffff;
}

#customers-page #customers-type,
#customers-page #customers-ticket-filter {
  display: none;
}

#customers-page .inventory-filter-pill,
#customers-page .devices-date-chip {
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
}

#customers-page .inventory-filter-pill {
  min-width: 210px;
}

#customers-page .devices-actions-group {
  gap: 8px;
}

#customers-page .devices-link-btn,
#customers-page .inventory-reset,
#customers-page .devices-extra-chip {
  font-size: 12px;
}

#customers-page .customers-keyword-input,
#customers-page .devices-keyword-input {
  min-height: 30px;
  min-width: 220px;
  padding: 4px 8px;
  font-size: 12px;
}

#customers-page .customers-summary-strip {
  display: none;
}

#customers-page #customers-list-section,
#customers-page #customer-devices-section .customers-table-wrap {
  padding: 0 22px 24px;
  border-top: 0;
}

#customers-page #customers-list-section .customers-table,
#customers-page #customer-devices-section .customer-devices-table {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
  color: #5f5f5f;
  font-size: 12px;
  line-height: 1.2;
}

#customers-page #customers-list-section .customers-table {
  min-width: max(100%, calc(var(--space-10) * 28));
}

#customers-page #customer-devices-section .customer-devices-table {
  min-width: 1880px;
}

#customers-page #customers-list-section .customers-table th,
#customers-page #customers-list-section .customers-table td,
#customers-page #customer-devices-section .customer-devices-table th,
#customers-page #customer-devices-section .customer-devices-table td {
  height: 28px;
  padding: 4px 8px;
  max-width: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #dcdcdc;
  font-size: 12px;
  vertical-align: middle;
  text-align: left;
}

#customers-page #customer-devices-section .customer-devices-table th,
#customers-page #customer-devices-section .customer-devices-table td {
  width: auto !important;
}

#customers-page #customers-list-section .customers-table th,
#customers-page #customer-devices-section .customer-devices-table th {
  height: 34px;
  background: #e6ebf0;
  color: #60666c;
  font-size: 11px;
  font-weight: 700;
}

#customers-page #customers-list-section .customer-name-btn {
  color: #5f5f5f;
  font: inherit;
  font-weight: 500;
}

#customers-page #customers-list-section .customer-name-btn:hover,
#customers-page #customer-devices-section .cp-ticket-link {
  color: #1398d5;
}

#customers-page #customers-list-section .customer-actions-td,
#customers-page #customer-devices-section .device-actions-th,
#customers-page #customer-devices-section .device-actions-cell {
  text-align: center;
}

#customers-page #customers-list-section .row-menu-btn {
  width: 22px;
  min-height: 22px;
  padding: 2px 0;
}

#customers-page #customers-list-section .row-menu-btn span {
  width: 3px;
  height: 3px;
}

#customers-page #customer-devices-section .devices-toolbar {
  gap: 8px;
  padding: 14px 22px 12px;
}

#customers-page #customer-devices-section .devices-toolbar-row {
  min-height: 30px;
}

#customers-page #customer-devices-section .devices-toolbar-row-filters {
  padding: 0;
  border-radius: 0;
  background: #ffffff;
}

#customers-page #customer-devices-section .devices-right-controls {
  margin-left: auto;
}

#customers-page #customer-devices-section .device-badge {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1.1;
}

#customers-page #customer-devices-section .device-action-magnify {
  width: 26px;
  height: 26px;
  background: transparent;
  color: #1398d5;
}

#customers-page #customer-devices-section .device-action-magnify svg {
  width: 16px;
  height: 16px;
}

#customers-page #customers-list-section .customers-table :is(th, td) { width: 132px !important; }
#customers-page #customers-list-section .customers-table :is(.customer-col-name, .customer-col-company, .customer-col-email) { width: 190px !important; }
#customers-page #customers-list-section .customers-table :is(.customer-col-location, .customer-col-phone, .customer-col-last-ticket-at) { width: 145px !important; }
#customers-page #customers-list-section .customers-table :is(.customer-col-ticket-count, .customer-col-ticket-amount, .customer-col-receipt-amount) { width: 112px !important; }

#customers-page #customer-devices-section .customer-devices-table :is(th, td) { width: 124px !important; }
#customers-page #customer-devices-section .customer-devices-table :is(.dev-compact, .dev-compact-th) { width: 78px !important; }
#customers-page #customer-devices-section .customer-devices-table :is(.dev-long, .dev-long-th) { width: 190px !important; }

/* Reset button shared state for inventory-style filters (Customers, etc.) */
.inventory-reset.is-active {
  color: #1971c2;
  font-weight: 600;
}

/* Opportunities / Contacts - RepairQ-style page shell and dense contacts grid. */
#opportunities-contacts-page.customers-page,
#opportunities-quotes-page.customers-page,
#opportunities-appointments-page.customers-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 0;
}

#opportunities-contacts-page > .dashboard-breadcrumb,
#opportunities-quotes-page > .dashboard-breadcrumb,
#opportunities-appointments-page > .dashboard-breadcrumb {
  display: none;
}

#opportunities-contacts-page .opportunities-title-bar,
#opportunities-quotes-page .opportunities-title-bar,
#opportunities-appointments-page .opportunities-title-bar {
  min-height: 42px;
  padding: 0 18px;
}

#opportunities-contacts-page .opportunities-title-bar h2,
#opportunities-quotes-page .opportunities-title-bar h2,
#opportunities-appointments-page .opportunities-title-bar h2 {
  white-space: nowrap;
}

#opportunities-contacts-page .inventory-page-subtitle,
#opportunities-quotes-page .inventory-page-subtitle,
#opportunities-appointments-page .inventory-page-subtitle,
#opportunities-section-tabs,
#opportunities-section-tabs-quotes,
#opportunities-section-tabs-appointments {
  display: none;
}

#opportunities-contacts-page .opportunities-toolbar {
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 14px 22px 8px;
}

#opportunities-contacts-page .inventory-view-controls {
  gap: 10px;
  flex-wrap: nowrap;
  color: #5f5f5f;
  font-size: 12px;
  line-height: 1.2;
}

#opportunities-contacts-page .inventory-view-controls select,
#opportunities-contacts-page .inventory-page-controls select {
  height: 29px;
  min-height: 29px;
  padding: 2px 24px 2px 8px;
  font-size: 12px;
}

#opportunities-contacts-page .inventory-view-controls #opportunities-contacts-view {
  min-width: 150px;
}

#opportunities-contacts-page .inventory-view-controls #opportunities-contacts-page-size,
#opportunities-contacts-page .inventory-page-controls #opportunities-contacts-page-select {
  min-width: 70px;
}

#opportunities-contacts-page .inventory-view-controls strong {
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#opportunities-contacts-page .inventory-page-controls {
  gap: 4px;
}

#opportunities-contacts-page .inventory-page-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
}

#opportunities-contacts-page .inventory-page-btn svg {
  width: 18px;
  height: 18px;
}

#opportunities-contacts-page .inventory-actions .round-action {
  width: 34px;
  height: 34px;
}

#opportunities-contacts-page .inventory-actions .round-action svg {
  width: 18px;
  height: 18px;
}

#opportunities-contacts-page .opportunities-filters {
  gap: 12px;
  padding: 8px 22px 12px;
  background: #ffffff;
}

#opportunities-contacts-page .inventory-filter-pill {
  min-width: 210px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
}

#opportunities-contacts-page .devices-actions-group {
  gap: 8px;
}

#opportunities-contacts-page .devices-link-btn,
#opportunities-contacts-page .inventory-reset {
  font-size: 12px;
}

#opportunities-contacts-page .customers-keyword-input {
  min-height: 30px;
  min-width: 240px;
  padding: 4px 8px;
  font-size: 12px;
}

#opportunities-contacts-page .inventory-section {
  border-top: 0;
}

#opportunities-contacts-page .opportunities-contacts-table-wrap {
  padding: 0 22px 24px;
  border-top: 0;
}

#opportunities-contacts-page .opportunities-contacts-table {
  width: 100% !important;
  min-width: 1540px;
  table-layout: fixed;
  border-collapse: collapse;
  color: #5f5f5f;
  font-size: 12px;
  line-height: 1.2;
}

#opportunities-contacts-page .opportunities-contacts-table th,
#opportunities-contacts-page .opportunities-contacts-table td {
  height: 28px;
  padding: 4px 8px;
  max-width: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #dcdcdc;
  font-size: 12px;
  vertical-align: middle;
  text-align: left;
}

#opportunities-contacts-page .opportunities-contacts-table th {
  height: 34px;
  background: #e6ebf0;
  color: #60666c;
  font-size: 11px;
  font-weight: 700;
}

#opportunities-contacts-page .opportunities-contacts-table tbody tr {
  cursor: pointer;
}

#opportunities-contacts-page .opportunities-contacts-table tbody tr:hover {
  background: #f1f1f1;
}

#opportunities-contacts-page .opportunities-contacts-table .cp-ticket-link {
  color: #5f5f5f;
  font: inherit;
  font-weight: 500;
}

#opportunities-contacts-page .opportunities-contacts-table .cp-ticket-link:hover {
  color: #1398d5;
}

#opportunities-contacts-page .opp-customer-yes {
  color: #4caf50;
  font-weight: 600;
}

#opportunities-contacts-page .opp-customer-no {
  color: #f28c28;
  font-weight: 600;
}

#opportunities-contacts-page .opp-actions-td {
  text-align: center;
}

#opportunities-contacts-page .row-menu-btn {
  width: 22px;
  min-height: 22px;
  padding: 2px 0;
}

#opportunities-contacts-page .row-menu-btn span {
  width: 3px;
  height: 3px;
}

#opportunities-contacts-page .opportunities-contacts-table th:nth-child(1),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(1) { width: 21% !important; }
#opportunities-contacts-page .opportunities-contacts-table th:nth-child(2),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(2) { width: 13% !important; }
#opportunities-contacts-page .opportunities-contacts-table th:nth-child(3),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(3) { width: 13% !important; }
#opportunities-contacts-page .opportunities-contacts-table th:nth-child(4),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(4) { width: 14% !important; }
#opportunities-contacts-page .opportunities-contacts-table th:nth-child(5),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(5) { width: 18% !important; }
#opportunities-contacts-page .opportunities-contacts-table th:nth-child(6),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(6) { width: 8% !important; }
#opportunities-contacts-page .opportunities-contacts-table th:nth-child(7),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(7) { width: 8% !important; }
#opportunities-contacts-page .opportunities-contacts-table th:nth-child(8),
#opportunities-contacts-page .opportunities-contacts-table td:nth-child(8) { width: 5% !important; }

/* Customers + Keyword input that appears when the link is clicked. */
.customers-keyword-input {
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.85rem;
  min-width: 240px;
  color: #1971c2;
}
.customers-keyword-input::placeholder {
  color: #6b9fc4;
  opacity: 0.85;
}

.device-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  color: #fff;
  white-space: nowrap;
}
.device-badge.badge-blue { background: #2196f3; }
.device-badge.badge-green { background: #4caf50; }
.device-badge.badge-cyan { background: #00bcd4; }
.device-badge.badge-red { background: #e53935; }
.device-badge.badge-amber { background: #ff9800; }
.device-badge.badge-gray { background: #9e9e9e; }
.device-badge.badge-purple { background: #7c3aed; }
.device-badge.badge-magenta { background: #c026d3; }
.device-badge.badge-indigo { background: #4f46e5; }
.device-badge.badge-orange { background: #f97316; }
.device-badge.badge-teal { background: #0f766e; }
.device-badge.badge-slate { background: #475569; }

.device-actions-th, .device-actions-cell { text-align: center; width: 56px; }
.device-action-magnify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #e7f5ff;
  color: #1971c2;
}
.device-action-magnify svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
}

.device-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }

.cust-cols-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}
.cust-cols-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.82rem;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.cust-cols-chip:hover { background: #e5e7eb; }
.cust-cols-chip-x { color: #9ca3af; font-weight: 700; }

/* Import modal */
.cust-import-panel { width: min(460px, 96vw); }

.cust-import-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 2px;
}

.cust-import-actions .btn { width: 100%; }

.cust-import-status {
  margin-top: 12px;
  font-size: 0.88rem;
  color: #2563eb;
  min-height: 18px;
}

/* Customer section tabs — breathing room below the dark header */
#customers-section-tabs {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ===== Sub-bar: scoped global search (RepairQ-style) ===== */
.subbar {
  background: #ffffff;
  border-bottom: 1px solid #dcdfe3;
  padding: 8px clamp(18px, 2.5vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--sans);
}

.subbar-breadcrumb {
  min-height: 38px;
  display: flex;
  align-items: center;
  min-width: 0;
  color: #777777;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.subbar-breadcrumb svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-left: auto;
  min-width: 0;
}

.search-scopes {
  display: flex;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  overflow: hidden;
}

.scope-btn {
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-right: 1px solid #e0e3e7;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.scope-btn:last-child { border-right: none; }

.scope-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scope-btn:hover { background: #e8eaed; color: #374151; }
.scope-btn.active { background: #2b2f36; color: #ffffff; }

.subbar .top-search {
  height: 38px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  overflow: hidden;
  min-width: 0;
}

.subbar .top-search input {
  width: clamp(180px, 22vw, 300px);
  min-width: 0;
  border: none;
  font-family: var(--sans);
}

.subbar .top-search button {
  border-radius: 0;
}

.subbar .top-icon-btn {
  width: 38px;
  height: 38px;
  color: #2b9fe0;
  border-radius: 6px;
}

.subbar .top-icon-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.subbar .top-icon-btn:disabled { color: #9ca3af; }

.subbar .repair-price-calc-btn {
  color: #1f2937;
  border: 1px solid #cfd4da;
  background: #ffffff;
}

.subbar .repair-price-calc-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.subbar .top-square-btn {
  height: 38px;
  min-width: 44px;
  border-radius: 6px;
}

/* Visible customer search box (replaces the subtle "+ Keyword" link) */
#customers-search.customers-search-box {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 320px;
  background: #fff;
  color: #1f2937;
  font-size: 0.9rem;
}

#customers-search.customers-search-box:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(74, 159, 216, 0.18);
}

/* Tickets toolbar: kebab + add grouped on the right, like inventory/customers */
#tickets-list-view .results-title-row {
  flex: 1 1 auto;
}

#tickets-list-view .devices-toolbar {
  gap: 6px;
  padding: 8px 18px 10px;
}

#tickets-list-view .devices-toolbar-row {
  min-height: 30px;
  gap: 10px;
}

#tickets-list-view .devices-toolbar-row-top {
  gap: 12px;
}

#tickets-list-view .devices-pagination-summary {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 12px;
  line-height: 1.2;
}

#tickets-list-view .devices-pagination-summary #tickets-range {
  margin-left: 4px;
  color: #1f2937;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#tickets-list-view .devices-pagination-summary .filter-icon svg {
  width: 15px;
  height: 15px;
}

#tickets-list-view .dev-tb-lbl,
#tickets-list-view .devices-link-btn,
#tickets-list-view .devices-date-chip,
#tickets-list-view .devices-extra-chip {
  font-size: 12px;
}

#tickets-list-view .dev-tb-mini,
#tickets-list-view .devices-pagination-summary select {
  height: 27px;
  min-height: 27px;
  padding: 2px 24px 2px 7px;
  font-size: 12px;
}

#tickets-list-view .dev-tb-mini {
  max-width: 134px;
}

#tickets-list-view #selection-mode-btn {
  min-height: 27px;
  padding: 2px 9px;
  font-size: 12px;
}

#tickets-list-view .devices-date-chip {
  min-height: 27px;
  padding: 3px 9px;
  border-radius: 4px;
}

#tickets-list-view .devices-actions-group {
  gap: 7px;
}

#tickets-list-view .devices-toolbar-row-filters {
  padding: 4px 8px;
  border-radius: 4px;
}

#tickets-list-view .inventory-filter-pill {
  min-height: 27px;
  min-width: 0;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
}

#tickets-list-view .devices-link-btn {
  padding: 3px 6px;
}

#tickets-list-view .devices-keyword-input {
  min-height: 28px;
  min-width: 190px;
  padding: 4px 8px;
  font-size: 12px;
}

#tickets-list-view .devices-right-controls {
  gap: 8px;
  margin-left: auto;
}

#tickets-list-view .devices-pagination-nav {
  gap: 3px;
}

#tickets-list-view .devices-pagination-nav button {
  min-width: 28px;
  height: 28px;
  padding: 0 5px;
  font-size: 13px;
}

#tickets-list-view .devices-pagination-nav #tickets-page-indicator {
  min-width: 24px;
  padding: 0 5px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}

#tickets-list-view .devices-right-controls .round-action,
#tickets-list-view .round-action {
  width: 32px;
  height: 32px;
}

#tickets-list-view .round-action svg {
  width: 18px;
  height: 18px;
}

.tickets-actions-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Inventory row actions dropdown ---- */

.inv-row-menu {
  position: fixed;
  z-index: var(--cp-z-floating);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 110px;
  padding: 4px 0;
}

.inv-row-menu-item {
  display: block;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.88rem;
  color: #222;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
}

.inv-row-menu-item:hover {
  background: #f4f4f4;
}

.inv-row-menu-danger {
  color: #c73f3f;
}

.inv-row-menu-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* PO row-menu — wider so View / Edit / Print + icon fit comfortably. */
.inv-row-menu .inv-row-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #0797ca;
  font-weight: 500;
}
.inv-row-menu .inv-row-menu-item span:first-child {
  flex: 1;
}
.inv-row-menu-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ticket-row-menu {
  min-width: 210px;
}

/* PO actions menu (section kebab) — slightly wider for the longer labels. */
#po-actions-menu {
  min-width: 200px;
}

/* PO row menu sized to match the screenshot's spacing. */
#po-row-menu {
  min-width: 150px;
}

/* Modal helpers reused by PO Import / Columns / Views / Quick Action / Scan. */
.newpo-modal-list {
  max-height: 260px;
  overflow-y: auto;
  margin: 8px 0;
}
.newpo-modal-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.88rem;
  color: #1f2937;
  cursor: pointer;
  border-radius: 4px;
}
.newpo-modal-checkbox:hover { background: #f3f4f6; }
/* Global `input { min-height: 38px }` would otherwise inflate the checkbox
   to look like a giant blue button — restore native 14×14 sizing inside
   the Edit Columns modal so the label text actually shows beside it. */
.newpo-modal-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-height: 0;
  margin: 0;
  flex: 0 0 14px;
  cursor: pointer;
}
.newpo-modal-checkbox span {
  flex: 1;
  color: #1f2937;
  letter-spacing: normal;
  user-select: none;
}

/* ============================================================
   PO Import modal — Supplier / Location / Status / File form
   ============================================================ */
.po-import-card { max-width: 1080px; width: 100%; }
.po-import-ms-card {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 14px;
}
.po-import-ms-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}
.po-import-ms-copy strong {
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
}
.po-import-ms-copy span {
  color: #64748b;
  font-size: 13px;
}
.po-import-ms-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.po-import-ms-id {
  flex: 1 1 280px;
}
.po-import-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.po-import-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 140px;
}
.po-import-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.02em;
}
.po-import-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #1f2937;
  min-height: 0;
}
.po-import-input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #1f2937;
  min-height: 0;
}
.po-import-select:focus,
.po-import-input:focus {
  outline: 2px solid #3aa3d6;
  outline-offset: -1px;
}
.po-import-field-file { flex: 1 1 240px; }
.po-import-file-wrap {
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.po-import-file-wrap input[type="file"] {
  border: none;
  background: transparent;
  font-size: 12px;
  min-height: 0;
  width: 100%;
}
.po-import-submit {
  height: 36px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  flex: 0 0 auto;
}
.po-import-template-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}
.po-import-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 4px 0 14px;
  text-transform: uppercase;
}
.po-import-divider::before,
.po-import-divider::after {
  content: "";
  height: 1px;
  background: #e5e7eb;
  flex: 1 1 auto;
}
.po-import-tpl-btn {
  background: #2c5e7c;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.po-import-tpl-btn:hover { background: #234d66; }
.po-import-tpl-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.po-import-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  min-height: 18px;
}
.po-import-result:empty { padding: 0; min-height: 0; }
.po-import-result.is-loading { background: #f3f4f6; color: #374151; }
.po-import-result.is-success { background: #d1fae5; color: #065f46; }
.po-import-result.is-error { background: #fee2e2; color: #991b1b; }

@media (max-width: 720px) {
  .po-import-ms-controls { flex-direction: column; align-items: stretch; }
  .po-import-row { flex-direction: column; align-items: stretch; }
  .po-import-submit { width: 100%; }
}

/* ============================================================
   Advanced Search modal — opens from topbar magnifying glass
   ============================================================ */
.adv-search-body { width: min(1080px, 100%); display: flex; flex-direction: column; }
.adv-search-layout { display: flex; min-height: 460px; }
.adv-search-tabs {
  width: 200px;
  background: #f3f4f6;
  border-right: 1px solid #e5e7eb;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
}
.adv-search-tab {
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  padding: 12px 18px;
  text-align: left;
  font-size: 15px;
  color: #374151;
  cursor: pointer;
  transition: background 100ms;
}
.adv-search-tab:hover { background: #e5e7eb; }
.adv-search-tab.is-active {
  background: #fff;
  border-left-color: #3aa3d6;
  color: #1f2937;
  font-weight: 500;
}
.adv-search-panes { flex: 1; padding: 24px 28px; overflow-y: auto; }
.adv-search-pane { display: none; }
.adv-search-pane.is-active { display: block; }
.adv-search-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.adv-search-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.adv-search-field-full { width: 100%; }
.adv-search-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: 0.01em;
}
.adv-search-input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  color: #1f2937;
  min-height: 0;
  width: 100%;
}
.adv-search-input:focus { outline: 2px solid #3aa3d6; outline-offset: -1px; }
.adv-search-search-wrap { position: relative; }
.adv-search-search-wrap .adv-search-input { padding-right: 42px; }
.adv-search-icon-btn {
  position: absolute;
  right: 0; top: 0;
  width: 38px;
  height: 36px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-left: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.adv-search-icon-btn:hover { background: #e5e7eb; }
.adv-search-icon-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: #374151; stroke-width: 2; stroke-linecap: round;
}
.adv-search-location-chip {
  height: 36px;
  padding: 0 12px;
  background: #e5e7eb;
  border-radius: 4px;
  font-size: 13px;
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
}
.adv-search-chip-x {
  color: #6b7280;
  font-weight: 600;
  font-size: 14px;
  cursor: default;
}
.adv-search-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
}
.adv-search-checkbox-row input { width: 16px; height: 16px; min-height: 0; margin: 0; cursor: pointer; }
.adv-search-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 18px;
  margin-top: 4px;
}
.adv-search-footer {
  border-top: 1px solid #e5e7eb;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.adv-search-reset-btn {
  background: transparent;
  border: none;
  color: #3aa3d6;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}
.adv-search-reset-btn:hover { color: #2884b1; text-decoration: underline; }
.adv-search-submit-btn {
  background: #3aa3d6;
  color: #fff;
  border: none;
  padding: 10px 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.adv-search-submit-btn:hover { background: #2884b1; }

@media (max-width: 760px) {
  .adv-search-layout { flex-direction: column; min-height: 0; }
  .adv-search-tabs {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  .adv-search-tab { border-left: none; border-bottom: 3px solid transparent; padding: 10px 14px; }
  .adv-search-tab.is-active { border-left: none; border-bottom-color: #3aa3d6; background: #f9fafb; }
  .adv-search-row { grid-template-columns: 1fr; }
  .adv-search-focus-grid { grid-template-columns: 1fr 1fr; }
}
.newpo-modal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.newpo-modal-row .btn { flex: 1; text-align: left; }
.newpo-modal-row .btn[data-delete-view] { flex: 0 0 36px; text-align: center; }
.newpo-scan-log {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px;
  background: #fafafa;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  max-height: 200px;
  overflow-y: auto;
}
.newpo-scan-log .newpo-modal-hint { padding: 2px 0; margin: 0; }
.newpo-scan-queue {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.newpo-scan-queue:empty { display: none; }
.newpo-scan-queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #dbe3ec;
  border-radius: 4px;
  background: #f8fafc;
  font-size: 0.86rem;
}
.newpo-scan-queue-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.newpo-scan-queue-title {
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.newpo-scan-queue-meta { color: #526174; }
.newpo-scan-queue-serials {
  color: #075985;
  overflow-wrap: anywhere;
}
.newpo-scan-queue-remove {
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  color: #991b1b;
  background: #fee2e2;
  cursor: pointer;
}

/* Ticket line-items section */
.ticket-items-table {
  width: 100%;
  margin: 4px 0 8px;
}

.ticket-items-row {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 13px;
}

.ticket-items-header {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 2px solid var(--border-strong);
}

.ticket-items-cell {
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-items-cell:nth-child(2),
.ticket-items-cell:nth-child(3),
.ticket-items-cell:nth-child(4) {
  flex: 1;
  text-align: right;
}

.ticket-items-cell-action {
  flex: 0 0 28px;
  text-align: center;
}

.ticket-item-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  border-radius: var(--radius-sm);
}

.ticket-item-remove-btn:hover {
  color: var(--danger);
  background: rgba(199, 63, 63, 0.1);
}

.ticket-items-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 4px 4px;
  font-size: 13px;
  font-weight: 600;
}

.ticket-items-total-label {
  color: var(--text-soft);
}

.ticket-items-add-btn {
  margin-top: 8px;
}

.ticket-payments-rollup {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--text-soft);
  flex-wrap: wrap;
}

.ticket-payments-rollup-sep {
  color: var(--text-dim);
}

.ticket-payments-table .ticket-items-cell:nth-child(2) {
  text-align: left;
}

.ticket-payments-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.ticket-payment-link-btn {
  background: #174ea6;
}

.ticket-payment-links-list {
  margin-top: 10px;
  border: 1px solid #e1e7ee;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.ticket-payment-links-title {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #46556a;
  background: #f6f9fc;
  border-bottom: 1px solid #e1e7ee;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ticket-payment-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  font-size: 13px;
  color: #344256;
  border-bottom: 1px solid #eef2f6;
}

.ticket-payment-link-row:last-child {
  border-bottom: 0;
}

.payment-link-panel {
  width: min(520px, calc(100vw - 32px));
}

.payment-link-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d7e2ee;
  border-radius: 8px;
  background: #f6f9fc;
}

.payment-link-result.hidden {
  display: none;
}

.payment-link-result label {
  font-size: 12px;
  font-weight: 700;
  color: #46556a;
}

.payment-link-result input {
  width: 100%;
  border: 1px solid #cbd2db;
  border-radius: 7px;
  padding: 8px 10px;
  color: #0f1e2e;
  background: #ffffff;
}

.payment-link-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .settings-grid,
  .settings-form-grid,
  .settings-readonly-grid {
    grid-template-columns: 1fr;
  }

  .settings-discount-rule {
    grid-template-columns: 1fr;
  }

  .settings-title-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .sale-ticket-shell {
    grid-template-columns: 1fr;
  }

  .sale-side-nav {
    display: none;
  }

  .sale-items-body {
    grid-template-columns: 1fr;
  }

  .sale-catalog-tools {
    justify-items: stretch;
  }

  .sale-catalog-tools input[type="search"] {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .ticket-intake-grid {
    grid-template-columns: 1fr;
  }

  .repair-promise-field {
    grid-column: span 1;
  }

  .repair-promise-field-inline .repair-promise-custom-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, .7fr);
  }

  .repair-promise-field-inline .repair-promise-save-btn {
    width: 100%;
  }

  .promised-time-panel {
    right: auto;
    left: 0;
    width: min(300px, calc(100vw - var(--space-8)));
  }

  #tickets-list-view .tickets-toolbar .input-wrap,
  #tickets-list-view .tickets-toolbar .select-wrap {
    width: 100%;
    min-width: 0;
  }
}

/* ===== Inventory Item Detail page ===== */

#inventory-item-detail-page.inventory-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 56px;
  background: #ffffff;
}

#inventory-item-detail-page > .dashboard-breadcrumb {
  display: none;
}

#inventory-item-detail-page .inventory-shell {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#inventory-item-detail-page .inventory-title-bar {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 0;
  background: #4a4a4a;
  color: #ffffff;
}

#inventory-item-detail-page .inventory-title-bar h2 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

#inventory-item-detail-page .inventory-page-subtitle {
  font-style: italic;
  color: #d1d5db;
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 4px;
}

.iid-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin: 10px 18px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}
.iid-banner-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.iid-banner-info  { background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; }
.iid-banner-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.iid-banner-error .iid-banner-icon { background: #dc2626; }
.iid-banner-info  .iid-banner-icon { background: #6b7280; }
.iid-banner-text { flex: 1; }
.iid-banner-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: inherit;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}

.iid-facet-strip {
  display: flex;
  gap: 0;
  margin: 8px 18px 14px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
  background: #ffffff;
  max-width: max-content;
}
.iid-facet {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: #5f6368;
  border-right: 1px solid #cfd7df;
}
.iid-facet:last-child { border-right: none; }
.iid-facet strong {
  color: #009bd8;
  font-weight: 700;
  margin-right: 6px;
}

/* Imágenes y documentos — attachments section */
.iid-attachments {
  margin: 14px 18px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 10px 12px;
}
.iid-attachments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.iid-attachments-head h3 {
  margin: 0;
  font-size: 14px;
  color: #1f2937;
}
.iid-attachments-upload {
  display: flex;
  align-items: center;
  gap: 8px;
}
.iid-attachments-upload input[type="file"] { font-size: 12px; max-width: 240px; }
.iid-attachments-empty {
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
  padding: 8px 0;
}
.iid-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.iid-attach-card {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
}
.iid-attach-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #f0f3f7;
  overflow: hidden;
}
.iid-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iid-attach-file-icon { font-size: 40px; line-height: 1; }
.iid-attach-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.iid-attach-name {
  flex: 1;
  font-size: 11px;
  color: #1971c2;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iid-attach-name:hover { text-decoration: underline; }
.iid-attach-del {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
  color: #b91c1c;
}
.iid-attach-del:hover { opacity: 0.7; }

.iid-units-table th,
.iid-units-table td {
  height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#inventory-item-detail-page .devices-toolbar {
  padding: 18px 18px 0;
  border-bottom: 0;
}

#inventory-item-detail-page .devices-pagination-summary {
  gap: 12px;
}

#inventory-item-detail-page .devices-date-chip {
  min-height: 30px;
  border-radius: 4px;
  background: #e9edf2;
  color: #5f6368;
  font-size: 12px;
}

#inventory-item-detail-page .customers-table-wrap {
  border-top: 1px solid #dfe4ea;
}

#inventory-item-detail-page .iid-units-table {
  min-width: 1460px;
}

#inventory-item-detail-page .iid-units-table th {
  height: 31px;
  background: #e6ebf0;
  color: #60666c;
  font-size: 11px;
  font-weight: 700;
}

#inventory-item-detail-page .iid-units-table .device-badge,
#inventory-item-detail-page .iid-units-table .badge-green,
#inventory-item-detail-page .iid-units-table .badge-amber,
#inventory-item-detail-page .iid-units-table .badge-blue,
#inventory-item-detail-page .iid-units-table .badge-red,
#inventory-item-detail-page .iid-units-table .badge-cyan,
#inventory-item-detail-page .iid-units-table .badge-gray {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 1.2;
}

/* Inventory item detail — shared product-label copies stay in an on-demand
   dialog so the already-dense inventory toolbar remains unchanged. */
.cp #iid-product-label-modal .iid-product-label-card {
  max-width: min(42rem, calc(100vw - var(--space-8)));
}

.cp #iid-product-label-modal .newpo-modal-head > div {
  min-width: 0;
}

.cp #iid-product-label-modal .newpo-modal-head .newpo-modal-hint {
  margin: var(--space-1) 0 0;
}

.cp #iid-product-label-modal .iid-product-label-loading {
  padding: var(--space-6);
  color: var(--content-2);
  text-align: center;
}

.cp #iid-product-label-modal .iid-product-label-item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #iid-product-label-modal .iid-product-label-item span,
.cp #iid-product-label-modal .iid-product-label-facts span,
.cp #iid-product-label-modal .iid-product-label-copies > span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.cp #iid-product-label-modal .iid-product-label-item strong {
  overflow-wrap: anywhere;
  color: var(--content-1);
  font-size: var(--text-base);
}

.cp #iid-product-label-modal .iid-product-label-item small {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #iid-product-label-modal .iid-product-label-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cp #iid-product-label-modal .iid-product-label-facts > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cp #iid-product-label-modal .iid-product-label-facts strong {
  overflow-wrap: anywhere;
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #iid-product-label-modal .iid-product-label-message {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 30%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #iid-product-label-modal .iid-product-label-message.is-blocked {
  border-color: color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  background: var(--cp-danger-soft);
}

.cp #iid-product-label-modal .iid-product-label-copies {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
}

.cp #iid-product-label-modal .iid-product-label-copies input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-base);
}

.cp #iid-product-label-modal .iid-product-label-copies input:focus-visible {
  border-color: var(--cp-accent);
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp #iid-product-label-modal .iid-product-label-copies input[aria-invalid="true"] {
  border-color: var(--cp-danger);
}

.cp #iid-product-label-modal .iid-product-label-copies small,
.cp #iid-product-label-modal .iid-product-label-safety {
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #iid-product-label-modal .iid-product-label-safety {
  margin: var(--space-3) 0 0;
}

@media (max-width: 640px) {
  .cp #iid-product-label-modal .iid-product-label-facts {
    grid-template-columns: 1fr;
  }
}

/* Reconciled PO — current label assignment is intentionally secondary and
   appears only inside this review dialog; the historical table stays intact. */
.cp #newpo-current-label-modal .newpo-current-label-card {
  width: min(72rem, calc(100vw - var(--space-8)));
  max-width: min(72rem, calc(100vw - var(--space-8)));
}

.cp #newpo-current-label-modal #newpo-current-label-status {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 30%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #newpo-current-label-modal #newpo-current-label-groups {
  min-height: var(--space-8);
}

.cp #newpo-current-label-modal .newpo-recon-table-wrap {
  max-height: min(54vh, 34rem);
  overflow: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}

.cp #newpo-current-label-modal .newpo-recon-table {
  min-width: 52rem;
  margin: 0;
}

.cp #newpo-current-label-modal .newpo-recon-table details {
  margin-top: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-xs);
}

.cp #newpo-current-label-modal .newpo-recon-table summary {
  cursor: pointer;
  color: var(--cp-accent-hover);
  font-weight: var(--weight-medium);
}

.cp #newpo-current-label-modal .newpo-recon-table ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.cp #newpo-current-label-modal #newpo-current-label-error:not(.hidden) {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--cp-danger-soft);
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.newpo-forparts-cell {
  text-align: center;
}

.newpo-forparts-cell input[type="checkbox"],
.po-line-checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.po-line-checkbox-field {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

.newpo-receive-badge {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.iid-harvest-modal-card {
  max-width: min(900px, calc(100vw - 32px));
}

.iid-harvest-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iid-harvest-donor,
.iid-harvest-selected-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.iid-harvest-donor span,
.iid-harvest-selected-head span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.iid-harvest-suggestions,
.iid-harvest-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iid-harvest-suggestions button,
.iid-harvest-result {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #111827;
  cursor: pointer;
  font-weight: 700;
  padding: 8px 10px;
}

.iid-harvest-result {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: min(100%, 260px);
  text-align: left;
}

.iid-harvest-result small,
.iid-harvest-entry small {
  color: #6b7280;
  display: block;
  font-weight: 600;
}

.iid-harvest-result.muted {
  color: #6b7280;
  cursor: default;
}

.iid-harvest-selected {
  display: grid;
  gap: 8px;
}

.iid-harvest-entry {
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(170px, 1fr) 96px 88px minmax(90px, 120px) minmax(110px, 1fr) 32px;
  padding: 8px;
}

.iid-harvest-entry select,
.iid-harvest-entry input {
  min-width: 0;
}

.iid-harvest-entry button {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  height: 32px;
}

@media (max-width: 780px) {
  .iid-harvest-entry {
    grid-template-columns: 1fr;
  }
}

#iid-status-popover {
  z-index: var(--cp-z-floating);
  min-width: 200px;
  width: 240px;
  max-width: calc(100vw - 2 * var(--space-4, 16px));
  max-height: min(480px, calc(100vh - 32px));
  box-sizing: border-box;
}

/* Status options scroll inside the popover instead of running off-screen
   (there are ~27 inventory unit statuses). */
#iid-status-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#iid-status-popover .devices-date-radio {
  justify-content: flex-start;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: left;
}

#iid-status-popover .devices-date-radio span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* The global `input, select, textarea { width: 100%; min-height: 38px+ }`
   rules (app.css / app-repair.css) also hit checkboxes, which blew each
   status checkbox up into a ~100x38 box and squeezed its label into a thin
   column overflowing the popover. Keep these checkboxes native-sized. */
#iid-status-popover .devices-date-radio input[type="checkbox"] {
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--cp-accent);
  cursor: pointer;
}

#iid-status-popover .devices-date-actions {
  flex: 0 0 auto;
}

/* Real anchor surface for entity rows. Tables cannot validly wrap a <tr> in
   an <a>, so each non-action cell gets a full-cell link surface instead. */
.app-row-link-cell {
  position: relative;
}

.app-row-link {
  color: inherit;
  text-decoration: none;
}

.app-row-link--cell {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  align-items: center;
}

.app-row-link--cell::before {
  content: "";
  position: absolute;
  inset: 0;
}

.app-row-link-cell:focus-within {
  outline: 2px solid var(--cp-accent);
  outline-offset: -2px;
}

/* ============================================================
   Global row-menu highlight effect
   When any row kebab opens, the table wrapper gets `.row-menu-active`
   and the clicked row gets `.row-menu-target`. CSS dims the others.
   ============================================================ */
/* Apply opacity to the <td> cells rather than the <tr> row — browsers
   inconsistently honor opacity on `display: table-row` elements (the row
   stays at opacity 1 on Chromium when other styles touch it). Targeting
   the cells with !important makes the dim land everywhere it should. */
.row-menu-active tbody tr td {
  opacity: 0.25 !important;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.row-menu-active tbody tr.row-menu-target td {
  opacity: 1 !important;
}
.row-menu-active tbody tr.row-menu-target {
  background: #fff !important;
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Inline row-menu when shown next to a highlighted row */
.row-menu-active .inv-row-menu .inv-row-menu-item {
  font-weight: 500;
  color: #1971c2;
}

/* Inventory Summary — Name cell with pencil edit icon.
   Inline layout (no flex) so the pencil sits immediately to the right of
   the name text instead of floating to the far edge of the cell — the
   previous flex/space-between made the empty cell space read like an
   input-field placeholder. */
.inv-sum-name-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-sum-name-text {
  display: inline;
  vertical-align: middle;
}
.inv-sum-name-pencil {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  color: #d1d5db;
  vertical-align: middle;
  display: inline-block;
  line-height: 0;
}
.inv-sum-name-pencil:hover { color: #0797ca; }
.inv-sum-name-pencil svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inventory Summary managed hierarchy. The collection row is an organizational
   root only: it has no selection checkbox or ordinary item kebab, while each
   child remains a real inventory product with the usual actions. */
#inventory-page .inv-sum-game-collection-row > td {
  background: var(--surface-2);
  border-bottom-color: var(--border-2);
  color: var(--content-1);
  cursor: pointer;
  font-weight: 600;
}

#inventory-page .inv-sum-game-collection-row:hover > td {
  background: var(--surface-hover);
}

#inventory-page .inv-sum-game-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  vertical-align: middle;
}

#inventory-page .inv-sum-game-toggle > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#inventory-page .inv-sum-game-toggle strong,
#inventory-page .inv-sum-game-toggle small {
  overflow: hidden;
  text-overflow: ellipsis;
}

#inventory-page .inv-sum-game-toggle small {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: 500;
}

#inventory-page .inv-sum-game-chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: var(--cp-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform var(--dur-fast) ease;
}

#inventory-page .inv-sum-game-collection-row.is-expanded .inv-sum-game-chevron {
  transform: rotate(90deg);
}

#inventory-page .inv-sum-game-child-row > td {
  background: var(--surface);
}

#inventory-page .inv-sum-game-child-name {
  padding-left: var(--space-8);
  position: relative;
}

#inventory-page .inv-sum-game-child-name::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: 50%;
  width: var(--space-2);
  border-top: 1px solid var(--border-2);
}

#inventory-page :is(.inv-sum-game-loading-row, .inv-sum-game-empty-row) td {
  padding-block: var(--space-3);
  color: var(--content-2);
  font-style: italic;
}

#inventory-page .inv-sum-manage-game-catalog {
  white-space: nowrap;
}

#inventory-page .inv-sum-game-collection-row .device-actions-cell {
  width: calc(var(--space-8) + var(--space-8) + var(--space-10)) !important;
  min-width: calc(var(--space-8) + var(--space-8) + var(--space-10)) !important;
}
.inv-sum-sort-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
}
.inv-sum-sort-btn:hover {
  color: #0797ca;
}

.inv-bool-value {
  font-weight: 700;
}
.inv-bool-yes {
  color: #40a943;
}
.inv-bool-no {
  color: #f28c28;
}

/* ===== Catalog Item shared modals ===== */
.catalog-modal-card {
  background: #fff;
  border-radius: 5px;
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}
.catalog-supplier-skus-card,
.catalog-copy-card {
  width: min(720px, calc(100vw - 48px));
}
.inventory-suppliers-card {
  width: min(980px, calc(100vw - 48px));
}
.catalog-merge-card {
  width: min(1160px, calc(100vw - 48px));
}
.catalog-modal-body {
  padding: 22px 26px;
  overflow: auto;
}
.catalog-modal-summary {
  margin: 0 0 14px;
  color: #5f6b7a;
  font-size: 0.88rem;
}
.catalog-table-wrap {
  border: 1px solid #d8dee6;
  overflow-x: auto;
  background: #fff;
}
.catalog-supplier-skus-table,
.catalog-merge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.catalog-supplier-skus-table th,
.catalog-supplier-skus-table td,
.catalog-merge-table th,
.catalog-merge-table td {
  border-bottom: 1px solid #dfe4ea;
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}
.catalog-supplier-skus-table th,
.catalog-merge-table thead th {
  background: #e9eef3;
  color: #5e6267;
  font-weight: 700;
}
.catalog-merge-table tbody th {
  width: 170px;
  background: #f6f7f9;
  color: #555;
  font-weight: 700;
}
.catalog-supplier-skus-table input,
.catalog-supplier-skus-table select,
.catalog-merge-search input {
  width: 100%;
  min-height: 32px;
  border: 1px solid #cfd6df;
  border-radius: 3px;
  padding: 5px 8px;
  font: inherit;
}
.catalog-action-col {
  width: 90px;
  text-align: center;
}
.catalog-small-danger {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 3px;
  background: #dc3545;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.catalog-inline-add {
  margin-top: 12px;
}
.catalog-empty-row {
  color: #7b8794;
  font-style: italic;
  text-align: center;
}
.inventory-suppliers-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.inventory-supplier-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inventory-supplier-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #5d6671;
  font-size: 0.8rem;
  font-weight: 700;
}
.inventory-supplier-form input,
.inventory-supplier-form textarea {
  width: 100%;
  border: 1px solid #cfd6df;
  border-radius: 3px;
  padding: 6px 8px;
  font: inherit;
  color: #30363d;
}
.inventory-supplier-form textarea {
  resize: vertical;
}
.inventory-supplier-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.inventory-suppliers-table-wrap {
  max-height: min(56vh, 560px);
  overflow: auto;
}
.inventory-suppliers-table small {
  display: block;
  color: #75808d;
  font-size: 0.73rem;
  line-height: 1.35;
}
.inventory-supplier-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: center;
}
.inventory-supplier-mini-btn {
  min-width: 30px;
  height: 28px;
  border: 1px solid #cfd6df;
  border-radius: 3px;
  background: #fff;
  color: #4f5963;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.inventory-supplier-mini-btn:hover {
  background: #f3f6f9;
}
.inventory-supplier-mini-btn.danger {
  border-color: #f0b4b4;
  color: #a61b1b;
}
.inventory-supplier-mini-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (max-width: 760px) {
  .inventory-suppliers-layout {
    grid-template-columns: 1fr;
  }
}
.catalog-copy-options {
  display: grid;
  gap: 10px;
}
.catalog-copy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.catalog-copy-fields label {
  display: grid;
  gap: 4px;
  color: #5d6671;
  font-size: 0.8rem;
  font-weight: 700;
}
.catalog-copy-fields input {
  width: 100%;
  min-height: 32px;
  border: 1px solid #cfd6df;
  border-radius: 3px;
  padding: 5px 8px;
  font: inherit;
  color: #30363d;
}
.catalog-check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3f4752;
  font-size: 0.9rem;
}
.catalog-check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
}
.catalog-merge-search {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(260px, 460px);
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.catalog-merge-search label {
  color: #555;
  font-weight: 700;
  font-size: 0.86rem;
  text-align: right;
}
.catalog-merge-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 130px;
  width: min(460px, calc(100% - 130px));
  border: 1px solid #cfd6df;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
  z-index: 3;
}
.catalog-merge-result {
  width: 100%;
  border: none;
  background: #fff;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  color: #1f2937;
}
.catalog-merge-result:hover {
  background: #eef7fd;
}
.catalog-merge-result span {
  color: #6b7280;
  font-size: 0.78rem;
}
.catalog-merge-warning {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid #fae4b8;
  border-radius: 3px;
  background: #fff8e8;
  color: #9a6a20;
  font-size: 0.86rem;
}

/* ===== Catalog Item View page ===== */
#catalog-item-view-page.inventory-page,
#catalog-item-edit-page.inventory-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 56px;
  background: #ffffff;
}

#catalog-item-view-page > .dashboard-breadcrumb,
#catalog-item-edit-page > .dashboard-breadcrumb {
  display: none;
}

.civ-shell {
  background: #fff;
  border-radius: 0;
  min-height: calc(100vh - 200px);
}

.civ-pagebar,
.cie-pagebar {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  background: #4a4a4a;
  color: #ffffff;
}

.civ-pagebar h2,
.cie-pagebar h2 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

.civ-pagebar span,
.cie-pagebar span {
  color: #d1d5db;
  font-size: 0.88em;
  font-style: italic;
  font-weight: 400;
}

.civ-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 18px 18px;
  border-bottom: 0;
  flex-wrap: wrap;
}
.civ-titlebar h2 {
  margin: 0;
  color: #666666;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.civ-title-sub {
  display: none;
}
.civ-content {
  padding: 0 18px 36px;
}
.civ-main-grid {
  display: block;
  max-width: 1120px;
}
.civ-details-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.civ-details-layout.has-image {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}
.civ-details-copy,
.civ-item-image-panel {
  min-width: 0;
}
.civ-item-image-panel {
  align-self: start;
}
.civ-item-image-frame {
  display: grid;
  min-height: 220px;
  margin-top: var(--space-4);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.civ-item-image-frame img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.civ-item-image-frame img[hidden] {
  display: none;
}
.civ-item-image-status {
  margin: 0;
  padding: var(--space-5);
  color: var(--content-3);
  font-size: var(--text-sm);
  text-align: center;
}
.civ-panel-wide {
  grid-column: auto;
}
.civ-panel {
  border: 0;
  border-radius: 0;
  background: #fff;
  overflow: visible;
  margin: 0 0 18px;
}
.civ-panel-head {
  background: transparent;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 0 8px;
  color: #666666;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}
.civ-definition-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  margin: 0;
  padding-top: 14px;
  font-size: 13px;
}
.civ-definition-grid-wide {
  grid-template-columns: 220px minmax(0, 1fr);
}
.civ-definition-grid dt,
.civ-definition-grid dd {
  margin: 0;
  min-height: 27px;
  border-bottom: 0;
  padding: 4px 10px;
}
.civ-definition-grid dt {
  background: transparent;
  color: #b8bdc3;
  font-weight: 700;
  text-align: right;
}
.civ-definition-grid dd {
  color: #666666;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.civ-change-log-panel {
  margin-top: 24px;
  max-width: 100%;
}
.civ-change-log-wrap {
  overflow-x: auto;
  border: 1px solid #d4d4d4;
  background: #f5f5f5;
  padding: 10px;
}
.civ-change-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #ffffff;
}
.civ-change-log-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #d4d4d4;
  color: #666666;
}
.civ-change-log-table td:first-child {
  width: 180px;
  color: #2f6bb1;
  font-weight: 700;
}
.civ-change-log-table td:last-child {
  width: 180px;
  text-align: right;
  color: #7b8794;
}
@media (max-width: 900px) {
  .civ-details-layout.has-image {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  }
  .civ-definition-grid,
  .civ-definition-grid-wide {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .catalog-merge-search {
    grid-template-columns: 1fr;
  }
  .catalog-merge-search label {
    text-align: left;
  }
  .catalog-merge-results {
    left: 0;
    width: 100%;
  }
}

/* ===== Catalog Item Edit page ===== */
.cie-shell {
  background: #fff;
  margin: 0;
  border-radius: 0;
  padding-bottom: 40px;
}
.cie-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 24px 18px;
  border-bottom: 0;
  flex-wrap: wrap;
}
.cie-titlebar h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #666666;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.cie-lock-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #0b5a82;
  line-height: 1;
  outline: none;
}
.cie-lock-icon {
  width: 13px;
  height: 13px;
  fill: #0b5a82;
  stroke: #0b5a82;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.cie-lock-popover {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  width: 560px;
  max-width: min(560px, calc(100vw - 80px));
  transform: translateY(-50%) translateX(-4px);
  background: #ffffff;
  border: 1px solid #b8b8b8;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  color: #666666;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: var(--cp-z-floating);
}
.cie-lock-popover::before,
.cie-lock-popover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
}
.cie-lock-popover::before {
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 11px solid #b8b8b8;
}
.cie-lock-popover::after {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffffff;
}
.cie-lock-popover-title {
  display: block;
  padding: 10px 14px;
  background: #f3f3f3;
  border-bottom: 1px solid #d4d4d4;
  font-size: 14px;
  font-weight: 600;
  color: #666666;
}
.cie-lock-popover-body {
  display: block;
  padding: 16px 14px 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #666666;
}
.cie-lock-wrap:hover .cie-lock-popover,
.cie-lock-wrap:focus .cie-lock-popover,
.cie-lock-wrap:focus-within .cie-lock-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.cie-top-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.cie-action-btn {
  min-height: 26px;
  background: #ffffff;
  color: #009bd8;
  border: 1px solid #009bd8;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cie-action-btn:hover { background: #eef9fd; }
.cie-action-save {
  background: #009bd8;
  border-color: #009bd8;
  color: #ffffff;
}
.cie-action-save:hover { background: #087eae; }

.cie-reclassify-card {
  max-width: min(780px, calc(100vw - var(--space-6)));
}
.cie-reclassify-subtitle {
  margin: var(--space-1) 0 0;
  color: var(--content-3);
  font-size: var(--text-xs);
}
.cie-reclassify-body {
  display: grid;
  gap: var(--space-4);
}
.cie-reclassify-callout {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 32%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.cie-reclassify-field {
  display: grid;
  gap: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: 600;
}
.cie-reclassify-field em {
  color: var(--status-danger, #dc2626);
  font-style: normal;
}
.cie-reclassify-field :is(select, textarea) {
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-weight: 400;
  padding: var(--space-2) var(--space-3);
}
.cie-reclassify-field :is(select, textarea):focus {
  border-color: var(--cp-accent);
  outline: 2px solid color-mix(in srgb, var(--cp-accent) 22%, transparent);
  outline-offset: 1px;
}
.cie-reclassify-field textarea {
  min-height: 84px;
  resize: vertical;
}
.cie-reclassify-field small {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: 400;
}
.cie-reclassify-status {
  min-height: 20px;
  color: var(--content-3);
  font-size: var(--text-sm);
}
.cie-reclassify-status[data-kind="ok"] { color: var(--status-success, #15803d); }
.cie-reclassify-status[data-kind="error"] { color: var(--status-danger, #b91c1c); }
.cie-reclassify-impact {
  display: grid;
  gap: var(--space-4);
}
.cie-reclassify-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.cie-reclassify-change > div:not(.cie-reclassify-arrow) {
  display: grid;
  gap: var(--space-1);
}
.cie-reclassify-change span,
.cie-reclassify-grid article > span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cie-reclassify-change strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.cie-reclassify-arrow {
  color: var(--cp-accent);
  font-size: var(--text-xl);
}
.cie-reclassify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.cie-reclassify-grid article {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.cie-reclassify-grid article strong {
  color: var(--content-1);
  font-size: var(--text-base);
}
.cie-reclassify-grid article small {
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.cie-reclassify-messages,
.cie-reclassify-preserved {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.cie-reclassify-messages ul,
.cie-reclassify-preserved ul {
  margin: 0;
  padding-left: var(--space-5);
}
.cie-reclassify-blockers {
  border: 1px solid color-mix(in srgb, var(--status-danger, #b91c1c) 35%, var(--border-1));
  background: color-mix(in srgb, var(--status-danger, #b91c1c) 8%, var(--surface));
  color: var(--status-danger, #b91c1c);
}
.cie-reclassify-warnings {
  border: 1px solid color-mix(in srgb, var(--status-warning, #b45309) 35%, var(--border-1));
  background: color-mix(in srgb, var(--status-warning, #b45309) 8%, var(--surface));
  color: var(--content-2);
}
.cie-reclassify-preserved {
  border: 1px solid var(--border-1);
  background: var(--surface-2);
  color: var(--content-2);
}
.cie-reclassify-preserved strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--content-1);
}
@media (max-width: 680px) {
  .cie-reclassify-grid,
  .cie-reclassify-change {
    grid-template-columns: 1fr;
  }
  .cie-reclassify-arrow { transform: rotate(90deg); justify-self: center; }
}

.cie-form {
  padding: 0 24px 0;
  max-width: 1120px;
}
.cie-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  max-width: 1480px;
  padding-right: 24px;
}
.cie-duplicate-panel {
  min-width: 0;
  padding-top: 14px;
}
.cie-duplicate-sticky {
  position: sticky;
  top: 86px;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  padding: 16px;
}
.cie-duplicate-header {
  margin-bottom: 14px;
}
.cie-duplicate-header h3 {
  margin: 0;
  color: #334155;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}
.cie-duplicate-header p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}
.cie-duplicate-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
}
.cie-duplicate-field input {
  width: 100%;
  min-height: 36px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2937;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 7px 9px;
}
.cie-duplicate-field input::placeholder {
  color: #8a95a3;
}
.cie-duplicate-field input:focus {
  outline: none;
  border-color: #0797ca;
  box-shadow: 0 0 0 2px rgba(7, 151, 202, 0.15);
}
.cie-duplicate-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 420px;
  margin-top: 12px;
  overflow-y: auto;
  border: 1px solid #e1e7ef;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
}
.cie-duplicate-summary,
.cie-duplicate-empty,
.cie-duplicate-loading,
.cie-duplicate-error {
  padding: 9px 10px;
  background: #ffffff;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}
.cie-duplicate-summary {
  border-bottom: 1px solid #edf1f5;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
}
.cie-duplicate-loading {
  color: #075985;
  background: #f0f9ff;
}
.cie-duplicate-error {
  color: #991b1b;
  background: #fef2f2;
}
.cie-duplicate-result {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px;
  border-bottom: 1px solid #edf1f5;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
  text-decoration: none;
}
.cie-duplicate-result:last-child {
  border-bottom: 0;
}
.cie-duplicate-result:hover,
.cie-duplicate-result:focus {
  outline: none;
  background: #eaf6fb;
  color: #0f172a;
}
.cie-duplicate-result strong {
  display: block;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.cie-duplicate-result span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.3;
}
.cie-section {
  border-bottom: 0;
  padding: 14px 0 24px;
}
.cie-section:last-child { border-bottom: none; }
.cie-section-head {
  font-size: 16px;
  font-weight: 600;
  color: #666666;
  margin: 0 0 18px 54px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  max-width: 1060px;
}
.cie-section-hint {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.55;
  margin: 0 0 16px 118px;
  max-width: 420px;
}
.cie-section-hint a { color: #0797ca; text-decoration: none; }
.cie-section-hint a:hover { text-decoration: underline; }

.cie-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.cie-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 330px;
  margin-left: 118px;
  font-size: 13px;
  color: #666666;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.cie-field-wide {
  width: 330px;
  max-width: 330px;
  align-items: flex-start;
}
.cie-field span {
  color: #666666;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: left;
  text-transform: none;
}
.cie-field em { color: #dc2626; font-style: normal; margin-left: 4px; }
.cie-field input, .cie-field textarea, .cie-field select {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  background: #ffffff;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0;
  color: #555555;
}
.cie-field select option,
.cie-compat-table select option {
  background: #ffffff;
  color: #1f2937;
}
.cie-field input::placeholder,
.cie-field textarea::placeholder {
  color: #9b9b9b;
  letter-spacing: 0;
}
.cie-field input:focus, .cie-field textarea:focus, .cie-field select:focus {
  outline: none;
  border-color: #0797ca;
  box-shadow: 0 0 0 2px rgba(7, 151, 202, 0.15);
}
.cie-field input:disabled,
.cie-field textarea:disabled,
.cie-field select:disabled {
  background: #eeeeee;
  color: #9b9b9b;
  cursor: not-allowed;
}
.cie-field textarea { resize: vertical; min-height: 112px; font-family: inherit; }

.cie-lookup-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-left: 118px;
  flex-wrap: wrap;
  max-width: 920px;
}
.cie-lookup-row .cie-field {
  margin-left: 0;
  width: 210px;
}
.cie-lookup-row .cie-lookup-code {
  width: 300px;
}
.cie-lookup-btn {
  min-height: 34px;
  margin-bottom: 0;
}
.cie-lookup-results {
  width: min(920px, calc(100% - 118px));
  margin: 12px 0 0 118px;
  border: 1px solid #d8dee6;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}
.cie-lookup-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f5;
}
.cie-lookup-result:last-child {
  border-bottom: 0;
}
.cie-lookup-result strong {
  display: block;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}
.cie-lookup-result span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}
.cie-lookup-warning,
.cie-lookup-empty {
  padding: 10px 12px;
  color: #7a5a00;
  background: #fff8db;
  font-size: 12px;
}
.cie-lookup-empty {
  color: #64748b;
  background: #f8fafc;
}

.cie-compat-wrap {
  width: min(920px, calc(100% - 118px));
  margin-left: 118px;
  overflow-x: auto;
}
.cie-compat-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  border: 1px solid #d8dee6;
  background: #fff;
  font-size: 13px;
}
.cie-compat-table th,
.cie-compat-table td {
  border-bottom: 1px solid #dfe4ea;
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}
.cie-compat-table th {
  background: #e9eef3;
  color: #5e6267;
  font-weight: 700;
}
.cie-compat-table th em {
  color: #dc2626;
  font-style: normal;
}
.cie-compat-table input,
.cie-compat-table select {
  width: 100%;
  min-height: 32px;
  border: 1px solid #cfd6df;
  border-radius: 3px;
  background: #ffffff;
  color: #1f2937;
  padding: 5px 8px;
  font: inherit;
}
.cie-external-table {
  min-width: 680px;
}
.cie-compat-action-col {
  width: 96px;
  text-align: center;
}
.cie-compat-action-col .catalog-small-danger {
  width: auto;
  min-width: 70px;
  padding: 0 10px;
  font-size: 12px;
}
.cie-compat-empty {
  color: #7b8794;
  font-style: italic;
  text-align: center;
}
.cie-compat-add {
  margin-top: 12px;
}

.cie-cbx {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-left: 118px;
  font-size: 13px;
  color: #666666;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
}
.cie-cbx input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.cie-cbx input[type="checkbox"]:disabled {
  cursor: not-allowed;
}
.cie-locked-field > span,
.cie-locked-field {
  color: #a7a7a7;
}
.cie-cbx-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cie-inline-action {
  min-height: 22px;
  padding: 2px var(--space-2);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cp-accent);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.cie-inline-action:hover,
.cie-inline-action:focus-visible {
  background: color-mix(in srgb, var(--cp-accent) 10%, transparent);
}
.cie-inline-row {
  display: flex;
  gap: 4px;
  width: 330px;
}
.cie-inline-row input { flex: 1; }
.cie-inline-row select { flex: 0 0 58px; }

.cie-image-dropzone {
  position: relative;
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  padding: 28px 18px;
  text-align: center;
  color: var(--content-3);
  font-size: 0.86rem;
  width: 330px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.cie-image-dropzone svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--cp-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 8px;
}
.cie-image-dropzone p { margin: 6px 0; }
.cie-image-dropzone a { color: var(--cp-accent); text-decoration: none; }
.cie-image-dropzone a:hover { text-decoration: underline; }
.cie-image-dropzone.drag-over {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  box-shadow: var(--focus-ring);
}
.cie-image-dropzone.drag-over::after {
  content: "Drop here";
  position: absolute;
  inset: var(--space-2);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--cp-accent-soft) 94%, var(--surface));
  color: var(--cp-accent-hover);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.cie-image-upload-status { display: none; }
.cie-image-dropzone.uploading {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  cursor: wait;
}
.cie-image-dropzone.uploading .cie-image-instructions { display: none; }
.cie-image-dropzone.uploading .cie-image-upload-status {
  display: block;
  color: var(--content-1);
  font-weight: var(--weight-medium);
}

/* === Catalog Item Edit — Image area refinements === */

/* Preview state — image with Replace / Remove buttons below */
.cie-image-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}
.cie-image-preview-wrap img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}
.cie-image-actions {
  display: flex;
  gap: 6px;
}
.cie-image-remove-btn {
  color: #dc2626;
  border-color: #fecaca;
}
.cie-image-remove-btn:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

@media (max-width: 760px) {
  .civ-titlebar,
  .cie-titlebar {
    align-items: flex-start;
    flex-direction: column;
  }

  .civ-definition-grid,
  .civ-definition-grid-wide {
    grid-template-columns: 1fr;
  }

  .civ-details-layout.has-image {
    grid-template-columns: 1fr;
  }

  .civ-item-image-frame {
    max-width: 320px;
  }

  .civ-definition-grid dt {
    min-height: auto;
    padding-bottom: 0;
    text-align: left;
  }

  .civ-definition-grid dd {
    padding-top: 2px;
    padding-bottom: 10px;
  }

  .cie-form {
    max-width: none;
    padding: 0 18px;
  }
  .cie-form-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 0;
  }
  .cie-duplicate-panel {
    order: -1;
    padding: 0 18px;
  }
  .cie-duplicate-sticky {
    position: static;
  }

  .cie-section-head,
  .cie-section-hint,
  .cie-field,
  .cie-lookup-row,
  .cie-lookup-results,
  .cie-compat-wrap,
  .cie-cbx {
    margin-left: 0;
  }

  .cie-section-head {
    max-width: none;
  }

  .cie-field {
    gap: 4px;
    width: 100%;
    max-width: 100%;
  }

  .cie-lookup-row .cie-field,
  .cie-lookup-row .cie-lookup-code,
  .cie-lookup-results {
    width: 100%;
    max-width: 100%;
  }

  .cie-lookup-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .cie-field span {
    text-align: left;
  }

  .cie-field-wide,
  .cie-inline-row,
  .cie-compat-wrap,
  .cie-image-dropzone {
    width: 100%;
    max-width: 100%;
  }

  .cie-lock-popover {
    left: 0;
    top: calc(100% + 10px);
    width: calc(100vw - 36px);
    transform: translateY(0) translateX(0);
  }

  .cie-lock-popover::before,
  .cie-lock-popover::after {
    display: none;
  }

  .cie-lock-wrap:hover .cie-lock-popover,
  .cie-lock-wrap:focus .cie-lock-popover,
  .cie-lock-wrap:focus-within .cie-lock-popover {
    transform: translateY(0) translateX(0);
  }
}

/* ============================================================
   Price Check modal — global search popup launched from topbar
   ============================================================ */
.pc-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 4000;
  padding: 60px 24px 24px;
  overflow-y: auto;
}
.pc-modal[aria-hidden="false"] { display: flex; }
.pc-modal-body {
  background: #fff;
  width: min(1180px, 100%);
  border-radius: 6px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pc-modal-bar {
  background: #3aa3d6;
  color: #fff;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pc-modal-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.pc-modal-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.85;
  transition: opacity 120ms;
}
.pc-modal-close-btn:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.pc-modal-close-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
}
.pc-modal-content {
  padding: 22px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pc-row-savedfilters .pc-saved-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1f2937;
  font-weight: 600;
  font-size: 14px;
}
.pc-row-savedfilters .pc-saved-filters-label svg {
  width: 16px;
  height: 16px;
  fill: #1f2937;
}
.pc-saved-filter-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  min-width: 220px;
}
.pc-save-btn {
  height: 36px;
  padding: 0 14px;
  background: #5cb85c;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.pc-save-btn:hover { background: #4ca54c; }
.pc-save-btn svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; }

.pc-row-controls { gap: 14px; }
.pc-control-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pc-control-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}
.pc-location-chip {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #f3f4f6;
  color: #374151;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.pc-control-group-search {
  flex: 1 1 280px;
  min-width: 240px;
  position: relative;
}
.pc-search-input {
  width: 100%;
  height: 36px;
  padding: 0 44px 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}
.pc-search-input:focus { outline: 2px solid #3aa3d6; outline-offset: -1px; border-color: transparent; }
.pc-search-go-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 36px;
  width: 40px;
  background: #3aa3d6;
  color: #fff;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-search-go-btn:hover { background: #338cba; }
.pc-search-go-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.pc-control-group-type {
  margin-left: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pc-type-wrap { position: relative; }
.pc-type-btn {
  height: 36px;
  padding: 0 36px 0 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-width: 200px;
  position: relative;
  text-align: left;
}
.pc-type-btn[aria-expanded="true"] { border-color: #3aa3d6; }
.pc-type-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  fill: none;
  stroke: #6b7280;
  stroke-width: 2;
  stroke-linecap: round;
}
.pc-type-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 280px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  z-index: 10;
  max-height: 320px;
  overflow-y: auto;
}
.pc-type-popover.hidden { display: none; }
.pc-type-quick-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.pc-type-quick-btn {
  flex: 1;
  background: #fff;
  border: 1px solid #d1d5db;
  padding: 6px 8px;
  font-size: 12px;
  color: #374151;
  border-radius: 4px;
  cursor: pointer;
}
.pc-type-quick-btn:hover { background: #eff6ff; border-color: #3aa3d6; color: #1d4ed8; }
.pc-type-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.pc-type-list li {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #1f2937;
}
.pc-type-list li:hover { background: #f3f4f6; }
.pc-type-list input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
.pc-results-count {
  color: #6b7280;
  font-size: 13px;
}

.pc-row-options { gap: 18px; }
.pc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}
.pc-checkbox input { width: 14px; height: 14px; cursor: pointer; }

.pc-results-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 460px;
  overflow-y: auto;
}
.pc-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pc-results-table thead th {
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.pc-results-table .pc-th-num { text-align: right; }
.pc-results-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #1f2937;
  vertical-align: top;
}
.pc-results-table tbody tr { cursor: pointer; }
.pc-results-table tbody tr:hover td { background: #eff6ff; }
.pc-results-table tbody td.pc-td-num { text-align: right; white-space: nowrap; }
.pc-catalog-cell { color: #1d4ed8; font-weight: 500; }
.pc-catalog-cell:hover { text-decoration: underline; }
.pc-condition-small { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }
.pc-supplier-small { display: block; font-size: 11px; color: #6b7280; margin-top: 1px; }
.pc-instock-badge {
  display: inline-block;
  min-width: 26px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
  text-align: center;
}
.pc-instock-badge.pc-instock-zero { background: #fef3c7; color: #92400e; }
.pc-instock-badge.pc-instock-pos  { background: #d1fae5; color: #065f46; }
.pc-empty-row td {
  text-align: left !important;
  color: #9ca3af;
  font-style: italic;
  padding: 30px 16px !important;
}
.pc-loading-row td {
  text-align: center !important;
  color: #6b7280;
  padding: 20px !important;
}

/* ============================================================
   Repair Calculator modal — MobileSentrix part search + quote
   ============================================================ */
.rpc-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 4050;
  padding: 52px 22px 24px;
  overflow-y: auto;
}
.rpc-modal[aria-hidden="false"] { display: flex; }
.rpc-modal-body {
  width: min(1120px, 100%);
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
}
.rpc-mode-body {
  width: min(720px, 100%);
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
}
.rpc-modal-bar {
  background: #023047;
  color: #ffffff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rpc-modal-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
}
.rpc-modal-content {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rpc-mode-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(33, 158, 188, 0.14), transparent 34%),
    #ffffff;
}
.rpc-mode-card {
  min-height: 154px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 20px;
  border: 1px solid #d5dee8;
  border-radius: 12px;
  background: #ffffff;
  color: #0f2235;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 36px -30px rgba(2, 48, 71, 0.5);
}
.rpc-mode-card:hover {
  transform: translateY(-1px);
  border-color: #219ebc;
  box-shadow: 0 20px 42px -28px rgba(33, 158, 188, 0.7);
}
.rpc-mode-card span {
  color: #023047;
  font-size: 24px;
  font-weight: 900;
}
.rpc-mode-card strong {
  color: #50657a;
  font-size: 14px;
  line-height: 1.35;
}
.rpc-mode-card-repair {
  border-left: 8px solid #fb8500;
}
.rpc-mode-card-trade {
  border-left: 8px solid #ffb703;
}
.rpc-mode-card-diagnostic {
  border-left: var(--space-2) solid var(--cp-accent);
}
.rpc-diagnostic-modal-body {
  width: min(calc(var(--space-10) * 27), 100%);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.rpc-diagnostic-content {
  gap: var(--space-4);
  padding: var(--space-6);
}
.rpc-diagnostic-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, calc(var(--space-10) * 15));
  margin: 0 auto;
}
.rpc-diagnostic-progress > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-sm);
}
.rpc-diagnostic-progress > div > span {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--content-2);
  font-weight: var(--weight-black);
}
.rpc-diagnostic-progress > div.is-active,
.rpc-diagnostic-progress > div.is-complete {
  color: var(--content-1);
}
.rpc-diagnostic-progress > div.is-active > span,
.rpc-diagnostic-progress > div.is-complete > span {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}
.rpc-diagnostic-progress-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-1);
}
.rpc-diagnostic-step {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.rpc-diagnostic-step.hidden {
  display: none;
}
.rpc-diagnostic-intro {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.rpc-diagnostic-intro > span {
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}
.rpc-diagnostic-intro h3,
.rpc-diagnostic-intro p {
  margin: 0;
}
.rpc-diagnostic-intro h3 {
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
.rpc-diagnostic-intro p {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.rpc-diagnostic-report-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 760px);
  margin: 0 auto;
}
.rpc-diagnostic-report-stage .rpc-field {
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.rpc-diagnostic-report-stage .rpc-field > span {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}
.rpc-diagnostic-report-stage .rpc-field > small {
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}
.rpc-diagnostic-report-stage .rpc-field textarea {
  min-height: calc(var(--space-10) * 3);
  border-color: var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.rpc-diagnostic-report-stage .rpc-field textarea:focus {
  border-color: transparent;
  outline-color: var(--cp-accent);
}
.rpc-diagnostic-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rpc-diagnostic-action-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.rpc-diagnostic-action-copy strong {
  color: var(--content-1);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}
.rpc-diagnostic-action-copy span {
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}
.rpc-diagnostic-actions .rpc-create-ticket-btn {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.rpc-diagnostic-actions .rpc-create-ticket-btn:hover:not(:disabled) {
  background: var(--cp-accent-hover);
}
.rpc-diagnostic-actions .rpc-create-ticket-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.rpc-repair-mode-switch {
  display: inline-flex;
  align-self: flex-start;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.rpc-repair-mode-btn {
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
}
.rpc-repair-mode-btn:hover {
  color: var(--content-1);
}
.rpc-repair-mode-btn.is-active {
  background: var(--surface);
  color: var(--cp-accent-hover);
  box-shadow: var(--shadow-sm);
}
.rpc-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.rpc-repair-part-form {
  grid-template-columns: minmax(140px, 0.65fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
}
.rpc-device-type-other-field {
  margin-top: var(--space-3);
}
.rpc-service-form {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
}
.rpc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rpc-field span,
.rpc-section-head {
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}
.rpc-field input {
  width: 100%;
  height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0 11px;
  color: #111827;
  font-size: 14px;
}
.rpc-field select,
.rpc-field textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 9px 11px;
  color: #111827;
  background: #ffffff;
  font-size: 14px;
}
.rpc-field select {
  height: 38px;
}
.rpc-field textarea {
  min-height: 86px;
  resize: vertical;
}
.rpc-field input:focus,
.rpc-field select:focus,
.rpc-field textarea:focus {
  outline: 2px solid #3aa3d6;
  outline-offset: -1px;
  border-color: transparent;
}
.rpc-field-wide {
  grid-column: span 2;
}
.rpc-trade-modal-body {
  width: min(1160px, 100%);
}
.rpc-trade-form {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: stretch;
  gap: 14px;
}
.rpc-trade-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d5dee8;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(248, 251, 253, 0.95), #ffffff);
  box-shadow: 0 14px 30px -28px rgba(2, 48, 71, 0.6);
}
.rpc-trade-device-card {
  grid-column: 1 / 2;
}
.rpc-trade-value-card {
  grid-column: 2 / 3;
}
.rpc-trade-condition-card {
  grid-column: 1 / -1;
}
.rpc-trade-card-title {
  padding-bottom: 8px;
  border-bottom: 1px solid #e5edf4;
  color: #023047;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rpc-trade-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.rpc-trade-device-field {
  grid-column: 1 / -1;
}
.rpc-trade-value-grid {
  grid-template-columns: 1fr;
}
.rpc-trade-notes-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rpc-trade-form textarea {
  min-height: 78px;
}
.rpc-trade-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 2px;
}
.rpc-trade-quote-panel {
  min-height: 320px;
}
.rpc-trade-output {
  min-height: 360px;
  max-height: 560px;
}
.rpc-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rpc-manual-toggle-btn {
  min-width: 126px;
  border-color: var(--cp-accent);
  color: var(--cp-accent-hover);
}
.rpc-manual-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(140px, 180px) auto;
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 34%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
  box-shadow: var(--shadow-sm);
}
.rpc-manual-form.hidden {
  display: none;
}
.rpc-manual-copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.rpc-manual-copy strong {
  color: var(--content-1);
  font-size: var(--text-base);
}
.rpc-manual-link-field input,
.rpc-manual-cost-field input {
  background: var(--surface);
}
.rpc-search-btn,
.rpc-clear-btn {
  height: 38px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.rpc-search-btn {
  min-width: 96px;
  background: #1598c7;
  color: #ffffff;
}
.rpc-search-btn:hover { background: #0f83ad; }
.rpc-search-btn:disabled { opacity: 0.65; cursor: default; }
.rpc-clear-btn {
  min-width: 72px;
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.rpc-clear-btn:hover {
  background: #f3f4f6;
  color: #111827;
}
.rpc-status {
  border-radius: 4px;
  padding: 10px 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
}
.rpc-status.rpc-error {
  background: #fef2f2;
  color: #b91c1c;
}
.rpc-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
  gap: 16px;
  align-items: start;
}
.rpc-layout.rpc-layout-service {
  grid-template-columns: minmax(0, 1fr);
}
.rpc-results-panel,
.rpc-quote-panel {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.rpc-section-head {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.rpc-section-head span:last-child {
  color: #6b7280;
  font-weight: 600;
}
.rpc-results {
  max-height: 540px;
  overflow-y: auto;
}
.rpc-source-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rpc-source-local_inventory {
  background: #ecfdf5;
  color: #047857;
}
.rpc-source-mobilesentrix {
  background: #eff6ff;
  color: #1d4ed8;
}
.rpc-empty {
  padding: 22px 14px;
  color: #9ca3af;
  font-size: 13px;
  font-style: italic;
}
.rpc-option {
  width: 100%;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  border-left: 4px solid transparent;
}
.rpc-option:hover,
.rpc-option.is-selected {
  background: #eff6ff;
}
.rpc-option-local_inventory {
  border-left-color: #10b981;
  background: #fcfffd;
}
.rpc-option-local_inventory:hover,
.rpc-option-local_inventory.is-selected {
  background: #ecfdf5;
}
.rpc-option-mobilesentrix {
  border-left-color: #3aa3d6;
}
.rpc-option-unverified {
  border-left-color: var(--cp-warning);
  background: color-mix(in srgb, var(--cp-warning) 5%, var(--surface));
  cursor: default;
}
.rpc-option-unverified:hover {
  background: color-mix(in srgb, var(--cp-warning) 5%, var(--surface));
}
.rpc-option-img {
  width: 58px;
  height: 58px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  object-fit: contain;
  background: #ffffff;
}
.rpc-option-img-empty {
  display: grid;
  place-items: center;
  color: #9ca3af;
  background: #f9fafb;
}
.rpc-option-main {
  min-width: 0;
}
.rpc-option-name {
  display: block;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.rpc-option-local_inventory .rpc-option-name {
  color: #047857;
}
.rpc-option-source {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rpc-option-local_inventory .rpc-option-source {
  background: #d1fae5;
  color: #047857;
}
.rpc-option-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 5px;
  color: #6b7280;
  font-size: 12px;
}
.rpc-option-unverified-label {
  color: var(--cp-warning);
  font-weight: var(--weight-black);
}
.rpc-option-unverified-message {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 28%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 7%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}
.rpc-option-unverified-message strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}
.rpc-option-unverified-message a {
  width: max-content;
  color: var(--cp-accent-hover);
  font-weight: var(--weight-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rpc-option-unverified-message a:hover {
  color: var(--cp-accent);
}
.rpc-option-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}
.rpc-option-price small {
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rpc-quote-output {
  min-height: 420px;
  max-height: 540px;
  margin: 0;
  padding: 16px;
  overflow: auto;
  color: #111827;
  background: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
/* Calculator results — big employee-facing price with secondary analysis. */
.rpc-quote-output.rpc-quote-output-filled {
  font-family: inherit;
  white-space: normal;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rpc-price-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-bottom: 2px solid #a7f3d0;
  text-align: center;
}
.rpc-price-hero-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #047857;
}
.rpc-price-hero-value {
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  color: #065f46;
  letter-spacing: -0.02em;
}
.rpc-price-hero-trade,
.rpc-price-hero-review {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-accent-soft) 70%, var(--surface)) 0%,
    color-mix(in srgb, var(--cp-accent) 16%, var(--surface)) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--cp-accent) 40%, var(--border-1));
}
.rpc-price-hero-trade .rpc-price-hero-label,
.rpc-price-hero-trade .rpc-price-hero-value,
.rpc-price-hero-review .rpc-price-hero-label,
.rpc-price-hero-review .rpc-price-hero-value {
  color: var(--cp-accent-hover);
}
.rpc-price-hero-blocked {
  background: linear-gradient(
    180deg,
    var(--cp-danger-soft) 0%,
    color-mix(in srgb, var(--cp-danger) 12%, var(--surface)) 100%
  );
  border-bottom-color: color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
}
.rpc-price-hero-blocked .rpc-price-hero-label,
.rpc-price-hero-blocked .rpc-price-hero-value {
  color: var(--cp-danger);
}
.rpc-price-details {
  margin: 0;
  padding: 16px 20px;
  display: grid;
  gap: 10px;
}
.rpc-price-details > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rpc-price-details dt {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
}
.rpc-price-details dd {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  text-align: right;
}
.rpc-pricing-analysis {
  margin-top: auto;
  border-top: 1px solid var(--border-1);
  background: var(--surface-2);
}
.rpc-pricing-analysis summary {
  padding: var(--space-4) var(--space-5);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}
.rpc-pricing-analysis summary:hover {
  color: var(--cp-accent-hover);
  background: var(--surface-hover);
}
.rpc-pricing-analysis pre {
  max-height: 260px;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  overflow: auto;
  color: var(--content-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--text-xs);
  line-height: 1.55;
  white-space: pre-wrap;
}
.rpc-ticket-actions {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
}
.rpc-ticket-actions.hidden {
  display: none;
}
.rpc-create-ticket-btn {
  min-height: 36px;
  border: none;
  border-radius: 4px;
  padding: 0 14px;
  background: #059669;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.rpc-create-ticket-btn:hover {
  background: #047857;
}

@media (max-width: 1020px) {
  .rpc-trade-form {
    grid-template-columns: 1fr;
  }

  .rpc-trade-device-card,
  .rpc-trade-value-card,
  .rpc-trade-condition-card {
    grid-column: 1 / -1;
  }

  .rpc-trade-value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pc-modal { padding: 20px 8px; }
  .pc-modal-bar { padding: 14px 18px; }
  .pc-modal-title { font-size: 18px; }
  .pc-modal-content { padding: 16px; }
  .pc-row-controls { flex-direction: column; align-items: stretch; }
  .pc-control-group-type { margin-left: 0; width: 100%; }
  .pc-type-btn { width: 100%; }
}

@media (max-width: 860px) {
  .rpc-modal { padding: 20px 8px; }
  .rpc-mode-content,
  .rpc-modal-content { padding: 16px; }
  .rpc-mode-content,
  .rpc-form,
  .rpc-service-form,
  .rpc-manual-form,
  .rpc-trade-form,
  .rpc-layout {
    grid-template-columns: 1fr;
  }
  .rpc-field-wide {
    grid-column: auto;
  }
  .rpc-actions,
  .rpc-search-btn,
  .rpc-clear-btn {
    width: 100%;
  }
  .rpc-trade-card-grid,
  .rpc-trade-value-grid,
  .rpc-trade-notes-grid {
    grid-template-columns: 1fr;
  }
  .rpc-quote-output { min-height: 280px; }
  .rpc-price-hero {
    padding: var(--space-6) var(--space-4);
  }
  .rpc-price-hero-value {
    font-size: clamp(38px, 12vw, 52px);
  }
  .rpc-price-details > div {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
  .rpc-price-details dd {
    text-align: left;
  }
  .rpc-diagnostic-content {
    padding: var(--space-4);
  }
  .rpc-diagnostic-progress {
    align-items: flex-start;
  }
  .rpc-diagnostic-progress > div {
    align-items: flex-start;
    flex: 0 1 auto;
  }
  .rpc-diagnostic-progress > div strong {
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
  }
  .rpc-diagnostic-report-stage {
    grid-template-columns: 1fr;
  }
  .rpc-diagnostic-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .rpc-diagnostic-actions .rpc-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ====================================================================== */
/* Inventory Unit Manage page (per-unit detail).                          */
/* ====================================================================== */
#inventory-item-manage-page.inventory-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 56px;
  background: #ffffff;
}

#inventory-item-manage-page > .dashboard-breadcrumb {
  display: none;
}

#inventory-item-manage-page .iim-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 28px;
}

#inventory-item-manage-page .iim-pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 18px;
  background: #4a4a4a;
  color: #ffffff;
}
#inventory-item-manage-page .iim-pagebar h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
}

.iim-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 30px 18px 10px;
  background: #ffffff;
}
.iim-titlebar h3 {
  margin: 0;
  color: #666666;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.iim-title-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.iim-back-link {
  color: #009bd8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.iim-back-link:hover { text-decoration: underline; }

.iim-title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.iim-action-btn {
  background: #fff;
  border: 1px solid #009bd8;
  color: #009bd8;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.iim-action-btn:hover {
  background: #eef9fd;
}
.iim-action-green {
  background: #42a845;
  border-color: #42a845;
  color: #ffffff;
}
.iim-action-green:hover {
  background: #328f35;
}
.iim-dymo-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid #d7dde3;
  border-radius: 999px;
  background: #f6f8fa;
  color: #5b6673;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.iim-dymo-status:hover {
  border-color: #c4ccd4;
}
.iim-dymo-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa4af;
}
.iim-dymo-status[data-state="checking"] .iim-dymo-status-dot {
  animation: iim-dymo-pulse 1s ease-in-out infinite;
}
.iim-dymo-status[data-state="ready"] {
  background: #eefbf0;
  border-color: #b7e6bf;
  color: #2f7d3a;
}
.iim-dymo-status[data-state="ready"] .iim-dymo-status-dot {
  background: #42a845;
}
.iim-dymo-status[data-state="warn"] {
  background: #fff7e8;
  border-color: #f0dca6;
  color: #8a6d1f;
}
.iim-dymo-status[data-state="warn"] .iim-dymo-status-dot {
  background: #e0a91b;
}
.iim-dymo-status[data-state="offline"] {
  background: #fdeeee;
  border-color: #f0c0c0;
  color: #a5352f;
}
.iim-dymo-status[data-state="offline"] .iim-dymo-status-dot {
  background: #d64b45;
}
@keyframes iim-dymo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.iim-edit-back {
  text-decoration: none;
}

.iim-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: clamp(28px, 20vw, 420px);
  align-items: flex-start;
  padding: 0 18px;
}

#inventory-item-manage-page:is(.iim-mode-edit, .iim-mode-new) .iim-titlebar {
  padding: 28px 18px 4px;
}
#inventory-item-manage-page:is(.iim-mode-edit, .iim-mode-new) .iim-title-copy {
  margin-left: clamp(36px, 8vw, 170px);
}
#inventory-item-manage-page:is(.iim-mode-edit, .iim-mode-new) .iim-titlebar h3 {
  font-size: 16px;
}
#inventory-item-manage-page:is(.iim-mode-edit, .iim-mode-new) .iim-layout {
  display: block;
  padding: 0 20px 28px;
}

/* LEFT sidebar */
.iim-sidebar {
  background: #fff;
  overflow: hidden;
}
.iim-side-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border: 1px solid #d4d4d4;
}
.iim-side-table th,
.iim-side-table td {
  min-height: 31px;
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d4d4d4;
}
.iim-side-table th {
  width: 58%;
  background: #d4d4d4;
  color: #666666;
  font-weight: 700;
}
.iim-side-table td {
  color: #666666;
  background: #f8f8f8;
  word-break: break-word;
}
.iim-side-table tr:last-child th,
.iim-side-table tr:last-child td {
  border-bottom: 0;
}

/* RIGHT change log */
.iim-log {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  min-height: 360px;
}
.iim-log-head {
  background: #f1f1f1;
  border-bottom: 1px solid #d4d4d4;
  padding: 28px 18px 16px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #666666;
}
.iim-log-list {
  padding: 0;
}
.iim-log-empty {
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
  padding: 30px 0;
}

.iim-log-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #666666;
  font-size: 12px;
}
.iim-log-table tr {
  border-bottom: 1px solid #d4d4d4;
}
.iim-log-table tr:nth-child(odd) {
  background: #eaf8fd;
}
.iim-log-table tr:nth-child(even) {
  background: #ffffff;
}
.iim-log-table td {
  height: 31px;
  padding: 7px 12px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iim-log-actor {
  width: 180px;
}
.iim-log-message {
  width: auto;
}
.iim-log-ref {
  width: 120px;
  text-align: center;
  overflow: visible !important;
}
.iim-log-time {
  width: 160px;
  text-align: right;
}
.iim-log-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 17px;
  padding: 1px 7px;
  border-radius: 4px;
  background: #8a8a8a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.iim-log-message a,
.iim-side-table a {
  color: #009bd8;
  font-weight: 700;
  text-decoration: none;
}
.iim-log-message a:hover,
.iim-side-table a:hover {
  text-decoration: underline;
}

.iim-ref-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  overflow: visible;
}

.iim-ref-wrap::before {
  content: "";
  position: absolute;
  left: -28px;
  right: -28px;
  bottom: 100%;
  height: 14px;
}

.iim-ref-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 40;
  min-width: 128px;
  padding: 8px 11px;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 220ms;
  visibility: hidden;
}

.iim-ref-popover::before,
.iim-ref-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}

.iim-ref-popover::before {
  bottom: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #cfd8e3;
}

.iim-ref-popover::after {
  bottom: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ffffff;
}

.iim-ref-wrap:hover .iim-ref-popover,
.iim-ref-wrap:focus-within .iim-ref-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
  visibility: visible;
}

.iim-ref-pop-title {
  display: block;
  margin-bottom: 5px;
  color: #666666;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.iim-ref-popover a {
  color: #009bd8;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.iim-ref-popover a:hover {
  text-decoration: underline;
}

.iim-update-form {
  width: min(100%, 420px);
  margin: 18px 0 0 clamp(36px, 8vw, 170px);
  padding-bottom: 22px;
}
.iim-form-row,
.iim-form-check {
  display: grid;
  grid-template-columns: 150px 220px;
  align-items: start;
  gap: 12px;
  margin-bottom: 13px;
  color: #666666;
  font-size: 12px;
}
.iim-form-row > label {
  padding-top: 7px;
  text-align: right;
  font-weight: 600;
}
.iim-form-row label span {
  color: #666666;
}
.iim-form-row input,
.iim-form-row select,
.iim-form-row textarea {
  width: 220px;
  min-height: 28px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  background: #ffffff;
  color: #555555;
  font-size: 12px;
  padding: 4px 7px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.iim-form-row textarea {
  min-height: 96px;
  resize: vertical;
}
.iim-form-row input:disabled,
.iim-form-row select:disabled {
  background: #eeeeee;
  color: #777777;
}
.iim-field-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.iim-field-stack small {
  color: #159bd3;
  font-size: 11px;
}
.iim-catalog-combobox {
  position: relative;
  width: 220px;
}
.iim-catalog-combobox input {
  width: 100%;
}
.iim-catalog-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  max-height: 212px;
  overflow-y: auto;
  border: 1px solid #9ca3af;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.iim-catalog-option {
  width: 100%;
  min-height: 30px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
}
.iim-catalog-option:hover,
.iim-catalog-option:focus {
  background: #eaf6fb;
  color: #0f172a;
  outline: none;
}
.iim-catalog-option:last-child {
  border-bottom: 0;
}
.iim-catalog-empty {
  padding: 8px 10px;
  color: #6b7280;
  font-size: 12px;
}
.iim-form-check {
  align-items: center;
}
.iim-form-check input[type="checkbox"] {
  inline-size: 14px;
  block-size: 14px;
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  min-height: 0;
  padding: 0;
  margin-right: 8px;
  border: 1px solid #b8b8b8;
  box-shadow: none;
  flex: 0 0 14px;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}
.iim-form-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 24px 0 0 162px;
  padding-top: 18px;
  border-top: 1px solid #e5e5e5;
}
.iim-save-btn,
.iim-cancel-btn {
  min-height: 28px;
  padding: 4px 13px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.iim-save-btn {
  border: 1px solid #009bd8;
  background: #009bd8;
  color: #ffffff;
}
.iim-cancel-btn {
  border: 1px solid #009bd8;
  background: #ffffff;
  color: #009bd8;
}
#inventory-item-manage-page.iim-mode-edit .iim-log {
  margin-top: 42px;
  min-height: 360px;
}

@media (max-width: 900px) {
  .iim-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .iim-titlebar {
    flex-direction: column;
  }
  .iim-title-actions {
    justify-content: flex-start;
  }
  #inventory-item-manage-page:is(.iim-mode-edit, .iim-mode-new) .iim-title-copy,
  .iim-update-form {
    margin-left: 0;
  }
  .iim-form-row,
  .iim-form-check {
    grid-template-columns: 1fr;
  }
  .iim-form-row > label {
    text-align: left;
  }
  .iim-form-row input,
  .iim-form-row select,
  .iim-form-row textarea {
    width: 100%;
  }
  .iim-form-actions {
    margin-left: 0;
  }
}

/* ====================================================================== */
/* Inventory Summary Adjust modal (RepairQ-style status adjustment flow).  */
/* ====================================================================== */
.inv-adjust-rq-card {
  width: min(92vw, 1180px);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.inv-adjust-rq-head {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #28a9dc;
  color: #ffffff;
}
.inv-adjust-rq-head h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  color: #ffffff;
}
.inv-adjust-rq-close {
  position: absolute;
  right: 28px;
  top: 22px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 46px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
}
.inv-adjust-rq-body {
  padding: 44px 56px 62px;
  overflow: auto;
  color: #666666;
}
.inv-adjust-filter-grid {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 26px 44px;
  margin: 0 0 26px 42px;
}
.inv-adjust-filter-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #666666;
  font-size: 17px;
  font-weight: 700;
}
.inv-adjust-filter-grid select {
  height: 34px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #ffffff;
  color: #666666;
  font-size: 16px;
  padding: 4px 10px;
}
.inv-adjust-rq-body h4 {
  margin: 22px 0 10px 42px;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 500;
  color: #0f4f79;
}
.inv-adjust-status-table {
  width: calc(100% - 84px);
  margin: 0 42px 26px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #666666;
}
.inv-adjust-status-table th {
  height: 42px;
  padding: 8px 14px;
  background: #e7edf2;
  color: #666666;
  text-align: left;
  font-size: 20px;
  font-weight: 800;
}
.inv-adjust-status-table th:nth-child(2),
.inv-adjust-status-table td:nth-child(2) {
  width: 180px;
}
.inv-adjust-status-table th:nth-child(3),
.inv-adjust-status-table td:nth-child(3) {
  width: 240px;
}
.inv-adjust-status-table td {
  height: 54px;
  padding: 8px 14px;
  border-bottom: 1px solid #d9d9d9;
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}
.inv-adjust-status-table tfoot th {
  background: #ffffff;
  border-top: 1px solid #d9d9d9;
}
.inv-adjust-status-table tr.is-adjustable {
  background: #edf9fe;
}
.inv-adjust-actions-cell {
  display: flex;
  align-items: center;
  gap: 28px;
}
.inv-adjust-icon-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #1ea7dd;
  padding: 0;
  cursor: pointer;
}
.inv-adjust-icon-btn svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inv-adjust-icon-btn:hover {
  color: #0c79a7;
}
.inv-adjust-warning {
  width: min(100%, 980px);
  margin: 0 auto 34px;
  padding: 14px 20px;
  border: 1px solid #f3d7a5;
  border-radius: 5px;
  background: #fff8e8;
  color: #bd8b32;
  font-size: 22px;
  line-height: 1.35;
}
.inv-adjust-warning strong {
  color: #009bd8;
  font-weight: 700;
}
.inv-adjust-edit-grid {
  width: min(100%, 650px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 22px 28px;
  align-items: center;
}
.inv-adjust-edit-grid > label {
  text-align: right;
  color: #666666;
  font-size: 18px;
  font-weight: 700;
}
.inv-adjust-edit-grid > hr {
  grid-column: 1 / -1;
  width: 100%;
  border: 0;
  border-top: 1px solid #e2e2e2;
  margin: 4px 0 4px;
}
.inv-adjust-money,
.inv-adjust-money-readonly {
  width: 230px;
  display: flex;
  align-items: stretch;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}
.inv-adjust-money-readonly {
  background: #eeeeee;
}
.inv-adjust-money span,
.inv-adjust-money-readonly span {
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #cfcfcf;
  color: #666666;
  font-size: 22px;
  font-weight: 700;
  background: #eeeeee;
}
.inv-adjust-money input,
.inv-adjust-money-readonly input,
.inv-adjust-edit-grid > input {
  height: 38px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  color: #666666;
  font-size: 18px;
  padding: 5px 9px;
}
.inv-adjust-money input,
.inv-adjust-money-readonly input {
  width: 190px;
  border: 0;
  border-radius: 0;
}
.inv-adjust-money-readonly input,
.inv-adjust-edit-grid > input:disabled {
  background: #eeeeee;
  color: #999999;
}
.inv-adjust-input-action {
  display: flex;
  align-items: center;
  gap: 0;
}
.inv-adjust-input-action > input {
  width: 230px;
}
.inv-adjust-apply {
  width: 52px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 5px 5px 0;
  background: #009bd8;
  color: #ffffff;
  cursor: pointer;
}
.inv-adjust-apply input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.inv-adjust-apply span {
  width: 20px;
  height: 20px;
  overflow: hidden;
  text-indent: -999px;
  position: relative;
}
.inv-adjust-apply span::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 14px;
  height: 9px;
  border-left: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  transform: rotate(-45deg);
}
.inv-adjust-apply:has(input:not(:checked)) {
  background: #9aa6af;
}
.inv-adjust-editor-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 70px;
}
.inv-adjust-back-btn {
  min-width: 110px;
  min-height: 56px;
  border: 0;
  border-radius: 5px;
  background: #115174;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
}
.inv-adjust-transfer-grid {
  width: min(100%, 720px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px 28px;
  align-items: start;
}
.inv-adjust-transfer-grid > label {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #666666;
  font-size: 18px;
  font-weight: 700;
}
.inv-adjust-transfer-grid input,
.inv-adjust-transfer-grid select,
.inv-adjust-transfer-grid textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  color: #666666;
  font-size: 18px;
  padding: 7px 10px;
  background: #ffffff;
}
.inv-adjust-transfer-grid input:disabled,
.inv-adjust-transfer-grid select:disabled {
  background: #eeeeee;
  color: #999999;
}
.inv-adjust-link-btn {
  width: max-content;
  border: 0;
  background: transparent;
  color: #009bd8;
  font-size: 22px;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
}
.inv-adjust-transfer-check {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 38px;
  color: #666666;
  font-size: 17px;
  font-weight: 700;
}
.inv-adjust-transfer-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
}
.inv-adjust-transfer-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #f3d7a5;
  border-radius: 5px;
  background: #fff8e8;
  color: #9b6a18;
  font-size: 15px;
}
.inv-transfers-modal-card {
  max-height: min(88vh, 900px);
  max-width: min(1180px, 96vw);
  width: 100%;
}
.inv-transfers-modal-body {
  max-height: calc(88vh - 58px);
  overflow: auto;
}
.inv-transfers-head-actions,
.inv-transfers-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.inv-transfers-head-actions .btn,
.inv-transfers-actions .btn {
  min-height: 30px;
  padding: 5px 10px;
}
.inv-transfers-error {
  min-height: 18px;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.inv-transfers-table-wrap {
  border: 1px solid #dfe4ea;
  overflow: auto;
}
.inv-transfers-table {
  min-width: 980px;
}
.inv-transfers-empty,
.inv-transfer-no-actions {
  color: #6b7280;
  font-size: 12px;
}
.inv-transfers-empty {
  text-align: center;
}
.inv-loc-overrides-card {
  width: min(96vw, 1620px);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.inv-loc-overrides-body {
  padding: 30px 40px 46px;
  overflow: auto;
  color: #666666;
}
.inv-loc-overrides-body > p {
  margin: 0 0 12px;
  font-size: 15px;
}
.inv-loc-overrides-info {
  width: 100%;
  margin: 0 0 18px;
  font-size: 16px;
}
.inv-loc-overrides-scroll {
  overflow-x: auto;
  border: 1px solid #d8dee5;
}
.inv-loc-overrides-table {
  width: 100%;
  min-width: 1450px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #666666;
}
.inv-loc-overrides-table th {
  height: 46px;
  padding: 8px 10px;
  background: #e7edf2;
  border-right: 1px solid #d8dee5;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
}
.inv-loc-overrides-table td {
  height: 48px;
  padding: 8px 10px;
  border-top: 1px solid #d8dee5;
  border-right: 1px solid #d8dee5;
  font-size: 14px;
  vertical-align: middle;
}
.inv-loc-overrides-table input[type="text"],
.inv-loc-overrides-table input[type="number"] {
  width: 100%;
  height: 34px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  color: #555555;
  padding: 5px 8px;
  font-size: 14px;
}
.inv-loc-overrides-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.inv-loc-default-row {
  background: #f7f7f7;
}
.inv-loc-badge {
  display: inline-flex;
  min-width: 26px;
  justify-content: center;
  border-radius: 3px;
  background: #9aa1a8;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
}
.inv-loc-badge.is-yes {
  background: #4caf50;
}

@media (max-width: 760px) {
  .inv-adjust-rq-body {
    padding: 26px 16px 36px;
  }
  .inv-adjust-rq-head h3 {
    font-size: 24px;
    padding: 0 56px;
    text-align: center;
  }
  .inv-adjust-filter-grid,
  .inv-adjust-status-table,
  .inv-adjust-rq-body h4 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .inv-adjust-filter-grid,
  .inv-adjust-edit-grid,
  .inv-adjust-transfer-grid {
    grid-template-columns: 1fr;
  }
  .inv-adjust-edit-grid > label,
  .inv-adjust-transfer-grid > label {
    text-align: left;
    justify-content: flex-start;
  }
}

/* ============================================================
   Inventory Count Sheet — scan flow page
   ============================================================ */
#inventory-count-sheet-page {
  padding: 0 0 32px;
  background: #f7f7f7;
}
#inventory-count-sheet-page .iim-pagebar {
  margin: 0;
  min-height: 42px;
  padding: 0 18px;
}
.ics-pagebar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ics-session-select {
  min-width: 220px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 4px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 12px;
  padding: 0 8px;
}
.ics-session-select option {
  color: #111827;
}
.ics-load-assignments-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}
.ics-load-assignments-btn:hover { opacity: 1; }
.ics-load-assignments-btn svg { width: 16px; height: 16px; }
.ics-grid {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 44px;
  padding: 22px 18px 0;
}
.ics-left-stack,
.ics-right-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.ics-panel {
  background: #fff;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.ics-panel-head {
  background: #4d4d4d;
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
}
.ics-panel-body { padding: 14px 14px 18px; }
.ics-scan-row {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  min-width: 300px;
  max-width: 420px;
  width: min(100%, 420px);
}
.ics-search-mode-btn {
  width: 48px;
  min-height: 29px;
  border: 1px solid #129bd8;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  color: #159bd5;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  padding: 0 4px;
}
.ics-search-mode-btn:hover,
.ics-search-mode-btn.is-scan {
  background: #eef8fd;
}
#ics-search-mode-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}
.ics-search-caret {
  width: 9px;
  height: 9px;
}
.ics-scan-input {
  flex: 1;
  border: 1px solid #129bd8;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  outline: none;
  padding: 0 8px;
  font-size: 12px;
  min-height: 29px;
  color: #555;
  box-shadow: 0 0 8px rgba(18, 155, 216, 0.28);
}
.ics-scan-input:focus { outline: none; box-shadow: none; }
.ics-search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #ddd;
  background: #fff;
  width: min(100%, 420px);
}
.ics-search-results:empty { border: none; }
.ics-search-row {
  padding: 8px 9px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
}
.ics-search-row:hover { background: #f2f9fe; }
.ics-search-row:last-child { border-bottom: none; }
.ics-search-name { font-size: 12px; color: #555; font-weight: 600; }
.ics-search-meta { font-size: 11px; color: #777; margin-top: 2px; }
.ics-search-empty {
  padding: 10px;
  color: #777;
  font-style: italic;
  text-align: center;
  list-style: none;
}
.ics-log-toolbar,
.ics-counted-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #555;
  font-size: 12px;
  margin: 6px 0 12px;
}
.ics-log-toolbar label,
.ics-counted-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ics-log-toolbar select,
.ics-counted-toolbar select {
  height: 30px;
  min-width: 74px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 0 8px;
  color: #555;
  background: #fff;
}
.ics-log-table,
.ics-counted-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  color: #555;
}
.ics-log-table th,
.ics-counted-table th {
  background: #d7d7d7;
  color: #555;
  text-align: left;
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1px solid #cfcfcf;
}
.ics-log-table td,
.ics-counted-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}
.ics-log-table th:first-child,
.ics-log-table td:first-child {
  width: 110px;
}
.ics-log-warning td {
  background: #fff8df;
}
.ics-current-empty,
.ics-counted-empty {
  color: #777;
  font-size: 12px;
  padding: 12px 0;
}
.ics-current-card h2 {
  font-size: 20px;
  line-height: 1.2;
  color: #555;
  margin: 0 0 10px;
  font-weight: 700;
}
.ics-current-table {
  border-collapse: collapse;
  width: 320px;
  max-width: 100%;
  margin: 0 0 10px;
  font-size: 12px;
}
.ics-current-table th,
.ics-current-table td {
  border: 1px solid #d7d7d7;
  padding: 8px 10px;
  text-align: left;
}
.ics-current-table th {
  width: 72px;
  background: #d6d6d6;
  color: #555;
  font-weight: 700;
}
.ics-current-table input {
  width: 100%;
  min-height: 28px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  padding: 0 8px;
  color: #555;
}
.ics-current-actions,
.ics-counted-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.ics-counted-table th:first-child,
.ics-counted-table td:first-child {
  width: 28px;
  text-align: center;
}
.ics-counted-table th:nth-child(2),
.ics-counted-table td:nth-child(2) {
  width: 72px;
}
.ics-counted-table th:nth-child(3),
.ics-counted-table td:nth-child(3) {
  width: 160px;
}
.ics-counted-table th:nth-child(5),
.ics-counted-table td:nth-child(5) {
  width: 90px;
}
.ics-counted-table th:nth-child(6),
.ics-counted-table td:nth-child(6) {
  width: 130px;
}
.ics-counted-warning {
  color: #777;
  font-size: 13px;
}
.ics-counted-name {
  color: #555;
  font-weight: 500;
}
.ics-counted-action-cell {
  white-space: nowrap;
}
.ics-counted-action-cell button {
  border: none;
  background: transparent;
  color: #159bd5;
  cursor: pointer;
  font-size: 12px;
  padding: 0 6px 0 0;
}
.ics-counted-action-cell button:last-child {
  color: #e05a50;
}
@media (max-width: 900px) {
  .ics-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ics-scan-row {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   Inventory Counts row kebab menu (4 actions)
   ============================================================ */
.invcounts-row-menu {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  min-width: 220px;
  padding: 6px 0;
  z-index: 1000;
}
.invcounts-row-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  font-size: 14px;
  color: #3aa3d6;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.invcounts-row-menu-item:hover { background: #f3f4f6; }
.invcounts-row-menu-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #3aa3d6;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 18px;
}
.invcounts-row-menu-item .invcounts-delete-icon {
  fill: #dc2626;
  stroke: none;
}
.invcounts-row-menu-item .invcounts-delete-icon path { stroke: #fff; }
.invcounts-row-menu-danger { color: #dc2626; }
.invcounts-row-menu-danger:hover { background: #fef2f2; }

.invcounts-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.42);
}

.invcounts-detail-modal {
  width: min(760px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.invcounts-detail-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: #4a4a4a;
  color: #ffffff;
}

.invcounts-detail-titlebar h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.invcounts-detail-titlebar span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-style: italic;
}

.invcounts-detail-close {
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.invcounts-detail-body {
  padding: 18px 20px 20px;
}

.invcounts-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #dfe4ea;
  margin-bottom: 16px;
}

.invcounts-detail-summary > div {
  min-height: 58px;
  padding: 9px 12px;
  border-right: 1px solid #dfe4ea;
  background: #fbfbfb;
}

.invcounts-detail-summary > div:last-child {
  border-right: 0;
}

.invcounts-detail-summary span {
  display: block;
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}

.invcounts-detail-summary strong {
  color: #374151;
  font-size: 18px;
}

.invcounts-detail-table {
  width: 100%;
  border-collapse: collapse;
  color: #5d6268;
  font-size: 12px;
}

.invcounts-detail-table th,
.invcounts-detail-table td {
  padding: 8px 10px;
  border: 1px solid #dfe3e7;
  text-align: left;
  vertical-align: top;
}

.invcounts-detail-table th {
  width: 210px;
  background: #d9d9d9;
  color: #555;
  font-weight: 700;
}

.invcounts-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid #e5e7eb;
}

.invcounts-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.72);
}

.invcounts-action-modal {
  width: min(720px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.invcounts-action-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 18px 64px;
  background: #28aee0;
  color: #ffffff;
  text-align: center;
}

.invcounts-action-titlebar h3 {
  max-width: 560px;
  margin: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.18;
}

.invcounts-action-titlebar p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.invcounts-action-close {
  position: absolute;
  top: 16px;
  right: 20px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 40px;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
}

.invcounts-action-body {
  padding: 34px 58px 42px;
}

.invcounts-action-help {
  max-width: 520px;
  margin: 0 auto 20px;
  color: #606060;
  font-size: 19px;
  line-height: 1.25;
  text-align: center;
}

.invcounts-action-form {
  display: grid;
  grid-template-columns: 130px minmax(210px, 310px);
  align-items: center;
  justify-content: center;
  gap: 18px 16px;
}

.invcounts-action-form label {
  justify-self: end;
  margin: 0;
  color: #5e5e5e;
  font-size: 16px;
  font-weight: 500;
}

.invcounts-action-form input,
.invcounts-action-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  background: #ffffff;
  color: #4f4f4f;
  font-size: 16px;
  padding: 7px 10px;
}

.invcounts-action-form input:focus,
.invcounts-action-form select:focus {
  border-color: #79a9fb;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.24);
  outline: none;
}

.invcounts-date-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
}

.invcounts-date-control input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.invcounts-date-button {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1px solid #0f9bd0;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: #079bd0;
  color: #ffffff;
  cursor: pointer;
}

.invcounts-date-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invcounts-action-error {
  grid-column: 1 / -1;
  min-height: 18px;
  color: #dc2626;
  font-size: 13px;
  text-align: center;
}

.invcounts-action-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 34px;
}

.invcounts-action-primary {
  min-width: 150px;
  border: 0;
  border-radius: 4px;
  background: #079bd0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
}

.invcounts-action-primary:hover { background: #0789ba; }

.invcounts-action-modal.invcounts-count-modal {
  width: min(500px, calc(100vw - 44px));
}

.invcounts-count-modal .invcounts-action-titlebar {
  min-height: 112px;
  padding: 18px 54px;
}

.invcounts-count-modal .invcounts-action-titlebar h3 {
  max-width: 410px;
  font-size: 24px;
  line-height: 1.55;
}

.invcounts-count-modal .invcounts-action-body {
  padding: 32px 46px 34px;
}

.invcounts-count-form {
  grid-template-columns: 68px 160px;
  gap: 18px 14px;
}

.invcounts-count-form .invcounts-action-footer {
  padding-top: 28px;
}

.invcounts-action-modal.invcounts-serial-modal {
  width: min(900px, calc(100vw - 44px));
}
.invcounts-serial-modal .invcounts-action-body {
  padding: 26px 32px 34px;
}
.invcounts-serial-form {
  display: grid;
  grid-template-columns: 120px minmax(180px, 1fr) 80px;
  gap: 12px;
  align-items: center;
}
.invcounts-serial-form label {
  color: #5e5e5e;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.invcounts-serial-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  color: #4f4f4f;
  font-size: 15px;
  padding: 7px 10px;
}
.invcounts-serial-form .invcounts-action-primary {
  min-width: 80px;
  padding: 8px 14px;
  font-size: 16px;
}
.invcounts-serial-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #dfe4ea;
  margin: 12px 0 16px;
}
.invcounts-serial-summary > div {
  padding: 9px 11px;
  border-right: 1px solid #dfe4ea;
  border-bottom: 1px solid #dfe4ea;
  background: #fbfbfb;
}
.invcounts-serial-summary span {
  display: block;
  color: #6b7280;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.invcounts-serial-summary strong {
  display: block;
  margin-top: 4px;
  color: #374151;
  font-size: 19px;
}
.invcounts-serial-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid #dfe3e7;
}
.invcounts-serial-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.invcounts-serial-table th,
.invcounts-serial-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}
.invcounts-serial-table th {
  position: sticky;
  top: 0;
  background: #e7edf2;
  color: #555555;
  font-weight: 800;
  z-index: 1;
}
.invcounts-serial-empty {
  color: #6b7280;
  text-align: center;
}
.invcounts-serial-link {
  border: 0;
  background: transparent;
  color: #079bd0;
  font-weight: 700;
  padding: 0 8px 0 0;
  cursor: pointer;
}

@media (max-width: 680px) {
  .invcounts-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invcounts-detail-summary > div:nth-child(2) { border-right: 0; }
  .invcounts-action-body { padding: 28px 20px 34px; }
  .invcounts-action-titlebar h3 { font-size: 25px; }
  .invcounts-action-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .invcounts-action-form label {
    justify-self: start;
    margin-top: 10px;
  }
  .invcounts-count-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .invcounts-serial-form,
  .invcounts-serial-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .invcounts-serial-form label {
    text-align: left;
  }
}

/* ============================================================
 * Cash Register — 4-slot grid + shift activity panel
 * ============================================================ */

.cash-register-shell {
  padding: 28px 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cash-register-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.cash-register-head-text h2 {
  margin: 0 0 6px;
  font-size: 22px;
  color: #0f1e2e;
  font-weight: 600;
}

.cash-register-sub {
  margin: 0 0 8px;
  color: #5b6b7e;
  font-size: 13.5px;
  max-width: 640px;
  line-height: 1.45;
}

.cash-register-location {
  font-size: 12.5px;
  color: #4b6275;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cash-register-location:empty { display: none; }

.cash-register-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cash-register-loading {
  font-size: 14px;
  color: #5b6b7e;
  padding: 14px 0;
}

.cash-register-loading.hidden { display: none; }

.cash-register-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.cash-register-grid.is-focused {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin: 0 auto;
}

.cash-register-grid.is-focused .cash-card {
  padding: 22px 24px 20px;
  border-radius: 14px;
}

.cash-register-grid.is-focused .cash-card-name { font-size: 18px; }
.cash-register-grid.is-focused .cash-card-row { font-size: 14px; }
.cash-register-grid.is-focused .cash-card-row-expected dd { font-size: 22px; }
.cash-register-grid.is-focused .cash-card-actions .btn { padding: 10px 14px; font-size: 13.5px; }
.cash-register-grid.is-focused .cash-card-view-btn { display: none; }

@media (max-width: 1180px) {
  .cash-register-grid:not(.is-focused) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cash-register-grid:not(.is-focused) { grid-template-columns: 1fr; }
  .cash-register-shell { padding: 20px 16px 40px; }
}

.cash-register-no-slot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 12px;
  color: #9a3412;
}

.cash-register-no-slot.hidden { display: none; }

.cash-no-slot-icon {
  font-size: 26px;
  line-height: 1;
  color: #c2410c;
}

.cash-no-slot-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.4;
}

.cash-no-slot-text strong {
  color: #7c2d12;
  font-weight: 600;
}

.cash-register-no-slot .btn {
  flex: 0 0 auto;
}

.cash-card {
  background: #ffffff;
  border: 1px solid #e1e7ee;
  border-radius: 12px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(15, 30, 46, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  position: relative;
}

.cash-card.is-selected {
  border-color: #1ea6da;
  box-shadow: 0 0 0 3px rgba(30, 166, 218, 0.18);
}

.cash-card.is-open {
  border-left: 4px solid #16a34a;
  padding-left: 15px;
}

.cash-card.is-closed {
  background: #fafbfc;
  border-left: 4px solid #cbd2db;
  padding-left: 15px;
}

.cash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cash-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #0f1e2e;
  letter-spacing: 0.01em;
}

.cash-card-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
}

.cash-card-status-open {
  background: #dcfce7;
  color: #166534;
}

.cash-card-status-closed {
  background: #eef0f3;
  color: #5d6b7c;
}

.cash-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.cash-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}

.cash-card-row dt {
  color: #6b7a8c;
  font-weight: 500;
}

.cash-card-row dd {
  margin: 0;
  color: #0f1e2e;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cash-card-row-expected dd {
  font-size: 17px;
  color: #0a5cc4;
}

.cash-card-empty {
  margin: 4px 0 0;
  font-size: 13px;
  color: #738093;
  line-height: 1.5;
}

.cash-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #eef1f5;
}

.cash-card-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 12.5px;
  border-radius: 7px;
}

.cash-card.is-closed .cash-card-actions {
  border-top: 0;
  padding-top: 0;
}

.cash-card-view-btn {
  background: transparent;
  border: 1px solid #d6dde4;
  color: #2c4054;
  padding: 7px 10px;
  font-size: 12.5px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  flex: 1 1 100%;
  margin-top: 4px;
}

.cash-card-view-btn:hover {
  background: #f1f5f9;
  border-color: #b8c2cd;
}

.cash-card-view-btn.is-active {
  background: #e0f1fa;
  border-color: #1ea6da;
  color: #075174;
}

/* --- Shift Activity panel --- */

.cash-detail {
  background: #ffffff;
  border: 1px solid #e1e7ee;
  border-radius: 12px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cash-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.cash-detail-head h3 {
  margin: 0;
  font-size: 15px;
  color: #0f1e2e;
  font-weight: 600;
}

.cash-detail-meta {
  font-size: 12.5px;
  color: #5b6b7e;
}

.cash-detail-meta strong {
  color: #0f1e2e;
  font-weight: 600;
}

.cash-consolidation-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cash-consolidation-date-label {
  font-size: 12.5px;
  color: #5b6b7e;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cash-consolidation-date-label input[type="date"] {
  font-size: 12.5px;
  padding: 4px 8px;
  border: 1px solid #d5dde6;
  border-radius: 6px;
}

.cash-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cash-detail-summary:empty { display: none; }

.cash-detail-summary-tile {
  flex: 1 1 140px;
  min-width: 0;
  background: #f6f9fc;
  border: 1px solid #e2eaf2;
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cash-detail-summary-tile .tile-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #607387;
  font-weight: 600;
}

.cash-detail-summary-tile .tile-value {
  font-size: 17px;
  font-weight: 700;
  color: #0f1e2e;
  font-variant-numeric: tabular-nums;
}

.cash-detail-summary-tile.tile-positive .tile-value { color: #15803d; }
.cash-detail-summary-tile.tile-negative .tile-value { color: #b91c1c; }

.cash-detail-empty {
  padding: 28px 0 22px;
  text-align: center;
  color: #6b7a8c;
  font-size: 13.5px;
}

.cash-detail-empty.hidden { display: none; }

.cash-detail-table-wrap {
  overflow-x: auto;
}

.cash-detail-table-wrap.hidden { display: none; }

.cash-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cash-detail-table thead th {
  background: #f3f6f9;
  color: #46556a;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #e1e7ee;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cash-detail-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
  color: #1f2c3d;
}

.cash-detail-table tbody tr:hover { background: #f8fafc; }

.cash-detail-th-amount,
.cash-detail-td-amount { text-align: right; font-variant-numeric: tabular-nums; }

.cash-detail-td-amount.is-credit { color: #15803d; font-weight: 600; }
.cash-detail-td-amount.is-debit { color: #b91c1c; font-weight: 600; }

.cash-tx-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f5;
  color: #46556a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cash-tx-type-badge.tx-opening { background: #e0e7ff; color: #3730a3; }
.cash-tx-type-badge.tx-closing { background: #fee2e2; color: #991b1b; }
.cash-tx-type-badge.tx-payin   { background: #dcfce7; color: #166534; }
.cash-tx-type-badge.tx-payout  { background: #fef3c7; color: #92400e; }
.cash-tx-type-badge.tx-payment { background: #cffafe; color: #155e75; }
.cash-tx-type-badge.tx-refund  { background: #fde2e7; color: #9f1239; }
.cash-tx-type-badge.tx-transfer-in  { background: #ecfeff; color: #0e7490; }
.cash-tx-type-badge.tx-transfer-out { background: #f5f3ff; color: #5b21b6; }
.cash-tx-type-badge.tx-petty-out { background: #ffedd5; color: #9a3412; }

/* --- Petty Cash fund --- */

.cash-petty-section {
  background: #ffffff;
  border: 1px solid #e1e7ee;
  border-radius: 12px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cash-petty-head p {
  margin: 4px 0 0;
  color: #5b6b7e;
  font-size: 13px;
  line-height: 1.45;
}

.cash-petty-card-wrap {
  max-width: 560px;
}

.cash-petty-card-wrap:empty { display: none; }

.cash-card.is-petty {
  border-left-color: #f59e0b;
}

.cash-card.is-petty .cash-card-row-expected dd {
  color: #b45309;
}

/* --- Modal additions --- */

.cash-modal-context {
  font-size: 13px;
  color: #46556a;
  background: #f3f6f9;
  border: 1px solid #e1e7ee;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
}

.cash-modal-context strong { color: #0f1e2e; font-weight: 600; }

/* ============================================================
 * Charge / Take Payment modal — multi-tender
 * ============================================================ */

.charge-modal-panel {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 30, 46, 0.25);
  padding: 26px 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.charge-terminal-status-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 92%, var(--cp-accent-soft));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: charge-terminal-status-in var(--dur-fast) var(--ease-standard);
}

.charge-terminal-status-layer.hidden {
  display: none;
}

.charge-terminal-status-card {
  width: min(390px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: charge-terminal-card-in var(--dur-base) var(--ease-standard);
}

.charge-terminal-status-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent-soft) 70%, var(--surface));
  transition:
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

.charge-terminal-status-icon::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
}

.charge-terminal-status-layer.is-waiting .charge-terminal-status-icon::before {
  width: 50px;
  height: 50px;
  border: 4px solid color-mix(in srgb, var(--cp-accent) 20%, transparent);
  border-top-color: var(--cp-accent);
  border-radius: var(--radius-circle);
  animation: charge-terminal-spin var(--dur-slow) linear infinite;
}

.charge-terminal-status-layer.is-approved .charge-terminal-status-icon {
  color: var(--cp-success);
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  transform: scale(1.03);
}

.charge-terminal-status-layer.is-declined .charge-terminal-status-icon {
  color: var(--cp-danger);
  background: color-mix(in srgb, var(--cp-danger) 12%, var(--surface));
}

.charge-terminal-status-layer.is-cancelled .charge-terminal-status-icon {
  color: var(--content-2);
  background: color-mix(in srgb, var(--content-2) 10%, var(--surface));
}

.charge-terminal-status-layer.is-approved .charge-terminal-status-icon::before,
.charge-terminal-status-layer.is-declined .charge-terminal-status-icon::before,
.charge-terminal-status-layer.is-cancelled .charge-terminal-status-icon::before {
  background: currentColor;
  animation: charge-terminal-result-pop var(--dur-base) var(--ease-out);
}

.charge-terminal-status-layer.is-approved .charge-terminal-status-icon::before {
  mask: url("/assets/static/lucide-icons/check.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/static/lucide-icons/check.svg") center / contain no-repeat;
}

.charge-terminal-status-layer.is-declined .charge-terminal-status-icon::before {
  mask: url("/assets/static/lucide-icons/x.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/static/lucide-icons/x.svg") center / contain no-repeat;
}

.charge-terminal-status-layer.is-cancelled .charge-terminal-status-icon::before {
  mask: url("/assets/static/lucide-icons/circle-slash.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/static/lucide-icons/circle-slash.svg") center / contain no-repeat;
}

.charge-terminal-status-card h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--content-1);
}

.charge-terminal-status-detail {
  margin: calc(var(--space-2) * -1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--content-2);
}

.charge-terminal-status-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
  padding-top: var(--space-2);
}

.charge-terminal-status-actions button {
  min-width: 112px;
  border-radius: var(--radius-md);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.charge-terminal-status-retry {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: var(--cp-accent-content);
}

.charge-terminal-status-retry:hover {
  background: var(--cp-accent-hover);
  border-color: var(--cp-accent-hover);
  color: var(--cp-accent-content);
}

.charge-terminal-status-back {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

.charge-terminal-status-back:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.charge-terminal-status-cancel {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

.charge-terminal-status-cancel:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

@keyframes charge-terminal-status-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes charge-terminal-card-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-3)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes charge-terminal-spin {
  to { transform: rotate(360deg); }
}

@keyframes charge-terminal-result-pop {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.charge-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.charge-modal-eyebrow {
  font-size: 11.5px;
  color: #607387;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.charge-modal-header h2 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f1e2e;
}

.charge-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.charge-summary-tile {
  background: #f6f9fc;
  border: 1px solid #e2eaf2;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.charge-summary-tile-total { background: #eef2ff; border-color: #c7d2fe; }
.charge-summary-tile-paid  { background: #ecfdf5; border-color: #a7f3d0; }
.charge-summary-tile-balance { background: #fefce8; border-color: #fde68a; }

.charge-summary-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5b6b7e;
  font-weight: 600;
}

.charge-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: #0f1e2e;
  font-variant-numeric: tabular-nums;
}

.charge-customer-line {
  font-size: 13px;
  color: #46556a;
  padding: 8px 12px;
  background: #f3f6f9;
  border: 1px solid #e1e7ee;
  border-radius: 8px;
}

.charge-customer-line.hidden { display: none; }

.charge-customer-line strong { color: #0f1e2e; font-weight: 600; }

.charge-balance-row {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  width: min(560px, 100%);
  margin: 2px auto 0;
}

.charge-balance-row span {
  color: #4b5563;
  font-size: 15px;
  font-weight: 650;
  text-align: right;
}

.charge-balance-row strong {
  color: #0f1e2e;
  font-size: 20px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.charge-tenders {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(560px, 100%);
  margin: 0 auto;
}

.charge-tender {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.charge-tender-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}

.charge-field {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  min-width: 0;
}

.charge-field > span {
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: #4b5563;
  font-weight: 650;
  text-align: right;
}

.charge-field select,
.charge-field input {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #cbd2db;
  border-radius: 7px;
  font-size: 15px;
  background: #ffffff;
  color: #0f1e2e;
  font-variant-numeric: tabular-nums;
}

.charge-field select:focus,
.charge-field input:focus {
  outline: 2px solid #1ea6da;
  outline-offset: -1px;
  border-color: transparent;
}

.charge-tender-remove {
  background: transparent;
  border: 1px solid #d6dde4;
  color: #b91c1c;
  font-size: 18px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  cursor: pointer;
}

.charge-tender-remove:hover { background: #fef2f2; border-color: #fca5a5; }

.charge-tender-extras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.charge-tender-extras > .charge-field {
  max-width: none;
}

.charge-tender-change {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  width: 100%;
  color: #5b6b7e;
  font-size: 15px;
  font-weight: 650;
}

.charge-tender-change span {
  text-align: right;
}

.charge-tender-change strong {
  width: fit-content;
  min-width: 94px;
  color: #5b6b7e;
  background: #f3f6f9;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.charge-tender-change.is-active {
  color: #166534;
}

.charge-tender-change.is-active strong {
  color: #14532d;
  background: #dcfce7;
}

.charge-tender-note {
  font-size: 12.5px;
  color: #5b6b7e;
  background: #f3f6f9;
  border-radius: 7px;
  padding: 8px 10px;
  line-height: 1.45;
  margin-left: calc(180px + 18px);
}

.charge-tender-note.is-warn  { background: #fff7ed; color: #9a3412; }
.charge-tender-note.is-error { background: #fee2e2; color: #991b1b; }

.charge-tender-note strong { color: inherit; font-weight: 700; }

.charge-tender-terminal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.charge-terminal-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.charge-terminal-controls .charge-field-terminal {
  width: 100%;
}

.charge-terminal-route {
  width: fit-content;
  margin-left: calc(180px + 18px);
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
  background: var(--cp-accent-soft, #e6f4fa);
  color: var(--cp-accent-hover, #087eaa);
  font-size: 12px;
  font-weight: 700;
}

.charge-payment-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-left: calc(180px + 18px);
}

.charge-terminal-btn {
  margin-left: calc(180px + 18px);
  background: var(--cp-accent, #0797ca);
  color: var(--cp-accent-content, #ffffff);
  border: 0;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  width: fit-content;
  letter-spacing: 0;
}

.charge-terminal-btn:hover { background: var(--cp-accent-hover, #087eaa); }

.charge-cash-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-left: calc(180px + 18px);
}

.charge-cash-chip {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid #cbd2db;
  border-radius: 999px;
  background: #ffffff;
  color: #0f1e2e;
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.charge-cash-chip:hover {
  border-color: var(--cp-accent, #0797ca);
  color: var(--cp-accent-hover, #087eaa);
}

.charge-cash-chip.is-primary {
  border-color: var(--cp-accent, #0797ca);
  background: var(--cp-accent, #0797ca);
  color: var(--cp-accent-content, #ffffff);
}

.charge-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #eef1f5;
}

.charge-confirm-btn {
  background: var(--cp-accent, #0797ca);
  color: var(--cp-accent-content, #ffffff);
  border: 0;
  padding: 10px 18px;
  border-radius: var(--radius-md, 8px);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0;
  cursor: pointer;
}

.charge-confirm-btn:hover:not(:disabled) { background: var(--cp-accent-hover, #087eaa); }
.charge-confirm-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

@media (max-width: 540px) {
  .charge-summary { grid-template-columns: 1fr; }
  .charge-balance-row,
  .charge-field,
  .charge-tender-change {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .charge-balance-row span,
  .charge-field > span,
  .charge-tender-change span {
    text-align: left;
  }

  .charge-cash-chip-row,
  .charge-tender-note,
  .charge-payment-link-actions,
  .charge-terminal-route,
  .charge-terminal-btn {
    margin-left: 0;
  }

  .charge-tender-main { grid-template-columns: 1fr; }
  .charge-tender-remove { width: 100%; }
}

/* Create-form sidebar charge button (lives below Financials) */
.ticket-create-charge-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: #16a34a;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.18);
  transition: background 0.15s, transform 0.05s;
}

.ticket-create-charge-btn:hover { background: #15803d; }
.ticket-create-charge-btn:active { transform: translateY(1px); }
.ticket-create-charge-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
}

.ticket-create-charge-btn.ticket-payment-link-btn {
  background: #174ea6;
  box-shadow: 0 2px 4px rgba(23, 78, 166, 0.18);
}

.ticket-create-charge-btn.ticket-payment-link-btn:hover {
  background: #0f3f8f;
}

.ticket-create-charge-btn.ticket-create-payout-btn {
  background: #7c3aed;
  box-shadow: 0 2px 4px rgba(124, 58, 237, 0.18);
}

.ticket-create-charge-btn.ticket-create-payout-btn:hover { background: #6d28d9; }

/* Quick Sale create form — toolbar (catalog search + ticket-level discount) */
.quicksale-items-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.quicksale-items-toolbar .repair-fast-search {
  flex: 1;
  margin: 0;
  position: relative;
}
.quicksale-items-discount {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.quicksale-discount-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  margin-right: 4px;
}
.quicksale-items-discount input[type="number"] {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
}
.quicksale-items-discount select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
.quicksale-items-empty {
  padding: 22px 16px;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 10px;
}
.quicksale-items-empty.hidden { display: none; }
.special-order-custom-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 4px 0 10px;
}
.special-order-custom-wrap.hidden { display: none; }
.special-order-custom-toggle {
  align-self: flex-end;
  flex: 0 0 auto;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--text-xs, 12px);
  line-height: 1.1;
}
#special-order-custom-fields {
  align-self: stretch;
  width: 100%;
  margin-top: 10px;
}
#special-order-custom-fields.hidden { display: none; }
.special-order-custom-note-field { grid-column: 1 / -1; }
#special-order-custom-fields textarea {
  min-height: 72px;
  resize: vertical;
}
#special-order-add-custom-line {
  grid-column: 1 / -1;
  justify-self: end;
  width: auto;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--text-xs, 12px);
  line-height: 1.1;
}
@media (max-width: 640px) {
  .quicksale-items-toolbar { flex-direction: column; align-items: stretch; }
  .quicksale-items-discount { justify-content: space-between; }
}

/* Primary item grid: summary takes the wide column, qty/price/discount sit
   on the same row when there's room */
.ticket-fast-field-grid-primary {
  grid-template-columns: minmax(220px, 1.5fr) 80px 120px 140px;
}
.repair-fast-field-wide { grid-column: span 1; }
@media (max-width: 760px) {
  .ticket-fast-field-grid-primary { grid-template-columns: 1fr 1fr; }
  .repair-fast-field-wide { grid-column: span 2; }
}

/* "Más opciones" collapsible — hides Sale Type / Category / Fulfillment so
   the panel looks more like RepairQ's clean inventory row by default */
.quicksale-more-options {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  margin: 6px 0 10px 0;
}
.quicksale-more-options > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  color: #475569;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quicksale-more-options > summary::before {
  content: "▸";
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.15s;
}
.quicksale-more-options[open] > summary::before {
  transform: rotate(90deg);
}
.quicksale-more-options > summary::-webkit-details-marker { display: none; }
.quicksale-more-options[open] > summary { border-bottom: 1px solid #e2e8f0; }
.quicksale-more-options[open] { background: #ffffff; }
.quicksale-more-options > .ticket-fast-field-grid { padding: 12px 14px; }

/* Multi-item create form: "+ Agregar otro" button + extra item list */
.ticket-extra-items-wrap {
  margin: 10px 0 2px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticket-multi-device-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-multi-device-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ticket-multi-device-toolbar strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.ticket-multi-device-toolbar p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.ticket-multi-device-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ticket-multi-device-card {
  padding: 12px;
  border: 1px solid #dbe5f0;
  border-radius: 12px;
  background: #ffffff;
}

.ticket-multi-device-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ticket-multi-device-card-head strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.ticket-multi-device-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ticket-multi-device-grid input,
.ticket-multi-device-grid select {
  width: 100%;
  min-width: 0;
}

.ticket-multi-device-empty {
  padding: 12px 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12.5px;
}

.ticket-extra-add-btn {
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ticket-extra-add-btn:hover {
  background: #eff6ff;
  border-color: #16a34a;
  color: #166534;
}
.ticket-extra-add-btn-trade:hover {
  border-color: #7c3aed;
  color: #6d28d9;
  background: #f5f3ff;
}

/* "Order a part we don't carry" — custom back-order line on repair creation. */
.repair-create-order-custom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.repair-create-order-custom-panel {
  border: 1px solid #d5dee8;
  border-radius: 10px;
  background: #fbfdff;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.repair-create-order-custom-panel.hidden {
  display: none;
}
.repair-create-order-custom-hint {
  margin: 0;
  color: #5d6878;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}
.repair-create-order-custom-hint strong {
  color: #b45309;
  font-weight: 900;
}
.repair-create-order-custom-actions {
  display: flex;
  justify-content: flex-end;
}

.ticket-extra-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ticket-extra-items-list.hidden { display: none; }

.ticket-extra-item-row {
  display: grid;
  grid-template-columns: 1fr 70px 90px 80px 28px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.ticket-extra-item-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ticket-extra-item-main strong {
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-extra-item-main span {
  font-size: 11.5px;
  color: #64748b;
}
/* Quick Sale create — table-style line editor for Sale Details. */
.ticket-extra-lines-shell {
  border: 1px solid #d8e0ea;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}
.ticket-extra-lines-head,
.ticket-extra-item-row.ticket-extra-item-row-rich {
  display: grid;
  grid-template-columns: minmax(210px, 1.58fr) minmax(126px, 0.84fr) minmax(90px, 0.58fr) minmax(86px, 0.48fr) minmax(158px, 0.82fr) minmax(90px, 0.5fr) minmax(104px, 0.62fr) minmax(88px, 0.5fr) minmax(66px, 0.38fr);
  gap: 0;
  align-items: stretch;
}
.ticket-extra-lines-head {
  border-bottom: 1px solid #d8e0ea;
  background: #f3f6fa;
}
.ticket-extra-lines-head span {
  padding: 12px 14px;
  color: #667085;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.ticket-extra-lines-body {
  display: grid;
}
.ticket-extra-item-row.ticket-extra-item-row-rich {
  padding: 0;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  border-radius: 0;
  background: #ffffff;
}
.ticket-extra-item-row.ticket-extra-item-row-rich:last-child {
  border-bottom: 0;
}
.ticket-extra-item-row-rich.is-waived { background: #f7fbfa; }
.ticket-extra-line-cell {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid #edf2f7;
  display: flex;
  align-items: center;
}
.ticket-extra-item-row-rich .ticket-extra-line-cell:last-child {
  border-right: 0;
}
.ticket-extra-line-item {
  display: grid;
  gap: 4px;
  align-items: start;
}
.ticket-extra-line-item strong {
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.3;
}
.ticket-extra-line-item span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
}
.ticket-line-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.ticket-line-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-line-origin {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticket-line-origin-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.82;
}
.ticket-line-origin-inventory {
  color: #067ca7;
  background: rgba(7, 151, 202, 0.08);
  border-color: rgba(7, 151, 202, 0.22);
}
.ticket-line-origin-custom {
  color: #8a5a0a;
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.24);
}
.ticket-line-origin-row-inventory {
  box-shadow: inset 3px 0 0 rgba(7, 151, 202, 0.26);
}
.ticket-line-origin-row-custom {
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.30);
}
.ticket-extra-line-note,
.ticket-extra-line-price,
.ticket-extra-line-qty,
.ticket-extra-line-discount,
.ticket-extra-line-tax,
.ticket-extra-line-total,
.ticket-extra-line-status,
.ticket-extra-line-actions {
  justify-content: center;
}
.ticket-extra-line-discount,
.ticket-extra-line-tax {
  overflow: hidden;
}
.ticket-extra-line-qty {
  overflow: visible;
}
.ticket-extra-line-note {
  justify-content: stretch;
}
.ticket-extra-line-input,
.ticket-extra-line-select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
}
.ticket-extra-line-input {
  padding: 8px 10px;
}
.ticket-extra-line-input:focus,
.ticket-extra-line-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.ticket-extra-line-input:disabled,
.ticket-extra-line-select:disabled {
  background: #f1f3f6;
  color: #9aa3af;
}
.ticket-extra-line-input-qty,
.ticket-extra-line-input-money {
  text-align: right;
}
.ticket-extra-line-input-qty {
  min-width: 70px;
  padding-left: 8px;
  padding-right: 24px;
  text-align: center;
}
.ticket-extra-line-note-input {
  max-width: none;
}
.ticket-extra-price-chip {
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid #d7e5f0;
  border-radius: 4px;
  background: #f8fbfd;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
}
.ticket-extra-price-chip span {
  font-size: 10px;
  color: #64748b;
  font-weight: 900;
  text-transform: uppercase;
}
.ticket-extra-price-chip strong {
  font-size: 14px;
  color: #0f172a;
}
.ticket-extra-discount-control {
  width: 100%;
  max-width: calc(var(--space-10) + var(--space-10) + var(--space-10) + var(--space-3));
  min-width: 0;
  min-height: var(--space-10);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--space-10) + var(--space-1));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.ticket-extra-discount-control:focus-within {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}
.ticket-extra-discount-control:has(:disabled) {
  background: var(--surface-3);
}
.ticket-extra-discount-control :is(.ticket-extra-line-input, .ticket-extra-line-select, .sale-item-input) {
  width: 100%;
  min-width: 0;
  min-height: var(--space-10);
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ticket-extra-discount-control :is(.ticket-extra-line-input, .ticket-extra-line-select, .sale-item-input):focus {
  outline: 0;
  border: 0;
  box-shadow: none;
}
.ticket-extra-discount-control .ticket-extra-line-select {
  border-left: 1px solid var(--border-1);
  padding-inline: var(--space-2);
}
.ticket-extra-discount-control input[type="number"] {
  appearance: textfield;
  padding-inline: var(--space-2);
  text-align: right;
}
.ticket-extra-discount-control input[type="number"]::-webkit-inner-spin-button,
.ticket-extra-discount-control input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}
.ticket-extra-line-select {
  padding: 0 6px;
}
.sale-status-badge-static {
  cursor: default;
  pointer-events: none;
}
.ticket-extra-line-total strong {
  font-size: 18px;
  color: #0f172a;
  font-weight: 900;
}
.ticket-extra-line-tax strong {
  font-size: 14px;
  color: #334155;
  font-weight: 800;
}
.ticket-extra-line-actions {
  gap: 8px;
}
.ticket-extra-line-actions .sale-item-waive {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  border-radius: 4px;
  color: #0f7b6c;
  cursor: pointer;
}
.ticket-extra-line-actions .sale-item-waive:hover { background: #f0f3f7; }
.ticket-extra-line-actions .sale-item-waive.is-waived { color: #fff; background: #0f9d8f; }
.ticket-extra-line-actions .sale-item-waive svg { stroke: currentColor; fill: none; stroke-width: 2; }
.ticket-extra-line-remove {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: #fff5f5;
  color: #dc2626;
  font-size: 23px;
  line-height: 1;
}
.ticket-extra-line-remove:hover { background: #fee2e2; }

.ticket-extra-item-qty {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ticket-extra-item-qty span {
  font-size: 10.5px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ticket-extra-item-qty input {
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  text-align: right;
}
.ticket-extra-item-price-locked {
  min-height: 46px;
  padding: 5px 6px;
  border: 1px solid #d7e5f0;
  border-radius: 6px;
  background: #f8fbfd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}
.ticket-extra-item-price-locked span {
  font-size: 10.5px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ticket-extra-item-price-locked strong {
  font-size: 12.5px;
  color: #0f172a;
}
.field-hint {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.3;
}
input.readonly,
input[readonly] {
  background: #f8fafc;
  color: #475569;
}

.ticket-extra-item-total {
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
  text-align: right;
}

.ticket-extra-item-remove {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ticket-extra-item-remove:hover { background: #fee2e2; }

@media (max-width: 640px) {
  .ticket-extra-item-row {
    grid-template-columns: 1fr 60px 75px;
    grid-template-areas:
      "main main main"
      "qty price total"
      "remove . .";
  }
  .ticket-extra-item-main { grid-area: main; }
  .ticket-extra-item-qty:nth-of-type(1) { grid-area: qty; }
  .ticket-extra-item-qty:nth-of-type(2) { grid-area: price; }
  .ticket-extra-item-total { grid-area: total; }
  .ticket-extra-item-remove { grid-area: remove; }
  .ticket-multi-device-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .ticket-extra-lines-head,
  .ticket-extra-item-row.ticket-extra-item-row-rich {
    grid-template-columns: minmax(178px, 1.34fr) minmax(112px, 0.74fr) minmax(82px, 0.52fr) minmax(78px, 0.44fr) minmax(146px, 0.72fr) minmax(82px, 0.44fr) minmax(94px, 0.54fr) minmax(80px, 0.44fr) minmax(60px, 0.34fr);
  }
  .ticket-extra-line-cell {
    padding: 12px 10px;
  }
}

@media (max-width: 920px) {
  .ticket-extra-lines-head {
    display: none;
  }
  .ticket-extra-item-row.ticket-extra-item-row-rich {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ticket-extra-line-item,
  .ticket-extra-line-note {
    grid-column: 1 / -1;
  }
  .ticket-extra-line-cell {
    border-right: 0;
    border-bottom: 1px solid #edf2f7;
  }
  .ticket-extra-item-row-rich .ticket-extra-line-cell:last-child {
    border-bottom: 0;
  }
}

/* Exchange / Cambio modal on Quick Sale detail */
.sale-exchange-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.14) !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}
.sale-exchange-btn:hover {
  background: rgba(15, 23, 42, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
}

.sale-exchange-panel {
  width: min(760px, 96vw) !important;
}

.sale-exchange-title-wrap {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sale-exchange-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.sale-exchange-subtitle {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.sale-exchange-section {
  margin-bottom: 16px;
  display: grid;
  gap: 10px;
}
.sale-exchange-step {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  margin-bottom: 8px;
}

.sale-exchange-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.sale-exchange-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d8e1eb;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.sale-exchange-option:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.sale-exchange-option.is-selected {
  border-color: #0f766e;
  background: #f0fdfa;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.15);
}
.sale-exchange-option input[type="radio"] {
  margin: 0;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  appearance: auto;
  -webkit-appearance: radio;
  -moz-appearance: radio;
  accent-color: #0f766e;
  justify-self: center;
}
.sale-exchange-option-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  gap: 4px;
  overflow: hidden;
}
.sale-exchange-option-body strong {
  display: block;
  font-size: 13.5px;
  color: #0f172a !important;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.sale-exchange-option-body span {
  display: block;
  font-size: 12px;
  color: #64748b !important;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.sale-exchange-option-body span strong {
  display: inline;
  color: #0f172a !important;
  font-weight: 700;
}

.sale-exchange-new-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #14b8a6;
  background: #f0fdfa;
  border-radius: 10px;
}
.sale-exchange-new-card > div:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sale-exchange-new-card strong {
  font-size: 14px;
  color: #14532d;
}
.sale-exchange-new-card span {
  font-size: 12px;
  color: #0f766e;
}
.sale-exchange-new-price {
  font-weight: 700;
  font-size: 16px;
  color: #115e59;
}
#sale-exchange-clear-new {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  color: #0f766e;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.sale-exchange-section #sale-exchange-pick-new {
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
}

.sale-exchange-diff {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sale-exchange-diff > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
}
.sale-exchange-diff > div > span { color: #64748b; }
.sale-exchange-diff > div > strong { color: #0f172a; }
.sale-exchange-diff-row {
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
  margin-top: 4px;
  font-size: 15px !important;
}
.sale-exchange-diff-row.is-charge > span { color: #166534; font-weight: 700; }
.sale-exchange-diff-row.is-charge > strong { color: #14532d; font-size: 17px; }
.sale-exchange-diff-row.is-refund > span { color: #b91c1c; font-weight: 700; }
.sale-exchange-diff-row.is-refund > strong { color: #991b1b; font-size: 17px; }
.sale-exchange-diff-row.is-even > span { color: #475569; font-weight: 700; }
.sale-exchange-diff-row.is-even > strong { color: #0f172a; font-size: 17px; }

@media (max-width: 720px) {
  .sale-exchange-panel {
    width: min(96vw, 96vw) !important;
  }

  .sale-exchange-new-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #sale-exchange-clear-new {
    grid-column: 2;
    justify-self: end;
  }
}

/* Manager PIN modal — gates refund/void actions */
.manager-pin-panel { text-align: left; }
.manager-pin-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
.manager-pin-reason {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.manager-pin-instruction {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}
.manager-pin-instruction strong { color: #0f172a; }
.manager-pin-field {
  display: grid;
  gap: var(--space-2);
}
.manager-pin-field label {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: 700;
}
.manager-pin-field label span { color: var(--cp-danger); }
.manager-pin-reason-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  line-height: 1.45;
}
.manager-pin-reason-input:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 18%, transparent);
  outline: none;
}
#reports-page .report-table td.report-discount-reason {
  min-width: 220px !important;
  height: auto;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.35;
}
.manager-pin-input {
  width: 100%;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.6em;
  text-align: center;
  padding: 14px 12px;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  font-family: "SF Mono", Menlo, monospace;
  color: #0f172a;
  background: #ffffff;
}
.manager-pin-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.manager-pin-status {
  min-height: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}
.manager-pin-status-error { color: #b91c1c; }
.manager-pin-status-ok { color: #166534; }

/* Consequence-first ticket status confirmation + admin-control reveal */
.action-confirm-panel {
  width: min(480px, calc(100vw - var(--space-6)));
  text-align: left;
}

.action-confirm-panel .inv-form-header > div {
  display: grid;
  gap: var(--space-1);
}

.action-confirm-eyebrow {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.action-confirm-body {
  display: grid;
  gap: var(--space-3);
}

.action-confirm-label {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.action-confirm-message {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.action-confirm-admin-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 42%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.ticket-admin-control-toggle {
  border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--border-2)) !important;
  background: var(--surface) !important;
  color: var(--content-1) !important;
}

.ticket-admin-status-control {
  border: 1px solid color-mix(in srgb, var(--cp-warning) 58%, var(--border-2)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-warning) 14%, transparent);
}

.ticket-admin-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 52%, var(--border-1));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

.ticket-admin-status-control .ticket-admin-badge {
  margin-left: var(--space-1);
}

/* Read-only ticket workflow guide */
.ticket-flow-guide-overlay {
  z-index: var(--z-modal);
}

.ticket-flow-guide-trigger {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 30px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--content-inv) 45%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--content-inv) 8%, transparent);
  color: var(--content-inv);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    color var(--dur-fast);
}

.ticket-flow-guide-trigger:hover {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 22%, transparent);
}

.ticket-flow-guide-trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ticket-flow-guide-trigger svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.repair-ticket-title > .ticket-flow-guide-trigger {
  order: 3;
}

.ticket-flow-guide-panel {
  width: min(720px, calc(100vw - var(--space-6)));
  max-height: min(88vh, 900px);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

.ticket-flow-guide-header {
  gap: var(--space-3);
  border-color: var(--border-1);
  background: var(--surface);
}

.ticket-flow-guide-heading {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.ticket-flow-guide-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.ticket-flow-guide-language {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 2px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.ticket-flow-guide-language button {
  min-width: 36px;
  min-height: 28px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--content-2);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.ticket-flow-guide-language button:hover {
  color: var(--content-1);
}

.ticket-flow-guide-language button.active {
  background: var(--cp-accent);
  color: var(--content-inv);
  box-shadow: var(--shadow-sm);
}

.ticket-flow-guide-language button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ticket-flow-guide-header .inv-form-title {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.ticket-flow-guide-body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-2);
  overscroll-behavior: contain;
}

.ticket-flow-guide-section {
  display: grid;
  gap: var(--space-3);
}

.ticket-flow-guide-section h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.ticket-flow-guide-section-heading {
  display: grid;
  gap: var(--space-1);
}

.ticket-flow-guide-section-heading > span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.ticket-flow-guide-stepper {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-flow-guide-stage {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 0 0 var(--space-3);
}

.ticket-flow-guide-stage:last-child {
  padding-bottom: 0;
}

.ticket-flow-guide-stage::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -2px;
  left: 9px;
  width: 2px;
  background: var(--border-2);
}

.ticket-flow-guide-stage:last-child::after {
  display: none;
}

.ticket-flow-guide-node {
  position: relative;
  z-index: var(--z-base);
  width: 18px;
  height: 18px;
  margin-top: var(--space-3);
  border: 4px solid var(--surface);
  border-radius: var(--radius-circle);
  background: var(--cp-accent);
  box-shadow: 0 0 0 1px var(--border-2);
}

.ticket-flow-guide-stage-manual .ticket-flow-guide-node {
  background: var(--cp-warning);
}

.ticket-flow-guide-stage-card,
.ticket-flow-guide-action {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ticket-flow-guide-stage-head,
.ticket-flow-guide-action-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ticket-flow-guide-stage-head > strong,
.ticket-flow-guide-action-head > strong,
.ticket-flow-guide-admin-item > div > strong {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.ticket-flow-guide-kind,
.ticket-flow-guide-action-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.ticket-flow-guide-kind-start,
.ticket-flow-guide-kind-automatic {
  border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--content-1);
}

.ticket-flow-guide-kind-manual {
  border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
}

.ticket-flow-guide-kind-end,
.ticket-flow-guide-action-head > span {
  background: var(--surface-3);
  color: var(--content-2);
}

.ticket-flow-guide-fact {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.ticket-flow-guide-fact strong {
  color: var(--content-1);
}

.ticket-flow-guide-stage-card p,
.ticket-flow-guide-action p,
.ticket-flow-guide-admin-item p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.ticket-flow-guide-actions {
  display: grid;
  gap: var(--space-3);
}

.ticket-flow-guide-admin-section {
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--cp-warning) 35%, var(--border-1));
}

.ticket-flow-guide-admin-item {
  align-items: flex-start;
}

.ticket-flow-guide-admin-item > div {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.ticket-flow-guide-loading,
.ticket-flow-guide-error {
  min-height: 180px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  color: var(--content-2);
  text-align: center;
}

.ticket-flow-guide-error > strong {
  color: var(--content-1);
  font-size: var(--text-lg);
}

@media (max-width: 640px) {
  .ticket-flow-guide-overlay {
    align-items: flex-end;
  }

  .ticket-flow-guide-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .ticket-flow-guide-body {
    padding: var(--space-4);
  }

  .ticket-flow-guide-trigger > span {
    display: none;
  }

  .ticket-flow-guide-trigger {
    width: 32px;
    padding: var(--space-1);
    border-radius: var(--radius-circle);
  }
}

#cash-payin-reason-preset,
#cash-payout-reason-preset {
  width: 100%;
  margin-bottom: 6px;
}

.cash-close-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #f6f9fc;
  border: 1px solid #e2eaf2;
  border-radius: 8px;
  margin-bottom: 12px;
}

.cash-close-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: #46556a;
}

.cash-close-summary-row strong {
  color: #0f1e2e;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.cash-close-summary-diff strong { font-size: 16px; }
.cash-close-summary-diff.is-positive strong { color: #15803d; }
.cash-close-summary-diff.is-negative strong { color: #b91c1c; }

/* ============================================================
 * Register Chip (topbar) + Picker Modal
 * ============================================================ */

.register-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.register-chip:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
}

.register-chip.hidden { display: none; }

/* Drawer CLOSED → red chip. Drawer open keeps the default green above. */
.register-chip.is-closed {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}
.register-chip.is-closed:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
}
.register-chip.is-closed .register-chip-dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.register-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.register-chip-label {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
}

.register-chip-name {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- Picker modal --- */

.register-picker-panel {
  width: min(560px, calc(100vw - 32px));
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 30, 46, 0.25);
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.register-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.register-picker-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f1e2e;
  line-height: 1.3;
}

.register-picker-hint {
  margin: 0;
  font-size: 13.5px;
  color: #5b6b7e;
  line-height: 1.5;
}

.register-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .register-picker-grid { grid-template-columns: 1fr; }
}

.register-picker-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px;
  border: 2px solid #e1e7ee;
  border-radius: 11px;
  background: #f7f9fc;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
  position: relative;
}

.register-picker-card:hover {
  border-color: #1ea6da;
  background: #ffffff;
  transform: translateY(-1px);
}

.register-picker-card.is-current {
  border-color: #1ea6da;
  background: #e0f1fa;
}

.register-picker-num {
  font-size: 28px;
  font-weight: 700;
  color: #0a5cc4;
  line-height: 1;
}

.register-picker-label {
  font-size: 14px;
  font-weight: 600;
  color: #0f1e2e;
  letter-spacing: 0.01em;
}

.register-picker-current-tag {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #075174;
  background: rgba(7, 81, 116, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
}

.register-picker-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

.register-picker-skip {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: 12.5px;
  color: #5b6b7e;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 500;
}

.register-picker-skip:hover {
  background: #f1f5f9;
  color: #0f1e2e;
}

/* ───────────────────────────────────────────────────────────────────────────
   My Work page (per-user tasks + admin task assignment console).
   Matches the dashboard panel style (white card, slate borders, soft shadow).
   ─────────────────────────────────────────────────────────────────────────── */
.my-work-shell .repair-panel {
  margin-bottom: 18px;
}
.my-work-shell {
  align-items: start;
}
.my-work-shell > .dashboard-left {
  min-width: 0;
}
.my-work-chat-side {
  min-width: 360px;
}
.my-work-admin-bottom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 18px;
  align-items: start;
}
.my-work-admin-bottom #my-work-admin-list-panel {
  grid-column: 1 / -1;
}
.my-work-admin-bottom #my-work-admin-list-panel .repair-panel-body {
  min-height: 360px;
}
.my-work-admin-bottom #my-work-admin-list {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.my-work-subtitle {
  margin-left: auto;
  font-weight: 400;
  font-size: 13px;
  color: #6b7280;
}
.my-work-section-title {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#my-work-tickets-group .my-work-section-title { margin-top: 10px; }

/* Collapsible My Work sections — native <details>/<summary> with a rotating
   ▸ chevron, mirroring the "Más opciones" quick-sale collapsible. The open/
   closed choice is persisted per worker in initMyWorkCollapsibles(). */
.my-work-section { margin: 0; }
.my-work-section > summary.my-work-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.my-work-section > summary.my-work-section-title:hover { color: #1e293b; }
.my-work-section > summary.my-work-section-title::-webkit-details-marker { display: none; }
.my-work-section > summary.my-work-section-title::before {
  content: "▸";
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0;
  transition: transform 0.15s ease;
}
.my-work-section[open] > summary.my-work-section-title::before { transform: rotate(90deg); }
/* Children set their own `display` (e.g. .my-work-list is grid), which would
   override the UA rule that hides a closed <details> body. Re-assert the
   collapse explicitly so closing a section actually hides its content. */
.my-work-section:not([open]) > :not(summary) { display: none; }
.my-work-list {
  display: grid;
  gap: 10px;
}
.my-work-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.my-work-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.my-work-card-ticket {
  border-left: 3px solid #008ed0;
}
.my-work-card-department-ticket {
  border-left: 3px solid #7c3aed;
  background: #fbfbff;
}
.my-work-card-available-repair {
  border-left: 4px solid #0ea5e9;
  background: #f0f9ff;
}
.my-work-card-task {
  border-left: 4px solid #8ecae6;
  background: #f2fbff;
}
.my-work-card-overdue {
  border-left-color: #f97316;
  background: #fff7ed;
}
.my-work-card-message {
  border-left: 3px solid #ef4444;
  background: #fffdfd;
}
.my-work-card-history {
  background: #ffffff;
  opacity: 0.92;
}
.my-work-history-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.my-work-history-actions .btn {
  min-width: 140px;
}
.my-work-card-unassigned {
  border-left: 3px solid #f59e0b;
  background: #fffbf5;
}
.my-work-tag-unassigned {
  background: #fef3c7;
  color: #92400e;
}
.my-work-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.my-work-card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #0f172a;
  flex: 1 1 auto;
  min-width: 0;
}
.my-work-card-desc {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}
.my-work-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #6b7280;
}
.my-work-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.my-work-card-actions .btn {
  padding: 6px 12px;
  font-size: 12.5px;
  min-height: 30px;
}

.my-work-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  color: #475569;
}
.my-work-tag-sales { background: #ecfdf5; color: #047857; }
.my-work-tag-inventory { background: #eff6ff; color: #1d4ed8; }
.my-work-tag-technician { background: #fdf4ff; color: #a21caf; }
.my-work-tag-support { background: #f5f3ff; color: #6d28d9; }
.my-work-tag-general { background: #f1f5f9; color: #475569; }
.my-work-tag-message { background: #fee2e2; color: #b91c1c; }
.my-work-card-task .my-work-tag,
.my-work-admin-row .my-work-tag {
  background: #e9f6fb;
  color: #07566b;
}

.my-work-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.my-work-status-pending { background: #fef3c7; color: #92400e; }
.my-work-status-in_progress { background: #dbeafe; color: #1d4ed8; }
.my-work-status-done { background: #dcfce7; color: #166534; }
.my-work-status-cancelled { background: #fee2e2; color: #991b1b; }
.my-work-status-workshop { background: #e0f2fe; color: #0369a1; }
.my-work-status-intake,
.my-work-status-photos,
.my-work-status-completed,
.my-work-status-inspection,
.my-work-status-waiting_for_payment { background: #fee2e2; color: #b91c1c; }
.my-work-status-in_repair { background: #dbeafe; color: #1d4ed8; }
.my-work-status-order_parts,
.my-work-status-waiting_parts,
.my-work-status-special_order,
.my-work-status-ordered,
.my-work-status-pending_refurbishment,
.my-work-status-ready_to_stock { background: #dcfce7; color: #166534; }
.my-work-status-hold,
.my-work-status-ready_for_pickup { background: #ede9fe; color: #6d28d9; }
.my-work-status-closed,
.my-work-status-void { background: #fae8ff; color: #86198f; }

.my-work-priority {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
}
.my-work-priority-high { background: #fee2e2; color: #991b1b; }
.my-work-priority-low { background: #e0f2fe; color: #075985; }
.my-work-message-unread {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.my-work-message-read {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Admin form (right sidebar) */
.my-work-form {
  display: grid;
  gap: 12px;
}
.my-work-form-hint {
  margin: -2px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.my-work-form .field label {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}
.my-work-form .field input,
.my-work-form .field textarea,
.my-work-form .field select {
  width: 100%;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  background: #ffffff;
  color: #0f172a;
  font-family: inherit;
}
.my-work-form .field textarea { resize: vertical; }
.my-work-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.my-work-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.my-work-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #334155;
  font-weight: 600;
}
.my-work-inline-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.my-work-recurring-fields {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}
.my-work-recurring-slots {
  display: grid;
  gap: 8px;
}
.my-work-recurring-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.my-work-recurring-slot .btn {
  min-height: 38px;
}
.my-work-add-slot-btn {
  justify-self: flex-start;
}

/* Admin "All tasks" list */
.my-work-admin-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.my-work-admin-filters select {
  width: 100%;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12.5px;
  background: #ffffff;
  color: #0f172a;
}
.my-work-admin-list {
  display: grid;
  gap: 8px;
}
.my-work-admin-row {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #8ecae6;
  border-radius: 6px;
  padding: 10px 12px;
  background: #ffffff;
  display: grid;
  gap: 6px;
}
.my-work-admin-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.my-work-admin-row-main strong {
  font-size: 13px;
  color: #0f172a;
}
.my-work-admin-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: #6b7280;
}
.my-work-admin-row-actions { display: flex; gap: 6px; }
.my-work-admin-row-actions .btn { padding: 4px 10px; font-size: 11.5px; min-height: 26px; }
.my-work-admin-row-note {
  font-size: 11.5px;
  color: #475569;
}

.my-work-chat-panel {
  margin: 0 0 18px;
  border: 1px solid #dbe6ef;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(33, 158, 188, 0.10), rgba(255, 183, 3, 0.08)),
    #ffffff;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.my-work-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #dbe6ef;
  background: rgba(255, 255, 255, 0.78);
}

.my-work-chat-title {
  display: block;
  margin: 0 0 4px;
}

.my-work-chat-header p {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
}

.my-work-chat-popup-note {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.my-work-chat-shell {
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  min-height: 520px;
}

.my-work-chat-contacts {
  border-right: 1px solid #dbe6ef;
  background: rgba(248, 250, 252, 0.92);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.my-work-chat-search {
  padding: 12px;
}

.my-work-chat-search input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 13px;
  background: #ffffff;
}

.my-work-chat-contact-list {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 0 8px 10px;
  max-height: 420px;
}

.my-work-chat-contact {
  border: 0;
  border-radius: 12px;
  background: transparent;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.my-work-chat-contact:hover,
.my-work-chat-contact.is-active {
  background: #e0f2fe;
}

.my-work-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #023047;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.my-work-chat-contact-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.my-work-chat-contact-main strong {
  min-width: 0;
  white-space: nowrap;
  color: #0f172a;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.my-work-chat-contact-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-contact-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 12px;
}

.my-work-chat-unread {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #fb8500;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.my-work-chat-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.my-work-chat-avatar.is-department {
  background: linear-gradient(135deg, #023047, #219ebc);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.my-work-chat-today {
  flex: 0 0 auto;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.my-work-chat-show-all {
  margin: 0 12px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #075985;
  min-height: 32px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.my-work-chat-show-all:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.my-work-chat-thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(142, 202, 230, 0.24), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(255, 183, 3, 0.18), transparent 22%),
    #f8fafc;
}

.my-work-chat-thread-head {
  min-height: 66px;
  border-bottom: 1px solid #dbe6ef;
  background: rgba(255, 255, 255, 0.84);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-work-chat-thread-head strong {
  display: block;
  color: #0f172a;
  font-size: 14.5px;
}

.my-work-chat-thread-head span span,
.my-work-chat-thread-head em {
  display: block;
  font-style: normal;
  color: #64748b;
  font-size: 12px;
}

.my-work-chat-messages {
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-work-chat-empty {
  margin: auto;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}

.my-work-chat-bubble {
  max-width: min(76%, 620px);
  border: 1px solid #dbe6ef;
  border-radius: 16px;
  padding: 10px 12px 8px;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.my-work-chat-bubble.is-mine {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: #d9f99d;
  border-color: #bef264;
}

.my-work-chat-bubble.is-theirs {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: #ffffff;
}

.my-work-chat-bubble.is-urgent {
  box-shadow: 0 8px 20px rgba(251, 133, 0, 0.14);
  border-color: #fdba74;
}

.my-work-chat-bubble div {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13.5px;
  line-height: 1.45;
}

.my-work-chat-bubble footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 5px;
  font-size: 10.5px;
  color: #64748b;
}

.my-work-chat-form {
  border-top: 1px solid #dbe6ef;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.my-work-chat-form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  resize: none;
  background: #ffffff;
}

.my-work-chat-form-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.my-work-chat-popup-wrap {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .my-work-shell {
    grid-template-columns: 1fr;
  }
  .my-work-chat-side {
    min-width: 0;
  }
  .my-work-admin-bottom {
    grid-template-columns: 1fr;
  }
  .my-work-admin-bottom #my-work-admin-list-panel {
    grid-column: auto;
  }
  .my-work-form-row { grid-template-columns: 1fr; }
  .my-work-recurring-slot { grid-template-columns: 1fr; }
  .my-work-admin-filters { grid-template-columns: 1fr; }
  .my-work-strip { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .my-work-chat-shell { grid-template-columns: 1fr; }
  .my-work-chat-contacts {
    border-right: 0;
    border-bottom: 1px solid #dbe6ef;
    max-height: 240px;
  }
  .my-work-chat-form { grid-template-columns: 1fr; }
  .my-work-chat-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* My Work command center redesign */
#my-work-page {
  width: min(1680px, calc(100% - 40px));
  max-width: 1680px;
}

.my-work-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 22px;
  align-items: start;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 183, 3, 0.20), transparent 28%),
    radial-gradient(circle at 94% 8%, rgba(33, 158, 188, 0.20), transparent 30%),
    linear-gradient(135deg, #f8fbfd 0%, #eef5f8 54%, #fbfaf4 100%);
  box-shadow: 0 28px 80px rgba(2, 48, 71, 0.14);
}

.my-work-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 20px;
  align-items: stretch;
  padding: 26px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 18%, rgba(142, 202, 230, 0.22), transparent 34%),
    linear-gradient(135deg, #023047 0%, #06283d 58%, #0b1f2f 100%);
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 48, 71, 0.24);
  overflow: hidden;
  position: relative;
}

.my-work-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 183, 3, 0.20);
  filter: blur(1px);
}

.my-work-hero-copy,
.my-work-hero-card {
  position: relative;
  z-index: 1;
}

.my-work-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(142, 202, 230, 0.16);
  color: #8ecae6;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.my-work-hero h1 {
  margin: 12px 0 8px;
  color: #ffffff;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.my-work-subtitle {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14.5px;
  line-height: 1.55;
}

.my-work-hero-card {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(142, 202, 230, 0.28);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(12px);
}

.my-work-hero-card span {
  width: max-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(255, 183, 3, 0.18);
  color: #ffcf54;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.my-work-hero-card strong {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.my-work-hero-card small {
  color: rgba(255, 255, 255, 0.70);
  font-size: 13px;
  line-height: 1.45;
}

.my-work-shell > .dashboard-left,
.my-work-chat-side {
  min-width: 0;
}

.my-work-board-panel,
.my-work-chat-panel,
.my-work-admin-bottom .repair-panel {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

.my-work-board-panel {
  margin-bottom: 0;
}

.my-work-board-panel .repair-panel-title,
.my-work-admin-bottom .repair-panel-title {
  min-height: 64px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(135deg, rgba(2, 48, 71, 0.94), rgba(2, 48, 71, 0.84)),
    #023047;
  color: #ffffff;
}

.my-work-board-panel .repair-panel-title svg,
.my-work-admin-bottom .repair-panel-title svg {
  stroke: #8ecae6;
}

.my-work-board-panel .repair-panel-body,
.my-work-admin-bottom .repair-panel-body {
  padding: 18px 22px 22px;
}

.my-work-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.my-work-strip > div {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(142, 202, 230, 0.18)),
    #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.my-work-strip > div:nth-child(2) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(142, 202, 230, 0.30)),
    #ffffff;
}

.my-work-strip > div:nth-child(3) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 133, 0, 0.16)),
    #ffffff;
}

.my-work-strip > div:nth-child(5),
.my-work-strip > div:nth-child(7) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(33, 158, 188, 0.18)),
    #ffffff;
}

.my-work-strip .daily-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.my-work-strip strong {
  color: #023047;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.my-work-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.my-work-section {
  min-height: 94px;
  margin: 0;
  padding: 0 14px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.my-work-section > summary.my-work-section-title {
  min-height: 58px;
  margin: 0;
  color: #123047;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.075em;
}

.my-work-section > summary.my-work-section-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #219ebc;
  border-bottom: 2px solid #219ebc;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.my-work-section[open] > summary.my-work-section-title::before {
  transform: rotate(45deg);
}

.my-work-section > summary.my-work-section-title:hover {
  color: #023047;
}

.my-work-list {
  max-height: 372px;
  overflow: auto;
  padding-right: 4px;
}

#my-work-history-group {
  grid-column: 1 / -1;
}

.my-work-card {
  border-radius: 16px;
  padding: 14px;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.my-work-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
}

.my-work-card-task {
  border-left-color: #8ecae6;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(142, 202, 230, 0.20)),
    #ffffff;
}

.my-work-card-available-repair,
.my-work-card-ticket {
  border-left-color: #fb8500;
}

.my-work-card-department-ticket {
  border-left-color: #219ebc;
}

.my-work-card-unassigned {
  border-left-color: #ffb703;
}

.my-work-card-message {
  border-left-color: #023047;
}

.my-work-rolling-count-card {
  max-width: min(620px, 94vw);
}

.my-work-rolling-count-list {
  display: grid;
  gap: 10px;
}

.my-work-rolling-count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
}

.my-work-rolling-count-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.my-work-rolling-count-main strong {
  color: #111827;
  font-size: 0.92rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.my-work-rolling-count-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #6b7280;
  font-size: 0.78rem;
}

.my-work-rolling-count-meta span {
  min-width: 0;
}

.my-work-rolling-count-row input {
  width: 92px;
  min-height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 7px 9px;
  font: inherit;
  text-align: right;
}

.my-work-rolling-count-row input:focus {
  outline: none;
  border-color: #1971c2;
  box-shadow: 0 0 0 2px rgba(25, 113, 194, 0.18);
}

.my-work-chat-side {
  min-width: 420px;
  align-self: start;
  position: static;
}

.my-work-chat-panel {
  margin: 0;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
    #ffffff;
}

.my-work-chat-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(142, 202, 230, 0.24);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 183, 3, 0.22), transparent 36%),
    linear-gradient(135deg, #023047 0%, #06283d 100%);
  color: #ffffff;
}

.my-work-chat-title {
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0.10em;
}

.my-work-chat-header p {
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.45;
}

.my-work-chat-popup-note {
  border-color: rgba(255, 183, 3, 0.55);
  background: rgba(255, 183, 3, 0.16);
  color: #ffe08a;
}

.my-work-chat-shell {
  grid-template-columns: minmax(166px, 208px) minmax(0, 1fr);
  min-height: 640px;
}

.my-work-chat-contacts {
  border-right-color: rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.92);
}

.my-work-chat-search {
  padding: 14px 12px 10px;
}

.my-work-chat-search input {
  border-color: rgba(148, 163, 184, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.my-work-chat-contact-list {
  max-height: 468px;
}

.my-work-chat-contact {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 8px;
  border-radius: 14px;
}

.my-work-chat-contact:hover,
.my-work-chat-contact.is-active {
  background: rgba(142, 202, 230, 0.28);
}

.my-work-chat-avatar {
  width: 36px;
  height: 36px;
  background: #023047;
}

.my-work-chat-avatar.is-department {
  background: linear-gradient(135deg, #023047, #219ebc);
}

.my-work-chat-thread {
  background:
    linear-gradient(135deg, rgba(142, 202, 230, 0.12), transparent 38%),
    radial-gradient(circle at 92% 6%, rgba(255, 183, 3, 0.15), transparent 24%),
    #f8fafc;
}

.my-work-chat-thread-head {
  min-height: 70px;
  border-bottom-color: rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.90);
}

.my-work-chat-messages {
  padding: 20px;
}

.my-work-chat-bubble {
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.my-work-chat-bubble.is-mine {
  background: #023047;
  border-color: #023047;
  color: #ffffff;
}

.my-work-chat-bubble.is-mine footer {
  color: rgba(255, 255, 255, 0.66);
}

.my-work-chat-bubble.is-theirs {
  background: #ffffff;
}

.my-work-chat-form {
  background: rgba(255, 255, 255, 0.96);
}

.my-work-chat-form textarea {
  border-color: rgba(148, 163, 184, 0.36);
}

.my-work-admin-bottom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(380px, 1.18fr);
  gap: 18px;
  align-items: start;
}

.my-work-admin-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(2, 48, 71, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(2, 48, 71, 0.95), rgba(2, 48, 71, 0.82)),
    #023047;
  box-shadow: 0 18px 42px rgba(2, 48, 71, 0.16);
}

.my-work-admin-heading strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.my-work-admin-bottom #my-work-admin-panel {
  order: 1;
}

.my-work-admin-bottom #my-work-schedule-list-panel {
  order: 2;
}

.my-work-admin-bottom #my-work-admin-list-panel {
  order: 3;
  grid-column: 1 / -1;
}

.my-work-admin-bottom #my-work-admin-list-panel .repair-panel-body {
  min-height: 430px;
}

.my-work-admin-bottom #my-work-admin-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.my-work-admin-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.my-work-admin-filters select,
.my-work-form .field input,
.my-work-form .field textarea,
.my-work-form .field select {
  border-radius: 12px;
  border-color: rgba(148, 163, 184, 0.38);
}

.my-work-admin-row {
  border-radius: 16px;
  border-left-color: #8ecae6;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

@media (max-width: 1240px) {
  #my-work-page {
    width: min(100% - 24px, 1680px);
  }

  .my-work-shell {
    grid-template-columns: 1fr;
  }

  .my-work-chat-side {
    position: static;
    min-width: 0;
  }

  .my-work-chat-shell {
    min-height: 560px;
  }
}

@media (max-width: 820px) {
  #my-work-page {
    width: calc(100% - 16px);
  }

  .my-work-shell {
    padding: 14px;
    border-radius: 22px;
  }

  .my-work-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .my-work-strip,
  .my-work-lanes,
  .my-work-admin-bottom,
  .my-work-admin-filters {
    grid-template-columns: 1fr;
  }

  #my-work-history-group,
  .my-work-admin-heading,
  .my-work-admin-bottom #my-work-admin-list-panel {
    grid-column: auto;
  }

  .my-work-chat-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .my-work-chat-contacts {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    max-height: 250px;
  }

  .my-work-chat-form {
    grid-template-columns: 1fr;
  }

  .my-work-chat-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* ===========================================================================
   Authoritative data-workspace contract

   These list views share one control geometry and the Customers table header
   treatment. Older page-specific rules intentionally remain for legacy
   screens, while these current workspaces opt into one predictable contract
   at normal size, browser zoom and tablet widths.
   ========================================================================== */
.cp :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-right-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  min-width: max-content;
  max-width: 100%;
  margin-left: auto;
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav {
  display: grid;
  grid-template-columns: repeat(5, var(--space-8));
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-width: max-content;
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav :is(button, select, .cp-page-select, .cp-page-indicator) {
  box-sizing: border-box;
  width: var(--space-8) !important;
  min-width: var(--space-8) !important;
  max-width: var(--space-8) !important;
  height: var(--space-8) !important;
  min-height: var(--space-8) !important;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-align: center;
  text-align-last: center;
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-right-controls .inventory-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  min-width: max-content;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customers-table,
  #inventory-item-detail-page .iid-units-table,
  #customers-page .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) thead th {
  box-sizing: border-box;
  height: var(--space-8) !important;
  min-height: var(--space-8) !important;
  padding: var(--space-1) var(--space-2) !important;
  border-color: var(--border-1);
  background: var(--surface-2) !important;
  color: var(--content-2);
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customers-table,
  #inventory-item-detail-page .iid-units-table,
  #customers-page .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) :is(th:last-child, td:last-child) {
  width: calc(var(--space-10) + var(--space-6)) !important;
  min-width: calc(var(--space-10) + var(--space-6));
  max-width: calc(var(--space-10) + var(--space-6));
  border-left: 0;
  box-shadow: none;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customers-table,
  #inventory-item-detail-page .iid-units-table,
  #customers-page .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) th:last-child {
  background: var(--surface-2) !important;
  color: var(--content-2);
}

.cp #inventory-item-detail-page .customers-table-wrap,
.cp #inventory-page .customers-table-wrap,
.cp #customers-page :is(#customers-list-section, #customer-devices-section .customers-table-wrap) {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

@media (max-width: 800px) {
  .cp :is(
    #tickets-list-view,
    #inventory-page,
    #inventory-item-detail-page,
    #customers-page,
    #opportunities-contacts-page
  ) .devices-toolbar-row-top {
    flex-wrap: wrap;
  }

  .cp :is(
    #tickets-list-view,
    #inventory-page,
    #inventory-item-detail-page,
    #customers-page,
    #opportunities-contacts-page
  ) .devices-right-controls {
    flex: 1 1 100%;
    justify-content: flex-end;
    min-width: 0;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

.worker-message-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast) + var(--z-dropdown));
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 15, 28, 0.68);
  backdrop-filter: blur(2px);
}

.worker-message-overlay.hidden {
  display: none;
}

.worker-message-card {
  width: min(560px, calc(100vw - 32px));
  background: #ffffff;
  border-radius: 18px;
  border: 2px solid #ef4444;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.45);
  padding: 24px 24px 20px;
  position: relative;
  display: grid;
  gap: 14px;
}

.worker-message-card.worker-task-popup {
  border-color: #8ecae6;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.36), 0 0 0 6px rgba(142, 202, 230, 0.18);
}

.worker-message-card.worker-task-popup .worker-message-eyebrow {
  color: #07566b;
}

.worker-message-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.worker-message-close:hover {
  background: #0f172a;
}

.worker-message-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.worker-message-head-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.worker-message-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.worker-message-avatar.has-image {
  background: transparent;
}

.worker-message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.worker-message-card.worker-task-popup .worker-message-avatar {
  background: #d7effa;
  color: #07566b;
}

.worker-message-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b91c1c;
}

.worker-message-card h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
  color: #0f172a;
}

.worker-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  color: #475569;
}

.worker-message-body {
  font-size: 16px;
  line-height: 1.65;
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
}

.worker-message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-call-incoming-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 3);
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--content-1) 48%, transparent);
  backdrop-filter: blur(var(--space-1));
}

.chat-call-incoming-overlay.hidden {
  display: none;
}

.chat-call-incoming-card {
  width: min(420px, calc(100vw - var(--space-8)));
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.chat-call-incoming-avatar {
  width: calc(var(--space-10) + var(--space-8));
  height: calc(var(--space-10) + var(--space-8));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.chat-call-incoming-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-call-incoming-copy {
  display: grid;
  gap: var(--space-1);
}

.chat-call-incoming-copy span {
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

.chat-call-incoming-copy h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.chat-call-incoming-copy p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-base);
}

.chat-call-incoming-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* .chat-call-dock styles live near the end of this file (redesigned call UI). */

.repair-queue-alert {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1250;
  width: min(420px, calc(100vw - 28px));
  border: 1px solid #bae6fd;
  border-left: 5px solid #0284c7;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.24);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.repair-queue-alert.hidden {
  display: none;
}

.repair-queue-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.repair-queue-alert-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.repair-queue-alert-minimize {
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.repair-queue-alert-minimize:hover {
  background: #e0f2fe;
}

.repair-queue-alert-head strong {
  font-size: 15px;
  color: #0f172a;
}

.repair-queue-alert-head span {
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #0284c7;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
}

.repair-queue-alert-list {
  display: grid;
  gap: 8px;
}

.repair-queue-alert-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}

.repair-queue-alert-ticket {
  border: 0;
  background: transparent;
  color: #0369a1;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.repair-queue-alert-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: #334155;
}

.repair-queue-alert-item .btn {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}

.repair-queue-alert.is-minimized {
  width: min(250px, calc(100vw - 28px));
  padding: 10px 12px;
  gap: 0;
}

.repair-queue-alert.is-minimized .repair-queue-alert-list,
.repair-queue-alert.is-minimized #repair-queue-alert-open-mywork {
  display: none;
}

.repair-queue-alert.is-minimized .repair-queue-alert-head strong {
  font-size: 13px;
}

@media (max-width: 720px) {
  .repair-queue-alert {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
  }

  .repair-queue-alert-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .repair-queue-alert-ticket {
    text-align: left;
  }

  .repair-queue-alert-item span {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .worker-message-overlay {
    padding: 12px;
  }

  .worker-message-card {
    width: min(100vw - 20px, 100%);
    padding: 18px 16px 16px;
  }

  .worker-message-card h3 {
    font-size: 22px;
    padding-right: 36px;
  }

  .worker-message-body {
    font-size: 15px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Settings page v2 — sticky-section sidebar + grouped panels with headers,
   and the rebuilt Discount Rule cards (category dropdowns + access chips).
   Keeps the page narrow enough for comfortable reading on wide monitors.
   ─────────────────────────────────────────────────────────────────────────── */
.settings-shell-v2 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
}
.settings-shell-v2 .settings-title-bar {
  background: #0f1e2e;
  color: #f8fafc;
  padding: 18px 26px;
  border-bottom: 1px solid #1e293b;
}
.settings-shell-v2 .settings-title-bar h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
}
.settings-shell-v2 .settings-title-bar p {
  color: #cbd5e1;
  font-size: 13px;
  margin-top: 4px;
}
.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  background: #ffffff;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  padding: 22px 14px 22px 22px;
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
  position: sticky;
  top: 0;
  align-self: start;
}
.settings-nav-link {
  display: block;
  padding: 9px 14px;
  margin-bottom: 4px;
  color: #475569;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}
.settings-nav-link:hover { background: #e2e8f0; color: #0f172a; }
.settings-nav-link.active {
  background: #0f1e2e;
  color: #ffffff;
}
.settings-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 28px 32px 40px;
  background: #ffffff;
}
.settings-grid-v2 .settings-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 22px 24px 24px;
  box-shadow: none;
}
.settings-grid-v2 .settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.settings-grid-v2 .settings-panel-head h3 {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px;
}
.settings-grid-v2 .settings-panel-head p {
  color: #64748b;
  font-size: 12.5px;
  margin: 0;
  line-height: 1.5;
}
.settings-grid-v2 .settings-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.settings-grid-v2 .field label {
  font-size: 12px;
  color: #475569;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
  text-transform: none;
  letter-spacing: 0;
}
.settings-grid-v2 .field input,
.settings-grid-v2 .field textarea,
.settings-grid-v2 .field select {
  width: 100%;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 13.5px;
  color: #0f172a;
  background: #ffffff;
  font-family: inherit;
}
.settings-grid-v2 .field input:focus,
.settings-grid-v2 .field textarea:focus,
.settings-grid-v2 .field select:focus {
  border-color: #008ed0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 142, 208, 0.18);
}

/* Improved toggle list (replacing old flat checkboxes) */
.settings-grid-v2 .settings-toggle-list {
  display: grid;
  gap: 10px;
}
.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfc;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.settings-toggle:hover { background: #f1f5f9; border-color: #cbd5e1; }
.settings-toggle input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: #008ed0;
}
.settings-toggle div { display: grid; gap: 2px; }
.settings-toggle strong {
  font-size: 13.5px;
  color: #0f172a;
  font-weight: 600;
}
.settings-toggle span {
  font-size: 12px;
  color: #64748b;
}

/* Discount rule cards */
.settings-grid-v2 .settings-discount-rules {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.settings-grid-v2 .settings-discount-rule {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px 16px 18px;
  display: grid;
  gap: 14px;
  position: relative;
  border-left: 3px solid #008ed0;
}
.settings-discount-rule-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-discount-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #475569;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1f5f9;
}
.settings-discount-check input { accent-color: #008ed0; }
.settings-discount-name {
  flex: 1 1 240px;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: #0f172a;
}
.settings-discount-remove {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.settings-discount-remove:hover { background: #fee2e2; color: #b91c1c; }
.settings-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px;
  gap: 12px;
}
.settings-discount-access {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.6fr);
  gap: 16px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
}
.settings-discount-access-block h4 {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.settings-discount-hint {
  font-size: 11.5px;
  color: #64748b;
  margin: 0 0 8px;
}
.settings-discount-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.settings-discount-chips-scroll {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  background: #fafbfc;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.settings-discount-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid #d6dde6;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  color: #475569;
  white-space: nowrap;
}
.settings-discount-chip:has(input:checked) {
  border-color: #008ed0;
  background: #e0f2fe;
  color: #075985;
}
.settings-discount-check input,
.settings-discount-chip input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #008ed0;
}
.settings-discount-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-discount-empty {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
}
.settings-discount-empty strong {
  color: #0f172a;
  font-size: 14px;
}
.settings-discount-empty span {
  font-size: 12.5px;
}
.rq-settings-detail [data-settings-section-panel].hidden {
  display: none !important;
}

.settings-readonly-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.settings-readonly-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafbfc;
}
.settings-readonly-grid span {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-readonly-grid strong {
  font-size: 14px;
  color: #0f172a;
}

.settings-profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid #dbe6ef;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 12% 20%, rgba(142, 202, 230, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(2, 48, 71, 0.05), rgba(33, 158, 188, 0.08)),
    #ffffff;
}

.settings-profile-avatar {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: #023047;
  color: #ffffff;
  font-size: 18px;
  font-weight: 850;
  box-shadow: 0 12px 24px rgba(2, 48, 71, 0.18);
}

.settings-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.settings-profile-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-profile-copy strong {
  color: #0f172a;
  font-size: 15px;
}

.settings-profile-copy span {
  color: #64748b;
  font-size: 12.5px;
}

.settings-profile-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-profile-card { grid-template-columns: 1fr; justify-items: start; }
  .settings-profile-actions { justify-content: flex-start; }
  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 16px;
    position: relative;
  }
  .settings-nav-link { margin-bottom: 0; margin-right: 6px; white-space: nowrap; }
  .settings-grid-v2 { padding: 18px; }
  .settings-grid-v2 .settings-form-grid { grid-template-columns: 1fr; }
  .settings-discount-row { grid-template-columns: 1fr; }
  .settings-discount-access { grid-template-columns: 1fr; }
}

/* RepairQ-style Settings hub */
.settings-page {
  padding: 24px 26px 56px;
}
.rq-settings-shell.settings-shell-v2 {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  max-width: none;
  margin: 0;
  border: 1px solid #d8dde3;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}
.rq-settings-sidebar {
  background: #f1f2f4;
  border-right: 1px solid #d8dde3;
  padding: 0;
}
.rq-settings-side-group {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}
.rq-settings-side-link {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.rq-settings-side-link:hover,
.rq-settings-side-link.active {
  background: #d9dde2;
  color: #333;
}
.rq-settings-chevron {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 20px;
  line-height: 1;
  transition: transform 140ms ease;
}
.rq-settings-side-group.expanded .rq-settings-chevron {
  transform: rotate(90deg);
}
.rq-settings-sidebar .rq-settings-subnav {
  display: grid;
  gap: 0;
  padding: 2px 0 10px;
  background: #eef1f5;
}
.rq-settings-sidebar .rq-settings-subnav.hidden {
  display: none !important;
}
.rq-settings-sidebar .rq-settings-sub-link {
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #5f6b7a;
  display: flex;
  align-items: center;
  padding: 6px 16px 6px 42px;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.rq-settings-sidebar .rq-settings-sub-link:hover {
  background: #e2e8f0;
  color: #1f2937;
}
.rq-settings-sidebar .rq-settings-sub-link.active {
  background: #ffffff;
  color: #009bd8;
  box-shadow: inset 3px 0 0 #009bd8;
}
.rq-settings-main {
  min-width: 0;
  background: #ffffff;
}
.rq-settings-shell .settings-title-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  background: #4a4a4a;
  color: #ffffff;
  padding: 0 34px;
  border: 0;
}
.rq-settings-shell .settings-title-bar h2 {
  font-size: 23px;
  font-weight: 500;
}
.rq-settings-overview,
.rq-settings-detail {
  padding: 34px 36px 48px;
}
.rq-settings-group {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 44px;
  margin-bottom: 28px;
}
.rq-settings-group h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 500;
  color: #555;
}
.rq-settings-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.rq-settings-card {
  min-height: 132px;
  border: 1px solid #d7e7f5;
  background: #f4f4f5;
  color: #555;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
}
.rq-settings-card:hover {
  background: #ededee;
  border-color: #b9d9ef;
}
.rq-settings-card strong {
  font-size: 21px;
  font-weight: 500;
}
.rq-settings-card span {
  color: #0097d7;
  font-size: 18px;
}
.rq-settings-detail {
  display: grid;
  gap: 18px;
}
.rq-settings-detail.hidden {
  display: none !important;
}
.settings-suppliers-page,
.settings-supplier-form-panel {
  padding: 28px 34px 44px;
}
.settings-suppliers-page.hidden,
.settings-supplier-form-panel.hidden {
  display: none !important;
}
.settings-suppliers-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.settings-suppliers-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 700;
}
.settings-suppliers-filter select {
  min-width: 132px;
  min-height: 34px;
  border: 1px solid #cfd6df;
  border-radius: 3px;
  background: #fff;
  color: #30363d;
  padding: 5px 28px 5px 8px;
  font: inherit;
}
.settings-suppliers-table-wrap {
  border: 1px solid #d8dde3;
  background: #fff;
  overflow-x: auto;
}
.settings-suppliers-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.settings-suppliers-table th,
.settings-suppliers-table td {
  border-bottom: 1px solid #dfe4ea;
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}
.settings-suppliers-table th {
  background: #e9eef3;
  color: #5e6267;
  font-weight: 700;
}
.settings-suppliers-table tbody tr:hover {
  background: #f7fafc;
}
.settings-suppliers-table th:nth-child(1) { width: 130px; }
.settings-suppliers-table th:nth-child(2) { width: 170px; }
.settings-suppliers-table th:nth-child(3) { width: 210px; }
.settings-suppliers-table th:nth-child(4),
.settings-suppliers-table th:nth-child(5) { width: 96px; }
.settings-suppliers-table th:nth-child(6) { width: 180px; }
.settings-suppliers-table th:nth-child(7) { width: 72px; }
.settings-suppliers-table th:nth-child(8) { width: 110px; }
.settings-suppliers-actions-col { width: 92px; text-align: center; }
.settings-suppliers-name {
  display: grid;
  gap: 2px;
}
.settings-suppliers-name strong {
  color: #1f2937;
  font-weight: 800;
}
.settings-suppliers-name small,
.settings-suppliers-muted {
  color: #75808d;
  font-size: 12px;
  line-height: 1.35;
}
.settings-suppliers-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 3px;
  background: #e8f7ef;
  color: #1f7a49;
  font-size: 12px;
  font-weight: 800;
}
.settings-suppliers-badge.inactive {
  background: #f1f2f4;
  color: #69717d;
}
.settings-suppliers-row-actions {
  display: inline-flex;
  justify-content: center;
  gap: 6px;
}
.settings-supplier-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #cfd6df;
  border-radius: 3px;
  background: #fff;
  color: #4f5963;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.settings-supplier-icon-btn:hover {
  background: #eef9fd;
  border-color: #a6d8ed;
  color: #05739d;
}
.settings-supplier-icon-btn.danger:hover {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}
.settings-supplier-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.settings-supplier-icon-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-suppliers-filter select:focus {
  outline: none;
  border-color: #0797ca;
  box-shadow: 0 0 0 2px rgba(7, 151, 202, 0.14);
}
#settings-page .rq-settings-shell .settings-title-bar.settings-supplier-title-bar {
  min-height: 44px;
  padding: 0 30px;
  background: #4a4a4a;
}
#settings-page .rq-settings-shell .settings-title-bar.settings-supplier-title-bar h2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
}
#settings-page .rq-settings-shell .settings-title-bar.settings-supplier-title-bar h2::before {
  content: "";
  width: 14px;
  height: 14px;
  background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.75A2.75 2.75 0 1 1 12 6.25a2.75 2.75 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
  flex: 0 0 14px;
}
.settings-supplier-form-panel {
  padding: 0 0 42px;
  background: #ffffff;
}
.settings-supplier-form-panel.hidden {
  display: none !important;
}
.settings-supplier-rq-card {
  background: #ffffff;
}
.settings-supplier-rq-body {
  width: min(430px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 38px 0 22px;
}
.settings-supplier-rq-body h3 {
  margin: 0 0 12px;
  color: #555;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}
.settings-supplier-rq-body h3 strong {
  font-weight: 800;
}
.settings-supplier-rq-fields {
  display: grid;
  gap: 10px;
}
.settings-supplier-rq-row,
.settings-supplier-rq-check {
  display: grid;
  grid-template-columns: 150px 220px;
  column-gap: 16px;
  align-items: center;
  margin: 0;
}
.settings-supplier-rq-row > span:first-child,
.settings-supplier-rq-check > span:first-child {
  color: #5f5f5f;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
}
.settings-supplier-rq-row em {
  color: #555;
  font-style: normal;
}
.settings-supplier-rq-row input,
.settings-supplier-rq-row select,
.settings-supplier-rq-row textarea {
  width: 220px;
  min-height: 30px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #ffffff;
  color: #4f4f4f;
  padding: 3px 8px;
  font: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.settings-supplier-rq-row select {
  padding-right: 26px;
}
.settings-supplier-rq-row textarea {
  min-height: 128px;
  resize: vertical;
}
.settings-supplier-rq-row input::placeholder,
.settings-supplier-rq-row textarea::placeholder {
  color: #8d8d8d;
  opacity: 0.9;
}
.settings-supplier-rq-row input:focus,
.settings-supplier-rq-row select:focus,
.settings-supplier-rq-row textarea:focus {
  outline: none;
  border-color: #66afe9;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 6px rgba(102, 175, 233, 0.55);
}
.settings-supplier-rq-check {
  margin-top: 8px;
}
.settings-supplier-rq-check > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5f5f5f;
  font-size: 18px;
  font-weight: 500;
}
.settings-supplier-rq-check input {
  width: 13px;
  height: 13px;
  margin: 0;
}
.settings-supplier-rq-footer {
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 18px 0 20px;
}
.settings-supplier-rq-footer .btn {
  min-height: 30px;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
.settings-supplier-rq-footer .btn.btn-outline {
  background: #ffffff;
  border-color: #009bd8;
  color: #009bd8;
  font-weight: 500;
}
@media (max-width: 760px) {
  .settings-suppliers-page {
    padding: 18px 16px 28px;
  }
  .settings-supplier-form-panel {
    padding: 0 0 28px;
  }
  .settings-suppliers-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-suppliers-filter {
    width: 100%;
  }
  .settings-suppliers-filter select {
    flex: 1;
  }
  .settings-supplier-rq-body {
    width: min(430px, 100%);
    padding-top: 28px;
  }
  .settings-supplier-rq-row,
  .settings-supplier-rq-check {
    grid-template-columns: minmax(118px, 40%) minmax(0, 1fr);
    column-gap: 10px;
  }
  .settings-supplier-rq-row > span:first-child,
  .settings-supplier-rq-check > span:first-child,
  .settings-supplier-rq-row input,
  .settings-supplier-rq-row select,
  .settings-supplier-rq-row textarea {
    font-size: 16px;
  }
  .settings-supplier-rq-row input,
  .settings-supplier-rq-row select,
  .settings-supplier-rq-row textarea {
    width: 100%;
  }
}
.rq-settings-detail-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.rq-settings-detail .settings-panel {
  border: 1px solid #d8dde3;
  border-radius: 0;
  box-shadow: none;
}
.rq-settings-detail .settings-panel.hidden {
  display: none !important;
}
.rq-settings-detail .settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.settings-subsection {
  border-bottom: 1px solid #e5e7eb;
  padding: 18px 22px 24px;
}
.settings-subsection-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.settings-subsection-head h4 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: #374151;
}
.settings-subsection-head p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}
.settings-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.settings-method-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #1e293b;
  font-weight: 800;
}
.settings-method-chip input {
  width: 18px;
  height: 18px;
}
.settings-method-chip:has(input:checked) {
  border-color: #0f9f8d;
  background: #ecfdf5;
  color: #0f766e;
}
.settings-method-chip:has(input:disabled) {
  opacity: 0.55;
}
.settings-table-wrap {
  overflow-x: auto;
  border: 1px solid #d8dde3;
  background: #ffffff;
}
.settings-item-types-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.settings-item-types-table .inventory-item-type-name-col {
  width: 28%;
}
.settings-item-types-table .inventory-item-type-count-col,
.settings-item-types-table .inventory-item-type-rule-col,
.settings-item-types-table .inventory-item-type-enforce-col,
.settings-item-types-table .inventory-item-type-flag-col {
  width: 12%;
}
.settings-item-types-table th,
.settings-item-types-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}
.settings-item-types-table th {
  background: #e5e9ee;
  color: #4b5563;
  font-weight: 700;
}
.settings-item-types-table td:first-child {
  font-weight: 600;
  color: #27364a;
}
.settings-item-types-table th:nth-child(2),
.settings-item-types-table td:nth-child(2),
.settings-item-types-table th:nth-child(n+3),
.settings-item-types-table td:nth-child(n+3) {
  text-align: center;
}
.settings-item-types-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 0;
  display: inline-block;
  margin: 0;
  accent-color: #009bd8;
}
.settings-table-empty {
  padding: 22px;
  color: #6b7280;
  text-align: center;
}
.settings-tax-list {
  display: grid;
  gap: 10px;
}
.settings-tax-row {
  display: grid;
  grid-template-columns: 110px minmax(190px, 0.8fr) minmax(240px, 1.2fr) 36px;
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8dde3;
  background: #ffffff;
}
.settings-tax-row-class {
  grid-template-columns: 110px minmax(190px, 1fr) 150px minmax(180px, 0.8fr) 36px;
}
.settings-tax-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: #475569;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-tax-active input,
.settings-tax-rate-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  accent-color: #009bd8;
}
.settings-tax-remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 20px;
  cursor: pointer;
}
.settings-tax-remove:hover {
  background: #fee2e2;
}
.settings-tax-rates {
  display: grid;
  border: 1px solid #d8dde3;
  background: #ffffff;
}
.settings-tax-rate-head,
.settings-tax-rate-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.3fr) 180px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.settings-tax-rate-head {
  background: #e5e9ee;
  color: #4b5563;
  font-weight: 800;
}
.settings-tax-rate-row:nth-child(odd) {
  background: #f8fbfd;
}
.settings-tax-rate-row strong {
  color: #27364a;
}
.settings-tax-rate-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-weight: 700;
}
.settings-tax-empty {
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
}
.settings-backup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.settings-backup-grid {
  margin-top: 16px;
}
.settings-backup-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
}
.settings-backup-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.settings-backup-table th {
  text-align: left;
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #dbe3ed;
  padding: 9px 10px;
  font-weight: 700;
}
.settings-backup-table td {
  border-bottom: 1px solid #edf2f7;
  padding: 9px 10px;
  color: #334155;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-backup-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-weight: 800;
  font-size: 11px;
}
.settings-backup-status.is-success {
  background: #dcfce7;
  color: #166534;
}
.settings-backup-status.is-error {
  background: #fee2e2;
  color: #991b1b;
}
.settings-backup-status.is-loading {
  background: #dbeafe;
  color: #1d4ed8;
}
/* Device Access panel (Settings > Payments > Device Access) */
.device-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
}
.device-pill--ok {
  background: #dcfce7;
  color: #166534;
}
.device-pill--pending {
  background: #fef3c7;
  color: #92400e;
}
.device-pill--muted {
  background: #e2e8f0;
  color: #475569;
}
.device-pill--info {
  background: #dbeafe;
  color: #1d4ed8;
}
.device-code {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}
.settings-device-card {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #dbe3ed;
  border-radius: 10px;
  background: #f8fafc;
}
.settings-device-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-device-card-head h5 {
  margin: 0;
  font-size: 13px;
  color: #0f172a;
}
.settings-device-card-body {
  margin: 8px 0 0;
  color: #475569;
  font-size: 12.5px;
}
.settings-device-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.settings-device-card-actions input[type="text"] {
  min-width: 260px;
}
.settings-device-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
}
.settings-device-group-head h5 {
  margin: 0;
  font-size: 13px;
  color: #0f172a;
}
.settings-device-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
}
.settings-device-group-hint {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 12px;
}
.settings-device-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
}
.settings-device-request-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.settings-device-request-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-device-request-meta strong {
  color: #0f172a;
  font-size: 12.5px;
}
.settings-device-request-meta span {
  color: #64748b;
  font-size: 11.5px;
}
.settings-device-name-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-device-name-control input[type="text"] {
  width: 220px;
  font-weight: 700;
}
.settings-device-muted {
  display: inline-block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
}
.settings-device-request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-device-request-actions input[type="text"] {
  width: 180px;
}
.settings-device-register-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-device-revoked {
  margin-top: 22px;
}
.settings-device-revoked summary {
  cursor: pointer;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
}
.settings-calls-toggle-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.settings-calls-model-row {
  margin-top: 14px;
}
.settings-calls-health-grid {
  margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.settings-calls-checklist {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.settings-calls-checklist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  font-size: 12.5px;
}
.settings-calls-checklist-row strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}
.settings-calls-checklist-row span {
  color: #64748b;
  text-align: right;
  overflow-wrap: anywhere;
}
.settings-calls-checklist-row.is-ready {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.settings-calls-checklist-row.is-missing {
  border-color: #fecaca;
  background: #fef2f2;
}
.settings-calls-agent-preview {
  margin-top: 14px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  padding: 12px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.5;
}

.ai-field-help-launcher {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 11050;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0 9%, transparent 10%),
    linear-gradient(135deg, #0ea5e9, #22c55e 48%, #f97316);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ai-field-help-launcher span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.32);
  font-weight: 900;
  font-size: 22px;
}
.ai-field-help-launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.32);
}
.ai-field-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 11060;
  cursor: crosshair;
  background: rgba(15, 23, 42, 0.18);
  user-select: none;
}
.ai-field-help-instruction {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}
.ai-field-help-rect {
  position: fixed;
  border: 2px solid #38bdf8;
  background: rgba(14, 165, 233, 0.16);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.28);
}
.ai-field-help-panel {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 11070;
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 120px));
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.24);
  padding: 18px;
  color: #1f2937;
}
.ai-field-help-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
  font-weight: 800;
}
.ai-field-help-kicker {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ai-field-help-panel h3 {
  margin: 0 34px 8px 0;
  font-size: 18px;
  color: #0f172a;
}
.ai-field-help-panel p,
.ai-field-help-answer {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}
.ai-field-help-panel.is-error {
  border-color: #fecaca;
}
.ai-field-help-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 980px) {
  .settings-page {
    padding: 18px 14px 44px;
  }
  .rq-settings-shell.settings-shell-v2 {
    grid-template-columns: 1fr;
  }
  .rq-settings-sidebar {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #d8dde3;
  }
  .rq-settings-side-link {
    min-width: max-content;
    padding: 0 14px;
  }
  .rq-settings-overview,
  .rq-settings-detail {
    padding: 22px 16px 34px;
  }
  .rq-settings-detail .settings-form-grid {
    grid-template-columns: 1fr;
  }
  .settings-subsection {
    padding: 16px;
  }
  .settings-calls-health-grid {
    grid-template-columns: 1fr;
  }
  .settings-calls-checklist-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-calls-checklist-row span {
    text-align: left;
  }
  .settings-tax-row,
  .settings-tax-row-class,
  .settings-tax-rate-head,
  .settings-tax-rate-row {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Money-out marker — universal class applied to any cell, span, or strong
   that represents money LEAVING the business (refunds, voided payments,
   payouts, customer purchases). Keeps a consistent red+bold across the
   ticket payments table, reports refund column, metrics refunds card,
   the cash summary tiles, and elsewhere — so a cashier never confuses
   outflow with income at a glance.
   ─────────────────────────────────────────────────────────────────────────── */
.money-out { color: #b91c1c; font-weight: 600; }
.money-in  { color: #15803d; font-weight: 600; }

/* Customer profile credit ledger — Source-cell ticket link styling. */
.cp-credit-ticket-link {
  color: #008ed0;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}
.cp-credit-ticket-link:hover { color: #0073a8; }

/* ───────────────────────────────────────────────────────────────────────────
   Universal unsaved-changes modal — Discard / Stay. Style matches the
   repair-draft-leave modal it replaces so the look is consistent across
   every form in the app (sale, trade, repair, customers, inventory, PO,
   settings, staff, etc.).
   ─────────────────────────────────────────────────────────────────────────── */
.dirty-guard-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.55);
  display: grid;
  place-items: center;
  padding: 32px;
}
.dirty-guard-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 26px 28px;
  width: min(420px, 100%);
  position: relative;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
}
.dirty-guard-card h3 {
  margin: 8px 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}
.dirty-guard-card p {
  margin: 0 0 18px;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.55;
}
.dirty-guard-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 22px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}
.dirty-guard-close:hover { background: #f1f5f9; color: #0f172a; }
.dirty-guard-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fef3c7;
  color: #b45309;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.dirty-guard-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.dirty-guard-secondary,
.dirty-guard-primary {
  font: inherit;
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 13px;
}
.dirty-guard-secondary {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #d6dde6;
}
.dirty-guard-secondary:hover { background: #e2e8f0; }
.dirty-guard-primary {
  background: #b91c1c;
  color: #ffffff;
}
.dirty-guard-primary:hover { background: #991b1b; }

/* My Work card notices — the dispatcher's "assign a technician" prompt and the
   technician's "this was assigned to you" confirmation. */
.my-work-card-notice {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 6px;
  line-height: 1.4;
}
.my-work-notice-assign {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.my-work-notice-assigned {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.my-work-notice-department {
  background: #f5f3ff;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
}

/* Repair detail progressive disclosure. Keeps the operational sections
   available without forcing every table, gallery and timeline open at once. */
.repair-ticket-shell-v3 .repair-section > .repair-section-head {
  background: var(--ticket-section-surface, #64707f);
  color: #ffffff;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.repair-ticket-shell-v3 .repair-section > .repair-section-head h3 {
  flex: 0 0 auto;
}

.repair-ticket-shell-v3 .repair-section > .repair-section-head .repair-section-head-actions {
  flex: 0 0 auto;
}

.repair-ticket-shell-v3 .repair-nav-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.repair-ticket-shell-v3 .repair-nav-foot .repair-show-all-link {
  flex: 0 0 auto;
}

.repair-ticket-shell-v3 .repair-section.is-collapsed {
  margin-bottom: 10px;
}

.repair-ticket-shell-v3 .repair-section.is-collapsed > .repair-section-body {
  display: none;
}

.repair-ticket-shell-v3 .repair-section.is-collapsed > .repair-section-head,
.repair-ticket-shell-v3 .repair-section.is-collapsed.repair-section-gallery > .repair-section-head,
.repair-ticket-shell-v3 .repair-section.is-collapsed.repair-section-notes-history > .repair-section-head {
  min-height: 52px;
  border-bottom: 0;
  background: var(--ticket-section-surface, #64707f);
  color: #ffffff;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.repair-ticket-shell-v3 .repair-section.is-collapsed > .repair-section-head h3,
.repair-ticket-shell-v3 .repair-section.is-collapsed.repair-section-gallery > .repair-section-head h3,
.repair-ticket-shell-v3 .repair-section.is-collapsed.repair-section-notes-history > .repair-section-head h3 {
  color: #ffffff;
}

.repair-ticket-shell-v3 .repair-section.is-collapsed > .repair-section-head svg,
.repair-ticket-shell-v3 .repair-section.is-collapsed.repair-section-gallery > .repair-section-head svg,
.repair-ticket-shell-v3 .repair-section.is-collapsed.repair-section-notes-history > .repair-section-head svg {
  color: #ffffff;
  stroke: currentColor;
}

.repair-section-summary {
  flex: 1 1 220px;
  min-width: 120px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repair-section.is-collapsed .repair-section-summary {
  color: rgba(255, 255, 255, 0.86);
}

.repair-section-toggle {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
}

.repair-section.is-collapsed .repair-section-toggle {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.repair-section-toggle:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.24);
}

.repair-section.is-collapsed .repair-section-toggle:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.24);
}

.repair-section-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.14s ease;
}

.repair-section.is-expanded .repair-section-toggle svg {
  transform: rotate(180deg);
}

.repair-ticket-shell-v3 .repair-section.is-collapsed .repair-notes-count {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.repair-ticket-shell-v3 .repair-section.is-collapsed .repair-photos-refresh-btn,
.repair-ticket-shell-v3 .repair-section.is-collapsed .repair-notes-expand-btn {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.repair-ticket-shell-v3 .repair-section.is-collapsed .repair-photos-refresh-btn:hover,
.repair-ticket-shell-v3 .repair-section.is-collapsed .repair-notes-expand-btn:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.24);
}

/* Protected repair credentials: metadata stays visible, clear text requires an
   explicit audited reveal and is never part of the rendered row markup. */
.repair-ticket-page.show-only-credentials .repair-section[data-tab="credentials"] {
  display: block;
  scroll-margin-top: calc(var(--space-10) * 3);
}

.repair-nav-body #repair-credentials-nav-slot {
  display: contents;
}

.repair-section-credentials .repair-section-body {
  padding: var(--space-4);
}

.repair-credential-intro,
.repair-credential-empty {
  margin: 0 0 var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.repair-credential-error {
  margin: 0 0 var(--space-3);
  color: var(--cp-danger);
  font-size: var(--text-sm);
}

.repair-credential-row {
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.repair-credential-row + .repair-credential-row {
  margin-top: var(--space-3);
}

.repair-credential-row-head,
.repair-credential-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.repair-credential-row-head {
  justify-content: space-between;
}

.repair-credential-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  color: var(--content-1);
}

.repair-credential-identity span,
.repair-credential-row small {
  color: var(--content-2);
  overflow-wrap: anywhere;
}

.repair-credential-status {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.repair-credential-status.needs-review {
  color: var(--cp-warning);
}

.repair-credential-actions {
  margin-top: var(--space-3);
}

.repair-credential-clear-reason {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-xs);
}

.repair-credential-clear-reason select {
  max-width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--content-1);
  background: var(--surface);
}

.repair-credential-reveal[hidden] {
  display: none;
}

.repair-credential-reveal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.repair-credential-reveal span {
  width: 100%;
  color: var(--content-2);
  font-size: var(--text-xs);
}

.repair-credential-reveal code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--content-1);
  font-family: var(--mono);
  font-size: var(--text-base);
}

@media (max-width: 760px) {
  .repair-section-summary {
    flex-basis: 100%;
    order: 3;
    white-space: normal;
  }

  .repair-ticket-shell-v3 .repair-section > .repair-section-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .repair-section-toggle {
    margin-left: auto;
  }
}

.repair-ticket-shell-v3 .repair-add-from-catalog {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(260px, 420px);
  align-items: end;
  justify-content: end;
  gap: 12px;
  padding: 10px 0 2px;
}

.repair-ticket-shell-v3 .repair-catalog-lookup-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: #0f9dcc;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 157, 204, 0.18);
}

.repair-ticket-shell-v3 .repair-catalog-lookup-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.repair-ticket-shell-v3 .repair-catalog-lookup-btn:hover {
  background: #087fa8;
}

.repair-ticket-shell-v3 .repair-catalog-search-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.repair-ticket-shell-v3 .repair-catalog-search-field span {
  color: #5d6878;
  font-size: 13px;
  font-weight: 800;
}

.repair-ticket-shell-v3 .repair-catalog-search-field input {
  min-height: 38px;
  width: 100%;
  border: 1px solid #cfd7df;
  border-radius: 5px;
  padding: 0 12px;
  background: #ffffff;
  color: #1e293b;
  font-size: 14px;
}

.repair-ticket-shell-v3 .repair-catalog-search-field input:focus {
  border-color: #0f9dcc;
  box-shadow: 0 0 0 3px rgba(15, 157, 204, 0.16);
  outline: none;
}

.repair-ticket-shell-v3 .repair-catalog-search-results {
  /* Float the results over "Parts, Labor & Charges" instead of pushing it down.
     The parent (.repair-add-from-catalog) is position:relative, so this anchors
     under the search field (right column) and overlays the table below. */
  position: absolute;
  top: 100%;
  right: 0;
  width: min(420px, 100%);
  z-index: 200;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.repair-ticket-shell-v3 .repair-catalog-search-results.hidden {
  display: none;
}

.repair-ticket-shell-v3 .repair-catalog-result {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.repair-ticket-shell-v3 .repair-catalog-result:last-child {
  border-bottom: 0;
}

.repair-ticket-shell-v3 .repair-catalog-result:hover {
  background: #eef6ff;
}

.repair-ticket-shell-v3 .repair-catalog-result strong {
  font-size: 13px;
  font-weight: 900;
}

.repair-ticket-shell-v3 .repair-catalog-result span,
.repair-ticket-shell-v3 .repair-catalog-search-empty {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.repair-ticket-shell-v3 .repair-catalog-search-empty {
  padding: 12px;
}

.repair-ticket-shell-v3 .repair-financial-locked-note {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

/* "Order a part we don't stock" — custom back-order line for a repair. */
.repair-order-custom {
  margin: 6px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.repair-order-custom-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed #b7c2cf;
  border-radius: 6px;
  background: #f8fafc;
  color: #0f7ba8;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.repair-order-custom-toggle:hover {
  border-color: #0f9dcc;
  color: #087fa8;
  background: #f0f9fd;
}

.repair-order-custom-plus {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.repair-order-custom-panel {
  width: 100%;
  border: 1px solid #d5dee8;
  border-radius: 10px;
  background: #fbfdff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.repair-order-custom-panel.hidden {
  display: none;
}

.repair-order-custom-hint {
  margin: 0;
  color: #5d6878;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

.repair-order-custom-hint strong {
  color: #b45309;
  font-weight: 900;
}

.repair-order-source-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: start;
  padding: 3px;
  border: 1px solid var(--border-subtle, #d5dee8);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2, #f1f5f9);
}

.repair-order-source-tab {
  min-height: 36px;
  padding: 0 var(--space-4, 16px);
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--content-secondary, #64748b);
  font-size: var(--text-sm, 13px);
  font-weight: 800;
  cursor: pointer;
}

.repair-order-source-tab.is-active {
  background: var(--surface-1, #ffffff);
  color: var(--cp-accent, #0797ca);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.12));
}

.repair-order-manual-panel,
.repair-ms-order-panel {
  display: grid;
  gap: var(--space-3, 12px);
}

.repair-order-manual-panel.hidden,
.repair-ms-order-panel.hidden {
  display: none;
}

.repair-ms-order-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  padding: var(--space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 26%, transparent);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 6%, var(--surface-1, #ffffff));
}

.repair-ms-order-intro strong {
  display: block;
  color: var(--content-primary, #1e293b);
  font-size: var(--text-sm, 13px);
  font-weight: 900;
}

.repair-ms-order-intro p {
  margin: 3px 0 0;
  color: var(--content-secondary, #64748b);
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  line-height: 1.45;
}

.repair-ms-order-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 14%, var(--surface-1, #ffffff));
  color: var(--cp-accent, #0797ca);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.repair-ms-order-search-grid {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(200px, 1.3fr) minmax(170px, 0.9fr) auto;
  align-items: end;
  gap: var(--space-3, 12px);
}

.repair-ms-details-field {
  grid-column: 1 / -2;
}

.cp #repair-ticket-page .repair-ms-order-search-btn {
  grid-column: -2 / -1;
  min-height: 36px;
  padding: 0 var(--space-4, 16px);
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: var(--cp-accent, #0797ca);
  color: #ffffff;
  font-size: var(--text-sm, 13px);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.cp #repair-ticket-page .repair-ms-order-search-btn:hover {
  filter: brightness(0.92);
}

.cp #repair-ticket-page .repair-ms-order-search-btn:disabled {
  cursor: wait;
  opacity: 0.65;
}

.repair-ms-order-status {
  min-height: 20px;
  color: var(--content-secondary, #64748b);
  font-size: var(--text-xs, 12px);
  font-weight: 700;
}

.repair-ms-order-results {
  display: grid;
  gap: var(--space-2, 8px);
  max-height: 420px;
  overflow-y: auto;
}

.repair-ms-order-results[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.62;
}

.repair-ms-result-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-subtle, #d5dee8);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-1, #ffffff);
}

.repair-ms-result-card:hover {
  border-color: color-mix(in srgb, var(--cp-accent, #0797ca) 42%, var(--border-subtle, #d5dee8));
}

.repair-ms-result-media {
  display: grid;
  place-items: center;
  width: 64px;
  height: 58px;
  overflow: hidden;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2, #f1f5f9);
  color: var(--content-tertiary, #94a3b8);
}

.repair-ms-result-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.repair-ms-result-media svg {
  width: 22px;
  height: 22px;
}

.repair-ms-result-content {
  min-width: 0;
}

.repair-ms-result-content > strong {
  display: block;
  overflow: hidden;
  color: var(--content-primary, #1e293b);
  font-size: var(--text-sm, 13px);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repair-ms-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 6px;
  color: var(--content-secondary, #64748b);
  font-size: 11px;
  font-weight: 700;
}

.repair-ms-result-action {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.repair-ms-result-cost {
  color: var(--content-secondary, #64748b);
  font-size: 11px;
  font-weight: 800;
}

.repair-ms-result-action button {
  min-height: 34px;
  padding: 0 var(--space-3, 12px);
  border: 1px solid var(--cp-accent, #0797ca);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-1, #ffffff);
  color: var(--cp-accent, #0797ca);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.repair-ms-result-action button:hover {
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 8%, var(--surface-1, #ffffff));
}

.repair-ms-result-action button:disabled {
  border-color: var(--border-subtle, #d5dee8);
  color: var(--content-tertiary, #94a3b8);
  cursor: not-allowed;
}

.repair-order-custom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.repair-order-custom-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.repair-order-custom-field-wide {
  grid-column: 1 / -1;
}

.repair-order-custom-field span {
  color: #5d6878;
  font-size: 12.5px;
  font-weight: 800;
}

.repair-order-custom-field span small {
  color: #94a3b8;
  font-weight: 700;
}

.repair-order-custom-field input,
.repair-order-custom-field select {
  min-height: 36px;
  width: 100%;
  border: 1px solid #cfd7df;
  border-radius: 5px;
  padding: 0 11px;
  background: #ffffff;
  color: #1e293b;
  font-size: 14px;
}

.repair-order-custom-field select {
  appearance: auto;
}

.repair-order-custom-field input:focus,
.repair-order-custom-field select:focus {
  border-color: #0f9dcc;
  box-shadow: 0 0 0 3px rgba(15, 157, 204, 0.16);
  outline: none;
}

.repair-order-custom-quote:not(:empty) {
  border: 1px solid color-mix(in srgb, var(--cp-accent) 35%, transparent);
  border-radius: var(--radius-sm, 5px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface-1, #ffffff));
  color: var(--content-primary, #1e293b);
  font-size: var(--text-sm, 13px);
  font-weight: 800;
}

.repair-order-custom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.repair-order-custom-add {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 5px;
  background: #0f9dcc;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 157, 204, 0.18);
}

.repair-order-custom-add:hover {
  background: #087fa8;
}

.repair-order-custom-add:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 640px) {
  .repair-order-custom-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .repair-order-source-tabs,
  .repair-ms-order-search-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .repair-ms-details-field,
  .repair-ms-order-search-btn {
    grid-column: auto;
  }

  .repair-ms-result-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .repair-ms-result-media {
    width: 52px;
    height: 52px;
  }

  .repair-ms-result-action {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 1180px) {
  .repair-ms-order-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .repair-ms-details-field,
  .repair-ms-order-search-btn {
    grid-column: auto;
  }

  .repair-ms-order-search-btn {
    justify-self: start;
  }
}

.repair-ticket-shell-v3 .repair-line-locked {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 760px) {
  .repair-ticket-shell-v3 .repair-add-from-catalog {
    grid-template-columns: 1fr;
  }

  .repair-ticket-shell-v3 .repair-catalog-search-results {
    left: 0;
    width: 100%;
  }
}

/* Sale, trade-in and refurbish detail progressive disclosure. */
.sale-ticket-shell .sale-section > .repair-section-head,
.sale-ticket-shell .sale-section > .sale-section-head,
.trade-ticket-shell .trade-section > .repair-section-head,
.trade-ticket-shell .trade-section > .trade-section-head,
.refurbish-ticket-shell .refurb-section > .repair-section-head,
.refurbish-ticket-shell .refurb-section > .refurb-section-head {
  background: var(--ticket-section-surface, #64707f);
  color: #ffffff;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.sale-ticket-shell .sale-section > .repair-section-head h3,
.sale-ticket-shell .sale-section > .sale-section-head h3,
.trade-ticket-shell .trade-section > .repair-section-head h3,
.trade-ticket-shell .trade-section > .trade-section-head h3,
.refurbish-ticket-shell .refurb-section > .repair-section-head h3,
.refurbish-ticket-shell .refurb-section > .refurb-section-head h3 {
  flex: 0 0 auto;
  color: #ffffff;
}

.sale-ticket-shell .sale-section > .repair-section-head svg,
.sale-ticket-shell .sale-section > .sale-section-head svg,
.trade-ticket-shell .trade-section > .repair-section-head svg,
.trade-ticket-shell .trade-section > .trade-section-head svg,
.refurbish-ticket-shell .refurb-section > .repair-section-head svg,
.refurbish-ticket-shell .refurb-section > .refurb-section-head svg {
  color: #ffffff;
  stroke: currentColor;
}

.sale-ticket-shell .sale-section > .repair-section-head .sale-section-head-actions,
.sale-ticket-shell .sale-section > .sale-section-head .sale-section-head-actions,
.trade-ticket-shell .trade-section > .repair-section-head .trade-section-head-actions,
.trade-ticket-shell .trade-section > .trade-section-head .trade-section-head-actions,
.refurbish-ticket-shell .refurb-section > .repair-section-head .refurb-section-head-actions,
.refurbish-ticket-shell .refurb-section > .refurb-section-head .refurb-section-head-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.sale-ticket-shell .sale-section > .repair-section-head .repair-notes-expand-btn,
.sale-ticket-shell .sale-section > .sale-section-head .repair-notes-expand-btn,
.trade-ticket-shell .trade-section > .repair-section-head .repair-notes-expand-btn,
.trade-ticket-shell .trade-section > .trade-section-head .repair-notes-expand-btn,
.refurbish-ticket-shell .refurb-section > .repair-section-head .repair-notes-expand-btn,
.refurbish-ticket-shell .refurb-section > .refurb-section-head .repair-notes-expand-btn {
  margin-left: 0;
}

.sale-ticket-shell .sale-section.is-collapsed > :not(.repair-section-head):not(.sale-section-head),
.trade-ticket-shell .trade-section.is-collapsed > :not(.repair-section-head):not(.trade-section-head),
.refurbish-ticket-shell .refurb-section.is-collapsed > :not(.repair-section-head):not(.refurb-section-head) {
  display: none !important;
}

.sale-ticket-shell .sale-section.is-collapsed,
.trade-ticket-shell .trade-section.is-collapsed,
.refurbish-ticket-shell .refurb-section.is-collapsed {
  margin-bottom: 10px;
}

.sale-ticket-shell .sale-nav-foot,
.trade-ticket-shell .trade-nav-foot,
.refurbish-ticket-shell .refurb-nav-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sale-ticket-shell .sale-nav-foot button,
.trade-ticket-shell .trade-nav-foot button,
.refurbish-ticket-shell .refurb-nav-foot button {
  flex: 0 0 auto;
}

/* Unified ticket overview panel. Header, status and headline metrics remain
   distinct rows, but read as one default-visible ticket summary. */
.ticket-detail-overview-panel {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
  border: 1px solid #d5dee8;
  border-top: 4px solid var(--ticket-view-accent);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    inset 4px 0 0 var(--ticket-view-accent),
    0 1px 0 rgba(15, 23, 42, 0.03);
}

.ticket-detail-overview-panel > .repair-ticket-header,
.ticket-detail-overview-panel > .sale-ticket-header,
.ticket-detail-overview-panel > .trade-ticket-header,
.ticket-detail-overview-panel > .refurbish-ticket-header {
  margin: 0;
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.ticket-detail-overview-panel > .refurbish-ticket-breadcrumb {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid #d5dee8;
  background: #f8fafc;
}

.ticket-detail-overview-panel > .repair-assignment-alert {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

.ticket-detail-overview-panel > .repair-detail-work-timer {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid #d5dee8;
  background: #ffffff;
}

.ticket-detail-overview-panel > .repair-ticket-status-row,
.ticket-detail-overview-panel > .sale-ticket-status-row,
.ticket-detail-overview-panel > .trade-ticket-status-row,
.ticket-detail-overview-panel > .refurbish-ticket-status-row {
  margin: 0;
  border-top: 1px solid rgba(213, 222, 232, 0.78);
  border-radius: 0;
  overflow: hidden;
}

.ticket-detail-overview-panel > .repair-overview,
.ticket-detail-overview-panel > .sale-command-center,
.ticket-detail-overview-panel > .trade-overview,
.ticket-detail-overview-panel > .refurb-command-center {
  margin: 0;
  padding: 14px 16px 16px;
  border-top: 1px solid #d5dee8;
  background: #f8fafc;
}

.ticket-detail-overview-panel .repair-hero-card,
.ticket-detail-overview-panel .sale-command-card,
.ticket-detail-overview-panel .trade-hero-card,
.ticket-detail-overview-panel .refurb-command-card {
  border-color: #d5dee8;
  box-shadow: none;
}

.ticket-detail-overview-panel .sale-command-primary,
.ticket-detail-overview-panel .trade-hero-device,
.ticket-detail-overview-panel .refurb-command-primary,
.ticket-detail-overview-panel .repair-hero-device {
  border-color: #cbd5e1;
  background: #ffffff;
}

.ticket-detail-overview-panel > .repair-overview-with-ai {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 12px;
  align-items: stretch;
}

.repair-ai-summary-card,
.ticket-ai-summary-card {
  min-width: 0;
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #cbd5e1;
  border-left: 5px solid var(--ticket-view-accent, #fb8500);
  border-radius: 8px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
    radial-gradient(circle at 0 0, rgba(251, 133, 0, 0.12), transparent 34%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.repair-ai-summary-card.is-loading,
.ticket-ai-summary-card.is-loading {
  border-left-color: var(--ticket-view-accent, #fb8500);
}

.repair-ai-summary-card.is-stale,
.ticket-ai-summary-card.is-stale {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 237, 0.86)),
    radial-gradient(circle at 0 0, rgba(251, 133, 0, 0.14), transparent 36%);
}

.repair-ai-summary-head,
.ticket-ai-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.repair-ai-summary-head div,
.ticket-ai-summary-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.repair-ai-summary-head span,
.ticket-ai-summary-head span,
.repair-overview-facts .repair-hero-card span {
  color: #526176;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.repair-ai-summary-head strong,
.ticket-ai-summary-head strong {
  color: #132235;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.repair-ai-summary-head em,
.ticket-ai-summary-head em {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.repair-ai-summary-body,
.ticket-ai-summary-body {
  color: #253245;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.48;
  white-space: pre-line;
}

.sale-command-center > .ticket-ai-summary-card,
.trade-overview > .ticket-ai-summary-card,
.refurb-command-center > .ticket-ai-summary-card {
  grid-column: 1 / -1;
  min-height: 132px;
}

.repair-overview-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ticket-detail-overview-panel .repair-overview-facts .repair-hero-card {
  min-height: 0;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 7px;
  background: #ffffff;
}

.repair-overview-facts .repair-hero-card strong {
  color: #172337;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.12;
}

.repair-overview-facts .repair-hero-card em {
  color: #5f6f83;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.repair-hero-equipment-bin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.repair-hero-equipment-bin > span {
  color: var(--content-secondary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.repair-hero-equipment-bin > strong {
  flex: 0 0 auto;
  padding: 3px var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--border-subtle));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
  color: var(--content-primary);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.repair-fast-derived-value {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.repair-fast-derived-value > span {
  color: var(--content-secondary);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.repair-fast-derived-value > strong {
  color: var(--content-primary);
  font-size: var(--text-base);
  font-weight: 900;
}

.repair-fast-derived-value > em {
  color: var(--content-secondary);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.35;
}

.repair-customer-actions .is-contact-fallback {
  border-style: dashed;
  box-shadow: none;
}

.repair-customer-actions .is-contact-fallback > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.repair-customer-actions .is-contact-fallback small {
  color: currentColor;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.72;
  text-transform: uppercase;
}

.ticket-detail-overview-panel > .refurb-banner-info {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

@media (max-width: 760px) {
  .ticket-detail-overview-panel > .repair-overview,
  .ticket-detail-overview-panel > .sale-command-center,
  .ticket-detail-overview-panel > .trade-overview,
  .ticket-detail-overview-panel > .refurb-command-center {
    padding: 12px;
  }

  .ticket-detail-overview-panel > .repair-overview-with-ai {
    grid-template-columns: 1fr;
  }

  .repair-ai-summary-head,
  .ticket-ai-summary-head {
    display: grid;
  }

  .repair-ai-summary-head em,
  .ticket-ai-summary-head em {
    text-align: left;
    white-space: normal;
  }
}

/* Ticket color system:
   - ticket-view-accent follows the ticket type for headers, strips and shadows.
   - ticket-status-accent is reserved for the Status and Last Update cards only.
   - ticket-nav-surface is the Prussian banner color from the ticket palette. */
.repair-ticket-shell-v3,
.sale-ticket-shell,
.trade-ticket-shell,
.refurbish-ticket-shell {
  --ticket-nav-surface: #023047;
  --ticket-section-surface: #3d586d;
  --ticket-status-accent: #64748b;
  --ticket-status-accent-soft: #cbd5e1;
  --ticket-status-chip-bg: #e2e8f0;
  --ticket-status-chip-ink: #334155;
}

.repair-ticket-shell-v3 .repair-section,
.sale-ticket-shell .sale-section,
.trade-ticket-shell .trade-section,
.refurbish-ticket-shell .refurb-section {
  border-color: #d5dee8;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.repair-ticket-shell-v3 .repair-section::before,
.sale-ticket-shell .sale-section::before,
.trade-ticket-shell .trade-section::before,
.refurbish-ticket-shell .refurb-section::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: var(--ticket-view-accent);
}

.repair-ticket-shell-v3 {
  --ticket-view-accent: #fb8500;
  --ticket-view-accent-soft: #ffd0a3;
  --ticket-view-chip-bg: #fff3e0;
  --ticket-view-chip-ink: #703600;
  --ticket-type-accent: #fb8500;
  --ticket-type-accent-soft: #ffd0a3;
}

.sale-ticket-shell {
  --ticket-view-accent: #219ebc;
  --ticket-view-accent-soft: #9bd8e8;
  --ticket-view-chip-bg: #e0f7ff;
  --ticket-view-chip-ink: #06485c;
  --ticket-type-accent: #219ebc;
  --ticket-type-accent-soft: #9bd8e8;
}

.sale-ticket-shell[data-sale-ticket-type="special_order"] {
  --ticket-view-accent: #111827;
  --ticket-view-accent-soft: #d1d5db;
  --ticket-view-chip-bg: #f3f4f6;
  --ticket-view-chip-ink: #111827;
  --ticket-type-accent: #111827;
  --ticket-type-accent-soft: #d1d5db;
}

.sale-ticket-shell[data-sale-ticket-type="special_order"] .sale-ticket-title strong::before {
  content: "ORDER";
}

.trade-ticket-shell {
  --ticket-view-accent: #ffb703;
  --ticket-view-accent-soft: #ffe08a;
  --ticket-view-chip-bg: #fff7db;
  --ticket-view-chip-ink: #6f4c00;
  --ticket-type-accent: #ffb703;
  --ticket-type-accent-soft: #ffe08a;
}

.refurbish-ticket-shell {
  --ticket-view-accent: #4a7fb8;
  --ticket-view-accent-soft: #9fbfe0;
  --ticket-view-chip-bg: #e8f0fb;
  --ticket-view-chip-ink: #244d7a;
  --ticket-type-accent: #4a7fb8;
  --ticket-type-accent-soft: #9fbfe0;
}

.ticket-status-accent-red {
  --ticket-status-accent: #e53935;
  --ticket-status-accent-soft: #fca5a5;
  --ticket-status-chip-bg: #fee2e2;
  --ticket-status-chip-ink: #7f1d1d;
}

.ticket-status-accent-green {
  --ticket-status-accent: #4caf50;
  --ticket-status-accent-soft: #bbf7d0;
  --ticket-status-chip-bg: #dcfce7;
  --ticket-status-chip-ink: #166534;
}

.ticket-status-accent-blue {
  --ticket-status-accent: #1ea6da;
  --ticket-status-accent-soft: #bae6fd;
  --ticket-status-chip-bg: #e0f2fe;
  --ticket-status-chip-ink: #075985;
}

.ticket-status-accent-purple {
  --ticket-status-accent: #7c3aed;
  --ticket-status-accent-soft: #c4b5fd;
  --ticket-status-chip-bg: #ede9fe;
  --ticket-status-chip-ink: #4c1d95;
}

.ticket-status-accent-magenta {
  --ticket-status-accent: #c026d3;
  --ticket-status-accent-soft: #f0abfc;
  --ticket-status-chip-bg: #fae8ff;
  --ticket-status-chip-ink: #86198f;
}

.ticket-status-accent-amber {
  --ticket-status-accent: #ff9800;
  --ticket-status-accent-soft: #fde68a;
  --ticket-status-chip-bg: #fef3c7;
  --ticket-status-chip-ink: #92400e;
}

.ticket-status-accent-cyan {
  --ticket-status-accent: #00bcd4;
  --ticket-status-accent-soft: #a5f3fc;
  --ticket-status-chip-bg: #cffafe;
  --ticket-status-chip-ink: #155e75;
}

.ticket-status-accent-teal {
  --ticket-status-accent: #0f9f8f;
  --ticket-status-accent-soft: #5eead4;
  --ticket-status-chip-bg: #ccfbf1;
  --ticket-status-chip-ink: #115e59;
}

.ticket-status-accent-orange {
  --ticket-status-accent: #f97316;
  --ticket-status-accent-soft: #fdba74;
  --ticket-status-chip-bg: #fed7aa;
  --ticket-status-chip-ink: #7c2d12;
}

.ticket-status-accent-indigo {
  --ticket-status-accent: #4f46e5;
  --ticket-status-accent-soft: #c7d2fe;
  --ticket-status-chip-bg: #e0e7ff;
  --ticket-status-chip-ink: #312e81;
}

.ticket-status-accent-gray,
.ticket-status-accent-slate,
.ticket-status-accent-dark {
  --ticket-status-accent: #64748b;
  --ticket-status-accent-soft: #cbd5e1;
  --ticket-status-chip-bg: #e2e8f0;
  --ticket-status-chip-ink: #334155;
}

.repair-status-magenta,
.sale-status-magenta,
.trade-status-magenta,
.refurb-status-magenta {
  background: #c026d3;
}

.repair-ticket-shell-v3 .repair-nav-head,
.repair-ticket-shell-v3 .repair-totals-head,
.repair-ticket-shell-v3 .repair-balance-panel,
.repair-ticket-shell-v3 .repair-ticket-header,
.sale-ticket-shell .sale-nav-head,
.sale-ticket-shell .sale-totals-head,
.sale-ticket-shell .sale-balance-panel,
.sale-ticket-shell .sale-ticket-header,
.trade-ticket-shell .trade-nav-box > .trade-nav-head,
.trade-ticket-shell .trade-finance-box > .trade-nav-head,
.trade-ticket-shell .trade-finance-balance-panel,
.trade-ticket-shell .trade-ticket-header,
.refurbish-ticket-shell .refurb-nav-head,
.refurbish-ticket-shell .refurb-totals-head,
.refurbish-ticket-shell .refurb-balance-panel,
.refurbish-ticket-shell .refurbish-ticket-header {
  background: var(--ticket-nav-surface);
  color: #ffffff;
}

.repair-ticket-shell-v3 .repair-nav-head,
.sale-ticket-shell .sale-nav-head,
.trade-ticket-shell .trade-nav-box > .trade-nav-head,
.refurbish-ticket-shell .refurb-nav-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.repair-ticket-shell-v3 .repair-ticket-title > span:last-child::before,
.sale-ticket-shell .sale-ticket-title strong::before,
.sale-ticket-header > span::before,
.trade-ticket-shell .trade-ticket-title strong::before,
.refurbish-ticket-shell .refurb-ticket-title > span::before {
  content: none !important;
  display: none !important;
}

.repair-ticket-shell-v3 .repair-nav-head::after,
.sale-ticket-shell .sale-nav-head::after,
.trade-ticket-shell .trade-nav-box > .trade-nav-head::after,
.refurbish-ticket-shell .refurb-nav-head::after {
  content: none;
  display: none;
}

.repair-ticket-shell-v3 .repair-status-bar,
.sale-ticket-shell .sale-status-bar,
.trade-ticket-shell .trade-status-bar,
.refurbish-ticket-shell .refurb-status-bar {
  background: transparent;
  color: #ffffff;
}

.ticket-detail-overview-panel > .repair-ticket-status-row,
.ticket-detail-overview-panel > .sale-ticket-status-row,
.ticket-detail-overview-panel > .trade-ticket-status-row,
.ticket-detail-overview-panel > .refurbish-ticket-status-row {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 48px;
  background: var(--ticket-view-accent);
  color: #ffffff;
}

.ticket-detail-overview-panel .repair-status-bar,
.ticket-detail-overview-panel .sale-status-bar,
.ticket-detail-overview-panel .trade-status-bar,
.ticket-detail-overview-panel .refurb-status-bar {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 12px 16px;
  background: transparent !important;
  letter-spacing: 0.01em;
}

.ticket-detail-overview-panel .repair-location-strip,
.ticket-detail-overview-panel .sale-location-strip,
.ticket-detail-overview-panel .trade-location-strip,
.ticket-detail-overview-panel .refurb-location-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  min-width: 0;
  min-height: 48px;
  margin-left: auto;
  padding: 12px 16px;
  background: transparent;
  color: #ffffff;
  white-space: nowrap;
}

.ticket-detail-overview-panel .repair-location-strip span,
.ticket-detail-overview-panel .sale-location-item,
.ticket-detail-overview-panel .trade-location-strip span,
.ticket-detail-overview-panel .refurb-location-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  opacity: 0.98;
  text-shadow: 0 1px 1px rgba(2, 48, 71, 0.22);
}

@media (max-width: 760px) {
  .ticket-detail-overview-panel > .repair-ticket-status-row,
  .ticket-detail-overview-panel > .sale-ticket-status-row,
  .ticket-detail-overview-panel > .trade-ticket-status-row,
  .ticket-detail-overview-panel > .refurbish-ticket-status-row {
    grid-template-columns: 1fr;
    gap: 0 10px;
  }

  .ticket-detail-overview-panel .repair-location-strip,
  .ticket-detail-overview-panel .sale-location-strip,
  .ticket-detail-overview-panel .trade-location-strip,
  .ticket-detail-overview-panel .refurb-location-strip {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    padding-top: 0;
    white-space: normal;
  }
}

.ticket-header-status-cluster {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: min(360px, 100%);
  flex-wrap: wrap;
}

.ticket-detail-status-card,
.ticket-detail-overview-panel .ticket-last-update-card,
.sale-ticket-page .ticket-last-update-card,
.trade-ticket-shell .ticket-last-update-card,
.refurbish-ticket-shell .ticket-last-update-card,
.repair-ticket-shell-v3 .ticket-last-update-card {
  display: grid;
  gap: 3px;
  min-width: min(150px, 100%);
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--ticket-status-accent) 68%, #ffffff);
  border-radius: 6px;
  background: var(--ticket-status-accent);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 22px -18px var(--ticket-status-accent);
}

.ticket-detail-overview-panel .ticket-last-update-card {
  min-width: min(170px, 100%);
}

.ticket-detail-status-card span,
.ticket-detail-overview-panel .ticket-last-update-card span,
.sale-ticket-page .ticket-last-update-card span,
.trade-ticket-shell .ticket-last-update-card span,
.refurbish-ticket-shell .ticket-last-update-card span,
.repair-ticket-shell-v3 .ticket-last-update-card span {
  color: color-mix(in srgb, var(--ticket-status-accent-soft) 72%, #ffffff);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ticket-detail-status-card strong,
.ticket-detail-overview-panel .ticket-last-update-card strong,
.sale-ticket-page .ticket-last-update-card strong,
.trade-ticket-shell .ticket-last-update-card strong,
.refurbish-ticket-shell .ticket-last-update-card strong,
.repair-ticket-shell-v3 .ticket-last-update-card strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.ticket-last-update-card strong {
  overflow-wrap: anywhere;
}

.ticket-header-status-table {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr);
  gap: 0;
  min-width: min(360px, 100%);
  border: 1px solid var(--ticket-status-chip-ink);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ticket-status-chip-bg);
  box-shadow: 0 10px 24px -20px var(--ticket-status-accent);
}

.ticket-header-status-table .ticket-detail-status-card,
.ticket-header-status-table .ticket-last-update-card,
.ticket-header-status-table .refurb-ticket-last-update {
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ticket-status-chip-ink);
  box-shadow: none;
}

.ticket-header-status-table .ticket-last-update-card,
.ticket-header-status-table .refurb-ticket-last-update {
  border-left: 1px solid color-mix(in srgb, var(--ticket-status-chip-ink) 36%, transparent);
}

.ticket-header-status-table span,
.ticket-header-status-table .ticket-detail-status-card span,
.ticket-header-status-table .ticket-last-update-card span,
.ticket-header-status-table .refurb-ticket-last-update span {
  color: color-mix(in srgb, var(--ticket-status-chip-ink) 72%, #64748b);
}

.ticket-header-status-table strong,
.ticket-header-status-table .ticket-detail-status-card strong,
.ticket-header-status-table .ticket-last-update-card strong,
.ticket-header-status-table .refurb-ticket-last-update strong {
  color: var(--ticket-status-chip-ink);
}

.sale-totals-box .ticket-create-charge-btn,
.ticket-payments-actions .ticket-create-charge-btn.ticket-items-charge-btn {
  background: #174ea6;
  box-shadow: 0 10px 22px rgba(23, 78, 166, 0.20);
}

.sale-totals-box .ticket-create-charge-btn:hover,
.ticket-payments-actions .ticket-create-charge-btn.ticket-items-charge-btn:hover {
  background: #0f3f8f;
}

.sale-coupon-panel {
  display: grid;
  gap: var(--space-2);
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
}

.sale-coupon-panel.is-applied {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface-1));
}

.sale-coupon-panel label,
.sale-coupon-panel.is-applied > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.sale-coupon-panel span {
  font-size: var(--text-sm);
  font-weight: 800;
}

.sale-coupon-panel strong {
  color: var(--cp-accent-hover);
  font-size: var(--text-lg);
}

.sale-coupon-panel small {
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.sale-coupon-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.sale-coupon-entry input {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  text-transform: uppercase;
}

.sale-coupon-entry input:focus-visible {
  border-color: var(--cp-accent);
  outline: 2px solid color-mix(in srgb, var(--cp-accent) 24%, transparent);
  outline-offset: 1px;
}

.sale-totals-box.sale-collapsed .sale-coupon-panel {
  display: none;
}

@media (max-width: 520px) {
  .sale-coupon-panel.is-applied,
  .sale-coupon-entry {
    grid-template-columns: 1fr;
  }

  .sale-coupon-panel .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .ticket-header-status-table {
    grid-template-columns: 1fr;
  }

  .ticket-header-status-table .ticket-last-update-card,
  .ticket-header-status-table .refurb-ticket-last-update {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ticket-status-chip-ink) 36%, transparent);
  }
}

.refurb-ticket-last-update {
  display: grid;
  gap: 3px;
  min-width: min(280px, 100%);
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--ticket-status-accent) 68%, #ffffff);
  border-radius: 5px;
  background: var(--ticket-status-accent);
  color: #ffffff;
}

.refurb-ticket-last-update span {
  color: color-mix(in srgb, var(--ticket-status-accent-soft) 72%, #ffffff);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.refurb-ticket-last-update strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

/* Dashboard / My Work: align with the RepairQ-style section shell. */
[data-breadcrumb-home-link="true"],
.dashboard-breadcrumb svg,
.subbar-breadcrumb svg {
  cursor: pointer;
}

.dashboard-breadcrumb [data-breadcrumb-home-link="true"]:focus-visible,
.subbar-breadcrumb [data-breadcrumb-home-link="true"]:focus-visible,
.dashboard-breadcrumb svg:focus-visible,
.subbar-breadcrumb svg:focus-visible {
  outline: 2px solid #1398d5;
  outline-offset: 3px;
  border-radius: 3px;
}

#home-page.home-main,
#my-work-page.home-main {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 0;
}

#home-page > .dashboard-breadcrumb,
#my-work-page > .dashboard-breadcrumb {
  display: none;
}

#home-page .dashboard-title-bar,
#my-work-page .dashboard-title-bar {
  margin: 0;
}

#home-page .repair-dashboard,
#my-work-page .repair-dashboard {
  gap: 22px;
  padding: 14px 0 34px;
}

#home-page .repair-panel,
#my-work-page .repair-panel,
#my-work-page .my-work-chat-panel {
  border: 1px solid #dedede;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

#home-page .repair-panel-title,
#my-work-page .repair-panel-title,
#my-work-page .my-work-chat-header {
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 0;
  background: #4a4a4a;
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
}

#home-page .repair-panel-title svg,
#my-work-page .repair-panel-title svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

#home-page .repair-panel-body,
#my-work-page .repair-panel-body {
  padding: 14px 18px 18px;
}

#home-page .alerts-panel .repair-panel-body {
  padding: 0;
}

#home-page .daily-strip,
#my-work-page .my-work-strip {
  border-bottom: 1px solid #e1e1e1;
  background: #ffffff;
}

#home-page .daily-strip > div,
#my-work-page .my-work-strip > div {
  min-height: 58px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid #e1e1e1;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

#home-page .daily-strip > div:last-child,
#my-work-page .my-work-strip > div:last-child {
  border-right: 0;
}

#home-page .daily-label,
#my-work-page .daily-label,
#my-work-page .my-work-strip .daily-label {
  color: #777777;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

#home-page .daily-strip strong,
#my-work-page .my-work-strip strong {
  color: #4f4f4f;
  font-size: 20px;
  letter-spacing: 0;
}

#home-page .dashboard-op-card {
  min-height: 78px;
  padding: 12px 14px;
}

#home-page .dashboard-op-card span,
#home-page .dashboard-op-card small {
  font-size: 12px;
}

#home-page .dashboard-op-card strong {
  font-size: 22px;
}

#home-page .ticket-progress {
  min-height: 210px;
  padding: 22px 18px 26px;
}

#home-page .ticket-progress h2 {
  font-size: 18px;
  letter-spacing: 0;
}

#home-page .progress-metric {
  min-height: 116px;
  padding: 12px 18px;
}

#home-page .progress-metric strong {
  width: 62px;
  height: 62px;
  font-size: 20px;
}

#home-page .dashboard-mini-table {
  font-size: 12px;
}

#home-page .dashboard-mini-table th,
#home-page .dashboard-mini-table td {
  height: 32px;
  padding: 4px 8px;
}

#home-page .dashboard-mini-table th {
  background: #e6ebf0;
  color: #60666c;
  font-size: 11px;
  letter-spacing: 0;
}

#my-work-page .my-work-hero {
  display: none;
}

#my-work-page .my-work-shell {
  grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.95fr);
  align-items: start;
}

#my-work-page .my-work-board-panel,
#my-work-page .my-work-chat-panel,
#my-work-page .my-work-admin-bottom .repair-panel {
  overflow: hidden;
}

#my-work-page .my-work-strip {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0;
  margin: -14px -18px 14px;
}

#my-work-page .my-work-lanes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#my-work-page .my-work-section {
  min-height: 0;
  padding: 0 10px 10px;
  border: 1px solid #dedede;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

#my-work-page .my-work-section > summary.my-work-section-title {
  min-height: 38px;
  color: #4f4f4f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

#my-work-page .my-work-section > summary.my-work-section-title::before {
  width: 6px;
  height: 6px;
  border-color: #777777;
}

#my-work-page .my-work-list {
  max-height: 330px;
  gap: 8px;
}

#my-work-page .my-work-module-section {
  grid-column: 1 / -1;
}

#my-work-page .my-work-module-list {
  display: grid;
  gap: var(--space-3, 12px);
}

#my-work-page .my-work-module-panel {
  display: grid;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-subtle, #dedede);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1, #ffffff);
}

#my-work-page .my-work-module-head,
#my-work-page .my-work-module-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

#my-work-page .my-work-module-head span,
#my-work-page .my-work-module-block-title strong {
  color: var(--content-strong, #111827);
  font-size: 13px;
  font-weight: 800;
}

#my-work-page .my-work-module-head em,
#my-work-page .my-work-module-block-title span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid rgba(7, 151, 202, 0.22);
  border-radius: var(--radius-sm, 4px);
  background: rgba(7, 151, 202, 0.08);
  color: var(--cp-accent, #0797ca);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

#my-work-page .my-work-module-block {
  display: grid;
  gap: var(--space-2, 8px);
}

#my-work-page .my-work-module-placeholder {
  display: grid;
  gap: 4px;
  min-height: 78px;
  align-content: center;
  padding: var(--space-3, 12px);
  border: 1px dashed var(--border-subtle, #dedede);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-subtle, #f8fafc);
  color: var(--content-muted, #64748b);
}

#my-work-page .my-work-module-placeholder strong {
  color: var(--content-strong, #111827);
  font-size: 13px;
}

#my-work-page .my-work-module-placeholder span {
  font-size: 12px;
}

#my-work-page .my-workshop-board {
  overflow: hidden;
}

#my-work-page .my-workshop-board-head {
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--border-subtle, #dedede);
}

#my-work-page .my-workshop-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: var(--space-3, 12px);
  align-items: start;
}

#my-work-page .my-workshop-kanban > div {
  min-width: 0;
}

#my-work-page .my-workshop-lane {
  display: grid;
  min-width: 0;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border: 1px solid var(--border-subtle, #dedede);
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-subtle, #f8fafc);
}

#my-work-page .my-workshop-lane > header {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

#my-work-page .my-workshop-lane > header span {
  color: var(--content-strong, #111827);
  font-size: 12px;
  font-weight: 800;
}

#my-work-page .my-workshop-lane > header strong {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid rgba(7, 151, 202, 0.2);
  border-radius: var(--radius-sm, 4px);
  background: rgba(7, 151, 202, 0.08);
  color: var(--cp-accent, #0797ca);
  font-size: 12px;
  font-weight: 800;
}

#my-work-page .my-workshop-lane-list {
  display: grid;
  gap: var(--space-2, 8px);
  min-height: 92px;
}

#my-work-page .my-workshop-card {
  display: grid;
  gap: var(--space-2, 8px);
  min-width: 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-subtle, #dedede);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-1, #ffffff);
  box-shadow: var(--shadow-xs, none);
  animation: my-workshop-card-in var(--dur-fast, 160ms) ease-out both;
  transition:
    border-color var(--dur-fast, 160ms) ease,
    box-shadow var(--dur-fast, 160ms) ease,
    opacity var(--dur-fast, 160ms) ease,
    transform var(--dur-fast, 160ms) ease;
}

#my-work-page .my-workshop-card:hover {
  border-color: var(--border-strong, #c8c8c8);
  box-shadow: var(--shadow-sm, 0 6px 16px rgba(15, 23, 42, 0.08));
}

#my-work-page .my-workshop-card.is-available {
  border-left-color: var(--cp-accent, #0797ca);
}

#my-work-page .my-workshop-card.is-owned {
  border-left-color: var(--success, #16a34a);
}

#my-work-page .my-workshop-card.is-waiting {
  border-left-color: var(--warning, #d97706);
}

#my-work-page .my-workshop-card.is-donor {
  border-left-color: var(--info, #2563eb);
}

#my-work-page .my-workshop-card.is-leaving {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

#my-work-page .my-workshop-card-main {
  display: grid;
  min-width: 0;
  gap: 6px;
}

#my-work-page .my-workshop-card-title {
  display: grid;
  min-width: 0;
  gap: 6px;
}

#my-work-page .my-workshop-card-title strong {
  color: var(--content-strong, #111827);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#my-work-page .my-workshop-card p {
  margin: 0;
  color: var(--content-muted, #64748b);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#my-work-page .my-workshop-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(7, 151, 202, 0.22);
  border-radius: var(--radius-sm, 4px);
  background: rgba(7, 151, 202, 0.08);
  color: var(--cp-accent, #0797ca);
  font-size: 11px;
  font-weight: 800;
}

#my-work-page .my-workshop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  color: var(--content-muted, #64748b);
  font-size: 11px;
  line-height: 1.35;
}

#my-work-page .my-workshop-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#my-work-page .my-workshop-meta span:not(:last-child)::after {
  content: "|";
  margin-left: 6px;
  color: var(--content-subtle, #94a3b8);
}

#my-work-page .my-workshop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  align-items: center;
}

#my-work-page .my-workshop-actions .btn {
  min-height: 30px;
  white-space: normal;
}

@keyframes my-workshop-card-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1240px) {
  #my-work-page .my-workshop-kanban {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 700px) {
  #my-work-page .my-workshop-kanban {
    grid-template-columns: 1fr;
  }
}

/* Metrics reporting overhaul: scoped, accessible chart and drill-down UI. */
.cp #metrics-page :where(button.metric-card, button.metric-op-tile) {
  width: auto;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cp #metrics-page :where(.metric-card, .metric-op-tile).metric-drilldown {
  position: relative;
  padding-bottom: calc(var(--space-6) + var(--text-xs));
  transition: background-color var(--dur-micro) var(--ease-standard), box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #metrics-page :where(.metric-card, .metric-op-tile).metric-drilldown::after {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  content: "View details →";
}

.cp #metrics-page :where(.metric-card, .metric-op-tile).metric-drilldown:hover {
  background: var(--cp-accent-soft);
}

.cp #metrics-page :where(.metric-card, .metric-op-tile).metric-drilldown:focus-visible,
.cp #metrics-page .metric-details-toggle:focus-visible,
.cp #metrics-page .metric-trend-selector button:focus-visible,
.cp #metrics-page .metrics-ticket-link:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.cp #metrics-page .metric-panel-head > div:first-child {
  min-width: 0;
}

.cp #metrics-page .metric-trend-selector {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cp #metrics-page .metric-trend-selector button,
.cp #metrics-page .metric-details-toggle {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--content-2);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #metrics-page .metric-trend-selector button:hover,
.cp #metrics-page .metric-trend-selector button.active {
  border-color: var(--cp-accent);
  color: var(--cp-accent-content);
  background: var(--cp-accent);
}

.cp #metrics-page .metric-trend-layout {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  min-height: 286px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(25% - 1px),
    var(--border-1) 25%
  );
}

.cp #metrics-page .metric-trend-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 72px;
  padding: var(--space-5) var(--space-2) calc(var(--space-10) + var(--space-5));
  border-right: 1px solid var(--border-2);
  color: var(--content-2);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-align: right;
}

.cp #metrics-page .metric-trend-layout .metric-sales-chart {
  min-width: 0;
  padding-top: var(--space-5);
  background: transparent;
}

.cp #metrics-page .metric-sales-bars {
  grid-template-columns: minmax(10px, 1fr);
}

.cp #metrics-page .metric-sales-bars i {
  height: var(--metric-height) !important;
}

.cp #metrics-page .metric-mix-row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  border-bottom: 1px solid var(--border-1);
}

.cp #metrics-page .metric-mix-row:last-child {
  border-bottom: 0;
}

.cp #metrics-page .metric-mix-row.is-expanded {
  padding: var(--space-4);
  border-color: var(--cp-accent);
  border-bottom: 1px solid var(--cp-accent);
  background: var(--cp-accent-soft);
}

.cp #metrics-page .metric-mix-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
}

.cp #metrics-page .metric-mix-summary > em {
  color: var(--content-1);
  font-style: normal;
  font-weight: var(--weight-black);
}

.cp #metrics-page .metric-details-toggle {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
  background: var(--surface);
}

.cp #metrics-page .metric-details-toggle:hover,
.cp #metrics-page .metric-details-toggle[aria-expanded="true"] {
  color: var(--cp-accent-content);
  background: var(--cp-accent);
}

.cp #metrics-page .metric-mix-track {
  height: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: transparent;
}

.cp #metrics-page .metric-mix-scaled {
  display: flex;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.cp #metrics-page .metric-mix-scaled > span {
  display: block;
  height: 100%;
}

.cp #metrics-page .metric-mix-scaled .collected {
  background: var(--cp-success);
}

.cp #metrics-page .metric-mix-scaled .outstanding {
  background: var(--cp-warning);
}

.cp #metrics-page .metric-mix-scaled.refund .collected {
  background: var(--cp-danger);
}

.cp #metrics-page .metric-mix-detail {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--cp-accent);
  border-left-width: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page .metric-mix-detail.hidden {
  display: none;
}

.cp #metrics-page .metric-mix-detail-head {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

.cp #metrics-page .metric-mix-detail-head span {
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cp #metrics-page .metric-mix-detail-head h4 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp #metrics-page .metric-mix-detail-head p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #metrics-page .metric-category-stack {
  display: flex;
  min-height: calc(var(--space-8) + var(--space-4));
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

.cp #metrics-page .metric-category-stack > button {
  display: flex;
  flex: var(--category-share) 1 0;
  min-width: 7.5rem;
  min-height: calc(var(--space-8) + var(--space-4));
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-right: 1px solid var(--surface);
  color: var(--content-inv);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #metrics-page .metric-category-stack > button:hover {
  box-shadow: inset 0 0 0 var(--space-1) var(--surface);
}

.cp #metrics-page .metric-category-stack > button:focus-visible {
  position: relative;
  z-index: var(--z-base);
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp #metrics-page .metric-category-stack > button:last-child {
  border-right: 0;
}

.cp #metrics-page .metric-category-stack > button strong,
.cp #metrics-page .metric-category-stack > button small,
.cp #metrics-page .metric-category-stack > button .metric-category-action {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .metric-category-stack > button strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #metrics-page .metric-category-stack > button small {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  opacity: 1;
}

.cp #metrics-page .metric-category-stack > button .metric-category-action {
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.cp #metrics-page .metric-category-stack > button.tone-0 { color: var(--content-1); background: var(--cp-accent); }
.cp #metrics-page .metric-category-stack > button.tone-1 { color: var(--content-1); background: var(--cp-success); }
.cp #metrics-page .metric-category-stack > button.tone-2 { color: var(--content-1); background: var(--cp-warning); }
.cp #metrics-page .metric-category-stack > button.tone-3 { color: var(--content-inv); background: var(--cp-danger); }
.cp #metrics-page .metric-category-stack > button.tone-4 { color: var(--content-inv); background: var(--content-2); }

.cp #metrics-page .metric-mix-legend {
  display: flex;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-4);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #metrics-page .metric-mix-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cp #metrics-page .metric-mix-legend i {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-xs);
}

.cp #metrics-page .metric-mix-legend .collected { background: var(--cp-success); }
.cp #metrics-page .metric-mix-legend .refunded { background: var(--cp-danger); }
.cp #metrics-page .metric-mix-legend .outstanding { background: var(--cp-warning); }

.cp #metrics-page .metrics-detail-dialog {
  width: min(1120px, calc(100vw - (2 * var(--space-5))));
  max-height: calc(100vh - (2 * var(--space-5)));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  color: var(--content-1);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.cp #metrics-page .metrics-detail-dialog::backdrop {
  background: color-mix(in srgb, var(--cp-gray-90) 58%, transparent);
}

.cp #metrics-page .metrics-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
}

.cp #metrics-page .metrics-detail-head h3 {
  margin: var(--space-1) 0 0;
  color: var(--content-1);
  font-size: var(--text-xl);
}

.cp #metrics-page .metrics-detail-head span {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.cp #metrics-page .metrics-detail-table-wrap {
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding: var(--space-4);
}

.cp #metrics-page .metrics-detail-table {
  width: max-content;
  min-width: 100%;
}

.cp #metrics-page .metrics-detail-table th,
.cp #metrics-page .metrics-detail-table td {
  overflow-wrap: normal;
  text-align: left;
  white-space: nowrap;
}

.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="items"] {
  width: calc(var(--space-10) * 6);
  max-width: calc(var(--space-10) * 6);
  white-space: normal;
}

.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="quantity"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="line_count"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="category_value"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="amount"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="revenue"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="cogs"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="gross_profit"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="total"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="collected"],
.cp #metrics-page .metrics-detail-table :is(th, td)[data-column="balance"] {
  text-align: right;
}

.cp #metrics-page .metrics-ticket-link {
  padding: 0;
  border: 0;
  color: var(--cp-accent-hover);
  background: transparent;
  font: inherit;
  font-weight: var(--weight-bold);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 760px) {
  .cp #metrics-page .metric-panel-head {
    align-items: flex-start;
    flex-direction: column;
    padding-block: var(--space-3);
  }

  .cp #metrics-page .metric-trend-selector {
    justify-content: flex-start;
  }

  .cp #metrics-page .metric-trend-layout {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .cp #metrics-page .metric-trend-axis {
    min-width: 58px;
  }

  .cp #metrics-page .metric-mix-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cp #metrics-page .metric-mix-summary .metric-details-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .cp #metrics-page .metrics-detail-dialog {
    width: calc(100vw - (2 * var(--space-2)));
    max-height: calc(100vh - (2 * var(--space-2)));
  }
}

/* Repair calculator pricing state ----------------------------------------- */
.rpc-quote-output.rpc-quote-calculating {
  display: grid;
  place-items: center;
  min-height: 220px;
  white-space: normal;
  background: linear-gradient(
    105deg,
    var(--surface) 20%,
    var(--cp-accent-soft) 42%,
    var(--surface) 64%
  );
  background-size: 240% 100%;
  animation: repair-pricing-shimmer 1.4s var(--ease-standard) infinite;
}

.rpc-calculating-state,
.repair-pricing-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--content-1);
}

.rpc-calculating-state > span:last-child,
.repair-pricing-state > span:not(.repair-pricing-state-icon) {
  display: grid;
  gap: var(--space-1);
}

.rpc-calculating-state strong,
.repair-pricing-state strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.rpc-calculating-state small,
.repair-pricing-state small {
  color: var(--content-2);
  font-family: Inter, sans-serif;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.rpc-calculating-icon,
.repair-pricing-state-icon {
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 var(--space-6);
  background: var(--cp-accent);
  -webkit-mask: url("/assets/static/lucide-icons/sparkles.svg") center / contain no-repeat;
  mask: url("/assets/static/lucide-icons/sparkles.svg") center / contain no-repeat;
  animation: repair-pricing-pulse 900ms var(--ease-standard) infinite alternate;
}

.repair-pricing-state {
  justify-content: flex-start;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 34%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent-soft) 70%, var(--surface));
}

.repair-pricing-state-error {
  justify-content: space-between;
  border-color: color-mix(in srgb, var(--cp-danger) 35%, var(--border-1));
  background: var(--cp-danger-soft);
}

.repair-pricing-state-error button {
  min-height: var(--space-10);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--cp-accent-content);
  background: var(--cp-danger);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.repair-pricing-pending .ticket-extra-items-list,
.repair-pricing-pending .repair-fast-part-empty {
  visibility: hidden;
}

.repair-fast-part-picker-actions {
  display: grid;
  gap: var(--space-2);
}

.repair-fast-customer-part-picker,
.repair-customer-part-lookup-btn {
  border: 1px solid var(--cp-accent);
  color: var(--cp-accent-hover);
  background: var(--cp-accent-soft);
}

.repair-fast-part-picker:disabled,
.repair-order-custom-toggle:disabled {
  opacity: .55;
  cursor: wait;
}

.repair-calculated-price-badge,
.repair-customer-part-badge,
.repair-price-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--cp-accent-hover);
  background: var(--cp-accent-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  vertical-align: middle;
}

.repair-calculated-price-badge svg {
  width: var(--space-3);
  height: var(--space-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.repair-customer-part-badge {
  color: var(--content-2);
  background: var(--surface-3);
}

.repair-price-pending-badge {
  color: color-mix(in srgb, var(--cp-warning) 82%, var(--content-1));
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
}

.repair-line-price-pending .repair-line-price.is-price-pending {
  border-color: color-mix(in srgb, var(--cp-warning) 62%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 8%, var(--surface));
}

.repair-cost-breakdown {
  display: inline-grid;
  justify-items: end;
  gap: 2px;
  min-width: 132px;
}

.repair-cost-breakdown strong {
  color: var(--content-1);
  font-variant-numeric: tabular-nums;
}

.repair-cost-breakdown span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  white-space: nowrap;
}

.repair-cost-breakdown .repair-cost-basis {
  color: var(--cp-accent-hover);
}

@keyframes repair-pricing-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes repair-pricing-pulse {
  from { opacity: .5; transform: scale(.92); }
  to { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 700px) {
  .repair-fast-part-picker-actions {
    grid-template-columns: 1fr;
  }

  .repair-pricing-state-error {
    align-items: stretch;
    flex-direction: column;
  }

  .repair-cost-breakdown span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpc-quote-output.rpc-quote-calculating,
  .rpc-calculating-icon,
  .repair-pricing-state-icon {
    animation: none;
  }
}

/* Repair intake disclosures intentionally interrupt the workflow. Five visible
   seconds unlock the confirmation; the employee closes the notice explicitly
   after finishing the customer-facing explanation. */
body.repair-customer-disclosure-open {
  overflow: hidden;
}

.repair-customer-disclosure-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--content-1) 68%, transparent);
  cursor: wait;
  overscroll-behavior: contain;
  animation: cp-overlay-in var(--dur-fast) var(--ease-standard);
}

.repair-customer-disclosure-overlay.is-ready {
  cursor: default;
}

.repair-customer-disclosure-card {
  width: min(100%, 640px);
  max-height: calc(100vh - (var(--space-5) * 2));
  max-height: calc(100dvh - (var(--space-5) * 2));
  overflow: auto;
  padding: var(--space-8);
  border: 2px solid color-mix(in srgb, var(--cp-warning) 72%, var(--surface));
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  text-align: center;
  cursor: default;
  outline: none;
  animation: cp-pop-in var(--dur-base) var(--ease-out);
}

.repair-customer-disclosure-icon {
  display: grid;
  place-items: center;
  width: calc(var(--space-6) * 2);
  height: calc(var(--space-6) * 2);
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-warning) 16%, var(--surface));
  color: var(--cp-warning);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: 1;
}

.repair-customer-disclosure-eyebrow {
  margin: 0 0 var(--space-2);
  color: color-mix(in srgb, var(--cp-warning) 72%, var(--content-1));
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.repair-customer-disclosure-card h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.repair-customer-disclosure-message {
  margin: var(--space-5) auto 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body);
}

.repair-customer-disclosure-timer {
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.repair-customer-disclosure-timer strong {
  color: var(--content-1);
  font-size: var(--text-base);
}

.repair-customer-disclosure-ready {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.repair-customer-disclosure-ready[hidden] {
  display: none;
}

.repair-customer-disclosure-ready p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.repair-customer-disclosure-confirm {
  min-height: 44px;
  min-width: min(100%, 300px);
}

.repair-passcode-gate-overlay.is-passcode-required .repair-customer-disclosure-card {
  border-color: color-mix(in srgb, var(--cp-danger) 72%, var(--surface));
}

.repair-passcode-gate-overlay.is-passcode-required .repair-customer-disclosure-icon {
  background: color-mix(in srgb, var(--cp-danger) 14%, var(--surface));
  color: var(--cp-danger);
}

.repair-passcode-gate-overlay.is-passcode-required .repair-customer-disclosure-eyebrow {
  color: color-mix(in srgb, var(--cp-danger) 72%, var(--content-1));
}

.repair-passcode-gate-script {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  text-align: left;
}

.repair-passcode-gate-actions {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: stretch;
}

.repair-passcode-gate-actions .btn {
  min-height: 44px;
  white-space: normal;
}

.repair-passcode-gate-actions .btn:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 320px);
}

@media (max-width: 600px) {
  .repair-customer-disclosure-overlay {
    padding: var(--space-3);
  }

  .repair-customer-disclosure-card {
    max-height: calc(100vh - (var(--space-3) * 2));
    max-height: calc(100dvh - (var(--space-3) * 2));
    padding: var(--space-6) var(--space-4);
  }

  .repair-customer-disclosure-card h2 {
    font-size: var(--text-xl);
  }

  .repair-customer-disclosure-message {
    font-size: var(--text-base);
  }

  .repair-customer-disclosure-confirm {
    width: 100%;
  }

  .repair-passcode-gate-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .repair-customer-disclosure-overlay,
  .repair-customer-disclosure-card {
    animation: none;
  }
}

.repair-customer-disclosure-records {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.repair-customer-disclosure-records-head {
  display: grid;
  gap: var(--space-1);
}

.repair-customer-disclosure-records-head strong {
  color: var(--content-1);
  font-size: var(--text-base);
}

.repair-customer-disclosure-records-head span {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.repair-customer-disclosure-records-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.repair-customer-disclosure-record {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.repair-customer-disclosure-record span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.repair-customer-disclosure-record strong {
  color: var(--content-2);
  font-size: var(--text-base);
}

.repair-customer-disclosure-record.is-recorded strong {
  color: color-mix(in srgb, var(--cp-success) 72%, var(--content-1));
}

.repair-customer-disclosure-record.is-missing strong {
  color: color-mix(in srgb, var(--cp-warning) 72%, var(--content-1));
}

@media (max-width: 600px) {
  .repair-customer-disclosure-records-grid {
    grid-template-columns: 1fr;
  }
}

#my-work-page .my-work-card,
#my-work-page .my-work-admin-row {
  border-radius: 4px;
  border-color: #dedede;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

#my-work-page .my-work-card:hover,
#my-work-page .my-work-admin-row:hover {
  border-color: #c8c8c8;
  box-shadow: none;
  transform: none;
}

#my-work-page .my-work-card-title {
  font-size: 13px;
}

#my-work-page .my-work-card-desc,
#my-work-page .my-work-card-meta {
  font-size: 12px;
}

#my-work-page .my-work-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#my-work-page .my-work-chat-header p {
  display: none;
}

#my-work-page .my-work-chat-title {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0;
}

#my-work-page .my-work-chat-shell {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  min-height: 520px;
}

#my-work-page .my-work-chat-contacts,
#my-work-page .my-work-chat-thread,
#my-work-page .my-work-chat-thread-head,
#my-work-page .my-work-chat-form {
  background: #ffffff;
}

#my-work-page .my-work-chat-contact,
#my-work-page .my-work-chat-bubble {
  border-radius: 4px;
  box-shadow: none;
}

#my-work-page .my-work-chat-bubble {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-self: stretch;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #26313d;
}

#my-work-page .my-work-chat-bubble.is-mine,
#my-work-page .my-work-chat-bubble.is-theirs {
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #26313d;
}

#my-work-page .my-work-chat-message-avatar {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: #0b8068;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

#my-work-page .my-work-chat-message-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#my-work-page .my-work-chat-message-copy header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#my-work-page .my-work-chat-message-copy header strong {
  color: #17202a;
  font-size: 14px;
  font-weight: 900;
}

#my-work-page .my-work-chat-message-copy header time {
  color: #6b7280;
  font-size: 11px;
  font-weight: 800;
}

#my-work-page .my-work-chat-message-copy > div {
  color: #26313d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.46;
}

#my-work-page .my-work-chat-date-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: #6b7280;
  font-size: 11px;
  font-weight: 900;
  text-transform: lowercase;
}

#my-work-page .my-work-chat-date-divider::before,
#my-work-page .my-work-chat-date-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: rgba(100, 116, 139, 0.22);
}

#my-work-page .my-work-admin-bottom {
  gap: 14px;
}

#my-work-page .my-work-admin-heading {
  padding: 14px 18px;
  border: 1px solid #dedede;
  border-radius: 0;
  background: #4a4a4a;
  box-shadow: none;
}

#my-work-page .my-work-admin-heading .my-work-eyebrow {
  display: none;
}

#my-work-page .my-work-admin-heading strong {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
}

#my-work-page .my-work-shell {
  grid-template-columns: 1fr;
}

#my-work-page .my-work-shell > .dashboard-left {
  min-width: 0;
}

#compupod-chat-page.home-main {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 116px);
  margin: 0;
  padding: 0;
  background: #1f2329;
  color: #d7dade;
}

#compupod-chat-page > .dashboard-breadcrumb {
  display: none;
}

.compupod-slack-workspace {
  height: calc(100vh - 116px);
  min-height: 540px;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  overflow: hidden;
  background: #1f2329;
}

.compupod-slack-topbar {
  min-width: 0;
  display: grid;
  grid-template-columns: 150px minmax(240px, 560px) 48px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: #4b1f52;
  color: #eee8f1;
}

.compupod-slack-history {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 24px;
  line-height: 1;
}

.compupod-slack-global-search {
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.compupod-slack-global-search span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compupod-slack-topbar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  justify-self: start;
  border-radius: 6px;
  background: #ffffff;
  padding: 4px;
}

#compupod-chat-page .my-work-chat-panel {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 0;
  border: 0;
  border-radius: 0;
  background: #1f2329;
  box-shadow: none;
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-contacts {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 10px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, #2b1230 0%, #26102b 54%, #1f0d24 100%);
  color: #cfc3d2;
  overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.compupod-chat-sidebar-head {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 6px;
  color: #ffffff;
}

.compupod-chat-sidebar-head strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compupod-chat-sidebar-head span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
}

#compupod-chat-page .my-work-chat-search {
  margin: 0;
}

#compupod-chat-page .my-work-chat-search input {
  height: 34px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(7, 8, 10, 0.42);
  color: #f6f1f7;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

#compupod-chat-page .my-work-chat-search input::placeholder {
  color: rgba(234, 224, 238, 0.66);
}

.compupod-chat-shortcuts {
  display: grid;
  gap: 2px;
  padding: 3px 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.compupod-chat-shortcuts button {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(232, 222, 236, 0.76);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.compupod-chat-shortcuts button.is-active {
  background: #8a3f91;
  color: #ffffff;
}

.compupod-chat-shortcuts button span {
  width: 18px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  font-size: 16px;
}

#compupod-chat-page .my-work-chat-contact-list {
  min-height: 0;
  display: grid;
  gap: 14px;
  overflow: visible;
}

#compupod-chat-page .my-work-chat-contact-group {
  display: grid;
  gap: 2px;
}

#compupod-chat-page .my-work-chat-contact-group > span {
  display: block;
  padding: 4px 8px 3px;
  color: rgba(232, 222, 236, 0.76);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

#compupod-chat-page .my-work-chat-search-state {
  padding: 8px;
  color: rgba(238, 232, 242, 0.7);
  font-size: 12px;
  font-weight: 800;
}

#compupod-chat-page .my-work-chat-search-result {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(234, 224, 238, 0.82);
  text-align: left;
}

#compupod-chat-page .my-work-chat-search-result:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

#compupod-chat-page .my-work-chat-search-result strong,
#compupod-chat-page .my-work-chat-search-result span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-search-result strong {
  font-size: 13px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-search-result span {
  color: rgba(232, 222, 236, 0.62);
  font-size: 12px;
  font-weight: 700;
}

#compupod-chat-page .my-work-chat-contact {
  min-width: 0;
  min-height: 31px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(234, 224, 238, 0.74);
  text-align: left;
  box-shadow: none;
}

#compupod-chat-page .my-work-chat-contact:hover,
#compupod-chat-page .my-work-chat-contact.is-active {
  background: #8a3f91;
  color: #ffffff;
}

#compupod-chat-page .my-work-chat-contact.is-channel {
  min-height: 28px;
}

#compupod-chat-page .my-work-chat-avatar {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 5px;
  background: #007a5a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

#compupod-chat-page .my-work-chat-avatar.has-image {
  overflow: hidden;
  background: #34383e;
}

#compupod-chat-page .my-work-chat-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#compupod-chat-page .my-work-chat-avatar.is-department {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: 18px;
  font-weight: 800;
}

#compupod-chat-page .my-work-chat-avatar.is-private-channel {
  font-size: 14px;
}

#compupod-chat-page .my-work-chat-contact-main {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#compupod-chat-page .my-work-chat-contact-main strong {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

#compupod-chat-page .my-work-chat-contact-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-contact-main > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(232, 222, 236, 0.58);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-contact:hover .my-work-chat-contact-main > span,
#compupod-chat-page .my-work-chat-contact.is-active .my-work-chat-contact-main > span {
  color: rgba(255, 255, 255, 0.74);
}

#compupod-chat-page .my-work-chat-contact.is-channel .my-work-chat-contact-main > span {
  display: none;
}

#compupod-chat-page .my-work-chat-contact.is-active .my-work-chat-contact-name,
#compupod-chat-page .my-work-chat-contact:hover .my-work-chat-contact-name {
  color: #ffffff;
}

#compupod-chat-page .my-work-chat-today {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

#compupod-chat-page .my-work-chat-unread {
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #00a884;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-show-all {
  margin: 2px 8px 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(238, 232, 242, 0.82);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

#compupod-chat-page .my-work-chat-show-all:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

#compupod-chat-page .dashboard-empty {
  margin: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 232, 242, 0.72);
}

#compupod-chat-page .my-work-chat-thread {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) auto;
  background: #1f2329;
  color: #d7dade;
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-thread-head {
  min-width: 0;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #1f2329;
}

#compupod-chat-page .my-work-chat-thread-head > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#compupod-chat-page .my-work-chat-thread-head strong {
  min-width: 0;
  overflow: hidden;
  color: #f3f4f6;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-thread-head em,
#compupod-chat-page .my-work-chat-thread-head span span {
  color: #9ca3af;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

#compupod-chat-page .my-work-chat-thread-head .my-work-chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  font-size: 15px;
}

#compupod-chat-page .my-work-chat-thread-head .my-work-chat-avatar.is-department {
  width: 28px;
  height: 28px;
  color: #f3f4f6;
  font-size: 23px;
}

#compupod-chat-page .my-work-chat-thread-head .my-work-chat-avatar.is-private-channel {
  font-size: 18px;
}

#compupod-chat-page .my-work-chat-call-btn {
  margin-left: auto;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-call-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

#compupod-chat-page .my-work-chat-messages {
  min-height: 0;
  display: block;
  padding: 18px 24px 20px;
  background: #1f2329;
  overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

#compupod-chat-page .my-work-chat-empty {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

#compupod-chat-page .my-work-chat-bubble {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d7dade;
  box-shadow: none;
}

#compupod-chat-page .my-work-chat-date-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
  color: #aeb4bc;
  font-size: 12px;
  font-weight: 900;
  text-transform: lowercase;
}

#compupod-chat-page .my-work-chat-date-divider::before,
#compupod-chat-page .my-work-chat-date-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: rgba(255, 255, 255, 0.12);
}

#compupod-chat-page .my-work-chat-load-more {
  display: block;
  margin: 0 auto 12px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #d7dade;
  font-size: 12px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-load-more:hover {
  background: rgba(255, 255, 255, 0.12);
}

#compupod-chat-page .my-work-chat-bubble:hover {
  background: rgba(255, 255, 255, 0.035);
}

#compupod-chat-page .my-work-chat-bubble.is-mine,
#compupod-chat-page .my-work-chat-bubble.is-theirs {
  margin-left: 0;
  margin-right: 0;
  align-self: auto;
  border: 0;
  background: transparent;
  color: #d7dade;
}

#compupod-chat-page .my-work-chat-bubble.is-urgent {
  padding-left: 10px;
  border-left: 3px solid #ffbc1f;
}

#compupod-chat-page .my-work-chat-message-avatar {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: #0b8068;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-message-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#compupod-chat-page .my-work-chat-message-copy header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#compupod-chat-page .my-work-chat-message-copy header strong {
  min-width: 0;
  overflow: hidden;
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-message-copy header time {
  flex: 0 0 auto;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
}

#compupod-chat-page .my-work-chat-message-copy > div {
  color: #d7dade;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

#compupod-chat-page .my-work-chat-attachments,
#compupod-chat-page .my-work-chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#compupod-chat-page .my-work-chat-attachments a {
  max-width: min(360px, 100%);
  display: inline-grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: #f2f3f5;
  text-decoration: none;
}

#compupod-chat-page .my-work-chat-attachments a span {
  color: #aeb4bc;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

#compupod-chat-page .my-work-chat-attachments a strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-reactions button,
#compupod-chat-page .my-work-chat-message-copy footer button {
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #d7dade;
  font-size: 12px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-reactions button:hover,
#compupod-chat-page .my-work-chat-message-copy footer button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}

#compupod-chat-page .my-work-chat-message-copy footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

#compupod-chat-page .my-work-chat-message-copy footer:empty {
  display: none;
}

#compupod-chat-page .my-work-chat-message-copy footer span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #b9c0ca;
  font-size: 11px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0 24px 22px;
  padding: 10px;
  border: 1px solid #565c62;
  border-radius: 8px;
  background: #252a31;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  position: relative;
}

#compupod-chat-page .my-work-chat-format-toolbar {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 2px;
}

#compupod-chat-page .my-work-chat-icon-btn,
#compupod-chat-page .my-work-chat-tool-btn {
  position: relative;
}

#compupod-chat-page .my-work-chat-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #aeb4bc;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

#compupod-chat-page .my-work-chat-icon-btn:hover,
#compupod-chat-page .my-work-chat-icon-btn.is-active,
#compupod-chat-page .my-work-chat-tool-btn:hover,
#compupod-chat-page .my-work-chat-tool-btn.is-active {
  background: #3a4048;
  color: #f3f4f6;
}

#compupod-chat-page .my-work-chat-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

#compupod-chat-page .my-work-chat-strike {
  text-decoration: line-through;
}

#compupod-chat-page .my-work-chat-tool-separator {
  width: 1px;
  height: 24px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.12);
}

#compupod-chat-page [data-tooltip]:is(:hover, :focus-visible)::after {
  content: attr(data-tooltip);
  white-space: pre;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: var(--cp-z-tooltip);
  min-width: 104px;
  transform: translateX(-50%);
  padding: 9px 11px;
  border: 1px solid #424952;
  border-radius: 10px;
  background: #20242a;
  color: #f3f4f6;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}

#compupod-chat-page [data-tooltip][data-shortcut]:is(:hover, :focus-visible)::after {
  content: attr(data-tooltip) "\A" attr(data-shortcut);
}

#compupod-chat-page [data-tooltip]:is(:hover, :focus-visible)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  z-index: var(--cp-z-tooltip);
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: #20242a;
  border-right: 1px solid #424952;
  border-bottom: 1px solid #424952;
  pointer-events: none;
}

#compupod-chat-page .my-work-chat-editor {
  min-height: 54px;
  max-height: 150px;
  width: 100%;
  overflow-y: auto;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #f2f3f5;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.38;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#compupod-chat-page .my-work-chat-editor:empty::before {
  content: attr(data-placeholder);
  color: #a1a8b1;
  pointer-events: none;
}

#compupod-chat-page .my-work-chat-editor.is-disabled {
  opacity: 0.62;
}

#compupod-chat-page .my-work-chat-editor a,
#compupod-chat-page .my-work-chat-message-copy a {
  color: #1d9bd1;
  text-decoration: none;
}

#compupod-chat-page .my-work-chat-editor a:hover,
#compupod-chat-page .my-work-chat-message-copy a:hover {
  text-decoration: underline;
}

#compupod-chat-page .my-work-chat-editor code,
#compupod-chat-page .my-work-chat-message-copy code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
}

#compupod-chat-page .my-work-chat-editor pre,
#compupod-chat-page .my-work-chat-message-copy pre {
  margin: 4px 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: #15191f;
  overflow-x: auto;
}

#compupod-chat-page .my-work-chat-editor blockquote,
#compupod-chat-page .my-work-chat-message-copy blockquote {
  margin: 4px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid #747b86;
  color: #cfd4db;
}

#compupod-chat-page .my-work-chat-editor ol,
#compupod-chat-page .my-work-chat-editor ul,
#compupod-chat-page .my-work-chat-message-copy ol,
#compupod-chat-page .my-work-chat-message-copy ul {
  margin: 4px 0 4px 22px;
  padding: 0;
}

#compupod-chat-page .my-work-chat-mention-token {
  display: inline;
  border-radius: 4px;
  background: rgba(255, 188, 31, 0.18);
  color: #ffbc1f;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-plus-menu,
#compupod-chat-page .my-work-chat-picker {
  position: absolute;
  left: 10px;
  bottom: 52px;
  z-index: 120;
  width: min(420px, calc(100vw - 44px));
  border: 1px solid #424952;
  border-radius: 8px;
  background: #20242a;
  color: #f3f4f6;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-plus-menu {
  padding: 8px 0;
}

#compupod-chat-page .my-work-chat-plus-menu button {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: #f3f4f6;
  font-size: 16px;
  font-weight: 800;
  text-align: left;
}

#compupod-chat-page .my-work-chat-plus-menu button:hover {
  background: #1264a3;
}

#compupod-chat-page .my-work-chat-plus-menu kbd,
#compupod-chat-page .my-work-chat-mention-picker kbd {
  color: #aeb4bc;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-picker {
  width: min(460px, calc(100vw - 44px));
  max-height: 500px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

#compupod-chat-page .my-work-chat-picker-tabs {
  display: flex;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid #3a4048;
  color: #aeb4bc;
  font-size: 24px;
}

#compupod-chat-page .my-work-chat-picker input {
  margin: 14px 16px 10px;
  min-height: 44px;
  border: 2px solid #159bd3;
  border-radius: 10px;
  background: #1b1f25;
  color: #f3f4f6;
  font-size: 16px;
  padding: 0 14px;
  outline: none;
}

#compupod-chat-page .my-work-chat-picker section {
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 18px;
}

#compupod-chat-page .my-work-chat-picker section strong {
  display: block;
  margin: 8px 0 10px;
  color: #d7dade;
  font-size: 14px;
}

#compupod-chat-page .my-work-chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

#compupod-chat-page .my-work-chat-emoji-grid button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 24px;
}

#compupod-chat-page .my-work-chat-emoji-grid button:hover {
  background: #343a42;
}

#compupod-chat-page .my-work-chat-mention-picker {
  width: min(680px, calc(100vw - 44px));
  max-height: 340px;
  grid-template-rows: minmax(0, 1fr) auto;
}

#compupod-chat-page .my-work-chat-mention-list {
  overflow-y: auto;
}

#compupod-chat-page .my-work-chat-mention-list button {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 36px minmax(120px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #d7dade;
  text-align: left;
}

#compupod-chat-page .my-work-chat-mention-list button:hover,
#compupod-chat-page .my-work-chat-mention-list button.is-active {
  background: #343a42;
}

#compupod-chat-page .my-work-chat-mention-picker footer {
  padding: 9px 14px;
  border-top: 1px solid #3a4048;
  background: #252a31;
  color: #aeb4bc;
  font-size: 12px;
  font-weight: 800;
}

#compupod-chat-page .my-work-chat-audio-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

#compupod-chat-page .my-work-chat-record-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f04438;
  box-shadow: 0 0 0 5px rgba(240, 68, 56, 0.18);
}

#compupod-chat-page .my-work-chat-audio-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

#compupod-chat-page .my-work-chat-audio-wave i {
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: #9ca3af;
  animation: my-work-chat-wave 760ms ease-in-out infinite alternate;
}

#compupod-chat-page .my-work-chat-audio-wave i:nth-child(2) { animation-delay: 100ms; }
#compupod-chat-page .my-work-chat-audio-wave i:nth-child(3) { animation-delay: 200ms; }
#compupod-chat-page .my-work-chat-audio-wave i:nth-child(4) { animation-delay: 300ms; }
#compupod-chat-page .my-work-chat-audio-wave i:nth-child(5) { animation-delay: 400ms; }

@keyframes my-work-chat-wave {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

#compupod-chat-page .my-work-chat-audio-status button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

#compupod-chat-page .my-work-chat-tool-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transition: transform 140ms ease, background 140ms ease;
}

#compupod-chat-page .my-work-chat-tool-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

#compupod-chat-page .my-work-chat-tool-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

#compupod-chat-page .my-work-chat-plus-btn {
  border-radius: 50%;
  font-size: 24px;
}

#compupod-chat-page .my-work-chat-plus-btn.is-open {
  transform: rotate(45deg);
  background: #5f666f;
}

#compupod-chat-page .my-work-chat-popup-wrap {
  margin-right: auto;
  color: #c2c8d0;
  font-size: 12px;
  font-weight: 900;
}

#compupod-chat-page #my-work-chat-send {
  min-width: 86px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: #007a5a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: none;
}

#compupod-chat-page #my-work-chat-send:hover:not(:disabled) {
  background: #008c68;
}

#compupod-chat-page #my-work-chat-send:disabled {
  background: #4b535c;
  color: #aeb4bc;
  opacity: 1;
}

.my-work-chat-modal,
.my-work-chat-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.58);
}

.my-work-chat-modal {
  align-items: start;
  justify-items: center;
  overflow-y: auto;
}

.my-work-chat-modal > section {
  max-height: calc(100vh - 48px);
  margin: 0;
  overflow-y: auto;
}

.my-work-chat-modal.hidden,
.my-work-chat-video-modal.hidden {
  display: none;
}

.my-work-chat-link-card,
.my-work-chat-video-modal > section {
  width: min(620px, calc(100vw - 40px));
  border: 1px solid #363c45;
  border-radius: 10px;
  background: #1f2329;
  color: #f3f4f6;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.my-work-chat-link-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  position: relative;
}

.my-work-chat-link-card h3,
.my-work-chat-video-modal h3 {
  margin: 0;
  color: #f3f4f6;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
}

.my-work-chat-modal-close,
.my-work-chat-video-modal header button {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #c7ccd3;
  font-size: 32px;
  line-height: 1;
}

.my-work-chat-link-card label {
  display: grid;
  gap: 8px;
  color: #d7dade;
  font-size: 16px;
  font-weight: 900;
}

.my-work-chat-link-card input {
  min-height: 44px;
  border: 1px solid #555c66;
  border-radius: 8px;
  background: #1b1f25;
  color: #f3f4f6;
  font-size: 16px;
  padding: 0 12px;
}

.my-work-chat-link-card input:focus {
  border-color: #159bd3;
  box-shadow: 0 0 0 4px rgba(21, 155, 211, 0.22);
  outline: none;
}

.my-work-chat-link-card > div {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.my-work-chat-video-modal > section {
  width: min(760px, calc(100vw - 40px));
  overflow: hidden;
}

.my-work-chat-video-modal header {
  min-height: 80px;
  display: flex;
  align-items: center;
  padding: 0 34px;
  border-bottom: 1px solid #363c45;
  position: relative;
}

.my-work-chat-video-warning {
  margin: 20px 44px 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: #362d1d;
  color: #fff7e6;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.my-work-chat-video-stage {
  height: 420px;
  display: grid;
  place-items: center;
  margin: 28px 44px;
  border-radius: 10px;
  background: #252a31;
  overflow: hidden;
}

.my-work-chat-video-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.my-work-chat-video-modal footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 34px;
  border-top: 1px solid #363c45;
}

.my-work-chat-video-modal footer button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #d7dade;
  font-size: 14px;
  font-weight: 900;
}

.my-work-chat-video-modal footer .btn-primary {
  margin-left: auto;
  background: #2d333b;
}

#compupod-chat-page,
#compupod-chat-page button,
#compupod-chat-page input {
  font-family: Slack-Lato, Lato, "Helvetica Neue", Arial, sans-serif;
}

.compupod-slack-topbar {
  background: #350d36;
}

#compupod-chat-page .my-work-chat-contacts {
  background: #3f0e40;
  color: #bcabbf;
}

.compupod-slack-global-search {
  border: 0;
  cursor: pointer;
}

#compupod-chat-page .my-work-chat-contact:hover {
  background: rgba(255, 255, 255, 0.12);
}

#compupod-chat-page .my-work-chat-contact.is-active,
.compupod-chat-shortcuts button.is-active {
  background: #8d3f98;
  color: #ffffff;
}

#compupod-chat-page .my-work-chat-thread {
  grid-template-rows: 104px minmax(0, 1fr) auto;
  background: #1d1c21;
}

#compupod-chat-page .my-work-chat-thread.is-files-view {
  grid-template-rows: 104px minmax(0, 1fr);
}

#compupod-chat-page .my-work-chat-thread.is-files-view .my-work-chat-form {
  display: none;
}

#compupod-chat-page .my-work-chat-thread-head {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 38px;
  gap: 0;
  padding: 0;
  background: #1d1c21;
}

#compupod-chat-page .my-work-chat-head-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px 6px;
}

#compupod-chat-page .my-work-chat-head-main > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#compupod-chat-page .my-work-chat-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

#compupod-chat-page .my-work-chat-head-icon {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #3d3d42;
  border-radius: 7px;
  background: transparent;
  color: #c9c9cf;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

#compupod-chat-page .my-work-chat-head-icon:hover,
#compupod-chat-page .my-work-chat-head-icon.is-active {
  border-color: #55545b;
  background: #2b2a30;
  color: #ffffff;
  transform: translateY(-1px);
}

#compupod-chat-page .my-work-chat-head-icon span {
  font-size: 14px;
  font-weight: 900;
}

#compupod-chat-page .my-work-chat-head-tabs {
  display: flex;
  align-items: end;
  gap: 20px;
  padding: 0 20px;
  border-top: 0;
}

#compupod-chat-page .my-work-chat-head-tabs button {
  height: 38px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #c9c9cf;
  font-size: 14px;
  font-weight: 900;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

#compupod-chat-page .my-work-chat-head-tabs button:hover {
  color: #ffffff;
}

#compupod-chat-page .my-work-chat-head-tabs button.is-active {
  border-bottom-color: #e8c6ee;
  color: #ffffff;
}

#compupod-chat-page .my-work-chat-messages {
  padding: 0 0 20px;
  background: #1d1c21;
}

#compupod-chat-page .my-work-chat-date-divider {
  position: relative;
  margin: 14px 0;
}

#compupod-chat-page .my-work-chat-date-divider button {
  position: relative;
  z-index: 1;
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid #3d3d42;
  border-radius: 999px;
  background: #1d1c21;
  color: #d1d2d3;
  font-size: 13px;
  font-weight: 900;
  text-transform: lowercase;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

#compupod-chat-page .my-work-chat-date-divider button:hover {
  border-color: #55545b;
  background: #242329;
  transform: translateY(-1px);
}

#compupod-chat-page .my-work-chat-bubble {
  position: relative;
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 8px 24px 8px 22px;
  transition: background 110ms ease;
}

#compupod-chat-page .my-work-chat-bubble:hover,
#compupod-chat-page .my-work-chat-bubble.is-jump-target {
  background: #222529;
}

#compupod-chat-page .my-work-chat-bubble.is-unread {
  box-shadow: inset 3px 0 0 #1d9bd1;
}

#compupod-chat-page .my-work-chat-message-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-work-chat-menu {
  position: fixed;
  z-index: var(--cp-z-floating);
  min-width: 300px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 6px 0;
  border: 1px solid #3d3d42;
  border-radius: 8px;
  background: #222529;
  color: #f2f3f5;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  animation: my-work-chat-pop 120ms ease;
}

.my-work-chat-menu.hidden {
  display: none;
}

@keyframes my-work-chat-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.my-work-chat-menu button,
.my-work-chat-menu label {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.my-work-chat-menu button:hover {
  background: #1264a3;
  color: #ffffff;
}

.my-work-chat-menu button.is-danger {
  color: var(--cp-danger);
}

.my-work-chat-menu button.is-danger:hover {
  background: color-mix(in srgb, var(--cp-danger) 18%, transparent);
  color: var(--cp-danger);
}

.my-work-chat-menu button:disabled {
  color: #a5a5ab;
}

.my-work-chat-menu button:disabled:hover {
  background: transparent;
}

.my-work-chat-menu kbd,
.my-work-chat-menu em {
  color: #a5a5ab;
  font: inherit;
  font-size: 13px;
}

.my-work-chat-menu-divider {
  height: 1px;
  margin: 6px 0;
  background: #3d3d42;
}

.my-work-chat-menu input {
  min-height: 38px;
  margin: 8px 12px;
  border: 2px solid #1d9bd1;
  border-radius: 8px;
  background: #1d1c21;
  color: #f2f3f5;
  padding: 0 12px;
  outline: none;
}

.my-work-chat-menu-title {
  display: block;
  padding: 12px 18px 6px;
  color: #a5a5ab;
  font-size: 14px;
  font-weight: 700;
}

.my-work-chat-notification-menu button {
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 76px;
}

.my-work-chat-notification-menu button strong,
.my-work-chat-notification-menu button em {
  display: block;
}

.my-work-chat-notification-menu button.is-selected {
  color: #1d9bd1;
}

.my-work-chat-reaction-popover {
  width: 390px;
  padding: 10px;
}

.my-work-chat-reaction-popover .my-work-chat-emoji-grid {
  grid-template-columns: repeat(8, 1fr);
}

.my-work-chat-forward-card,
.my-work-chat-members-card,
.my-work-chat-search-modal section {
  width: min(760px, calc(100vw - 42px));
  border: 1px solid #3d3d42;
  border-radius: 10px;
  background: #1d1c21;
  color: #f2f3f5;
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.58);
  animation: my-work-chat-pop 140ms ease;
}

.my-work-chat-forward-card {
  display: grid;
  gap: 16px;
  padding: 28px;
  position: relative;
}

.my-work-chat-forward-card h3,
.my-work-chat-members-card h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
}

.my-work-chat-forward-card > input,
.my-work-chat-forward-note {
  min-height: 52px;
  border: 1px solid #56565c;
  border-radius: 8px;
  background: #1d1c21;
  color: #f2f3f5;
  font-size: 18px;
  padding: 0 14px;
  outline: none;
}

.my-work-chat-forward-note {
  min-height: 118px;
  padding: 14px;
}

.my-work-chat-forward-note:empty::before {
  content: attr(data-placeholder);
  color: #a5a5ab;
}

.my-work-chat-forward-results {
  max-height: 190px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}

.my-work-chat-forward-results button,
.my-work-chat-add-member,
.my-work-chat-member-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(130px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #f2f3f5;
  text-align: left;
}

.my-work-chat-forward-results button:hover,
.my-work-chat-forward-results button.is-active {
  background: #303238;
}

.my-work-chat-forward-card blockquote {
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 4px solid #56565c;
  color: #c9c9cf;
}

.my-work-chat-forward-card footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.my-work-chat-members-card {
  min-height: min(820px, calc(100vh - 48px));
  padding: 26px;
  position: relative;
}

.my-work-chat-members-card header {
  display: grid;
  gap: 18px;
}

.my-work-chat-members-card header div,
.my-work-chat-members-card nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.my-work-chat-members-card header button,
.my-work-chat-members-card nav button {
  min-height: 38px;
  border: 1px solid #56565c;
  border-radius: 6px;
  background: transparent;
  color: #f2f3f5;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 900;
}

.my-work-chat-members-card nav {
  margin-top: 22px;
  border-bottom: 1px solid #3d3d42;
}

.my-work-chat-members-card nav button {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}

.my-work-chat-members-card nav button.is-active {
  border-bottom-color: #e8c6ee;
}

.my-work-chat-members-card label {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  border: 2px solid #1d9bd1;
  border-radius: 10px;
  padding: 0 16px;
}

.my-work-chat-members-card label input {
  flex: 1;
  border: 0;
  background: transparent;
  color: #f2f3f5;
  font-size: 20px;
  outline: none;
}

.my-work-chat-members-list {
  display: grid;
  gap: 8px;
}

.my-work-chat-member-row span:last-child {
  color: #a5a5ab;
}

.my-work-chat-search-modal {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: grid;
  align-items: start;
  justify-items: center;
  padding-top: 32px;
  background: rgba(0, 0, 0, 0.35);
}

.my-work-chat-search-modal.hidden {
  display: none;
}

.my-work-chat-search-modal section {
  width: min(1120px, calc(100vw - 44px));
  overflow: hidden;
}

.my-work-chat-search-modal header {
  height: 70px;
  display: grid;
  grid-template-columns: 34px auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-bottom: 1px solid #3d3d42;
}

.my-work-chat-search-modal header strong {
  color: #1d9bd1;
  background: rgba(29, 155, 209, 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}

.my-work-chat-search-modal header input {
  border: 0;
  background: transparent;
  color: #f2f3f5;
  font-size: 20px;
  outline: none;
}

.my-work-chat-search-modal header button {
  border: 0;
  background: transparent;
  color: #c9c9cf;
  font-size: 18px;
}

.my-work-chat-search-suggestion,
.my-work-chat-search-modal footer {
  padding: 16px 24px;
  border-bottom: 1px solid #3d3d42;
  color: #c9c9cf;
}

.my-work-chat-search-modal-results {
  max-height: 360px;
  overflow-y: auto;
}

.my-work-chat-search-modal-results button {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 14px 24px;
  border: 0;
  border-bottom: 1px solid #303238;
  background: transparent;
  color: #f2f3f5;
  text-align: left;
}

.my-work-chat-search-modal-results button:hover {
  background: #222529;
}

.my-work-chat-files-view {
  width: min(1120px, calc(100% - 80px));
  margin: 32px auto 70px;
  animation: my-work-chat-pop 150ms ease;
}

.my-work-chat-files-search {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #3d3d42;
  border-radius: 8px;
  padding: 0 14px;
  color: #a5a5ab;
}

.my-work-chat-files-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: #f2f3f5;
  font-size: 18px;
  outline: none;
}

.my-work-chat-files-controls {
  display: flex;
  gap: 10px;
  margin: 24px 0 28px;
}

.my-work-chat-files-controls button,
.my-work-chat-file-type-links button {
  min-height: 38px;
  border: 1px solid #55545b;
  border-radius: 6px;
  background: transparent;
  color: #f2f3f5;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 900;
}

.my-work-chat-files-controls button.is-active {
  border-color: #1d9bd1;
  background: #1d9bd1;
  color: #101114;
}

.my-work-chat-files-sort {
  margin-left: auto;
}

.my-work-chat-files-view h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c9c9cf;
  font-size: 16px;
}

.my-work-chat-files-view h4 button {
  border: 0;
  background: transparent;
  color: #1d9bd1;
  font: inherit;
}

.my-work-chat-media-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.my-work-chat-media-strip a {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #2b2a30;
  color: #c9c9cf;
  text-decoration: none;
}

.my-work-chat-media-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-work-chat-file-list {
  overflow: hidden;
  border: 1px solid #3d3d42;
  border-radius: 10px;
}

.my-work-chat-file-list a {
  min-height: 70px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon meta";
  align-items: center;
  column-gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid #303238;
  color: #f2f3f5;
  text-decoration: none;
}

.my-work-chat-file-list a:hover {
  background: #222529;
}

.my-work-chat-file-list a span {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #1d9bd1;
}

.my-work-chat-file-list a strong {
  grid-area: title;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-file-list a em {
  grid-area: meta;
  color: #a5a5ab;
  font-style: normal;
}

.my-work-chat-file-type-links {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}

/* Chat pilot token layer: Jinja shell, Lucide icons, neutral placeholder theme. */
#compupod-chat-page {
  --surface: var(--cp-gray-90);
  --surface-2: var(--cp-gray-80);
  --surface-3: var(--cp-gray-70);
  --surface-hover: var(--cp-gray-80);
  --content-1: var(--cp-gray-05);
  --content-2: var(--cp-gray-30);
  --content-3: var(--cp-gray-40);
  --content-inv: var(--cp-gray-90);
  --border-1: var(--cp-gray-70);
  --border-2: var(--cp-gray-60);
  --chat-active: var(--cp-gray-60);
  --chat-link: var(--cp-gray-20);
  --chat-danger: var(--cp-danger);
  --chat-success: var(--cp-success);
  --chat-avatar: calc(var(--space-8) + var(--space-1));
  --chat-sidebar: calc((var(--space-10) * 9) + var(--space-4));
  --chat-composer: calc((var(--space-10) * 3) + var(--space-1));
  background: var(--surface);
  color: var(--content-1);
}

#compupod-chat-page,
#compupod-chat-page button,
#compupod-chat-page input,
#compupod-chat-page .my-work-chat-editor,
.my-work-chat-menu,
.my-work-chat-menu button,
.my-work-chat-modal,
.my-work-chat-modal input,
.my-work-chat-modal button,
.my-work-chat-search-modal,
.my-work-chat-search-modal input,
.my-work-chat-search-modal button {
  font-family: var(--sans);
  letter-spacing: 0;
}

#compupod-chat-page .dashboard-breadcrumb {
  display: none;
}

#compupod-chat-page.home-main {
  position: relative;
  padding: 0;
  background: var(--surface);
}

.cp-icon {
  --cp-icon-url: none;
  width: var(--space-5);
  height: var(--space-5);
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--cp-icon-url) center / contain no-repeat;
  mask: var(--cp-icon-url) center / contain no-repeat;
  vertical-align: calc(var(--space-1) * -1);
}

.cp-icon-arrow-left { --cp-icon-url: url("/assets/static/lucide-icons/arrow-left.svg"); }
.cp-icon-arrow-right { --cp-icon-url: url("/assets/static/lucide-icons/arrow-right.svg"); }
.cp-icon-clock { --cp-icon-url: url("/assets/static/lucide-icons/clock.svg"); }
.cp-icon-search { --cp-icon-url: url("/assets/static/lucide-icons/search.svg"); }
.cp-icon-notifications { --cp-icon-url: url("/assets/static/lucide-icons/bell.svg"); }
.cp-icon-notifications-all { --cp-icon-url: url("/assets/static/lucide-icons/bell-ring.svg"); }
.cp-icon-canvas { --cp-icon-url: url("/assets/static/lucide-icons/file-text.svg"); }
.cp-icon-ellipsis-horizontal { --cp-icon-url: url("/assets/static/lucide-icons/ellipsis.svg"); }
.cp-icon-caret-down { --cp-icon-url: url("/assets/static/lucide-icons/chevron-down.svg"); }
.cp-icon-settings { --cp-icon-url: url("/assets/static/lucide-icons/settings.svg"); }
.cp-icon-compose { --cp-icon-url: url("/assets/static/lucide-icons/square-pen.svg"); }
.cp-icon-threads { --cp-icon-url: url("/assets/static/lucide-icons/message-circle.svg"); }
.cp-icon-send { --cp-icon-url: url("/assets/static/lucide-icons/send.svg"); }
.cp-icon-user-directory { --cp-icon-url: url("/assets/static/lucide-icons/contact.svg"); }
.cp-icon-close { --cp-icon-url: url("/assets/static/lucide-icons/x.svg"); }
.cp-icon-download { --cp-icon-url: url("/assets/static/lucide-icons/download.svg"); }
.cp-icon-info { --cp-icon-url: url("/assets/static/lucide-icons/info.svg"); }
.cp-icon-star { --cp-icon-url: url("/assets/static/lucide-icons/star.svg"); }
.cp-icon-ellipsis-vertical { --cp-icon-url: url("/assets/static/lucide-icons/ellipsis-vertical.svg"); }
.cp-icon-channel-section { --cp-icon-url: url("/assets/static/lucide-icons/layers.svg"); }
.cp-icon-plus { --cp-icon-url: url("/assets/static/lucide-icons/plus.svg"); }
.cp-icon-check { --cp-icon-url: url("/assets/static/lucide-icons/check.svg"); }
.cp-icon-clipboard-list { --cp-icon-url: url("/assets/static/lucide-icons/clipboard-list.svg"); }
.cp-icon-circle-slash { --cp-icon-url: url("/assets/static/lucide-icons/circle-slash.svg"); }
.cp-icon-user-plus { --cp-icon-url: url("/assets/static/lucide-icons/user-plus.svg"); }
.cp-icon-urgent { --cp-icon-url: url("/assets/static/lucide-icons/bell-ring.svg"); }
.cp-icon-party-popper { --cp-icon-url: url("/assets/static/lucide-icons/party-popper.svg"); }
.cp-icon-channel-public { --cp-icon-url: url("/assets/static/lucide-icons/hash.svg"); }
.cp-icon-channel-private { --cp-icon-url: url("/assets/static/lucide-icons/lock.svg"); }
.cp-icon-user { --cp-icon-url: url("/assets/static/lucide-icons/user.svg"); }
.cp-icon-headphones { --cp-icon-url: url("/assets/static/lucide-icons/headphones.svg"); }
.cp-icon-message { --cp-icon-url: url("/assets/static/lucide-icons/message-circle.svg"); }
.cp-icon-reply { --cp-icon-url: url("/assets/static/lucide-icons/reply.svg"); }
.cp-icon-add-canvas { --cp-icon-url: url("/assets/static/lucide-icons/file-text.svg"); }
.cp-icon-caret-right { --cp-icon-url: url("/assets/static/lucide-icons/chevron-right.svg"); }
.cp-icon-bold { --cp-icon-url: url("/assets/static/lucide-icons/bold.svg"); }
.cp-icon-italic { --cp-icon-url: url("/assets/static/lucide-icons/italic.svg"); }
.cp-icon-underline { --cp-icon-url: url("/assets/static/lucide-icons/underline.svg"); }
.cp-icon-strikethrough { --cp-icon-url: url("/assets/static/lucide-icons/strikethrough.svg"); }
.cp-icon-link { --cp-icon-url: url("/assets/static/lucide-icons/link.svg"); }
.cp-icon-numbered-list { --cp-icon-url: url("/assets/static/lucide-icons/list-ordered.svg"); }
.cp-icon-bulleted-list { --cp-icon-url: url("/assets/static/lucide-icons/list.svg"); }
.cp-icon-quote { --cp-icon-url: url("/assets/static/lucide-icons/quote.svg"); }
.cp-icon-code { --cp-icon-url: url("/assets/static/lucide-icons/code.svg"); }
.cp-icon-code-block { --cp-icon-url: url("/assets/static/lucide-icons/square-code.svg"); }
.cp-icon-formatting { --cp-icon-url: url("/assets/static/lucide-icons/case-sensitive.svg"); }
.cp-icon-emoji,
.cp-icon-emoji-filled { --cp-icon-url: url("/assets/static/lucide-icons/smile.svg"); }
.cp-icon-mentions { --cp-icon-url: url("/assets/static/lucide-icons/at-sign.svg"); }
.cp-icon-play { --cp-icon-url: url("/assets/static/lucide-icons/play.svg"); }
.cp-icon-pause { --cp-icon-url: url("/assets/static/lucide-icons/pause.svg"); }
.cp-icon-video { --cp-icon-url: url("/assets/static/lucide-icons/video.svg"); }
.cp-icon-microphone { --cp-icon-url: url("/assets/static/lucide-icons/mic.svg"); }
.cp-icon-screen-share { --cp-icon-url: url("/assets/static/lucide-icons/upload.svg"); }
.cp-icon-slash-box { --cp-icon-url: url("/assets/static/lucide-icons/square-slash.svg"); }
.cp-icon-send-filled { --cp-icon-url: url("/assets/static/lucide-icons/send-horizontal.svg"); }
.cp-icon-moon { --cp-icon-url: url("/assets/static/lucide-icons/moon.svg"); }
.cp-icon-sparkle { --cp-icon-url: url("/assets/static/lucide-icons/sparkles.svg"); }
.cp-icon-split-view { --cp-icon-url: url("/assets/static/lucide-icons/panel-right.svg"); }
.cp-icon-microphone-off { --cp-icon-url: url("/assets/static/lucide-icons/mic-off.svg"); }
.cp-icon-video-off { --cp-icon-url: url("/assets/static/lucide-icons/video-off.svg"); }
.cp-icon-screen-share-alt { --cp-icon-url: url("/assets/static/lucide-icons/monitor-up.svg"); }
.cp-icon-maximize { --cp-icon-url: url("/assets/static/lucide-icons/maximize.svg"); }
.cp-icon-phone-hangup { --cp-icon-url: url("/assets/static/lucide-icons/phone.svg"); }
.cp-icon-pip { --cp-icon-url: url("/assets/static/lucide-icons/picture-in-picture-2.svg"); }

.compupod-slack-workspace {
  height: calc(100vh - ((var(--space-10) * 2) + var(--space-8)));
  min-height: calc(var(--space-10) * 15);
  display: grid;
  grid-template-rows: var(--space-10) minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
  border: 0;
}

.compupod-slack-topbar {
  grid-template-columns: var(--chat-sidebar) minmax(calc(var(--space-10) * 8), calc(var(--space-10) * 16)) var(--space-10);
  gap: var(--space-3);
  height: var(--space-10);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-1);
}

.compupod-slack-history,
.compupod-chat-sidebar-actions,
.compupod-slack-global-search {
  color: var(--content-2);
}

.compupod-slack-global-search {
  height: calc(calc(var(--space-6) + var(--space-1)) + var(--space-1));
  justify-content: flex-start;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.compupod-slack-global-search:hover,
.compupod-slack-global-search:focus-visible {
  background: var(--surface-hover);
  border-color: var(--border-2);
}

.compupod-slack-topbar img {
  width: calc(var(--space-6) + var(--space-1));
  height: calc(var(--space-6) + var(--space-1));
  border-radius: var(--radius-sm);
}

#compupod-chat-page .my-work-chat-panel {
  grid-template-columns: var(--chat-sidebar) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  border: 0;
  background: var(--surface);
}

#compupod-chat-page .my-work-chat-panel.is-thread-open {
  grid-template-columns: var(--chat-sidebar) minmax(0, 1fr) minmax(calc(var(--space-10) * 8), calc(var(--space-10) * 11));
}

#compupod-chat-page .my-work-chat-contacts {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
  border-right: 1px solid var(--border-1);
  color: var(--content-2);
}

.compupod-chat-sidebar-head {
  height: calc(var(--space-10) + var(--space-6));
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-1);
}

.compupod-chat-sidebar-head button,
.compupod-chat-sidebar-actions {
  color: var(--content-1);
}

.compupod-chat-sidebar-head button {
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-standard);
}

.compupod-chat-sidebar-head button:hover,
.compupod-chat-shortcuts button:hover,
#compupod-chat-page .my-work-chat-contact:hover {
  background: var(--surface-hover);
}

#compupod-chat-page .my-work-chat-search {
  padding: var(--space-2) var(--space-3);
}

#compupod-chat-page .my-work-chat-search input {
  height: calc(var(--space-8) + var(--space-1));
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  box-shadow: none;
}

.compupod-chat-shortcuts {
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

.compupod-chat-shortcuts button,
#compupod-chat-page .my-work-chat-contact {
  min-height: var(--space-8);
  border-radius: var(--radius-sm);
  color: var(--content-2);
  font-size: var(--text-base);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.compupod-chat-shortcuts button.is-active,
#compupod-chat-page .my-work-chat-contact.active,
#compupod-chat-page .my-work-chat-contact.is-active {
  background: var(--chat-active);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-contact-list {
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  overflow: auto;
}

#compupod-chat-page .my-work-chat-contact-list::before {
  content: "Channels";
  display: block;
  margin: 0 var(--space-2) var(--space-1);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-avatar {
  width: var(--chat-avatar);
  height: var(--chat-avatar);
  border-radius: var(--radius-sm);
}

#compupod-chat-page .my-work-chat-avatar.is-department {
  background: transparent;
  color: currentColor;
}

#compupod-chat-page .my-work-chat-avatar.is-department .cp-icon {
  width: calc(var(--space-5) + var(--space-1));
  height: calc(var(--space-5) + var(--space-1));
}

.my-work-chat-avatar-presence {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: max-content;
  height: max-content;
  flex: 0 0 auto;
}

.my-work-chat-avatar-presence > .my-work-chat-avatar {
  grid-area: 1 / 1;
}

.my-work-chat-presence-dot {
  position: absolute;
  right: calc(var(--space-1) * -0.5);
  bottom: calc(var(--space-1) * -0.5);
  width: calc(var(--space-2) + 2px);
  height: calc(var(--space-2) + 2px);
  border: 2px solid var(--surface);
  border-radius: var(--radius-circle);
  background: var(--content-3);
  box-shadow: 0 0 0 1px var(--border-1);
}

.my-work-chat-presence-dot.is-online {
  background: var(--cp-success);
}

.my-work-chat-presence-dot.is-away {
  background: var(--content-3);
}

#compupod-chat-page .my-work-chat-thread {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-thread-head {
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

#compupod-chat-page .my-work-chat-head-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--space-10) + var(--space-5));
  padding: var(--space-3) var(--space-5);
}

#compupod-chat-page .my-work-chat-head-main.is-dm > .my-work-chat-avatar,
#compupod-chat-page .my-work-chat-head-main.is-dm > .my-work-chat-avatar-presence > .my-work-chat-avatar {
  width: calc(var(--space-10) + var(--space-1));
  height: calc(var(--space-10) + var(--space-1));
  border-radius: var(--radius-md);
}

#compupod-chat-page .my-work-chat-head-main.is-dm > .my-work-chat-avatar:not(.has-image),
#compupod-chat-page .my-work-chat-head-main.is-dm > .my-work-chat-avatar-presence > .my-work-chat-avatar:not(.has-image) {
  font-size: var(--text-sm);
}

#compupod-chat-page .my-work-chat-head-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  gap: var(--space-1);
  line-height: var(--leading-tight);
}

#compupod-chat-page .my-work-chat-head-identity strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-head-identity em {
  min-width: 0;
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-head-actions {
  margin-left: auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-head-icon {
  min-width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--content-2);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-head-icon:hover,
#compupod-chat-page .my-work-chat-head-icon.is-active {
  background: var(--surface-hover);
  border-color: var(--border-2);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-head-tabs {
  gap: var(--space-1);
  padding: 0 var(--space-5);
}

#compupod-chat-page .my-work-chat-head-tabs button {
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: 0 var(--space-1);
  border: 0;
  border-bottom: calc(var(--space-1) / 2) solid transparent;
  border-radius: 0;
  color: var(--content-2);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-head-tabs button:hover,
#compupod-chat-page .my-work-chat-head-tabs button.is-active {
  color: var(--content-1);
  border-bottom-color: var(--content-2);
  background: transparent;
}

#compupod-chat-page .my-work-chat-messages {
  min-height: 0;
  padding: var(--space-5) 0 var(--space-6);
  overflow: auto;
  background: var(--surface);
}

#compupod-chat-page .my-work-chat-date-divider {
  position: relative;
  display: grid;
  place-items: center;
  margin: var(--space-5) 0;
}

#compupod-chat-page .my-work-chat-date-divider::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 1px solid var(--border-1);
}

#compupod-chat-page .my-work-chat-date-divider button {
  position: relative;
  z-index: var(--z-base);
  gap: var(--space-1);
  min-height: calc(var(--space-8) + var(--space-1));
  padding: 0 var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-bubble {
  position: relative;
  display: grid;
  grid-template-columns: var(--chat-avatar) minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1) var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--content-1);
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-bubble:hover,
#compupod-chat-page .my-work-chat-bubble:focus-within {
  background: var(--surface-hover);
}

#compupod-chat-page .my-work-chat-bubble.is-grouped {
  padding-top: 0;
}

#compupod-chat-page .my-work-chat-message-avatar-spacer {
  width: var(--chat-avatar);
  min-height: var(--space-5);
  display: grid;
  place-items: start center;
  color: var(--content-3);
  font-size: var(--text-xs);
}

#compupod-chat-page .my-work-chat-message-avatar-spacer time {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-bubble.is-grouped:hover .my-work-chat-message-avatar-spacer time {
  opacity: 1;
}

#compupod-chat-page .my-work-chat-message-copy {
  min-width: 0;
}

#compupod-chat-page .my-work-chat-message-copy header {
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
}

#compupod-chat-page .my-work-chat-message-copy header strong {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-message-copy header time,
#compupod-chat-page .my-work-chat-message-copy header em,
#compupod-chat-page .my-work-chat-message-copy footer {
  color: var(--content-3);
  font-size: var(--text-xs);
}

#compupod-chat-page .my-work-chat-message-copy > div:not(.my-work-chat-attachments):not(.my-work-chat-reactions) {
  color: var(--content-1);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

#compupod-chat-page .my-work-chat-message-copy a,
#compupod-chat-page .chat-mention {
  color: var(--chat-link);
}

#compupod-chat-page .chat-mention {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--chat-link) 18%, transparent);
  padding: 0 var(--space-1);
}

#compupod-chat-page .my-work-chat-message-actions {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: var(--space-5);
  z-index: var(--z-dropdown);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: calc(var(--space-8) + var(--space-1));
  padding: var(--space-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--space-1) * -1));
  pointer-events: none;
}

#compupod-chat-page .my-work-chat-bubble:hover .my-work-chat-message-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    visibility 0s;
}

#compupod-chat-page .my-work-chat-message-actions button,
#compupod-chat-page .my-work-chat-reactions button,
#compupod-chat-page .my-work-chat-icon-btn,
#compupod-chat-page .my-work-chat-tool-btn {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-message-actions button {
  min-width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  line-height: 1;
}

#compupod-chat-page .my-work-chat-message-actions .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-message-actions button:hover,
#compupod-chat-page .my-work-chat-reactions button:hover,
#compupod-chat-page .my-work-chat-icon-btn:hover,
#compupod-chat-page .my-work-chat-tool-btn:hover,
#compupod-chat-page .my-work-chat-icon-btn.is-active,
#compupod-chat-page .my-work-chat-tool-btn.is-active {
  background: var(--surface-3);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

#compupod-chat-page .my-work-chat-reaction-chip {
  min-height: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

#compupod-chat-page .my-work-chat-reaction-chip .my-work-chat-reaction-emoji {
  display: inline-grid;
  place-items: center;
  font-size: var(--text-sm);
  line-height: 1;
}

#compupod-chat-page .my-work-chat-reaction-chip strong {
  font: inherit;
  color: currentColor;
}

#compupod-chat-page .my-work-chat-reaction-chip.is-reacted {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

#compupod-chat-page .my-work-chat-reaction-add {
  width: var(--space-6);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(.96);
}

#compupod-chat-page .my-work-chat-reaction-add .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-bubble:hover .my-work-chat-reaction-add,
#compupod-chat-page .my-work-chat-bubble:focus-within .my-work-chat-reaction-add,
#compupod-chat-page .my-work-chat-thread-message:hover .my-work-chat-reaction-add,
#compupod-chat-page .my-work-chat-thread-message:focus-within .my-work-chat-reaction-add,
#compupod-chat-page .my-work-chat-reaction-add:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#compupod-chat-page .my-work-chat-attachments {
  display: grid;
  gap: var(--space-2);
  width: min(100%, calc(var(--space-10) * 12));
  margin-top: var(--space-2);
}

#compupod-chat-page .my-work-chat-attachment {
  --clip-progress: 0%;
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  text-decoration: none;
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-attachment-head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-attachment-kind {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-attachment-kind .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-attachment strong,
#compupod-chat-page .my-work-chat-file-copy a {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-attachment-menu-btn {
  width: var(--space-7);
  height: var(--space-7);
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-3);
}

#compupod-chat-page .my-work-chat-attachment-menu-btn:hover,
#compupod-chat-page .my-work-chat-attachment-menu-btn:focus-visible {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-1);
  outline: 0;
}

#compupod-chat-page .my-work-chat-file-card.is-image,
#compupod-chat-page .my-work-chat-clip {
  width: min(100%, calc(var(--space-10) * 9));
}

#compupod-chat-page .my-work-chat-media-preview {
  position: relative;
  width: 100%;
  display: block;
  max-height: calc(var(--space-10) * 6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: inherit;
  cursor: zoom-in;
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-media-preview.is-legacy {
  aspect-ratio: 3 / 2;
}

#compupod-chat-page .my-work-chat-image-placeholder,
#compupod-chat-page .my-work-chat-media-preview [data-chat-image-full] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#compupod-chat-page .my-work-chat-image-placeholder {
  background-color: var(--surface-3);
  transition: opacity var(--dur-base) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-image-placeholder.has-thumbnail {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(12px);
  transform: scale(1.06);
}

#compupod-chat-page .my-work-chat-image-placeholder.is-shimmer {
  background-image: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, var(--content-3) 18%, transparent) 45%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: mw-chat-image-shimmer 1.25s var(--ease-standard) infinite;
}

@keyframes mw-chat-image-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

#compupod-chat-page .my-work-chat-media-preview [data-chat-image-full] {
  object-fit: cover;
  opacity: 0;
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-media-preview.is-loaded [data-chat-image-full] {
  opacity: 1;
}

#compupod-chat-page .my-work-chat-media-preview.is-loaded .my-work-chat-image-placeholder {
  opacity: 0;
}

#compupod-chat-page .my-work-chat-media-preview:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

#compupod-chat-page .my-work-chat-media-preview:hover img {
  transform: scale(1.015);
}

#compupod-chat-page .my-work-chat-media-preview img,
#compupod-chat-page .my-work-chat-clip-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(var(--space-10) * 6);
  object-fit: cover;
  background: var(--surface-3);
  transition: transform var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-media-preview [data-chat-image-full] {
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-clip-video-frame video {
  object-fit: contain;
}

#compupod-chat-page .my-work-chat-attachment figcaption {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  padding: 0 var(--space-1) var(--space-1);
}

#compupod-chat-page .my-work-chat-attachment figcaption span,
#compupod-chat-page .my-work-chat-file-copy span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-file-card.is-file {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

#compupod-chat-page .my-work-chat-file-icon {
  width: var(--space-9);
  height: var(--space-9);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-file-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-file-copy a {
  text-decoration: none;
}

#compupod-chat-page .my-work-chat-file-copy a:hover {
  color: var(--cp-accent);
}

#compupod-chat-page .my-work-chat-clip > audio {
  display: none;
}

#compupod-chat-page .my-work-chat-clip-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-inv);
  cursor: pointer;
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-clip-video-frame:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

#compupod-chat-page .my-work-chat-clip-video-play {
  position: absolute;
  inset: 0;
  width: var(--space-10);
  height: var(--space-10);
  display: inline-grid;
  place-items: center;
  margin: auto;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent) 92%, var(--surface));
  color: var(--content-inv);
  box-shadow: var(--shadow-md);
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-clip.is-playing .my-work-chat-clip-video-play {
  opacity: 0;
  transform: scale(0.9);
}

#compupod-chat-page .my-work-chat-clip-player {
  min-width: 0;
  min-height: var(--space-9);
  display: grid;
  grid-template-columns: auto minmax(var(--space-10), 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-clip-play {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  color: var(--content-inv);
  box-shadow: var(--shadow-sm);
}

#compupod-chat-page .my-work-chat-clip-play:hover,
#compupod-chat-page .my-work-chat-clip-play:focus-visible {
  filter: brightness(1.05);
  outline: 0;
}

#compupod-chat-page .my-work-chat-clip-play .cp-icon-pause,
#compupod-chat-page .my-work-chat-clip.is-playing .my-work-chat-clip-play .cp-icon-play {
  display: none;
}

#compupod-chat-page .my-work-chat-clip.is-playing .my-work-chat-clip-play .cp-icon-pause {
  display: inline-block;
}

#compupod-chat-page .my-work-chat-clip-track {
  position: relative;
  min-width: 0;
  height: var(--space-8);
  display: grid;
  align-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: inherit;
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-clip-track:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

#compupod-chat-page .my-work-chat-clip-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--clip-progress);
  background: color-mix(in srgb, var(--cp-accent) 16%, transparent);
  pointer-events: none;
}

#compupod-chat-page .my-work-chat-clip-wave {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(18, minmax(1px, 1fr));
  align-items: center;
  gap: 2px;
}

#compupod-chat-page .my-work-chat-clip-wave i {
  width: 2px;
  height: var(--space-3);
  justify-self: center;
  border-radius: var(--radius-pill);
  background: var(--content-3);
  opacity: 0.82;
}

#compupod-chat-page .my-work-chat-clip-wave i:nth-child(3n + 1) { height: var(--space-2); }
#compupod-chat-page .my-work-chat-clip-wave i:nth-child(3n + 2) { height: var(--space-5); }
#compupod-chat-page .my-work-chat-clip-wave i:nth-child(5n) { height: var(--space-6); }

#compupod-chat-page .my-work-chat-clip.is-playing .my-work-chat-clip-wave i {
  background: var(--cp-accent);
}

#compupod-chat-page .my-work-chat-clip-time {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-clip-speed {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-clip-speed span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#compupod-chat-page .my-work-chat-clip-speed select {
  min-height: var(--space-7);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  outline: 0;
}

#compupod-chat-page .my-work-chat-clip-speed select:focus-visible {
  box-shadow: var(--focus-ring);
}

#compupod-chat-page .my-work-chat-clip-transcript {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

#compupod-chat-page .my-work-chat-clip-transcript > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-clip-transcript .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-clip-transcript p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

#compupod-chat-page .my-work-chat-attachment.is-pending {
  opacity: 0.74;
}

#compupod-chat-page .my-work-chat-attachment-info {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

#compupod-chat-page .my-work-chat-attachment-info-card {
  min-width: 0;
  display: grid;
  grid-template-columns: calc(var(--space-10) + var(--space-4)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

#compupod-chat-page .my-work-chat-attachment-info-preview {
  width: calc(var(--space-10) + var(--space-4));
  height: calc(var(--space-10) + var(--space-4));
  display: grid;
  place-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-2);
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-attachment-info-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#compupod-chat-page .my-work-chat-attachment-info-preview .cp-icon {
  width: var(--space-8);
  height: var(--space-8);
}

#compupod-chat-page .my-work-chat-attachment-info-card > div:last-child {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-attachment-info-card span,
#compupod-chat-page .my-work-chat-attachment-info dt {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

#compupod-chat-page .my-work-chat-attachment-info-card strong {
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-attachment-info dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

#compupod-chat-page .my-work-chat-attachment-info dl > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

#compupod-chat-page .my-work-chat-attachment-info dd {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-attachment-info dd span {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
}

#compupod-chat-page .my-work-chat-attachment-info footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-attachment-info footer button {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-attachment-info footer button:hover,
#compupod-chat-page .my-work-chat-attachment-info footer button:focus-visible {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface-2));
  outline: 0;
}

.my-work-chat-clip-share-card blockquote span {
  display: block;
  margin-top: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  #compupod-chat-page .my-work-chat-clip-player {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  #compupod-chat-page .my-work-chat-clip-speed {
    grid-column: 2 / -1;
    justify-self: start;
  }

  #compupod-chat-page .my-work-chat-attachment-info footer {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.my-work-chat-media-lightbox-open {
  overflow: hidden;
}

.my-work-chat-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--content-1) 72%, transparent);
}

.my-work-chat-media-lightbox.hidden {
  display: none;
}

.my-work-chat-media-lightbox-card {
  width: min(calc(var(--space-10) * 24), calc(100vw - var(--space-10)));
  max-height: calc(100dvh - var(--space-10));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.my-work-chat-media-lightbox-card header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

.my-work-chat-media-lightbox-card header strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-media-lightbox-close {
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
}

.my-work-chat-media-lightbox-close:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.my-work-chat-media-lightbox-close:focus-visible {
  box-shadow: var(--focus-ring);
  outline: 0;
}

.my-work-chat-media-lightbox-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: var(--surface-2);
}

.my-work-chat-media-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - calc(var(--space-10) * 4));
  border-radius: var(--radius-md);
  object-fit: contain;
}

#compupod-chat-page .my-work-chat-form {
  margin: 0 var(--space-5) var(--space-5);
  min-height: var(--chat-composer);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  box-shadow: none;
}

#compupod-chat-page .my-work-chat-format-toolbar {
  gap: var(--space-1);
  min-height: calc(calc(var(--space-8) + var(--space-1)) + var(--space-1));
  padding: var(--space-2) var(--space-3) 0;
  border-bottom: 0;
}

#compupod-chat-page .my-work-chat-icon-btn,
#compupod-chat-page .my-work-chat-tool-btn {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
}

#compupod-chat-page .my-work-chat-format-btn.is-active {
  background: var(--surface-3);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-editor {
  min-height: calc(var(--space-10) + var(--space-4));
  padding: var(--space-3) var(--space-4);
  color: var(--content-1);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

#compupod-chat-page .my-work-chat-editor:empty::before {
  color: var(--content-3);
}

#compupod-chat-page .my-work-chat-form-actions {
  min-height: var(--space-10);
  padding: 0 var(--space-3) var(--space-2);
}

#compupod-chat-page .my-work-chat-tool-separator {
  width: 1px;
  height: var(--space-6);
  background: var(--border-1);
}

#compupod-chat-page #my-work-chat-attach.is-active .cp-icon {
  transform: rotate(45deg);
}

#compupod-chat-page #my-work-chat-send {
  margin-left: auto;
  min-width: calc(var(--space-10) + var(--space-2));
  height: var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--chat-success);
  color: var(--content-inv);
}

#compupod-chat-page #my-work-chat-send:disabled {
  opacity: 0.45;
}

#compupod-chat-page .my-work-chat-thread-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-thread-panel.hidden {
  display: none;
}

#compupod-chat-page .my-work-chat-thread-panel-head {
  min-height: calc(var(--space-10) + var(--space-5));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

#compupod-chat-page .my-work-chat-thread-panel-head div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-thread-panel-head strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-thread-panel-head span {
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-thread-panel-head button {
  margin-left: auto;
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-thread-panel-head button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-thread-panel-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
}

#compupod-chat-page .my-work-chat-thread-message {
  display: grid;
  grid-template-columns: var(--chat-avatar) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-1);
}

#compupod-chat-page .my-work-chat-thread-message.is-parent {
  padding-top: 0;
}

#compupod-chat-page .my-work-chat-thread-message.is-jump-target {
  background: var(--surface-hover);
}

#compupod-chat-page .my-work-chat-thread-message > div {
  min-width: 0;
}

#compupod-chat-page .my-work-chat-thread-message header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

#compupod-chat-page .my-work-chat-thread-message header strong {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-thread-message header time,
#compupod-chat-page .my-work-chat-thread-message header em,
#compupod-chat-page .my-work-chat-thread-message footer {
  color: var(--content-3);
  font-size: var(--text-xs);
}

#compupod-chat-page .my-work-chat-thread-replies {
  display: grid;
}

#compupod-chat-page .my-work-chat-thread-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
  margin: var(--space-4);
  padding: var(--space-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

#compupod-chat-page .my-work-chat-thread-form .my-work-chat-editor {
  min-height: var(--space-10);
  max-height: calc(var(--space-10) * 4);
  padding: var(--space-2) var(--space-3);
}

#compupod-chat-page .my-work-chat-thread-form button {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--chat-success);
  color: var(--content-inv);
}

#compupod-chat-page .my-work-chat-thread-loading {
  height: calc(var(--space-10) * 2);
  margin-bottom: var(--space-3);
}

.my-work-chat-search-modal-results button em {
  color: var(--content-3);
  font-style: normal;
  font-size: var(--text-xs);
}

#compupod-chat-page .my-work-chat-plus-menu,
#compupod-chat-page .my-work-chat-picker,
.my-work-chat-menu,
.my-work-chat-modal,
.my-work-chat-search-modal {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

#compupod-chat-page .my-work-chat-plus-menu {
  left: var(--space-3);
  bottom: calc(var(--space-10) + var(--space-1));
  width: min(calc(var(--space-10) * 11), calc(100vw - (var(--space-10) * 2)));
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-plus-menu button,
.my-work-chat-menu button,
.my-work-chat-notification-menu button {
  color: var(--content-1);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-plus-menu button:hover,
.my-work-chat-menu button:hover,
.my-work-chat-menu button.is-active,
.my-work-chat-notification-menu button:hover,
.my-work-chat-notification-menu button.is-active {
  background: var(--surface-3);
}

#compupod-chat-page .my-work-chat-picker {
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.my-work-chat-reaction-popover {
  --surface: var(--cp-gray-90);
  --surface-2: var(--cp-gray-80);
  --surface-3: var(--cp-gray-70);
  --surface-hover: var(--cp-gray-80);
  --content-1: var(--cp-gray-05);
  --content-2: var(--cp-gray-30);
  --content-3: var(--cp-gray-40);
  --border-1: var(--cp-gray-70);
  --border-2: var(--cp-gray-60);
  width: min(calc(var(--space-10) * 8), calc(100vw - var(--space-6)));
  padding: var(--space-2);
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--content-1);
}

.my-work-chat-reaction-popover input {
  width: calc(100% - var(--space-4));
  min-height: calc(var(--space-8) + var(--space-1));
  margin: var(--space-1) var(--space-2) var(--space-2);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  outline: none;
  box-shadow: var(--focus-ring);
}

.my-work-chat-reaction-popover .my-work-chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-1);
}

.my-work-chat-reaction-popover .my-work-chat-emoji-grid button {
  width: var(--space-8);
  min-width: var(--space-8);
  height: var(--space-8);
  min-height: var(--space-8);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: 1;
}

.my-work-chat-reaction-popover .my-work-chat-emoji-grid button:hover,
.my-work-chat-reaction-popover .my-work-chat-emoji-grid button:focus-visible {
  background: var(--surface-3);
}

.my-work-chat-modal-backdrop {
  background: color-mix(in srgb, var(--cp-gray-90) 70%, transparent);
}

.my-work-chat-members-card,
.my-work-chat-forward-card,
.my-work-chat-video-card,
.my-work-chat-link-card {
  background: var(--surface);
  color: var(--content-1);
  border-color: var(--border-2);
}

.my-work-chat-members-card label,
.my-work-chat-forward-card input,
.my-work-chat-link-card input,
.my-work-chat-search-modal header {
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--content-1);
}

.top-nav #chat-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chat-nav-unread-badge {
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--cp-danger);
  color: var(--content-inv);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  /* Subtle separation from the dark header instead of a heavy glowing ring.
     The topbar is near-black (#050505), so a dark hairline ring reads as a
     clean gap rather than a loud halo. */
  box-shadow: 0 0 0 1.5px #07090d;
  transform: translateY(-0.5px);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.chat-nav-unread-badge.hidden {
  display: none;
}

/* A soft pop when the count changes, so a new message is noticeable
   without the badge itself being loud. */
@keyframes chat-nav-unread-pop {
  0% { transform: translateY(-0.5px) scale(0.6); }
  55% { transform: translateY(-0.5px) scale(1.12); }
  100% { transform: translateY(-0.5px) scale(1); }
}

.chat-nav-unread-badge:not(.hidden) {
  animation: chat-nav-unread-pop var(--dur-med, 220ms) var(--ease-standard);
}

#chat-nav-btn.has-chat-unread > span:first-child {
  color: var(--content-inv);
}

#compupod-chat-page .my-work-chat-urgent-btn {
  min-width: calc(var(--space-10) * 2);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 42%, var(--border-2));
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--cp-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-urgent-btn.hidden {
  display: none;
}

#compupod-chat-page .my-work-chat-urgent-btn:hover {
  border-color: var(--cp-danger);
  background: var(--cp-danger-soft);
}

#compupod-chat-page .my-work-chat-urgent-btn.is-active {
  border-color: var(--cp-danger);
  background: var(--cp-danger);
  color: var(--content-inv);
}

#compupod-chat-page .my-work-chat-bubble.is-urgent,
#compupod-chat-page .my-work-chat-thread-message.is-urgent {
  border-left: var(--space-1) solid var(--cp-danger);
}

#compupod-chat-page .my-work-chat-bubble.is-urgent {
  padding-left: var(--space-4);
}

#compupod-chat-page .my-work-chat-urgent-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-5);
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 28%, var(--border-1));
  border-radius: var(--radius-pill);
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  line-height: 1;
}

.my-work-chat-menu button.is-selected,
.my-work-chat-notification-menu button.is-selected {
  background: var(--cp-accent-soft);
  color: var(--content-1);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

.worker-message-card.worker-chat-urgent-popup {
  border-color: var(--cp-danger);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg), 0 0 0 var(--space-2) color-mix(in srgb, var(--cp-danger) 12%, transparent);
}

.worker-message-card.worker-chat-urgent-popup .worker-message-eyebrow {
  color: var(--cp-danger);
}

.worker-message-card.worker-chat-urgent-popup #worker-message-acknowledge {
  border-color: var(--cp-danger);
  background: var(--cp-danger);
  color: var(--content-inv);
}

.my-work-chat-member-row:hover,
.my-work-chat-add-member:hover,
.my-work-chat-forward-results button:hover,
.my-work-chat-forward-results button.is-active {
  background: var(--surface-hover);
}

#compupod-chat-page .my-work-chat-files-view {
  color: var(--content-1);
  animation: cp-card-in var(--dur-base) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-files-search,
#compupod-chat-page .my-work-chat-file-list,
#compupod-chat-page .my-work-chat-files-controls button,
#compupod-chat-page .my-work-chat-file-type-links button {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-files-controls button.is-active {
  background: var(--surface-3);
  border-color: var(--border-2);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-file-list a:hover {
  background: var(--surface-hover);
}

#compupod-chat-page .my-work-chat-contact-list::before {
  content: none;
}

#compupod-chat-page .my-work-chat-contact {
  grid-template-columns: var(--chat-avatar) minmax(0, 1fr) auto auto;
}

#compupod-chat-page .my-work-chat-contact-favorite {
  width: var(--space-5);
  height: var(--space-5);
  display: inline-grid;
  place-items: center;
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-contact-favorite .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-thread.is-special-view .my-work-chat-form {
  display: none;
}

#compupod-chat-page .my-work-chat-section-head {
  min-height: calc(var(--space-10) + var(--space-5));
  display: grid;
  grid-template-columns: calc(var(--space-8) + var(--space-1)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

#compupod-chat-page .my-work-chat-section-head > span:not(.my-work-chat-section-icon) {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-section-head strong {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-section-head em {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
}

#compupod-chat-page .my-work-chat-section-icon {
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-workspace-view {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-5);
  color: var(--content-1);
  animation: cp-card-in var(--dur-base) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-workspace-grid,
#compupod-chat-page .my-work-chat-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

#compupod-chat-page .my-work-chat-workspace-pane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

#compupod-chat-page .my-work-chat-workspace-pane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-1);
}

#compupod-chat-page .my-work-chat-workspace-pane > header strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-workspace-pane > header span {
  min-width: var(--space-6);
  min-height: var(--space-6);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-workspace-list {
  display: grid;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-workspace-row {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--chat-avatar) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-workspace-row > div,
#compupod-chat-page .my-work-chat-workspace-row > span:not(.my-work-chat-section-icon) {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-workspace-row strong,
#compupod-chat-page .my-work-chat-directory-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-workspace-row span,
#compupod-chat-page .my-work-chat-workspace-row em,
#compupod-chat-page .my-work-chat-directory-row em {
  min-width: 0;
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-workspace-row button,
#compupod-chat-page .my-work-chat-directory-row,
#compupod-chat-page .my-work-chat-canvas-shell header button {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-workspace-row button {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
}

#compupod-chat-page .my-work-chat-workspace-row button:hover,
#compupod-chat-page .my-work-chat-directory-row:hover,
#compupod-chat-page .my-work-chat-canvas-shell header button:hover {
  background: var(--surface-hover);
  border-color: var(--border-2);
}

#compupod-chat-page .my-work-chat-workspace-toolbar {
  display: flex;
  justify-content: flex-end;
}

#compupod-chat-page .my-work-chat-workspace-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-workspace-search {
  min-height: calc(var(--space-10) + var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-workspace-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--content-1);
  font-size: var(--text-base);
  outline: none;
}

#compupod-chat-page .my-work-chat-directory-row {
  width: 100%;
  min-height: calc(var(--space-10) + var(--space-4));
  display: grid;
  grid-template-columns: var(--chat-avatar) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  text-align: left;
}

#compupod-chat-page .my-work-chat-directory-row > span:not(.my-work-chat-contact-favorite) {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-contact > .my-work-chat-avatar-presence,
#compupod-chat-page .my-work-chat-directory-row > .my-work-chat-avatar-presence {
  min-width: 0;
  display: inline-grid;
  gap: 0;
}

#compupod-chat-page .my-work-chat-canvas-view {
  padding: var(--space-5);
}

#compupod-chat-page .my-work-chat-canvas-shell {
  min-height: calc(var(--space-10) * 10);
  display: grid;
  grid-template-rows: auto minmax(calc(var(--space-10) * 7), 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

#compupod-chat-page .my-work-chat-canvas-shell header,
#compupod-chat-page .my-work-chat-canvas-shell footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

#compupod-chat-page .my-work-chat-canvas-shell footer {
  justify-content: space-between;
  border-top: 1px solid var(--border-1);
  border-bottom: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

#compupod-chat-page .my-work-chat-canvas-shell input,
#compupod-chat-page .my-work-chat-canvas-shell textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--content-1);
  font-family: var(--sans);
  outline: none;
}

#compupod-chat-page .my-work-chat-canvas-shell input {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-canvas-shell textarea {
  resize: vertical;
  min-height: calc(var(--space-10) * 7);
  padding: var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.my-work-chat-modal {
  z-index: var(--z-modal);
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--cp-gray-90) 68%, transparent);
  box-shadow: none;
}

.my-work-chat-modal > section {
  box-shadow: var(--shadow-lg);
}

.my-work-chat-members-card {
  width: min(calc(var(--space-10) * 19), calc(100vw - var(--space-8)));
  min-height: 0;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
}

.my-work-chat-members-card .my-work-chat-members-head {
  min-height: calc(var(--space-10) + var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.my-work-chat-members-card .my-work-chat-members-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.my-work-chat-members-title > span {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-members-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-members-title em {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
}

.my-work-chat-members-card .my-work-chat-members-head .my-work-chat-modal-close {
  position: static;
  margin-left: auto;
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-base);
}

.my-work-chat-members-card .my-work-chat-members-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.my-work-chat-members-card .my-work-chat-members-actions button,
.my-work-chat-members-card .my-work-chat-members-search {
  min-height: var(--space-10);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
}

.my-work-chat-members-card .my-work-chat-members-actions button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.my-work-chat-members-card .my-work-chat-members-actions button.is-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

.my-work-chat-members-card .my-work-chat-members-search {
  height: auto;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
}

.my-work-chat-members-card .my-work-chat-members-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--content-1);
  font-size: var(--text-base);
  outline: none;
}

.my-work-chat-members-list {
  max-height: min(calc(var(--space-10) * 11), 60vh);
  overflow: auto;
}

.my-work-chat-member-row {
  min-height: calc(var(--space-10) + var(--space-3));
  grid-template-columns: calc(var(--space-8) + var(--space-1)) minmax(0, 1fr) auto;
  border-radius: var(--radius-md);
  color: var(--content-1);
}

.my-work-chat-member-row > span {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-member-row strong {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.my-work-chat-member-row em,
.my-work-chat-member-row > span:last-child {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
}

.my-work-chat-member-row > .my-work-chat-avatar-presence {
  min-width: 0;
  display: inline-grid;
  gap: 0;
}

.my-work-chat-member-row > .my-work-chat-avatar-presence .my-work-chat-presence-dot {
  border-color: var(--surface);
}

#compupod-chat-page .my-work-chat-contact-list {
  min-height: 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  scrollbar-color: var(--border-2) transparent;
}

#compupod-chat-page .my-work-chat-contact-list::-webkit-scrollbar,
#compupod-chat-page .my-work-chat-messages::-webkit-scrollbar,
#compupod-chat-page .my-work-chat-thread-panel-body::-webkit-scrollbar,
#compupod-chat-page .my-work-chat-emoji-results::-webkit-scrollbar {
  width: var(--space-2);
}

#compupod-chat-page .my-work-chat-contact-list::-webkit-scrollbar-thumb,
#compupod-chat-page .my-work-chat-messages::-webkit-scrollbar-thumb,
#compupod-chat-page .my-work-chat-thread-panel-body::-webkit-scrollbar-thumb,
#compupod-chat-page .my-work-chat-emoji-results::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--border-2);
}

#compupod-chat-page .my-work-chat-today {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-transform: none;
}

#compupod-chat-page .my-work-chat-empty {
  min-height: auto;
  padding: var(--space-5);
  border: 1px dashed var(--border-1);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
}

#compupod-chat-page .my-work-chat-empty.is-compact {
  min-height: var(--space-10);
  padding: var(--space-3);
}

#compupod-chat-page .my-work-chat-messages > .my-work-chat-empty {
  min-height: calc(100% - var(--space-10));
  margin: var(--space-5);
  display: grid;
  place-items: center;
}

#compupod-chat-page .my-work-chat-files-view,
#compupod-chat-page .my-work-chat-workspace-view {
  animation: none;
}

#compupod-chat-page .my-work-chat-reaction-chip {
  position: relative;
}

#compupod-chat-page .my-work-chat-reaction-chip[data-tooltip]:is(:hover, :focus-visible)::after {
  min-width: max-content;
  max-width: min(calc(var(--space-10) * 7), calc(100vw - var(--space-8)));
  white-space: normal;
}

#compupod-chat-page .my-work-chat-reaction-chip[data-tooltip]:is(:hover, :focus-visible)::before {
  display: block;
}

#compupod-chat-page .my-work-chat-picker {
  max-height: min(calc(var(--space-10) * 13), calc(100dvh - var(--space-10) * 3));
}

#compupod-chat-page .my-work-chat-emoji-results {
  min-height: 0;
  overflow: auto;
  padding: 0 var(--space-4) var(--space-4);
}

#compupod-chat-page .my-work-chat-emoji-category {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 0;
  overflow: visible;
}

#compupod-chat-page .my-work-chat-emoji-category strong {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-emoji-grid {
  grid-template-columns: repeat(8, minmax(var(--space-8), 1fr));
}

#compupod-chat-page .my-work-chat-emoji-grid button {
  width: 100%;
  min-width: var(--space-8);
  height: calc(var(--space-8) + var(--space-1));
  min-height: calc(var(--space-8) + var(--space-1));
}

.my-work-chat-menu {
  z-index: var(--z-dropdown);
}

.my-work-chat-reaction-popover .my-work-chat-emoji-results {
  max-height: min(calc(var(--space-10) * 8), calc(100dvh - var(--space-10) * 4));
  padding: 0 var(--space-1) var(--space-1);
}

.my-work-chat-reaction-popover .my-work-chat-emoji-category {
  margin-bottom: var(--space-3);
}

.my-work-chat-reaction-popover .my-work-chat-emoji-category strong {
  color: var(--content-2);
  font-size: var(--text-xs);
}

@media (max-width: 980px) {
  #compupod-chat-page .my-work-chat-panel {
    grid-template-columns: calc(var(--space-10) * 8) minmax(0, 1fr);
  }

  #compupod-chat-page .my-work-chat-panel.is-thread-open {
    grid-template-columns: calc((var(--space-10) * 6) + var(--space-8)) minmax(0, 1fr) minmax(calc(var(--space-10) * 7), calc(var(--space-10) * 9));
  }
}

@media (max-width: 760px) {
  .compupod-slack-workspace {
    height: auto;
    min-height: calc(100vh - 116px);
    grid-template-rows: auto auto;
  }

  .compupod-slack-topbar {
    grid-template-columns: 52px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .compupod-slack-history {
    justify-content: flex-start;
    gap: 6px;
    font-size: 20px;
  }

  #compupod-chat-page .my-work-chat-panel {
    min-height: calc(100vh - 110px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(230px, 34vh) minmax(520px, 1fr);
  }

  #compupod-chat-page .my-work-chat-panel.is-thread-open {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(calc(var(--space-10) * 6), 34vh) minmax(calc(var(--space-10) * 13), 1fr) minmax(calc((var(--space-10) * 10) + var(--space-5)), 55vh);
  }

  #compupod-chat-page .my-work-chat-contacts {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  #compupod-chat-page .my-work-chat-thread-panel {
    border-left: 0;
    border-top: 1px solid var(--border-1);
  }

  #compupod-chat-page .my-work-chat-messages {
    padding: 14px 14px 18px;
  }

  #compupod-chat-page .my-work-chat-form {
    margin: 0 14px 16px;
  }
}

/* Reports - RepairQ-style section shell, report menu and dense grids. */
#reports-page.reports-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 0;
}

#reports-page > .dashboard-breadcrumb {
  display: none;
}

#reports-page .reports-shell {
  min-height: calc(100vh - 120px);
  background: #ffffff;
}

#reports-page .reports-menu {
  min-height: 40px;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  padding: 0 18px;
  background: #4a4a4a;
  color: #ffffff;
}

#reports-page .reports-menu strong {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-right: 18px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

#reports-page .reports-menu-item {
  min-height: 40px;
  align-self: stretch;
}

#reports-page .reports-menu-trigger {
  min-height: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

#reports-page .reports-menu-icon {
  display: inline-flex;
  width: 15px;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
}

#reports-page .reports-menu-trigger::after {
  content: "▾";
  color: #a9a9a9;
  font-size: 9px;
  margin-left: 1px;
}

#reports-page .reports-menu-trigger:hover,
#reports-page .reports-menu-trigger.active,
#reports-page .reports-menu-item.open .reports-menu-trigger {
  background: #303030;
}

#reports-page .reports-menu-dropdown {
  top: 100%;
  min-width: 245px;
  max-height: min(620px, calc(100vh - 165px));
  border-radius: 0;
  z-index: 90;
}

#reports-page .reports-menu-option {
  min-height: 28px;
  padding: 6px 14px;
  font-size: 12px;
}

#reports-page .reports-content {
  padding: 20px 18px 48px;
  color: #555555;
}

#reports-page .reports-content > p {
  margin: 0 0 12px;
  color: #555555;
  font-size: 12px;
}

#reports-page .reports-search-shell {
  max-width: calc(var(--space-10) * 18);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

#reports-page .reports-search-shell > label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#reports-page .reports-search-control {
  display: flex;
  gap: var(--space-2);
}

#reports-page .reports-search-control input {
  width: 100%;
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
}

#reports-page .reports-search-control input:focus-visible {
  outline: none;
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

#reports-page .reports-search-control button {
  min-height: var(--space-10);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#reports-page .reports-search-control button:hover {
  border-color: var(--cp-accent);
  color: var(--cp-accent-hover);
}

#reports-page .reports-search-shell > p {
  margin: var(--space-2) 0 0;
  color: var(--content-3);
  font-size: var(--text-xs);
}

#reports-page .reports-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 7), 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}

#reports-page .reports-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

#reports-page .reports-search-result:hover {
  border-color: var(--cp-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

#reports-page .reports-search-result strong {
  min-width: 0;
  color: var(--cp-accent-hover);
  font-size: var(--text-sm);
}

#reports-page .reports-search-result span {
  align-self: start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#reports-page .reports-search-result small {
  grid-column: 1 / -1;
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

#reports-page .reports-search-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  color: var(--content-2);
  text-align: center;
}

#reports-page .report-group {
  display: block;
  width: auto;
  margin: 0 0 14px;
  padding: 0;
}

#reports-page .report-group h3 {
  margin: 0 0 8px;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
}

#reports-page .report-group ul {
  margin: 0 0 0 22px;
  padding: 0;
}

#reports-page .report-group li {
  margin: 2px 0;
  color: #666666;
  font-size: 12px;
}

#reports-page .report-group button {
  color: #008ed0;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}

#reports-page .report-detail-section {
  margin: 0;
  padding: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  overflow: visible;
}

#reports-page .report-detail-titlebar,
#reports-page .report-system-log .section-title-row,
#reports-page .report-queues .section-title-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 18px;
  background: #4a4a4a;
  color: #ffffff;
}

#reports-page .report-detail-heading {
  min-width: 0;
}

#reports-page .report-detail-titlebar .report-eyebrow,
#reports-page .report-detail-titlebar p {
  display: none;
}

#reports-page .report-detail-titlebar h2,
#reports-page .report-system-log .section-title-row h3,
#reports-page .report-queues .section-title-row h3 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

#reports-page .report-system-log .section-title-row p,
#reports-page .report-queues .section-title-row p {
  display: none;
}

#reports-page .report-detail-title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#reports-page .report-detail-top-link {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f7f7f7;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

#reports-page .report-detail-top-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

#reports-page .report-system-log .section-title-row > .btn,
#reports-page .report-queues .section-title-row > .btn {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f7f7f7;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

#reports-page .report-system-log .section-title-row > .btn:hover,
#reports-page .report-queues .section-title-row > .btn:hover {
  color: #ffffff;
  text-decoration: underline;
}

#reports-page #report-detail-back {
  display: none;
}

#reports-page .report-detail-filters {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-height: 116px;
  margin: 18px 18px 16px;
  padding: 22px 24px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  background: #f7f7f7;
}

#reports-page .report-filters-collapsed .report-detail-filters {
  display: none;
}

#reports-page .report-detail-extra-filters {
  display: contents;
}

#reports-page .report-detail-date {
  display: grid;
  grid-template-columns: auto minmax(130px, 176px);
  align-items: center;
  gap: 6px;
  color: #555555;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#reports-page .report-detail-date span {
  text-align: right;
  white-space: nowrap;
}

#reports-page .report-detail-date input,
#reports-page .report-detail-date select {
  width: 100%;
  min-height: 28px;
  height: 28px;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid #cfd4da;
  border-radius: 4px;
  background: #ffffff;
  color: #555555;
  font-size: 12px;
}

#reports-page .report-detail-date.report-detail-checkbox {
  grid-template-columns: auto 24px;
}

#reports-page .report-detail-date.report-detail-checkbox input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cp-accent);
}

#reports-page .report-detail-date.report-detail-multi-select {
  align-items: start;
}

#reports-page .report-multi-select-native {
  display: none;
}

#reports-page .report-multi-select {
  position: relative;
  width: 100%;
  min-width: 176px;
}

#reports-page .report-multi-select summary {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  border: 1px solid var(--border-1);
  border-radius: 4px;
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}

#reports-page .report-multi-select summary::-webkit-details-marker {
  display: none;
}

#reports-page .report-multi-select summary::after {
  content: "▾";
  color: var(--content-3);
}

#reports-page .report-multi-select[open] summary::after {
  content: "▴";
}

#reports-page .report-multi-select-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 4px);
  right: 0;
  width: 260px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  border: 1px solid var(--border-1);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

#reports-page .report-multi-select-menu label {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: 400;
  cursor: pointer;
}

#reports-page .report-multi-select-menu label:hover {
  background: var(--surface-2);
}

#reports-page .report-multi-select-menu input[type="checkbox"] {
  width: 15px;
  min-height: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--cp-accent);
}

#reports-page .report-detail-catalog-search {
  position: relative;
}

#reports-page .report-catalog-multi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 176px;
}

#reports-page .report-catalog-multi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

#reports-page .report-catalog-multi-chip {
  max-width: 176px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-sm);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  cursor: pointer;
}

#reports-page .report-catalog-search-results {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 4px);
  right: 0;
  width: min(360px, 82vw);
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

#reports-page .report-catalog-search-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface);
  color: var(--content-1);
  text-align: left;
  cursor: pointer;
}

#reports-page .report-catalog-search-option:last-child {
  border-bottom: 0;
}

#reports-page .report-catalog-search-option:hover,
#reports-page .report-catalog-search-option.is-active {
  background: var(--surface-hover);
}

#reports-page .report-catalog-search-option strong {
  font-size: var(--text-sm);
  font-weight: 650;
}

#reports-page .report-catalog-search-option span,
#reports-page .report-catalog-search-empty {
  color: var(--content-3);
  font-size: var(--text-xs);
}

#reports-page .report-catalog-search-empty {
  padding: var(--space-3);
}

#reports-page .report-detail-filters #report-detail-refresh {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 12px;
}

#reports-page .report-detail-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 18px 14px;
}

#reports-page .report-detail-cards .report-card {
  min-width: 118px;
  padding: 10px 14px;
  border-radius: 0;
  background: #ffffff;
  text-align: center;
}

#reports-page .report-detail-cards .report-card span {
  color: #777777;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

#reports-page .report-detail-cards .report-card strong {
  margin-top: 4px;
  color: #555555;
  font-size: 15px;
}

#reports-page .report-detail-table-wrap,
#reports-page .report-table-grid,
#reports-page .report-closed-registers,
#reports-page .report-usage-detail,
#reports-page .report-profitability,
#reports-page .report-inventory-orders,
#reports-page .report-queues .report-table-grid {
  margin: 0 18px 18px;
  overflow-x: auto;
}

#reports-page .report-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#reports-page .report-table-grid > section {
  min-width: 0;
  overflow-x: auto;
}

#reports-page .report-live-section h3,
#reports-page .report-table-grid h3,
#reports-page .report-closed-registers h3,
#reports-page .report-usage-detail h3,
#reports-page .report-profitability h3,
#reports-page .report-inventory-orders h3 {
  margin: 0 0 8px;
  color: #555555;
  font-size: 13px;
  font-weight: 600;
}

#reports-page .report-subheader {
  min-height: 28px;
  align-items: center;
  margin-bottom: 8px;
}

#reports-page .report-subheader > div {
  gap: 10px;
  color: #777777;
  font-size: 11px;
}

#reports-page .report-card-grid:not(.report-detail-cards) {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  margin-bottom: 16px;
}

#reports-page .report-card-grid:not(.report-detail-cards) .report-card {
  border-radius: 0;
  background: #ffffff;
}

#reports-page .report-table {
  width: 100% !important;
  min-width: 1160px;
  table-layout: fixed;
  border-collapse: collapse;
  color: #5f5f5f;
  font-size: 12px;
  line-height: 1.2;
}

#reports-page .report-table-grid .report-table {
  min-width: 760px;
}

#reports-page .report-table th,
#reports-page .report-table td {
  height: 32px;
  min-width: 0 !important;
  width: auto !important;
  padding: 5px 8px;
  border: 1px solid #dcdcdc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5f5f5f;
  font-size: 12px;
  vertical-align: middle;
  text-align: left;
}

#reports-page .report-table th {
  height: 34px;
  background: #d3d3d3;
  color: #5f5f5f;
  font-size: 11px;
  font-weight: 700;
}

#reports-page .report-table tbody tr:hover {
  background: #f1f1f1;
}

#reports-page .report-table tbody tr.report-subtotal-row {
  background: var(--surface-2);
  font-weight: 700;
}

#reports-page #report-detail-table.report-profitability-by-item-table {
  min-width: 1780px;
  table-layout: auto;
}

#reports-page #report-detail-table.report-profitability-by-item-table :is(th, td):nth-child(1) {
  min-width: 130px !important;
}

#reports-page #report-detail-table.report-profitability-by-item-table :is(th, td):nth-child(2) {
  min-width: 110px !important;
}

#reports-page #report-detail-table.report-profitability-by-item-table :is(th, td):nth-child(3) {
  min-width: 260px !important;
}

#reports-page #report-detail-table.report-profitability-by-item-table :is(th, td):nth-child(n + 4) {
  min-width: 92px !important;
}

#reports-page .report-detail-table-wrap:has(.report-summary-matrix-table) {
  overflow-x: auto;
  overflow-y: visible;
}

#reports-page #report-detail-table.report-summary-matrix-table {
  table-layout: fixed;
}

#reports-page #report-detail-table.report-summary-matrix-table :is(th, td) {
  min-width: 126px !important;
  width: 126px !important;
  overflow: visible;
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
}

#reports-page #report-detail-table.report-summary-matrix-table :is(th, td):first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  min-width: 240px !important;
  width: 240px !important;
  background: var(--surface);
  font-weight: var(--weight-medium);
}

#reports-page #report-detail-table.report-summary-matrix-table th:first-child {
  z-index: 3;
  background: var(--surface-2);
}

#reports-page #report-detail-table.report-summary-matrix-table tr.report-subtotal-row td {
  border-top: 2px solid var(--border-2);
  background: var(--surface-2);
}

#reports-page #report-detail-table.report-summary-matrix-table tr.report-subtotal-row td:first-child {
  background: var(--surface-2);
}

#reports-page #report-detail-table.report-summary-matrix-table .report-summary-metric[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

#reports-page .money-out {
  color: #c44f4f;
  font-weight: 600;
}

#reports-page .report-system-log {
  margin: 0;
  padding: 0 0 24px;
  border: 0;
  border-radius: 0;
}

#reports-page .report-system-log .activity-toolbar {
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1.1fr) auto;
  gap: 10px;
  margin: 18px;
  padding: 12px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  background: #f7f7f7;
}

#reports-page .report-system-log .activity-list,
#reports-page .report-system-log .empty {
  margin: 0 18px;
}

#reports-page .report-queues {
  margin: 0;
  padding-bottom: 24px;
}

@media (max-width: 1100px) {
  #reports-page .reports-menu {
    padding-inline: 12px;
  }

  #reports-page .reports-content {
    padding-inline: 12px;
  }

  #reports-page .report-detail-titlebar,
  #reports-page .report-system-log .section-title-row,
  #reports-page .report-queues .section-title-row {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 10px;
  }

  #reports-page .report-detail-title-actions {
    margin-left: 0;
  }

  #reports-page .report-detail-date {
    grid-template-columns: 1fr;
  }

  #reports-page .report-detail-date span {
    text-align: left;
  }

  #reports-page .report-table-grid {
    grid-template-columns: 1fr;
  }

  #reports-page .reports-search-shell {
    max-width: none;
  }
}

/* Reports dropdown fix plus RepairQ-style eBay and Settings shells. */
#reports-page .reports-menu {
  overflow: visible;
}

#reports-page .reports-menu-dropdown {
  background: #303030;
  border: 1px solid #1f1f1f;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

#reports-page .reports-menu-item.open .reports-menu-dropdown {
  display: block;
}

#ebay-page.ebay-page,
#settings-page.settings-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 56px;
  background: #ffffff;
  color: #555555;
}

#ebay-page > .dashboard-breadcrumb,
#settings-page > .dashboard-breadcrumb {
  display: none;
}

#ebay-page .ebay-workspace {
  max-width: none;
  margin: 0;
  padding: 16px 18px 34px;
}

#ebay-page .ebay-head {
  min-height: 88px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #86b817 0%, #73a40f 58%, #5f8f0c 100%);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(52, 87, 7, 0.18);
}

#ebay-page .ebay-title-block {
  gap: 14px;
  min-width: 250px;
}

#ebay-page .ebay-logo-mark {
  display: inline-flex;
}

#ebay-page .ebay-head .ebay-kicker {
  display: inline-block;
  color: rgba(255, 255, 255, 0.82);
}

#ebay-page .ebay-head h1 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

#ebay-page .ebay-head-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  flex: 1;
  max-width: 520px;
}

#ebay-page .ebay-head-metric {
  min-height: 52px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}

#ebay-page .ebay-head-metric span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

#ebay-page .ebay-head-metric strong {
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}

#ebay-page .ebay-head-actions {
  gap: 8px;
}

#ebay-page .ebay-head-actions .btn-secondary {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
}

#ebay-page .ebay-head-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.26);
  text-decoration: none;
}

#ebay-page .ebay-live-chip {
  border-color: rgba(255, 255, 255, 0.42);
  background: #ffffff;
  color: #2f5f00;
}

#ebay-page .ebay-live-chip-warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

#ebay-page .ebay-dashboard-grid,
#ebay-page .ebay-detail-grid {
  gap: 18px;
  margin: 0;
  padding: 18px;
}

#ebay-page .ebay-queue,
#ebay-page .ebay-editor,
#ebay-page .ebay-review,
#ebay-page .ebay-published-desk,
#ebay-page .ebay-subpanel,
#ebay-page .ebay-side-section {
  border-color: #dcdcdc;
  border-radius: 0;
  box-shadow: none;
}

#ebay-page .ebay-queue-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #dddddd;
  background: #ffffff;
}

#ebay-page .ebay-search {
  flex: 1 1 280px;
  max-width: 480px;
}

#ebay-page .ebay-search input,
#ebay-page .ebay-field input,
#ebay-page .ebay-field select,
#ebay-page .ebay-field textarea,
#ebay-page .ebay-specific-row input,
#ebay-page .ebay-warning-row input {
  min-height: 30px;
  border-radius: 4px;
  background: #ffffff;
  color: #555555;
  font-size: 12px;
}

#ebay-page .ebay-filter-tabs {
  gap: 0;
}

#ebay-page .ebay-filter-tabs button,
#ebay-page .ebay-payload-tabs button {
  min-height: 30px;
  border-radius: 0;
  border-color: #d8dde3;
  background: #ffffff;
  color: #555555;
  font-size: 12px;
  font-weight: 700;
}

#ebay-page .ebay-filter-tabs button.active,
#ebay-page .ebay-payload-tabs button.active {
  border-color: #009bd8;
  background: #009bd8;
  color: #ffffff;
}

#ebay-page .ebay-filter-tabs button.active span {
  color: rgba(255, 255, 255, 0.82);
}

#ebay-page .ebay-panel-head,
#ebay-page .ebay-subpanel-head,
#ebay-page .ebay-section-head,
#ebay-page .ebay-editor-head {
  min-height: 38px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #dddddd;
  background: #f3f5f7;
}

#ebay-page .ebay-editor-head {
  margin: -18px -18px 14px;
}

#ebay-page .ebay-panel-eyebrow,
#ebay-page .ebay-section-head .ebay-kicker {
  display: none;
}

#ebay-page .ebay-panel-head h2,
#ebay-page .ebay-section-head h2,
#ebay-page .ebay-editor-head h2,
#ebay-page .ebay-side-section h2,
#ebay-page .ebay-subpanel-head h3 {
  color: #555555;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

#ebay-page .ebay-draft-list-dashboard {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

#ebay-page .ebay-draft-row,
#ebay-page .ebay-candidate-row,
#ebay-page .ebay-published-row {
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

#ebay-page .ebay-draft-row:hover,
#ebay-page .ebay-draft-row.selected,
#ebay-page .ebay-published-row:hover {
  border-color: #009bd8;
  box-shadow: inset 3px 0 0 #009bd8;
}

#ebay-page .ebay-form-grid {
  gap: 10px;
}

#ebay-page .ebay-field span {
  color: #5f6b7a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

#ebay-page .ebay-stat-grid div,
#ebay-page .ebay-balance-grid div,
#ebay-page .ebay-metric-stack div {
  min-height: 48px;
  border-radius: 0;
  background: #ffffff;
}

#ebay-page .ebay-drawer > summary {
  min-height: 42px;
  padding: 10px 12px;
}

#ebay-page .ebay-drawer > summary::after {
  width: 24px;
  height: 24px;
  border-radius: 999px;
}

#settings-page .rq-settings-shell.settings-shell-v2 {
  min-height: calc(100vh - 120px);
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#settings-page .rq-settings-sidebar {
  background: #f1f2f4;
  border-right: 1px solid #d8dde3;
}

#settings-page .rq-settings-side-link {
  min-height: 40px;
  padding: 0 14px;
  color: #555555;
  font-size: 13px;
}

#settings-page .rq-settings-chevron {
  font-size: 16px;
}

#settings-page .rq-settings-sidebar .rq-settings-subnav {
  padding: 0 0 6px;
}

#settings-page .rq-settings-sidebar .rq-settings-sub-link {
  min-height: 28px;
  padding: 4px 12px 4px 34px;
  font-size: 12px !important;
}

#settings-page .rq-settings-shell .settings-title-bar {
  min-height: 42px;
  padding: 0 18px;
  background: #4a4a4a;
}

#settings-page .rq-settings-shell .settings-title-bar h2 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

#settings-page .rq-settings-overview,
#settings-page .rq-settings-detail {
  padding: 20px 18px 42px;
}

#settings-page .rq-settings-group {
  margin: 0 0 18px;
  padding-bottom: 18px;
}

#settings-page .rq-settings-group h3 {
  margin: 0 0 10px;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
}

#settings-page .rq-settings-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

#settings-page .rq-settings-card {
  min-height: 74px;
  gap: 7px;
  padding: 12px;
  border-radius: 0;
  background: #ffffff;
}

#settings-page .rq-settings-card strong {
  color: #555555;
  font-size: 14px;
  font-weight: 600;
}

#settings-page .rq-settings-card span {
  color: #009bd8;
  font-size: 12px;
}

#settings-page .rq-settings-detail {
  gap: 14px;
}

#settings-page .rq-settings-detail-actions {
  min-height: 38px;
  align-items: center;
}

#settings-page .rq-settings-detail-actions .btn {
  min-height: 30px;
  border-radius: 4px;
  font-size: 12px;
}

#settings-page .rq-settings-detail .settings-panel {
  padding: 0;
  border-radius: 0;
  background: #ffffff;
}

#settings-page .settings-grid-v2 .settings-panel-head {
  min-height: 40px;
  align-items: center;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #dddddd;
  background: #f3f5f7;
}

#settings-page .settings-grid-v2 .settings-panel-head h3 {
  color: #555555;
  font-size: 14px;
  font-weight: 600;
}

#settings-page .settings-grid-v2 .settings-panel-head p {
  display: none;
}

#settings-page .settings-profile-card,
#settings-page .settings-form-grid,
#settings-page .settings-toggle-list,
#settings-page .settings-readonly-grid {
  margin: 14px;
}

#settings-page .settings-subsection {
  padding: 14px;
}

#settings-page .settings-grid-v2 .field input,
#settings-page .settings-grid-v2 .field textarea,
#settings-page .settings-grid-v2 .field select {
  min-height: 32px;
  border-radius: 4px;
  font-size: 12px;
}

#settings-page .settings-toggle,
#settings-page .settings-method-chip,
#settings-page .settings-tax-row,
#settings-page .settings-tax-row-class {
  border-radius: 0;
  background: #ffffff;
}

#settings-page .settings-item-types-table {
  font-size: 12px;
}

#settings-page .settings-item-types-table th,
#settings-page .settings-item-types-table td {
  height: 32px;
  padding: 5px 8px;
}

@media (max-width: 1100px) {
  #ebay-page .ebay-head {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 10px;
  }

  #ebay-page .ebay-head-metrics {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #ebay-page .ebay-dashboard-grid,
  #ebay-page .ebay-detail-grid,
  #settings-page .rq-settings-shell.settings-shell-v2 {
    grid-template-columns: 1fr;
  }

  #settings-page .rq-settings-sidebar {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #d8dde3;
  }

  #settings-page .rq-settings-side-link {
    min-width: max-content;
  }
}

/* Purchase Orders - same RepairQ-style shell rhythm as Inventory/Customers. */
#purchase-orders-page.inventory-page {
  padding-top: 0;
}

#purchase-orders-page > .dashboard-breadcrumb {
  display: none;
}

#purchase-orders-page .inventory-shell {
  min-height: calc(100vh - 120px);
  background: #ffffff;
}

#purchase-orders-page .inventory-title-bar {
  min-height: 42px;
  padding: 0 18px;
}

/* ============================================================================
   New Purchase Order - RepairQ-style procurement workspace
   ============================================================================ */
#new-purchase-order-page.newpo-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 56px;
  background: #f3f4f5;
  color: #555555;
  font-size: 12px;
}

#new-purchase-order-page .newpo-top {
  display: none;
}

#new-purchase-order-page .newpo-breadcrumb {
  gap: 4px;
  color: #8b9299;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
}

#new-purchase-order-page .newpo-breadcrumb span:last-child {
  color: #1d9bd7;
  font-weight: 500;
}

#new-purchase-order-page .newpo-header {
  align-items: center;
  min-height: 42px;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: #4a4a4a;
  box-shadow: none;
  color: #ffffff;
}

#new-purchase-order-page .newpo-title-block {
  display: flex;
  align-items: center;
  min-width: 0;
}

#new-purchase-order-page .newpo-kicker,
#new-purchase-order-page .newpo-header-meta,
#new-purchase-order-page .newpo-metrics {
  display: none;
}

#new-purchase-order-page .newpo-header h2 {
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#new-purchase-order-page .newpo-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 auto;
  flex-wrap: wrap;
  gap: 4px;
}

#new-purchase-order-page .newpo-top-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 26px;
  height: 26px;
  padding: 3px 10px;
  border-width: 1px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
}

#new-purchase-order-page .newpo-top-actions .btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#new-purchase-order-page .newpo-top-actions .btn-outline {
  border-color: #cfd6dd;
  background: #ffffff;
  color: #256a9b;
}

#new-purchase-order-page #newpo-save-later-btn,
#new-purchase-order-page #newpo-save-btn {
  border-color: #cfd6dd;
  background: #f6f8fa;
  color: #4b5563;
}

#new-purchase-order-page .newpo-top-actions .newpo-action-reconciled {
  border-color: #0f4f73;
  background: #124d6f;
  color: #ffffff;
}

#new-purchase-order-page .newpo-top-actions .newpo-action-print {
  border-color: #cfd6dd;
  background: #ffffff;
  color: #256a9b;
}

#new-purchase-order-page .newpo-top-actions .newpo-action-reopen {
  border-color: #cfd6dd;
  background: #ffffff;
  color: #0ea5e9;
}

#new-purchase-order-page #newpo-save-later-btn:disabled,
#new-purchase-order-page #newpo-il-order-top:disabled,
#new-purchase-order-page #newpo-il-order-bottom:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

#new-purchase-order-page .newpo-ms-import-btn {
  gap: 7px;
  min-height: 30px;
  height: 30px;
  padding: 3px 10px;
  border-color: #f4c88e;
  background: #fff7ed;
  color: #9a3412;
}

#new-purchase-order-page .newpo-ms-import-btn:hover {
  background: #ffedd5;
}

#new-purchase-order-page .newpo-ms-logo {
  width: 22px;
  height: 22px;
  border-radius: 2px;
}

#new-purchase-order-page .newpo-ms-logo-m {
  top: -6px;
  left: 5px;
  font-size: 20px;
}

#new-purchase-order-page .newpo-ms-logo-s {
  left: 6px;
  bottom: -8px;
  font-size: 28px;
}

#new-purchase-order-page #newpo-editor-view {
  background: #f3f4f5;
}

#new-purchase-order-page .newpo-layout {
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 42px;
  padding: 18px 14px 28px;
  align-items: start;
}

#new-purchase-order-page .newpo-sidebar {
  position: static;
  top: auto;
  gap: 18px;
}

#new-purchase-order-page .newpo-summary,
#new-purchase-order-page .newpo-supplier,
#new-purchase-order-page .newpo-tracking,
#new-purchase-order-page .newpo-main {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

#new-purchase-order-page .newpo-section-head,
#new-purchase-order-page .newpo-panel-head {
  min-height: 32px;
  padding: 7px 14px;
  border: 0;
  border-radius: 0;
  background: #4a4a4a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

#new-purchase-order-page .newpo-section-head svg,
#new-purchase-order-page .newpo-tab svg,
#new-purchase-order-page .newpo-field-icon svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#new-purchase-order-page .newpo-status-pill {
  width: calc(100% - 28px);
  min-height: 34px;
  margin: 18px 14px 12px;
  border-radius: 2px;
  background: #0b9bd2;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

#new-purchase-order-page .newpo-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 0 14px 12px;
}

#new-purchase-order-page .newpo-flow span {
  min-height: 24px;
  border-color: #d6dde5;
  border-radius: 3px;
  background: #f5f7f9;
  color: #5f6974;
  font-size: 11px;
  font-weight: 700;
}

#new-purchase-order-page .newpo-flow span.is-complete {
  border-color: #9bd9c7;
  background: #dff6ef;
  color: #116b58;
}

#new-purchase-order-page .newpo-flow span.is-active {
  border-color: #7ab9e2;
  background: #e6f4fc;
  color: #0b79b7;
}

#new-purchase-order-page .newpo-field {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 28px;
  margin: 0 14px 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#new-purchase-order-page .newpo-field-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 28px;
  background: transparent;
  color: #6b7280;
}

#new-purchase-order-page .newpo-field input,
#new-purchase-order-page .newpo-supplier select,
#new-purchase-order-page .newpo-catalog-row input[type="search"],
#new-purchase-order-page .newpo-table-actions input[type="search"],
#new-purchase-order-page .newpo-date input[type="date"] {
  min-height: 28px;
  height: 28px;
  padding: 3px 8px;
  border-color: #cfd4da;
  border-radius: 3px;
  background: #ffffff;
  color: #555555;
  font-size: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

#new-purchase-order-page .newpo-field input:focus,
#new-purchase-order-page .newpo-supplier select:focus,
#new-purchase-order-page .newpo-catalog-row input[type="search"]:focus,
#new-purchase-order-page .newpo-table-actions input[type="search"]:focus,
#new-purchase-order-page .newpo-date input[type="date"]:focus {
  border-color: #1d9bd7;
  box-shadow: 0 0 0 2px rgba(29, 155, 215, 0.18);
}

#new-purchase-order-page .newpo-totals {
  gap: 6px;
  padding: 8px 14px 12px;
  border-top: 1px solid #d8dde3;
  background: #ffffff;
}

#new-purchase-order-page .newpo-totals > div {
  color: #666666;
  font-size: 12px;
}

#new-purchase-order-page .newpo-totals strong,
#new-purchase-order-page .newpo-totals > div:last-child strong {
  color: #555555;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#new-purchase-order-page .newpo-supplier select {
  width: calc(100% - 28px);
  margin: 14px 14px 8px;
}

#new-purchase-order-page .newpo-tracking .newpo-fields {
  padding-top: 14px;
}

#new-purchase-order-page .newpo-tracking-numbers {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-2);
}

#new-purchase-order-page .newpo-tracking-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#new-purchase-order-page .newpo-tracking-entry .newpo-field {
  flex: 1;
  min-width: 0;
}

#new-purchase-order-page .newpo-tracking-remove {
  width: var(--space-8);
  height: var(--space-8);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--content-2);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

#new-purchase-order-page .newpo-tracking-remove:hover {
  border-color: var(--cp-danger);
  color: var(--cp-danger);
}

#new-purchase-order-page .newpo-add-tracking {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--cp-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

#new-purchase-order-page .newpo-tracking-status {
  margin: 4px 14px 14px;
  padding: 7px 8px;
  border-color: #d7e0e8;
  border-radius: 3px;
  background: #f5f8fb;
  color: #4f5963;
  font-size: 12px;
  font-weight: 600;
}

#new-purchase-order-page .newpo-tracking-status a {
  color: #1d9bd7;
}

#new-purchase-order-page .newpo-tracking-links {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

#new-purchase-order-page .newpo-tracking-links a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  text-decoration: none;
}

#new-purchase-order-page .newpo-tracking-links a span {
  overflow: hidden;
  color: var(--content-2);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#new-purchase-order-page .newpo-main {
  min-width: 0;
  overflow: visible;
}

#new-purchase-order-page .newpo-tabs-row {
  min-height: 56px;
  padding: 10px 12px;
  border-bottom: 1px solid #cbd3dc;
  background: #e8ecef;
}

#new-purchase-order-page .newpo-tabs {
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#new-purchase-order-page .newpo-tab {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid #c8d2dc;
  border-radius: 3px;
  background: #ffffff;
  color: #4d5965;
  font-size: 12px;
  font-weight: 700;
}

#new-purchase-order-page .newpo-tab.active {
  border-color: #0b9bd2;
  background: #0b9bd2;
  color: #ffffff;
}

#new-purchase-order-page .newpo-tab-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  background: #606a75;
  color: #ffffff;
  font-size: 11px;
}

#new-purchase-order-page .newpo-tab.active .newpo-tab-badge {
  background: #ffffff;
  color: #0b6f9c;
}

#new-purchase-order-page .newpo-date {
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #666666;
  font-size: 12px;
}

#new-purchase-order-page .newpo-date input[type="date"] {
  width: 150px;
}

#new-purchase-order-page .newpo-date-hint {
  color: #8a9099;
  font-size: 11px;
}

#new-purchase-order-page .newpo-rush {
  gap: 5px;
  color: #666666;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

#new-purchase-order-page .newpo-panel {
  background: #ffffff;
}

#new-purchase-order-page .newpo-panel-body {
  padding: 14px 18px 18px;
}

#new-purchase-order-page .newpo-catalog {
  margin-bottom: 14px;
}

#new-purchase-order-page .newpo-il-catalog {
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#new-purchase-order-page .newpo-il-catalog-bottom {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid #d8dde3;
}

#new-purchase-order-page .newpo-catalog-label {
  margin-bottom: 4px;
  color: #555555;
  font-size: 12px;
  font-weight: 600;
}

#new-purchase-order-page .newpo-subtabs {
  margin-top: 14px;
  border-bottom: 1px solid #d8dde3;
}

#new-purchase-order-page .newpo-subtab {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid #cfd6dd;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #ffffff;
  color: #4d5965;
  font-size: 12px;
  font-weight: 700;
}

#new-purchase-order-page .newpo-subtab.active {
  color: #4d5965;
  border-bottom-color: #ffffff;
}

#new-purchase-order-page .newpo-subpanel-note {
  margin: 12px 0 10px;
  color: #666666;
  font-size: 12px;
}

#new-purchase-order-page .newpo-table-actions,
#new-purchase-order-page .newpo-il-actions {
  gap: 10px;
  margin: 9px 0;
  padding: 0;
  border: 0;
}

#new-purchase-order-page .newpo-il-actions-top {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #d8dde3;
}

#new-purchase-order-page .newpo-il-actions-bottom {
  margin: 0 0 8px;
  padding: 8px 0 10px;
  border-bottom: 1px solid #d8dde3;
}

#new-purchase-order-page .newpo-type-filter {
  position: relative;
  width: min(320px, 100%);
}

#new-purchase-order-page .newpo-type-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid #cfd4da;
  border-radius: 3px;
  background: #ffffff;
  color: #777777;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

#new-purchase-order-page .newpo-type-filter-toggle:focus {
  outline: none;
  border-color: #1d9bd7;
  box-shadow: 0 0 0 2px rgba(29, 155, 215, 0.18);
}

#new-purchase-order-page .newpo-type-filter-caret {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 11px;
}

#new-purchase-order-page .newpo-type-filter-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 120;
  width: min(360px, 82vw);
  border: 1px solid #1d9bd7;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

#new-purchase-order-page .newpo-type-filter-menu input[type="search"] {
  width: 100%;
  height: 32px;
  min-height: 32px;
  border: 0;
  border-bottom: 1px solid #1d9bd7;
  border-radius: 0;
  box-shadow: none;
}

#new-purchase-order-page .newpo-type-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #1d9bd7;
}

#new-purchase-order-page .newpo-type-filter-actions button {
  min-height: 32px;
  border: 0;
  border-right: 1px solid #1d9bd7;
  background: #ffffff;
  color: #1d9bd7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

#new-purchase-order-page .newpo-type-filter-actions button:last-child {
  border-right: 0;
}

#new-purchase-order-page .newpo-type-filter-actions button:hover {
  background: #eef8fd;
}

#new-purchase-order-page .newpo-type-filter-options {
  max-height: 290px;
  overflow-y: auto;
}

#new-purchase-order-page .newpo-type-filter-group {
  min-height: 31px;
  padding: 7px 9px;
  background: #b8babd;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

#new-purchase-order-page .newpo-type-filter-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  color: #666666;
  cursor: pointer;
  font-size: 12px;
}

#new-purchase-order-page .newpo-type-filter-option:hover {
  background: #f3f8fb;
}

#new-purchase-order-page .newpo-type-filter-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #1d9bd7;
}

#new-purchase-order-page .newpo-type-filter-empty {
  padding: 10px;
  color: #6b7280;
  font-size: 12px;
}

#new-purchase-order-page .newpo-il-actions .btn,
#new-purchase-order-page .newpo-table-actions .btn {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
}

#new-purchase-order-page .newpo-il-actions .btn-outline,
#new-purchase-order-page .newpo-table-actions .btn-outline {
  border-color: #cfd6dd;
  background: #ffffff;
  color: #4b5563;
}

#new-purchase-order-page #newpo-il-order-top:not(:disabled),
#new-purchase-order-page #newpo-il-order-bottom:not(:disabled) {
  border-color: #0b9bd2;
  background: #0b9bd2;
  color: #ffffff;
}

#new-purchase-order-page .newpo-receive-btn {
  border-color: #16a34a;
  background: #16a34a;
  color: #ffffff;
}

#new-purchase-order-page .newpo-table-wrap {
  overflow: auto;
  border-color: #d8dde3;
  border-radius: 0;
}

#new-purchase-order-page .newpo-table {
  width: 100%;
  border-collapse: collapse;
  color: #555555;
  font-size: 12px;
  line-height: 1.2;
}

#new-purchase-order-page .newpo-reorder-table {
  min-width: 1180px;
}

#new-purchase-order-page .newpo-itemlist-table {
  min-width: 1260px;
}

#new-purchase-order-page .newpo-table th,
#new-purchase-order-page .newpo-table td {
  height: 30px;
  padding: 5px 8px;
  border-bottom: 1px solid #dcdcdc;
  white-space: nowrap;
}

#new-purchase-order-page .newpo-table th {
  height: 34px;
  background: #e6ebf0;
  color: #60666c;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

#new-purchase-order-page .newpo-table td {
  overflow: hidden;
  color: #555555;
  text-overflow: ellipsis;
}

#new-purchase-order-page .newpo-table tbody tr:hover {
  background: #f4f9fc;
}

#new-purchase-order-page .newpo-check {
  width: 34px;
  text-align: center;
}

#new-purchase-order-page .newpo-add-col {
  width: 52px;
}

#new-purchase-order-page .newpo-add-btn {
  width: 28px;
  height: 22px;
  border-radius: 3px;
  background: #0b9bd2;
}

#new-purchase-order-page .newpo-add-btn:hover {
  background: #087ead;
}

#new-purchase-order-page .newpo-itemlist-table input[type="number"],
#new-purchase-order-page .newpo-itemlist-table input[type="text"] {
  min-height: 24px;
  height: 24px;
  padding: 2px 5px;
  border-color: #cfd4da;
  border-radius: 3px;
  font-size: 12px;
}

#new-purchase-order-page .newpo-itemlist-table input.newpo-note-input {
  width: min(170px, 22vw);
}

#new-purchase-order-page .newpo-itemlist-table input.newpo-supplier-sku-input {
  width: min(150px, 20vw);
  text-align: left;
}

#new-purchase-order-page .newpo-empty,
#new-purchase-order-page .newpo-il-empty-rule {
  color: #6b7280;
  font-size: 12px;
}

#new-purchase-order-page .newpo-rte {
  min-height: 390px;
  border: 1px solid #d8dde3;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: none;
}

#new-purchase-order-page .newpo-rte-toolbar {
  min-height: 40px;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid #d8dde3;
  background: #ffffff;
}

#new-purchase-order-page .newpo-rte-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #2f3a45;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

#new-purchase-order-page .newpo-rte-toolbar button:hover,
#new-purchase-order-page .newpo-rte-toolbar button.is-active {
  border-color: #b8d8ec;
  background: #eef8fd;
  color: #0b80ba;
}

#new-purchase-order-page .newpo-rte-toolbar button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#new-purchase-order-page .newpo-rte-toolbar select {
  height: 28px;
  min-height: 28px;
  padding: 3px 22px 3px 8px;
  border-color: #d1d7de;
  border-radius: 3px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 12px;
}

#new-purchase-order-page .newpo-rte-sep {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: #d8dde3;
}

#new-purchase-order-page .newpo-rte-editor {
  min-height: 340px;
  max-height: none;
  padding: 14px 16px;
  color: #2f3740;
  font-size: 13px;
  line-height: 1.45;
}

#new-purchase-order-page .newpo-rte-source {
  min-height: 340px;
  border-top: 0;
  color: #2f3740;
  font-size: 12px;
}

@media (max-width: 1180px) {
  #new-purchase-order-page .newpo-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 8px 12px;
  }

  #new-purchase-order-page .newpo-top-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #new-purchase-order-page .newpo-layout {
    gap: 16px;
  }
}

@media (max-width: 900px) {
  #new-purchase-order-page .newpo-layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  #new-purchase-order-page .newpo-tabs-row,
  #new-purchase-order-page .newpo-il-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #new-purchase-order-page .newpo-date {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ============================================================
 * Premium operations polish
 * Keeps ticket/status colors as operational signals, but makes
 * the surrounding shell, typography and data grids feel cohesive.
 * ============================================================ */

:root {
  --bg: #f4f6f8;
  --bg-elev: #ffffff;
  --bg-elev-2: #f8fafc;
  --bg-input: #ffffff;
  --border: #d9e0e8;
  --border-strong: #c8d1dc;
  --text: #243244;
  --text-soft: #526173;
  --text-dim: #6b7686;
  --accent: #078fc2;
  --accent-hover: #0679a6;
  --accent-soft: rgba(7, 143, 194, 0.11);
  --accent-glow: rgba(7, 143, 194, 0.22);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --shadow: 0 14px 40px rgba(20, 31, 45, 0.10);
  --cp-surface: #ffffff;
  --cp-surface-raised: #fbfcfe;
  --cp-surface-muted: #f5f7fa;
  --cp-line: #e4e9ef;
  --cp-line-strong: #cbd5e1;
  --cp-ink: #172235;
  --cp-muted: #647184;
  --cp-nav: #07090d;
  --cp-nav-elev: #11151d;
  --cp-focus: rgba(7, 143, 194, 0.22);
}

html,
body {
  background: #f4f6f8;
  color: var(--text);
}

body {
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

.shell {
  background:
    linear-gradient(180deg, #f8fafc 0, #f4f6f8 220px, #f4f6f8 100%);
  color: var(--text);
}

button,
input,
select,
textarea {
  letter-spacing: 0;
}

input,
select,
textarea {
  border: 1px solid var(--cp-line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--cp-ink);
  box-shadow: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

input::placeholder,
textarea::placeholder {
  color: #97a3b3;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--cp-focus);
  outline: none;
}

.btn {
  border-radius: 6px;
  font-weight: 750;
  letter-spacing: 0;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(7, 143, 194, 0.18);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: #ffffff;
  color: var(--cp-ink);
  border-color: var(--cp-line-strong);
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #b8c5d4;
}

.login-view {
  background:
    radial-gradient(circle at top, rgba(7, 143, 194, 0.10), transparent 34rem),
    linear-gradient(180deg, #f8fafc 0, #eef2f6 100%);
}

.login-panel {
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.13);
  overflow: hidden;
}

.login-panel::before {
  height: 4px;
  background: linear-gradient(90deg, #078fc2, #22a7de 48%, #0f766e);
}

.login-logo {
  width: 188px;
  border-radius: 6px;
  padding: 12px 18px;
  box-shadow: 0 0 0 1px #e2e8f0;
}

.login-panel h1 {
  color: var(--cp-ink);
  font-size: 24px;
  font-weight: 820;
  letter-spacing: 0;
}

.login-panel p {
  color: var(--cp-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-device-notice {
  display: block;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  text-align: left;
  font-size: 13px;
}

.login-device-notice strong {
  display: block;
  margin-bottom: 4px;
  color: #92400e;
}

.login-device-notice span {
  color: #78350f;
}

#login-device-verify {
  margin-top: 10px;
}

.login-agent-downloads {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

.login-agent-downloads > span {
  display: block;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
}

.login-agent-download-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.login-agent-download-buttons .btn {
  font-size: 12.5px;
}

.topbar {
  min-height: 58px;
  padding: 0 clamp(16px, 2vw, 30px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--cp-nav);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.35), 0 10px 28px rgba(15, 23, 42, 0.14);
}

.brand {
  gap: 16px;
}

.brand-logo {
  width: auto;
  height: 40px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav-btn {
  position: relative;
  height: 58px;
  padding: 0 10px;
  border-bottom: 3px solid transparent;
  color: #d9e1ea;
  font-size: 13px;
  font-weight: 650;
}

.nav-btn:hover,
.nav-btn.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.065);
}

.nav-btn.active {
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav-btn.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--space-1);
  background: var(--accent);
  content: "";
  pointer-events: none;
}

.nav-dropdown,
.account-menu {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  background: #0b0f16;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.nav-dropdown-item,
.account-menu-item {
  font-size: 13px;
  font-weight: 650;
}

.status-pill,
.worker-pill,
.top-actions .account-menu-btn,
.register-chip {
  border-radius: 6px;
}

.status-pill {
  height: 40px;
  background: #151a22;
  color: #dce4ee;
}

.worker-pill {
  height: 40px;
  background: #1d2330;
}

.top-actions .account-menu-btn {
  height: 40px;
  min-height: 40px;
  background: #1d2330;
}

.register-chip {
  min-height: 40px;
  background: rgba(34, 197, 94, 0.12);
}

.subbar {
  position: sticky;
  top: 58px;
  z-index: 1200;
  padding: 8px clamp(16px, 2vw, 30px);
  border-bottom: 1px solid var(--cp-line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.subbar-breadcrumb {
  color: var(--cp-muted);
  font-size: 13px;
  font-weight: 650;
}

.search-scopes,
.subbar .top-search,
.subbar .top-icon-btn,
.subbar .repair-price-calc-btn {
  border-color: var(--cp-line-strong);
  border-radius: 6px;
}

.scope-btn {
  background: #f5f7fa;
  color: #647184;
}

.scope-btn:hover {
  background: #eef3f7;
}

.scope-btn.active {
  background: #1f2937;
  color: #ffffff;
}

.subbar .top-search input {
  color: var(--cp-ink);
  font-size: 14px;
}

.subbar .top-search button {
  min-width: 54px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 760;
}

#tickets-list-view.panel,
#inventory-page .inventory-shell,
#receive-page .inventory-shell,
.customers-page .inventory-shell,
.reports-page .report-shell,
.settings-page .rq-settings-shell {
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  background: var(--cp-surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

#tickets-list-view .panel-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--cp-line);
  background: #ffffff;
}

#tickets-list-view .panel-head .eyebrow {
  display: none;
}

#tickets-list-view .panel-head h2,
.inventory-title-bar h2 {
  color: var(--cp-ink);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0;
}

.inventory-title-bar {
  min-height: auto;
  align-items: flex-start;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--cp-line);
  background: #ffffff;
  color: var(--cp-ink);
}

#inventory-page .inventory-title-bar h2 {
  white-space: normal;
}

.inventory-title-bar .inventory-page-subtitle,
.inventory-title-bar #inventory-page-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--cp-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 680;
}

.inventory-title-bar .inventory-section-tabs {
  gap: 6px;
  padding: 1px 0 4px;
}

.inventory-title-bar .inventory-section-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--cp-line-strong);
  border-radius: 6px;
  background: #f6f8fb;
  color: #526173;
  font-size: 12px;
  font-weight: 720;
}

.inventory-title-bar .inventory-section-tabs button:hover:not(.active) {
  border-color: #b8c5d4;
  background: #eef3f7;
  color: var(--cp-ink);
}

.inventory-title-bar .inventory-section-tabs button.active {
  border-color: rgba(7, 143, 194, 0.22);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(7, 143, 194, 0.16);
}

.devices-toolbar {
  padding: 12px 16px 14px;
  background: #ffffff;
}

.devices-toolbar-row-filters {
  border: 1px solid var(--cp-line);
  border-radius: 6px;
  background: #f8fafc;
}

.devices-pagination-summary {
  color: var(--cp-muted);
  font-size: 12px;
}

.devices-pagination-summary strong,
.result-count {
  color: var(--cp-ink);
  font-weight: 780;
}

.devices-pagination-summary select,
.devices-date-chip,
.inventory-filter-pill,
.devices-link-btn,
.devices-pagination-nav button {
  border-radius: 6px;
}

.devices-link-btn {
  color: var(--accent);
  font-weight: 720;
}

.round-action {
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.customers-table-wrap,
.inventory-table-wrap,
.trade-table-wrap,
.sale-items-table-wrap,
.refurb-items-table-wrap,
.invord-table-wrap {
  border: 1px solid var(--cp-line);
  background: #ffffff;
  scrollbar-color: #b8c5d4 transparent;
  scrollbar-width: thin;
}

.invord-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.invord-edit-columns {
  flex: 0 0 auto;
  min-height: var(--space-9);
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}

#tickets-list,
.inventory-page .customers-table-wrap {
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.customers-table-wrap::-webkit-scrollbar,
.inventory-table-wrap::-webkit-scrollbar,
.trade-table-wrap::-webkit-scrollbar,
.sale-items-table-wrap::-webkit-scrollbar,
.refurb-items-table-wrap::-webkit-scrollbar,
.invord-table-wrap::-webkit-scrollbar,
.inventory-title-bar .inventory-section-tabs::-webkit-scrollbar,
.top-nav::-webkit-scrollbar {
  height: 8px;
}

.customers-table-wrap::-webkit-scrollbar-thumb,
.inventory-table-wrap::-webkit-scrollbar-thumb,
.trade-table-wrap::-webkit-scrollbar-thumb,
.sale-items-table-wrap::-webkit-scrollbar-thumb,
.refurb-items-table-wrap::-webkit-scrollbar-thumb,
.invord-table-wrap::-webkit-scrollbar-thumb,
.inventory-title-bar .inventory-section-tabs::-webkit-scrollbar-thumb,
.top-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b8c5d4;
}

.customers-table,
.customer-devices-table,
.inventory-table,
#new-purchase-order-page .newpo-table {
  color: #3f4a59;
  font-variant-numeric: tabular-nums;
}

.customers-table th,
.customer-devices-table th,
.inventory-page .customer-devices-table th,
.tickets-queue-table th,
#new-purchase-order-page .newpo-table th {
  background: #f1f5f9;
  color: #526173;
  font-size: 11px;
  font-weight: 780;
  text-transform: none;
}

.customers-table td,
.customer-devices-table td,
.inventory-page .customer-devices-table td,
.tickets-queue-table td,
#new-purchase-order-page .newpo-table td {
  color: #3f4a59;
}

.customer-devices-table tbody tr:hover,
.inventory-page .customer-devices-table tbody tr:hover,
.tickets-queue-table tbody tr:hover,
#new-purchase-order-page .newpo-table tbody tr:hover {
  background: #f8fbfd;
}

.tickets-queue-table .ticket-status-badge,
.ticket-status-badge,
.device-badge {
  border-radius: 999px;
  font-weight: 780;
}

.tickets-queue-table .ticket-number-text {
  color: var(--accent);
  font-weight: 780;
}

.ticket-create-shell,
.sale-ticket-shell.ticket-create-shell {
  gap: 20px;
}

.ticket-create-main,
.ticket-create-sidebar {
  min-width: 0;
}

.repair-fast-header,
.repair-fast-panel,
.ticket-create-nav-box,
.ticket-create-financial-box {
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.ticket-create-nav-head,
.ticket-create-financial-head {
  letter-spacing: 0.04em;
}

.repair-fast-save-top,
.repair-action-btn.repair-action-save,
.ticket-create-charge-btn {
  border-radius: 6px;
  font-weight: 820;
}

.ai-field-help-launcher {
  width: 50px;
  height: 50px;
  right: 18px;
  bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.24);
}

.ai-field-help-panel {
  border-radius: 8px;
}

body:has(.repair-ticket-action-bar) .ai-field-help-launcher,
body:has(.sale-bottom-bar) .ai-field-help-launcher,
body:has(.newpo-il-actions-bottom) .ai-field-help-launcher {
  bottom: 86px;
}

body:has(.repair-ticket-action-bar) .ai-field-help-panel,
body:has(.sale-bottom-bar) .ai-field-help-panel,
body:has(.newpo-il-actions-bottom) .ai-field-help-panel {
  bottom: 146px;
}

@media (max-width: 1320px) {
  .topbar {
    min-height: 58px;
    padding: 0 12px;
    flex-wrap: nowrap;
  }

  .brand {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .brand-copy {
    min-width: 0;
  }

  .top-nav {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .nav-btn {
    height: 58px;
    padding: 0 7px;
    font-size: 12.5px;
  }

  .top-actions {
    width: auto;
    margin-left: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .top-actions .status-pill {
    display: none;
  }

  .register-chip {
    max-width: 138px;
    padding: 0 10px;
  }

  .register-chip-label {
    display: none;
  }

  .subbar {
    top: 58px;
  }
}

@media (max-width: 900px) {
  .ticket-create-shell,
  .sale-ticket-shell.ticket-create-shell {
    grid-template-columns: 1fr;
  }

  .ticket-create-sidebar {
    position: static;
    order: 2;
  }

  .ticket-create-nav-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .shell {
    --app-side-space: 18px;
    --inventory-side-space: 10px;
  }

  .topbar {
    min-height: 0;
    padding: 8px 10px;
    gap: 8px;
    overflow: hidden;
  }

  .brand {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .brand-logo {
    height: 36px;
    padding: 0;
  }

  .brand-copy {
    flex: 1 1 auto;
  }

  .top-nav {
    gap: 2px;
    padding-bottom: 2px;
  }

  .nav-btn {
    height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .top-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    width: 100%;
    justify-content: stretch;
  }

  .top-actions .status-pill {
    display: none;
  }

  .top-actions .register-chip,
  .top-actions .worker-pill,
  .top-actions .account-menu-btn {
    height: 36px;
    min-height: 36px;
  }

  .top-actions .register-chip {
    justify-content: flex-start;
    max-width: 100%;
    padding: 0 10px;
  }

  .worker-pill {
    max-width: 116px;
    padding: 0 8px;
  }

  .worker-pill #worker-label {
    display: none;
  }

  .worker-avatar {
    --worker-avatar-size: calc(var(--space-8) + var(--space-1));
    width: var(--worker-avatar-size);
    height: var(--worker-avatar-size);
    aspect-ratio: 1 / 1;
    flex-basis: var(--worker-avatar-size);
  }

  .top-actions .account-menu-btn {
    width: 40px;
    min-width: 40px;
  }

  .subbar {
    top: 102px;
    padding: 8px 10px;
  }

  .subbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-left: 0;
  }

  .subbar-breadcrumb {
    display: none;
  }

  .search-scopes,
  .subbar .repair-price-calc-btn {
    display: none;
  }

  .subbar .top-search {
    grid-column: 1 / 2;
    width: auto;
    min-width: 0;
  }

  .subbar .top-search input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    font-size: 14px;
  }

  .subbar .top-search button {
    min-width: 48px;
    font-size: 14px;
  }

  .subbar .top-icon-btn {
    width: 36px;
    height: 36px;
  }

  .tickets-page,
  .quick-sale-page,
  .repair-ticket-page,
  .trade-in-page,
  .inventory-page,
  .customers-page,
  .reports-page,
  .metrics-page,
  .staff-page {
    width: calc(100% - 20px);
    padding-top: 12px;
  }

  #tickets-page.tickets-page,
  #inventory-page.inventory-page {
    width: calc(100% - 20px);
  }

  .inventory-title-bar {
    gap: 10px;
    padding: 12px;
  }

  .inventory-title-bar h2 {
    font-size: 17px;
  }

  .inventory-title-bar .inventory-section-tabs {
    width: 100%;
    padding-bottom: 6px;
  }

  .devices-toolbar {
    padding: 10px 12px 12px;
  }

  .devices-toolbar-row,
  .devices-toolbar-row-top,
  .devices-pagination-summary,
  .devices-right-controls {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .devices-right-controls {
    width: 100%;
    justify-content: space-between;
  }

  .devices-toolbar-row-filters {
    padding: 8px;
  }

  .ticket-create-nav-body {
    grid-template-columns: 1fr;
  }

  .repair-fast-header,
  .repair-fast-panel,
  .ticket-create-nav-box,
  .ticket-create-financial-box {
    border-radius: 8px;
  }

  .repair-fast-action-bar .repair-action-save,
  .repair-action-btn.repair-action-save,
  .repair-fast-save-top {
    width: 100%;
    min-width: 0;
  }

  .repair-ticket-action-bar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .ai-field-help-launcher {
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
  }

  body:has(.repair-ticket-action-bar) .ai-field-help-launcher,
  body:has(.sale-bottom-bar) .ai-field-help-launcher,
  body:has(.newpo-il-actions-bottom) .ai-field-help-launcher {
    bottom: calc(136px + env(safe-area-inset-bottom));
  }

  .ai-field-help-panel {
    right: 12px;
    bottom: calc(128px + env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-height: calc(100vh - 168px);
  }

  body:has(.repair-ticket-action-bar) .ai-field-help-panel,
  body:has(.sale-bottom-bar) .ai-field-help-panel,
  body:has(.newpo-il-actions-bottom) .ai-field-help-panel {
    bottom: calc(190px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   Phase 2 — global primitives on Compupod design tokens
   ========================================================================== */
body.cp {
  --bg: var(--surface-2);
  --bg-elev: var(--surface);
  --bg-elev-2: var(--surface-2);
  --bg-input: var(--surface);
  --border: var(--border-1);
  --border-strong: var(--border-2);
  --border-bright: var(--border-2);
  --text: var(--content-1);
  --text-soft: var(--content-2);
  --text-dim: var(--content-3);
  --text-mute: var(--content-3);
  --accent: var(--cp-accent);
  --accent-hover: var(--cp-accent-hover);
  --accent-soft: var(--cp-accent-soft);
  --accent-glow: color-mix(in srgb, var(--cp-accent) 28%, transparent);
  --accent-text: var(--cp-accent);
  --success: var(--cp-success);
  --danger: var(--cp-danger);
  --warning: var(--cp-warning);
  --radius: var(--radius-md);
  --shadow: var(--shadow-sm);
  min-height: 100vh;
  background: var(--surface-2);
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-feature-settings: "cv11", "ss01";
}

body.cp,
.cp button,
.cp input,
.cp select,
.cp textarea {
  font-family: var(--sans);
  letter-spacing: 0;
}

.cp code,
.cp pre,
.cp kbd,
.cp samp {
  font-family: var(--mono);
}

.cp :where(button, input, select, textarea, a, [role="button"], [tabindex]):focus {
  outline: none;
}

.cp :where(button, input, select, textarea, a, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp ::selection {
  background: var(--cp-accent-soft);
  color: var(--content-1);
}

.cp label {
  color: var(--content-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  text-transform: none;
}

.cp :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp textarea {
  min-height: calc(var(--space-10) * 2);
  padding-block: var(--space-3);
}

.cp :where(input, textarea)::placeholder {
  color: var(--content-3);
}

.cp :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus {
  border-color: var(--cp-accent);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.cp :where(.btn, .inventory-page-btn, .invord-page-num, .invord-reset-btn, .devices-link-btn, .pagination button, .ticket-menu-item) {
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.cp :where(.btn, .inventory-page-btn, .invord-page-num, .invord-reset-btn, .devices-link-btn, .pagination button):active {
  transform: translateY(0.5px);
}

.cp :where(.btn-primary, button.btn-primary) {
  border: 1px solid var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  box-shadow: none;
}

.cp :where(.btn-primary, button.btn-primary):hover:not(:disabled) {
  border-color: var(--cp-accent-hover);
  background: var(--cp-accent-hover);
  color: var(--cp-accent-content);
}

.cp :where(.btn-secondary, button.btn-secondary, .inventory-page-btn, .invord-reset-btn, .devices-link-btn, .pagination button) {
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

.cp :where(.btn-secondary, button.btn-secondary, .inventory-page-btn, .invord-reset-btn, .devices-link-btn, .pagination button):hover:not(:disabled) {
  border-color: var(--border-2);
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp :where(.btn-danger, button.btn-danger) {
  border: 1px solid color-mix(in srgb, var(--cp-danger) 28%, transparent);
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
}

.cp :where(button, .btn):disabled,
.cp :where(button[aria-disabled="true"], .btn[aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: .56;
  transform: none;
}

.cp :where(.top-icon-btn, .icon-btn, .modal-zoom-btn, .modal-close, .newpo-modal-close, .customer-picker-close, .pc-modal-close-btn, .repair-technician-modal-close, .my-work-chat-head-icon) {
  border-radius: var(--radius-md);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.cp :where(.top-icon-btn, .icon-btn, .modal-zoom-btn, .modal-close, .newpo-modal-close, .customer-picker-close, .pc-modal-close-btn, .repair-technician-modal-close):hover {
  background: var(--surface-hover);
}

.cp :where(table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp :where(table thead th) {
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp :where(table tbody td, table thead th) {
  padding: var(--space-2) var(--space-3);
  border-color: var(--border-1);
}

.cp :where(table tbody tr) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp :where(table tbody tr:hover) {
  background: var(--surface-hover);
}

.cp :where(.panel, .repair-panel, .repair-fast-panel, .metric-card, .metric-panel, .metric-time-card, .dashboard-op-card, .my-work-hero-card, .ticket-create-nav-box, .ticket-create-financial-box, .settings-card, .rq-settings-card, .customers-table-wrap, .devices-table-wrap, .invord-table-wrap, .metric-time-table-wrap) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(.modal.open, .camera-modal.open, .pc-modal[aria-hidden="false"], .rpc-modal[aria-hidden="false"], .newpo-modal-overlay:not(.hidden), .inv-form-overlay:not(.hidden), .trade-modal-overlay:not(.hidden), .repair-technician-modal-overlay:not(.hidden), .staff-edit-modal:not(.hidden), .my-work-chat-modal:not(.hidden), .my-work-chat-modal-backdrop:not(.hidden), .my-work-chat-search-modal:not(.hidden)) {
  animation: cp-overlay-in var(--dur-fast) var(--ease-standard);
  z-index: var(--z-modal);
}

.cp .worker-message-overlay:not(.hidden) {
  animation: cp-overlay-in var(--dur-fast) var(--ease-standard);
}

.cp .newpo-modal-overlay:not(.hidden) {
  z-index: var(--cp-z-floating);
}

.cp .newpo-modal-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--space-8));
}

.cp .newpo-modal-body {
  overflow-y: auto;
}

.cp :where(.modal-body, .camera-sheet, .pc-modal-body, .rpc-modal-body, .newpo-modal-card, .inv-form-panel, .trade-modal-panel, .repair-technician-modal-card, .staff-edit-card, .worker-message-card, .my-work-chat-search-card) {
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-card-in var(--dur-base) var(--ease-standard);
}

.cp :where(.nav-dropdown, .account-menu, .ticket-menu, .inv-row-menu, .reports-menu-dropdown, .devices-add-filter-popover, .devices-date-popover, .devices-multiselect-popover, .devices-date-popover-standalone, .invord-itype-popover, .pc-type-popover, .cie-lock-popover, .iim-ref-popover, .my-work-chat-menu, .my-work-chat-picker, .my-work-chat-reaction-popover):not(.hidden) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
  z-index: var(--z-dropdown);
}

.cp :where(.dashboard-loading, .tickets-loading, .ticket-detail-loading, .customers-loading, .devices-loading, .metrics-loading, .sale-ticket-loading, .repair-ticket-loading, .trade-ticket-loading, .refurbish-ticket-loading, .inventory-loading) {
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

body.cp.is-chat-view .subbar,
.cp .shell:has(#compupod-chat-page:not(.hidden)) .subbar {
  display: none;
}

body.cp.is-chat-view #compupod-chat-page.home-main,
.cp .shell:has(#compupod-chat-page:not(.hidden)) #compupod-chat-page.home-main {
  height: calc(100vh - 58px);
  min-height: calc(100vh - 58px);
  padding-top: 0;
}

#compupod-chat-page .my-work-chat-initial-loader {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface) 94%, var(--cp-accent) 6%);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-initial-loader.hidden {
  display: none;
}

#compupod-chat-page .my-work-chat-initial-loader > div {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  text-align: center;
}

#compupod-chat-page .my-work-chat-initial-mark {
  width: calc(var(--space-10) + var(--space-2));
  height: calc(var(--space-10) + var(--space-2));
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 34%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--cp-accent) 14%, var(--surface-2));
  color: var(--cp-accent);
  box-shadow: var(--shadow-md);
}

#compupod-chat-page .my-work-chat-initial-mark .cp-icon {
  width: var(--space-6);
  height: var(--space-6);
}

#compupod-chat-page .my-work-chat-initial-loader strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-initial-loader em {
  color: var(--content-3);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-bubble.is-pending {
  opacity: .72;
}

#compupod-chat-page .my-work-chat-bubble.is-failed {
  border-left: 3px solid var(--cp-danger);
}

#compupod-chat-page .my-work-chat-bubble.is-failed .my-work-chat-message-copy footer span {
  background: color-mix(in srgb, var(--cp-danger) 18%, transparent);
  color: var(--cp-danger);
}

/* Chat fine polish: Slack-like message rhythm with Compupod tokens. */
#compupod-chat-page {
  --chat-thread-reply-avatar: calc(var(--space-5) + var(--space-1));
}

#compupod-chat-page .my-work-chat-avatar,
#compupod-chat-page .my-work-chat-message-avatar,
#compupod-chat-page .my-work-chat-thread-reply-avatar {
  aspect-ratio: 1;
  width: var(--chat-avatar);
  min-width: var(--chat-avatar);
  height: var(--chat-avatar);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius-circle);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
}

#compupod-chat-page .my-work-chat-avatar.has-image,
#compupod-chat-page .my-work-chat-message-avatar.has-image,
#compupod-chat-page .my-work-chat-thread-reply-avatar.has-image {
  background: var(--surface-3);
}

#compupod-chat-page .my-work-chat-avatar.has-image img,
#compupod-chat-page .my-work-chat-message-avatar.has-image img,
#compupod-chat-page .my-work-chat-thread-reply-avatar.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#compupod-chat-page .my-work-chat-avatar.is-department {
  overflow: visible;
  border-radius: var(--radius-sm);
  background: transparent;
  color: currentColor;
}

#compupod-chat-page .my-work-chat-thread-reply-avatar {
  width: var(--chat-thread-reply-avatar);
  min-width: var(--chat-thread-reply-avatar);
  height: var(--chat-thread-reply-avatar);
  border: 1px solid var(--border-1);
  font-size: var(--text-xs);
}

#compupod-chat-page .my-work-chat-thread-reply-avatar.is-placeholder {
  background: var(--surface-3);
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-avatar-presence {
  position: relative;
  width: var(--chat-avatar);
  height: var(--chat-avatar);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  isolation: isolate;
}

#compupod-chat-page .my-work-chat-head-main.is-dm > .my-work-chat-avatar,
#compupod-chat-page .my-work-chat-head-main.is-dm > .my-work-chat-avatar-presence,
#compupod-chat-page .my-work-chat-head-main.is-dm > .my-work-chat-avatar-presence > .my-work-chat-avatar {
  width: calc(var(--space-10) + var(--space-1));
  min-width: calc(var(--space-10) + var(--space-1));
  height: calc(var(--space-10) + var(--space-1));
  border-radius: var(--radius-circle);
}

#compupod-chat-page .my-work-chat-presence-dot {
  right: 0;
  bottom: 0;
  width: var(--space-3);
  height: var(--space-3);
  border: calc(var(--space-1) / 2) solid var(--surface-2);
  border-radius: var(--radius-circle);
  box-shadow: none;
  transform: translate(calc(var(--space-1) / 2), calc(var(--space-1) / 2));
  z-index: 1;
}

#compupod-chat-page .my-work-chat-messages {
  padding: var(--space-4) 0 calc(var(--chat-composer) + var(--space-8));
}

#compupod-chat-page .my-work-chat-bubble {
  align-items: start;
  gap: var(--space-3);
  min-height: calc(var(--chat-avatar) + var(--space-2));
  padding: var(--space-2) var(--space-5);
  transition: background var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-bubble.is-grouped {
  min-height: calc(var(--chat-avatar) + var(--space-2));
  padding: var(--space-2) var(--space-5);
}

#compupod-chat-page .my-work-chat-message-avatar-spacer {
  display: none;
}

#compupod-chat-page .my-work-chat-message-avatar-spacer time {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

#compupod-chat-page .my-work-chat-message-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-message-copy header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

#compupod-chat-page .my-work-chat-message-copy footer:empty {
  display: none;
}

#compupod-chat-page .my-work-chat-message-copy > div:not(.my-work-chat-attachments):not(.my-work-chat-reactions) {
  line-height: var(--leading-body);
}

#compupod-chat-page .my-work-chat-message-skeleton {
  pointer-events: none;
}

#compupod-chat-page .my-work-chat-message-skeleton .my-work-chat-message-avatar {
  background: var(--surface-3);
}

#compupod-chat-page .my-work-chat-message-skeleton .my-work-chat-message-copy {
  gap: var(--space-2);
  padding-top: var(--space-1);
}

#compupod-chat-page .my-work-chat-message-skeleton header {
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-message-skeleton header .cp-skeleton:first-child {
  width: calc(var(--space-10) * 2);
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-message-skeleton header .cp-skeleton:last-child {
  width: calc(var(--space-10) + var(--space-4));
  height: var(--space-3);
}

#compupod-chat-page .my-work-chat-message-skeleton .my-work-chat-message-copy > .cp-skeleton {
  width: min(100%, calc(var(--space-10) * 8));
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-message-skeleton .my-work-chat-message-copy > .cp-skeleton.is-short {
  width: min(72%, calc(var(--space-10) * 5));
}

#compupod-chat-page .my-work-chat-reactions {
  gap: var(--space-2);
  margin-top: var(--space-1);
}

#compupod-chat-page .my-work-chat-reaction-chip {
  min-height: calc(var(--space-6) + var(--space-1));
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-reaction-chip:hover,
#compupod-chat-page .my-work-chat-reaction-chip:focus-visible {
  background: var(--surface-hover);
  color: var(--content-1);
  box-shadow: var(--focus-ring);
  outline: 0;
}

#compupod-chat-page .my-work-chat-reaction-chip .my-work-chat-reaction-emoji {
  font-size: var(--text-lg);
}

#compupod-chat-page .my-work-chat-reaction-chip.is-reacted {
  background: color-mix(in srgb, var(--cp-accent) 20%, var(--surface-3));
  color: var(--cp-accent-content);
}

#compupod-chat-page .my-work-chat-reaction-add {
  width: calc(var(--space-8) + var(--space-1));
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-mention-token,
#compupod-chat-page .chat-mention {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cp-accent) 22%, transparent);
  color: var(--cp-accent);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-format-btn.is-active {
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: inset 0 calc(var(--space-1) * -0.5) 0 var(--cp-accent);
}

#compupod-chat-page .my-work-chat-picker,
.my-work-chat-reaction-popover {
  width: min(calc(var(--space-10) * 12), calc(100vw - var(--space-8)));
  max-height: min(calc(var(--space-10) * 15), calc(100dvh - var(--space-10)));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-picker-tabs,
.my-work-chat-reaction-popover .my-work-chat-picker-tabs {
  min-height: calc(var(--space-10) + var(--space-4));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
}

#compupod-chat-page .my-work-chat-picker-tabs button,
.my-work-chat-reaction-popover .my-work-chat-picker-tabs button {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  min-height: calc(var(--space-10) + var(--space-4));
  border: 0;
  border-bottom: calc(var(--space-1) / 2) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-picker-tabs button.is-active,
#compupod-chat-page .my-work-chat-picker-tabs button:hover,
.my-work-chat-reaction-popover .my-work-chat-picker-tabs button.is-active,
.my-work-chat-reaction-popover .my-work-chat-picker-tabs button:hover {
  border-bottom-color: var(--cp-accent);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-picker input,
.my-work-chat-reaction-popover input {
  min-height: calc(var(--space-10) + var(--space-2));
  margin: var(--space-4) var(--space-4) var(--space-3);
  padding: 0 var(--space-4);
  border: calc(var(--space-1) / 2) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-lg);
  outline: 0;
  box-shadow: var(--focus-ring);
}

#compupod-chat-page .my-work-chat-emoji-results,
.my-work-chat-reaction-popover .my-work-chat-emoji-results {
  min-height: 0;
  overflow: auto;
  padding: 0 var(--space-4) var(--space-4);
  background: var(--surface-2);
}

#compupod-chat-page .my-work-chat-emoji-category,
.my-work-chat-reaction-popover .my-work-chat-emoji-category {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) 0 var(--space-4);
}

#compupod-chat-page .my-work-chat-emoji-category strong,
.my-work-chat-reaction-popover .my-work-chat-emoji-category strong {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-emoji-grid,
.my-work-chat-reaction-popover .my-work-chat-emoji-grid {
  grid-template-columns: repeat(8, minmax(var(--space-8), 1fr));
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-emoji-grid button,
.my-work-chat-reaction-popover .my-work-chat-emoji-grid button {
  width: 100%;
  min-width: var(--space-8);
  height: calc(var(--space-8) + var(--space-2));
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--text-2xl);
  line-height: 1;
}

#compupod-chat-page .my-work-chat-emoji-grid button:hover,
#compupod-chat-page .my-work-chat-emoji-grid button:focus-visible,
.my-work-chat-reaction-popover .my-work-chat-emoji-grid button:hover,
.my-work-chat-reaction-popover .my-work-chat-emoji-grid button:focus-visible {
  background: var(--surface-3);
  outline: 0;
}

#compupod-chat-page .my-work-chat-mention-picker {
  width: min(calc(var(--space-10) * 17), calc(100vw - var(--space-8)));
  max-height: min(calc(var(--space-10) * 11), calc(100dvh - var(--space-10)));
  grid-template-rows: minmax(0, 1fr) auto;
}

#compupod-chat-page .my-work-chat-mention-list {
  min-height: 0;
  overflow: auto;
  padding: var(--space-2) 0;
  background: var(--surface-2);
}

#compupod-chat-page .my-work-chat-mention-list button {
  min-height: calc(var(--space-10) + var(--space-4));
  grid-template-columns: var(--chat-avatar) minmax(calc(var(--space-10) * 3), auto) minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-mention-list button:hover,
#compupod-chat-page .my-work-chat-mention-list button.is-active {
  background: var(--surface-3);
}

#compupod-chat-page .my-work-chat-mention-list button strong {
  overflow: hidden;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-mention-list button span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-mention-list button span i {
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 auto;
  border: 1px solid var(--content-3);
  border-radius: var(--radius-circle);
}

#compupod-chat-page .my-work-chat-mention-list button span i.is-online {
  border-color: var(--cp-success);
  background: var(--cp-success);
}

#compupod-chat-page .my-work-chat-avatar.is-mention-special {
  background: var(--surface-3);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-mention-picker footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

#compupod-chat-page .my-work-chat-thread-reply-summary {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

#compupod-chat-page .my-work-chat-thread-reply-summary:hover,
#compupod-chat-page .my-work-chat-thread-reply-summary:focus-visible {
  background: var(--surface-hover);
  color: var(--content-1);
  outline: 0;
}

#compupod-chat-page .my-work-chat-thread-reply-summary:focus-visible {
  box-shadow: var(--focus-ring);
}

#compupod-chat-page .my-work-chat-thread-reply-avatars {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: var(--space-1);
}

#compupod-chat-page .my-work-chat-thread-reply-avatar + .my-work-chat-thread-reply-avatar {
  margin-left: calc(var(--space-1) * -1);
}

#compupod-chat-page .my-work-chat-thread-reply-copy {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-thread-reply-copy strong {
  color: var(--cp-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

#compupod-chat-page .my-work-chat-thread-reply-copy em {
  overflow: hidden;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Phase 3 — Tickets domain
   ========================================================================== */
.cp :where(
  #tickets-page,
  #quick-sale-page,
  #repair-ticket-create-page,
  #repair-ticket-page,
  #sale-ticket-page,
  #trade-ticket-page,
  #refurbish-ticket-page
) {
  color: var(--content-1);
}

.cp :where(
  #tickets-page .panel,
  #tickets-page .tickets-table-wrap,
  #tickets-page .gallery-item,
  #tickets-page .empty-rich,
  #quick-sale-page .sale-ticket-panel,
  #quick-sale-page .quick-sale-card,
  #repair-ticket-create-page .ticket-create-nav-box,
  #repair-ticket-create-page .ticket-create-financial-box,
  #repair-ticket-page .repair-ticket-card,
  #sale-ticket-page .sale-ticket-card,
  #trade-ticket-page .trade-ticket-card,
  #refurbish-ticket-page .refurb-ticket-card
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(
  #tickets-page .panel-head,
  #tickets-page .detail-head-row,
  #tickets-page .results-head,
  #quick-sale-page .sale-ticket-section-head,
  #repair-ticket-page .repair-ticket-section-head,
  #sale-ticket-page .sale-ticket-section-head,
  #trade-ticket-page .trade-ticket-section-head,
  #refurbish-ticket-page .refurb-ticket-section-head
) {
  border-color: var(--border-1);
  color: var(--content-1);
}

.cp :where(
  #tickets-page .panel-head,
  #tickets-page .panel-body,
  #tickets-page .detail-controls,
  #quick-sale-page .sale-ticket-section,
  #repair-ticket-page .repair-ticket-section,
  #sale-ticket-page .sale-ticket-section,
  #trade-ticket-page .trade-ticket-section,
  #refurbish-ticket-page .refurb-ticket-section
) {
  padding: var(--space-4);
}

.cp :where(
  #tickets-page .eyebrow,
  #tickets-page .ticket-created,
  #tickets-page .result-count,
  #tickets-page .empty-body,
  #quick-sale-page .sale-ticket-muted,
  #repair-ticket-page .repair-ticket-muted,
  #sale-ticket-page .sale-ticket-muted,
  #trade-ticket-page .trade-ticket-muted,
  #refurbish-ticket-page .refurb-ticket-muted
) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp :where(
  #tickets-page h2,
  #tickets-page h3,
  #quick-sale-page h2,
  #quick-sale-page h3,
  #repair-ticket-create-page h2,
  #repair-ticket-create-page h3,
  #repair-ticket-page h2,
  #repair-ticket-page h3,
  #sale-ticket-page h2,
  #sale-ticket-page h3,
  #trade-ticket-page h2,
  #trade-ticket-page h3,
  #refurbish-ticket-page h2,
  #refurbish-ticket-page h3
) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #tickets-page .devices-toolbar,
.cp #tickets-page .tickets-filter-row,
.cp #tickets-page .selection-toolbar,
.cp :where(
  #quick-sale-page .sale-ticket-toolbar,
  #repair-ticket-page .repair-ticket-toolbar,
  #sale-ticket-page .sale-ticket-toolbar,
  #trade-ticket-page .trade-ticket-toolbar,
  #refurbish-ticket-page .refurb-ticket-toolbar
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #tickets-page .devices-toolbar {
  padding: var(--space-3);
  gap: var(--space-3);
}

.cp #tickets-page .devices-toolbar-row {
  gap: var(--space-3);
}

.cp #tickets-page .devices-pagination-summary,
.cp #tickets-page .devices-actions-group,
.cp #tickets-page .devices-right-controls,
.cp #tickets-page .devices-pagination-nav {
  gap: var(--space-2);
}

.cp #tickets-page :where(.devices-date-chip, .inventory-filter-pill, .devices-extra-chip) {
  min-height: var(--space-9);
  border-color: var(--border-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #tickets-page :where(.devices-date-chip, .devices-extra-chip):hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp #tickets-page :where(.segmented, .tickets-filter, .kind-filter) {
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #tickets-page :where(.segmented button, .tickets-filter button, .kind-filter button) {
  min-height: var(--space-9);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #tickets-page :where(.segmented button:hover, .tickets-filter button:hover, .kind-filter button:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #tickets-page :where(.segmented button.active, .tickets-filter button.active, .kind-filter button.active) {
  background: var(--surface);
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp #tickets-page :where(.customers-table, .tickets-queue-table) {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cp #tickets-page :where(.customers-table th, .tickets-queue-table th) {
  height: var(--space-10);
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-transform: none;
}

.cp #tickets-page :where(.customers-table td, .tickets-queue-table td) {
  height: var(--space-11);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
  vertical-align: middle;
}

.cp #tickets-page :where(.customers-table tbody tr, .tickets-queue-table tbody tr) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #tickets-page :where(.customers-table tbody tr:hover, .tickets-queue-table tbody tr:hover) {
  background: var(--surface-hover);
}

.cp #tickets-page :where(.ticket-menu, .devices-date-popover, .devices-add-filter-popover, .devices-multiselect-popover):not(.hidden) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.cp #tickets-page :where(.ticket-menu-item, .devices-add-filter-list li, .devices-date-radio) {
  min-height: var(--space-10);
  border-radius: var(--radius-sm);
  color: var(--content-1);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp #tickets-page :where(.ticket-menu-item:hover, .devices-add-filter-list li:hover, .devices-date-radio:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #tickets-page :where(.search-bar, .input-wrap, .download-row, .detail-download-menu-wrap) {
  gap: var(--space-2);
}

.cp #tickets-page :where(.gallery, .results-grid) {
  gap: var(--space-3);
}

.cp #tickets-page :where(.gallery-item, .ticket-file-card) {
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.cp #tickets-page :where(.gallery-item:hover, .ticket-file-card:hover) {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-px) * -1));
}

.cp #tickets-page :where(#tickets-empty, #empty-state, .empty-rich) {
  padding: var(--space-8);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp #tickets-page :where(#tickets-list-body:empty, #gallery:empty) {
  min-height: calc(var(--space-10) * 3);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 3 — Inventory domain
   ========================================================================== */
.cp :where(
  #inventory-page,
  #receive-page,
  #inventory-orders-page,
  #inventory-item-detail-page,
  #inventory-item-manage-page,
  #catalog-item-view-page,
  #catalog-item-edit-page,
  #inventory-count-sheet-page
) {
  color: var(--content-1);
}

.cp :where(
  #inventory-page .inventory-shell,
  #receive-page .inventory-shell,
  #inventory-orders-page .inventory-shell,
  #inventory-item-detail-page .inventory-shell,
  #inventory-item-manage-page .iim-shell,
  #catalog-item-view-page .civ-shell,
  #catalog-item-edit-page .cie-shell,
  #inventory-count-sheet-page .iim-shell
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(
  #inventory-page .inventory-title-bar,
  #receive-page .inventory-title-bar,
  #inventory-item-detail-page .inventory-title-bar,
  #inventory-item-manage-page .iim-titlebar,
  #catalog-item-view-page .civ-titlebar,
  #catalog-item-edit-page .cie-titlebar,
  #inventory-count-sheet-page .iim-pagebar,
  #inventory-orders-page .invord-main
) {
  color: var(--content-1);
}

.cp :where(
  #inventory-page h2,
  #inventory-page h3,
  #receive-page h2,
  #receive-page h3,
  #inventory-orders-page h2,
  #inventory-orders-page h3,
  #inventory-item-detail-page h2,
  #inventory-item-detail-page h3,
  #inventory-item-manage-page h2,
  #inventory-item-manage-page h3,
  #catalog-item-view-page h2,
  #catalog-item-view-page h3,
  #catalog-item-edit-page h2,
  #catalog-item-edit-page h3,
  #inventory-count-sheet-page h2,
  #inventory-count-sheet-page h3
) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp :where(
  #inventory-page .inventory-page-subtitle,
  #inventory-page .inventory-title-bar p,
  #inventory-orders-page .invord-desc,
  #inventory-item-detail-page .inventory-page-subtitle,
  #inventory-item-manage-page .iim-back-link,
  #inventory-item-manage-page .iim-log-head,
  #catalog-item-view-page .civ-muted,
  #catalog-item-edit-page .cie-muted,
  #inventory-count-sheet-page .iim-pagebar-title
) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp :where(
  #inventory-page .devices-toolbar,
  #inventory-item-detail-page .devices-toolbar,
  #inventory-orders-page .invord-sidebar,
  #inventory-page .inventory-config-panel,
  #inventory-page .inventory-defaults-grid,
  #inventory-item-detail-page .iid-facet-strip,
  #inventory-item-detail-page .iid-attachments,
  #inventory-item-manage-page .iim-update-form,
  #inventory-item-manage-page .iim-sidebar,
  #inventory-item-manage-page .iim-log,
  #catalog-item-view-page .civ-card,
  #catalog-item-edit-page .cie-section,
  #inventory-count-sheet-page .iim-update-form
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(#inventory-page .devices-toolbar, #inventory-item-detail-page .devices-toolbar) {
  padding: var(--space-3);
  gap: var(--space-3);
}

.cp :where(
  #inventory-page .devices-toolbar-row,
  #inventory-item-detail-page .devices-toolbar-row,
  #inventory-orders-page .invord-sidebar-actions,
  #catalog-item-edit-page .cie-lookup-row,
  #catalog-item-edit-page .cie-grid
) {
  gap: var(--space-3);
}

.cp :where(
  #inventory-page .inventory-section-tabs,
  #customers-page .inventory-section-tabs,
  #inventory-item-detail-page .iid-facet-strip
) {
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp :where(
  #inventory-page .inventory-section-tabs button,
  #inventory-item-detail-page .iid-facet
) {
  min-height: var(--space-9);
  border-radius: var(--radius-sm);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #inventory-page .inventory-section-tabs button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #inventory-page .inventory-section-tabs button.active {
  background: var(--surface);
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp :where(
  #inventory-page .devices-date-chip,
  #inventory-page .inventory-filter-pill,
  #inventory-page .devices-extra-chip,
  #inventory-item-detail-page .devices-date-chip,
  #inventory-item-detail-page .iid-facet
) {
  border-color: var(--border-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp :where(
  #inventory-page .devices-date-chip,
  #inventory-page .devices-extra-chip,
  #inventory-item-detail-page .devices-date-chip
):hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp :where(
  #inventory-page .customers-table-wrap,
  #inventory-item-detail-page .customers-table-wrap,
  #inventory-orders-page .invord-table-wrap,
  #catalog-item-edit-page .cie-compat-wrap
) {
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Counts can expose many optional columns. Keep the grid scrollable and the
   action menu reachable instead of clipping the right side of the table. */
.cp #inventory-counts-section .customers-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.cp #inventory-counts-section .inventory-counts-table :is(.device-actions-th, .device-actions-cell) {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: none;
}

.cp #inventory-counts-section .inventory-counts-table .device-actions-th {
  z-index: 3;
  background: var(--surface-2);
}

.cp :where(
  #inventory-page .customers-table th,
  #inventory-page .inventory-counts-table th,
  #inventory-item-detail-page .customers-table th,
  #inventory-orders-page .invord-table th,
  #catalog-item-edit-page .cie-compat-table th
) {
  height: var(--space-10);
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp :where(
  #inventory-page .customers-table td,
  #inventory-page .inventory-counts-table td,
  #inventory-item-detail-page .customers-table td,
  #inventory-orders-page .invord-table td,
  #catalog-item-edit-page .cie-compat-table td
) {
  height: var(--space-11);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp :where(
  #inventory-page .customers-table tbody tr,
  #inventory-page .inventory-counts-row,
  #inventory-item-detail-page .customers-table tbody tr,
  #inventory-orders-page .invord-table tbody tr,
  #catalog-item-edit-page .cie-compat-table tbody tr
) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp :where(
  #inventory-page .customers-table tbody tr:hover,
  #inventory-page .inventory-counts-row:hover,
  #inventory-item-detail-page .customers-table tbody tr:hover,
  #inventory-orders-page .invord-table tbody tr:hover,
  #catalog-item-edit-page .cie-compat-table tbody tr:hover
) {
  background: var(--surface-hover);
}

.cp :where(
  #inventory-page .inv-row-menu,
  #inventory-page .devices-date-popover,
  #inventory-page .devices-add-filter-popover,
  #inventory-page .devices-multiselect-popover,
  #inventory-item-detail-page .inv-row-menu,
  #inventory-item-detail-page .devices-date-popover,
  #inventory-orders-page .invord-itype-popover,
  #catalog-item-edit-page .cie-lock-popover,
  #inventory-item-manage-page .iim-catalog-options,
  #inventory-item-manage-page .iim-ref-popover
):not(.hidden) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.cp :where(
  #inventory-page .inv-row-menu-item,
  #inventory-page .devices-add-filter-list li,
  #inventory-page .devices-date-radio,
  #inventory-item-detail-page .inv-row-menu-item,
  #inventory-item-detail-page .devices-date-radio,
  #inventory-orders-page .invord-itype-option,
  #inventory-item-manage-page .iim-catalog-option
) {
  border-radius: var(--radius-sm);
  color: var(--content-1);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp :where(
  #inventory-page .inv-row-menu-item:hover,
  #inventory-page .devices-add-filter-list li:hover,
  #inventory-page .devices-date-radio:hover,
  #inventory-item-detail-page .inv-row-menu-item:hover,
  #inventory-item-detail-page .devices-date-radio:hover,
  #inventory-orders-page .invord-itype-option:hover,
  #inventory-item-manage-page .iim-catalog-option:hover
) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp :where(
  #inventory-page .inventory-empty,
  #inventory-orders-page .inventory-empty,
  #inventory-item-detail-page .inventory-empty,
  #catalog-item-view-page .inventory-empty,
  #catalog-item-edit-page .inventory-empty,
  #inventory-count-sheet-page .inventory-empty
) {
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp :where(
  #inventory-list:empty,
  #inventory-detail-list:empty,
  #inventory-counts-list:empty,
  #iid-units-list:empty,
  #invord-list:empty
) {
  min-height: calc(var(--space-10) * 3);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 3 — Cash register domain
   ========================================================================== */
.cp #cash-register-page {
  color: var(--content-1);
}

.cp #cash-register-page .cash-register-shell {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #cash-register-page :where(
  .cash-register-head,
  .cash-detail-head,
  .cash-petty-head
) {
  gap: var(--space-3);
  border-color: var(--border-1);
  color: var(--content-1);
}

.cp #cash-register-page :where(h2, h3) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #cash-register-page :where(
  .cash-register-sub,
  .cash-register-location,
  .cash-detail-meta,
  .cash-petty-head p,
  .cash-detail-empty,
  .cash-no-slot-text span
) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp #cash-register-page :where(
  .cash-register-no-slot,
  .cash-card,
  .cash-detail,
  .cash-petty-section,
  .cash-petty-card-wrap,
  .cash-detail-summary-tile,
  .cash-detail-table-wrap
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #cash-register-page .cash-register-no-slot {
  padding: var(--space-4);
  gap: var(--space-3);
}

.cp #cash-register-page .cash-register-grid {
  gap: var(--space-3);
}

.cp #cash-register-page .cash-card {
  padding: var(--space-4);
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.cp #cash-register-page .cash-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-px) * -1));
}

.cp #cash-register-page .cash-card-name {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
}

.cp #cash-register-page :where(.cash-card-row, .cash-card-meta) {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #cash-register-page .cash-card-row dd,
.cp #cash-register-page .cash-detail-summary-tile .tile-value {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
}

.cp #cash-register-page .cash-card-actions {
  gap: var(--space-2);
}

.cp #cash-register-page .cash-detail {
  padding: var(--space-4);
}

.cp #cash-register-page .cash-detail-summary {
  gap: var(--space-3);
}

.cp #cash-register-page .cash-detail-summary-tile {
  padding: var(--space-3);
}

.cp #cash-register-page .cash-detail-summary-tile .tile-label {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp #cash-register-page .cash-detail-summary-tile.tile-positive .tile-value,
.cp #cash-register-page .cash-detail-td-amount.is-credit {
  color: var(--cp-success);
}

.cp #cash-register-page .cash-detail-summary-tile.tile-negative .tile-value,
.cp #cash-register-page .cash-detail-td-amount.is-debit {
  color: var(--cp-danger);
}

.cp #cash-register-page .cash-detail-table-wrap {
  overflow: hidden;
}

.cp #cash-register-page .cash-detail-table th {
  height: var(--space-10);
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp #cash-register-page .cash-detail-table td {
  height: var(--space-11);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #cash-register-page .cash-detail-table tbody tr {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #cash-register-page .cash-detail-table tbody tr:hover {
  background: var(--surface-hover);
}

.cp #cash-register-page :where(
  .cash-register-loading,
  .cash-detail-empty,
  #cash-detail-no-tx,
  #petty-cash-no-tx
) {
  padding: var(--space-5);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp #cash-register-page .cash-register-loading:not(.hidden) {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 3 — Customers domain
   ========================================================================== */
.cp :where(#customers-page, #customer-profile-page) {
  color: var(--content-1);
}

.cp :where(
  #customers-page .customers-shell,
  #customer-profile-page .cprofile-header,
  #customer-profile-page .cprofile-sidebar,
  #customer-profile-page .cprofile-content,
  #customer-profile-page .cprofile-stats
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(#customers-page h2, #customers-page h3, #customer-profile-page h2, #customer-profile-page h3) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp :where(
  #customers-page #customers-page-subtitle,
  #customers-page .devices-pagination-summary,
  #customers-page .customers-summary-strip span,
  #customers-page .inventory-empty,
  #customer-profile-page .cprofile-sub,
  #customer-profile-page .cprofile-phone
) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp #customers-page :where(.inventory-toolbar, .inventory-filters, .devices-toolbar) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #customers-page :where(.inventory-toolbar, .inventory-filters, .devices-toolbar) {
  padding: var(--space-3);
  gap: var(--space-3);
}

.cp #customers-page :where(
  .inventory-view-controls,
  .inventory-page-controls,
  .inventory-actions,
  .devices-actions-group,
  .devices-pagination-summary,
  .devices-right-controls,
  .devices-pagination-nav
) {
  gap: var(--space-2);
}

.cp #customers-page .inventory-section-tabs {
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #customers-page .inventory-section-tabs :where(button, a) {
  min-height: var(--space-9);
  border-radius: var(--radius-sm);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #customers-page .inventory-section-tabs :where(button, a):hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #customers-page .inventory-section-tabs :where(button, a).active {
  background: var(--surface);
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp #customers-page :where(
  .inventory-filter-pill,
  .devices-date-chip,
  .devices-extra-chip
) {
  min-height: var(--space-9);
  border-color: var(--border-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp #customers-page :where(.devices-date-chip, .devices-extra-chip):hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp #customers-page .customers-summary-strip {
  gap: var(--space-3);
}

.cp #customers-page .customers-summary-strip > div {
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #customers-page .customers-summary-strip strong {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
}

.cp #customers-page :where(#customers-list-section, #customer-devices-section .customers-table-wrap) {
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #customers-page #customers-list-section {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.cp #customers-page #customers-list-section .customers-table :is(th:last-child, td:last-child) {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: none;
}

.cp #customers-page #customers-list-section .customers-table th:last-child {
  z-index: 3;
  background: var(--surface-2);
}

.cp #customers-page :where(.customers-table th, .customer-devices-table th) {
  height: var(--space-10);
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp #customers-page :where(.customers-table td, .customer-devices-table td) {
  height: var(--space-11);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #customers-page :where(.customers-table tbody tr, .customer-devices-table tbody tr) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #customers-page :where(.customers-table tbody tr:hover, .customer-devices-table tbody tr:hover) {
  background: var(--surface-hover);
}

.cp #customers-page :where(
  .devices-add-filter-popover,
  .devices-date-popover,
  .inv-row-menu,
  .customer-menu
):not(.hidden) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.cp #customers-page :where(.devices-add-filter-list li, .devices-date-radio, .inv-row-menu-item) {
  border-radius: var(--radius-sm);
  color: var(--content-1);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp #customers-page :where(.devices-add-filter-list li:hover, .devices-date-radio:hover, .inv-row-menu-item:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp :where(#customers-page .inventory-empty, #customer-profile-page .cprofile-empty) {
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp #customer-profile-page .cprofile-layout {
  gap: var(--space-4);
}

.cp #customer-profile-page .cprofile-sidebar {
  padding: var(--space-2);
}

.cp #customer-profile-page .cprofile-tab {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  color: var(--content-2);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #customer-profile-page .cprofile-tab:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #customer-profile-page .cprofile-tab-active {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

@media (max-width: 640px) {
  .cp #customer-profile-page {
    padding-inline: var(--space-3);
  }

  .cp #customer-profile-page .cprofile-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cp #customer-profile-page .cprofile-heading {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cp #customer-profile-page .cprofile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #customer-profile-page .cp-stat {
    min-width: 0;
  }

  .cp #customer-profile-page .cprofile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .cp #customer-profile-page .cprofile-sidebar {
    display: grid;
    overflow: visible;
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    padding: var(--space-1);
  }

  .cp #customer-profile-page .cprofile-tab {
    min-width: 0;
    border-bottom: 3px solid transparent;
    border-left: 0;
  }

  .cp #customer-profile-page .cprofile-tab-active {
    border-bottom-color: var(--cp-accent);
  }

  .cp #customer-profile-page .cprofile-content {
    width: 100%;
    padding: var(--space-3);
  }
}

.cp :where(#customers-list:empty, #customer-devices-list:empty) {
  min-height: calc(var(--space-10) * 3);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 3 — Purchase orders domain
   ========================================================================== */
.cp :where(#purchase-orders-page, #new-purchase-order-page) {
  color: var(--content-1);
}

.cp :where(
  #purchase-orders-page .inventory-shell,
  #new-purchase-order-page .newpo-header,
  #new-purchase-order-page .newpo-summary,
  #new-purchase-order-page .newpo-supplier,
  #new-purchase-order-page .newpo-tracking,
  #new-purchase-order-page .newpo-main,
  #new-purchase-order-page .newpo-panel,
  #new-purchase-order-page .newpo-change-log,
  #new-purchase-order-page .newpo-recon-card,
  #new-purchase-order-page .newpo-recon-totals-card,
  #new-purchase-order-page .newpo-recon-reconciliation-card,
  #new-purchase-order-page .newpo-recon-remarks
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(
  #purchase-orders-page h2,
  #purchase-orders-page h3,
  #new-purchase-order-page h1,
  #new-purchase-order-page h2,
  #new-purchase-order-page h3,
  #new-purchase-order-page h4
) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp :where(
  #new-purchase-order-page .newpo-kicker,
  #new-purchase-order-page .newpo-header-meta,
  #new-purchase-order-page .newpo-metric span,
  #new-purchase-order-page .newpo-subpanel-note,
  #new-purchase-order-page .newpo-modal-hint,
  #new-purchase-order-page .newpo-log-summary,
  #new-purchase-order-page .newpo-log-time,
  #new-purchase-order-page .newpo-recon-addr,
  #purchase-orders-page .po-import-label
) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp #purchase-orders-page .devices-toolbar,
.cp #new-purchase-order-page .newpo-tabs-row,
.cp #new-purchase-order-page .newpo-il-actions,
.cp #new-purchase-order-page .newpo-recon-toolbar {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #purchase-orders-page .devices-toolbar,
.cp #new-purchase-order-page .newpo-tabs-row,
.cp #new-purchase-order-page .newpo-il-actions,
.cp #new-purchase-order-page .newpo-recon-toolbar {
  padding: var(--space-3);
  gap: var(--space-3);
}

.cp :where(
  #purchase-orders-page .devices-toolbar-row,
  #purchase-orders-page .devices-pagination-summary,
  #purchase-orders-page .devices-actions-group,
  #purchase-orders-page .devices-right-controls,
  #purchase-orders-page .devices-pagination-nav,
  #new-purchase-order-page .newpo-top-actions,
  #new-purchase-order-page .newpo-metrics,
  #new-purchase-order-page .newpo-fields,
  #new-purchase-order-page .newpo-tabs,
  #new-purchase-order-page .newpo-table-actions,
  #new-purchase-order-page .newpo-receive-controls
) {
  gap: var(--space-2);
}

.cp #purchase-orders-page :where(.devices-date-chip, .devices-extra-chip) {
  min-height: var(--space-9);
  border-color: var(--border-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp #purchase-orders-page :where(.devices-date-chip, .devices-extra-chip):hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp #new-purchase-order-page .newpo-metric {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: none;
}

.cp #new-purchase-order-page .newpo-metric strong {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
}

.cp #new-purchase-order-page :where(.newpo-tab, .newpo-subtab) {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  color: var(--content-2);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #new-purchase-order-page :where(.newpo-tab:hover, .newpo-subtab:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #new-purchase-order-page :where(.newpo-tab.active, .newpo-subtab.active) {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp #new-purchase-order-page .newpo-tab.active .newpo-tab-badge {
  background: var(--surface);
  color: var(--cp-accent);
}

.cp :where(
  #purchase-orders-page .customers-table-wrap,
  #new-purchase-order-page .newpo-table-wrap,
  #new-purchase-order-page .newpo-ms-lines-wrap,
  #new-purchase-order-page .newpo-recon-table-wrap
) {
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(
  #purchase-orders-page .customers-table th,
  #new-purchase-order-page .newpo-table th,
  #new-purchase-order-page .newpo-ms-lines-table th,
  #new-purchase-order-page .newpo-recon-table th
) {
  height: var(--space-10);
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp :where(
  #purchase-orders-page .customers-table td,
  #new-purchase-order-page .newpo-table td,
  #new-purchase-order-page .newpo-ms-lines-table td,
  #new-purchase-order-page .newpo-recon-table td
) {
  height: var(--space-11);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp :where(
  #purchase-orders-page .customers-table tbody tr,
  #new-purchase-order-page .newpo-table tbody tr,
  #new-purchase-order-page .newpo-ms-lines-table tbody tr,
  #new-purchase-order-page .newpo-recon-table tbody tr
) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp :where(
  #purchase-orders-page .customers-table tbody tr:hover,
  #new-purchase-order-page .newpo-table tbody tr:hover,
  #new-purchase-order-page .newpo-ms-lines-table tbody tr:hover,
  #new-purchase-order-page .newpo-recon-table tbody tr:hover
) {
  background: var(--surface-hover);
}

.cp #new-purchase-order-page .newpo-rte {
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cp #new-purchase-order-page .newpo-rte-toolbar {
  gap: var(--space-1);
  border-color: var(--border-1);
  background: var(--surface-2);
}

.cp #new-purchase-order-page .newpo-rte-toolbar :where(button, select) {
  min-height: var(--space-9);
  border-radius: var(--radius-sm);
  color: var(--content-2);
}

.cp #new-purchase-order-page .newpo-rte-toolbar :where(button:hover, select:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #new-purchase-order-page .newpo-rte-editor {
  min-height: calc(var(--space-10) * 4);
  color: var(--content-1);
  font-size: var(--text-base);
}

.cp :where(
  #purchase-orders-page .inv-row-menu,
  #purchase-orders-page .devices-date-popover,
  #purchase-orders-page .devices-add-filter-popover,
  #new-purchase-order-page .newpo-type-filter-menu,
  #new-purchase-order-page .newpo-catalog-results
):not(.hidden) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.cp :where(
  #purchase-orders-page .inv-row-menu-item,
  #purchase-orders-page .devices-date-radio,
  #purchase-orders-page .devices-add-filter-list li,
  #new-purchase-order-page .newpo-catalog-results-item,
  #new-purchase-order-page .newpo-type-filter-options label
) {
  border-radius: var(--radius-sm);
  color: var(--content-1);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp :where(
  #purchase-orders-page .inv-row-menu-item:hover,
  #purchase-orders-page .devices-date-radio:hover,
  #purchase-orders-page .devices-add-filter-list li:hover,
  #new-purchase-order-page .newpo-catalog-results-item:hover,
  #new-purchase-order-page .newpo-type-filter-options label:hover
) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp :where(#po-empty, #newpo-reorder-empty, #newpo-itemlist-empty, #new-purchase-order-page .newpo-empty) {
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp :where(#po-list:empty, #newpo-itemlist-body:empty, #newpo-reorder-body:empty) {
  min-height: calc(var(--space-10) * 3);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 3 — Dashboard domain
   ========================================================================== */
.cp #home-page {
  color: var(--content-1);
}

.cp #home-page .repair-dashboard {
  gap: var(--space-4);
}

.cp #home-page :where(.repair-panel, .daily-strip > div, .dashboard-op-card, .progress-card, .dashboard-alert, .dashboard-ops-alert) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #home-page :where(.repair-panel-title, .dashboard-title-bar h2, .ticket-progress h2) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #home-page .repair-panel-title {
  gap: var(--space-2);
  border-color: var(--border-1);
  font-size: var(--text-base);
}

.cp #home-page .repair-panel-body {
  padding: var(--space-4);
}

.cp #home-page :where(.daily-strip, .dashboard-ops-grid, .progress-card, .quick-actions) {
  gap: var(--space-3);
}

.cp #home-page .daily-strip > div {
  padding: var(--space-3);
}

.cp #home-page :where(.daily-label, .dashboard-op-card span, .dashboard-op-card small, .progress-metric span, .dashboard-activity-row span) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp #home-page :where(.daily-strip strong, .dashboard-op-card strong, .progress-metric strong) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
}

.cp #home-page :where(.dashboard-op-card, .progress-metric, .dashboard-activity-row) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.cp #home-page :where(.dashboard-op-card:hover, .progress-metric:hover, .dashboard-activity-row:hover) {
  background: var(--surface-hover);
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-px) * -1));
}

.cp #home-page :where(.dashboard-op-card:focus-visible, .progress-metric:focus-visible) {
  box-shadow: var(--focus-ring);
}

.cp #home-page .progress-card {
  overflow: hidden;
}

.cp #home-page .progress-metric {
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
}

.cp #home-page .quick-actions .btn {
  min-height: var(--space-10);
}

.cp #home-page .dashboard-activity-list {
  gap: var(--space-1);
}

.cp #home-page .dashboard-activity-row {
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.cp #home-page :where(.dashboard-empty, #dashboard-alerts-empty, #dashboard-activity-empty) {
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #home-page :where(#dashboard-recent-activity:empty, #dashboard-alerts-list:empty) {
  min-height: calc(var(--space-10) * 3);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 3 — Reports and metrics domains
   ========================================================================== */
.cp :where(#reports-page, #metrics-page) {
  color: var(--content-1);
}

.cp :where(
  #reports-page .reports-shell,
  #reports-page .reports-menu,
  #reports-page .reports-content,
  #reports-page .report-detail-section,
  #reports-page .report-live-section,
  #reports-page .report-group,
  #reports-page .report-card,
  #reports-page .report-table-grid > section,
  #reports-page .report-closed-registers,
  #reports-page .report-usage-detail,
  #reports-page .report-profitability,
  #reports-page .report-inventory-orders,
  #reports-page .report-queues,
  #metrics-page .metrics-shell,
  #metrics-page .metric-card,
  #metrics-page .metric-op-tile,
  #metrics-page .metric-panel,
  #metrics-page .metric-time-card,
  #metrics-page .metric-time-table-wrap,
  #metrics-page .metric-cash-tile
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :where(
  #reports-page h2,
  #reports-page h3,
  #metrics-page h2,
  #metrics-page h3
) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp :where(
  #reports-page .report-eyebrow,
  #reports-page .report-detail-titlebar p,
  #reports-page .report-card span,
  #reports-page .report-subheader span,
  #metrics-page #metrics-range-label,
  #metrics-page .metric-card span,
  #metrics-page .metric-card small,
  #metrics-page .metric-op-tile span,
  #metrics-page .metric-panel-head span,
  #metrics-page .metric-time-card span,
  #metrics-page .metric-time-table-title,
  #metrics-page .metric-list-row span
) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp #reports-page .reports-shell {
  gap: var(--space-4);
}

.cp #reports-page .reports-menu {
  padding: var(--space-3);
}

.cp #reports-page :where(.reports-menu button, .reports-menu-trigger, .reports-menu-option, .report-group button) {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  color: var(--content-2);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #reports-page :where(.reports-menu button:hover, .reports-menu-trigger:hover, .reports-menu-option:hover, .report-group button:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #reports-page :where(.reports-menu button.active, .reports-menu-trigger.active) {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp #reports-page .reports-menu-dropdown:not(.hidden) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.cp :where(
  #reports-page .report-detail-titlebar,
  #reports-page .report-live-header,
  #reports-page .report-subheader,
  #metrics-page .metrics-title-bar,
  #metrics-page .metric-panel-head
) {
  gap: var(--space-3);
  border-color: var(--border-1);
}

.cp :where(#reports-page .report-detail-filters, #reports-page .report-controls, #metrics-page .metrics-filter-row) {
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cp :where(#reports-page .report-card-grid, #metrics-page .metrics-card-grid, #metrics-page .metrics-ops-grid, #metrics-page .metric-time-card-grid) {
  gap: var(--space-3);
}

.cp :where(#reports-page .report-card, #metrics-page .metric-card, #metrics-page .metric-op-tile, #metrics-page .metric-time-card, #metrics-page .metric-cash-tile) {
  padding: var(--space-4);
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

.cp :where(#reports-page .report-card:hover, #metrics-page .metric-card:hover, #metrics-page .metric-op-tile:hover, #metrics-page .metric-time-card:hover, #metrics-page .metric-cash-tile:hover) {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-px) * -1));
}

.cp :where(#reports-page .report-card strong, #metrics-page .metric-card strong, #metrics-page .metric-op-tile strong, #metrics-page .metric-time-card strong, #metrics-page .metric-cash-tile strong) {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
}

.cp :where(
  #reports-page .report-detail-table-wrap,
  #reports-page .report-table-grid > section,
  #reports-page .report-closed-registers,
  #reports-page .report-usage-detail,
  #reports-page .report-profitability,
  #reports-page .report-inventory-orders,
  #reports-page .report-queues,
  #metrics-page .metric-time-table-wrap
) {
  overflow: hidden;
}

.cp #reports-page .report-detail-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
}

#reports-page #report-detail-table.report-wide-detail-table {
  min-width: 1780px;
  table-layout: auto;
}

#reports-page #report-detail-table.report-wide-detail-table :is(th, td) {
  min-width: 112px;
  white-space: nowrap;
}

#reports-page #report-detail-table.report-wide-detail-table :is(th, td).report-cell-description {
  min-width: 240px;
  white-space: normal;
}

#reports-page #report-detail-table.report-reorder-point-table {
  min-width: 1180px;
  table-layout: fixed;
}

#reports-page #report-detail-table.report-reorder-point-table :is(th, td) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

#reports-page #report-detail-table.report-reorder-point-table :is(th, td):nth-child(2) {
  width: 19%;
}

#reports-page #report-detail-table.report-reorder-point-table :is(th, td):nth-child(4) {
  width: 14%;
}

.cp :where(#reports-page .report-table th, #reports-page #report-detail-table th, #metrics-page .metric-time-table th) {
  height: var(--space-10);
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp :where(#reports-page .report-table td, #reports-page #report-detail-table td, #metrics-page .metric-time-table td) {
  height: var(--space-11);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp :where(#reports-page .report-table tbody tr, #reports-page #report-detail-table tbody tr, #metrics-page .metric-time-table tbody tr, #metrics-page .metric-list-row) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp :where(#reports-page .report-table tbody tr:hover, #reports-page #report-detail-table tbody tr:hover, #metrics-page .metric-time-table tbody tr:hover, #metrics-page .metric-list-row:hover) {
  background: var(--surface-hover);
}

.cp #metrics-page .metric-list-panel {
  gap: var(--space-2);
}

.cp #metrics-page .metric-list-row {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.cp #metrics-page .metric-list-bar {
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-3);
}

.cp #metrics-page .metric-list-bar span {
  background: var(--cp-accent);
}

.cp #metrics-page .metric-sales-chart {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cp :where(#reports-page .inventory-empty, #metrics-page .metric-chart-empty, #metrics-page .metrics-empty) {
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp :where(
  #report-detail-body:empty,
  #report-payment-methods:empty,
  #report-cash-types:empty,
  #metrics-payment-methods:empty,
  #metrics-ticket-mix:empty,
  #metrics-top-items:empty,
  #metrics-staff-performance:empty
) {
  min-height: calc(var(--space-10) * 3);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 3 — Settings domain
   ========================================================================== */
.cp #settings-page {
  color: var(--content-1);
}

.cp #settings-page :where(
  .rq-settings-shell.settings-shell-v2,
  .rq-settings-sidebar,
  .rq-settings-main,
  .rq-settings-overview,
  .rq-settings-detail,
  .rq-settings-group,
  .rq-settings-card,
  .settings-panel,
  .settings-profile-card,
  .settings-subsection,
  .settings-suppliers-page,
  .settings-supplier-form-panel,
  .settings-supplier-rq-card,
  .settings-readonly-grid > div,
  .settings-toggle,
  .settings-method-chip,
  .settings-tax-row,
  .settings-tax-rate-row,
  .settings-calls-checklist-row
) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #settings-page :where(h2, h3, h4) {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #settings-page :where(
  .settings-title-bar p,
  .rq-settings-card span,
  .settings-panel-head p,
  .settings-subsection-head p,
  .settings-toggle span,
  .settings-readonly-grid span,
  .settings-suppliers-muted,
  .settings-supplier-rq-row > span:first-child,
  .settings-supplier-rq-check > span:first-child,
  .settings-profile-copy span,
  .settings-table-empty,
  .settings-tax-empty,
  .settings-discount-hint,
  .settings-calls-checklist-row span
) {
  color: var(--content-3);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

.cp #settings-page .rq-settings-shell.settings-shell-v2 {
  gap: var(--space-4);
}

.cp #settings-page .rq-settings-sidebar {
  padding: var(--space-2);
}

.cp #settings-page :where(.rq-settings-side-link, .rq-settings-sub-link) {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #settings-page :where(.rq-settings-side-link:hover, .rq-settings-sub-link:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #settings-page :where(.rq-settings-side-link.active, .rq-settings-sub-link.active) {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp #settings-page .rq-settings-sidebar .rq-settings-subnav {
  margin-top: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-1);
}

.cp #settings-page .rq-settings-main {
  padding: var(--space-4);
}

.cp #settings-page .rq-settings-shell .settings-title-bar {
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-color: var(--border-1);
}

.cp #settings-page :where(.rq-settings-overview, .rq-settings-detail) {
  padding: var(--space-4);
}

.cp #settings-page .rq-settings-card-grid {
  gap: var(--space-3);
}

.cp #settings-page .rq-settings-card {
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-4);
  color: var(--content-1);
  transition:
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard),
    background-color var(--dur-micro) var(--ease-standard);
}

.cp #settings-page .rq-settings-card:hover {
  border-color: var(--border-2);
  background: var(--surface-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-px) * -1));
}

.cp #settings-page :where(.settings-panel, .settings-subsection, .settings-supplier-rq-card) {
  padding: var(--space-4);
}

.cp #settings-page :where(.settings-panel-head, .settings-subsection-head, .settings-suppliers-toolbar, .settings-supplier-rq-footer, .rq-settings-detail-actions) {
  gap: var(--space-3);
  border-color: var(--border-1);
}

.cp #settings-page :where(.settings-form-grid, .settings-supplier-rq-fields, .settings-method-grid, .settings-calls-toggle-grid, .settings-backup-grid) {
  gap: var(--space-3);
}

.cp #settings-page :where(.settings-toggle, .settings-method-chip, .settings-discount-chip) {
  padding: var(--space-3);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #settings-page :where(.settings-toggle:hover, .settings-method-chip:hover, .settings-discount-chip:hover) {
  border-color: var(--border-2);
  background: var(--surface-hover);
}

.cp #settings-page :where(.settings-method-chip:has(input:checked), .settings-discount-chip:has(input:checked)) {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp #settings-page :where(.settings-readonly-grid > div, .settings-calls-checklist-row) {
  padding: var(--space-3);
}

.cp #settings-page .settings-readonly-grid strong {
  color: var(--content-1);
  font-weight: var(--weight-extrabold);
}

/* Manufacturer creation is an explicit, reversible action. The search and
   directory remain visible; the name field only appears after the user asks
   to add a manufacturer. */
.cp #settings-page .settings-subsection-head {
  align-items: flex-start;
}

.cp #settings-page .settings-manufacturer-create {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #settings-page .settings-manufacturer-create.hidden {
  display: none !important;
}

.cp #settings-page .settings-manufacturer-create .settings-suppliers-filter {
  flex: 1 1 24rem;
  align-items: stretch;
  flex-direction: column;
}

.cp #settings-page .settings-manufacturer-create-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

@media (max-width: 720px) {
  .cp #settings-page .settings-manufacturer-create {
    align-items: stretch;
    flex-direction: column;
  }

  .cp #settings-page .settings-manufacturer-create-actions {
    justify-content: flex-end;
  }
}

.cp #settings-page :where(.settings-table-wrap, .settings-suppliers-table-wrap, .settings-backup-table-wrap) {
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #settings-page :where(.settings-suppliers-table th, .settings-item-types-table th, .settings-backup-table th) {
  height: var(--space-10);
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp #settings-page :where(.settings-suppliers-table td, .settings-item-types-table td, .settings-backup-table td) {
  height: var(--space-11);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #settings-page :where(.settings-suppliers-table tbody tr, .settings-item-types-table tbody tr, .settings-backup-table tbody tr) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #settings-page :where(.settings-suppliers-table tbody tr:hover, .settings-item-types-table tbody tr:hover, .settings-backup-table tbody tr:hover) {
  background: var(--surface-hover);
}

.cp #settings-page .settings-supplier-icon-btn {
  border-radius: var(--radius-md);
  color: var(--content-2);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp #settings-page .settings-supplier-icon-btn:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #settings-page .settings-profile-avatar {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  box-shadow: none;
}

.cp #settings-page :where(.settings-table-empty, .settings-tax-empty, .settings-discount-empty) {
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp #settings-page :where(#settings-suppliers-table-body:empty, #settings-item-types-body:empty, #settings-backup-history:empty) {
  min-height: calc(var(--space-10) * 3);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

/* ==========================================================================
   Phase 4 — perception polish
   ========================================================================== */
@keyframes cp-section-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cp #app-view > main:not(.hidden) {
  animation: cp-section-in var(--dur-base) var(--ease-standard);
}

.cp #app-view > main:not(.hidden) > :where(.dashboard-breadcrumb, .inventory-title-bar, .newpo-header, .cash-register-head, .metrics-title-bar, .settings-title-bar) {
  animation: cp-section-in var(--dur-fast) var(--ease-standard);
}

.cp :where(
  [aria-busy="true"],
  .loading,
  .is-loading,
  .catalog-empty-row,
  .inventory-empty:not(.hidden),
  .dashboard-empty:not(.hidden),
  .metric-chart-empty:not(.hidden),
  .settings-table-empty:not(.hidden)
) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp :where([aria-busy="true"], .loading, .is-loading) {
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

.cp :where(
  .dropdown:not(.hidden),
  .popover:not(.hidden),
  .context-menu:not(.hidden),
  .tooltip:not(.hidden),
  [data-popover]:not(.hidden),
  [role="menu"]:not(.hidden),
  [role="listbox"]:not(.hidden)
) {
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.cp :where(
  .cp-interactive,
  table tbody tr,
  .inventory-section-tabs button,
  .rq-settings-card,
  .settings-toggle,
  .dashboard-op-card,
  .metric-card,
  .report-card,
  .cash-card
) {
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard),
    transform var(--dur-micro) var(--ease-standard);
}

/* ==========================================================================
   Phase 4 regression fixes - menu rows, dark bars, and clipped title bars
   ========================================================================== */
.cp .nav-dropdown,
.cp .account-menu {
  padding: var(--space-1) 0;
  border: 1px solid color-mix(in srgb, var(--content-inv) 12%, transparent);
  border-radius: var(--radius-md);
  background: #0b0f16;
  color: var(--content-inv);
  box-shadow: var(--shadow-lg);
}

.cp :where(.nav-dropdown-item, .account-menu-item) {
  width: 100%;
  min-height: calc(var(--space-8) + var(--space-1));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--content-inv);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: left;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

.cp :where(.nav-dropdown-item:hover:not(:disabled), .account-menu-item:hover:not(:disabled)) {
  background: color-mix(in srgb, var(--content-inv) 10%, transparent);
  color: var(--content-inv);
}

.cp :where(.nav-dropdown-item:focus-visible, .account-menu-item:focus-visible) {
  outline: none;
  background: color-mix(in srgb, var(--content-inv) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--cp-accent);
}

.cp :where(.nav-dropdown-item svg, .account-menu-item svg) {
  flex: 0 0 var(--space-5);
  color: currentColor;
}

.cp #reports-page .reports-menu {
  min-height: var(--space-10);
  padding: 0 var(--space-4);
  border-color: color-mix(in srgb, #4a4a4a 82%, #000000);
  background: #4a4a4a;
  color: var(--content-inv);
}

.cp #reports-page .reports-menu :where(strong, span, svg, .reports-menu-icon, .reports-menu-trigger, button, .reports-menu-option) {
  color: var(--content-inv);
}

.cp #reports-page .reports-menu .reports-menu-trigger::after {
  color: color-mix(in srgb, var(--content-inv) 68%, transparent);
}

.cp #reports-page .reports-menu :where(button, .reports-menu-trigger, .reports-menu-option) {
  border-radius: 0;
  background: transparent;
  color: var(--content-inv);
}

.cp #reports-page .reports-menu :where(button:hover, .reports-menu-trigger:hover, .reports-menu-option:hover),
.cp #reports-page .reports-menu-item.open .reports-menu-trigger {
  background: color-mix(in srgb, #4a4a4a 82%, #000000);
  color: var(--content-inv);
}

.cp #reports-page .reports-menu :where(button.active, .reports-menu-trigger.active) {
  background: color-mix(in srgb, var(--cp-accent) 34%, #4a4a4a);
  color: var(--content-inv);
}

.cp #reports-page .reports-menu .reports-menu-dropdown:not(.hidden) {
  border-color: color-mix(in srgb, var(--content-inv) 14%, transparent);
  border-radius: var(--radius-md);
  background: #272727;
  color: var(--content-inv);
}

.cp #reports-page .reports-menu .reports-menu-dropdown:not(.hidden) .reports-menu-option {
  color: var(--content-inv);
}

.cp #home-page :where(.repair-panel-title, .repair-panel-title h2, .repair-panel-title span, .repair-panel-title svg) {
  color: var(--content-inv);
}

.cp #home-page .repair-panel-title {
  min-height: calc(var(--space-10) + var(--space-2));
  padding: 0 var(--space-5);
  background: #4a4a4a;
}

.cp #inventory-page .inventory-title-bar,
.cp #receive-page .inventory-title-bar,
.cp #customers-page .inventory-title-bar,
.cp #purchase-orders-page .inventory-title-bar,
.cp #inventory-item-detail-page .inventory-title-bar {
  min-height: calc(var(--space-10) + var(--space-3));
  align-items: center;
  padding: var(--space-3) var(--space-5);
}

.cp #inventory-page .inventory-title-bar h2,
.cp #receive-page .inventory-title-bar h2,
.cp #customers-page .inventory-title-bar h2,
.cp #customers-page #customers-page-title,
.cp #purchase-orders-page .inventory-title-bar h2,
.cp #inventory-item-detail-page .inventory-title-bar h2 {
  line-height: var(--leading-tight);
  overflow: visible;
}

/* ==========================================================================
   Phase 4 regression fixes - Metrics and Staff shell alignment
   ========================================================================== */
.cp :where(#metrics-page.metrics-page, .staff-page) {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 var(--space-10);
  color: var(--content-1);
}

.cp :where(#metrics-page, #team-page, #hr-page) > .dashboard-breadcrumb {
  display: none;
}

.cp :where(#metrics-page .metrics-shell, .staff-shell) {
  min-height: calc(100vh - (var(--space-10) * 3));
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp #metrics-page .metrics-shell {
  display: grid;
  gap: 0;
}

.cp #metrics-page .metrics-title-bar,
.cp .staff-title-bar,
.cp .staff-filter-title {
  min-height: calc(var(--space-10) + var(--space-3));
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

.cp #metrics-page .metrics-title-bar {
  justify-content: space-between;
  flex-wrap: wrap;
}

.cp #metrics-page .metrics-title-copy {
  min-width: min(calc(var(--space-10) * 6), 100%);
  display: grid;
  gap: var(--space-1);
}

.cp #metrics-page .metrics-title-bar h2,
.cp .staff-title-bar h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.cp .staff-title-bar h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cp .staff-title-bar h2::before {
  content: none;
}

.cp #metrics-page #metrics-range-label,
.cp .staff-title-bar h2 span {
  color: var(--content-3);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-transform: none;
}

.cp #metrics-page .metrics-filter-row {
  margin-left: auto;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #metrics-page .metrics-filter-row label {
  gap: var(--space-1);
}

.cp #metrics-page .metrics-filter-row label span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  text-transform: none;
}

.cp #metrics-page .metrics-filter-row select,
.cp #metrics-page .metrics-filter-row input {
  width: calc(var(--space-10) * 4);
  min-height: var(--space-10);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #metrics-page .metrics-filter-row :where(select, input):focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp #metrics-page .metrics-filter-row .btn {
  align-self: end;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-4);
}

.cp #metrics-page :where(.metrics-card-grid, .metrics-ops-grid, .metrics-analysis-grid, .metric-time-card-grid, .metric-time-grid) {
  gap: var(--space-3);
}

.cp #metrics-page :where(.metrics-card-grid, .metrics-ops-grid) {
  padding: var(--space-4) var(--space-5) 0;
  border: 0;
  background: var(--surface);
}

.cp #metrics-page .metrics-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 4), 1fr));
}

.cp #metrics-page .metrics-ops-grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 3), 1fr));
}

.cp #metrics-page :where(.metric-card, .metric-op-tile) {
  min-height: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cp #metrics-page :where(.metric-card, .metric-op-tile):last-child {
  border-right: 1px solid var(--border-1);
}

.cp #metrics-page :where(.metric-card span, .metric-op-tile span, .metric-cash-tile span, .metric-time-card span, .metric-time-table-title) {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}

.cp #metrics-page :where(.metric-card strong, .metric-op-tile strong, .metric-time-card strong, .metric-cash-tile strong) {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.cp #metrics-page .metric-card.alert-card strong {
  color: var(--cp-danger);
}

.cp #metrics-page .metric-op-tile.warning strong {
  color: var(--cp-warning);
}

.cp #metrics-page .metrics-analysis-grid {
  padding: var(--space-4) var(--space-5);
}

.cp #metrics-page .metric-panel,
.cp #metrics-page .metric-time-report,
.cp #metrics-page .metric-time-table-wrap {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp #metrics-page .metric-panel-head,
.cp #metrics-page .metric-time-report .metric-panel-head {
  min-height: calc(var(--space-10) + var(--space-2));
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

.cp #metrics-page .metric-panel-head h3,
.cp #metrics-page .metric-time-report .metric-panel-head h3 {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.cp #metrics-page .metric-panel-head span,
.cp #metrics-page .metric-time-report .metric-panel-head span {
  color: var(--content-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.cp #metrics-page .metric-sales-chart {
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

.cp #metrics-page .metric-sales-bars .sales,
.cp #metrics-page .metric-sales-legend .sales,
.cp #metrics-page .metric-list-bar span {
  background: var(--cp-accent);
}

.cp #metrics-page .metric-sales-bars .refunds,
.cp #metrics-page .metric-sales-legend .refunds {
  background: var(--cp-danger);
}

.cp #metrics-page .metric-sales-bars .closed,
.cp #metrics-page .metric-sales-legend .closed {
  background: var(--cp-success);
}

.cp #metrics-page .metric-sales-bars .tickets,
.cp #metrics-page .metric-sales-legend .tickets {
  background: var(--content-3);
}

.cp #metrics-page :where(.metric-list-row strong, .metric-list-row em, .metric-sales-day span) {
  color: var(--content-1);
}

.cp #metrics-page :where(.metric-list-row span, .metric-sales-day, .metric-sales-day small, .metric-sales-legend) {
  color: var(--content-3);
}

.cp #metrics-page .metric-list-bar {
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.cp #metrics-page .metric-cash-tile,
.cp #metrics-page .metric-time-card {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #metrics-page .metric-time-report {
  margin: 0 var(--space-5) var(--space-5);
}

.cp #metrics-page .metric-time-table-title {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
}

.cp #metrics-page .metric-time-table {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #metrics-page .metric-time-table th,
.cp #metrics-page .metric-time-table td {
  border-bottom: 1px solid var(--border-1);
}

.cp #metrics-page .metric-time-table th {
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}

.cp #metrics-page .metric-time-table td {
  color: var(--content-1);
}

.cp #metrics-page .metric-time-table tbody tr:nth-child(even) {
  background: var(--surface);
}

.cp #metrics-page .metric-time-table tbody tr:hover {
  background: var(--surface-hover);
}

.cp .staff-page {
  --staff-accent: var(--cp-accent);
  --staff-accent-dark: var(--cp-accent-hover);
  --staff-panel: var(--surface);
  --staff-line: var(--border-1);
  --staff-muted: var(--content-3);
}

.cp .staff-shell {
  grid-template-columns: minmax(calc(var(--space-10) * 7), calc(var(--space-10) * 8)) minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.cp :where(.staff-filter-panel, .staff-main) {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp .staff-filter-title {
  justify-content: flex-start;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.cp .staff-filter-title svg {
  color: var(--cp-accent);
}

.cp .staff-filter-body {
  gap: var(--space-4);
  padding: var(--space-5);
}

.cp :where(.staff-filter-panel label, .staff-form label, .staff-attendance-form label, .staff-edit-card label) {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  text-transform: none;
}

.cp :where(
  .staff-filter-panel input,
  .staff-filter-panel select,
  .staff-form input,
  .staff-form select,
  .staff-attendance-form input,
  .staff-attendance-form select,
  .staff-edit-card input,
  .staff-edit-card select
) {
  min-height: var(--space-10);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp :where(
  .staff-filter-panel input,
  .staff-filter-panel select,
  .staff-form input,
  .staff-form select,
  .staff-attendance-form input,
  .staff-attendance-form select,
  .staff-edit-card input,
  .staff-edit-card select
):focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp .staff-filter-footer {
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-1);
  background: var(--surface-2);
}

.cp .staff-filter-footer .btn,
.cp .staff-filter-footer .inventory-reset {
  width: 100%;
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp .staff-filter-footer .inventory-reset {
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

.cp .staff-filter-footer .inventory-reset:hover {
  background: var(--surface-hover);
}

.cp .staff-title-bar {
  justify-content: space-between;
}

.cp .staff-title-actions {
  gap: var(--space-2);
}

.cp .staff-title-actions button {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp .staff-title-actions button:hover {
  background: var(--surface-hover);
}

.cp .staff-title-actions #staff-add-toggle-btn {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp .staff-title-actions #staff-add-toggle-btn:hover {
  background: var(--cp-accent-hover);
}

.cp .staff-section-tabs {
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) 0;
  background: var(--surface);
}

.cp .staff-section-tabs button {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp .staff-section-tabs button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp .staff-section-tabs button.active {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp :where(.staff-form, .staff-attendance-form) {
  margin: var(--space-4) var(--space-5) 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cp .staff-summary-strip {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) 0;
}

.cp .staff-summary-strip article {
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp .staff-summary-strip span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}

.cp .staff-summary-strip strong {
  color: var(--content-1);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
}

.cp .staff-overview-head {
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.cp .staff-overview-head h3 {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp .staff-overview-head h3 strong {
  color: var(--cp-accent);
}

.cp .staff-view-controls {
  color: var(--content-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp .staff-view-controls select {
  min-height: var(--space-10);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
}

.cp .staff-table-wrap {
  margin: 0 var(--space-5) var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}

.cp .staff-table {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp .staff-table th,
.cp .staff-table td {
  border-bottom: 1px solid var(--border-1);
}

.cp .staff-table th {
  background: var(--surface-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}

.cp .staff-table td {
  color: var(--content-1);
}

.cp .staff-table tbody tr:hover {
  background: var(--surface-hover);
}

.cp .staff-name-cell {
  color: var(--content-1);
  font-weight: var(--weight-black);
}

.cp .team-pin {
  color: var(--content-3);
  font-weight: var(--weight-bold);
}

.cp .staff-table .team-actions .btn {
  min-height: calc(var(--space-8) + var(--space-1));
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
}

.cp .staff-table .team-actions .btn-secondary {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp .staff-empty {
  margin: var(--space-5);
  padding: var(--space-6);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp .staff-edit-modal {
  z-index: var(--z-modal);
  padding: var(--space-6);
  background: color-mix(in srgb, var(--content-1) 50%, transparent);
}

.cp .staff-edit-card {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.cp .staff-edit-head {
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

.cp .staff-edit-avatar {
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp .staff-edit-kicker {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: none;
}

.cp .staff-edit-head h3 {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.cp .staff-edit-close {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
}

.cp .staff-edit-close:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp .staff-edit-body {
  padding: var(--space-5);
  background: var(--surface-2);
}

.cp .staff-edit-active {
  min-height: var(--space-10);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
}

/* The staff editor is a dialog: keep it above the sticky top bar and subbar
   (same layer as the New PO dialog) so its header is never hidden behind
   them on shorter screens. */
.cp .staff-edit-modal:not(.hidden) {
  z-index: var(--cp-z-floating);
}

/* Staff edit: per-user Camera access group (superadmin-only flags). */
.cp .staff-edit-camera-access {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;
}

.cp .staff-edit-camera-access legend {
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--content-1);
}

.cp .staff-edit-camera-help,
.cp .staff-edit-camera-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--content-2);
}

.cp .staff-edit-camera-note {
  font-weight: var(--weight-medium);
}

.cp .staff-edit-camera-access .staff-edit-active:has(input:disabled) {
  background: var(--surface-2);
  color: var(--content-2);
  cursor: not-allowed;
}

@media (max-width: 620px) {
  .cp .staff-edit-camera-access {
    grid-template-columns: 1fr;
  }
}

.cp .staff-edit-foot {
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-1);
  background: var(--surface);
}

@media (max-width: 1050px) {
  .cp #metrics-page .metrics-title-bar,
  .cp .staff-title-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .cp #metrics-page .metrics-filter-row {
    width: 100%;
    margin-left: 0;
  }

  .cp .staff-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cp :where(#metrics-page.metrics-page, .staff-page) {
    width: calc(100% - var(--space-5));
  }

  .cp #metrics-page .metrics-title-bar,
  .cp .staff-title-bar,
  .cp .staff-filter-title {
    padding: var(--space-3);
  }

  .cp #metrics-page .metrics-filter-row,
  .cp #metrics-page .metrics-filter-row label,
  .cp #metrics-page .metrics-filter-row select,
  .cp #metrics-page .metrics-filter-row input,
  .cp #metrics-page .metrics-filter-row .btn {
    width: 100%;
  }

  .cp #metrics-page :where(.metrics-card-grid, .metrics-ops-grid, .metrics-analysis-grid),
  .cp .staff-filter-body,
  .cp .staff-filter-footer,
  .cp .staff-summary-strip,
  .cp .staff-section-tabs {
    padding-inline: var(--space-3);
  }

  .cp #metrics-page .metric-time-report,
  .cp .staff-table-wrap,
  .cp :where(.staff-form, .staff-attendance-form) {
    margin-inline: var(--space-3);
  }
}

/* ==========================================================================
   Phase 4 regression fixes - Cash Register visual hierarchy
   ========================================================================== */
.cp #cash-register-page.cash-register-page {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding: 0 0 var(--space-10);
  color: var(--content-1);
}

.cp #cash-register-page > .dashboard-breadcrumb {
  display: none;
}

.cp #cash-register-page .cash-register-shell {
  min-height: calc(100vh - (var(--space-10) * 3));
  padding: var(--space-5);
  gap: var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-md);
}

.cp #cash-register-page .cash-register-head {
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--cp-accent-soft) 48%, var(--surface)) 100%);
  box-shadow: var(--shadow-sm);
}

.cp #cash-register-page .cash-register-head-text {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.cp #cash-register-page .cash-register-head-text h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #cash-register-page .cash-register-sub {
  max-width: calc(var(--space-10) * 18);
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.cp #cash-register-page .cash-register-location {
  width: fit-content;
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.cp #cash-register-page .cash-register-head-actions {
  gap: var(--space-2);
}

.cp #cash-register-page .cash-register-head-actions .btn {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #cash-register-page .cash-register-loading {
  padding: var(--space-5);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  color: var(--content-2);
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

.cp #cash-register-page .cash-register-loading.hidden {
  display: none;
}

.cp #cash-register-page .cash-register-no-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 32%, var(--border-1));
  border-left: var(--space-1) solid var(--cp-warning);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
}

.cp #cash-register-page .cash-register-no-slot.hidden {
  display: none;
}

.cp #cash-register-page .cash-no-slot-icon {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cp-warning) 42%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--cp-warning);
  font-size: var(--text-lg);
  line-height: 1;
}

.cp #cash-register-page .cash-no-slot-text {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #cash-register-page .cash-no-slot-text strong {
  color: var(--content-1);
  font-weight: var(--weight-bold);
}

.cp #cash-register-page .cash-register-grid {
  gap: var(--space-4);
  align-items: stretch;
}

.cp #cash-register-page .cash-register-grid.is-focused {
  max-width: calc(var(--space-10) * 14);
}

.cp #cash-register-page .cash-card {
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp #cash-register-page .cash-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-1) / -4));
}

.cp #cash-register-page .cash-card.is-selected {
  border-color: var(--cp-accent);
  border-left-color: var(--cp-accent);
  box-shadow: var(--focus-ring), var(--shadow-md);
}

.cp #cash-register-page .cash-card.is-open {
  border-left-color: var(--cp-success);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-success) 6%, var(--surface)) 0%, var(--surface) 62%);
}

.cp #cash-register-page .cash-card.is-closed {
  border-left-color: var(--border-2);
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.cp #cash-register-page .cash-card.is-petty {
  border-left-color: var(--cp-warning);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-warning) 6%, var(--surface)) 0%, var(--surface) 64%);
}

.cp #cash-register-page .cash-card-head {
  align-items: flex-start;
  gap: var(--space-3);
}

.cp #cash-register-page .cash-card-name {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #cash-register-page .cash-card-status {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #cash-register-page .cash-card-status-open {
  border-color: color-mix(in srgb, var(--cp-success) 35%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: var(--cp-success);
}

.cp #cash-register-page .cash-card-status-closed {
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-2);
}

.cp #cash-register-page .cash-card-body {
  gap: var(--space-2);
}

.cp #cash-register-page .cash-card-row {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #cash-register-page .cash-card-row dt {
  color: var(--content-3);
  font-weight: var(--weight-medium);
}

.cp #cash-register-page .cash-card-row dd {
  color: var(--content-1);
  font-weight: var(--weight-bold);
}

.cp #cash-register-page .cash-card-row-expected dd {
  color: var(--cp-accent);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.cp #cash-register-page .cash-card.is-petty .cash-card-row-expected dd {
  color: var(--cp-warning);
}

.cp #cash-register-page .cash-card-empty {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #cash-register-page .cash-card-actions {
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.cp #cash-register-page .cash-card.is-closed .cash-card-actions {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.cp #cash-register-page .cash-card-actions .btn,
.cp #cash-register-page .cash-card-view-btn {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  white-space: normal;
}

.cp #cash-register-page .cash-card-view-btn {
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

.cp #cash-register-page .cash-card-view-btn:hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

.cp #cash-register-page .cash-card-view-btn.is-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #cash-register-page :where(.cash-detail, .cash-petty-section) {
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp #cash-register-page .cash-petty-section {
  background:
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--cp-warning) 4%, var(--surface-2)) 100%);
}

.cp #cash-register-page .cash-detail-head {
  min-height: calc(var(--space-10) + var(--space-2));
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-1);
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.cp #cash-register-page .cash-detail-head h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #cash-register-page .cash-petty-head p,
.cp #cash-register-page .cash-detail-meta {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #cash-register-page .cash-detail-meta strong {
  color: var(--content-1);
  font-weight: var(--weight-bold);
}

.cp #cash-register-page .cash-detail-summary {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) 0;
}

.cp #cash-register-page .cash-detail-summary:empty {
  display: none;
}

.cp #cash-register-page .cash-detail-summary-tile {
  min-width: calc(var(--space-10) * 4);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: none;
}

.cp #cash-register-page .cash-detail-summary-tile.tile-positive {
  border-left-color: var(--cp-success);
}

.cp #cash-register-page .cash-detail-summary-tile.tile-negative {
  border-left-color: var(--cp-danger);
}

.cp #cash-register-page .cash-detail-summary-tile .tile-label {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp #cash-register-page .cash-detail-summary-tile .tile-value {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp #cash-register-page .cash-detail-summary-tile.tile-positive .tile-value,
.cp #cash-register-page .cash-detail-td-amount.is-credit {
  color: var(--cp-success);
}

.cp #cash-register-page .cash-detail-summary-tile.tile-negative .tile-value,
.cp #cash-register-page .cash-detail-td-amount.is-debit {
  color: var(--cp-danger);
}

.cp #cash-register-page .cash-detail-empty,
.cp #cash-register-page :where(#cash-detail-no-tx, #petty-cash-no-tx) {
  margin: var(--space-4) var(--space-5) var(--space-5);
  padding: var(--space-5);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-align: center;
}

.cp #cash-register-page .cash-detail-empty.hidden,
.cp #cash-register-page :where(#cash-detail-no-tx.hidden, #petty-cash-no-tx.hidden) {
  display: none;
}

.cp #cash-register-page .cash-detail-table-wrap {
  margin: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
}

.cp #cash-register-page .cash-detail-table-wrap.hidden {
  display: none;
}

.cp #cash-register-page .cash-detail-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #cash-register-page .cash-detail-table th {
  height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-3);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.cp #cash-register-page .cash-detail-table td {
  height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #cash-register-page .cash-detail-table tbody tr:hover td {
  background: var(--surface-hover);
}

.cp #cash-register-page .cash-petty-card-wrap {
  max-width: calc(var(--space-10) * 14);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #cash-register-page .cash-petty-card-wrap:empty {
  display: none;
}

.cp #cash-register-page .cash-petty-section .cash-detail-summary {
  padding-top: var(--space-4);
}

@media (max-width: 1180px) {
  .cp #cash-register-page .cash-register-grid:not(.is-focused) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cp #cash-register-page.cash-register-page {
    width: calc(100% - var(--space-5));
  }

  .cp #cash-register-page .cash-register-shell {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .cp #cash-register-page .cash-register-head,
  .cp #cash-register-page .cash-detail-head {
    padding: var(--space-4);
  }

  .cp #cash-register-page .cash-register-head-actions,
  .cp #cash-register-page .cash-register-head-actions .btn,
  .cp #cash-register-page .cash-register-no-slot .btn {
    width: 100%;
  }

  .cp #cash-register-page .cash-register-no-slot {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #cash-register-page .cash-register-grid:not(.is-focused) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #cash-register-page .cash-detail-summary,
  .cp #cash-register-page .cash-detail-empty,
  .cp #cash-register-page .cash-detail-table-wrap,
  .cp #cash-register-page .cash-petty-card-wrap,
  .cp #cash-register-page :where(#cash-detail-no-tx, #petty-cash-no-tx) {
    margin-inline: var(--space-3);
  }

  .cp #cash-register-page .cash-detail-summary,
  .cp #cash-register-page .cash-petty-card-wrap {
    padding-inline: var(--space-3);
  }
}

/* ==========================================================================
   Phase 4 regression fixes - Dashboard and Reports list hierarchy
   ========================================================================== */
.cp #home-page .alerts-panel .repair-panel-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-2);
}

.cp #home-page .daily-strip {
  gap: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp #home-page .daily-strip > div {
  min-height: calc(var(--space-10) + var(--space-6));
  padding: var(--space-4);
  border: 0;
  border-right: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #home-page .daily-strip > div:first-child {
  border-left: var(--space-1) solid var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent-soft) 42%, var(--surface));
}

.cp #home-page .daily-strip > div:last-child {
  border-right: 0;
}

.cp #home-page .daily-label {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp #home-page .daily-strip strong {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.cp #home-page .dashboard-ops-grid {
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
}

.cp #home-page .dashboard-op-card {
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

.cp #home-page .dashboard-op-card:last-child {
  border-right: 1px solid var(--border-1);
}

.cp #home-page #dashboard-open-tickets-summary-btn,
.cp #home-page #dashboard-balance-due-btn {
  border-left-color: var(--cp-accent);
}

.cp #home-page #dashboard-reorder-summary-btn {
  border-left-color: var(--cp-warning);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-warning) 6%, var(--surface)) 0%, var(--surface) 68%);
}

.cp #home-page #dashboard-po-summary-btn {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-accent-soft) 58%, var(--surface)) 0%, var(--surface) 70%);
}

.cp #home-page .dashboard-op-card:hover,
.cp #home-page .dashboard-op-card:focus-visible {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-1) / -4));
}

.cp #home-page .dashboard-op-card.warning strong {
  color: var(--cp-warning);
}

.cp #home-page .dashboard-op-card.danger strong {
  color: var(--cp-danger);
}

.cp #home-page .dashboard-ops-alerts {
  gap: var(--space-4);
  padding: 0;
}

.cp #home-page .dashboard-ops-alert {
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-accent-soft) 42%, var(--surface)) 0%, var(--surface) 72%);
  box-shadow: var(--shadow-sm);
}

.cp #home-page .dashboard-ops-alert.warning {
  border-color: color-mix(in srgb, var(--cp-warning) 28%, var(--border-1));
  border-left-color: var(--cp-warning);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-warning) 8%, var(--surface)) 0%, var(--surface) 72%);
}

.cp #home-page .dashboard-ops-alert.danger {
  border-color: color-mix(in srgb, var(--cp-danger) 28%, var(--border-1));
  border-left-color: var(--cp-danger);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cp-danger) 8%, var(--surface)) 0%, var(--surface) 72%);
}

.cp #home-page .dashboard-ops-alert-head {
  gap: var(--space-3);
}

.cp #home-page .dashboard-ops-alert-head h3 {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #home-page .dashboard-ops-alert-head span {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #home-page .dashboard-mini-table {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  color: var(--content-1);
  overflow: hidden;
}

.cp #home-page .dashboard-mini-table th,
.cp #home-page .dashboard-mini-table td {
  height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #home-page .dashboard-mini-table th {
  background: var(--surface-3);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.cp #home-page .dashboard-mini-table tbody tr:last-child td {
  border-bottom: 0;
}

.cp #home-page .dashboard-ops-actions {
  gap: var(--space-2);
}

.cp #home-page .dashboard-ops-actions .btn {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #reports-page .reports-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 7), 1fr));
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
}

.cp #reports-page .reports-content > :where(
  [data-report-index-intro],
  .report-detail-section,
  .report-live-section,
  .report-system-log,
  .report-queues
) {
  grid-column: 1 / -1;
}

.cp #reports-page .reports-content > p[data-report-index-intro] {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background: var(--cp-accent-soft);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #reports-page .report-group {
  display: grid;
  gap: var(--space-3);
  width: auto;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow-sm);
}

.cp #reports-page .report-group h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #reports-page .report-group ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp #reports-page .report-group li {
  margin: 0;
}

.cp #reports-page .report-group button {
  width: 100%;
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: left;
  box-shadow: none;
}

.cp #reports-page .report-group button:hover,
.cp #reports-page .report-group button:focus-visible {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
  .cp #home-page .dashboard-ops-grid,
  .cp #reports-page .reports-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #reports-page .reports-content > :where(
    [data-report-index-intro],
    .report-detail-section,
    .report-live-section,
    .report-system-log,
    .report-queues
  ) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .cp #home-page .alerts-panel .repair-panel-body,
  .cp #reports-page .reports-content {
    padding: var(--space-3);
  }

  .cp #home-page .daily-strip,
  .cp #home-page .dashboard-ops-grid,
  .cp #reports-page .reports-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Global layer and clean-entry polish
   ========================================================================== */
.cp {
  --cp-z-app-chrome: calc(
    var(--z-toast) +
    var(--z-modal) +
    var(--z-overlay) +
    var(--z-dropdown) +
    var(--z-dropdown) +
    var(--z-sticky)
  );
  --cp-z-floating: calc(var(--cp-z-app-chrome) + var(--z-base));
  --cp-z-tooltip: calc(var(--cp-z-floating) + var(--z-base));
}

.cp :where(
  .account-menu,
  .nav-dropdown,
  .ticket-menu,
  .inv-row-menu,
  .reports-menu-dropdown,
  .devices-add-filter-popover,
  .devices-date-popover,
  .devices-date-popover-standalone,
  .devices-multiselect-popover,
  .invord-itype-popover,
  .pc-type-popover,
  .cie-lock-popover,
  .iim-catalog-options,
  .iim-ref-popover,
  .my-work-chat-menu,
  .my-work-chat-picker,
  .my-work-chat-plus-menu,
  .my-work-chat-reaction-popover
):not(.hidden) {
  z-index: var(--cp-z-floating);
}

.cp :where(
  #inventory-page,
  #inventory-page .inventory-shell,
  #inventory-page .devices-toolbar,
  #inventory-page .devices-toolbar-row,
  #inventory-page .devices-pagination-summary,
  #inventory-page .devices-actions-group,
  #inventory-item-detail-page,
  #inventory-item-detail-page .inventory-shell,
  #inventory-item-detail-page .devices-toolbar,
  #inventory-item-detail-page .devices-toolbar-row,
  #inventory-item-detail-page .devices-pagination-summary,
  #inventory-item-detail-page .devices-actions-group
) {
  overflow: visible;
}

/* Pending Price action menus render outside the final card. This selector is
   intentionally more specific than the legacy shell rule that clips panels. */
.cp #inventory-page .inventory-shell {
  overflow: visible;
}

.cp :where(
  .devices-date-chip-wrap:has(.devices-date-popover:not(.hidden)),
  .devices-add-filter-wrap:has(.devices-add-filter-popover:not(.hidden)),
  .devices-extra-chip:focus-within
) {
  z-index: var(--cp-z-floating);
}

.cp #compupod-chat-page :where(
  .compupod-slack-workspace,
  .compupod-chat-panel,
  .my-work-chat-panel,
  .my-work-chat-thread,
  .my-work-chat-thread-head,
  .my-work-chat-head-main,
  .my-work-chat-head-actions,
  .my-work-chat-head-icon,
  .my-work-chat-icon-btn
) {
  overflow: visible;
}

.cp #compupod-chat-page .my-work-chat-thread-head {
  position: relative;
  z-index: var(--cp-z-floating);
}

.cp #compupod-chat-page .my-work-chat-thread-head:has([data-tooltip]:is(:hover, :focus-visible)) {
  z-index: var(--cp-z-tooltip);
}

.cp #compupod-chat-page [data-tooltip] {
  position: relative;
}

.cp #compupod-chat-page [data-tooltip]:is(:hover, :focus-visible) {
  z-index: var(--cp-z-tooltip);
}

.cp #compupod-chat-page [data-tooltip]:is(:hover, :focus-visible)::before,
.cp #compupod-chat-page [data-tooltip]:is(:hover, :focus-visible)::after {
  z-index: var(--cp-z-tooltip);
}

body.is-chat-view .ai-field-help-launcher {
  right: auto;
  left: var(--space-4);
  bottom: var(--space-4);
}

body.is-chat-view .ai-field-help-panel {
  right: auto;
  left: var(--space-4);
  bottom: calc(var(--space-10) + var(--space-8));
}

#compupod-chat-page .my-work-chat-urgent-btn {
  width: var(--space-8);
  min-width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cp-danger) 38%, var(--border-2));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-danger-soft) 62%, var(--surface));
  color: var(--cp-danger);
  box-shadow: none;
}

#compupod-chat-page .my-work-chat-urgent-btn:hover {
  border-color: var(--cp-danger);
  background: color-mix(in srgb, var(--cp-danger-soft) 78%, var(--surface));
  transform: translateY(-0.5px);
}

#compupod-chat-page .my-work-chat-urgent-btn.is-active {
  border-color: var(--cp-danger);
  background: var(--cp-danger);
  color: var(--content-inv);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--cp-danger) 18%, transparent);
}

#compupod-chat-page .my-work-chat-urgent-btn .cp-icon {
  width: var(--space-5);
  height: var(--space-5);
  vertical-align: middle;
}

#compupod-chat-page .my-work-chat-pending-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--space-10) * 5), 100%), 1fr));
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-2);
}

#compupod-chat-page .my-work-chat-pending-files.hidden {
  display: none;
}

#compupod-chat-page .my-work-chat-pending-file {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) var(--space-8);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
}

#compupod-chat-page .my-work-chat-pending-file-thumb {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--content-2);
  overflow: hidden;
}

#compupod-chat-page .my-work-chat-pending-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#compupod-chat-page .my-work-chat-pending-file div:not(.my-work-chat-pending-file-thumb) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#compupod-chat-page .my-work-chat-pending-file strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-pending-file span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-pending-file button {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-pending-file button:hover,
#compupod-chat-page .my-work-chat-pending-file button:focus-visible {
  background: var(--surface-hover);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-drop-overlay {
  position: absolute;
  inset: var(--space-2);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  border: 1px dashed var(--cp-accent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 86%, var(--cp-accent-soft));
  color: var(--cp-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-accent) 18%, transparent);
  pointer-events: none;
}

#compupod-chat-page .my-work-chat-drop-overlay.hidden {
  display: none;
}

#compupod-chat-page .my-work-chat-drop-overlay .cp-icon {
  width: var(--space-8);
  height: var(--space-8);
}

#compupod-chat-page .my-work-chat-drop-overlay strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-form.is-dragging-file {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

#compupod-chat-page .my-work-chat-audio-status {
  margin: 0 var(--space-3);
  border-color: var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
}

#compupod-chat-page .my-work-chat-audio-status strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-audio-status time {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-audio-status.is-paused .my-work-chat-record-dot {
  background: var(--cp-warning);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--cp-warning) 18%, transparent);
}

#compupod-chat-page .my-work-chat-audio-status.is-paused .my-work-chat-audio-wave i {
  animation-play-state: paused;
  opacity: 0.46;
}

#compupod-chat-page .my-work-chat-audio-status button {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-audio-status button:hover,
#compupod-chat-page .my-work-chat-audio-status button:focus-visible {
  background: var(--surface-hover);
}

.my-work-chat-video-modal {
  background: color-mix(in srgb, var(--cp-gray-90) 72%, transparent);
}

.my-work-chat-video-card {
  width: min(calc(var(--space-10) * 20), calc(100vw - var(--space-8)));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

.my-work-chat-video-card header {
  min-height: calc(var(--space-10) + var(--space-5));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-1);
  position: relative;
}

.my-work-chat-video-card header div {
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-video-card header div > span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

.my-work-chat-video-card h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.my-work-chat-video-card header button {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-2);
  position: static;
}

.my-work-chat-video-card header button:hover,
.my-work-chat-video-card header button:focus-visible {
  background: var(--surface-hover);
  color: var(--content-1);
}

.my-work-chat-video-status {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.my-work-chat-video-modal.is-recording .my-work-chat-video-status time {
  color: var(--cp-danger);
}

.my-work-chat-video-stage {
  min-height: calc(var(--space-10) * 8);
  height: clamp(calc(var(--space-10) * 8), 56vh, calc(var(--space-10) * 12));
  margin: 0 var(--space-5) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--cp-gray-90);
  position: relative;
  overflow: hidden;
}

.my-work-chat-video-stage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.my-work-chat-video-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  color: var(--cp-gray-30);
  background: var(--cp-gray-90);
}

.my-work-chat-video-empty .cp-icon {
  width: var(--space-8);
  height: var(--space-8);
}

.my-work-chat-video-empty strong {
  color: var(--cp-gray-10);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.my-work-chat-video-modal.has-stream .my-work-chat-video-empty {
  display: none;
}

.my-work-chat-video-card footer {
  min-height: calc(var(--space-10) + var(--space-4));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-1);
}

.my-work-chat-video-options {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.my-work-chat-video-options button,
.my-work-chat-video-record {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.my-work-chat-video-options button:hover,
.my-work-chat-video-options button:focus-visible,
.my-work-chat-video-record:hover,
.my-work-chat-video-record:focus-visible {
  background: var(--surface-hover);
}

.my-work-chat-video-options button.is-off {
  color: var(--content-3);
  text-decoration: line-through;
}

.my-work-chat-video-record {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--cp-danger) 32%, var(--border-2));
  background: color-mix(in srgb, var(--cp-danger-soft) 68%, var(--surface));
  color: var(--cp-danger);
}

.my-work-chat-video-modal.is-recording .my-work-chat-video-record {
  background: var(--cp-danger);
  color: var(--content-inv);
}

.my-work-chat-video-record-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background: currentColor;
}

@media (max-width: 760px) {
  body.is-chat-view .ai-field-help-panel {
    left: var(--space-2);
    width: calc(100vw - var(--space-4));
  }

  #compupod-chat-page .my-work-chat-pending-files {
    grid-template-columns: 1fr;
  }

  #compupod-chat-page .my-work-chat-audio-status,
  .my-work-chat-video-card footer {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .my-work-chat-video-record {
    width: 100%;
    margin-left: 0;
  }
}

.cp :where(
  #inventory-item-detail-page .inventory-shell,
  #inventory-item-manage-page .iim-shell,
  #catalog-item-view-page .civ-shell,
  #cash-register-page .cash-register-shell
) {
  position: relative;
}

.cp :where(
  #inventory-item-detail-page.is-enter-loading,
  #inventory-item-manage-page.is-enter-loading,
  #catalog-item-view-page.is-enter-loading,
  #cash-register-page.is-enter-loading
) > .dashboard-breadcrumb {
  position: relative;
}

.cp :where(
  #inventory-item-detail-page.is-enter-loading,
  #inventory-item-manage-page.is-enter-loading,
  #catalog-item-view-page.is-enter-loading,
  #cash-register-page.is-enter-loading
) > .dashboard-breadcrumb span {
  opacity: 0;
}

.cp :where(
  #inventory-item-detail-page.is-enter-loading,
  #inventory-item-manage-page.is-enter-loading,
  #catalog-item-view-page.is-enter-loading,
  #cash-register-page.is-enter-loading
) > .dashboard-breadcrumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-8) + var(--space-2));
  width: min(calc(var(--space-10) * 5), 52vw);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 74%, transparent), transparent),
    var(--surface-3);
  background-size: 220% 100%;
  transform: translateY(-50%);
  animation: cp-shimmer 1.2s var(--ease-in-out) infinite;
}

.cp :where(
  #inventory-item-detail-page.is-enter-loading .inventory-shell > *,
  #inventory-item-manage-page.is-enter-loading .iim-shell > *,
  #catalog-item-view-page.is-enter-loading .civ-shell > *,
  #cash-register-page.is-enter-loading #cash-register-no-slot,
  #cash-register-page.is-enter-loading #cash-register-grid,
  #cash-register-page.is-enter-loading .cash-detail,
  #cash-register-page.is-enter-loading .cash-petty-section
) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-1));
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.cp :where(
  #inventory-item-detail-page.is-enter-loading .inventory-shell,
  #inventory-item-manage-page.is-enter-loading .iim-shell,
  #catalog-item-view-page.is-enter-loading .civ-shell
)::after {
  content: "";
  position: absolute;
  inset: var(--space-4);
  min-height: calc(var(--space-10) * 6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 74%, transparent), transparent) 0 0 / 220% 100%,
    linear-gradient(var(--surface-3), var(--surface-3)) var(--space-5) var(--space-5) / 34% var(--space-4) no-repeat,
    linear-gradient(var(--surface-3), var(--surface-3)) var(--space-5) calc(var(--space-10) + var(--space-2)) / 72% var(--space-8) no-repeat,
    linear-gradient(var(--surface-3), var(--surface-3)) var(--space-5) calc(var(--space-10) * 2 + var(--space-2)) / 92% var(--space-8) no-repeat,
    linear-gradient(var(--surface-3), var(--surface-3)) var(--space-5) calc(var(--space-10) * 3 + var(--space-2)) / 82% var(--space-8) no-repeat,
    var(--surface);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  animation:
    cp-section-in var(--dur-fast) var(--ease-standard),
    cp-shimmer 1.2s var(--ease-in-out) infinite;
}

.cp #cash-register-page.is-enter-loading #cash-register-loading {
  min-height: calc(var(--space-10) * 4);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.cp :where(
  #inventory-item-detail-page:not(.is-enter-loading) .inventory-shell > *,
  #inventory-item-manage-page:not(.is-enter-loading) .iim-shell > *,
  #catalog-item-view-page:not(.is-enter-loading) .civ-shell > *,
  #cash-register-page:not(.is-enter-loading) .cash-register-shell > *
) {
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

/* My Work area board */
#my-work-page.home-main {
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 0;
  color: var(--content-1);
}

#my-work-page .my-work-title-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
}

#my-work-page .my-work-title-bar h2 {
  margin: 0;
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

#my-work-page .my-work-subtitle {
  min-height: var(--space-5);
  margin: var(--space-1) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

#my-work-page .my-work-title-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

#my-work-page .my-work-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

#my-work-page .repair-dashboard,
#my-work-page .my-work-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-4) 0 var(--space-8);
}

#my-work-page .my-work-shell > .dashboard-left {
  min-width: 0;
}

#my-work-page .repair-panel,
#my-work-page .my-work-board-panel,
#my-work-page .my-work-admin-bottom .repair-panel {
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

#my-work-page .repair-panel-title,
#my-work-page .my-work-board-panel .repair-panel-title,
#my-work-page .my-work-admin-bottom .repair-panel-title {
  min-height: calc(var(--space-10) + var(--space-2));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

#my-work-page .repair-panel-title .cp-icon {
  width: var(--space-5);
  height: var(--space-5);
  color: var(--cp-accent);
}

#my-work-page .repair-panel-body {
  padding: var(--space-4);
}

#my-work-page .my-work-context-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--space-10) * 6), calc(var(--space-10) * 9)) minmax(calc(var(--space-10) * 3), calc(var(--space-10) * 4));
  align-items: end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

#my-work-page .my-work-context-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-area-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#my-work-page .my-work-area-tabs button,
#my-work-page .my-work-search,
#my-work-page #my-work-filter-owner,
#my-work-page .my-work-admin-filters select,
#my-work-page .my-work-form .field input,
#my-work-page .my-work-form .field textarea,
#my-work-page .my-work-form .field select {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-sm);
}

#my-work-page .my-work-area-tabs button {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard);
}

#my-work-page .my-work-area-tabs button span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-area-tabs button:hover,
#my-work-page .my-work-area-tabs button.is-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

#my-work-page .my-work-search {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
}

#my-work-page .my-work-search .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--content-3);
}

#my-work-page .my-work-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--content-1);
  font: inherit;
  outline: none;
}

#my-work-page #my-work-filter-owner {
  min-height: var(--space-10);
  padding: 0 var(--space-3);
}

#my-work-page .my-work-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  border: 0;
  background: transparent;
}

#my-work-page .my-work-strip > div {
  min-height: calc(var(--space-10) + var(--space-4));
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: none;
}

#my-work-page .my-work-strip .daily-label {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-strip strong {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

#my-work-page .my-work-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

#my-work-page .my-work-section {
  min-height: 0;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

#my-work-page .my-work-section-wide {
  grid-column: 1 / -1;
}

#my-work-page .my-work-section > summary.my-work-section-title {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

#my-work-page .my-work-section > summary.my-work-section-title::before {
  border-color: var(--content-3);
}

#my-work-page .my-work-section-title em {
  min-width: var(--space-6);
  min-height: var(--space-6);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-style: normal;
}

#my-work-page .my-work-list {
  max-height: calc(var(--space-10) * 9);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  overflow: auto;
}

#my-work-page .my-work-section-wide .my-work-list {
  max-height: calc(var(--space-10) * 6);
}

#my-work-page .my-work-card,
#my-work-page .my-work-admin-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    border-color var(--dur-micro) var(--ease-standard);
}

#my-work-page .my-work-card:hover,
#my-work-page .my-work-admin-row:hover {
  border-color: var(--border-2);
  background: var(--surface-hover);
  transform: none;
}

#my-work-page .my-work-card-head,
#my-work-page .my-work-admin-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

#my-work-page .my-work-card-title,
#my-work-page .my-work-admin-row-main strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#my-work-page .my-work-card-desc,
#my-work-page .my-work-card-notice,
#my-work-page .my-work-admin-row-note {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

#my-work-page .my-work-card-meta,
#my-work-page .my-work-admin-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--content-3);
  font-size: var(--text-xs);
}

#my-work-page .my-work-card-meta span,
#my-work-page .my-work-admin-row-meta span {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-5);
}

#my-work-page .my-work-card-actions,
#my-work-page .my-work-admin-row-actions,
#my-work-page .my-work-form-actions,
#my-work-page .my-work-history-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

#my-work-page .my-work-card-actions .btn,
#my-work-page .my-work-admin-row-actions .btn {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

#my-work-page .my-work-tag,
#my-work-page .my-work-status,
#my-work-page .my-work-priority,
#my-work-page .my-work-message-unread,
#my-work-page .my-work-message-read {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

#my-work-page .my-work-tag {
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

#my-work-page .my-work-tag-sales,
#my-work-page .my-work-tag-inventory,
#my-work-page .my-work-tag-technician,
#my-work-page .my-work-tag-support,
#my-work-page .my-work-tag-management,
#my-work-page .my-work-tag-general,
#my-work-page .my-work-tag-message,
#my-work-page .my-work-tag-unassigned {
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

#my-work-page .my-work-priority-high,
#my-work-page .my-work-message-unread {
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
}

#my-work-page .my-work-priority-low,
#my-work-page .my-work-message-read {
  background: var(--surface-3);
  color: var(--content-2);
}

#my-work-page .dashboard-empty {
  margin: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
}

#my-work-page .my-work-admin-bottom {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 7), calc(var(--space-10) * 10)) minmax(0, 1fr);
  gap: var(--space-4);
}

#my-work-page .my-work-admin-bottom.hidden {
  display: none;
}

#my-work-page .my-work-admin-heading {
  grid-column: 1 / -1;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
}

#my-work-page .my-work-admin-heading .my-work-eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-admin-heading strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-form {
  display: grid;
  gap: var(--space-3);
}

#my-work-page .my-work-form .field {
  display: grid;
  gap: var(--space-1);
}

#my-work-page .my-work-form .field label,
#my-work-page .my-work-inline-check,
#my-work-page .my-work-form-hint {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

#my-work-page .my-work-form .field input,
#my-work-page .my-work-form .field textarea,
#my-work-page .my-work-form .field select,
#my-work-page .my-work-admin-filters select {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
}

#my-work-page .my-work-form .field textarea {
  resize: vertical;
}

#my-work-page .my-work-form-row,
#my-work-page .my-work-admin-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

#my-work-page .my-work-admin-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--space-3);
}

#my-work-page .my-work-inline-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#my-work-page .my-work-recurring-fields {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

#my-work-page .my-work-recurring-fields.hidden {
  display: none;
}

#my-work-page .my-work-recurring-slots {
  display: grid;
  gap: var(--space-2);
}

#my-work-page .my-work-recurring-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

#my-work-page .my-work-admin-list {
  display: grid;
  gap: var(--space-2);
  max-height: calc(var(--space-10) * 10);
  overflow: auto;
}

@media (max-width: 1180px) {
  #my-work-page .my-work-context-bar,
  #my-work-page .my-work-lanes,
  #my-work-page .my-work-admin-bottom {
    grid-template-columns: 1fr;
  }

  #my-work-page .my-work-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #my-work-page .my-work-admin-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #my-work-page.home-main {
    width: 100%;
  }

  #my-work-page .my-work-title-bar,
  #my-work-page .my-work-card-head,
  #my-work-page .my-work-admin-row-main {
    align-items: stretch;
    flex-direction: column;
  }

  #my-work-page .my-work-strip,
  #my-work-page .my-work-form-row,
  #my-work-page .my-work-admin-filters,
  #my-work-page .my-work-recurring-slot {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Chat channel panels, circular avatars, and premium floating surfaces
   ========================================================================== */
.cp {
  --chat-floating-bg: color-mix(in srgb, var(--cp-gray-90) 92%, var(--cp-accent) 8%);
  --chat-floating-bg-2: color-mix(in srgb, var(--cp-gray-90) 84%, var(--cp-accent) 16%);
  --chat-floating-border: color-mix(in srgb, var(--content-inv) 14%, transparent);
  --chat-floating-muted: color-mix(in srgb, var(--content-inv) 70%, transparent);
  --chat-floating-field: color-mix(in srgb, var(--content-inv) 8%, transparent);
}

.cp :where(.worker-avatar, .settings-profile-avatar, .staff-edit-avatar, .chat-call-incoming-avatar) {
  aspect-ratio: 1;
  overflow: hidden;
}

.cp .worker-avatar {
  border-radius: var(--radius-md);
}

.cp :where(.settings-profile-avatar, .staff-edit-avatar) {
  border-radius: var(--radius-circle);
}

/* Chat user icons are rounded squares (like the chat itself), not circles. */
.cp .chat-call-incoming-avatar {
  border-radius: 18px;
}

.cp :where(.worker-avatar, .settings-profile-avatar, .staff-edit-avatar, .chat-call-incoming-avatar) img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.cp #settings-page .settings-profile-avatar {
  border-radius: var(--radius-circle);
}

#compupod-chat-page .my-work-chat-avatar,
#compupod-chat-page .my-work-chat-message-avatar,
#compupod-chat-page .my-work-chat-thread-reply-avatar,
#compupod-chat-page .my-work-chat-avatar.has-image img,
#compupod-chat-page .my-work-chat-message-avatar.has-image img,
#compupod-chat-page .my-work-chat-thread-reply-avatar.has-image img {
  border-radius: var(--radius-circle);
}

#compupod-chat-page .my-work-chat-avatar.is-department {
  overflow: hidden;
  border-radius: var(--radius-circle);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

#compupod-chat-page .my-work-chat-avatar.is-department .cp-icon {
  width: var(--space-5);
  height: var(--space-5);
}

#compupod-chat-page .my-work-chat-presence-dot.is-online {
  background: var(--cp-success);
  border-color: var(--surface);
}

#compupod-chat-page .my-work-chat-presence-dot.is-away {
  background: var(--surface);
  border: calc(var(--space-1) / 2) solid var(--content-3);
}

#compupod-chat-page .my-work-chat-contact-group-title {
  min-height: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-group-action {
  width: calc(var(--space-6) + var(--space-1));
  height: calc(var(--space-6) + var(--space-1));
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-group-action:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 28%, transparent);
  background: color-mix(in srgb, var(--cp-accent) 12%, transparent);
  color: var(--cp-accent);
}

.cp :where(.my-work-chat-modal:not(.hidden), .my-work-chat-search-modal:not(.hidden)) {
  background: color-mix(in srgb, var(--cp-gray-90) 76%, transparent);
}

.cp :where(.my-work-chat-menu, .my-work-chat-picker, .my-work-chat-reaction-popover):not(.hidden),
.cp :where(.my-work-chat-members-card, .my-work-chat-forward-card, .my-work-chat-search-modal section, .my-work-chat-channel-create-card, .account-avatar-crop-card) {
  border: 1px solid var(--chat-floating-border);
  background: var(--chat-floating-bg);
  color: var(--content-inv);
  box-shadow: var(--shadow-lg);
}

.cp :where(.my-work-chat-menu button, .my-work-chat-picker button, .my-work-chat-reaction-popover button),
.cp :where(.my-work-chat-members-card button, .my-work-chat-forward-card button, .my-work-chat-search-modal section button, .my-work-chat-channel-create-card button, .account-avatar-crop-card button) {
  color: inherit;
}

.cp :where(.my-work-chat-members-card input, .my-work-chat-members-card textarea, .my-work-chat-forward-card input, .my-work-chat-forward-card textarea, .my-work-chat-search-modal section input, .my-work-chat-channel-create-card input, .my-work-chat-channel-create-card textarea, .account-avatar-crop-card input) {
  color: var(--content-inv);
}

.my-work-chat-members-card {
  width: min(calc(var(--space-10) * 18), calc(100vw - var(--space-8)));
  max-height: min(720px, calc(100vh - var(--space-8)));
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--chat-floating-bg);
}

.my-work-chat-members-title strong,
.my-work-chat-members-card .my-work-chat-member-row strong {
  color: var(--content-inv);
}

.my-work-chat-members-title em,
.my-work-chat-members-card .my-work-chat-member-row em,
.my-work-chat-member-row > span:last-child {
  color: var(--chat-floating-muted);
}

.my-work-chat-members-card .my-work-chat-members-head .my-work-chat-modal-close,
.my-work-chat-members-card .my-work-chat-members-actions button,
.my-work-chat-members-card .my-work-chat-members-search,
.my-work-chat-members-tabs button,
.my-work-chat-members-admin label,
.my-work-chat-channel-create-card label,
.account-avatar-crop-card label {
  border: 1px solid var(--chat-floating-border);
  background: var(--chat-floating-field);
  color: var(--content-inv);
}

.my-work-chat-members-card .my-work-chat-members-actions button.is-active,
.my-work-chat-members-tabs button.is-active,
.my-work-chat-channel-create-visibility button.is-active,
.my-work-chat-channel-create-members button.is-active {
  border-color: color-mix(in srgb, var(--cp-accent) 72%, var(--content-inv) 12%);
  background: color-mix(in srgb, var(--cp-accent) 22%, transparent);
  color: var(--content-inv);
}

.my-work-chat-members-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.my-work-chat-members-tabs button {
  min-height: var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.my-work-chat-members-content {
  min-height: 0;
  overflow: hidden;
}

.my-work-chat-channel-about {
  display: grid;
  gap: var(--space-4);
  min-height: 0;
}

.my-work-chat-channel-about dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.my-work-chat-channel-about dl > div {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--chat-floating-border);
  border-radius: var(--radius-md);
  background: var(--chat-floating-field);
}

.my-work-chat-channel-about dt {
  color: var(--chat-floating-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.my-work-chat-channel-about dd {
  min-width: 0;
  margin: 0;
  color: var(--content-inv);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.my-work-chat-channel-about dd em {
  color: var(--chat-floating-muted);
  font-style: normal;
}

.my-work-chat-channel-leave {
  justify-self: start;
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 50%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-danger) 16%, transparent);
  color: var(--content-inv);
  font-weight: var(--weight-bold);
}

.my-work-chat-channel-leave:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.my-work-chat-members-card .my-work-chat-members-search,
.my-work-chat-members-admin label {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
}

.my-work-chat-members-card .my-work-chat-members-search input,
.my-work-chat-members-admin input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
}

.my-work-chat-members-list {
  max-height: min(calc(var(--space-10) * 9), 46vh);
  display: grid;
  gap: var(--space-1);
  overflow: auto;
}

.my-work-chat-member-row {
  min-height: calc(var(--space-10) + var(--space-3));
  display: grid;
  grid-template-columns: calc(var(--space-8) + var(--space-1)) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: transparent;
}

.my-work-chat-member-row:hover {
  background: color-mix(in srgb, var(--content-inv) 7%, transparent);
}

.my-work-chat-member-identity {
  min-width: 0;
}

.my-work-chat-member-role {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--chat-floating-border);
  border-radius: var(--radius-pill);
  color: var(--chat-floating-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.my-work-chat-member-remove {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--chat-floating-muted);
}

.my-work-chat-member-remove:hover {
  border-color: color-mix(in srgb, var(--cp-danger) 44%, transparent);
  background: color-mix(in srgb, var(--cp-danger) 16%, transparent);
  color: var(--content-inv);
}

.my-work-chat-members-admin {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--chat-floating-border);
}

.my-work-chat-members-add-results,
.my-work-chat-channel-create-members {
  display: grid;
  gap: var(--space-1);
  max-height: calc(var(--space-10) * 5);
  overflow: auto;
}

.my-work-chat-members-add-results button,
.my-work-chat-channel-create-members button {
  min-height: calc(var(--space-10) + var(--space-2));
  display: grid;
  grid-template-columns: calc(var(--space-8) + var(--space-1)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
}

.my-work-chat-members-add-results button:hover,
.my-work-chat-channel-create-members button:hover {
  border-color: var(--chat-floating-border);
  background: color-mix(in srgb, var(--content-inv) 7%, transparent);
}

.my-work-chat-members-add-results button span,
.my-work-chat-channel-create-members button span {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-members-add-results button strong,
.my-work-chat-channel-create-members button strong {
  overflow: hidden;
  color: var(--content-inv);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-members-add-results button em,
.my-work-chat-channel-create-members button em {
  overflow: hidden;
  color: var(--chat-floating-muted);
  font-size: var(--text-xs);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-channel-create-card,
.account-avatar-crop-card {
  position: relative;
  width: min(460px, calc(100vw - var(--space-8)));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
}

.my-work-chat-channel-create-card {
  width: min(560px, calc(100vw - var(--space-8)));
}

.my-work-chat-channel-create-card header,
.account-avatar-crop-card header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-right: var(--space-8);
}

.my-work-chat-channel-create-card header > span:last-child,
.account-avatar-crop-card header {
  min-width: 0;
}

.my-work-chat-channel-create-card header strong,
.account-avatar-crop-card header strong {
  display: block;
  color: var(--content-inv);
  font-size: var(--text-lg);
}

.my-work-chat-channel-create-card header em,
.account-avatar-crop-card header span {
  color: var(--chat-floating-muted);
  font-size: var(--text-sm);
  font-style: normal;
}

.my-work-chat-channel-create-icon {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.my-work-chat-channel-create-card form,
.account-avatar-crop-controls {
  display: grid;
  gap: var(--space-3);
}

.my-work-chat-channel-create-card label,
.account-avatar-crop-card label {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--chat-floating-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.my-work-chat-channel-create-card input,
.my-work-chat-channel-create-card textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--content-inv);
  font-size: var(--text-base);
  outline: none;
  resize: vertical;
  text-transform: none;
}

.my-work-chat-channel-create-visibility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.my-work-chat-channel-create-visibility button {
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--chat-floating-border);
  border-radius: var(--radius-md);
  background: var(--chat-floating-field);
  font-weight: var(--weight-bold);
}

.my-work-chat-channel-create-card footer,
.account-avatar-crop-card footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.my-work-chat-channel-create-card .my-work-chat-modal-close,
.account-avatar-crop-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--chat-floating-border);
  border-radius: var(--radius-circle);
  background: var(--chat-floating-field);
  color: var(--content-inv);
}

.account-avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--cp-gray-90) 76%, transparent);
}

.account-avatar-crop-modal.hidden {
  display: none;
}

.account-avatar-crop-preview {
  display: grid;
  place-items: center;
}

.account-avatar-crop-preview canvas {
  width: min(320px, 70vw);
  height: min(320px, 70vw);
  border-radius: calc(var(--radius-lg) + var(--space-4));
  background: var(--chat-floating-field);
  box-shadow: inset 0 0 0 1px var(--chat-floating-border);
}

.account-avatar-crop-controls input[type="range"] {
  width: 100%;
  accent-color: var(--cp-accent);
}

@media (max-width: 720px) {
  .my-work-chat-channel-about dl > div,
  .my-work-chat-member-row {
    grid-template-columns: 1fr;
  }

  .my-work-chat-member-role,
  .my-work-chat-member-remove {
    justify-self: start;
  }
}

/* ==========================================================================
   Chat P5: sidebar, favorites, threads, directory, and search
   ========================================================================== */
#compupod-chat-page .my-work-chat-contacts {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.compupod-chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.compupod-chat-sidebar-head > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compupod-chat-compose-btn {
  width: var(--space-8);
  min-width: var(--space-8);
  height: var(--space-8);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-circle);
  background: var(--surface-3);
  color: var(--content-1);
}

.compupod-chat-compose-btn:hover,
.compupod-chat-compose-btn:focus-visible {
  border-color: color-mix(in srgb, var(--cp-accent) 44%, var(--border-2));
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--surface-3));
  color: var(--cp-accent);
}

#compupod-chat-page .my-work-chat-contact-list {
  min-height: 0;
  height: 100%;
  align-content: start;
  padding-bottom: var(--space-8);
}

#compupod-chat-page .my-work-chat-contact-group {
  min-width: 0;
}

#compupod-chat-page .my-work-chat-contact-group-title > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-contact-group-title .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

#compupod-chat-page .my-work-chat-contact-empty-note {
  margin: 0 var(--space-2) var(--space-2);
  padding: var(--space-2);
  border: 1px dashed var(--border-1);
  border-radius: var(--radius-sm);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body);
}

#compupod-chat-page .my-work-chat-threads-view {
  gap: var(--space-3);
}

#compupod-chat-page .my-work-chat-thread-summary-card {
  width: min(calc(var(--space-10) * 21), 100%);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

#compupod-chat-page .my-work-chat-thread-summary-card:hover,
#compupod-chat-page .my-work-chat-thread-summary-card:focus-visible {
  border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--border-2));
  background: var(--surface-hover);
}

#compupod-chat-page .my-work-chat-thread-summary-origin {
  display: grid;
  grid-template-columns: var(--chat-avatar) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

#compupod-chat-page .my-work-chat-thread-summary-origin > span:last-child,
#compupod-chat-page .my-work-chat-thread-summary-parent,
#compupod-chat-page .my-work-chat-thread-summary-replies {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-thread-summary-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-thread-summary-card em,
#compupod-chat-page .my-work-chat-thread-summary-card span {
  min-width: 0;
}

#compupod-chat-page .my-work-chat-thread-summary-origin em,
#compupod-chat-page .my-work-chat-thread-summary-parent span,
#compupod-chat-page .my-work-chat-thread-summary-replies span,
#compupod-chat-page .my-work-chat-thread-summary-meta em {
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-thread-summary-replies {
  padding-left: calc(var(--chat-avatar) + var(--space-3));
}

#compupod-chat-page .my-work-chat-thread-summary-replies span {
  display: block;
}

#compupod-chat-page .my-work-chat-thread-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-left: calc(var(--chat-avatar) + var(--space-3));
}

#compupod-chat-page .my-work-chat-thread-summary-meta em {
  min-height: var(--space-6);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-thread-summary-skeleton {
  width: min(calc(var(--space-10) * 21), 100%);
  min-height: calc(var(--space-10) * 3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--content-1) 8%, transparent), transparent),
    var(--surface-2);
  background-size: 220% 100%, auto;
  animation: cp-shimmer var(--dur-slow) var(--ease-standard) infinite;
}

#compupod-chat-page .my-work-chat-directory-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

#compupod-chat-page .my-work-chat-directory-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-directory-stats span {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-directory-stats strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

#compupod-chat-page .my-work-chat-directory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-1);
}

#compupod-chat-page .my-work-chat-directory-tabs button {
  min-height: var(--space-9);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: calc(var(--space-1) / 2) solid transparent;
  background: transparent;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

#compupod-chat-page .my-work-chat-directory-tabs button.is-active {
  border-bottom-color: var(--cp-accent);
  color: var(--content-1);
}

#compupod-chat-page .my-work-chat-directory-tabs button span {
  min-width: var(--space-6);
  min-height: var(--space-5);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-xs);
}

#compupod-chat-page .my-work-chat-directory-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--space-10) * 7), 100%), 1fr));
  gap: var(--space-3);
}

#compupod-chat-page .my-work-chat-directory-card {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
}

#compupod-chat-page .my-work-chat-directory-card header {
  display: grid;
  grid-template-columns: var(--chat-avatar) minmax(0, 1fr) var(--space-8);
  align-items: center;
  gap: var(--space-3);
}

#compupod-chat-page .my-work-chat-directory-identity {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

#compupod-chat-page .my-work-chat-directory-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-directory-card em,
#compupod-chat-page .my-work-chat-directory-card p,
#compupod-chat-page .my-work-chat-directory-card dd,
#compupod-chat-page .my-work-chat-directory-card dt {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: var(--leading-body);
}

#compupod-chat-page .my-work-chat-directory-card p {
  min-height: calc(var(--space-10) + var(--space-1));
  margin: 0;
}

#compupod-chat-page .my-work-chat-directory-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

#compupod-chat-page .my-work-chat-directory-card dl > div {
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

#compupod-chat-page .my-work-chat-directory-card dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

#compupod-chat-page .my-work-chat-directory-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--content-1);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#compupod-chat-page .my-work-chat-directory-card footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

#compupod-chat-page .my-work-chat-directory-card footer button,
#compupod-chat-page .my-work-chat-directory-favorite {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

#compupod-chat-page .my-work-chat-directory-favorite {
  width: var(--space-8);
  padding: 0;
  border-radius: var(--radius-circle);
  color: var(--content-2);
}

#compupod-chat-page .my-work-chat-directory-card footer button {
  padding: 0 var(--space-3);
}

#compupod-chat-page .my-work-chat-directory-card footer button:hover,
#compupod-chat-page .my-work-chat-directory-favorite:hover,
#compupod-chat-page .my-work-chat-directory-favorite.is-active {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-2));
  background: color-mix(in srgb, var(--cp-accent) 14%, var(--surface));
  color: var(--cp-accent);
}

.my-work-chat-new-message-card,
.my-work-chat-search-card {
  width: min(calc(var(--space-10) * 20), calc(100vw - var(--space-8)));
  max-height: min(calc(var(--space-10) * 18), calc(100dvh - var(--space-8)));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--chat-floating-border);
  border-radius: var(--radius-lg);
  background: var(--chat-floating-bg);
  color: var(--content-inv);
  box-shadow: var(--shadow-lg);
}

.my-work-chat-search-card {
  width: min(calc(var(--space-10) * 28), calc(100vw - var(--space-8)));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.my-work-chat-search-modal .my-work-chat-search-card {
  width: min(calc(var(--space-10) * 28), calc(100vw - var(--space-8)));
  max-height: min(calc(var(--space-10) * 18), calc(100dvh - var(--space-8)));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.my-work-chat-new-message-card header,
.my-work-chat-search-card header {
  min-height: calc(var(--space-10) + var(--space-4));
  display: grid;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--chat-floating-border);
  background: transparent;
}

.my-work-chat-new-message-card header {
  grid-template-columns: minmax(0, 1fr) var(--space-8);
}

.my-work-chat-search-card header {
  grid-template-columns: var(--space-8) minmax(0, 1fr) auto var(--space-8);
}

.my-work-chat-new-message-card header > span,
.my-work-chat-search-input-wrap {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-new-message-card header strong,
.my-work-chat-search-card header strong {
  color: var(--content-inv);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.my-work-chat-new-message-card header em,
.my-work-chat-search-card footer,
.my-work-chat-search-suggestion {
  color: var(--chat-floating-muted);
  font-size: var(--text-sm);
  font-style: normal;
}

.my-work-chat-new-message-search,
.my-work-chat-search-input-wrap {
  min-height: calc(var(--space-10) + var(--space-1));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4);
  padding: 0 var(--space-3);
  border: 1px solid var(--chat-floating-border);
  border-radius: var(--radius-md);
  background: var(--chat-floating-field);
}

.my-work-chat-search-input-wrap {
  margin: 0;
}

.my-work-chat-new-message-search input,
.my-work-chat-search-input-wrap input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent !important;
  color: var(--content-inv);
  font-size: var(--text-base);
  outline: none;
  box-shadow: none !important;
}

.my-work-chat-search-scope {
  min-height: var(--space-7);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 45%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent) 18%, transparent);
  color: var(--content-inv);
  font-size: var(--text-xs);
}

.my-work-chat-search-scope strong {
  font-size: var(--text-xs);
}

.my-work-chat-search-card header > button,
.my-work-chat-new-message-card .my-work-chat-modal-close {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chat-floating-border);
  border-radius: var(--radius-sm);
  background: var(--chat-floating-field);
  color: var(--content-inv);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.my-work-chat-search-card header > button:not([aria-label]) {
  padding: 0 var(--space-3);
}

.my-work-chat-search-card header > button[aria-label],
.my-work-chat-new-message-card .my-work-chat-modal-close {
  width: var(--space-8);
  padding: 0;
  border-radius: var(--radius-circle);
}

.my-work-chat-search-suggestion {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--chat-floating-border);
}

.my-work-chat-search-suggestion strong {
  color: var(--content-inv);
}

.my-work-chat-search-modal-results,
.my-work-chat-new-message-results {
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
}

.my-work-chat-new-message-results {
  display: grid;
  gap: var(--space-3);
}

.my-work-chat-new-message-results section {
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-new-message-results section > strong,
.my-work-chat-search-results-group > strong {
  padding: 0 var(--space-2);
  color: var(--chat-floating-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

.my-work-chat-new-message-results button,
.my-work-chat-search-hit {
  width: 100%;
  min-height: calc(var(--space-10) + var(--space-3));
  display: grid;
  grid-template-columns: calc(var(--space-8) + var(--space-1)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-inv);
  text-align: left;
}

.my-work-chat-search-hit {
  grid-template-columns: calc(var(--space-8) + var(--space-1)) minmax(0, 1fr);
}

.my-work-chat-search-modal-results .my-work-chat-search-hit {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-inv);
}

.my-work-chat-new-message-results button:hover,
.my-work-chat-new-message-results button:focus-visible,
.my-work-chat-search-hit:hover,
.my-work-chat-search-hit:focus-visible {
  border-color: var(--chat-floating-border);
  background: color-mix(in srgb, var(--content-inv) 8%, transparent);
}

.my-work-chat-new-message-identity,
.my-work-chat-search-hit > span:last-child {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-new-message-results strong,
.my-work-chat-search-hit strong {
  min-width: 0;
  overflow: hidden;
  color: var(--content-inv);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-new-message-results em,
.my-work-chat-search-hit em,
.my-work-chat-search-hit span span {
  min-width: 0;
  overflow: hidden;
  color: var(--chat-floating-muted);
  font-size: var(--text-sm);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-search-hit-icon,
.my-work-chat-search-lens,
.my-work-chat-search-empty > span,
.my-work-chat-search-state .cp-icon {
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 18%, transparent);
  color: var(--cp-accent);
}

.my-work-chat-search-empty,
.my-work-chat-search-state {
  min-height: calc(var(--space-10) * 5);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  color: var(--chat-floating-muted);
  text-align: center;
}

.my-work-chat-search-empty strong,
.my-work-chat-search-state strong {
  color: var(--content-inv);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.my-work-chat-search-empty em {
  max-width: calc(var(--space-10) * 12);
  color: var(--chat-floating-muted);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: var(--leading-body);
}

.my-work-chat-search-card footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--chat-floating-border);
}

@media (max-width: 760px) {
  #compupod-chat-page .my-work-chat-directory-hero,
  #compupod-chat-page .my-work-chat-directory-card dl {
    grid-template-columns: 1fr;
  }

  #compupod-chat-page .my-work-chat-directory-stats {
    justify-content: flex-start;
  }

  #compupod-chat-page .my-work-chat-thread-summary-replies,
  #compupod-chat-page .my-work-chat-thread-summary-meta {
    padding-left: 0;
  }

  .my-work-chat-search-card header {
    grid-template-columns: var(--space-8) minmax(0, 1fr) var(--space-8);
  }

  .my-work-chat-search-card header > button:not([aria-label]) {
    display: none;
  }
}

/* Chat calls: Slack-style call window — participant tiles, screen-share
   stage with thumbnail rail, active-speaker ring, timer, PiP self view. */
.chat-call-dock {
  --chat-call-bg: color-mix(in srgb, var(--cp-gray-90) 94%, var(--cp-accent) 6%);
  --chat-call-bg-2: color-mix(in srgb, var(--cp-gray-90) 86%, var(--cp-accent) 14%);
  --chat-call-field: color-mix(in srgb, var(--content-inv) 8%, transparent);
  --chat-call-border: color-mix(in srgb, var(--content-inv) 14%, transparent);
  --chat-call-tile: color-mix(in srgb, var(--cp-gray-90) 82%, var(--cp-accent) 12%);
  --chat-call-letterbox: color-mix(in srgb, var(--cp-gray-90) 55%, black);
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 2);
  width: auto;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.chat-call-dock.hidden {
  display: none;
}

.chat-call-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cp-gray-90) 78%, transparent);
  backdrop-filter: blur(calc(var(--space-1) * 2));
}

.chat-call-shell {
  position: relative;
  z-index: 1;
  width: calc(100vw - var(--space-8));
  height: calc(100vh - var(--space-8));
  display: grid;
  /* head, media, audio hint (only while shown), controls */
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-lg);
  background: var(--chat-call-bg);
  color: var(--content-inv);
  box-shadow: var(--shadow-lg);
}

/* ---- Header ---- */

.chat-call-dock-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--chat-call-border);
  background: color-mix(in srgb, var(--content-inv) 4%, transparent);
}

.chat-call-head-info {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}

.chat-call-head-info span {
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chat-call-head-info strong {
  overflow: hidden;
  color: var(--content-inv);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-call-head-info em {
  overflow: hidden;
  color: color-mix(in srgb, var(--content-inv) 66%, transparent);
  font-size: var(--text-sm);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ringing: the "Llamando…" status softly pulses so it reads as in-progress,
   not connected. Paired with the outgoing tone from the sounds module. */
.chat-call-dock.is-ringing .chat-call-head-info em {
  color: var(--cp-accent);
  animation: chat-call-ringing 1.4s ease-in-out infinite;
}

@keyframes chat-call-ringing {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.chat-call-head-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chat-call-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-pill);
  background: var(--chat-call-field);
  color: color-mix(in srgb, var(--content-inv) 88%, transparent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.chat-call-timer.hidden {
  display: none;
}

.chat-call-timer::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--cp-danger);
  animation: chat-call-timer-pulse 2s ease-in-out infinite;
}

@keyframes chat-call-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.chat-call-participants {
  display: flex;
  align-items: center;
}

.chat-call-participant {
  display: inline-grid;
  border-radius: var(--radius-circle);
}

.chat-call-participant + .chat-call-participant {
  margin-left: calc(var(--space-2) * -1);
}

.chat-call-participant .my-work-chat-avatar,
.chat-call-participant .my-work-chat-avatar-presence {
  width: calc(var(--space-6) + var(--space-1));
  height: calc(var(--space-6) + var(--space-1));
  flex-basis: calc(var(--space-6) + var(--space-1));
  box-shadow: 0 0 0 2px var(--chat-call-bg);
}

.chat-call-icon-btn {
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-circle);
  background: var(--chat-call-field);
  color: var(--content-inv);
}

.chat-call-icon-btn:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 64%, transparent);
  background: color-mix(in srgb, var(--cp-accent) 18%, transparent);
  color: var(--content-inv);
}

/* ---- Stage ---- */

.chat-call-media {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

/* Stage mode: one tile (pinned camera or screen share) owns the main area,
   the rest collapse into a scrollable side rail. */
.chat-call-media.is-stage {
  grid-template-columns: minmax(0, 1fr) clamp(calc(var(--space-10) * 3), 18%, calc(var(--space-10) * 5));
}

.chat-call-media.is-stage.is-rail-empty {
  grid-template-columns: minmax(0, 1fr);
}

.chat-call-media.is-stage.is-rail-empty .chat-call-grid {
  display: none;
}

.chat-call-audio-sink {
  display: none;
}

.chat-call-stage-main {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.chat-call-stage-main.hidden {
  display: none;
}

.chat-call-stage-main .chat-call-tile {
  position: absolute;
  inset: 0;
}

/* ---- Participant grid ---- */

.chat-call-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-10) * 5)), 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.chat-call-media.has-1 .chat-call-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Stage rail: remaining tiles stack vertically and scroll. */
.chat-call-media.is-stage .chat-call-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding-right: var(--space-1);
}

.chat-call-media.is-stage .chat-call-grid .chat-call-tile {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.chat-call-stage-main .chat-call-tile {
  width: auto;
  aspect-ratio: auto;
}

/* 1:1 call: the main tile fills the stage, the single remaining tile floats
   as a PiP card (works for either direction of the swap). */
.chat-call-media.is-duo {
  grid-template-columns: minmax(0, 1fr);
}

.chat-call-media.is-duo .chat-call-grid {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: 2;
  display: block;
  width: clamp(calc(var(--space-10) * 3), 20%, calc(var(--space-10) * 5));
  overflow: visible;
  padding-right: 0;
}

.chat-call-media.is-duo .chat-call-grid .chat-call-tile {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-color: color-mix(in srgb, var(--content-inv) 22%, transparent);
  box-shadow: var(--shadow-lg);
}

/* ---- Tiles ---- */

.chat-call-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--content-inv) 6%, transparent), transparent 60%),
    var(--chat-call-tile);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
  cursor: pointer;
}

.chat-call-tile:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--content-inv) 24%, transparent);
}

.chat-call-tile.is-speaking {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--cp-accent) 85%, white 15%),
    0 0 var(--space-4) color-mix(in srgb, var(--cp-accent) 40%, transparent);
}

.chat-call-tile-media {
  position: absolute;
  inset: 0;
}

.chat-call-tile-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Self view is mirrored, like every mainstream call app. */
.chat-call-tile.is-local .chat-call-tile-media video {
  transform: scaleX(-1);
}

/* Portrait feeds (phone cameras) letterbox instead of cropping faces. */
.chat-call-tile.is-portrait .chat-call-tile-media video {
  object-fit: contain;
  background: var(--chat-call-letterbox);
}

.chat-call-tile-avatar {
  position: relative;
  z-index: 1;
  width: clamp(var(--space-10), 32%, calc(var(--space-10) * 2));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-circle);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cp-accent) 66%, white 12%),
    color-mix(in srgb, var(--cp-accent) 42%, var(--cp-gray-90) 58%));
  color: var(--content-inv);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.chat-call-tile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-call-tile.has-video .chat-call-tile-avatar {
  display: none;
}

.chat-call-tile.is-waiting .chat-call-tile-avatar {
  animation: chat-call-waiting 2.2s ease-out infinite;
}

@keyframes chat-call-waiting {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cp-accent) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 var(--space-4) transparent; }
}

.chat-call-tile-name {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  max-width: calc(100% - var(--space-6));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, black 55%, transparent);
  backdrop-filter: blur(var(--space-1));
  color: var(--content-inv);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.chat-call-tile-name em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-call-tile-mic {
  display: none;
  color: color-mix(in srgb, var(--cp-danger) 78%, white 22%);
}

.chat-call-tile-mic .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

.chat-call-tile.is-muted .chat-call-tile-mic {
  display: inline-grid;
  place-items: center;
}

/* ---- Screen-share tiles ---- */

.chat-call-tile.is-screen {
  background: var(--chat-call-letterbox);
}

.chat-call-tile.is-screen .chat-call-tile-media video {
  object-fit: contain;
}

.chat-call-tile-screen-mark {
  display: inline-grid;
  place-items: center;
  color: var(--cp-accent);
}

.chat-call-tile-screen-mark .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
}

.chat-call-tile-expand {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--content-inv) 18%, transparent);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, black 55%, transparent);
  color: var(--content-inv);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.chat-call-tile:hover .chat-call-tile-expand,
.chat-call-tile-expand:focus-visible {
  opacity: 1;
}

.chat-call-tile-expand:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 64%, transparent);
  background: color-mix(in srgb, var(--cp-accent) 30%, black 40%);
}

.chat-call-tile:fullscreen {
  border: 0;
  border-radius: 0;
  background: black;
  cursor: default;
}

.chat-call-tile:fullscreen .chat-call-tile-media video {
  object-fit: contain;
}

/* ---- Invite popover ---- */

.chat-call-invite-wrap {
  position: relative;
}

.chat-call-invite-pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 5;
  width: min(calc(var(--space-10) * 8), calc(100vw - var(--space-8)));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-lg);
  background: var(--chat-call-bg-2);
  box-shadow: var(--shadow-lg);
}

.chat-call-invite-pop.hidden {
  display: none;
}

.chat-call-invite-pop header {
  color: var(--content-inv);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.chat-call-invite-pop input[type="search"] {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-md);
  background: var(--chat-call-field);
  color: var(--content-inv);
  font-size: var(--text-sm);
}

.chat-call-invite-list {
  max-height: calc(var(--space-10) * 5);
  display: grid;
  gap: var(--space-1);
  overflow-y: auto;
}

.chat-call-invite-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--content-inv);
  cursor: pointer;
}

.chat-call-invite-row input[type="checkbox"] {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--cp-accent);
}

.chat-call-invite-row:hover {
  background: color-mix(in srgb, var(--content-inv) 10%, transparent);
}

.chat-call-invite-row .my-work-chat-avatar,
.chat-call-invite-row .my-work-chat-avatar-presence {
  width: calc(var(--space-6) + var(--space-1));
  height: calc(var(--space-6) + var(--space-1));
  flex-basis: calc(var(--space-6) + var(--space-1));
}

.chat-call-invite-row em {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-call-invite-empty {
  padding: var(--space-2);
  color: color-mix(in srgb, var(--content-inv) 62%, transparent);
  font-size: var(--text-sm);
}

.chat-call-invite-pop footer {
  display: flex;
  justify-content: flex-end;
}

/* ---- Audio devices popover + "nobody can hear" hint ---- */

.chat-call-audio-wrap {
  position: relative;
  display: inline-flex;
}

.chat-call-audio-pop {
  position: absolute;
  bottom: calc(100% + var(--space-3));
  left: 50%;
  z-index: 5;
  width: min(calc(var(--space-10) * 8), calc(100vw - var(--space-8)));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-lg);
  background: var(--chat-call-bg-2);
  box-shadow: var(--shadow-lg);
  color: var(--content-inv);
  text-align: left;
  transform: translateX(-50%);
}

.chat-call-audio-pop.hidden,
.chat-call-audio-speaker.hidden,
.chat-call-audio-help.hidden,
.chat-call-audio-hint.hidden {
  display: none;
}

.chat-call-audio-pop header {
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

/* The id keeps the app-wide light-form label/select colors off this dark panel. */
#chat-call-audio-pop .chat-call-audio-field {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#chat-call-audio-pop .chat-call-audio-field span {
  color: color-mix(in srgb, var(--content-inv) 78%, transparent);
}

#chat-call-audio-pop .chat-call-audio-field select {
  width: 100%;
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: 1px solid var(--chat-call-border);
  border-radius: var(--radius-md);
  background: var(--chat-call-field);
  color: var(--content-inv);
  font-size: var(--text-sm);
}

#chat-call-audio-pop .chat-call-audio-field select option {
  background: var(--cp-gray-90);
  color: var(--content-inv);
}

.chat-call-audio-meter {
  --chat-call-mic-level: 0%;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-circle);
  background: var(--chat-call-field);
}

.chat-call-audio-meter span {
  display: block;
  width: var(--chat-call-mic-level);
  height: 100%;
  border-radius: inherit;
  background: var(--cp-accent);
  transition: width var(--dur-fast) linear;
}

.chat-call-audio-help {
  margin: 0;
  color: color-mix(in srgb, var(--content-inv) 66%, transparent);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.chat-call-audio-speaker {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--chat-call-border);
}

.chat-call-audio-speaker .btn {
  justify-self: start;
}

.chat-call-audio-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-5) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 55%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 18%, var(--cp-gray-90));
  color: var(--content-inv);
  font-size: var(--text-sm);
}

.chat-call-audio-hint > .cp-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  color: var(--cp-warning);
}

.chat-call-audio-hint p {
  /* Wide enough that the action wraps below instead of squeezing the text. */
  flex: 1 1 calc(var(--space-10) * 4);
  min-width: 0;
  margin: 0;
  line-height: 1.35;
}

.chat-call-audio-hint-action {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--content-inv) 30%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--content-inv) 12%, transparent);
  color: var(--content-inv);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.chat-call-audio-hint-dismiss {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: color-mix(in srgb, var(--content-inv) 70%, transparent);
  cursor: pointer;
}

.chat-call-audio-hint-dismiss .cp-icon {
  width: var(--space-3);
  height: var(--space-3);
}

.chat-call-dock.is-minimized .chat-call-audio-hint {
  margin: 0 var(--space-3) var(--space-3);
}

.chat-call-dock.is-minimized .chat-call-audio-wrap {
  display: none;
}

/* ---- Control bar ---- */

.chat-call-controls {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--chat-call-border);
  background: color-mix(in srgb, black 26%, transparent);
}

.chat-call-control {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--content-inv) 78%, transparent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.chat-call-control-icon {
  width: calc(var(--space-10) + var(--space-2));
  height: calc(var(--space-10) + var(--space-2));
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--content-inv) 22%, transparent);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--content-inv) 15%, transparent);
  color: var(--content-inv);
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.chat-call-control-icon .cp-icon {
  width: var(--space-5);
  height: var(--space-5);
}

.chat-call-control:hover .chat-call-control-icon {
  border-color: color-mix(in srgb, var(--content-inv) 30%, transparent);
  background: color-mix(in srgb, var(--content-inv) 14%, transparent);
  transform: translateY(-1px);
}

.chat-call-control:focus-visible {
  outline: none;
}

.chat-call-control:focus-visible .chat-call-control-icon {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

/* Mic/camera icons swap to their slashed variant when off. */
.chat-call-control .cp-icon-microphone-off,
.chat-call-control .cp-icon-video-off {
  display: none;
}

.chat-call-control.is-off .cp-icon-microphone,
.chat-call-control.is-off .cp-icon-video {
  display: none;
}

.chat-call-control.is-off .cp-icon-microphone-off,
.chat-call-control.is-off .cp-icon-video-off {
  display: inline-block;
}

.chat-call-control.is-off .chat-call-control-icon {
  border-color: color-mix(in srgb, var(--cp-danger) 68%, transparent);
  background: color-mix(in srgb, var(--cp-danger) 26%, transparent);
  color: color-mix(in srgb, var(--cp-danger) 34%, var(--content-inv) 66%);
}

.chat-call-control.is-active .chat-call-control-icon {
  border-color: color-mix(in srgb, var(--cp-accent) 72%, transparent);
  background: color-mix(in srgb, var(--cp-accent) 30%, transparent);
}

.chat-call-control:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.chat-call-control.is-danger .chat-call-control-icon {
  border-color: transparent;
  background: var(--cp-danger);
}

.chat-call-control.is-danger:hover .chat-call-control-icon {
  background: color-mix(in srgb, var(--cp-danger) 84%, black);
}

.chat-call-control.is-danger .cp-icon-phone-hangup {
  transform: rotate(135deg);
}

/* ---- Minimized dock ---- */

.chat-call-dock.is-minimized {
  inset: auto var(--space-5) var(--space-5) auto;
  width: min(calc(var(--space-10) * 8), calc(100vw - var(--space-6)));
  padding: 0;
  place-items: stretch;
}

.chat-call-dock.is-minimized .chat-call-backdrop,
.chat-call-dock.is-minimized .chat-call-media,
.chat-call-dock.is-minimized .chat-call-participants,
.chat-call-dock.is-minimized .chat-call-invite-wrap,
.chat-call-dock.is-minimized .chat-call-head-info span,
.chat-call-dock.is-minimized .chat-call-head-info em,
.chat-call-dock.is-minimized [data-call-control-label] {
  display: none;
}

.chat-call-dock.is-minimized .chat-call-shell {
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: var(--radius-lg);
}

.chat-call-dock.is-minimized .chat-call-dock-head {
  padding: var(--space-3);
  border-bottom: 0;
}

.chat-call-dock.is-minimized .chat-call-head-info strong {
  font-size: var(--text-base);
}

.chat-call-dock.is-minimized .chat-call-controls {
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
  border-top: 0;
  background: transparent;
}

.chat-call-dock.is-minimized #chat-call-screen,
.chat-call-dock.is-minimized #chat-call-camera {
  display: none;
}

.chat-call-dock.is-minimized .chat-call-control-icon {
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
}

/* Channel call invite modal */
.my-work-chat-channel-call-card {
  width: min(calc(var(--space-10) * 15), calc(100vw - var(--space-8)));
  max-height: min(calc(var(--space-10) * 18), calc(100vh - var(--space-8)));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--content-inv) 14%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-gray-90) 92%, var(--cp-accent) 8%);
  color: var(--content-inv);
  box-shadow: var(--shadow-lg);
}

.my-work-chat-channel-call-card header,
.my-work-chat-channel-call-card footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.my-work-chat-channel-call-card header {
  border-bottom: 1px solid color-mix(in srgb, var(--content-inv) 14%, transparent);
}

.my-work-chat-channel-call-card footer {
  justify-content: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--content-inv) 14%, transparent);
}

.my-work-chat-channel-call-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.my-work-chat-channel-call-icon {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 20%, transparent);
  color: var(--cp-accent);
}

.my-work-chat-channel-call-title span:last-child {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-channel-call-title strong {
  overflow: hidden;
  color: var(--content-inv);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-channel-call-title em,
.my-work-chat-channel-call-count {
  color: color-mix(in srgb, var(--content-inv) 70%, transparent);
  font-size: var(--text-sm);
  font-style: normal;
}

.my-work-chat-channel-call-card .my-work-chat-modal-close {
  position: static;
  margin-left: auto;
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--content-inv) 14%, transparent);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--content-inv) 8%, transparent);
  color: var(--content-inv);
  font-size: 0;
}

.my-work-chat-channel-call-types,
.my-work-chat-channel-call-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
}

.my-work-chat-channel-call-types button,
.my-work-chat-channel-call-toolbar button {
  min-height: calc(var(--space-8) + var(--space-1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--content-inv) 14%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--content-inv) 8%, transparent);
  color: var(--content-inv);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.my-work-chat-channel-call-types button {
  padding: 0 var(--space-4);
}

.my-work-chat-channel-call-types button.is-active {
  border-color: color-mix(in srgb, var(--cp-accent) 72%, var(--content-inv) 12%);
  background: color-mix(in srgb, var(--cp-accent) 22%, transparent);
}

.my-work-chat-channel-call-toolbar {
  align-items: stretch;
  justify-content: space-between;
  padding-bottom: var(--space-3);
}

.my-work-chat-channel-call-toolbar label {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  border: 1px solid color-mix(in srgb, var(--content-inv) 14%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--content-inv) 8%, transparent);
  color: var(--content-inv);
}

.my-work-chat-channel-call-toolbar label input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--content-inv);
  box-shadow: none;
}

.my-work-chat-channel-call-toolbar > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.my-work-chat-channel-call-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-3);
}

.my-work-chat-channel-call-member {
  display: grid;
  grid-template-columns: var(--space-5) calc(var(--space-8) + var(--space-1)) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--space-10) + var(--space-4));
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--content-inv);
}

.my-work-chat-channel-call-member:hover,
.my-work-chat-channel-call-member.is-selected {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, transparent);
  background: color-mix(in srgb, var(--cp-accent) 14%, transparent);
}

.my-work-chat-channel-call-member input {
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  accent-color: var(--cp-accent);
}

.my-work-chat-channel-call-member .my-work-chat-avatar-presence,
.my-work-chat-channel-call-member .my-work-chat-avatar {
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  flex-basis: calc(var(--space-8) + var(--space-1));
  font-size: var(--text-xs);
}

.my-work-chat-channel-call-member .my-work-chat-channel-call-member-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.my-work-chat-channel-call-member strong {
  overflow: hidden;
  color: var(--content-inv);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-channel-call-member em {
  overflow: hidden;
  color: color-mix(in srgb, var(--content-inv) 68%, transparent);
  font-size: var(--text-xs);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-work-chat-channel-call-count {
  margin-right: auto;
}

@media (max-width: 760px) {
  .chat-call-dock {
    padding: var(--space-3);
  }

  .chat-call-shell {
    width: 100%;
    height: calc(100vh - var(--space-6));
  }

  .chat-call-media {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  /* Stage mode on small screens: filmstrip of tiles below the content. */
  .chat-call-media.is-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .chat-call-media.is-stage .chat-call-grid {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: var(--space-1);
  }

  .chat-call-media.is-stage .chat-call-grid .chat-call-tile {
    width: clamp(calc(var(--space-10) * 3), 38vw, calc(var(--space-10) * 4));
  }

  .chat-call-media.is-duo .chat-call-grid {
    right: var(--space-4);
    bottom: var(--space-4);
    width: clamp(calc(var(--space-10) * 2), 34%, calc(var(--space-10) * 4));
  }

  .chat-call-participants {
    display: none;
  }

  .chat-call-controls {
    gap: var(--space-4);
  }

  /* Anchor the audio panel to the dock instead of the button so it never
     runs off the left edge of a phone screen. */
  .chat-call-audio-wrap {
    position: static;
  }

  .chat-call-audio-pop {
    right: var(--space-4);
    bottom: calc(var(--space-10) * 3);
    left: var(--space-4);
    width: auto;
    transform: none;
  }

  .chat-call-audio-hint {
    margin: 0 var(--space-3) var(--space-3);
  }

  .chat-call-dock.is-minimized {
    right: var(--space-3);
    bottom: var(--space-3);
    width: calc(100vw - var(--space-6));
  }

  .my-work-chat-channel-call-card {
    width: calc(100vw - var(--space-6));
  }

  .my-work-chat-channel-call-toolbar,
  .my-work-chat-channel-call-card footer {
    flex-wrap: wrap;
  }

  .my-work-chat-channel-call-count {
    width: 100%;
  }
}

/* Sequential field gating (ticket create): a field that is locked until the
   previous one is filled must read as clearly inactive — greyed out — not just
   quietly non-interactive. The gate sets data-field-gate-locked="1" on both the
   field container and its controls (see _setTicketCreateFieldGateNodeLocked). */
[data-field-gate-locked="1"] {
  opacity: 0.5;
}
/* Avoid compounding opacity when a locked control sits inside a locked container. */
[data-field-gate-locked="1"] [data-field-gate-locked="1"] {
  opacity: 1;
}
input[data-field-gate-locked="1"],
select[data-field-gate-locked="1"],
textarea[data-field-gate-locked="1"],
button[data-field-gate-locked="1"] {
  background-color: var(--surface-2);
  color: var(--content-3);
  cursor: not-allowed;
}

/* Global form affordance: empty fields should read as empty at a glance. */
.cp :where(
  input[placeholder]:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]),
  textarea[placeholder],
  select
)::placeholder {
  color: var(--content-placeholder);
  opacity: 1;
}

.cp :where(
  input[placeholder]:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]),
  textarea[placeholder]
):not(:disabled):not([data-field-gate-locked="1"]):placeholder-shown {
  border-color: var(--field-empty-border);
  background-color: var(--field-empty-surface);
}

.cp :where(
  input[placeholder]:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]),
  textarea[placeholder]
):not(:disabled):not([data-field-gate-locked="1"]):not(:placeholder-shown) {
  border-color: var(--field-filled-border);
  background-color: var(--field-filled-surface);
  color: var(--content-1);
}

.cp :where(
  input[placeholder]:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]),
  textarea[placeholder]
):not(:disabled):not([data-field-gate-locked="1"]):placeholder-shown:focus {
  background-color: var(--field-empty-surface);
}

.cp select option {
  background: var(--surface);
  color: var(--content-1);
}

.cp select:not(:disabled):not([data-field-gate-locked="1"]):required:invalid {
  border-color: var(--field-empty-border);
  background-color: var(--field-empty-surface);
  color: var(--content-placeholder);
}

@supports selector(select:has(option:checked)) {
  .cp select:not(:disabled):not([data-field-gate-locked="1"]):has(option[value=""]:checked) {
    border-color: var(--field-empty-border);
    background-color: var(--field-empty-surface);
    color: var(--content-placeholder);
  }

  .cp select:not(:disabled):not([data-field-gate-locked="1"]):not(:has(option[value=""]:checked)) {
    border-color: var(--field-filled-border);
    background-color: var(--field-filled-surface);
    color: var(--content-1);
  }
}

.cp :where(
  #compupod-chat-page,
  .account-avatar-crop-card,
  .chat-call-shell,
  .my-work-chat-channel-create-card,
  .my-work-chat-forward-card,
  .my-work-chat-link-card,
  .my-work-chat-members-card,
  .my-work-chat-menu,
  .my-work-chat-modal,
  .my-work-chat-picker,
  .my-work-chat-reaction-popover,
  .my-work-chat-search-modal
) {
  --content-placeholder: var(--content-placeholder-inv);
  --field-empty-surface: color-mix(in srgb, var(--content-inv) 9%, transparent);
  --field-empty-border: color-mix(in srgb, var(--cp-accent) 34%, transparent);
  --field-filled-surface: color-mix(in srgb, var(--content-inv) 6%, transparent);
  --field-filled-border: color-mix(in srgb, var(--content-inv) 16%, transparent);
}

/* =====================================================================
   Trade-In Evaluation Record + M360 Diagnostics (app-tradeins.js panel)
   Redesigned for a clear, guided inspection flow.
   ===================================================================== */
#trade-in-record-panel .ti-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 16px);
  align-items: start;
  margin-top: var(--space-4, 16px);
}
#trade-in-record-panel .ti-panel-grid .ti-card { margin-top: 0; }
@media (max-width: 1024px) {
  #trade-in-record-panel .ti-panel-grid { grid-template-columns: 1fr; }
}
#trade-in-record-panel .ti-card {
  margin-top: var(--space-4, 16px);
  padding: var(--space-5, 20px);
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface, #fff);
  color: var(--content-1, #0f172a);
}
#trade-in-record-panel .ti-evaluation-record {
  padding: var(--space-6, 24px);
  box-shadow: var(--shadow-sm);
}
#trade-in-record-panel .ti-card + .ti-card { margin-top: var(--space-4, 16px); }
#trade-in-record-panel .ti-panel-grid .ti-card + .ti-card { margin-top: 0; }
#trade-in-record-panel .ti-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-2, 8px);
}
#trade-in-record-panel .ti-card-head h3 {
  margin: 0;
  font-size: var(--text-lg, 17px);
  font-weight: var(--weight-bold, 700);
}
#trade-in-record-panel .ti-evaluation-record .ti-card-head {
  align-items: flex-start;
  margin-bottom: var(--space-5, 20px);
}
#trade-in-record-panel .ti-card-title {
  min-width: 0;
}
#trade-in-record-panel .ti-card-title h3 {
  font-size: var(--text-xl, 22px);
  line-height: var(--leading-tight, 1.25);
}
#trade-in-record-panel .ti-card-title p {
  margin: var(--space-1, 4px) 0 0;
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-record-panel .ti-card-intro {
  margin: 0 0 var(--space-4, 16px);
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: 1.45;
}
#trade-in-record-panel .ti-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 700);
  white-space: nowrap;
}
#trade-in-record-panel .ti-pill .ti-icon {
  width: 14px;
  height: 14px;
}
#trade-in-record-panel .ti-pill--pending {
  color: color-mix(in srgb, var(--cp-warning, #d97706) 82%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-warning, #d97706) 14%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--cp-warning, #d97706) 24%, var(--border-1, #e6e9ec));
}
#trade-in-record-panel .ti-pill--approved {
  color: color-mix(in srgb, var(--cp-accent, #0797ca) 78%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 12%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 24%, var(--border-1, #e6e9ec));
}
#trade-in-record-panel .ti-pill--paid {
  color: color-mix(in srgb, var(--cp-success, #16a34a) 78%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-success, #16a34a) 12%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--cp-success, #16a34a) 24%, var(--border-1, #e6e9ec));
}
#trade-in-record-panel .ti-pill--recycled {
  color: color-mix(in srgb, var(--cp-success, #16a34a) 78%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-success, #16a34a) 12%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--cp-success, #16a34a) 24%, var(--border-1, #e6e9ec));
}
#trade-in-record-panel .ti-pill--converted {
  color: color-mix(in srgb, #7c3aed 76%, var(--content-1, #111827));
  background: color-mix(in srgb, #7c3aed 11%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, #7c3aed 22%, var(--border-1, #e6e9ec));
}
#trade-in-record-panel .ti-pill--rejected {
  color: color-mix(in srgb, var(--cp-danger, #dc2626) 78%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-danger, #dc2626) 10%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--cp-danger, #dc2626) 22%, var(--border-1, #e6e9ec));
}
#trade-in-record-panel .ti-pill--default {
  color: var(--content-2, #4b5563);
  background: var(--surface-3, #f1f3f5);
  border: 1px solid var(--border-1, #e6e9ec);
}
#trade-in-record-panel .ti-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
#trade-in-record-panel .ti-device-panel {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5, 20px);
  margin-bottom: var(--space-5, 20px);
  padding: var(--space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 18%, var(--border-1, #e6e9ec));
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--cp-accent-soft, #e6f4fa) 62%, var(--surface, #fff));
}
#trade-in-record-panel .ti-device-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 96px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 16%, var(--border-1, #e6e9ec));
  border-radius: var(--radius-lg, 12px);
  color: var(--content-3, #6b7280);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm);
}
#trade-in-record-panel .ti-device-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#trade-in-record-panel .ti-device-photo-placeholder,
#trade-in-record-panel .ti-device-photo.is-fallback img {
  display: none;
}
#trade-in-record-panel .ti-device-photo.is-fallback > span,
#trade-in-record-panel .ti-device-photo.is-fallback .ti-device-photo-placeholder {
  display: grid;
  place-items: center;
}
#trade-in-record-panel .ti-device-photo.is-fallback .ti-icon {
  width: 38px;
  height: 38px;
  opacity: .55;
}
#trade-in-record-panel .ti-device-facts {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(170px, 1fr);
  align-items: center;
  gap: var(--space-5, 20px);
  min-width: 0;
}
#trade-in-record-panel .ti-device-facts .ti-summary-item,
#trade-in-record-panel .ti-summary-secondary .ti-summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}
#trade-in-record-panel .ti-device-facts .ti-summary-item > span,
#trade-in-record-panel .ti-summary-secondary .ti-summary-item > span {
  color: var(--content-2, #64748b);
  font-size: 11px;
  font-weight: var(--weight-bold, 700);
  letter-spacing: .05em;
  text-transform: uppercase;
}
#trade-in-record-panel .ti-device-facts .ti-summary-item > strong,
#trade-in-record-panel .ti-summary-secondary .ti-summary-item > strong {
  color: var(--content-1, #111827);
  font-size: var(--text-base, 15px);
  font-weight: var(--weight-bold, 700);
  overflow-wrap: anywhere;
}
#trade-in-record-panel .ti-device-facts .ti-summary-item:last-child > strong {
  font-size: var(--text-lg, 18px);
  font-variant-numeric: tabular-nums;
}
#trade-in-record-panel .ti-summary-secondary {
  margin: calc(var(--space-2, 8px) * -1) 0 var(--space-5, 20px);
}
#trade-in-record-panel .ti-step-card {
  margin-top: var(--space-4, 16px);
  padding: var(--space-5, 20px);
  border: 1px solid var(--border-1, #e6e9ec);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm);
}
#trade-in-record-panel .ti-step-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}
#trade-in-record-panel .ti-step-head h4 {
  margin: 0;
  color: var(--content-1, #111827);
  font-size: var(--text-lg, 18px);
  line-height: var(--leading-tight, 1.25);
}
#trade-in-record-panel .ti-step-head p {
  margin: var(--space-1, 4px) 0 0;
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-record-panel .ti-step-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-circle, 50%);
}
#trade-in-record-panel .ti-step-badge--inspection {
  color: var(--cp-accent, #0797ca);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 14%, var(--surface, #fff));
}
#trade-in-record-panel .ti-step-badge--offer {
  color: var(--cp-success, #16a34a);
  background: color-mix(in srgb, var(--cp-success, #16a34a) 13%, var(--surface, #fff));
}
#trade-in-record-panel .ti-step-badge--recycling {
  color: var(--cp-success, #16a34a);
  background: color-mix(in srgb, var(--cp-success, #16a34a) 13%, var(--surface, #fff));
}
#trade-in-record-panel .ti-step-badge--notes {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 12%, var(--surface, #fff));
}
#trade-in-record-panel .ti-inspection-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
#trade-in-record-panel .ti-offer-grid {
  grid-template-columns: minmax(150px, .75fr) minmax(150px, .75fr) minmax(280px, 1.5fr);
  align-items: start;
}
#trade-in-record-panel .ti-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 18px;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-2, #f8fafc);
  font-size: var(--text-sm, 13px);
}
#trade-in-record-panel .ti-summary .ti-summary-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#trade-in-record-panel .ti-summary .ti-summary-item span {
  color: var(--content-2, #64748b);
  font-size: 11px;
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#trade-in-record-panel .ti-summary .ti-summary-item strong {
  font-weight: var(--weight-bold, 700);
  overflow-wrap: anywhere;
}
#trade-in-record-panel .ti-summary .ti-summary-device { grid-column: 1 / -1; font-size: var(--text-base, 15px); }

#trade-in-record-panel .ti-payout-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 10px);
}
#trade-in-record-panel .ti-payout-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-2, #f8fafc);
}
#trade-in-record-panel .ti-payout-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#trade-in-record-panel .ti-payout-option-info strong { font-size: var(--text-base, 14px); }
#trade-in-record-panel .ti-payout-option-info span {
  color: var(--content-2, #64748b);
  font-size: var(--text-xs, 12px);
}
#trade-in-record-panel .ti-payout-option .btn { flex: 0 0 auto; white-space: nowrap; }

#trade-in-record-panel .ti-group-label {
  display: block;
  margin: var(--space-4, 16px) 0 var(--space-1, 4px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 800);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--content-2, #64748b);
}
#trade-in-record-panel .ti-group-label:first-child { margin-top: 0; }
#trade-in-record-panel .ti-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3, 12px);
}
#trade-in-record-panel .ti-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-semibold, 600);
  color: var(--content-2, #475569);
  min-width: 0;
}
#trade-in-record-panel .ti-field--full { grid-column: 1 / -1; }
#trade-in-record-panel .ti-field input,
#trade-in-record-panel .ti-field select,
#trade-in-record-panel .ti-field textarea {
  padding: 9px 11px;
  border: 1px solid var(--border-1, #cbd5e1);
  border-radius: var(--radius-md, 9px);
  font-size: var(--text-base, 14px);
  font-weight: var(--weight-regular, 400);
  color: var(--content-1, #0f172a);
  background: var(--surface, #fff);
  width: 100%;
}
#trade-in-record-panel .ti-field textarea { resize: vertical; min-height: 64px; }
#trade-in-record-panel .ti-input-prefix {
  position: relative;
  display: block;
}
#trade-in-record-panel .ti-input-prefix > span:first-child {
  position: absolute;
  z-index: var(--z-base, 1);
  top: 50%;
  left: var(--space-3, 12px);
  color: var(--content-2, #64748b);
  font-size: var(--text-base, 15px);
  font-weight: var(--weight-bold, 700);
  transform: translateY(-50%);
  pointer-events: none;
}
#trade-in-record-panel .ti-input-prefix input {
  padding-left: var(--space-8, 32px);
  font-variant-numeric: tabular-nums;
}
#trade-in-record-panel .ti-textarea-shell {
  position: relative;
  display: block;
}
#trade-in-record-panel .ti-textarea-shell textarea {
  padding-bottom: var(--space-8, 32px);
}
#trade-in-record-panel .ti-character-counter {
  position: absolute;
  right: var(--space-3, 12px);
  bottom: var(--space-2, 8px);
  color: var(--content-3, #6b7280);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-medium, 500);
  line-height: 1;
  pointer-events: none;
}
#trade-in-record-panel #ti-offer-override-wrap:not(.is-required) .ti-field-label {
  color: var(--content-3, #6b7280);
}
#trade-in-record-panel #ti-offer-override-wrap.is-required .ti-field-label {
  color: var(--cp-warning, #d97706);
}
#trade-in-record-panel #ti-offer-override-reason:disabled {
  cursor: not-allowed;
  color: var(--content-3, #6b7280);
  background: var(--surface-3, #f1f3f5);
  opacity: .78;
}
#trade-in-record-panel .ti-field input:focus,
#trade-in-record-panel .ti-field select:focus,
#trade-in-record-panel .ti-field textarea:focus {
  outline: none;
  border-color: var(--cp-accent, #0797ca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent, #0797ca) 18%, transparent);
}

/* M360 identifier entry: intentionally oversized so the operator fills the
   IMEI/serial BEFORE hitting "Run M360 Check" — the old compact grid fields
   went unnoticed and people searched with an empty value. */
#trade-in-record-panel .ti-m360-identify {
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  gap: var(--space-3, 12px);
  margin: var(--space-2, 8px) 0 var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 35%, var(--border-1, #cbd5e1));
  border-radius: var(--radius-md, 9px);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 6%, var(--surface, #fff));
}
#trade-in-record-panel .ti-m360-identify .ti-field {
  letter-spacing: 0.05em;
}
#trade-in-record-panel .ti-m360-identify .ti-field input,
#trade-in-record-panel .ti-m360-identify .ti-field select {
  min-height: 46px;
  padding: 11px 13px;
  font-size: var(--text-md, 16px);
  font-weight: var(--weight-semibold, 600);
}
#trade-in-record-panel .ti-m360-identify .ti-field input {
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  #trade-in-record-panel .ti-m360-identify {
    grid-template-columns: 1fr;
  }
}
#trade-in-record-panel .ti-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2, 10px);
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--border-1, #eef2f7);
}
#trade-in-record-panel .ti-actions .ti-actions-hint {
  margin-right: auto;
  color: var(--content-2, #64748b);
  font-size: var(--text-xs, 12px);
  max-width: 46ch;
}
#trade-in-record-panel .ti-record-footer {
  margin: var(--space-5, 20px) calc(var(--space-6, 24px) * -1) calc(var(--space-6, 24px) * -1);
  padding: var(--space-4, 16px) var(--space-6, 24px);
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  background: var(--surface-2, #f8f9fa);
}
#trade-in-record-panel .ti-record-footer .ti-actions-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
#trade-in-record-panel .ti-record-footer .ti-actions-hint .ti-icon {
  width: 16px;
  height: 16px;
}
#trade-in-record-panel .ti-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
}
#trade-in-record-panel .ti-action-btn .ti-icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 1180px) {
  #trade-in-record-panel .ti-inspection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #trade-in-record-panel .ti-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #trade-in-record-panel .ti-offer-grid #ti-offer-override-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #trade-in-record-panel .ti-evaluation-record {
    padding: var(--space-4, 16px);
  }
  #trade-in-record-panel .ti-evaluation-record .ti-card-head {
    flex-direction: column;
  }
  #trade-in-record-panel .ti-device-panel {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-4, 16px);
  }
  #trade-in-record-panel .ti-device-photo {
    width: 88px;
    height: 88px;
  }
  #trade-in-record-panel .ti-device-facts {
    grid-template-columns: 1fr;
    gap: var(--space-3, 12px);
  }
  #trade-in-record-panel .ti-inspection-grid,
  #trade-in-record-panel .ti-offer-grid {
    grid-template-columns: 1fr;
  }
  #trade-in-record-panel .ti-offer-grid #ti-offer-override-wrap {
    grid-column: auto;
  }
  #trade-in-record-panel .ti-record-footer {
    margin: var(--space-5, 20px) calc(var(--space-4, 16px) * -1) calc(var(--space-4, 16px) * -1);
    padding: var(--space-4, 16px);
  }
  #trade-in-record-panel .ti-record-footer .ti-actions-hint {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 520px) {
  #trade-in-record-panel .ti-device-panel {
    grid-template-columns: 1fr;
  }
  #trade-in-record-panel .ti-device-photo {
    width: 100%;
    height: 120px;
  }
  #trade-in-record-panel .ti-step-card {
    padding: var(--space-4, 16px);
  }
  #trade-in-record-panel .ti-record-footer .btn {
    width: 100%;
  }
}

/* M360 Diagnostic mirrors the Evaluation Record's card family while keeping
   its controls in the separate phone-only inspection slot. */
.trade-ticket-shell #trade-in-m360-panel.trade-m360-diagnostic {
  overflow: hidden;
  background: var(--surface-2, #f8f9fa);
}
#trade-in-m360-panel .ti-m360-shell {
  padding: var(--space-4, 16px);
}
#trade-in-m360-panel .ti-card {
  color: var(--content-1, #111827);
  background: var(--surface, #fff);
}
#trade-in-m360-panel .ti-m360-diagnostic-card {
  padding: var(--space-6, 24px);
  border: 1px solid var(--border-1, #e6e9ec);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
#trade-in-m360-panel .ti-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-5, 20px);
}
#trade-in-m360-panel .ti-card-title {
  min-width: 0;
}
#trade-in-m360-panel .ti-card-title h3 {
  margin: 0;
  color: var(--content-1, #111827);
  font-size: var(--text-xl, 22px);
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-tight, 1.25);
}
#trade-in-m360-panel .ti-card-title p {
  margin: var(--space-1, 4px) 0 0;
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-m360-panel .ti-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex: 0 0 auto;
  padding: 3px var(--space-3, 12px);
  border: 1px solid var(--border-1, #e6e9ec);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 700);
  white-space: nowrap;
}
#trade-in-m360-panel .ti-m360-status-dot {
  width: var(--space-2, 8px);
  height: var(--space-2, 8px);
  flex: 0 0 var(--space-2, 8px);
  border-radius: var(--radius-circle, 50%);
  background: currentColor;
}
#trade-in-m360-panel .ti-m360-pill--no-diagnostic {
  color: var(--content-2, #64748b);
  background: var(--surface-3, #f1f3f5);
  border-color: var(--border-1, #e6e9ec);
}
#trade-in-m360-panel .ti-m360-pill--ready {
  color: color-mix(in srgb, var(--cp-accent, #0797ca) 82%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 12%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--cp-accent, #0797ca) 25%, var(--border-1, #e6e9ec));
}
#trade-in-m360-panel .ti-m360-pill--linked,
#trade-in-m360-panel .ti-m360-pill--report-saved {
  color: color-mix(in srgb, var(--cp-success, #16a34a) 78%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-success, #16a34a) 12%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--cp-success, #16a34a) 25%, var(--border-1, #e6e9ec));
}
#trade-in-m360-panel .ti-m360-info-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-5, 20px);
  padding: var(--space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 18%, var(--border-1, #e6e9ec));
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--cp-accent-soft, #e6f4fa) 66%, var(--surface, #fff));
}
#trade-in-m360-panel .ti-m360-info-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-circle, 50%);
  color: var(--cp-accent, #0797ca);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm);
}
#trade-in-m360-panel .ti-m360-info-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
#trade-in-m360-panel .ti-m360-info-panel strong {
  color: var(--content-1, #111827);
  font-size: var(--text-sm, 13px);
}
#trade-in-m360-panel .ti-m360-info-panel p {
  margin: var(--space-1, 4px) 0 0;
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-m360-panel .ti-m360-session-summary {
  display: block;
  margin-top: var(--space-2, 8px);
  color: var(--content-1, #111827);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 700);
}
#trade-in-m360-panel .ti-step-card {
  margin-top: var(--space-4, 16px);
  padding: var(--space-5, 20px);
  border: 1px solid var(--border-1, #e6e9ec);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm);
}
#trade-in-m360-panel #trade-in-m360-controls-slot > .ti-step-card:first-of-type {
  margin-top: 0;
}
#trade-in-m360-panel .ti-step-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}
#trade-in-m360-panel .ti-step-head h4 {
  margin: 0;
  color: var(--content-1, #111827);
  font-size: var(--text-lg, 18px);
  line-height: var(--leading-tight, 1.25);
}
#trade-in-m360-panel .ti-step-head p {
  margin: var(--space-1, 4px) 0 0;
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-m360-panel .ti-step-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-circle, 50%);
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-black, 900);
}
#trade-in-m360-panel .ti-m360-step-badge--inspection {
  color: var(--cp-accent, #0797ca);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 14%, var(--surface, #fff));
}
#trade-in-m360-panel .ti-m360-step-badge--run {
  color: var(--cp-warning, #d97706);
  background: color-mix(in srgb, var(--cp-warning, #d97706) 13%, var(--surface, #fff));
}
#trade-in-m360-panel .ti-m360-step-badge--report {
  color: var(--cp-success, #16a34a);
  background: color-mix(in srgb, var(--cp-success, #16a34a) 13%, var(--surface, #fff));
}
#trade-in-m360-panel .ti-m360-confirmation-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 20%, var(--border-1, #e6e9ec));
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2, #f8f9fa);
  cursor: pointer;
  transition: border-color var(--dur-fast, 160ms), background-color var(--dur-fast, 160ms), box-shadow var(--dur-fast, 160ms);
}
#trade-in-m360-panel .ti-m360-confirmation-row:hover {
  border-color: color-mix(in srgb, var(--cp-accent, #0797ca) 38%, var(--border-1, #e6e9ec));
  background: color-mix(in srgb, var(--cp-accent-soft, #e6f4fa) 42%, var(--surface, #fff));
}
#trade-in-m360-panel .ti-m360-confirmation-row > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
#trade-in-m360-panel .ti-m360-toggle-track {
  display: flex;
  align-items: center;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  padding: 3px;
  border: 1px solid var(--border-2, #c8cdd2);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-3, #f1f3f5);
  transition: border-color var(--dur-fast, 160ms), background-color var(--dur-fast, 160ms);
}
#trade-in-m360-panel .ti-m360-toggle-track > span {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle, 50%);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast, 160ms);
}
#trade-in-m360-panel .ti-m360-confirmation-row > input:checked + .ti-m360-toggle-track {
  border-color: var(--cp-accent, #0797ca);
  background: var(--cp-accent, #0797ca);
}
#trade-in-m360-panel .ti-m360-confirmation-row > input:checked + .ti-m360-toggle-track > span {
  transform: translateX(18px);
}
#trade-in-m360-panel .ti-m360-confirmation-row > input:focus-visible + .ti-m360-toggle-track {
  box-shadow: var(--focus-ring);
}
#trade-in-m360-panel .ti-m360-confirmation-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}
#trade-in-m360-panel .ti-m360-confirmation-copy strong {
  color: var(--content-1, #111827);
  font-size: var(--text-base, 15px);
}
#trade-in-m360-panel .ti-m360-confirmation-copy > span {
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-m360-panel .ti-m360-identify {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(260px, 1.45fr);
  gap: var(--space-3, 12px);
}
#trade-in-m360-panel .ti-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  min-width: 0;
  color: var(--content-2, #64748b);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 700);
}
#trade-in-m360-panel .ti-field-label {
  color: var(--content-2, #64748b);
}
#trade-in-m360-panel .ti-field input,
#trade-in-m360-panel .ti-field select {
  width: 100%;
  min-height: 46px;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-2, #c8cdd2);
  border-radius: var(--radius-md, 8px);
  color: var(--content-1, #111827);
  background: var(--surface, #fff);
  font: inherit;
  font-size: var(--text-base, 15px);
  font-weight: var(--weight-medium, 500);
}
#trade-in-m360-panel .ti-field input {
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}
#trade-in-m360-panel .ti-field input:focus,
#trade-in-m360-panel .ti-field select:focus {
  outline: none;
  border-color: var(--cp-accent, #0797ca);
  box-shadow: var(--focus-ring);
}
#trade-in-m360-panel .ti-m360-run-actions,
#trade-in-m360-panel .ti-m360-secondary-actions,
#trade-in-m360-panel .ti-m360-locked-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-top: var(--space-4, 16px);
}
#trade-in-m360-panel .ti-m360-run-actions .btn {
  min-width: 128px;
}
#trade-in-m360-panel .ti-m360-locked-note {
  padding: var(--space-3, 12px);
  border: 1px dashed var(--border-2, #c8cdd2);
  border-radius: var(--radius-md, 8px);
  color: var(--content-2, #64748b);
  background: var(--surface-2, #f8f9fa);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-m360-panel .ti-m360-secondary-actions {
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--border-1, #e6e9ec);
}
#trade-in-m360-panel .ti-m360-secondary-actions > span {
  color: var(--content-2, #64748b);
  font-size: var(--text-xs, 12px);
  line-height: var(--leading-body, 1.46);
}
#trade-in-m360-panel .ti-m360-action-result:empty {
  display: none;
}
#trade-in-m360-panel .ti-m360-action-result:not(:empty),
#trade-in-m360-panel .ti-m360-load-error {
  margin: var(--space-3, 12px) 0 0;
}
#trade-in-m360-panel .ti-m360-linkstate {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-1, #e6e9ec);
  border-radius: var(--radius-md, 8px);
  color: var(--content-2, #64748b);
  background: var(--surface-2, #f8f9fa);
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-medium, 500);
  line-height: var(--leading-body, 1.46);
}
#trade-in-m360-panel .ti-m360-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-top: 5px;
  border-radius: var(--radius-circle, 50%);
  background: var(--content-3, #6b7280);
}
#trade-in-m360-panel .ti-m360-linkstate.is-linked {
  color: color-mix(in srgb, var(--cp-success, #16a34a) 78%, var(--content-1, #111827));
  background: color-mix(in srgb, var(--cp-success, #16a34a) 8%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--cp-success, #16a34a) 22%, var(--border-1, #e6e9ec));
}
#trade-in-m360-panel .ti-m360-linkstate.is-linked .ti-m360-dot {
  background: var(--cp-success, #16a34a);
}
#trade-in-m360-panel .ti-m360-report-content .trade-detail-guidance {
  margin: 0;
  padding: var(--space-5, 20px);
  border: 1px dashed var(--border-2, #c8cdd2);
  border-radius: var(--radius-md, 8px);
  color: var(--content-2, #64748b);
  background: var(--surface-2, #f8f9fa);
  text-align: center;
}
#trade-in-m360-panel .ti-m360-report-content .trade-table-wrap {
  margin: 0;
  overflow-x: auto;
  border: 1px solid var(--border-1, #e6e9ec);
  border-radius: var(--radius-md, 8px);
}
#trade-in-m360-panel .ti-m360-report-content .trade-table {
  min-width: 560px;
}
#trade-in-m360-panel .ti-m360-report-content .trade-table th,
#trade-in-m360-panel .ti-m360-report-content .trade-table td {
  overflow-wrap: anywhere;
}

/* Keep the saved report presentation consistent with the inventory-unit M360
   view. The inventory copy is page-scoped, so these shared class names need a
   matching scope inside the trade-in ticket panel. */
#trade-in-m360-panel .iim-m360-device-report {
  display: grid;
  gap: var(--space-3, 12px);
}
#trade-in-m360-panel .iim-m360-device-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--border-1, #e5e7eb);
}
#trade-in-m360-panel .iim-m360-device-head h4,
#trade-in-m360-panel .iim-m360-device-head p {
  margin: 0;
}
#trade-in-m360-panel .iim-m360-device-head h4 {
  color: var(--content-1, #111827);
  font-size: var(--text-sm, 14px);
  font-weight: var(--weight-bold, 700);
}
#trade-in-m360-panel .iim-m360-device-head p,
#trade-in-m360-panel .iim-m360-empty {
  margin-top: 2px;
  color: var(--content-2, #4b5563);
  font-size: var(--text-xs, 12px);
}
#trade-in-m360-panel .iim-m360-device-statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
}
#trade-in-m360-panel .iim-m360-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3, 12px);
}
#trade-in-m360-panel .iim-m360-device-table {
  width: 100%;
  border: 1px solid var(--border-1, #e5e7eb);
  border-collapse: collapse;
  background: var(--surface, #fff);
  font-size: var(--text-sm, 14px);
  table-layout: fixed;
}
#trade-in-m360-panel .iim-m360-device-table caption {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-2, #f8fafc);
  color: var(--content-2, #4b5563);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 700);
  text-align: left;
  text-transform: uppercase;
}
#trade-in-m360-panel .iim-m360-device-table th,
#trade-in-m360-panel .iim-m360-device-table td {
  padding: 7px var(--space-3, 12px);
  border-top: 1px solid var(--border-1, #e5e7eb);
  vertical-align: top;
  overflow-wrap: anywhere;
}
#trade-in-m360-panel .iim-m360-device-table th {
  width: 42%;
  color: var(--content-2, #4b5563);
  font-weight: var(--weight-bold, 700);
  text-align: left;
}
#trade-in-m360-panel .iim-m360-device-table td {
  color: var(--content-1, #111827);
}
#trade-in-m360-panel .iim-m360-device-table small {
  display: block;
  margin-top: 2px;
  color: var(--content-2, #4b5563);
  font-size: var(--text-xs, 12px);
}
#trade-in-m360-panel .iim-m360-kv {
  display: block;
  overflow-wrap: anywhere;
}
#trade-in-m360-panel .iim-m360-kv em {
  color: var(--content-2, #4b5563);
  font-style: normal;
}
#trade-in-m360-panel .iim-m360-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3, 12px);
}
#trade-in-m360-panel .iim-m360-group {
  min-width: 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-1, #e5e7eb);
  border-radius: var(--radius-xs, 4px);
  background: var(--surface-2, #f8fafc);
}
#trade-in-m360-panel .iim-m360-group h4 {
  margin: 0 0 var(--space-2, 8px);
  color: var(--content-2, #4b5563);
  font-size: var(--text-xs, 12px);
  text-transform: uppercase;
}
#trade-in-m360-panel .iim-m360-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm, 14px);
}
#trade-in-m360-panel .iim-m360-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  min-width: 0;
}
#trade-in-m360-panel .iim-m360-list small {
  flex-basis: 100%;
  color: var(--content-2, #4b5563);
}

@media (max-width: 760px) {
  #trade-in-m360-panel .ti-m360-diagnostic-card {
    padding: var(--space-4, 16px);
  }
  #trade-in-m360-panel .ti-card-head {
    flex-direction: column;
  }
  #trade-in-m360-panel .ti-m360-identify {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  #trade-in-m360-panel .ti-m360-shell {
    padding: var(--space-3, 12px);
  }
  #trade-in-m360-panel .ti-step-card {
    padding: var(--space-4, 16px);
  }
  #trade-in-m360-panel .ti-m360-info-panel {
    flex-direction: column;
  }
  #trade-in-m360-panel .ti-m360-confirmation-row {
    align-items: flex-start;
  }
  #trade-in-m360-panel .ti-m360-run-actions .btn,
  #trade-in-m360-panel .ti-m360-secondary-actions .btn,
  #trade-in-m360-panel .ti-m360-locked-actions .btn {
    width: 100%;
  }
  #trade-in-m360-panel .iim-m360-device-head {
    flex-direction: column;
  }
  #trade-in-m360-panel .iim-m360-device-statuses {
    justify-content: flex-start;
  }
}

#trade-in-record-panel .ti-config {
  margin: var(--space-3, 12px) 0 0;
  padding: var(--space-3, 12px);
  border-radius: var(--radius-md, 9px);
  background: var(--surface-2, #f8fafc);
  font-size: var(--text-xs, 12px);
  color: var(--content-2, #64748b);
}
#trade-in-record-panel .ti-config summary {
  cursor: pointer;
  font-weight: var(--weight-bold, 700);
  color: var(--content-1, #334155);
}
#trade-in-record-panel .ti-config .ti-config-body { margin-top: 8px; line-height: 1.5; }
#trade-in-record-panel .ti-history-label {
  margin: var(--space-4, 16px) 0 var(--space-2, 8px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--content-2, #64748b);
}
#trade-in-record-panel .ti-m360-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
#trade-in-record-panel .ti-m360-facts > div > div { font-size: 11px; color: var(--content-2, #64748b); }

/* M360 linked/not-linked status in the trade-in panel */
#trade-in-record-panel .ti-m360-linkstate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3, 12px);
  padding: 10px 12px;
  border-radius: var(--radius-md, 9px);
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semibold, 600);
}
#trade-in-record-panel .ti-m360-linkstate .ti-m360-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
}
#trade-in-record-panel .ti-m360-linkstate.is-linked {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #166534;
}
#trade-in-record-panel .ti-m360-linkstate.is-linked .ti-m360-dot { background: #16a34a; }
#trade-in-record-panel .ti-m360-linkstate.is-unlinked {
  background: var(--surface-2, #f1f5f9);
  color: var(--content-2, #475569);
}
#trade-in-record-panel .ti-m360-linkstate.is-unlinked .ti-m360-dot { background: #94a3b8; }

/* AI help launcher relocated into the topbar (left of the Railway Bucket pill) */
.topbar-ai-help-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 74%, var(--border-2));
  border-radius: var(--radius-circle);
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--content-inv);
  background: var(--cp-accent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-micro) var(--ease-standard), box-shadow var(--dur-micro) var(--ease-standard);
}
.topbar-ai-help-btn span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--content-1) 18%, transparent);
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
.topbar-ai-help-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.topbar-ai-help-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cp-accent) 30%, transparent);
  outline-offset: 2px;
}
.topbar-ai-help-btn.hidden { display: none; }

/* Conversational employee help. The project search happens behind the scenes;
   the employee sees only plain-language guidance about the current screen. */
.ai-field-help-panel {
  position: fixed;
  top: calc(var(--space-10) + var(--space-8));
  right: var(--space-4);
  bottom: auto;
  left: auto;
  z-index: calc(var(--z-toast) + var(--z-base));
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr) auto auto;
  width: min(430px, calc(100vw - var(--space-6)));
  height: min(680px, calc(100vh - var(--space-10) - var(--space-10) - var(--space-4)));
  max-height: none;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-pop-in var(--dur-fast) var(--ease-standard);
}

.ai-field-help-panel.hidden {
  display: none;
}

.ai-field-help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--cp-accent-soft) 52%, var(--surface));
}

.ai-field-help-kicker {
  margin: 0 0 var(--space-1);
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-field-help-header h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.ai-field-help-close {
  position: static;
  display: grid;
  flex: 0 0 var(--space-8);
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-circle);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-lg);
  cursor: pointer;
}

.ai-field-help-close:hover {
  border-color: var(--border-2);
  color: var(--content-1);
}

.ai-field-help-focus-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--cp-accent);
  border-left-width: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
  color: var(--content-1);
  font-size: var(--text-xs);
}

.ai-field-help-focus-note.is-screen {
  display: flex;
  grid-template-columns: none;
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border-color: var(--border-1);
  border-left-width: 1px;
  background: var(--surface-2);
  color: var(--content-2);
}

.ai-field-help-selection-preview {
  position: relative;
  width: var(--space-10);
  height: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ai-field-help-selection-preview::before {
  position: absolute;
  inset: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xs);
  content: "";
}

.ai-field-help-selection-preview span {
  position: absolute;
  top: var(--selection-top);
  left: var(--selection-left);
  width: var(--selection-width);
  height: var(--selection-height);
  min-width: var(--space-1);
  min-height: var(--space-1);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--cp-accent) 24%, transparent);
}

.ai-field-help-focus-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.ai-field-help-focus-copy strong {
  color: var(--cp-accent-hover);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.ai-field-help-focus-copy > span,
.ai-field-help-focus-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-field-help-focus-copy > span {
  color: var(--content-1);
  font-weight: var(--weight-bold);
}

.ai-field-help-focus-copy small {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.ai-field-help-focus-note button,
.ai-field-help-footer button {
  border: 0;
  background: transparent;
  color: var(--cp-accent-hover);
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.ai-field-help-messages {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  padding: var(--space-4);
  overscroll-behavior: contain;
}

.ai-field-help-message {
  display: flex;
  max-width: 88%;
  flex-direction: column;
  align-self: flex-start;
  gap: var(--space-1);
}

.ai-field-help-message.is-user {
  align-self: flex-end;
}

.ai-field-help-message-label {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.ai-field-help-message.is-user .ai-field-help-message-label {
  align-self: flex-end;
}

.ai-field-help-message-context {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: var(--space-1);
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 44%, var(--border-1));
  border-radius: var(--radius-pill);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-field-help-message-context span {
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 var(--space-2);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--cp-accent) 20%, transparent);
}

.ai-field-help-bubble {
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.ai-field-help-message.is-user .ai-field-help-bubble {
  border-color: var(--cp-accent);
  border-bottom-right-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-lg);
  background: var(--cp-accent);
  color: var(--content-inv);
}

.ai-field-help-message.is-loading .ai-field-help-bubble {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ai-field-help-message.is-loading .ai-field-help-bubble > span:not(.sr-only) {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--content-3);
  animation: ai-help-thinking 900ms ease-in-out infinite alternate;
}

.ai-field-help-message.is-loading .ai-field-help-bubble > span:nth-child(2) { animation-delay: 150ms; }
.ai-field-help-message.is-loading .ai-field-help-bubble > span:nth-child(3) { animation-delay: 300ms; }

@keyframes ai-help-thinking {
  to { opacity: 0.28; transform: translateY(-2px); }
}

.ai-field-help-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-1);
  background: var(--surface);
}

.ai-field-help-composer .sr-only,
.ai-field-help-bubble .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ai-field-help-composer textarea {
  min-height: 46px;
  max-height: 120px;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  line-height: var(--leading-body);
}

.ai-field-help-composer textarea:focus {
  border-color: var(--cp-accent);
  outline: 3px solid color-mix(in srgb, var(--cp-accent) 18%, transparent);
}

.ai-field-help-send {
  min-height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--cp-accent);
  color: var(--content-inv);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.ai-field-help-send:disabled,
.ai-field-help-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-field-help-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-3);
  background: var(--surface);
  font-size: var(--text-xs);
}

.ai-field-help-overlay {
  background: color-mix(in srgb, var(--content-1) 20%, transparent);
}

.ai-field-help-instruction {
  top: calc(var(--space-10) + var(--space-8));
  border-radius: var(--radius-pill);
  background: var(--content-1);
  color: var(--content-inv);
  box-shadow: var(--shadow-lg);
}

.ai-field-help-rect {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 16%, transparent);
}

body.is-chat-view .ai-field-help-panel {
  top: calc(var(--space-10) + var(--space-8));
  right: var(--space-4);
  bottom: auto;
  left: auto;
}

@media (max-width: 760px) {
  .ai-field-help-panel,
  body.is-chat-view .ai-field-help-panel {
    top: calc(var(--space-10) + var(--space-6));
    right: var(--space-2);
    bottom: auto;
    left: var(--space-2);
    width: auto;
    height: calc(100dvh - var(--space-10) - var(--space-10) - var(--space-2));
    border-radius: var(--radius-lg);
  }

  .ai-field-help-focus-note.is-selection {
    grid-template-columns: var(--space-10) minmax(0, 1fr);
  }

  .ai-field-help-focus-note.is-selection button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Special Order required-deposit card (create flow) — clearer + more prominent */
.so-deposit-card {
  margin-top: var(--space-3, 12px);
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 32%, transparent);
  border-left: 4px solid var(--cp-accent, #0797ca);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 8%, var(--surface, #fff));
}
.so-deposit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.so-deposit-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.so-deposit-label {
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--content-2, #64748b);
}
.so-deposit-amount {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--content-1, #0f172a);
}
.so-deposit-adjust { white-space: nowrap; }
.so-deposit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 18%, transparent);
  font-size: var(--text-sm, 13px);
  color: var(--content-2, #475569);
}
.so-deposit-meta strong { color: var(--content-1, #0f172a); font-weight: 700; }
.so-deposit-meta-sep { color: var(--content-3, #94a3b8); }

/* Repair / Trade-In logistics lives inside the Notes area by design. */
.ticket-logistics-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.2fr);
  gap: var(--space-4, 16px);
  align-items: end;
  margin: var(--space-3, 12px) 0 var(--space-4, 16px);
  padding: var(--space-4, 16px);
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 38%, var(--border, #dbe4ec));
  border-left: 5px solid var(--cp-accent, #0797ca);
  border-radius: var(--radius-lg, 14px);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 9%, var(--surface, #fff));
}
.ticket-logistics-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}
.ticket-logistics-copy > span {
  color: var(--cp-accent, #0797ca);
  font-size: var(--text-xs, 11px);
  font-weight: 800;
  letter-spacing: 0.09em;
}
.ticket-logistics-copy > strong {
  color: var(--content-1, #0f172a);
  font-size: var(--text-lg, 18px);
}
.ticket-logistics-copy > p {
  margin: 0;
  color: var(--content-2, #64748b);
  font-size: var(--text-sm, 13px);
  line-height: 1.45;
}
/* Read-only equipment location — the bin is derived, not typed. */
.ticket-logistics-value {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}
.ticket-logistics-value > span {
  color: var(--content-1, #0f172a);
  font-size: var(--text-sm, 13px);
  font-weight: 750;
}
.ticket-logistics-value > strong {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 16%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 40%, transparent);
  color: var(--content-1, #0f172a);
  font-size: var(--text-base, 15px);
  font-weight: 800;
}
.ticket-logistics-readonly {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  min-width: 0;
}
.ticket-logistics-readonly > span {
  color: var(--content-1, #0f172a);
  font-size: var(--text-sm, 13px);
  font-weight: 750;
}
.ticket-logistics-readonly > strong {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--cp-accent, #0797ca) 14%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 36%, transparent);
  color: var(--content-1, #0f172a);
  font-weight: 800;
}
.ticket-logistics-readonly em {
  color: var(--content-2, #64748b);
  font-size: var(--text-xs, 11px);
  font-style: normal;
}

@media (max-width: 760px) {
  .ticket-logistics-card { grid-template-columns: 1fr; align-items: stretch; }
}

/* ==== Supplier baskets ("Pending to order" strip on the PO list page) ==== */
.po-baskets { margin: 0 0 14px; }
.po-baskets-title { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 8px; }
.po-baskets-title span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--content-2, #475569); }
.po-baskets-title small { font-size: 12px; color: var(--content-3, #94a3b8); }
.po-baskets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.po-basket-card {
  border: 1px solid var(--line-1, #e2e8f0);
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  background: var(--surface-1, #fff);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.po-basket-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); transform: translateY(-1px); }
.po-basket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.po-basket-head strong { font-size: 14px; color: var(--content-1, #0f172a); }
.po-basket-status { font-size: 11px; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.po-basket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--content-2, #475569); }
.po-basket-cost { font-weight: 700; color: var(--content-1, #0f172a); }
.po-basket-extra { color: var(--content-3, #94a3b8); }
.po-basket-review-btn {
  align-self: flex-start;
  border: 1px solid #f59e0b;
  color: #92400e;
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}
.po-basket-review-btn:hover { background: #fef3c7; }

/* Basket chip on repair/sale part lines — the part already sits in a PO. */
.repair-line-po-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; border: 1px solid #f59e0b;
  background: #fef3c7; color: #92400e;
  font-size: 11px; font-weight: 600; padding: 1px 8px;
  cursor: pointer; line-height: 1.5;
}
.repair-line-po-chip.is-ordered { border-color: #38bdf8; background: #e0f2fe; color: #075985; }
.repair-line-po-chip:hover { filter: brightness(0.97); }

/* Cancel Order — explicit red action (distinct from "Back" which just leaves) */
#new-purchase-order-page .newpo-top-actions .newpo-action-cancel-order {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}
#new-purchase-order-page .newpo-top-actions .newpo-action-cancel-order:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* Trade-In workflow and the dedicated Final Inspection work panel. */
.trade-ticket-shell .trade-process-guide[aria-label="Trade-in workflow"] {
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.trade-ticket-shell .trade-process-guide[aria-label="Trade-in workflow"] .trade-process-guide-head {
  align-items: center;
}

.trade-ticket-shell .trade-process-steps {
  gap: var(--space-4);
}

.trade-ticket-shell .trade-process-step {
  position: relative;
  z-index: var(--z-base);
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  gap: var(--space-3);
  min-height: calc(var(--space-10) * 3);
  padding: var(--space-3);
  border-color: var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.trade-ticket-shell .trade-process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: calc(var(--z-base) + 1);
  top: 50%;
  right: calc(var(--space-4) * -1);
  width: var(--space-4);
  border-top: 2px dotted var(--border-2);
  pointer-events: none;
}

.trade-ticket-shell .trade-process-step.is-done {
  border-color: color-mix(in srgb, var(--cp-success) 28%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 10%, var(--surface));
}

.trade-ticket-shell .trade-process-step.is-active {
  border-color: var(--cp-accent);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.trade-ticket-shell .trade-process-step.is-upcoming,
.trade-ticket-shell .trade-process-step.is-blocked {
  border-color: var(--border-1);
  background: var(--surface-3);
}

.trade-ticket-shell .trade-process-number {
  width: var(--space-8);
  height: var(--space-8);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-circle);
  color: var(--content-3);
  background: var(--surface);
}

.trade-ticket-shell .trade-process-step.is-active .trade-process-number {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
  background: var(--surface);
}

.trade-ticket-shell .trade-process-step.is-done .trade-process-number {
  border-color: var(--cp-success);
  color: var(--cp-accent-content);
  background: var(--cp-success);
}

.trade-ticket-shell .trade-process-step.is-done .trade-process-number svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.trade-ticket-shell .trade-process-step.is-upcoming .trade-process-number,
.trade-ticket-shell .trade-process-step.is-blocked .trade-process-number {
  border-color: var(--border-1);
  color: var(--cp-gray-50);
  background: var(--surface-2);
}

.trade-ticket-shell .trade-process-step.is-upcoming strong,
.trade-ticket-shell .trade-process-step.is-upcoming p {
  color: var(--content-3);
}

/* Multi-item Trade-In bundle: one chip per item. The × marks an item the
   customer kept as not purchased; Restore brings it back before the payout. */
.trade-bundle-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.trade-bundle-item {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.trade-bundle-item:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--border-1));
}

.trade-bundle-item-select {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--content-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.trade-bundle-item-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.trade-bundle-item-meta {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--content-2);
}

.trade-bundle-item-remove,
.trade-bundle-item-restore {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: 0;
  border-left: 1px solid var(--border-1);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.trade-bundle-item-remove {
  width: 38px;
  color: var(--content-3);
}

.trade-bundle-item-restore {
  padding: 0 var(--space-3);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.trade-bundle-item-remove svg,
.trade-bundle-item-restore svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trade-bundle-item-remove:hover {
  background: color-mix(in srgb, var(--cp-danger) 14%, transparent);
  color: var(--cp-danger);
}

.trade-bundle-item-restore:hover {
  background: color-mix(in srgb, var(--cp-accent) 12%, transparent);
}

.trade-bundle-item-select:focus-visible,
.trade-bundle-item-remove:focus-visible,
.trade-bundle-item-restore:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: -2px;
}

.trade-bundle-item-remove[disabled],
.trade-bundle-item-restore[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.trade-bundle-item.is-selected:not(.is-removed) {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
}

.trade-bundle-item.is-selected:not(.is-removed) .trade-bundle-item-select,
.trade-bundle-item.is-selected:not(.is-removed) .trade-bundle-item-meta,
.trade-bundle-item.is-selected:not(.is-removed) .trade-bundle-item-remove {
  color: var(--cp-accent-content);
}

.trade-bundle-item.is-selected:not(.is-removed) .trade-bundle-item-remove {
  border-left-color: color-mix(in srgb, var(--cp-accent-content) 35%, transparent);
}

.trade-bundle-item.is-selected:not(.is-removed) .trade-bundle-item-remove:hover {
  background: var(--cp-danger);
  color: var(--cp-accent-content);
}

.trade-bundle-item.is-removed {
  border-style: dashed;
  background: var(--surface-2);
}

.trade-bundle-item.is-removed .trade-bundle-item-name {
  color: var(--content-3);
  text-decoration: line-through;
}

.trade-bundle-item.is-removed.is-selected {
  border-style: solid;
  border-color: var(--cp-accent);
  box-shadow: inset 0 0 0 1px var(--cp-accent);
}

@media (max-width: 640px) {
  .trade-bundle-item {
    flex: 1 1 100%;
  }
}

/* display:grid on <details> defeats the native closed-state hiding in some
   engines — force non-summary children hidden while the panel is collapsed. */
.trade-ticket-shell .trade-final-inspection-panel:not([open]) > :not(summary) {
  display: none !important;
}

.trade-ticket-shell .trade-final-inspection-panel {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 24%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-accent-soft) 72%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.trade-ticket-shell .trade-final-inspection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  cursor: pointer;
}

.trade-ticket-shell .trade-final-inspection-head::-webkit-details-marker {
  display: none;
}

.trade-ticket-shell .trade-final-inspection-head::marker {
  content: "";
}

.trade-ticket-shell .trade-final-inspection-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.trade-ticket-shell .trade-final-inspection-badge {
  display: grid;
  place-items: center;
  width: calc(var(--space-10) + var(--space-4));
  height: calc(var(--space-10) + var(--space-4));
  flex: 0 0 calc(var(--space-10) + var(--space-4));
  border-radius: var(--radius-circle);
  color: var(--cp-accent-content);
  background: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.trade-ticket-shell .trade-final-inspection-badge svg {
  width: var(--space-6);
  height: var(--space-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.trade-ticket-shell .trade-final-inspection-copy {
  min-width: 0;
}

.trade-ticket-shell .trade-final-inspection-copy .trade-final-inspection-eyebrow {
  display: block;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trade-ticket-shell .trade-final-inspection-copy h2 {
  margin: var(--space-1) 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.trade-ticket-shell .trade-final-inspection-copy p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.trade-ticket-shell .trade-final-inspection-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.trade-ticket-shell .trade-final-inspection-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  flex: 0 0 auto;
  padding: 0 var(--space-4);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-md);
  color: var(--cp-accent-content);
  background: var(--cp-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.trade-ticket-shell .trade-final-inspection-continue:hover {
  border-color: var(--cp-accent-hover);
  background: var(--cp-accent-hover);
  transform: translateY(-1px);
}

.trade-ticket-shell .trade-final-inspection-continue:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.trade-ticket-shell .trade-final-inspection-chevron {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 var(--space-8);
  border-radius: var(--radius-circle);
  color: var(--content-3);
  transition: color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.trade-ticket-shell .trade-final-inspection-chevron svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.trade-ticket-shell .trade-final-inspection-panel[open] .trade-final-inspection-chevron {
  color: var(--cp-accent);
  transform: rotate(180deg);
}

.trade-ticket-shell #trade-final-inspection-tasks {
  display: grid;
  gap: var(--space-3);
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task {
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 14%, var(--border-1));
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task::before {
  display: none;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-collapsed {
  margin: 0;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task > .trade-inspection-task-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--space-10) + var(--space-8));
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  color: var(--content-1);
  background: var(--surface);
  box-shadow: none;
  cursor: pointer;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-collapsed > .trade-inspection-task-head {
  min-height: calc(var(--space-10) + var(--space-8));
  border-bottom: 0;
  color: var(--content-1);
  background: var(--surface);
  box-shadow: none;
}

.trade-ticket-shell .trade-inspection-task-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-icon {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  flex: 0 0 var(--space-10);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 25%, transparent);
  border-radius: var(--radius-md);
  color: var(--cp-accent);
  background: var(--cp-accent-soft);
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-icon svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* The dark section-head rule (.trade-section > .trade-section-head svg { color:#fff })
   also matches these light task rows, which reuse those classes — win it back with
   higher specificity so glyphs render in solid accent (locks stay strong gray). */
.trade-ticket-shell .trade-section.trade-inspection-task > .trade-inspection-task-head svg {
  color: var(--cp-accent);
  stroke: currentColor;
}
.trade-ticket-shell .trade-section.trade-inspection-task > .trade-inspection-task-head .repair-section-toggle:hover svg {
  color: var(--cp-accent-hover);
}
.trade-ticket-shell .trade-section.trade-inspection-task > .trade-inspection-task-head .repair-section-lock svg,
.trade-ticket-shell .trade-section.trade-inspection-task.is-locked > .trade-inspection-task-head svg {
  color: var(--cp-gray-60);
}

.trade-ticket-shell .trade-inspection-task-copy {
  min-width: 0;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-copy h3,
.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-collapsed .trade-inspection-task-copy h3 {
  display: block;
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.trade-ticket-shell .trade-inspection-task-copy p {
  margin: var(--space-1) 0 0;
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.trade-ticket-shell .trade-inspection-task[data-tab="photos"] > .trade-inspection-task-head .repair-section-summary {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  color: var(--content-2);
  background: var(--surface-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.trade-ticket-shell .trade-inspection-task[data-tab="m360"] > .trade-inspection-task-head .repair-section-summary,
.trade-ticket-shell .trade-inspection-task[data-tab="evaluation"] > .trade-inspection-task-head .repair-section-summary {
  display: none;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-head .trade-section-head-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-head .trade-small-btn {
  min-height: var(--space-8);
  border-color: var(--cp-accent);
  border-radius: var(--radius-md);
  color: var(--cp-accent);
  background: var(--surface);
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-head .trade-small-btn:hover {
  border-color: var(--cp-accent-hover);
  color: var(--cp-accent-hover);
  background: var(--cp-accent-soft);
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-head .repair-section-toggle,
.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-collapsed .repair-section-toggle {
  width: var(--space-8);
  height: var(--space-8);
  flex-basis: var(--space-8);
  border-color: color-mix(in srgb, var(--cp-accent) 25%, transparent);
  border-radius: var(--radius-md);
  color: var(--cp-accent);
  background: var(--cp-accent-soft);
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-head .repair-section-toggle svg {
  fill: none;
  stroke: currentColor;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-head .repair-section-toggle:hover,
.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-collapsed .repair-section-toggle:hover {
  border-color: var(--cp-accent-hover);
  color: var(--cp-accent-hover);
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--surface));
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task-head .repair-section-toggle:focus-visible,
.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-collapsed .repair-section-toggle:focus-visible {
  outline: 0;
  border-color: var(--cp-accent);
  color: var(--cp-accent);
  background: var(--cp-accent-soft);
  box-shadow: var(--focus-ring);
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-locked {
  border-color: var(--border-1);
  background: var(--cp-gray-10);
  box-shadow: none;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-locked > .trade-inspection-task-head,
.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-locked.is-collapsed > .trade-inspection-task-head {
  border-bottom: 0;
  color: var(--cp-gray-60);
  background: var(--cp-gray-10);
  cursor: not-allowed;
}

.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-locked .trade-inspection-task-copy,
.trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task.is-locked .trade-section-head-actions > :not(.repair-section-lock) {
  opacity: .58;
}

.trade-ticket-shell .trade-final-inspection-panel .repair-section-lock {
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 var(--space-8);
  border: 1px solid color-mix(in srgb, var(--cp-gray-60) 25%, transparent);
  border-radius: var(--radius-md);
  color: var(--cp-gray-60);
  background: var(--cp-gray-10);
  cursor: not-allowed;
}

.trade-ticket-shell .trade-final-inspection-panel .repair-section-lock svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.trade-ticket-shell .trade-final-inspection-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  color: var(--content-2);
}

.trade-ticket-shell .trade-final-inspection-info > span {
  display: grid;
  place-items: center;
  flex: 0 0 var(--space-5);
  color: var(--cp-accent);
}

.trade-ticket-shell .trade-final-inspection-info svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.trade-ticket-shell .trade-final-inspection-info p {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body);
}

@media (max-width: 1100px) {
  .trade-ticket-shell .trade-process-step:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .trade-ticket-shell .trade-process-step::after {
    display: none;
  }

  .trade-ticket-shell .trade-final-inspection-panel {
    padding: var(--space-4);
  }

  .trade-ticket-shell .trade-final-inspection-head {
    display: grid;
  }

  .trade-ticket-shell .trade-final-inspection-heading {
    align-items: flex-start;
  }

  .trade-ticket-shell .trade-final-inspection-head-actions {
    width: 100%;
  }

  .trade-ticket-shell .trade-final-inspection-continue {
    flex: 1 1 auto;
  }

  .trade-ticket-shell .trade-final-inspection-panel .trade-inspection-task > .trade-inspection-task-head {
    align-items: center;
    flex-wrap: wrap;
  }

  .trade-ticket-shell .trade-inspection-task-main {
    flex-basis: calc(100% - var(--space-10));
  }

  .trade-ticket-shell .trade-inspection-task[data-tab="photos"] > .trade-inspection-task-head .repair-section-summary {
    order: 3;
    margin-left: calc(var(--space-10) + var(--space-3));
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .cp #metrics-page .metric-panel-head {
    align-items: flex-start;
    flex-direction: column;
    padding-block: var(--space-3);
  }

  .cp #metrics-page .metric-trend-selector {
    justify-content: flex-start;
  }

  .cp #metrics-page .metric-trend-layout {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .cp #metrics-page .metric-trend-axis {
    min-width: 58px;
  }

  .cp #metrics-page .metric-mix-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cp #metrics-page .metric-mix-summary .metric-details-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ==========================================================================
   Metrics information architecture — sectioned, chart-first workspace
   ========================================================================== */
.cp #metrics-page.metrics-page {
  width: calc(100% - (var(--space-8) * 2));
  max-width: calc(var(--space-10) * 48);
  margin-inline: auto;
  padding-bottom: var(--space-10);
}

.cp #metrics-page .metrics-shell {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.cp #metrics-page :where(.metrics-workspace-head, .metrics-section-panel, .metrics-section-intro, .metrics-section-kpis) {
  min-width: 0;
}

.cp #metrics-page .metrics-workspace-head {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 5), 0.45fr) minmax(0, 1.55fr);
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page .metrics-workspace-head > div:first-child {
  display: grid;
  gap: var(--space-1);
  max-width: calc(var(--space-10) * 20);
}

.cp #metrics-page .metrics-workspace-eyebrow {
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cp #metrics-page .metrics-workspace-head h1 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #metrics-page .metrics-workspace-head p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #metrics-page .metrics-workspace-head .metrics-title-bar {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cp #metrics-page .metrics-workspace-head .metrics-title-copy h2 {
  font-size: var(--text-2xl);
}

.cp #metrics-page :where(.metrics-section-tabs, .metrics-time-tabs) {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #metrics-page .metrics-section-tabs {
  position: static;
  top: auto;
  z-index: auto;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 4), 1fr));
  margin-bottom: 0;
  box-shadow: none;
}

.cp #metrics-page .metrics-time-tabs {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 4), 1fr));
  margin-bottom: var(--space-6);
}

.cp #metrics-page .metrics-global-controls {
  min-height: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page .metrics-global-controls .metrics-title-copy {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
}

.cp #metrics-page .metrics-global-controls :where(.metrics-filter-title, #metrics-scope-label) {
  color: var(--content-2);
  opacity: 1;
}

.cp #metrics-page .metrics-global-controls .metrics-title-copy h2 {
  display: none;
}

.cp #metrics-page :where(.metrics-section-tabs [data-metrics-section], .metrics-time-tabs [data-metrics-time-section]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: calc(var(--space-10) + var(--space-1));
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.cp #metrics-page :where(.metrics-section-tabs [data-metrics-section], .metrics-time-tabs [data-metrics-time-section]):hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #metrics-page :where(
  .metrics-section-tabs [data-metrics-section].active,
  .metrics-section-tabs [data-metrics-section][aria-selected="true"],
  .metrics-time-tabs [data-metrics-time-section].active,
  .metrics-time-tabs [data-metrics-time-section][aria-selected="true"]
) {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page :where(.metrics-section-tabs [data-metrics-section], .metrics-time-tabs [data-metrics-time-section]):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.cp #metrics-page .metrics-section-panel[data-metrics-section-panel],
.cp #metrics-page [data-metrics-time-panel] {
  display: none;
}

.cp #metrics-page .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"]:not(.hidden):not([hidden]) {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  animation: metrics-ia-panel-enter var(--dur-base) var(--ease-out);
}

.cp #metrics-page [data-metrics-time-panel][aria-hidden="false"]:not(.hidden):not([hidden]) {
  display: block;
  animation: metrics-ia-panel-enter var(--dur-base) var(--ease-out);
}

@keyframes metrics-ia-panel-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cp #metrics-page .metrics-section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

.cp #metrics-page .metrics-section-intro > div:first-child {
  display: grid;
  gap: var(--space-1);
  max-width: calc(var(--space-10) * 20);
}

.cp #metrics-page .metrics-section-intro :where(h2, h3) {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #metrics-page .metrics-section-intro p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #metrics-page .metrics-section-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.cp #metrics-page .metrics-section-kpis > :where(.metric-card, .metric-op-tile, .metric-time-card) {
  min-width: 0;
  min-height: calc(var(--space-10) * 3);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.cp #metrics-page .metrics-section-kpis > :where(.metric-card, .metric-op-tile, .metric-time-card):hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page .metrics-section-panel :where(.metrics-card-grid, .metrics-ops-grid, .metrics-analysis-grid) {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cp #metrics-page .metrics-section-panel .metrics-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp #metrics-page .metrics-section-panel .metrics-ops-grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 4), 1fr));
}

.cp #metrics-page .metrics-section-panel .metrics-ops-grid .metric-op-tile {
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-3) var(--space-4);
}

.cp #metrics-page .metrics-section-panel .metrics-analysis-grid {
  gap: var(--space-6);
}

.cp #metrics-page .metrics-section-panel :where(.metric-panel, .metric-time-chart-panel) {
  border-color: var(--border-1);
  background: var(--surface);
  box-shadow: none;
}

.cp #metrics-page .metrics-section-panel :where(.metric-panel, .metric-time-chart-panel):hover {
  border-color: var(--border-2);
}

.cp #metrics-page .metrics-section-panel .metric-panel-head {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.cp #metrics-page .metrics-section-panel .metric-sales-chart {
  min-height: calc(var(--space-10) * 7);
}

.cp #metrics-page .metrics-section-panel .metric-list-panel,
.cp #metrics-page .metrics-section-panel .metric-cash-grid {
  min-height: calc(var(--space-10) * 5);
}

.cp #metrics-page .metrics-section-panel .metric-time-report {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #metrics-page .metrics-section-panel .metric-time-report > .metric-panel-head {
  min-height: 0;
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: transparent;
}

.cp #metrics-page .metrics-section-panel .metric-time-card-grid {
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border: 0;
  background: transparent;
}

.cp #metrics-page .metrics-section-panel .metric-time-card {
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.cp #metrics-page .metrics-section-panel .metric-time-chart-grid {
  gap: var(--space-4);
  padding: 0;
}

.cp #metrics-page .metrics-section-panel .metric-time-chart-grouped,
.cp #metrics-page .metrics-section-panel .metric-time-details {
  margin: var(--space-4) 0 0;
}

.cp #metrics-page :where(.metric-time-details, .commission-details) {
  border-color: var(--border-1);
  box-shadow: none;
}

.cp #metrics-page :where(.metric-time-details, .commission-details) summary {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  font-size: var(--text-sm);
}

.cp #metrics-page :where(.metric-time-details, .commission-details) summary:hover {
  background: var(--surface-hover);
}

.cp #metrics-page .metrics-section-panel .commission-center {
  gap: var(--space-5);
  padding: 0;
  border: 0;
  background: transparent;
}

.cp #metrics-page .metrics-section-panel .commission-center-head h2 {
  font-size: var(--text-xl);
}

.cp #metrics-page .metrics-section-panel .commission-scope-row {
  padding-top: 0;
  border-top: 0;
}

.cp #metrics-page .commission-compact-empty {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-4);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #metrics-page :where(.commission-center.is-empty, #commission-content.is-empty) .commission-compact-empty,
.cp #metrics-page .commission-compact-empty.is-empty:not(.hidden) {
  display: flex;
}

.cp #metrics-page :where(.commission-center.is-empty, #commission-content.is-empty) :where(
  .commission-amount-grid,
  .commission-team-panel,
  .commission-details
) {
  display: none;
}

.cp #metrics-page .commission-center.is-empty {
  gap: var(--space-2);
}

.cp #metrics-page .commission-center.is-empty .commission-cycle-strip {
  box-shadow: none;
}

.cp #metrics-page .commission-center.is-empty .commission-cycle-strip > div {
  padding: var(--space-2) var(--space-3);
}

.cp #metrics-page .commission-center.is-empty .commission-compact-empty {
  min-height: var(--space-10);
  padding-block: var(--space-2);
}

.cp #metrics-page .commission-compact-empty strong {
  color: var(--content-1);
  font-weight: var(--weight-black);
}

.cp #metrics-page .commission-compact-empty span {
  color: var(--content-3);
}

.cp #metrics-page .commission-center.is-empty .commission-empty:not(.hidden) {
  min-height: 0;
  padding: var(--space-4);
}

.cp #metrics-page :where(.metric-chart-empty, .metrics-empty, .commission-empty) {
  min-height: 0;
  padding: var(--space-4);
  line-height: var(--leading-body);
}

@media (max-width: 900px) {
  .cp #metrics-page.metrics-page {
    width: calc(100% - (var(--space-5) * 2));
  }

  .cp #metrics-page .metrics-workspace-head {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }

  .cp #metrics-page .metrics-section-tabs {
    position: static;
  }

  .cp #metrics-page .commission-team-chart-row {
    grid-template-columns: minmax(calc(var(--space-10) * 3), calc(var(--space-10) * 4)) minmax(0, 1fr) var(--space-8);
  }

  .cp #metrics-page .commission-team-chart-row .commission-member-toggle {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .cp #metrics-page .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"]:not(.hidden):not([hidden]) {
    gap: var(--space-6);
    padding: var(--space-5);
  }

  .cp #metrics-page .metrics-section-kpis,
  .cp #metrics-page .metrics-section-panel .metrics-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #metrics-page .metrics-section-panel .metrics-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #metrics-page .metrics-section-panel .metric-panel-wide {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .cp #metrics-page.metrics-page {
    width: calc(100% - var(--space-5));
  }

  .cp #metrics-page .metrics-workspace-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
  }

  .cp #metrics-page .metrics-workspace-head .metrics-title-bar,
  .cp #metrics-page .metrics-section-intro,
  .cp #metrics-page .commission-center-head,
  .cp #metrics-page .commission-scope-row {
    align-items: stretch;
    flex-direction: column;
  }

  .cp #metrics-page .metrics-workspace-head .metrics-title-copy h2 {
    font-size: var(--text-xl);
  }

  .cp #metrics-page .metrics-section-tabs,
  .cp #metrics-page .metrics-time-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #metrics-page :where(.metrics-section-tabs, .metrics-time-tabs) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cp #metrics-page :where(.metrics-section-tabs [data-metrics-section], .metrics-time-tabs [data-metrics-time-section]) {
    min-height: var(--space-10);
    padding: var(--space-2);
    font-size: var(--text-xs);
  }

  .cp #metrics-page .commission-team-chart-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cp #metrics-page .commission-team-chart-row .commission-chart-label,
  .cp #metrics-page .commission-team-chart-row .commission-member-toggle {
    grid-column: 1;
  }

  .cp #metrics-page .commission-team-chart-row .commission-chart-track {
    grid-column: 1 / -1;
  }

  .cp #metrics-page .commission-team-chart-row > strong {
    grid-column: 2;
    grid-row: 1;
  }

  .cp #metrics-page .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"]:not(.hidden):not([hidden]) {
    gap: var(--space-5);
    padding: var(--space-4) var(--space-3);
  }

  .cp #metrics-page .metrics-section-intro {
    gap: var(--space-3);
  }

  .cp #metrics-page .metrics-section-kpis > :where(.metric-card, .metric-op-tile, .metric-time-card) {
    min-height: calc(var(--space-10) * 2);
    padding: var(--space-3);
  }

  .cp #metrics-page .metrics-section-panel .metrics-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #metrics-page .metrics-section-panel .metrics-analysis-grid {
    gap: var(--space-4);
  }

  .cp #metrics-page .metrics-time-tabs {
    margin-bottom: var(--space-4);
  }

  .cp #metrics-page .metrics-section-panel .metric-time-report > .metric-panel-head {
    gap: var(--space-3);
  }

  .cp #metrics-page .commission-compact-empty {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-3);
  }
}

@media (min-width: 500px) and (max-width: 620px) {
  .cp #metrics-page .metrics-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .cp #metrics-page .metrics-filter-row .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 390px) {
  .cp #metrics-page.metrics-page {
    width: calc(100% - var(--space-3));
  }

  .cp #metrics-page .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"]:not(.hidden):not([hidden]) {
    padding-inline: var(--space-2);
  }

  .cp #metrics-page .metrics-section-kpis,
  .cp #metrics-page .metrics-section-panel .metrics-card-grid,
  .cp #metrics-page .metrics-section-panel .metrics-ops-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #metrics-page .metrics-section-intro :where(h2, h3) {
    font-size: var(--text-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp #metrics-page .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"]:not(.hidden):not([hidden]),
  .cp #metrics-page [data-metrics-time-panel][aria-hidden="false"]:not(.hidden):not([hidden]) {
    animation: none;
  }

  .cp #metrics-page :where(.metrics-section-tabs [data-metrics-section], .metrics-time-tabs [data-metrics-time-section]),
  .cp #metrics-page :where(.commission-chart-track span, .commission-progress-track span, .metric-time-chart-bar) {
    transition: none;
  }
}

/* Dashboard dark mode extends through the contextual toolbar while leaving
   the shared toolbar unchanged on every other page. */
body.dashboard-dark-active .subbar {
  border-bottom-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface-2);
}

body.dashboard-dark-active .subbar-breadcrumb {
  color: var(--cp-dashboard-dark-content-2);
}

body.dashboard-dark-active :where(.search-scopes, .subbar .top-search, .subbar .top-icon-btn, .subbar .repair-price-calc-btn) {
  border-color: var(--cp-dashboard-dark-border-1);
}

body.dashboard-dark-active .scope-btn {
  border-right-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface-3);
  color: var(--cp-dashboard-dark-content-2);
}

body.dashboard-dark-active .scope-btn:hover {
  background: var(--cp-dashboard-dark-surface-hover);
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active .scope-btn.active {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

body.dashboard-dark-active .subbar .top-search {
  background: var(--cp-dashboard-dark-surface);
}

body.dashboard-dark-active .subbar #top-search-input,
body.dashboard-dark-active .subbar #top-search-input:placeholder-shown,
body.dashboard-dark-active .subbar #top-search-input:focus {
  background: var(--cp-dashboard-dark-surface);
  background-color: var(--cp-dashboard-dark-surface);
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active .subbar .top-search input::placeholder {
  color: var(--cp-dashboard-dark-content-3);
}

body.dashboard-dark-active .subbar .top-icon-btn {
  color: var(--cp-accent);
  background: var(--cp-dashboard-dark-surface);
}

body.dashboard-dark-active .subbar .repair-price-calc-btn {
  color: var(--cp-dashboard-dark-content-1);
  background: var(--cp-dashboard-dark-surface);
}

body.dashboard-dark-active .subbar .repair-price-calc-btn:hover {
  background: var(--cp-dashboard-dark-surface-hover);
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active #home-page .dashboard-activity-row strong {
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active #home-page .dashboard-activity-row span {
  color: var(--cp-dashboard-dark-content-2);
}

body.dashboard-dark-active #home-page .progress-metric.warning strong,
body.dashboard-dark-active #home-page .progress-metric.critical strong {
  color: var(--cp-dashboard-dark-canvas);
}

/* Keep the converted workspace pages calm and neutral at night. The semantic
   status chips retain their established colors so urgency is still legible. */
body.dashboard-dark-active :is(#home-page, #my-work-page) .dashboard-title-bar {
  background: var(--cp-dashboard-dark-surface-2);
  border-bottom-color: var(--cp-dashboard-dark-border-1);
}

body.dashboard-dark-active #my-work-page {
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active #my-work-page :is(.repair-panel, .my-work-chat-panel, .my-work-card, .my-work-admin-row) {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface);
  box-shadow: none;
}

body.dashboard-dark-active #my-work-page :is(.repair-panel-title, .my-work-chat-header) {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface-3);
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active #my-work-page :is(.my-work-section-title, .my-work-card-title, .my-work-admin-row-main strong, .my-work-inline-check) {
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active #my-work-page :is(.my-work-subtitle, .my-work-card-desc, .my-work-card-meta, .my-work-admin-row-meta, .my-work-admin-row-note, .my-work-form-hint, .my-work-form .field label) {
  color: var(--cp-dashboard-dark-content-2);
}

body.dashboard-dark-active #my-work-page .my-work-section > summary.my-work-section-title:hover {
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active #my-work-page :is(.my-work-form .field input, .my-work-form .field textarea, .my-work-form .field select, .my-work-admin-filters select) {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface-2);
  color: var(--cp-dashboard-dark-content-1);
}

body.dashboard-dark-active #my-work-page .my-work-recurring-fields {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface-2);
}

/* React My Work uses the same semantic tokens as the vanilla workboard.
   Its command-center dialogs are portalled to <body>, so mirror the page
   scope there instead of letting a light token set leak into the dialog. */
body.dashboard-dark-active :is(#my-work-react-root, .my-work-react-portal) {
  --surface: var(--cp-dashboard-dark-surface);
  --surface-2: var(--cp-dashboard-dark-surface-2);
  --surface-3: var(--cp-dashboard-dark-surface-3);
  --surface-hover: var(--cp-dashboard-dark-surface-hover);
  --content-1: var(--cp-dashboard-dark-content-1);
  --content-2: var(--cp-dashboard-dark-content-2);
  --content-3: var(--cp-dashboard-dark-content-3);
  --border-1: var(--cp-dashboard-dark-border-1);
  --border-2: var(--cp-dashboard-dark-border-2);
  --cp-accent-soft: var(--cp-dashboard-dark-accent-soft);
  --cp-danger-soft: color-mix(in srgb, var(--cp-danger) 12%, var(--surface));
  --cp-warning-soft: color-mix(in srgb, var(--cp-warning) 12%, var(--surface));
}

/* A dark workspace needs severity to remain a signal, not a bright fill. */
body.dashboard-dark-active #my-work-react-root :is(.bg-danger-soft, .bg-warning-soft),
body.dashboard-dark-active .my-work-react-portal :is(.bg-danger-soft, .bg-warning-soft) {
  background-color: color-mix(in srgb, currentColor 10%, var(--surface)) !important;
}

body.dashboard-dark-active #my-work-react-root button[aria-haspopup="listbox"],
body.dashboard-dark-active #my-work-react-root [role="listbox"] {
  border-color: var(--cp-dashboard-dark-border-2) !important;
  background-color: var(--cp-dashboard-dark-surface) !important;
}

body.dashboard-dark-active #my-work-react-root nav[aria-label="Department queues"] > div > div {
  display: contents !important;
}

body.dashboard-dark-active #my-work-react-root :is(div, nav):has(> div > nav[aria-label="Department queues"]) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dashboard-dark-active .subbar :is(.repair-price-calc-btn, .top-search, #top-search-input),
body.dashboard-dark-active .subbar :is(.search-scopes, .top-icon-btn) {
  border-color: var(--cp-dashboard-dark-border-2) !important;
}

body.dashboard-dark-active .subbar .scope-btn.active,
body.dashboard-dark-active .subbar #top-search-go-btn {
  border-color: var(--cp-accent) !important;
}

/* ===========================================================================
   Dark workspace integration — Dashboard and My Work
   A workspace should read as a small set of surfaces, not a stack of frames.
   Keep a border only when it marks a real interactive or data boundary.
   =========================================================================== */
body.dashboard-dark-active #home-page .repair-dashboard {
  gap: var(--space-3);
}

body.dashboard-dark-active #home-page .repair-panel {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface-2);
  box-shadow: none;
}

body.dashboard-dark-active #home-page .repair-panel-title {
  min-height: calc(var(--space-10) + var(--space-2));
  background: var(--cp-dashboard-dark-surface);
  border-bottom: 1px solid var(--cp-dashboard-dark-border-1);
}

body.dashboard-dark-active #home-page .alerts-panel .repair-panel-body {
  gap: var(--space-3);
  padding: var(--space-3);
  background: transparent;
}

/* The day strip and metrics share the panel surface. Their internal dividers are
   sufficient; wrapping each group in another card made the dashboard feel boxed in. */
body.dashboard-dark-active #home-page :is(.daily-strip, .dashboard-ops-grid) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.dashboard-dark-active #home-page .daily-strip > div {
  border-top: 1px solid var(--cp-dashboard-dark-border-1);
  border-bottom: 1px solid var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface);
}

body.dashboard-dark-active #home-page .daily-strip > div:first-child {
  border-left: var(--space-1) solid var(--cp-accent);
}

body.dashboard-dark-active #home-page .daily-strip > div:last-child {
  border-right: 1px solid var(--cp-dashboard-dark-border-1);
}

body.dashboard-dark-active #home-page .dashboard-ops-grid {
  gap: var(--space-2);
  padding: 0;
}

body.dashboard-dark-active #home-page .dashboard-op-card {
  border-color: var(--cp-dashboard-dark-border-1);
  border-left-width: 3px;
  background: var(--cp-dashboard-dark-surface);
}

body.dashboard-dark-active #home-page #dashboard-reorder-summary-btn,
body.dashboard-dark-active #home-page #dashboard-po-summary-btn {
  background: var(--cp-dashboard-dark-surface);
}

body.dashboard-dark-active #home-page .ticket-progress {
  min-height: auto;
  padding: var(--space-5) var(--space-3) var(--space-3);
}

body.dashboard-dark-active #home-page .ticket-progress h2 {
  margin-bottom: var(--space-3);
}

body.dashboard-dark-active #home-page .progress-card {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface);
  box-shadow: none;
}

body.dashboard-dark-active #home-page .dashboard-ops-alert {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface);
  box-shadow: none;
}

body.dashboard-dark-active #home-page .dashboard-ops-alert.warning,
body.dashboard-dark-active #home-page .dashboard-ops-alert.danger {
  border-top-color: var(--cp-dashboard-dark-border-1);
  border-right-color: var(--cp-dashboard-dark-border-1);
  border-bottom-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface);
}

body.dashboard-dark-active #home-page .dashboard-mini-table {
  border-color: var(--cp-dashboard-dark-border-1);
  background: var(--cp-dashboard-dark-surface-2);
}

/* My Work follows the same quiet hierarchy: page canvas, work surfaces, then
   borders only for rows, controls and dialogs that users need to distinguish. */
body.dashboard-dark-active :is(#my-work-react-root, .my-work-react-portal) {
  --border-1: color-mix(in srgb, var(--cp-dashboard-dark-border-1) 78%, var(--surface));
  --border-2: var(--cp-dashboard-dark-border-1);
  --shadow-sm: none;
  --shadow-lg: 0 18px 44px rgb(0 0 0 / 38%);
}

body.dashboard-dark-active #my-work-react-root {
  background: var(--cp-dashboard-dark-surface-2);
}

body.dashboard-dark-active #my-work-react-root nav[aria-label="Department queues"] {
  gap: var(--space-2);
}

body.dashboard-dark-active #my-work-react-root nav[aria-label="Department queues"] button {
  box-shadow: none;
}

body.dashboard-dark-active #my-work-react-root :is(.bg-danger-soft, .bg-warning-soft, .bg-ticket-repair-soft, .bg-ticket-trade-soft),
body.dashboard-dark-active .my-work-react-portal :is(.bg-danger-soft, .bg-warning-soft, .bg-ticket-repair-soft, .bg-ticket-trade-soft) {
  background-color: color-mix(in srgb, currentColor 7%, var(--surface)) !important;
}

/* Dashboard composition is theme-neutral. Both themes share the same content
   hierarchy; dark mode only supplies its palette above. */
.cp #home-page .repair-dashboard {
  gap: var(--space-3);
}

/* Children such as the day strip may touch the panel edge. Clip them to the
   panel radius so a nested surface can never square off a rounded corner. */
.cp #home-page .repair-panel {
  overflow: hidden;
}

.cp #home-page .alerts-panel .repair-panel-body {
  gap: var(--space-3);
  padding: var(--space-3);
}

.cp #home-page :is(.daily-strip, .dashboard-ops-grid) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #home-page .daily-strip > div {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #home-page .daily-strip > div:first-child {
  border-left: var(--space-1) solid var(--cp-accent);
}

.cp #home-page .daily-strip > div:last-child {
  border-right: 1px solid var(--border-1);
}

.cp #home-page .dashboard-ops-grid {
  gap: var(--space-2);
  padding: 0;
}

.cp #home-page .dashboard-op-card {
  border-left-width: 3px;
  box-shadow: none;
}

.cp #home-page :is(#dashboard-reorder-summary-btn, #dashboard-po-summary-btn) {
  background: var(--surface);
}

.cp #home-page .ticket-progress {
  min-height: auto;
  padding: var(--space-5) var(--space-3) var(--space-3);
}

.cp #home-page .ticket-progress h2 {
  margin-bottom: var(--space-3);
}

.cp #home-page .progress-card,
.cp #home-page .dashboard-ops-alert {
  box-shadow: none;
}

.cp #home-page :is(.dashboard-ops-alert.warning, .dashboard-ops-alert.danger) {
  border-top-color: var(--border-1);
  border-right-color: var(--border-1);
  border-bottom-color: var(--border-1);
  background: var(--surface);
}

/* My Work composition is also theme-neutral. The legacy shell carried a
   decorative gradient, oversized radius and deep shadow that read as a second
   container behind the real Workboard. Keep only the operational panel. */
.cp #my-work-page .repair-dashboard.my-work-shell {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.cp #my-work-page .my-work-context-bar {
  border-color: var(--border-1);
  background: transparent;
  box-shadow: none;
}

/* Receive uses the same two-level structure as the dashboard: one workspace
   surface, then the scan and recent-results regions. This is intentionally
   theme-neutral so the layout remains identical in light and dark mode. */
.cp #receive-page > .dashboard-breadcrumb {
  display: none;
}

.cp #receive-page .inventory-shell {
  overflow: hidden;
  border-color: var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.cp #receive-page .inventory-title-bar {
  min-height: auto;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
}

.cp #receive-page .inventory-title-bar h2,
.cp #receive-page .inventory-title-bar h2 span {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
}

.cp #receive-page .inventory-title-bar h2 span {
  color: var(--content-2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.cp #receive-page .receive-station-layout {
  gap: var(--space-3);
  padding: var(--space-3);
}

.cp #receive-page :is(.receive-station-scan-panel, .receive-station-results-panel) {
  border-color: var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.cp #receive-page .receive-station-scan-panel {
  gap: var(--space-3);
  padding: var(--space-4);
}

.cp #receive-page .receive-station-panel-head {
  min-height: auto;
  padding-bottom: var(--space-3);
  border-color: var(--border-1);
  color: var(--content-3);
}

.cp #receive-page .receive-station-panel-head strong {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.cp #receive-page .receive-station-panel-head span,
.cp #receive-page .receive-station-field {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #receive-page .receive-station-field {
  gap: var(--space-2);
}

.cp #receive-page .receive-station-field input {
  border-color: var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent) 12%, transparent);
  font-size: var(--text-lg);
}

.cp #receive-page .receive-station-field input::placeholder {
  color: var(--content-3);
}

.cp #receive-page .receive-station-results-panel .receive-station-panel-head {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.cp #receive-page .receive-station-table-wrap {
  background: var(--surface);
}

.cp #receive-page .receive-station-table :is(th, td) {
  border-color: var(--border-1);
  color: var(--content-1);
}

.cp #receive-page .receive-station-table th {
  background: var(--surface-2);
  color: var(--content-3);
}

.cp #receive-page #receive-station-empty {
  margin: var(--space-3);
  border-color: var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-2);
}

body.dashboard-dark-active #receive-page .inventory-shell {
  box-shadow: none;
}

body.dashboard-dark-active #receive-page .receive-station-badge.matched {
  background: color-mix(in srgb, var(--cp-success) 14%, var(--surface));
  color: var(--cp-success);
}

body.dashboard-dark-active #receive-page .receive-station-badge.unidentified {
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: var(--cp-warning);
}

body.dashboard-dark-active #receive-page .receive-station-badge.error {
  background: color-mix(in srgb, var(--cp-danger) 14%, var(--surface));
  color: var(--cp-danger);
}

/* ==========================================================================
   Integrated list workspaces
   --------------------------------------------------------------------------
   Data-heavy list pages use one containing surface. Toolbars, filters,
   summaries, and tables remain distinct through spacing and quiet surface
   changes instead of stacking bordered cards inside bordered cards.
   ========================================================================== */
.cp .cp-integrated-workspace {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :is(
  #tickets-list-view.cp-integrated-workspace,
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :where(
  .devices-toolbar,
  .inventory-toolbar,
  .inventory-filters,
  .tickets-filter-row,
  .selection-toolbar,
  .customers-table-wrap,
  .tickets-table-wrap
) {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #tickets-list-view.cp-integrated-workspace .panel-body {
  padding: 0;
}

.cp :is(
  #tickets-list-view.cp-integrated-workspace,
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-toolbar {
  gap: 0;
  padding: 0;
}

.cp :is(
  #tickets-list-view.cp-integrated-workspace,
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-toolbar-row-top {
  min-height: calc(var(--space-10) + var(--space-3));
  padding: var(--space-3) var(--space-5);
}

.cp :is(
  #tickets-list-view.cp-integrated-workspace,
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-toolbar-row-filters,
.cp :is(
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) > .inventory-filters {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
}

.cp #tickets-list-view.cp-integrated-workspace :where(.tickets-filter-row, .selection-toolbar) {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-1);
}

.cp #tickets-list-view.cp-integrated-workspace .selection-toolbar {
  background: var(--cp-accent-soft);
}

.cp :is(
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) > .inventory-toolbar {
  padding: var(--space-3) var(--space-5);
}

.cp #customers-page .cp-integrated-workspace .customers-summary-strip {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #customers-page .cp-integrated-workspace .customers-summary-strip > div {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp :is(
  #tickets-list-view.cp-integrated-workspace,
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :where(.customers-table-wrap, .tickets-table-wrap) {
  padding: 0;
  border-top: 1px solid var(--border-1);
}

.cp :is(
  #tickets-list-view.cp-integrated-workspace,
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :where(.customers-table, .tickets-queue-table) {
  border-radius: 0;
}

.cp #tickets-list-view.cp-integrated-workspace #tickets-empty {
  margin: 0;
  padding: var(--space-8) var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp :is(
  #inventory-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .inventory-empty {
  margin: 0;
  padding: var(--space-8) var(--space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #customers-page .cp-integrated-workspace #customers-list-section,
.cp #customers-page .cp-integrated-workspace #customer-devices-section .customers-table-wrap {
  padding: 0;
  border-top: 1px solid var(--border-1);
}

@media (max-width: 620px) {
  .cp :is(
    #tickets-list-view.cp-integrated-workspace,
    #inventory-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) :where(.devices-toolbar-row-top, .devices-toolbar-row-filters),
  .cp :is(
    #inventory-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) > :where(.inventory-toolbar, .inventory-filters),
  .cp #tickets-list-view.cp-integrated-workspace :where(.tickets-filter-row, .selection-toolbar) {
    padding-inline: var(--space-3);
  }

  .cp #customers-page .cp-integrated-workspace .customers-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3);
  }

  .cp #customers-page .cp-integrated-workspace > .inventory-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
  }

  .cp #customers-page .cp-integrated-workspace > .inventory-toolbar .inventory-view-controls {
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: wrap;
  }

  .cp #customers-page .cp-integrated-workspace > .inventory-toolbar .inventory-page-controls {
    justify-self: start;
  }

  .cp #customers-page .cp-integrated-workspace > .inventory-toolbar .inventory-actions {
    justify-self: end;
  }

  .cp :is(
    #tickets-list-view.cp-integrated-workspace,
    #inventory-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) :where(.devices-toolbar-row-top, .devices-pagination-summary, .devices-actions-group, .devices-right-controls) {
    flex-wrap: wrap;
    white-space: normal;
  }

  .cp :is(
    #tickets-list-view.cp-integrated-workspace,
    #inventory-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) .devices-pagination-summary {
    width: 100%;
    min-width: 0;
  }

  .cp :is(
    #tickets-list-view.cp-integrated-workspace,
    #inventory-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) .devices-pagination-summary .dev-tb-mini {
    min-width: 0;
    max-width: none;
    flex: 1 1 calc(var(--space-10) * 3);
  }

  .cp :is(
    #tickets-list-view.cp-integrated-workspace,
    #inventory-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) .devices-right-controls {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   System workspace harmony
   --------------------------------------------------------------------------
   Repeated data workspaces share one visual sequence: page heading, flat
   subsection rail, summary controls, contextual filters, and content. The
   outer workspace owns containment; inner regions use dividers rather than
   nested card frames.
   ========================================================================== */
.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  min-width: 0;
  margin: 0;
  padding: 0 var(--space-5);
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: thin;
}

.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a) {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: calc(var(--space-10) + var(--space-1));
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--content-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}

.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--space-1);
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: transparent;
  transform: scaleX(0);
  transform-origin: center;
  transition: background-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}

.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a):hover {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--content-1);
  box-shadow: none;
}

.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a).active,
.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a)[aria-selected="true"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cp-accent);
  box-shadow: none;
}

.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a).active::after,
.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a)[aria-selected="true"]::after {
  background: var(--cp-accent);
  transform: scaleX(1);
}

.cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* Inventory list and catalog-unit detail use the Tickets row order. */
.cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace {
  overflow: visible;
}

.cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace > .inventory-title-bar {
  min-height: 0;
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  box-shadow: none;
  color: var(--content-1);
}

.cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace > .inventory-title-bar h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace > .inventory-title-bar .inventory-page-subtitle {
  display: block;
  margin-top: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.cp #inventory-page .cp-integrated-workspace > .inventory-section-tabs {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
}

.cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace > .devices-toolbar {
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace .devices-toolbar-row-top {
  min-height: calc(var(--space-10) + var(--space-3));
  padding: var(--space-3) var(--space-5);
  border: 0;
  background: var(--surface);
}

.cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace .devices-toolbar-row-filters {
  min-height: calc(var(--space-10) + var(--space-2));
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.cp #inventory-item-detail-page .cp-integrated-workspace > .iid-facet-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #inventory-item-detail-page .cp-integrated-workspace > .iid-facet-strip .iid-facet {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--content-2);
}

.cp #inventory-item-detail-page .cp-integrated-workspace > .customers-table-wrap {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  box-shadow: none;
}

/* Metrics follows the same outer-shell hierarchy and flat subsection rail. */
.cp #metrics-page.metrics-page {
  width: calc(100% - (var(--inventory-side-space) * 2));
  max-width: none;
  margin-inline: auto;
}

.cp #metrics-page .metrics-shell.cp-integrated-workspace {
  min-width: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page .metrics-workspace-head {
  display: block;
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #metrics-page .metrics-workspace-head > div:first-child {
  max-width: none;
}

.cp #metrics-page .metrics-workspace-head h1 {
  font-size: var(--text-xl);
}

.cp #metrics-page .metrics-section-tabs[data-cp-workspace-tabs] {
  position: static;
  display: flex;
  grid-template-columns: none;
  gap: var(--space-8);
  margin: 0;
  padding: 0 var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
}

.cp #metrics-page .metrics-section-tabs[data-cp-workspace-tabs] [data-metrics-section] {
  justify-content: flex-start;
  min-height: calc(var(--space-10) + var(--space-1));
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
  white-space: nowrap;
}

.cp #metrics-page .metrics-section-tabs[data-cp-workspace-tabs] [data-metrics-section]:hover {
  background: transparent;
  color: var(--content-1);
}

.cp #metrics-page .metrics-section-tabs[data-cp-workspace-tabs] :where(
  [data-metrics-section].active,
  [data-metrics-section][aria-selected="true"]
) {
  background: transparent;
  color: var(--cp-accent);
  box-shadow: none;
}

.cp #metrics-page .metrics-global-controls {
  min-height: 0;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.cp #metrics-page .metrics-global-controls .metrics-filter-row {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #metrics-page .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"]:not(.hidden):not([hidden]) {
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.cp #metrics-page .metrics-section-intro {
  padding-bottom: var(--space-3);
}

.cp #metrics-page [data-metrics-slot="overview-analysis"] {
  grid-template-columns: minmax(0, 1fr);
}

.cp #metrics-page [data-metrics-slot="overview-analysis"] > .metric-panel {
  grid-column: 1 / -1;
  inline-size: 100%;
}

@media (max-width: 620px) {
  .cp :is(.cp-workspace-tabs, [data-cp-workspace-tabs]),
  .cp #metrics-page .metrics-section-tabs[data-cp-workspace-tabs] {
    gap: var(--space-5);
    padding-inline: var(--space-3);
  }

  .cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace > .inventory-title-bar,
  .cp #metrics-page .metrics-workspace-head {
    padding: var(--space-4) var(--space-3);
  }

  .cp :is(#inventory-page, #inventory-item-detail-page) .cp-integrated-workspace :where(
    .devices-toolbar-row-top,
    .devices-toolbar-row-filters,
    .iid-facet-strip
  ),
  .cp #metrics-page :where(.metrics-global-controls, .metrics-section-panel[data-metrics-section-panel][aria-hidden="false"]:not(.hidden):not([hidden])) {
    padding-inline: var(--space-3);
  }

  .cp #metrics-page.metrics-page {
    width: calc(100% - (var(--inventory-side-space) * 2));
  }

  .cp #metrics-page .metrics-global-controls {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cp #metrics-page .metrics-filter-row {
    inline-size: 100%;
  }
}

/* ==========================================================================
   System workspace foundation
   --------------------------------------------------------------------------
   Primary sections follow one durable rhythm:
   app chrome -> page gap -> title/navigation -> summary/pagination ->
   contextual filters -> content. Light and dark themes share the same layout;
   only semantic surface tokens change.
   ========================================================================== */
.cp #app-view > :is(
  #home-page,
  #tickets-page,
  #inventory-page,
  #receive-page,
  #inventory-item-detail-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #purchase-orders-page,
  #cash-register-page,
  #my-work-page,
  #metrics-page,
  #reports-page,
  #settings-page,
  #team-page,
  #hr-page
) {
  width: calc(100% - (var(--inventory-side-space) * 2));
  max-width: none;
  margin-inline: auto;
  padding-top: var(--space-3);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .inventory-shell,
  #receive-page .inventory-shell,
  #inventory-item-detail-page .inventory-shell,
  #customers-page .customers-shell,
  #purchase-orders-page .inventory-shell,
  #cash-register-page .cash-register-shell,
  #metrics-page .metrics-shell,
  #reports-page .reports-shell
) {
  margin-top: 0;
}

/* One heading contract: same height, type scale, alignment, and divider. */
.cp :is(
  #home-page,
  #tickets-page,
  #inventory-page,
  #receive-page,
  #inventory-item-detail-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #purchase-orders-page,
  #cash-register-page,
  #my-work-page,
  #metrics-page,
  #reports-page,
  #settings-page,
  #team-page
) :is(.cp-workspace-head, [data-cp-workspace-head]) {
  min-width: 0;
  min-height: calc(var(--space-10) + var(--space-8));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

.cp :is(
  #home-page,
  #tickets-page,
  #inventory-page,
  #receive-page,
  #inventory-item-detail-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #purchase-orders-page,
  #cash-register-page,
  #my-work-page,
  #metrics-page,
  #reports-page,
  #settings-page,
  #team-page
) :is(.cp-workspace-head, [data-cp-workspace-head]) :is(h1, h2) {
  margin: 0;
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.cp #tickets-list-view > [data-cp-workspace-head] .panel-head-row {
  width: 100%;
}

.cp #tickets-list-view > [data-cp-workspace-head] .eyebrow {
  display: none;
}

.cp :is(
  #inventory-page #inventory-page-subtitle,
  #customers-page #customers-page-subtitle,
  #receive-page [data-cp-workspace-head] h2 > span,
  #inventory-item-detail-page [data-cp-workspace-head] .inventory-page-subtitle,
  #opportunities-quotes-page .inventory-page-subtitle,
  #opportunities-appointments-page .inventory-page-subtitle,
  #team-page .staff-title-bar h2 > span
) {
  display: block;
  margin-top: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  white-space: normal;
}

.cp :is(
  #metrics-page .metrics-workspace-head p,
  #my-work-page .my-work-subtitle,
  #cash-register-page .cash-register-sub
) {
  margin: var(--space-1) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.cp #metrics-page .metrics-workspace-head > div:first-child,
.cp #cash-register-page .cash-register-head-text,
.cp #my-work-page .my-work-title-bar > div:first-child {
  min-width: min(calc(var(--space-10) * 6), 100%);
  max-width: calc(var(--space-10) * 16);
}

/* Secondary navigation belongs to the right side of the title at desktop. */
.cp :is(.cp-workspace-head, [data-cp-workspace-head]) > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) {
  align-self: stretch;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: var(--space-6);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp :is(.cp-workspace-head, [data-cp-workspace-head]) > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a) {
  align-self: stretch;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp :is(.cp-workspace-head, [data-cp-workspace-head]) > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a)::after {
  bottom: calc(var(--space-4) * -1);
}

/* Legacy section-specific tab selectors include page IDs, so repeat the
   contract with matching specificity. This is what keeps the navigation a
   quiet part of the title row instead of a second card nested inside it. */
.cp :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #metrics-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) {
  align-self: stretch;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: var(--space-6);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #metrics-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :is(button, a, [data-metrics-section]) {
  align-self: stretch;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--content-2);
  box-shadow: none;
  white-space: nowrap;
}

.cp :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #metrics-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :is(button, a, [data-metrics-section]):hover {
  background: transparent;
  color: var(--content-1);
}

.cp :is(
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #metrics-page
) [data-cp-workspace-head] > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :is(button, a, [data-metrics-section]).active,
.cp #metrics-page [data-cp-workspace-head] > [data-cp-workspace-tabs] [data-metrics-section][aria-selected="true"] {
  background: transparent;
  color: var(--cp-accent);
  box-shadow: none;
}

.cp #metrics-page .metrics-workspace-eyebrow {
  display: none;
}

.cp #customers-page #customers-section-tabs,
.cp #customers-page #customers-page-subtitle {
  display: flex;
}

.cp #customers-page #customers-page-subtitle {
  display: block;
}

/* Comparable data lists share the exact same two-row toolbar geometry. */
.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) > .devices-toolbar,
.cp #customers-page .cp-workspace-toolbar {
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-toolbar-row-top {
  min-height: calc(var(--space-10) + var(--space-3));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 0;
  background: var(--surface);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-pagination-summary {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: var(--space-3);
  min-width: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-pagination-summary strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-toolbar-row-filters {
  min-height: calc(var(--space-10) + var(--space-4));
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 8), calc(var(--space-10) * 13)) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.cp .cp-toolbar-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow: visible;
}

.cp .cp-toolbar-context .inventory-filter-pill {
  min-width: calc(var(--space-10) * 5);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-actions-group {
  justify-self: start;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :is(
  .dev-tb-mini,
  .devices-pagination-summary select,
  .inventory-page-controls select,
  .devices-date-chip,
  .inventory-filter-pill,
  .devices-link-btn,
  .inventory-reset,
  .devices-pagination-nav button,
  .inventory-page-btn
) {
  min-height: var(--space-8);
  border-color: var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-sm);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :is(.devices-link-btn, .inventory-reset) {
  padding-inline: var(--space-3);
  border: 1px solid var(--border-2);
  font-weight: var(--weight-bold);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :is(.devices-link-btn, .inventory-reset):hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  text-decoration: none;
}

/* Reset controls communicate that they have work to do. The integrated
   workspace selector is deliberately specific because its base button rule
   appears after the legacy per-page active-state rules. */
.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :is(.devices-link-btn.devices-link-active, .inventory-reset.is-active),
.devices-link-btn.devices-link-active,
.inventory-reset.is-active,
.cp-reset-control.is-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  cursor: pointer;
  text-decoration: none;
}

.tickets-saved-view-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.tickets-save-view-popover {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-2));
  left: 0;
  width: min(22rem, calc(100vw - var(--space-8)));
  padding: var(--space-4);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.tickets-save-view-popover label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.tickets-save-view-popover input {
  width: 100%;
}

.tickets-save-view-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ticket-header-status-cluster.ticket-header-status-table {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  grid-template-columns: minmax(0, max-content);
}

.ticket-header-control-group {
  display: inline-grid;
  align-items: stretch;
  justify-content: stretch;
  gap: var(--space-2);
  margin-left: auto;
  padding: var(--space-2);
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--content-inv) 26%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 7%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--content-inv) 12%, transparent);
}

.ticket-header-control-group[data-control-count="3"] {
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
}

.ticket-header-control-group[data-control-count="2"] {
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
}

.ticket-header-control-group[data-control-count="1"] {
  grid-template-columns: minmax(max-content, 1fr);
}

.ticket-header-control-group > .ticket-header-status-cluster,
.ticket-header-control-group > .ticket-header-actions {
  display: contents;
}

.ticket-header-control-group .ticket-header-status-table .ticket-detail-status-card,
.ticket-header-control-group .ticket-header-call-btn,
.ticket-header-control-group .ticket-print-label-btn {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: calc(var(--space-10) + var(--space-10) + var(--space-1));
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.ticket-header-control-group .ticket-header-status-table .ticket-detail-status-card {
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--ticket-status-chip-ink) 58%, var(--border-1));
  background: var(--ticket-status-chip-bg);
  color: var(--ticket-status-chip-ink);
}

.ticket-header-control-group .ticket-header-call-btn,
.ticket-header-control-group .ticket-print-label-btn {
  justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.ticket-header-control-group .ticket-header-call-btn {
  border: 1px solid var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.ticket-header-control-group .ticket-header-call-btn:hover {
  border-color: var(--cp-accent-hover);
  background: var(--cp-accent-hover);
  color: var(--cp-accent-content);
}

.ticket-header-control-group .ticket-print-label-btn {
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

.ticket-header-control-group .ticket-print-label-btn:hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--content-1);
}

.ticket-header-control-group .ticket-header-call-btn:focus-visible,
.ticket-header-control-group .ticket-print-label-btn:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.ticket-detail-status-department {
  display: block;
  margin-top: var(--space-1);
  color: var(--ticket-status-chip-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  opacity: 0.82;
}

@media (max-width: 560px) {
  .ticket-header-control-group[data-control-count] {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

.ticket-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ticket-header-call-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ticket-header-call-btn svg,
.ticket-print-label-btn svg,
.ticket-team-call-person > svg,
.ticket-team-call-search svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ticket-header-control-group .ticket-print-label-btn svg {
  color: var(--cp-warning);
}

.ticket-team-call-dialog {
  width: min(32rem, calc(100vw - var(--space-6)));
  max-height: min(44rem, calc(100vh - var(--space-8)));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--content-1);
}

.ticket-team-call-dialog::backdrop {
  background: rgb(15 23 42 / 52%);
  backdrop-filter: blur(2px);
}

.ticket-team-call-card {
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.ticket-team-call-card > header,
.chat-context-thread-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
}

.ticket-team-call-card > header span,
.chat-context-thread-panel > header span {
  display: block;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ticket-team-call-card > header h2 {
  margin: var(--space-1) 0 0;
  color: var(--content-1);
  font-size: var(--text-lg);
}

.ticket-context-icon-btn {
  display: inline-grid;
  width: var(--space-8);
  height: var(--space-8);
  place-items: center;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-lg);
}

.ticket-team-call-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4);
  padding-inline: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.ticket-team-call-search input {
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ticket-team-call-list {
  overflow-y: auto;
  max-height: 25rem;
  padding: 0 var(--space-2) var(--space-3);
}

.ticket-team-call-group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  color: var(--content-3);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ticket-team-call-group strong {
  color: inherit;
  font-size: inherit;
}

.ticket-team-call-group.is-sales-base {
  color: var(--cp-accent);
}

.ticket-team-call-person {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-1);
  text-align: left;
}

.ticket-team-call-person:hover {
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.ticket-team-call-person.is-sales-base {
  border: 1px solid color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.ticket-team-call-person.is-sales-base:hover {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--surface));
}

.ticket-team-call-person img,
.ticket-team-call-avatar {
  display: grid;
  width: var(--space-8);
  height: var(--space-8);
  place-items: center;
  border-radius: 50%;
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
  object-fit: cover;
  font-weight: var(--weight-bold);
}

.ticket-team-call-person strong,
.ticket-team-call-person small {
  display: block;
}

.ticket-team-call-person small {
  margin-top: 2px;
  color: var(--content-3);
}

.ticket-team-call-base-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.ticket-team-call-error,
.ticket-context-error {
  margin: var(--space-3) var(--space-4) var(--space-4);
  color: var(--cp-danger);
}

.ticket-context-loading,
.ticket-context-empty {
  padding: var(--space-4);
  color: var(--content-3);
  text-align: center;
}

.chat-context-thread-panel {
  position: fixed;
  z-index: var(--z-modal);
  right: var(--space-5);
  bottom: var(--space-5);
  width: min(25rem, calc(100vw - var(--space-8)));
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

.chat-context-thread-panel > header > div:last-child {
  display: flex;
  gap: var(--space-1);
}

.chat-context-thread-panel.is-minimized .chat-context-thread-content,
.chat-context-thread-panel.is-minimized > header {
  display: none;
}

.chat-context-thread-panel:not(.is-minimized) .chat-context-minimized {
  display: none;
}

.chat-context-minimized {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: var(--cp-accent);
  color: var(--content-inv);
  font-weight: var(--weight-bold);
  text-align: left;
}

.chat-context-thread-content {
  padding: var(--space-4);
}

.chat-context-source-message {
  padding: var(--space-3);
  border-left: 3px solid var(--cp-accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.chat-context-source-message > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.chat-context-source-message time {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.chat-context-source-message p {
  margin: var(--space-2) 0 0;
  white-space: pre-wrap;
}

.chat-context-reply-form {
  margin-top: var(--space-3);
}

.chat-context-reply-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.chat-context-reply-form textarea {
  width: 100%;
  resize: vertical;
}

.chat-context-reply-form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.chat-context-reply-status {
  color: var(--content-3);
  font-size: var(--text-xs);
}

@media (max-width: 700px) {
  .ticket-header-actions {
    justify-content: flex-start;
  }

  .chat-context-thread-panel {
    right: var(--space-2);
    bottom: var(--space-2);
    width: calc(100vw - var(--space-4));
  }
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) :is(.devices-keyword-input, .customers-keyword-input) {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-extra-chips {
  grid-column: 1 / -1;
}

/* Legacy Opportunities lists map onto the same two visual slots. */
.cp :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) > :is(.inventory-toolbar, .inventory-filters) {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) > .inventory-filters {
  background: var(--surface-2);
}

/* Dark mode is a system theme, not a Dashboard-only skin. */
html[data-dashboard-theme="dark"] #app-view > main:not(#compupod-chat-page) {
  --surface: var(--cp-dashboard-dark-surface);
  --surface-2: var(--cp-dashboard-dark-surface-2);
  --surface-3: var(--cp-dashboard-dark-surface-3);
  --surface-hover: var(--cp-dashboard-dark-surface-hover);
  --content-1: var(--cp-dashboard-dark-content-1);
  --content-2: var(--cp-dashboard-dark-content-2);
  --content-3: var(--cp-dashboard-dark-content-3);
  --content-placeholder: var(--content-placeholder-inv);
  --border-1: var(--cp-dashboard-dark-border-1);
  --border-2: var(--cp-dashboard-dark-border-2);
  --cp-accent-soft: var(--cp-dashboard-dark-accent-soft);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  .cp-integrated-workspace,
  #receive-page .inventory-shell,
  #cash-register-page .cash-register-shell,
  #metrics-page .metrics-shell,
  #reports-page .reports-shell,
  #settings-page .settings-shell,
  #team-page .staff-shell
) {
  border-color: var(--border-1);
  background: var(--surface);
  box-shadow: none;
}

body.dashboard-dark-active :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #purchase-orders-page,
  #metrics-page,
  #cash-register-page,
  #receive-page,
  #reports-page,
  #settings-page,
  #team-page
) :is(
  .cp-workspace-head,
  [data-cp-workspace-head],
  .devices-toolbar,
  .devices-toolbar-row-top,
  .inventory-toolbar,
  .customers-table-wrap,
  .panel-body
) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

body.dashboard-dark-active :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #purchase-orders-page,
  #metrics-page
) :is(.devices-toolbar-row-filters, .inventory-filters, .metrics-global-controls) {
  border-color: var(--border-1);
  background: var(--surface-2);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #purchase-orders-page,
  #metrics-page,
  #cash-register-page,
  #receive-page,
  #reports-page,
  #settings-page,
  #team-page
) :is(input, select, textarea, .devices-date-chip, .inventory-filter-pill, .devices-link-btn, .inventory-reset, .inventory-page-btn, .devices-pagination-nav button, .btn-secondary) {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #purchase-orders-page,
  #metrics-page,
  #cash-register-page,
  #receive-page,
  #reports-page,
  #settings-page,
  #team-page
) :is(input, textarea)::placeholder {
  color: var(--content-placeholder);
}

body.dashboard-dark-active :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #purchase-orders-page,
  #metrics-page,
  #cash-register-page,
  #receive-page,
  #reports-page,
  #settings-page,
  #team-page
) :is(table, th, td) {
  border-color: var(--border-1);
  color: var(--content-1);
}

body.dashboard-dark-active :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #purchase-orders-page,
  #metrics-page,
  #cash-register-page,
  #receive-page,
  #reports-page,
  #settings-page,
  #team-page
) th {
  background: var(--surface-2);
  color: var(--content-2);
}

@media (max-width: 1100px) {
  .cp :is(.cp-workspace-head, [data-cp-workspace-head]) {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cp :is(.cp-workspace-head, [data-cp-workspace-head]) > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) {
    justify-content: flex-start;
    width: 100%;
  }

  .cp :is(.cp-workspace-head, [data-cp-workspace-head]) > :is(.cp-workspace-tabs, [data-cp-workspace-tabs]) :where(button, a)::after {
    bottom: calc(var(--space-4) * -1);
  }

  .cp :is(
    #tickets-list-view,
    #inventory-page .cp-integrated-workspace,
    #inventory-item-detail-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) .devices-toolbar-row-filters {
    display: flex;
    flex-wrap: wrap;
  }

  .cp .cp-toolbar-context {
    flex: 1 1 calc(var(--space-10) * 8);
  }
}

@media (max-width: 620px) {
  .cp #app-view > :is(
    #home-page,
    #tickets-page,
    #inventory-page,
    #receive-page,
    #inventory-item-detail-page,
    #customers-page,
    #purchase-orders-page,
    #cash-register-page,
    #my-work-page,
    #support-center-page,
    #metrics-page,
    #reports-page,
    #settings-page,
    #team-page
  ) {
    width: calc(100% - (var(--space-3) * 2));
    padding-top: var(--space-3);
  }

  .cp :is(.cp-workspace-head, [data-cp-workspace-head]) {
    min-height: 0;
    padding: var(--space-4) var(--space-3);
  }

  .cp :is(
    #tickets-list-view,
    #inventory-page .cp-integrated-workspace,
    #inventory-item-detail-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) :is(.devices-toolbar-row-top, .devices-toolbar-row-filters) {
    padding-inline: var(--space-3);
  }

  .cp :is(
    #tickets-list-view,
    #inventory-page .cp-integrated-workspace,
    #inventory-item-detail-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace
  ) .devices-pagination-summary {
    flex-wrap: wrap;
    white-space: normal;
  }

  .cp .cp-toolbar-context {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Workflow harmony — filters, secondary inventory, receiving, ticket intake
   --------------------------------------------------------------------------
   The shared rule is structural rather than page-specific: stable context on
   the left, then one horizontal action flow that wraps from its own origin.
   ========================================================================== */
.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace,
  #opportunities-contacts-page .opportunities-workspace
) .devices-toolbar-row-filters {
  min-height: calc(var(--space-10) + var(--space-4));
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 5), calc(var(--space-10) * 7)) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.cp .cp-toolbar-location {
  width: 100%;
  min-width: 0;
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-2);
  box-shadow: none;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}

.cp .cp-toolbar-flow {
  min-width: 0;
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cp .cp-toolbar-flow > .devices-actions-group {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  order: 1;
}

.cp .cp-toolbar-flow > .devices-date-chip-wrap {
  flex: 0 1 auto;
  order: 2;
}

.cp .cp-toolbar-flow > :is(.devices-keyword-input, .customers-keyword-input) {
  flex: 0 1 calc(var(--space-10) * 8);
  width: auto;
  min-width: calc(var(--space-10) * 5);
  order: 3;
}

.cp .cp-toolbar-flow > :is(select, .devices-date-chip:not(.cp-toolbar-location)) {
  flex: 0 1 auto;
  order: 3;
}

.cp .cp-toolbar-flow > .devices-extra-chips {
  display: contents;
}

.cp .cp-toolbar-flow > .devices-extra-chips > * {
  min-width: 0;
  order: 4;
}

.cp .cp-toolbar-flow > .devices-extra-chips:empty {
  display: none;
}

.cp .cp-toolbar-flow :is(
  .devices-link-btn,
  .inventory-reset,
  .devices-date-chip,
  .devices-keyword-input,
  .customers-keyword-input,
  select
) {
  min-height: var(--space-8);
}

/* Every workspace title ends with the same single-pixel divider. */
.cp :is(
  #tickets-list-view,
  #inventory-page,
  #inventory-item-detail-page,
  #customers-page,
  #purchase-orders-page,
  #receive-page,
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page,
  #metrics-page,
  #reports-page
) [data-cp-workspace-head] {
  border: 0;
  border-bottom: 1px solid var(--border-1);
}

.cp :is(#inventory-page, #inventory-item-detail-page)
  .cp-integrated-workspace > [data-cp-workspace-head] {
  border: 0;
  border-bottom: 1px solid var(--border-1);
}

/* Opportunities now uses the same integrated title / toolbar / table shell. */
.cp :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) .opportunities-workspace {
  overflow: hidden;
}

.cp :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) .opportunities-title-bar {
  min-height: calc(var(--space-10) + var(--space-8));
  padding: var(--space-4) var(--space-5);
}

.cp :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) :is(.inventory-page-subtitle, .cp-workspace-tabs) {
  display: flex;
}

.cp :is(
  #opportunities-contacts-page,
  #opportunities-quotes-page,
  #opportunities-appointments-page
) .inventory-page-subtitle {
  display: block;
}

.cp #opportunities-contacts-page .opportunities-list-toolbar {
  gap: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
}

.cp #opportunities-contacts-page .opportunities-toolbar {
  min-height: calc(var(--space-10) + var(--space-3));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 0;
  background: var(--surface);
}

.cp #opportunities-contacts-page .opportunities-toolbar .inventory-view-controls {
  flex: 1 1 auto;
  gap: var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #opportunities-contacts-page .opportunities-toolbar :is(select, .inventory-page-btn) {
  min-height: var(--space-8);
  border-color: var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #opportunities-contacts-page .opportunities-toolbar .inventory-view-controls strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #opportunities-contacts-page .opportunities-filters {
  margin: 0;
}

.cp #opportunities-contacts-page .inventory-section,
.cp #opportunities-contacts-page .opportunities-contacts-table-wrap {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

.cp #opportunities-contacts-page .opportunities-contacts-table {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #opportunities-contacts-page .opportunities-contacts-table :is(th, td) {
  min-height: var(--space-8);
  padding: var(--space-2) var(--space-3);
  border-color: var(--border-1);
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #opportunities-contacts-page .opportunities-contacts-table th {
  background: var(--surface-2);
  color: var(--content-2);
}

.cp #opportunities-contacts-page .opportunities-contacts-table .cp-ticket-link {
  color: var(--content-1);
}

.cp #opportunities-contacts-page .opportunities-contacts-table tbody tr:hover {
  background: var(--surface-hover);
}

/* ===========================================================================
   Dense workspace tables and unified pagination

   Data grids first use the available width, then expose horizontal scrolling
   when their real column set no longer fits. The trailing action remains
   reachable without a visual gutter or a theme-specific divider.
   ========================================================================== */
.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav :is(button, .cp-page-select, select) {
  width: var(--space-9);
  min-width: var(--space-9);
  height: var(--space-9);
  min-height: var(--space-9);
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav .cp-page-select {
  width: calc(var(--space-9) + var(--space-4));
  min-width: calc(var(--space-9) + var(--space-4));
  padding-inline: var(--space-2);
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-summary > select:first-of-type {
  width: calc(var(--space-10) * 4);
  min-width: calc(var(--space-10) * 4);
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-summary > select:nth-of-type(2) {
  width: calc(var(--space-10) * 2);
  min-width: calc(var(--space-10) * 2);
}

.cp #tickets-list-view .tickets-table-wrap,
.cp #inventory-page .customers-table-wrap,
.cp #customers-page :is(#customers-list-section, #customer-devices-section .customers-table-wrap),
.cp #opportunities-contacts-page .opportunities-contacts-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.cp #tickets-list-view .tickets-queue-table {
  min-width: max(100%, calc(var(--space-10) * 31));
}

.cp #inventory-page .customer-devices-table {
  min-width: max(100%, calc(var(--space-10) * 31));
}

.cp #inventory-page :is(.inventory-detail-table, .iid-units-table) {
  min-width: max(100%, calc(var(--space-10) * 36));
}

.cp #customers-page #customer-devices-section .customer-devices-table {
  min-width: max(100%, calc(var(--space-10) * 33));
}

.cp #opportunities-contacts-page .opportunities-contacts-table {
  min-width: max(100%, calc(var(--space-10) * 28));
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #customers-page #customers-list-section .customers-table,
  #customers-page #customer-devices-section .customer-devices-table,
  #opportunities-contacts-page .opportunities-contacts-table
) :is(th:last-child, td:last-child) {
  position: sticky;
  right: 0;
  z-index: 2;
  width: calc(var(--space-10) + var(--space-6)) !important;
  min-width: calc(var(--space-10) + var(--space-6));
  max-width: calc(var(--space-10) + var(--space-6));
  padding-inline: var(--space-2);
  background: var(--surface);
  box-shadow: none;
  text-align: center;
  overflow: visible;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #customers-page #customers-list-section .customers-table,
  #customers-page #customer-devices-section .customer-devices-table,
  #opportunities-contacts-page .opportunities-contacts-table
) th:last-child {
  z-index: 3;
  background: var(--surface-2);
  white-space: nowrap;
  text-overflow: clip;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #customers-page #customers-list-section .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) :is(.row-menu-btn, .inv-row-kebab) {
  width: var(--space-8);
  min-width: var(--space-8);
  min-height: var(--space-8);
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #customers-page #customers-list-section .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) .row-menu-btn span {
  width: var(--space-1);
  height: var(--space-1);
  background: var(--cp-accent);
}

/* The menu highlight must color cells because dark table themes paint their
   own cell surface. Never force a light row into the dark workspace. */
.cp .row-menu-active tbody tr.row-menu-target,
.cp .row-menu-active tbody tr.row-menu-target td {
  background: var(--cp-accent-soft) !important;
  color: var(--content-1) !important;
}

.cp .row-menu-active tbody tr.row-menu-target {
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

.cp .row-menu-active tbody tr.row-menu-target td:last-child {
  background: var(--cp-accent-soft) !important;
}

.cp :is(.inv-row-menu, .invcounts-row-menu) {
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

.cp :is(.inv-row-menu-item, .invcounts-row-menu-item) {
  background: transparent;
  color: var(--content-1);
}

.cp :is(.inv-row-menu-item, .invcounts-row-menu-item):hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp :is(.inv-row-menu-danger, .invcounts-row-menu-danger),
.cp .inv-row-menu .inv-row-menu-danger {
  color: var(--cp-danger);
}

.cp :is(.inv-row-menu-danger, .invcounts-row-menu-danger):hover,
.cp .inv-row-menu .inv-row-menu-danger:hover {
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #inventory-item-detail-page .iid-units-table,
  #customers-page .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) tbody tr:hover td:last-child {
  background: var(--surface-hover);
}

/* Dashboard follows the same single-shell hierarchy as queue workspaces. */
.cp #home-page .dashboard-workspace {
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.cp #home-page .dashboard-workspace > .dashboard-title-bar {
  min-height: calc(var(--space-10) + var(--space-10));
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface);
}

.cp #home-page .dashboard-workspace > .repair-dashboard {
  margin: 0;
  padding: var(--space-3);
  background: var(--surface-2);
}

body.dashboard-dark-active #home-page .dashboard-workspace {
  border-color: var(--border-1);
  background: var(--surface-2);
  box-shadow: none;
}

/* At browser zoom and tablet widths, keep the shared list controls in their
   established order while letting pagination move to a second line. The data
   grid itself remains the only horizontally scrollable region. */
@media (max-width: 900px) {
  .cp :is(
    #tickets-list-view,
    #inventory-page,
    #customers-page,
    #opportunities-contacts-page
  ) .devices-toolbar-row-top {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .cp :is(
    #tickets-list-view,
    #inventory-page,
    #customers-page,
    #opportunities-contacts-page
  ) .devices-pagination-summary {
    flex: 1 1 calc(var(--space-10) * 14);
    flex-wrap: wrap;
    min-width: 0;
  }

  .cp :is(
    #tickets-list-view,
    #inventory-page,
    #customers-page,
    #opportunities-contacts-page
  ) .devices-right-controls {
    flex: 0 0 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}

/* The React island sits inside the page gutters supplied by #my-work-page. */
.cp #my-work-page #my-work-react-root {
  min-height: 0;
}

/* ===========================================================================
   Secondary-workspace polish: actions, pagination and customer detail

   Inventory renders its kebab with SVG circles while Tickets uses spans. Both
   now share the same hit target, visual weight and accent color. Pagination
   keeps a real select for keyboard/direct-page access, but presents it as the
   quiet page number used by the original queue layout.
   ========================================================================== */
.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav {
  flex: 0 0 auto;
  gap: var(--space-2);
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav button {
  flex: 0 0 var(--space-8);
  width: var(--space-8);
  min-width: var(--space-8);
  height: var(--space-8);
  min-height: var(--space-8);
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav .cp-page-select {
  flex: 0 0 var(--space-8);
  width: var(--space-8);
  min-width: var(--space-8);
  height: var(--space-8);
  min-height: var(--space-8);
  padding: 0;
  border-color: transparent;
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--content-1);
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}

@media (max-width: 1280px) {
  .cp :is(
    #tickets-list-view,
    #inventory-page,
    #customers-page,
    #opportunities-contacts-page
  ) .devices-toolbar-row-top {
    flex-wrap: wrap;
  }

  .cp :is(
    #tickets-list-view,
    #inventory-page,
    #customers-page,
    #opportunities-contacts-page
  ) .devices-right-controls {
    flex: 0 0 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}

.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav .cp-page-select:hover,
.cp :is(
  #tickets-list-view,
  #inventory-page,
  #customers-page,
  #opportunities-contacts-page
) .devices-pagination-nav .cp-page-select:focus-visible {
  border-color: var(--border-2);
  background: var(--surface-hover);
  outline: none;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #inventory-item-detail-page .iid-units-table,
  #customers-page .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) :is(.row-menu-btn, .inv-row-kebab, .inv-det-row-kebab, .invcounts-row-kebab, .iid-row-kebab) {
  display: inline-grid;
  place-items: center;
  width: var(--space-8);
  min-width: var(--space-8);
  height: var(--space-8);
  min-height: var(--space-8);
  padding: 0;
  color: var(--cp-accent);
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #inventory-item-detail-page .iid-units-table,
  #customers-page .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) :is(.row-menu-btn, .inv-row-kebab, .inv-det-row-kebab, .invcounts-row-kebab, .iid-row-kebab) svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: currentColor;
  stroke: none;
}

.cp :is(
  #tickets-list-view .tickets-queue-table,
  #inventory-page .customer-devices-table,
  #inventory-item-detail-page .iid-units-table,
  #customers-page .customers-table,
  #opportunities-contacts-page .opportunities-contacts-table
) :is(.row-menu-btn, .inv-row-kebab, .inv-det-row-kebab, .invcounts-row-kebab, .iid-row-kebab):hover {
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

/* Customer detail is one integrated record surface. The stats remain easy to
   scan, but stop reading as cards nested inside another card. */
.cp #customer-profile-page .cprofile-header {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #customer-profile-page .cprofile-phone {
  margin: 0;
  padding: var(--space-2) 0 var(--space-4);
}

.cp #customer-profile-page .cprofile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-10) * 3), 1fr));
  gap: 0;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.cp #customer-profile-page .cp-stat {
  min-width: 0;
  padding: var(--space-3);
  border: 0;
  border-right: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
}

.cp #customer-profile-page .cp-stat:last-child {
  border-right: 0;
}

.cp #customer-profile-page .cprofile-layout {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #customer-profile-page .cprofile-sidebar,
.cp #customer-profile-page .cprofile-content {
  border-radius: 0;
  box-shadow: none;
}

.cp #customer-profile-page .cprofile-sidebar {
  border: 0;
  border-right: 1px solid var(--border-1);
  background: var(--surface-2);
}

.cp #customer-profile-page .cprofile-content {
  border: 0;
  background: var(--surface);
}

@media (max-width: 640px) {
  .cp #customer-profile-page .cprofile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #customer-profile-page .cp-stat {
    border-right: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
  }

  .cp #customer-profile-page .cp-stat:nth-child(2n) {
    border-right: 0;
  }

  .cp #customer-profile-page .cprofile-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }
}

/* Secondary inventory views inherit the same page gap and heading rhythm. */
.cp #app-view > :is(
  #catalog-item-view-page,
  #catalog-item-edit-page,
  #inventory-item-manage-page
) {
  width: calc(100% - (var(--inventory-side-space) * 2));
  max-width: none;
  margin-inline: auto;
  padding-top: var(--space-3);
}

.cp :is(
  #catalog-item-view-page .civ-shell,
  #catalog-item-edit-page .cie-shell,
  #inventory-item-manage-page .iim-shell
) {
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp :is(
  #catalog-item-view-page .civ-pagebar,
  #catalog-item-edit-page .cie-pagebar,
  #inventory-item-manage-page .iim-pagebar
) {
  display: none;
}

.cp :is(
  #catalog-item-view-page,
  #catalog-item-edit-page,
  #inventory-item-manage-page
) [data-cp-workspace-head] {
  min-height: calc(var(--space-10) + var(--space-8));
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  color: var(--content-1);
  box-shadow: none;
}

.cp :is(
  #catalog-item-view-page,
  #catalog-item-edit-page,
  #inventory-item-manage-page
) [data-cp-workspace-head] :is(h2, h3) {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp :is(
  #catalog-item-view-page .civ-title-sub,
  #catalog-item-edit-page .cie-title-copy p,
  #inventory-item-manage-page .iim-back-link
) {
  margin: var(--space-1) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.cp #inventory-item-detail-page [data-cp-workspace-head] {
  min-height: calc(var(--space-10) + var(--space-8));
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}

.cp #inventory-item-detail-page #iid-title-name {
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

/* Receive is one workspace split by a divider, not cards nested in a card. */
.cp #receive-page .inventory-shell {
  background: var(--surface);
}

.cp #receive-page .receive-station-layout {
  grid-template-columns: minmax(calc(var(--space-10) * 9), .72fr) minmax(0, 2.28fr);
  gap: 0;
  padding: 0;
  background: var(--surface);
}

.cp #receive-page :is(.receive-station-scan-panel, .receive-station-results-panel) {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #receive-page .receive-station-scan-panel {
  padding: var(--space-5);
  border-right: 1px solid var(--border-1);
}

.cp #receive-page .receive-station-results-panel .receive-station-panel-head {
  min-height: calc(var(--space-10) + var(--space-2));
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #receive-page .receive-station-field input {
  box-shadow: none;
}

.cp #receive-page .receive-station-result-action {
  border-left-width: var(--space-1);
  background: transparent;
}

/* Ticket creation becomes one primary form surface plus one supporting rail. */
.cp #app-view > :is(#quick-sale-page, #repair-ticket-create-page, #trade-in-page) {
  width: calc(100% - (var(--inventory-side-space) * 2));
  max-width: none;
  margin-inline: auto;
  padding-top: var(--space-3);
}

.cp :is(#quick-sale-page, #repair-ticket-create-page, #trade-in-page) .ticket-create-shell {
  gap: var(--space-4);
  padding: 0;
  background: transparent;
}

.cp .ticket-create-shell :is(.ticket-create-main, .sale-ticket-main) {
  min-width: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp .ticket-create-shell .ticket-create-main > .repair-fast-header,
.cp .ticket-create-shell .sale-ticket-main > .sale-title-bar {
  min-height: calc(var(--space-10) + var(--space-8));
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-left: var(--space-1) solid var(--ticket-create-accent);
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: color-mix(in srgb, var(--ticket-create-accent) 7%, var(--surface));
  box-shadow: none;
}

.cp .ticket-create-shell .ticket-sections-stack {
  gap: 0;
}

.cp .ticket-create-shell .repair-fast-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp .ticket-create-shell .repair-fast-panel:first-child {
  border-top: 0;
}

.cp .ticket-create-shell .repair-fast-panel-head {
  min-height: calc(var(--space-10) + var(--space-1));
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--ticket-create-accent) 6%, var(--surface));
}

.cp .ticket-create-shell .repair-fast-panel-head > span {
  background: var(--ticket-create-accent);
  color: var(--cp-accent-content);
}

.cp .ticket-create-shell .repair-fast-panel-head h3 {
  color: var(--content-1);
}

.cp .ticket-create-shell .repair-fast-panel-body {
  padding: var(--space-5);
  border: 0;
  background: var(--surface);
}

.cp .ticket-create-shell :is(
  .repair-fast-linked-customer,
  .repair-fast-checkin-group,
  .repair-fast-ack-card,
  .ticket-fast-check-grid,
  .ticket-fast-note
) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp .ticket-create-shell .repair-fast-linked-customer {
  padding: 0 0 var(--space-3);
}

.cp .ticket-create-shell :is(.repair-fast-checkin-group, .repair-fast-ack-card, .ticket-fast-check-grid) {
  margin-top: var(--space-4);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-1);
}

.cp .ticket-create-sidebar {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp .ticket-create-sidebar :is(.ticket-create-nav-box, .ticket-create-financial-box) {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp .ticket-create-sidebar .ticket-create-financial-box {
  border-top: 1px solid var(--border-1);
}

.cp .ticket-create-sidebar :is(.ticket-create-nav-head, .ticket-create-financial-head) {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--ticket-create-accent) 10%, var(--surface));
  color: var(--ticket-create-accent-ink);
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.cp .ticket-create-sidebar .ticket-create-nav-body {
  gap: 0;
  padding: var(--space-1) 0;
}

.cp .ticket-create-sidebar .ticket-create-nav-body :is(a, button) {
  min-height: var(--space-10);
  padding: 0 var(--space-4);
  border-radius: 0;
  color: var(--content-2);
}

.cp .ticket-create-sidebar .ticket-create-nav-body :is(a, button):is(:hover, .active) {
  background: color-mix(in srgb, var(--ticket-create-accent) 10%, var(--surface));
  color: var(--content-1);
  box-shadow: inset var(--space-1) 0 0 var(--ticket-create-accent);
}

.cp .ticket-create-sidebar .ticket-create-nav-body button:disabled {
  color: var(--content-3);
}

.cp .ticket-create-sidebar .ticket-create-nav-foot {
  padding: var(--space-3) var(--space-4);
  border-color: var(--border-1);
}

@media (max-width: 1100px) {
  .cp :is(
    #tickets-list-view,
    #inventory-page .cp-integrated-workspace,
    #inventory-item-detail-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace,
    #opportunities-contacts-page .opportunities-workspace
  ) .devices-toolbar-row-filters {
    grid-template-columns: minmax(calc(var(--space-10) * 5), calc(var(--space-10) * 6)) minmax(0, 1fr);
  }

  .cp #receive-page .receive-station-layout {
    grid-template-columns: minmax(calc(var(--space-10) * 8), .9fr) minmax(0, 2.1fr);
  }
}

@media (max-width: 760px) {
  .cp :is(
    #tickets-list-view,
    #inventory-page .cp-integrated-workspace,
    #inventory-item-detail-page .cp-integrated-workspace,
    #customers-page .cp-integrated-workspace,
    #purchase-orders-page .cp-integrated-workspace,
    #opportunities-contacts-page .opportunities-workspace
  ) .devices-toolbar-row-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp .cp-toolbar-location {
    max-width: calc(var(--space-10) * 7);
  }

  .cp #receive-page .receive-station-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #receive-page .receive-station-scan-panel {
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }
}

/* ==========================================================================
   UI system polish — compact search, composition charts, settings, list bands
   ========================================================================== */

/* Reports search is a workspace action, not a standalone card. */
.cp #reports-page .reports-workspace-head .reports-search-shell {
  flex: 0 1 calc(var(--space-10) * 12);
  width: min(100%, calc(var(--space-10) * 12));
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #reports-page .reports-workspace-head .reports-search-control {
  gap: var(--space-2);
}

.cp #reports-page .reports-workspace-head .reports-search-control input,
.cp #reports-page .reports-workspace-head .reports-search-control button {
  min-height: var(--space-10);
  border-color: var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
}

.cp #reports-page .reports-workspace-head .reports-search-control input {
  padding-inline: var(--space-4);
}

.cp #reports-page .reports-workspace-head .reports-search-control button {
  background: var(--surface);
}

.cp #reports-page .reports-workspace-head .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ticket Mix is a 100% composition track. Commission cards use the same full
   content width so neither chart leaves an arbitrary empty column. */
.cp #metrics-page .metric-mix-track {
  inline-size: 100%;
  background: var(--surface-3);
}

.cp #metrics-page .metric-mix-scaled {
  inline-size: 100%;
}

.cp #metrics-page .metrics-analysis-grid > .metric-panel-wide {
  grid-column: 1 / -1;
}

.cp #metrics-page .commission-primary-grid {
  grid-template-columns: minmax(0, 1fr);
}

.cp #metrics-page .commission-progress-card {
  inline-size: 100%;
}

/* Settings is one integrated workspace. Groups and forms are separated by
   hierarchy and dividers instead of nested framed cards. */
.cp #settings-page .rq-settings-shell.settings-shell-v2 {
  min-height: calc(100vh - (var(--space-10) * 3));
  grid-template-columns: calc(var(--space-10) * 6) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #settings-page .rq-settings-sidebar {
  padding: var(--space-3) 0;
  border: 0;
  border-right: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: none;
}

.cp #settings-page .rq-settings-main {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #settings-page :where(.rq-settings-side-link, .rq-settings-sub-link) {
  position: relative;
  width: 100%;
  min-height: var(--space-10);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--content-2);
  text-align: left;
}

.cp #settings-page .rq-settings-sidebar .rq-settings-sub-link {
  min-height: calc(var(--space-8) + var(--space-1));
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
}

.cp #settings-page :where(.rq-settings-side-link:hover, .rq-settings-sub-link:hover) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #settings-page :where(.rq-settings-side-link.active, .rq-settings-sub-link.active) {
  border-radius: 0;
  background: transparent;
  color: var(--cp-accent);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

.cp #settings-page .rq-settings-sidebar .rq-settings-subnav {
  margin: 0;
  padding: 0;
  border: 0;
}

.cp #settings-page .rq-settings-shell .settings-title-bar {
  min-height: calc(var(--space-10) + var(--space-10));
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: var(--surface);
  color: var(--content-1);
}

.cp #settings-page .rq-settings-shell .settings-title-bar h2 {
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.cp #settings-page :where(.rq-settings-overview, .rq-settings-detail) {
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #settings-page .rq-settings-group {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #settings-page .rq-settings-group + .rq-settings-group {
  margin-top: var(--space-6);
}

.cp #settings-page .rq-settings-group h3 {
  display: flex;
  align-items: center;
  min-height: var(--space-10);
  margin: 0;
  padding: 0 var(--space-3);
  border-left: var(--space-1) solid var(--cp-accent);
  background: var(--surface-2);
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.cp #settings-page .rq-settings-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  padding: 0 var(--space-3);
}

.cp #settings-page .rq-settings-card {
  min-height: calc(var(--space-10) + var(--space-2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  place-items: center stretch;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.cp #settings-page .rq-settings-card:hover {
  border-color: var(--border-1);
  background: var(--surface-hover);
  box-shadow: none;
  transform: none;
}

.cp #settings-page .rq-settings-card strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #settings-page .rq-settings-card span {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #settings-page .rq-settings-detail {
  gap: 0;
}

.cp #settings-page .rq-settings-detail-actions {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

.cp #settings-page .rq-settings-detail .settings-panel,
.cp #settings-page .rq-settings-detail .settings-subsection {
  margin: 0;
  padding: var(--space-5) 0;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp #settings-page .rq-settings-detail .settings-panel:last-child {
  border-bottom: 0;
}

.cp #settings-page .settings-grid-v2 .settings-panel-head {
  min-height: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
}

.cp #settings-page :where(.settings-profile-card, .settings-form-grid, .settings-toggle-list, .settings-readonly-grid) {
  margin: var(--space-4) 0 0;
}

.cp #settings-page :where(.settings-suppliers-page, .settings-supplier-form-panel) {
  margin: 0;
  padding: var(--space-5);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.cp #settings-page .settings-suppliers-table-wrap {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.cp #settings-page .settings-suppliers-name strong {
  color: var(--content-1);
}

.cp #settings-page .settings-supplier-icon-btn {
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--content-2);
  box-shadow: none;
}

.cp #settings-page .settings-supplier-icon-btn:hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

.cp #settings-page .settings-title-bar.settings-supplier-title-bar h2::before {
  content: none;
}

/* Tickets, Inventory, Customers, and their peer lists share the same initial
   band geometry. Rows may grow only after filters genuinely wrap. */
.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) {
  --cp-list-title-band: calc(var(--space-10) + var(--space-10));
  --cp-list-summary-band: calc(var(--space-10) + var(--space-6));
  --cp-list-filter-band: calc(var(--space-10) + var(--space-6));
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) > [data-cp-workspace-head] {
  min-height: var(--cp-list-title-band);
  box-sizing: border-box;
  padding-block: var(--space-3);
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-toolbar-row-top {
  min-height: var(--cp-list-summary-band);
  box-sizing: border-box;
}

.cp :is(
  #tickets-list-view,
  #inventory-page .cp-integrated-workspace,
  #inventory-item-detail-page .cp-integrated-workspace,
  #customers-page .cp-integrated-workspace,
  #purchase-orders-page .cp-integrated-workspace
) .devices-toolbar-row-filters {
  min-height: var(--cp-list-filter-band);
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .cp #reports-page .reports-workspace-head .reports-search-shell {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 820px) {
  .cp #settings-page .rq-settings-shell.settings-shell-v2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #settings-page .rq-settings-sidebar {
    max-height: calc(var(--space-10) * 7);
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }

  .cp #settings-page .rq-settings-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Settings > Label Printing ------------------------------------------------ */
.iim-label-actions {
  display: contents;
}

.iim-label-actions.hidden {
  display: none;
}

.settings-label-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-1);
}

.settings-label-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--content-2);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.settings-label-tab:hover {
  color: var(--content-1);
  background: var(--surface-hover);
}

.settings-label-tab.is-active {
  color: var(--cp-accent);
  border-bottom-color: var(--cp-accent);
}

.settings-label-tab:focus-visible,
.settings-label-profile-choice:focus-visible,
.settings-label-rule-step:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.settings-label-policy-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.settings-label-policy-summary > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.settings-label-policy-summary > div.needs-review {
  border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 7%, var(--surface));
}

.settings-label-policy-summary strong {
  font-size: var(--text-xl);
  color: var(--content-1);
}

.settings-label-policy-summary span,
.settings-label-policy-summary p {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.settings-label-policy-summary p {
  grid-column: 1 / -1;
  margin: 0;
}

.settings-label-policy-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px);
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-4);
}

.settings-label-policy-toolbar .field {
  margin: 0;
}

.settings-label-policy-toolbar .field > span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.settings-label-policy-toolbar input,
.settings-label-policy-toolbar select,
.settings-label-phone-automation select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  padding: var(--space-2) var(--space-3);
  font: inherit;
}

.settings-label-policy-skeleton {
  min-height: 320px;
}

.settings-label-policy-content {
  scroll-margin-top: calc(var(--space-10) * 4);
}

.settings-label-policy-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.settings-label-policy-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

.settings-label-policy-table th,
.settings-label-policy-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-1);
  vertical-align: top;
  text-align: left;
}

.settings-label-policy-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.settings-label-policy-table tbody tr:not(.settings-label-category-row):hover {
  background: var(--surface-hover);
}

.settings-label-policy-table td:first-child strong,
.settings-label-policy-table td small {
  display: block;
}

.settings-label-policy-table td small {
  margin-top: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
}

.settings-label-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.settings-label-chip,
.settings-label-policy-status,
.settings-label-rule-scope {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  background: var(--cp-accent-soft);
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.settings-label-chip[data-role="large"] {
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
}

.settings-label-chip[data-role="square"] {
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
}

.settings-label-none {
  color: var(--content-3);
  font-size: var(--text-sm);
}

.settings-label-policy-status.configured {
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: var(--cp-success);
}

.settings-label-policy-status.needs-review {
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: var(--cp-warning);
}

.settings-label-policy-source {
  display: inline-flex;
  width: fit-content;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.settings-label-policy-source.family {
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

.settings-label-policy-source.exception {
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: var(--cp-warning);
}

.settings-label-policy-source.system {
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: var(--cp-success);
}

.settings-label-policy-source.needs-review {
  background: var(--cp-danger-soft);
  color: var(--cp-danger);
}

.settings-label-family-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
}

.settings-label-family-intro h4,
.settings-label-family-card h4,
.settings-label-family-detail-head h4,
.settings-label-family-default h4,
.settings-label-family-types h4 {
  margin: var(--space-1) 0;
  color: var(--content-1);
}

.settings-label-family-intro p,
.settings-label-family-detail-head p,
.settings-label-family-default p,
.settings-label-family-types p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

.settings-label-family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.settings-label-family-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.settings-label-family-card > header,
.settings-label-family-card > footer,
.settings-label-family-default > header,
.settings-label-family-types > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.settings-label-family-card > footer {
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
  color: var(--content-3);
  font-size: var(--text-sm);
}

.settings-label-family-count {
  display: block;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.settings-label-family-empty {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.settings-label-family-empty span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.settings-label-family-rule-summary {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.settings-label-family-rule-summary > div {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 3), .4fr) 1fr;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--space-8);
}

.settings-label-family-rule-summary dt {
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.settings-label-family-rule-summary dd {
  min-width: 0;
  margin: 0;
}

.settings-label-family-detail-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.settings-label-family-detail-head .btn {
  justify-self: start;
}

.settings-label-family-default,
.settings-label-family-types {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.settings-label-family-default {
  border-color: color-mix(in srgb, var(--cp-accent) 36%, var(--border-1));
  box-shadow: var(--shadow-sm);
}

.settings-label-family-types > header > span {
  flex: 0 0 auto;
  color: var(--content-3);
  font-size: var(--text-sm);
}

.settings-label-rule-editor {
  margin-bottom: var(--space-5);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.settings-label-rule-editor > header,
.settings-label-rule-editor > footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-2);
}

.settings-label-rule-editor h4,
.settings-label-reference h4 {
  margin: var(--space-1) 0;
  color: var(--content-1);
}

.settings-label-rule-editor header p,
.settings-label-rule-editor fieldset > p,
.settings-label-reference p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

.settings-label-rule-workflow {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 6), .42fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
}

.settings-label-rule-steps {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.settings-label-rule-step {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  padding: var(--space-3);
  text-align: left;
  cursor: pointer;
}

.settings-label-rule-step:hover {
  border-color: var(--border-2);
  background: var(--surface-hover);
}

.settings-label-rule-step.is-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

.settings-label-rule-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circle);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.settings-label-rule-step.is-active .settings-label-rule-step-number {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.settings-label-rule-step strong,
.settings-label-rule-step small {
  display: block;
}

.settings-label-rule-step small {
  margin-top: var(--space-2);
}

.settings-label-selection-panel,
.settings-label-rule-editor fieldset {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.settings-label-rule-editor legend {
  padding: 0 var(--space-1);
  color: var(--content-1);
  font-weight: var(--weight-bold);
}

.settings-label-profile-options {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.settings-label-profile-choice {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  padding: var(--space-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-label-profile-choice:hover {
  border-color: var(--border-2);
  background: var(--surface-hover);
}

.settings-label-profile-choice.is-selected {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  box-shadow: inset var(--space-1) 0 0 var(--cp-accent);
}

.settings-label-profile-choice.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.settings-label-profile-choice strong,
.settings-label-profile-choice small {
  display: block;
}

.settings-label-profile-choice small {
  margin-top: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
}

.settings-label-choice-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border: 2px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--cp-accent-content);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.settings-label-profile-choice.is-selected .settings-label-choice-marker {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
}

.settings-label-choice-state {
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-3);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.settings-label-profile-choice.is-selected .settings-label-choice-state {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.settings-label-profile-none:not(.is-selected) {
  border-style: dashed;
}

.settings-label-phone-automation {
  margin: 0 var(--space-4) var(--space-4) !important;
}

.settings-label-phone-automation label {
  display: block;
  margin: var(--space-3) 0 var(--space-1);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.settings-label-rule-editor > footer {
  align-items: center;
  border-top: 1px solid var(--border-1);
}

.settings-label-rule-editor > footer > div {
  display: flex;
  gap: var(--space-2);
}

.settings-label-policy-error,
.settings-label-reference-note {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.settings-label-policy-error span,
.settings-label-reference-note span {
  flex: 1;
  color: var(--content-2);
}

.settings-label-reference-intro {
  margin-bottom: var(--space-4);
}

.settings-label-reference-grid {
  display: grid;
  gap: var(--space-4);
}

.settings-label-reference-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.settings-label-stock-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border: 2px solid var(--content-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
  font-weight: var(--weight-bold);
}

.settings-label-stock-visual.is-small {
  width: 150px;
  aspect-ratio: 2 / 1;
}

.settings-label-stock-visual.is-large {
  width: 170px;
  aspect-ratio: 2.25 / 1.25;
}

.settings-label-stock-visual.is-rma {
  width: 170px;
  aspect-ratio: 3.5 / 1.125;
}

.settings-label-stock-visual.is-square {
  width: 120px;
  aspect-ratio: 1;
}

.settings-label-stock-role {
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.settings-label-design-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.settings-label-design-list > div {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) 1fr;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-1);
}

.settings-label-design-list span {
  color: var(--content-2);
  font-size: var(--text-sm);
}

.settings-label-reference-note {
  margin-top: var(--space-4);
}

@media (max-width: 900px) {
  .settings-label-tabs {
    overflow-x: auto;
  }

  .settings-label-tab {
    flex: 0 0 auto;
  }

  .settings-label-rule-workflow,
  .settings-label-family-grid,
  .settings-label-policy-summary {
    grid-template-columns: 1fr;
  }

  .settings-label-policy-summary p {
    grid-column: auto;
  }

  .settings-label-reference-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .settings-label-policy-toolbar {
    grid-template-columns: 1fr;
  }

  .settings-label-rule-editor > header,
  .settings-label-rule-editor > footer,
  .settings-label-policy-error,
  .settings-label-reference-note {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-label-rule-editor > footer > div {
    justify-content: flex-end;
  }

  .settings-label-family-card > header,
  .settings-label-family-card > footer,
  .settings-label-family-default > header,
  .settings-label-family-types > header {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-label-family-rule-summary > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .settings-label-profile-choice {
    grid-template-columns: var(--space-6) minmax(0, 1fr);
  }

  .settings-label-choice-state {
    grid-column: 2;
    justify-self: start;
  }

  .settings-label-design-list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* RMA label editor and computer print bridge */
.rma-label-edit-btn { margin-right: 6px; color: var(--accent); }
.rma-label-modal { width: min(1180px, calc(100vw - 48px)); max-width: none; }
.rma-label-editor-grid { display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(360px, .8fr); gap: 22px; padding: 18px; }
.rma-label-preview-stage { position: relative; aspect-ratio: 1.8; overflow: hidden; background: #fff; border: 1px solid var(--border-2); border-radius: 12px; }
.rma-label-preview-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rma-label-preview-overlay { position: absolute; inset: 0; }
.rma-label-drag-box { position: absolute; min-width: 20px; min-height: 18px; border: 1px dashed #0ea5e9; background: rgb(14 165 233 / 10%); color: #075985; font-size: 10px; cursor: move; overflow: hidden; }
.rma-label-render-status { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgb(15 23 42 / 78%); color: #fff; font-size: 11px; pointer-events: none; }
.rma-label-printer-hint { color: var(--muted); font-size: 12px; margin: 10px 2px 0; }
.rma-label-object-list { display: grid; gap: 10px; max-height: 520px; overflow: auto; }
.rma-label-object-editor { display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 8px; padding: 10px; border: 1px solid var(--border-2); border-radius: 10px; }
.rma-label-object-editor legend { padding: 0 6px; font-weight: 700; color: var(--accent); }
.rma-label-object-editor label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.rma-label-object-editor input, .rma-label-object-editor select { width: 100%; min-width: 0; border: 1px solid var(--border-2); background: var(--surface); color: inherit; border-radius: 6px; padding: 6px; }
.rma-label-object-editor .rma-label-text-field { grid-column: 1 / -1; }
.rma-label-object-editor .rma-label-bold { display: flex; align-items: center; gap: 6px; }
.rma-label-object-editor .rma-label-bold input { width: auto; }
@media (max-width: 900px) { .rma-label-editor-grid { grid-template-columns: 1fr; } }

/* Purchase order merge: directional, server-explained, and mobile-safe. */
.newpo-po-merge-card {
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  max-width: 820px;
  max-height: calc(100dvh - (2 * var(--space-4)));
  background: var(--surface);
  color: var(--content-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.newpo-po-merge-card .newpo-modal-head,
.newpo-po-merge-card .newpo-modal-foot { flex: 0 0 auto; background: var(--surface); }
.newpo-po-merge-card .newpo-modal-head h3 { color: var(--content-1); }
.newpo-po-merge-body { overflow-y: auto; padding: var(--space-5); }
.newpo-po-merge-kicker,
.newpo-merged-kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.newpo-po-merge-intro { margin: 0 0 var(--space-4); color: var(--content-2); line-height: var(--leading-body); }
.newpo-po-merge-source {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 7%, var(--surface));
}
.newpo-po-merge-source > span { color: var(--content-3); font-size: var(--text-xs); text-transform: uppercase; }
.newpo-po-merge-source > strong { font-size: var(--text-lg); }
.newpo-po-merge-source > small { color: var(--content-2); }
.newpo-po-merge-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: var(--space-4);
  align-items: end;
  margin: var(--space-5) 0 var(--space-3);
}
.newpo-po-merge-heading h4,
.newpo-po-merge-heading p { margin: 0; }
.newpo-po-merge-heading p { margin-top: var(--space-1); color: var(--content-3); font-size: var(--text-sm); }
.newpo-po-merge-heading input {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  padding: 0 var(--space-3);
}
.newpo-po-merge-heading input:focus { outline: 2px solid var(--cp-accent); outline-offset: 2px; }
.newpo-po-merge-status { margin-bottom: var(--space-3); color: var(--content-2); font-size: var(--text-sm); }
.newpo-po-merge-candidates { display: grid; gap: var(--space-4); }
.newpo-po-merge-candidates section { display: grid; gap: var(--space-2); }
.newpo-po-merge-candidates h5 { margin: 0; color: var(--content-2); font-size: var(--text-sm); }
.newpo-po-merge-candidate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}
.newpo-po-merge-candidate:has(input:checked) {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-accent) 20%, transparent);
}
.newpo-po-merge-candidate.is-blocked { background: var(--surface-2); cursor: not-allowed; }
.newpo-po-merge-candidate input { margin-top: var(--space-1); accent-color: var(--cp-accent); }
.newpo-po-merge-candidate-main { display: grid; gap: var(--space-2); min-width: 0; }
.newpo-po-merge-candidate-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.newpo-po-merge-candidate-title > span { color: var(--content-2); font-size: var(--text-sm); }
.newpo-po-merge-candidate-context { color: var(--content-2); font-size: var(--text-sm); }
.newpo-po-merge-candidate-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.newpo-po-merge-candidate-meta span {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
}
.newpo-po-merge-direction-summary {
  color: var(--cp-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.newpo-po-merge-warning {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 38%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 9%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.newpo-po-merge-warning strong { color: var(--content-1); }
.newpo-po-merge-reasons { margin: 0; padding-left: var(--space-5); color: var(--cp-danger); font-size: var(--text-sm); line-height: var(--leading-body); }
.newpo-po-merge-review {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
  color: var(--content-1);
}
.newpo-po-merge-review p { margin: var(--space-2) 0 0; color: var(--content-2); line-height: var(--leading-body); }
.newpo-po-merge-review ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.newpo-po-merge-directions {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.newpo-po-merge-directions legend {
  margin-bottom: var(--space-2);
  font-weight: var(--weight-bold);
}
.newpo-po-merge-directions label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}
.newpo-po-merge-directions label:has(input:checked) {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-accent) 20%, transparent);
}
.newpo-po-merge-directions input { margin-top: var(--space-1); accent-color: var(--cp-accent); }
.newpo-po-merge-directions label > span { display: grid; gap: var(--space-1); }
.newpo-po-merge-directions small { color: var(--content-3); }
.newpo-po-merge-direction-only,
.newpo-po-merge-impact,
.newpo-po-merge-confirmation {
  display: grid;
  gap: var(--space-2);
}
.newpo-po-merge-direction-only {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.newpo-po-merge-direction-only span { color: var(--content-2); font-size: var(--text-sm); }
.newpo-po-merge-confirmation {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
}
.newpo-po-merge-confirmation > p { margin: 0; }
.newpo-po-merge-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.newpo-po-merge-reference-grid > span {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-3);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.newpo-po-merge-reference-grid strong { color: var(--content-1); font-size: var(--text-sm); }
.newpo-po-merge-confirm-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--cp-warning) 35%, var(--border-1));
  color: var(--content-1);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.newpo-po-merge-confirm-check input {
  inline-size: var(--space-6);
  block-size: var(--space-6);
  min-inline-size: var(--space-6);
  min-block-size: var(--space-6);
  margin: 0;
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--cp-accent);
  cursor: pointer;
}
.newpo-po-merge-confirm-check input:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}
.newpo-po-merge-error {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 40%, var(--border-1));
  border-radius: var(--radius-md);
  color: var(--cp-danger);
  background: color-mix(in srgb, var(--cp-danger) 7%, var(--surface));
  line-height: var(--leading-body);
}
.newpo-po-merge-foot { gap: var(--space-2); justify-content: flex-end; }
.newpo-merged-view { min-height: 55vh; padding: var(--space-8) var(--space-4); }
.newpo-merged-card {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: var(--space-8);
  border: 1px solid var(--border-1);
  border-top: var(--space-1) solid var(--cp-accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-md);
}
.newpo-merged-card h2 { margin: 0 0 var(--space-2); }
.newpo-merged-card > p { color: var(--content-2); line-height: var(--leading-body); }
.newpo-merged-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.newpo-merged-meta div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); }
.newpo-merged-meta dt { color: var(--content-3); font-size: var(--text-xs); text-transform: uppercase; }
.newpo-merged-meta dd { margin: var(--space-1) 0 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.newpo-merged-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.newpo-merged-note { margin: var(--space-5) 0 0; font-size: var(--text-sm); }
@media (max-width: 680px) {
  .newpo-modal-overlay:has(.newpo-po-merge-card) { padding: var(--space-2); }
  .newpo-po-merge-card { max-height: calc(100dvh - (2 * var(--space-2))); }
  .newpo-po-merge-heading { grid-template-columns: 1fr; }
  .newpo-po-merge-reference-grid { grid-template-columns: 1fr; }
  .newpo-po-merge-foot { flex-direction: column-reverse; }
  .newpo-po-merge-foot .btn { width: 100%; min-height: 44px; }
  .newpo-merged-card { padding: var(--space-5); }
  .newpo-merged-meta { grid-template-columns: 1fr; }
  .newpo-merged-actions { flex-direction: column-reverse; }
  .newpo-merged-actions .btn { width: 100%; min-height: 44px; }
}

/* Repair device custody: physical presence is an operational gate, not intake trivia. */
.ticket-logistics-readonly.is-device-away {
  border-color: color-mix(in srgb, var(--cp-danger) 38%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 8%, var(--surface));
}
.ticket-logistics-readonly.is-device-away > strong { color: var(--cp-danger); }

.repair-device-custody {
  color: var(--content-1);
}
.repair-device-custody-away {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 55%, var(--border-1));
  border-left: var(--space-1) solid var(--cp-danger);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-danger) 9%, var(--surface));
  box-shadow: var(--shadow-sm);
}
.repair-device-custody-icon {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  border-radius: var(--radius-circle);
  background: var(--cp-danger);
  color: var(--content-inv);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.repair-device-custody-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.repair-device-custody-copy > span {
  color: var(--cp-danger);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
}
.repair-device-custody-copy > strong,
.repair-overview-facts .repair-device-custody-copy > strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
.repair-device-custody-copy > p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.repair-device-custody-copy > em,
.repair-device-custody-present > em {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-style: normal;
}
.repair-device-custody-action {
  min-height: 40px;
  white-space: nowrap;
}
.repair-device-custody-present {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}
.repair-device-custody-bin,
.repair-device-custody-present-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.repair-device-custody-bin > span,
.repair-device-custody-present-action > span {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.repair-device-custody-bin > strong,
.repair-overview-facts .repair-device-custody-bin > strong {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 30%, var(--border-1));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cp-accent) 9%, var(--surface));
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}
.repair-device-custody-present-action {
  align-items: flex-start;
  flex-direction: column;
}
.repair-device-custody-present-action .repair-device-custody-action {
  min-height: 34px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.repair-device-custody-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--content-1) 58%, transparent);
}
.repair-device-custody-modal {
  width: min(540px, 100%);
  max-height: calc(100dvh - (2 * var(--space-4)));
  overflow: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}
.repair-device-custody-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-1);
}
.repair-device-custody-modal-head > div {
  display: grid;
  gap: var(--space-1);
}
.repair-device-custody-modal-head span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.repair-device-custody-modal-head h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.repair-device-custody-modal-close {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  padding: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-lg);
  cursor: pointer;
}
.repair-device-custody-modal-close:hover { background: var(--surface-hover); }
.repair-device-custody-modal-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}
.repair-device-custody-consequence {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 32%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
}
.repair-device-custody-consequence.is-warning {
  border-color: color-mix(in srgb, var(--cp-danger) 42%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 8%, var(--surface));
}
.repair-device-custody-consequence > strong { color: var(--content-1); }
.repair-device-custody-consequence > p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.repair-device-custody-reason {
  display: grid;
  gap: var(--space-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.repair-device-custody-reason textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
  color: var(--content-1);
  font: inherit;
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  resize: vertical;
}
.repair-device-custody-reason textarea:not(:placeholder-shown) {
  background: var(--field-filled-surface);
  border-color: var(--field-filled-border);
}
.repair-device-custody-reason textarea:focus-visible,
.repair-device-custody-modal-close:focus-visible,
.repair-device-custody-action:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}
.repair-device-custody-error {
  min-height: var(--space-5);
  margin: 0;
  color: var(--cp-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.repair-device-custody-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-1);
  background: var(--surface-2);
}
.repair-device-custody-modal-foot .btn-danger {
  border-color: var(--cp-danger);
  background: var(--cp-danger);
  color: var(--content-inv);
}
.repair-device-custody-modal-foot .btn-danger:hover {
  background: color-mix(in srgb, var(--cp-danger) 86%, var(--content-1));
}

@media (max-width: 700px) {
  .repair-device-custody-away { grid-template-columns: auto minmax(0, 1fr); }
  .repair-device-custody-away .repair-device-custody-action {
    grid-column: 1 / -1;
    width: 100%;
  }
  .repair-device-custody-modal-overlay { padding: var(--space-2); }
  .repair-device-custody-modal { max-height: calc(100dvh - (2 * var(--space-2))); }
  .repair-device-custody-modal-head,
  .repair-device-custody-modal-body { padding: var(--space-4); }
  .repair-device-custody-modal-foot {
    flex-direction: column-reverse;
    padding: var(--space-4);
  }
  .repair-device-custody-modal-foot .btn { width: 100%; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .repair-device-custody-modal-overlay,
  .repair-device-custody-modal { animation: none !important; }
}

/* ==========================================================================
   Team & Time v2 — focused staff analysis and honest timing semantics
   ========================================================================== */
.cp #metrics-page .team-time-lens {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 4), .8fr) minmax(0, 1.5fr) auto;
  align-items: end;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cp-accent-soft) 64%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page .team-time-lens-copy,
.cp #metrics-page .team-time-lens-copy > :is(strong, small),
.cp #metrics-page .team-time-section-head > div,
.cp #metrics-page .team-time-profile-identity > div {
  display: grid;
  gap: var(--space-1);
}

.cp #metrics-page .team-time-kicker,
.cp #metrics-page .team-time-profile-identity > div > span {
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cp #metrics-page .team-time-lens-copy > strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp #metrics-page .team-time-lens-copy > small,
.cp #metrics-page .team-time-section-head > span,
.cp #metrics-page .team-time-benchmark-panel > p {
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #metrics-page .team-time-lens-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--space-3);
}

.cp #metrics-page .team-time-lens-controls label {
  display: grid;
  gap: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #metrics-page .team-time-lens-controls select {
  min-width: 0;
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  border: 1px solid var(--field-filled-border);
  border-radius: var(--radius-md);
  background: var(--field-filled-surface);
  color: var(--content-1);
  font: inherit;
}

.cp #metrics-page .team-time-lens-controls :is(select, button):focus-visible,
.cp #metrics-page .team-time-person-row:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.cp #metrics-page .team-time-quality-pill {
  align-self: center;
  max-width: calc(var(--space-10) * 7);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 32%, var(--border-1));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent-soft) 70%, var(--surface));
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: center;
}

.cp #metrics-page .team-time-quality-pill.is-low {
  border-color: color-mix(in srgb, var(--cp-warning) 48%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
}

.cp #metrics-page .team-time-quality-pill.is-good {
  border-color: color-mix(in srgb, var(--cp-success) 44%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 9%, var(--surface));
}

.cp #metrics-page .team-time-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #metrics-page .team-time-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 44%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-danger) 8%, var(--surface));
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #metrics-page .team-time-error.hidden {
  display: none;
}

.cp #metrics-page .team-time-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.cp #metrics-page .team-time-kpi-grid-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cp #metrics-page .team-time-kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  min-height: calc(var(--space-10) * 2.5);
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-standard);
}

.cp #metrics-page .team-time-kpi::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--space-1);
  background: var(--border-2);
  content: "";
}

.cp #metrics-page .team-time-kpi.is-primary::before {
  background: var(--cp-accent);
}

.cp #metrics-page .team-time-kpi > span {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cp #metrics-page .team-time-kpi > strong {
  overflow-wrap: anywhere;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #metrics-page .team-time-kpi > small {
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #metrics-page .team-time-staff-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(calc(var(--space-10) * 6), .85fr);
  align-items: start;
  gap: var(--space-4);
}

.cp #metrics-page .team-time-focus-panel,
.cp #metrics-page .team-time-selected-profile,
.cp #metrics-page .team-time-quality-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #metrics-page .team-time-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

.cp #metrics-page .team-time-section-head h4,
.cp #metrics-page .team-time-selected-profile h4 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.cp #metrics-page .team-time-roster {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.cp #metrics-page .team-time-person-row {
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 4), 1.2fr) minmax(calc(var(--space-10) * 7), 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(var(--space-10) * 1.8);
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);
}

.cp #metrics-page .team-time-person-row:hover,
.cp #metrics-page .team-time-person-row.is-selected {
  border-color: color-mix(in srgb, var(--cp-accent) 26%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent-soft) 52%, var(--surface));
  transform: translateX(var(--space-1));
}

.cp #metrics-page .team-time-person-identity {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.cp #metrics-page .team-time-person-identity > i,
.cp #metrics-page .team-time-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--surface));
  color: var(--cp-accent-hover);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-black);
}

.cp #metrics-page .team-time-person-identity > span,
.cp #metrics-page .team-time-person-measures > span {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.cp #metrics-page .team-time-person-identity :is(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .team-time-person-identity small,
.cp #metrics-page .team-time-person-measures small,
.cp #metrics-page .team-time-profile-metrics small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #metrics-page .team-time-person-measures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.cp #metrics-page .team-time-person-measures strong,
.cp #metrics-page .team-time-profile-metrics strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #metrics-page .team-time-person-arrow {
  color: var(--cp-accent);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.cp #metrics-page .team-time-selected-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-color: color-mix(in srgb, var(--cp-accent) 34%, var(--border-1));
  background: linear-gradient(120deg, color-mix(in srgb, var(--cp-accent-soft) 58%, var(--surface)), var(--surface));
}

.cp #metrics-page .team-time-profile-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cp #metrics-page .team-time-profile-identity small {
  color: var(--content-2);
}

.cp #metrics-page .team-time-profile-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(calc(var(--space-10) * 1.5), 1fr));
  gap: var(--space-4);
}

.cp #metrics-page .team-time-profile-metrics > span {
  display: grid;
  gap: var(--space-1);
  text-align: right;
}

.cp #metrics-page .team-time-benchmark-panel > p {
  margin: var(--space-3) 0;
}

.cp #metrics-page .team-time-benchmark {
  display: grid;
  gap: var(--space-4);
}

.cp #metrics-page .team-time-benchmark-empty {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #metrics-page .team-time-benchmark-row,
.cp #metrics-page .team-time-benchmark-row > div:first-child {
  display: grid;
  gap: var(--space-2);
}

.cp #metrics-page .team-time-benchmark-row > div:first-child {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.cp #metrics-page .team-time-benchmark-row span,
.cp #metrics-page .team-time-benchmark-row strong {
  color: var(--content-2);
  font-size: var(--text-xs);
}

.cp #metrics-page .team-time-benchmark-track {
  position: relative;
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.cp #metrics-page .team-time-benchmark-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.cp #metrics-page .team-time-benchmark-track .is-peer {
  height: calc(var(--space-1) / 2);
  margin-block: calc(var(--space-1) * .75);
  background: var(--content-3);
}

.cp #metrics-page .team-time-benchmark-track .is-focus {
  z-index: 1;
  background: var(--cp-accent);
  opacity: .72;
}

.cp #metrics-page .team-time-definition {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: var(--space-1) solid var(--cp-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #metrics-page .team-time-definition strong {
  color: var(--content-1);
}

.cp #metrics-page .team-time-wide-chart {
  margin-bottom: var(--space-4);
}

.cp #metrics-page .team-time-day-chart {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  min-height: calc(var(--space-10) * 5);
  padding-top: var(--space-4);
  overflow-x: auto;
}

.cp #metrics-page .team-time-day {
  display: grid;
  grid-template-rows: var(--space-5) minmax(calc(var(--space-10) * 3), 1fr) var(--space-5);
  gap: var(--space-1);
  flex: 1 0 var(--space-8);
  min-width: var(--space-8);
  height: calc(var(--space-10) * 4.5);
  text-align: center;
}

.cp #metrics-page .team-time-day > strong,
.cp #metrics-page .team-time-day > small {
  overflow: hidden;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .team-time-day > span {
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 0;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(to top, var(--border-1) 0, var(--border-1) 1px, transparent 1px, transparent 25%);
}

.cp #metrics-page .team-time-day > span > i {
  width: min(100%, var(--space-5));
  min-height: var(--space-1);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(to top, var(--cp-accent-hover), var(--cp-accent));
  transform-origin: bottom;
  animation: team-time-grow var(--dur-slow) var(--ease-out) both;
}

@keyframes team-time-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

.cp #metrics-page .team-time-mode-mix {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.cp #metrics-page .team-time-mode-bar {
  display: flex;
  min-height: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.cp #metrics-page .team-time-mode-bar > span {
  min-width: calc(var(--space-1) / 2);
  transform-origin: left center;
  animation: team-time-width var(--dur-slow) var(--ease-out) both;
}

@keyframes team-time-width {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cp #metrics-page .team-time-mode-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.cp #metrics-page .team-time-mode-legend > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.cp #metrics-page .team-time-mode-legend > span > i {
  flex: 0 0 var(--space-3);
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-circle);
}

.cp #metrics-page .team-time-mode-legend > span > span {
  display: grid;
  min-width: 0;
}

.cp #metrics-page .team-time-mode-legend :is(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #metrics-page .team-time-mode-legend strong {
  color: var(--content-1);
  font-size: var(--text-xs);
}

.cp #metrics-page .team-time-mode-legend small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #metrics-page :is(.team-time-mode-bar > span, .team-time-mode-legend i).is-active { background: var(--cp-accent); }
.cp #metrics-page :is(.team-time-mode-bar > span, .team-time-mode-legend i).is-assigned { background: var(--cp-category-regular); }
.cp #metrics-page :is(.team-time-mode-bar > span, .team-time-mode-legend i).is-queue { background: var(--cp-warning); }
.cp #metrics-page :is(.team-time-mode-bar > span, .team-time-mode-legend i).is-paused { background: var(--content-3); }
.cp #metrics-page :is(.team-time-mode-bar > span, .team-time-mode-legend i).is-unattributed { background: var(--border-2); }
.cp #metrics-page :is(.team-time-mode-bar > span, .team-time-mode-legend i).is-system { background: var(--cp-success); }

.cp #metrics-page .team-time-quality-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--space-10) * 5), .7fr);
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-color: color-mix(in srgb, var(--cp-accent) 26%, var(--border-1));
}

.cp #metrics-page .team-time-quality-card.is-low {
  border-color: color-mix(in srgb, var(--cp-warning) 44%, var(--border-1));
}

.cp #metrics-page .team-time-quality-card > div:first-child {
  display: grid;
  gap: var(--space-1);
}

.cp #metrics-page .team-time-quality-card strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #metrics-page .team-time-quality-card span {
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #metrics-page .team-time-coverage-track {
  height: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.cp #metrics-page .team-time-coverage-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cp-accent);
  transition: width var(--dur-slow) var(--ease-out);
}

.cp #metrics-page .team-time-quality-card.is-low .team-time-coverage-track > i {
  background: var(--cp-warning);
}

.cp #metrics-page .metrics-section-panel .metric-time-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 1100px) {
  .cp #metrics-page .team-time-lens {
    grid-template-columns: minmax(calc(var(--space-10) * 4), .7fr) minmax(0, 1.3fr);
  }

  .cp #metrics-page .team-time-quality-pill {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: none;
  }

  .cp #metrics-page .team-time-kpi-grid-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp #metrics-page .team-time-person-row {
    grid-template-columns: minmax(calc(var(--space-10) * 4), 1fr) minmax(calc(var(--space-10) * 6), 1fr) auto;
  }
}

@media (max-width: 900px) {
  .cp #metrics-page .team-time-lens,
  .cp #metrics-page .team-time-staff-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #metrics-page .team-time-lens-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .cp #metrics-page .team-time-kpi-grid,
  .cp #metrics-page .team-time-kpi-grid-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #metrics-page .team-time-selected-profile {
    align-items: flex-start;
    flex-direction: column;
  }

  .cp #metrics-page .team-time-profile-metrics {
    width: 100%;
  }

  .cp #metrics-page .team-time-profile-metrics > span {
    text-align: left;
  }
}

@media (max-width: 620px) {
  .cp #metrics-page #metrics-section-team-time,
  .cp #metrics-page #metrics-section-team-time > *,
  .cp #metrics-page [data-metrics-time-panel],
  .cp #metrics-page .metric-time-report,
  .cp #metrics-page .metric-time-report-head,
  .cp #metrics-page .metric-time-report-head > *,
  .cp #metrics-page .metric-time-chart-grid,
  .cp #metrics-page .metric-time-chart-grid > *,
  .cp #metrics-page .team-time-lens,
  .cp #metrics-page .team-time-lens > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .cp #metrics-page .metrics-time-tabs,
  .cp #metrics-page .metric-time-selector {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .cp #metrics-page .team-time-error {
    align-items: stretch;
    flex-direction: column;
  }

  .cp #metrics-page .team-time-lens-controls,
  .cp #metrics-page .team-time-person-row,
  .cp #metrics-page .team-time-quality-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #metrics-page .team-time-lens-controls .btn {
    width: 100%;
  }

  .cp #metrics-page .team-time-person-measures,
  .cp #metrics-page .team-time-profile-metrics,
  .cp #metrics-page .team-time-mode-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #metrics-page .team-time-person-arrow {
    display: none;
  }

  .cp #metrics-page .team-time-day-chart {
    gap: var(--space-1);
  }
}

@media (max-width: 390px) {
  .cp #metrics-page .team-time-kpi-grid,
  .cp #metrics-page .team-time-kpi-grid-five,
  .cp #metrics-page .team-time-person-measures,
  .cp #metrics-page .team-time-profile-metrics,
  .cp #metrics-page .team-time-mode-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .cp #metrics-page .team-time-lens,
  .cp #metrics-page .team-time-focus-panel,
  .cp #metrics-page .team-time-selected-profile,
  .cp #metrics-page .team-time-quality-card {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp #metrics-page .team-time-day > span > i,
  .cp #metrics-page .team-time-mode-bar > span {
    animation: none;
  }

  .cp #metrics-page .team-time-kpi,
  .cp #metrics-page .team-time-person-row,
  .cp #metrics-page .team-time-coverage-track > i {
    transition: none;
  }
}

/* Repair creation: make intake decisions read as an ordered form instead of
   unrelated controls floating across a twelve-column grid. */
.cp .ticket-create-shell .repair-fast-panel-heading {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.cp .ticket-create-shell .repair-fast-panel-heading > p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-essentials-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] :is(
  .repair-fast-checkin-device,
  .repair-fast-checkin-logistics
) {
  grid-column: auto;
}

.cp .ticket-create-shell :is(
  [data-fast-step-panel="inspection"],
  [data-fast-step-panel="expectations"]
) .repair-fast-checkin-group {
  align-content: start;
  gap: var(--space-4);
  margin-top: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

.cp .ticket-create-shell :is(
  [data-fast-step-panel="inspection"],
  [data-fast-step-panel="expectations"]
) .repair-fast-checkin-group-head {
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

.cp .ticket-create-shell :is(
  [data-fast-step-panel="inspection"],
  [data-fast-step-panel="expectations"]
) .repair-fast-checkin-group-head > strong {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  letter-spacing: 0;
  text-transform: none;
}

.cp .ticket-create-shell :is(
  [data-fast-step-panel="inspection"],
  [data-fast-step-panel="expectations"]
) .repair-fast-checkin-group-head > p {
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-checkin-group-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] :is(
  .repair-fast-choice,
  .repair-fast-derived-value,
  .repair-fast-passcode-field,
  .repair-fast-conditional
) {
  min-width: 0;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-checkin-group-body > :first-child {
  padding-top: 0;
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-checkin-group-body > :last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-conditional > .repair-fast-choice {
  padding: 0;
  border: 0;
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-choice,
.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-passcode-field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] :is(
  .repair-fast-choice > span,
  .repair-fast-derived-value > span,
  .repair-fast-passcode-field > span
) {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-choice > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-3);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-choice button {
  flex: 1 1 calc(var(--space-10) * 2);
  min-height: calc(var(--space-8) + var(--space-1));
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--dur-micro) var(--ease-standard),
    color var(--dur-micro) var(--ease-standard),
    box-shadow var(--dur-micro) var(--ease-standard);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-choice button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-choice button.active {
  background: var(--surface);
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-choice button:focus-visible,
.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-passcode-field > input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-derived-value {
  gap: var(--space-1);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-derived-value > strong {
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-derived-value > em,
.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-passcode-field > small {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-passcode-field > input {
  min-height: var(--space-10);
  border-color: var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
  color: var(--content-1);
}

.cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-passcode-field > input:not(:placeholder-shown) {
  border-color: var(--field-filled-border);
  background: var(--field-filled-surface);
}

@media (max-width: 1100px) {
  .cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-essentials-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .cp .ticket-create-shell :is(
    [data-fast-step-panel="inspection"],
    [data-fast-step-panel="expectations"]
  ) .repair-fast-checkin-group {
    padding: var(--space-4);
  }

  .cp .ticket-create-shell [data-fast-step-panel="inspection"] .repair-fast-choice button {
    flex-basis: calc(50% - var(--space-1));
  }
}

/* Repair Parts & Items: keep search, actions and money controls readable. */
#repair-section-parts .repair-add-from-catalog {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch;
  gap: var(--space-3);
  padding: 0;
}
#repair-section-parts .repair-catalog-search-control {
  position: relative;
  min-width: 0;
}
#repair-section-parts .repair-catalog-secondary-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
#repair-section-parts .repair-catalog-lookup-btn {
  box-shadow: none;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-4);
}
#repair-section-parts .repair-catalog-secondary-actions > button {
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: none;
}
#repair-section-parts .repair-catalog-secondary-actions > button:hover {
  background: var(--surface-hover);
  border-color: var(--cp-accent);
}
#repair-section-parts .repair-catalog-search-field input {
  min-height: var(--space-10);
}
#repair-section-parts .repair-order-custom:has(> .repair-order-custom-panel.hidden) {
  display: none;
}
#repair-section-parts .repair-catalog-search-results {
  left: 0;
  right: auto;
  top: 100%;
  width: 100%;
  box-sizing: border-box;
  max-height: min(calc(var(--space-10) * 7), 50dvh);
  margin-top: var(--space-1);
  z-index: var(--z-dropdown);
}
/* The section clips rounded corners normally; allow only an open result list
   to extend beyond them and cover neighboring section headers. */
#repair-section-parts:has(.repair-catalog-search-results:not(.hidden)) {
  position: relative;
  overflow: visible;
  z-index: var(--z-dropdown);
}
#repair-section-parts .repair-finance-table :is(th, td):nth-child(5),
#repair-section-parts .repair-finance-table :is(th, td):nth-child(6) {
  text-align: center !important;
  vertical-align: middle;
}
#repair-section-parts .repair-finance-table .repair-line-price {
  box-sizing: border-box;
  width: calc(var(--space-10) * 3 + var(--space-4));
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
#repair-section-parts .repair-line-price::-webkit-inner-spin-button,
#repair-section-parts .repair-line-price::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
#repair-section-parts .ticket-extra-discount-control {
  width: calc(var(--space-10) * 4 + var(--space-4));
  max-width: none;
  grid-template-columns: minmax(0, 1fr) calc(var(--space-8) * 2);
}
#repair-section-parts .repair-line-discount {
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
#repair-section-parts .repair-line-discount-type {
  padding-left: var(--space-2);
  padding-right: var(--space-6);
  font-size: var(--text-base);
  text-align: center;
  text-align-last: center;
  background-position: right var(--space-2) center;
}
@media (max-width: 540px) {
  #repair-section-parts .repair-add-from-catalog {
    grid-template-columns: minmax(0, 1fr);
  }
  #repair-section-parts .repair-catalog-secondary-actions > button {
    flex: 1 1 auto;
    justify-content: center;
    white-space: normal;
  }
}

/* Repair Information: a readable brief with existing editors on demand. */
#repair-section-device .repair-info-body {
  gap: var(--space-3);
  padding: var(--space-5);
  color: var(--content-1);
}
#repair-section-device .repair-info-device {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-1);
}
#repair-section-device .repair-info-device > div { min-width: 0; }
#repair-section-device .repair-info-device-name {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
#repair-section-device .repair-info-device-meta {
  margin: var(--space-2) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
#repair-section-device .repair-info-repair {
  flex: 0 1 auto;
  max-width: 40%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}
#repair-section-device .repair-info-body > .repair-problem-card {
  padding: var(--space-2) 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
}
#repair-section-device .repair-info-body #repair-problem-edit-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
#repair-section-device .repair-info-body .repair-problem-card > p {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
#repair-section-device .repair-info-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--border-1);
}
#repair-section-device .repair-info-facts > .repair-detail-fact {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#repair-section-device .repair-info-facts > .repair-detail-fact > span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--content-2);
}
#repair-section-device .repair-info-facts > .repair-detail-fact > strong { color: var(--content-1); }
#repair-section-device .repair-info-facts > .repair-detail-fact + .repair-detail-fact {
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-1);
}
#repair-section-device :is(.repair-info-passcode, .repair-info-promise, .repair-info-disclosure) > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  cursor: pointer;
}
#repair-section-device summary::-webkit-details-marker { display: none; }
#repair-section-device :is(.repair-info-passcode, .repair-info-promise, .repair-info-disclosure) > summary:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}
#repair-section-device :is(.repair-info-passcode, .repair-info-promise, .repair-info-disclosure) > summary > svg {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#repair-section-device .repair-info-passcode > summary { justify-content: flex-start; }
#repair-section-device .repair-info-passcode > summary strong { color: var(--cp-success); }
#repair-section-device .repair-info-passcode > summary svg { color: var(--cp-accent); }
#repair-section-device .repair-info-passcode > p {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
#repair-section-device .repair-info-promise {
  min-width: 0;
  background: var(--cp-accent-soft);
  border-radius: var(--radius-sm);
}
#repair-section-device .repair-info-promise > summary {
  padding: var(--space-3) var(--space-4);
}
#repair-section-device .repair-info-promise > summary > svg { color: var(--cp-accent); }
#repair-section-device :is(.repair-info-promise, .repair-info-disclosure) > summary > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
#repair-section-device :is(.repair-info-promise, .repair-info-disclosure) > summary > div > span {
  color: var(--content-2);
  font-size: var(--text-sm);
}
#repair-section-device .repair-info-edit {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--cp-accent-hover);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
#repair-section-device .repair-info-edit-open,
#repair-section-device .repair-info-promise[open] .repair-info-edit-closed { display: none; }
#repair-section-device .repair-info-promise[open] .repair-info-edit-open { display: inline; }
#repair-section-device .repair-info-promise > .repair-promise-field { padding: 0 var(--space-3) var(--space-3); }
#repair-section-device .repair-info-disclosure {
  min-width: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
}
#repair-section-device .repair-info-disclosure > summary { padding: var(--space-3) var(--space-4); }
#repair-section-device .repair-info-disclosure > summary > svg:last-child { color: var(--content-2); }
#repair-section-device .repair-info-disclosure[open] > summary > svg:last-child { transform: rotate(180deg); }
#repair-section-device .repair-info-disclosure > :not(summary) { margin: 0 var(--space-3) var(--space-3); }
#repair-section-device .repair-info-disclosure .repair-customer-disclosure-records {
  border: 0;
  padding: var(--space-3);
  background: var(--surface-2);
}
#repair-section-device .repair-info-disclosure .repair-customer-disclosure-records-head > strong { display: none; }
@media (max-width: 640px) {
  #repair-section-device .repair-info-body { padding: var(--space-3); }
  #repair-section-device .repair-info-promise .repair-promise-custom-row { grid-template-columns: minmax(0, 1fr); }
  #repair-section-device .repair-info-device { flex-direction: column; gap: var(--space-2); }
  #repair-section-device .repair-info-repair { max-width: 100%; }
  #repair-section-device .repair-info-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #repair-section-device .repair-info-facts > .repair-detail-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  #repair-section-device :is(.repair-info-promise, .repair-info-disclosure) > summary { padding: var(--space-3); gap: var(--space-2); }
}

/* Completing a settled sale is a primary action, independent of the Closed
   status badge's semantic color. */
.cp #sale-ticket-page .sale-ticket-action-bar button[data-sale-status="closed"] {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: var(--cp-accent-content);
}
.cp #sale-ticket-page .sale-ticket-action-bar button[data-sale-status="closed"]:hover {
  background: var(--cp-accent-hover);
  border-color: var(--cp-accent-hover);
}
.cp #sale-ticket-page .sale-ticket-action-bar button[data-sale-status="closed"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Cash Reconciliation: refunds, unconfirmed Clover refunds and day notes ---- */
#reports-page .report-detail-extra {
  display: grid;
  gap: var(--space-4);
  margin: 0 18px 18px;
}

#reports-page .report-recon-section {
  min-width: 0;
  border: 1px solid var(--border-1);
  background: var(--surface);
}

#reports-page .report-recon-section-head {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-3);
}

#reports-page .report-recon-section-head h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: 650;
}

#reports-page .report-recon-hint {
  margin: 2px 0 0;
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

#reports-page .report-recon-alert {
  border-color: color-mix(in srgb, var(--cp-danger) 45%, var(--border-1));
}

#reports-page .report-recon-alert .report-recon-section-head {
  border-bottom-color: color-mix(in srgb, var(--cp-danger) 30%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 9%, var(--surface));
}

#reports-page .report-recon-alert .report-recon-section-head h3 {
  color: var(--cp-danger);
}

#reports-page .report-recon-table-wrap {
  overflow-x: auto;
}

#reports-page .report-table.report-recon-table {
  min-width: 1100px;
  margin: 0;
  table-layout: auto;
}

#reports-page .report-table.report-recon-table :where(th, td) {
  white-space: nowrap;
}

#reports-page .report-recon-empty {
  padding: var(--space-3);
  color: var(--content-3);
  font-size: var(--text-xs);
  list-style: none;
}

#reports-page .report-recon-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--content-2);
}

#reports-page .report-recon-status-confirmed {
  background: color-mix(in srgb, var(--cp-success) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 75%, var(--content-1));
}

#reports-page .report-recon-status-unconfirmed {
  background: color-mix(in srgb, var(--cp-danger) 12%, var(--surface));
  color: var(--cp-danger);
}

#reports-page .report-recon-status-store_credit,
#reports-page .report-recon-status-external {
  background: var(--cp-accent-soft);
  color: color-mix(in srgb, var(--cp-accent) 80%, var(--content-1));
}

#reports-page .report-recon-note-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#reports-page .report-recon-note {
  display: grid;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

#reports-page .report-recon-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-3);
  font-size: var(--text-xs);
}

#reports-page .report-recon-note-meta strong {
  color: var(--content-1);
  font-weight: 650;
}

#reports-page .report-recon-note-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--content-2);
  font-size: 11px;
  font-weight: 650;
}

#reports-page .report-recon-note-tag-day {
  background: var(--cp-accent-soft);
  color: color-mix(in srgb, var(--cp-accent) 80%, var(--content-1));
}

#reports-page .report-recon-note-chip {
  padding: 1px 7px;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  color: var(--content-2);
}

#reports-page .report-recon-note-body {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#reports-page .report-recon-note-actions {
  display: flex;
  gap: var(--space-3);
}

#reports-page .report-recon-note-actions .report-detail-top-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cp-accent);
  font-size: var(--text-xs);
  cursor: pointer;
}

#reports-page .report-recon-note-actions .report-recon-note-delete {
  color: var(--content-3);
}

#reports-page .report-recon-note-form {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
}

#reports-page .report-recon-note-form.is-editing {
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-3);
}

#reports-page .report-recon-note-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

#reports-page .report-recon-field {
  display: grid;
  gap: 2px;
  min-width: 160px;
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: 600;
}

#reports-page .report-recon-field-ticket {
  min-width: 140px;
  max-width: 180px;
}

#reports-page .report-recon-field :where(input, select),
#reports-page .report-recon-note-form textarea {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
}

#reports-page .report-recon-note-form textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  line-height: var(--leading-body);
}

#reports-page .report-recon-note-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

#reports-page .report-recon-note-form-actions .btn {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: 12px;
}

#reports-page .report-recon-note-error {
  margin-right: auto;
  color: var(--cp-danger);
  font-size: var(--text-xs);
}

@media (max-width: 640px) {
  #reports-page .report-detail-extra {
    margin: 0 var(--space-3) var(--space-4);
  }

  #reports-page .report-recon-field,
  #reports-page .report-recon-field-ticket {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* Read-only Inventory (Sales): browse stock and print labels, never edit.
   app-access.js sets body[data-inventory-readonly]; the API enforces it. */
body[data-inventory-readonly="true"] :is(
  #inv-add-btn,
  #inv-menu-edit-selected,
  #inv-menu-refurb-selected,
  #inv-menu-clear-selection,
  #inv-menu-assign-all-counts,
  #inv-menu-mass-assign-count,
  #inv-menu-transfers,
  #inv-menu-import,
  #inv-row-actions-menu [data-inv-row-action="edit"],
  #inv-row-actions-menu [data-inv-row-action="add"],
  #inv-row-actions-menu [data-inv-row-action="adjust"],
  #inv-row-actions-menu [data-inv-row-action="location-overrides"],
  #inv-row-actions-menu [data-inv-row-action="copy"],
  #inv-row-actions-menu [data-inv-row-action="merge"],
  .inv-sum-name-pencil,
  .inv-det-name-pencil,
  .inv-sum-manage-game-catalog,
  #iid-add-unit-btn,
  #iid-menu-edit-selected,
  #iid-menu-refurb-selected,
  #iid-menu-clear-selection,
  #iid-menu-edit-catalog,
  .iid-attachments-upload,
  .iid-attach-del,
  #civ-btn-supplier-skus,
  #civ-btn-location-overrides,
  #civ-btn-edit,
  #iim-edit-item,
  #iim-refurb-item,
  #iim-m360-retrieve
) {
  display: none !important;
}

/* Shelf label price that the register does not charge yet. */
.iim-shelf-label-price-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--cp-warning);
}

/* Multi-box purchase orders: box label scan progress in the Tracking card. */
#new-purchase-order-page .newpo-box-progress {
  display: block;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--cp-warning);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cp-warning) 12%, transparent);
  color: var(--content-1);
  font-weight: 700;
}

#new-purchase-order-page .newpo-box-progress.is-complete {
  border-left-color: var(--cp-success);
  background: color-mix(in srgb, var(--cp-success) 12%, transparent);
}

#new-purchase-order-page .newpo-tracking-links a .newpo-box-scan {
  margin-right: auto;
  margin-left: calc(-1 * var(--space-1));
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

#new-purchase-order-page .newpo-box-scan.is-scanned {
  color: var(--cp-success);
}

#new-purchase-order-page .newpo-box-scan.is-missing {
  color: var(--cp-warning);
}

/* Receive station: multi-box order progress (one tracking label per box). */
.receive-station-box-chip.is-missing,
body.dashboard-dark-active #receive-page .receive-station-box-chip.is-missing {
  border-color: color-mix(in srgb, var(--cp-warning) 55%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: var(--content-1);
}

.receive-station-box-note {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* Send a defective ticket-held part to RMA (inventory unit + ticket lines) */
.tp-rma-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: rgba(15, 23, 42, 0.55);
}

.tp-rma-card {
  width: min(100%, 460px);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

.tp-rma-card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  line-height: 1.3;
}

.tp-rma-part {
  margin: 0 0 var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
}

.tp-rma-effects {
  margin: 0 0 var(--space-4);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.tp-rma-field {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
}

.tp-rma-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}

.tp-rma-field textarea:focus {
  outline: 2px solid var(--cp-accent);
  outline-offset: 1px;
  border-color: var(--cp-accent);
}

.tp-rma-error {
  margin-top: var(--space-2);
  color: var(--cp-danger);
  font-size: var(--text-sm);
}

.tp-rma-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}