/* Settings > Services (was Price matrix), the legacy table staff keep while lead forms are off.
   Its own file so two builders never edit the same stylesheet tail. Tokens only, from portal.css:
   hairline rows, 32px controls on a desktop pointer, 44px on a finger. */

.pm-panel .table-scroll { border-bottom: 1px solid var(--line); }
.pm-table { table-layout: auto; }
.pm-table th { white-space: nowrap; }
.pm-table td { padding: 6px 10px; vertical-align: top; white-space: normal; }
.pm-table tr.pm-row:hover td { background: var(--surface-2); }
.pm-cell-head { display: none; }

.pm-row.pm-off .pm-name,
.pm-row.pm-off .pm-price,
.pm-row.pm-off .pm-source,
.pm-row.pm-off .pm-unit { color: var(--muted); }

.pm-name { width: 100%; min-width: 150px; }
/* Wide enough that the longest source name, "Not measured yet", is not clipped. */
.pm-source { width: 100%; min-width: 168px; }
.pm-unit { width: 100%; min-width: 118px; }
/* The same widths for the shared dropdown (assets/select.js) drawn over each select. Its list
   is portalled to the page, so opening it never widens the table. */
.pm-source-select { min-width: 168px; }
.pm-unit-select { min-width: 118px; }
.pm-row.pm-off .cs-value { color: var(--muted); }

.pm-service { min-width: 220px; }
.pm-table .pm-description { width: 100%; min-height: 32px; padding: 6px 10px; resize: vertical; font-size: 12px; line-height: 1.45; }
/* Eight columns with the catalog: a little less air between them keeps Remove on screen. */
.pm-table th, .pm-table td { padding-left: 10px; padding-right: 10px; }
.pm-table th:first-child, .pm-table td:first-child { padding-left: 24px; }
.pm-table th:last-child, .pm-table td:last-child { padding-right: 24px; }
.pm-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pm-id-button {
  position: relative; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 8px;
  border: 1px solid var(--line-2); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink-3); cursor: pointer;
  font: 500 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pm-id-button:hover { background: var(--surface-3); color: var(--ink); }
.pm-id-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The ID keeps its size and takes a 44px square of finger: an invisible layer centred on it. */
.pm-id-button::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
.pm-copied { color: var(--positive); font-size: 12px; }
.pm-copied:empty { display: none; }
.pm-forms { min-height: 32px; }
@media (pointer: coarse) { .pm-forms { min-height: 44px; } }
.pm-stack { display: grid; gap: 5px; }
.pm-soon { display: block; color: var(--ink-3); font-size: 12px; line-height: 1.5; }

.pm-money { display: flex; align-items: center; gap: 6px; }
.pm-currency { color: var(--ink-3); font-size: 13px; }
.pm-price {
  width: 88px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pm-price[aria-invalid="true"] { border-color: var(--danger); }

.pm-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.pm-toggle input { flex: none; }

.pm-controls { display: flex; align-items: center; gap: 4px; }
.pm-move .icon { width: 16px; height: 16px; }
.pm-move:disabled { opacity: .35; }
.pm-remove { margin-left: 6px; }

.pm-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.pm-footer .inline-status { flex: 1; margin: 0; }

@media (max-width: 760px) {
  /* Seven columns cannot read at 390px, so each row becomes its own card. */
  /* Block, but not width:100%: a row that is both full width and margined would
     push its own right gutter off the screen. */
  .pm-table, .pm-table tbody, .pm-table tr, .pm-table td { display: block; }
  .pm-table { width: 100%; }
  .pm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pm-table tr.pm-row {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    padding: 4px 0;
    margin: 0 0 14px;
  }
  .pm-panel .table-scroll { overflow: visible; padding: 16px 16px 2px; }
  .pm-table tr.pm-row:last-child { margin-bottom: 0; }
  .pm-table tr.pm-row.pm-off { background: var(--surface-2); }
  .pm-table td.pm-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
  }
  .pm-table tr.pm-row td.pm-cell:last-child { border-bottom: 0; }
  .pm-cell-head { display: block; color: var(--ink-3); font-size: 12px; flex: none; }
  .pm-cell > :not(.pm-cell-head) { min-width: 0; }
  .pm-name, .pm-source, .pm-unit { width: auto; flex: 1; min-width: 0; }
  .pm-source-select, .pm-unit-select, .pm-service { min-width: 0; }
  /* The service cell holds a name, a description and an ID, so it stacks under its label. */
  .pm-table td.pm-cell:first-child { display: grid; gap: 8px; }
  .pm-id-button { min-height: 32px; }
  .pm-stack { flex: 1; min-width: 0; }
  /* The row label already says On, so the toggle does not say it twice. */
  .pm-toggle span { display: none; }
  .pm-controls { flex-wrap: wrap; justify-content: flex-end; }
  .pm-footer { flex-wrap: wrap; padding: 16px 18px 18px; }
  .pm-footer .inline-status { flex-basis: 100%; order: 3; }
  .pm-footer .button { flex: 1; }
}