/* ASA OS shop settings (request 244A): #/settings/shop, and the labor-type field in the estimate's custom line.
 * Loaded after shop.css; uses its tokens throughout (grouped cards, segmented controls, calm badges). */

.ss-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -6px 0 20px; }
.ss-scope select { min-width: 200px; }
.ss-scope .ss-note { flex-basis: 100%; margin: 0; }
.ss-note { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }

.ss-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ss-group { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ss-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ss-title { margin: 0; font-size: 17px; }
.ss-group:first-child { grid-row: span 3; }

/* one value per row: label | control | badge (+ inline error under it) */
.ss-list { display: flex; flex-direction: column; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
.ss-list .ss-row { padding: 12px 14px; background: var(--surface); }
.ss-list .ss-row + .ss-row { border-top: 1px solid var(--hair); }
.ss-row { display: grid; grid-template-columns: minmax(110px, 1fr) auto; grid-template-areas: "label ctl" "meta meta" "err err"; gap: 6px 12px; align-items: center; }
.ss-row-top { align-items: start; }
.ss-label { grid-area: label; font-size: 14px; font-weight: 500; color: var(--ink); }
.ss-ctl { grid-area: ctl; display: flex; align-items: center; gap: 6px; justify-self: end; }
.ss-ctl input[type="text"] { width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.ss-ctl input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--red); }
.ss-ctl input::placeholder { color: var(--ink-3); opacity: .7; }   /* an inherited value shown as a hint, not as typed */
.ss-affix, .ss-unit { color: var(--ink-2); font-size: 14px; }
.ss-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; min-height: 0; flex-wrap: wrap; }
.ss-meta:empty { display: none; }
.ss-err { grid-area: err; margin: 0; font-size: 12.5px; color: var(--red); }
.ss-err[hidden] { display: none; }
.ss-fields { display: flex; flex-direction: column; gap: 12px; }
.ss-fields[hidden] { display: none; }
.ss-inherited { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.ss-inherited[hidden] { display: none; }
.shop-on .ss-meta button.quiet { min-height: 24px; font-size: 12.5px; padding: 0 4px; }
.shop-on .ss-meta button.quiet[hidden] { display: none; }

.ss-seg { align-self: flex-start; flex-wrap: wrap; }
.ss-checks { grid-area: ctl; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-self: end; }
.ss-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; }
.ss-check input { margin: 0; }

/* where a value comes from: quiet text badges, colour only as a hint (the words carry the meaning) */
.ss-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 1; padding: 5px 8px; border-radius: 999px;
  background: var(--fill); color: var(--ink-2); white-space: nowrap; }
.ss-badge:empty { display: none; }
.ss-badge.is-override { background: var(--accent-soft); color: var(--accent); }
.ss-badge.is-set { background: var(--fill); color: var(--ink); }
.ss-badge.is-inherit { background: var(--fill); color: var(--ink-2); }
.ss-badge.is-unset { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair-strong); }

.ss-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.ss-buttons { display: flex; gap: 8px; }
.ss-saved { margin: 0; font-size: 13px; color: var(--ink-2); }
.ss-status .notice { margin: 0 0 12px; }
.ss-status .notice button.quiet { min-height: 24px; }

/* estimate custom line: the labor type picker */
.ss-labor-type[hidden] { display: none; }
.ss-rate-note { margin: 4px 0 0; }
.ss-rate-note:empty { display: none; }

/* the selected segment must read as raised in dark mode too (same fix as the Brand form) */


@media (max-width: 1100px) {
  .ss-layout { grid-template-columns: minmax(0, 1fr); }
  .ss-group:first-child { grid-row: auto; }
}
@media (max-width: 560px) {
  .ss-scope select { min-width: 0; flex: 1 1 100%; }
  .ss-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ss-ctl input[type="text"] { width: 92px; }
  .ss-checks { grid-column: 1 / -1; justify-self: start; }
  .ss-row-top { grid-template-areas: "label label" "ctl ctl" "meta meta" "err err"; }
  .ss-actions { flex-direction: column-reverse; align-items: stretch; }
  .ss-buttons button { flex: 1; min-height: 44px; }
  .ss-seg { display: flex; flex-wrap: nowrap; align-self: stretch; }
  .shop-on .ss-seg button { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
}

/* S4: "What will change" before company defaults are published */
.ss-foot { margin-top: 20px; }
.ss-foot > .ss-actions { margin-top: 0; }
.ss-impact { margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; }
.ss-impact h3 { margin: 0 0 6px; font-size: 15px; }
.ss-impact .notice { margin: 0; }
.ss-imp-headline { margin: 0; font-size: 15px; color: var(--ink); }
.ss-imp-items, .ss-imp-list, .ss-imp-stores { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ss-imp-items li, .ss-imp-list li { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.ss-imp-list li { padding-left: 14px; position: relative; color: var(--ink-2); }
.ss-imp-list li::before { content: "•"; position: absolute; left: 2px; color: var(--ink-3); }
.ss-imp-k { color: var(--ink-2); }
.ss-imp-old { color: var(--ink-2); }
.ss-imp-changes { padding: 10px 12px; border-radius: var(--r-m); background: var(--fill); }
.ss-imp-stores { gap: 0; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
.ss-imp-store { padding: 10px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.ss-imp-store + .ss-imp-store { border-top: 1px solid var(--hair); }
.ss-imp-store-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-imp-notice { margin: 0; font-size: 13px; color: var(--ink-2); }
.ss-impact .ss-actions { margin: 4px 0 0; }

/* 180: pricing setup */
.ss-pricing { grid-column: 1 / -1; }
.ss-bases { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ss-basis { display: flex; gap: 10px; align-items: flex-start; }
.ss-basis > span { display: flex; flex-direction: column; gap: 2px; }
.ss-rec { color: var(--green); font-weight: 500; font-size: 12.5px; }
.ss-state { font-weight: 500; margin: 6px 0; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.ss-table-wrap { overflow-x: auto; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.ss-table th, .ss-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--hair); }
.ss-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 217: sales tax parts (display only) */
.ss-tp-list { display: grid; gap: 8px; margin: 8px 0; }
.ss-tp-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; }
.ss-tp-row input { min-height: 36px; }
.ss-tp-stores { margin: 8px 0; padding-left: 18px; display: grid; gap: 6px; }

/* U43-A (screen review): a fee row is label, $, amount, "each" (four items; the tax-parts row has three) */
.ss-fees .ss-tp-row { grid-template-columns: minmax(0, 1fr) auto 90px auto; }

/* 462 (U31-A): the services one store offers */
.ss-svc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; background: var(--surface); }
.ss-svc-list .ss-svc-row + .ss-svc-row { border-top: 1px solid var(--hair); }
@media (max-width: 520px) { .ss-svc-row { grid-template-columns: auto minmax(0, 1fr); } .ss-svc-row > .ss-note { grid-column: 2; } }