/* CRM — appointments (crm-appointments.js). One component: a grid list on wide screens, cards on phones.
   Tokens only; 16px inputs on phones; no sideways scroll. */

.appt-bar { display: grid; gap: 10px; margin-bottom: 12px; }
.appt-views { margin: 0; }
.appt-views .crm-seg-btn { display: inline-flex; align-items: center; gap: 6px; }
.appt-filters { margin: 0; }
.appt-kind { margin: 0; }
.appt-filters .prt-search { min-width: 200px; }
.appt-filters .prt-search input, .appt-filters .crm-select { font-size: 16px; }

.appt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.appt-row { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(110px, .9fr) minmax(140px, 1.3fr) minmax(150px, 1.1fr) 100px minmax(110px, .9fr) auto; gap: 8px 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; min-width: 0; }
.appt-row.is-past { border-left: 3px solid var(--warn); }
.appt-head { background: transparent; border: none; padding: 0 14px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.appt-c { min-width: 0; display: grid; gap: 2px; }
.appt-k { display: none; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.appt-sub { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.appt-link { background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--primary); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.appt-link:hover { text-decoration: underline; }
.appt-link:disabled { color: var(--text); cursor: default; text-decoration: none; }
.appt-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.appt-who { font-size: 14.5px; }
.appt-time { font-weight: 700; color: var(--text); font-size: 13.5px; overflow-wrap: anywhere; }
.appt-time.past { color: var(--text-muted); }
.appt-lead { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.appt-unassigned { color: var(--warn); font-weight: 700; font-size: 13px; }
.appt-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.appt-acts-stack { justify-content: flex-start; }
.appt-acts-stack .btn { flex: 1 1 auto; }

/* the list under an enquiry or on a person: no customer column */
.appt-list-inline .appt-row { grid-template-columns: minmax(110px, .9fr) minmax(140px, 1.3fr) minmax(150px, 1.1fr) 100px minmax(110px, .9fr) auto; padding: 8px 12px; }

/* the record */
.appt-detail .pp-dl { gap: 9px; }
.appt-detail .pp-dl-row { grid-template-columns: 110px minmax(0, 1fr); }
.appt-detail .pp-dl-row dd .appt-link { font-size: 14px; }
.appt-detail .pp-hint { display: block; margin-top: 10px; }

/* assign dialog */
.appt-assign { max-width: 520px; }
.appt-assign-form { display: grid; gap: 12px; }
.appt-assign-form select, .appt-assign-form textarea { font-size: 16px; }
.appt-how { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 0; display: grid; gap: 6px; }
.appt-how:disabled { opacity: .5; }
.appt-radio { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; color: var(--text); cursor: pointer; padding: 4px 0; }
.appt-radio input { width: 18px; height: 18px; margin: 1px 0 0; }
.appt-radio b { display: block; font-weight: 700; }
.appt-radio small { display: block; color: var(--text-muted); font-size: 12.5px; }
.appt-how:disabled .appt-radio { cursor: default; }

@media (max-width: 1100px) {
  .appt-row { grid-template-columns: minmax(130px, 1.2fr) minmax(100px, .8fr) minmax(130px, 1.2fr) minmax(140px, 1fr) 90px auto; }
  .appt-c-sales { display: none; }
  .appt-head div:nth-child(6) { display: none; }
  .appt-list-inline .appt-row { grid-template-columns: minmax(100px, .8fr) minmax(130px, 1.2fr) minmax(140px, 1fr) 90px auto; }
  .appt-list-inline .appt-c-sales { display: none; }
}

/* phones: each appointment is a card */
@media (max-width: 760px) {
  .appt-head { display: none; }
  .appt-row, .appt-list-inline .appt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; padding: 12px 14px; }
  .appt-k { display: block; }
  .appt-c-sales { display: grid; }
  .appt-c-who { grid-column: 1 / -1; }
  .appt-c-acts { grid-column: 1 / -1; }
  .appt-acts { justify-content: flex-start; }
  .appt-acts .btn { font-size: 13px; padding: 8px 10px; }
  .appt-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .appt-filters .prt-search { min-width: 0; }
  .appt-views { display: flex; width: 100%; }
  .appt-views .crm-seg-btn { flex: 1 1 auto; padding: 8px 6px; font-size: 13px; justify-content: center; }
  .appt-detail { grid-template-columns: minmax(0, 1fr); }
}