/* Clinic → Treatments: hide a treatment, import prices from a spreadsheet (pricelist.js, D-063). Prefix pl-. */
.txc-row.pl-row { grid-template-columns: minmax(0, 1fr) auto auto minmax(140px, 200px) auto }
.pl-hid .txc-nm { color: var(--ink3) }
.pl-hid .minin, .pl-hid .txc-sel { opacity: .55 }
.pl-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; background: #f2f2f4; color: var(--ink2); font-size: var(--fs-12); font-weight: 600; vertical-align: 1px }
.pl-hide { min-width: 58px }
.pl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 6px }
.pl-imp { display: inline-flex; align-items: center; gap: 7px }
.pl-sp { flex: 1 }
.pl-showhid { margin: 0 }
.pl-panel { padding: 16px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .06) }
.pl-head { display: flex; gap: 12px; align-items: flex-start }
.pl-head > div { flex: 1; display: flex; flex-direction: column; gap: 3px }
.pl-head b { font-size: var(--fs-15) }
.pl-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 1.5px dashed #c7c7cc; border-radius: 12px; background: #fafafb; cursor: pointer; text-align: center }
.pl-drop:hover { border-color: var(--c1); background: #f5f9ff }
.pl-drop b { color: var(--c1t) }
.pl-drop span { color: var(--ink2); font-size: var(--fs-12); overflow-wrap: anywhere }
.pl-drop.busy { opacity: .7; cursor: progress }
.pl-file { font-size: var(--fs-13); overflow-wrap: anywhere }
.pl-note { padding: 8px 12px; border-radius: 10px; background: #fff8eb; color: #8a4a00; font-size: var(--fs-12) }
.pl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.pl-k { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sep); background: #fff; text-align: start }
.pl-k b { font-size: var(--fs-20); font-variant-numeric: tabular-nums; line-height: 1.1 }
.pl-k span { color: var(--ink2); font-size: var(--fs-12) }
.pl-k[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset }
.pl-k-change b { color: #0a5ccc } .pl-k-problem b { color: #b42318 } .pl-k-same b { color: var(--ink2) }
.pl-lines { border: 1px solid var(--sep); border-radius: 12px; overflow: hidden; max-height: 460px; overflow-y: auto }
.pl-l { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--sep2); font-size: var(--fs-13) }
.pl-l:last-child { border-bottom: 0 }
.pl-l:not(.pl-change):not(.pl-colh) { grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.6fr) }
.pl-colh { background: #f6f6f7; color: var(--ink2); font-size: var(--fs-12); font-weight: 600; position: sticky; top: 0 }
.pl-ln { color: var(--ink3); font-variant-numeric: tabular-nums; font-size: var(--fs-12) }
.pl-tx { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 1px }
.pl-tx b { font-weight: 600 }
.pl-in { font-size: var(--fs-12) }
.pl-v { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums }
.pl-v s { color: var(--ink3) }
.pl-v i { font-style: normal; color: var(--ink3) }
:root[dir=rtl] .pl-v i { display: inline-block; transform: scaleX(-1) }
.pl-v b { color: #0a5ccc }
.pl-why { color: #8a2a1e; font-size: var(--fs-12); display: flex; flex-direction: column; gap: 4px }
.pl-same .pl-why, .pl-repeat .pl-why { color: var(--ink2) }
.pl-cands { display: flex; flex-direction: column; gap: 2px; color: var(--ink) }
.pl-none { padding: 10px 2px }
.pl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-end }
.pl-foot .sub2 { flex: 1 1 260px }
.pl-apply { padding: 0 18px }
@media (max-width: 760px) {
  .txc-row.pl-row { grid-template-columns: minmax(0, 1fr) auto }
  .txc-row.pl-row .txc-sel { grid-column: 1 / -1 }
  .pl-kpis { grid-template-columns: 1fr }
  .pl-l, .pl-l:not(.pl-change):not(.pl-colh) { grid-template-columns: 32px minmax(0, 1fr) }
  .pl-l .pl-v, .pl-l .pl-why { grid-column: 2 }
  .pl-colh { display: none }
}

.pl-follow{margin:8px 0 0;padding-inline-start:18px;font-size:var(--fs-13);line-height:1.5}
.pl-follow .pl-warn{color:#b42318}
.pl-raw{display:block}

/* design plan step 2 (25 Oct 2026): a row reads as a list, Odoo-style; the controls stay visible (the owner must see
   that everything is editable) but quiet: no borders until the row is hovered or focused. Touch keeps the borders. */
@media (hover:hover) {
  .txc-row:not(:hover):not(:focus-within) .minin input,
  .txc-row:not(:hover):not(:focus-within) .txc-sel { border-color: transparent; background: transparent }
  .txc-row:not(:hover):not(:focus-within) .txc-sel { color: var(--ink2) }
}
.txc-row:hover { background: var(--hover, #f7f8f8) }

/* the setup guide's price check (Codex review 9 #1): "Looks right" on a row, "Approve these prices" on a group */
.pl-ok { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #c9dfe6; background: #fff; color: #0d5e6f; font-size: var(--fs-12); font-weight: 600; white-space: nowrap }
.pl-ok:hover { background: #f3f8fb }
.pl-ok[aria-pressed="true"] { border-color: transparent; background: #e6f6ec; color: #1d7a3a }
.pl-okall { display: inline-flex; align-items: center; gap: 5px; color: #0d5e6f; border-color: #c9dfe6 }
.pl-okdone { display: inline-flex; align-items: center; gap: 5px; color: #1d7a3a; font-size: var(--fs-12); font-weight: 600 }
.pl-left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 10px; padding: 10px 14px; border-radius: 12px; background: #fdf3ec; border: 1px solid #f6dccb }
.pl-left b { color: #a3410b; display: inline-flex; align-items: center; gap: 6px }
.pl-left span { color: var(--ink2); font-size: var(--fs-12_5) }
.pl-left-done { background: #eef8f1; border-color: #cfe9d8 }
.pl-left-done b { color: #1d7a3a }
@media (pointer: coarse) { .pl-ok, .pl-okall { min-height: 44px } }