/*
 * Professional access: the connection code, what a professional may see,
 * the member's inbox, the console's "Add client", the compliance timeline,
 * the adherence dashboard and alert thresholds.
 *
 * Loaded by the member app and the professional console after their own
 * sheets; every class here is `pa-`, so nothing collides with either. Tokens
 * only (both themes follow), logical properties only (Persian mirrors).
 */

/* ─────────────────────────── categories ─────────────────────────── */

.pa-chips { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pa-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 0.82rem; line-height: 1.6; background: var(--accent-soft); color: var(--accent);
}
.pa-chip-sensitive { background: color-mix(in srgb, var(--warn) 13%, transparent); color: var(--warn); }
.pa-chip-on { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.pa-chip-off { background: var(--surface-2); color: var(--text-faint); }

.pa-cats { display: flex; flex-direction: column; gap: 4px; margin-block: 6px 12px; }
.pa-cat {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.pa-cat:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.pa-cat:has(input:disabled) { cursor: not-allowed; opacity: 0.7; }
.pa-cat input { margin-block-start: 3px; inline-size: 20px; block-size: 20px; flex: none; accent-color: var(--accent); }
.pa-cat-text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.pa-cat-sensitive { border-style: dashed; }
.pa-cat-flag { align-self: flex-start; margin-block: 2px; }
.pa-cat-hint { line-height: 1.5; }

/* ─────────────────────────── making a code ─────────────────────────── */

.pa-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 6px 12px; }
.pa-kind[aria-pressed='true'] { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.pa-form h2 { font-size: 1rem; margin-block: 8px 4px; }

.pa-code-card { text-align: center; }
.pa-code {
  display: block; margin: 10px auto 4px; padding: 14px 10px; border-radius: var(--radius-s);
  background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.8rem, 9vw, 2.6rem); font-weight: 700; letter-spacing: 0.14em; color: var(--text);
  user-select: all; overflow-wrap: anywhere;
}
.pa-countdown { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); margin-block: 4px 10px; }
.pa-code-actions { justify-content: center; flex-wrap: wrap; margin-block-end: 10px; }
.pa-code-card p { text-align: start; }
.pa-result { margin-block: var(--gap); }

.pa-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pa-slot-actions { flex-wrap: wrap; }
.pa-generate { align-self: flex-start; }

/* ─────────────────────────── the inbox ─────────────────────────── */

.pa-convs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-conv {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none;
  box-shadow: var(--shadow-1); min-block-size: 64px;
}
.pa-conv:hover { border-color: var(--border-strong); }
.pa-conv-unread { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.pa-avatar {
  flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}
.pa-conv-main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-conv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-conv-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-conv-unread .pa-conv-preview { color: var(--text); font-weight: 500; }
.pa-conv-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ─────────────────────────── message references ─────────────────────────── */

.pa-ref { text-decoration: none; }
.pa-ref::after { content: ' ›'; }
[dir='rtl'] .pa-ref::after { content: ' ‹'; }
.pa-ref-pick { display: flex; flex-direction: column; gap: 4px; margin-block-end: 8px; }
.pa-ref-select { max-inline-size: 100%; }

/* ─────────────────────────── a day, read-only ─────────────────────────── */

.pa-day { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pa-day-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--surface); border: 1px solid var(--border);
}
.pa-day-time { flex: none; font-variant-numeric: tabular-nums; color: var(--text-dim); min-inline-size: 3.2em; }
.pa-day-name { flex: 1; min-inline-size: 0; }
.pa-focused { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─────────────────────────── the console: Add client ─────────────────────────── */

.pa-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pa-add-form .field { margin: 0; }
.pa-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem;
  letter-spacing: 0.12em; text-transform: uppercase; inline-size: 14em; max-inline-size: 100%; text-align: center;
}
.pa-access { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block: 2px 10px; }
.pa-access .pa-chips { margin: 0; }

/* ─────────────────────────── the compliance timeline ─────────────────────────── */

.pa-tl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pa-tl-custom summary { cursor: pointer; color: var(--accent); }
.pa-tl-custom .row { margin-block-start: 6px; flex-wrap: wrap; }
.pa-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pa-tl-item {
  display: flex; align-items: baseline; gap: 8px; padding-block: 7px; padding-inline-start: 10px;
  border-inline-start: 3px solid var(--border); line-height: 1.5;
}
.pa-tl-item + .pa-tl-item { border-block-start: 1px solid var(--border); }
.pa-tl-time { flex: none; min-inline-size: 3.4em; font-variant-numeric: tabular-nums; font-weight: 600; }
.pa-tl-sep { color: var(--text-faint); }
.pa-tl-text { flex: 1; min-inline-size: 0; }
.pa-tone-done { border-inline-start-color: var(--ok); }
.pa-tone-late { border-inline-start-color: var(--warn); }
.pa-tone-missed { border-inline-start-color: var(--danger); }
.pa-tone-missed .pa-tl-text { color: var(--danger); }
.pa-tone-skipped { border-inline-start-color: var(--text-faint); }
.pa-tone-open { border-inline-start-color: var(--border-strong); }
.pa-tone-open .pa-tl-text { color: var(--text-dim); }
.pa-tone-info { border-inline-start-color: var(--accent); }

/* ─────────────────────────── the adherence dashboard ─────────────────────────── */

.pa-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap); margin-block: var(--gap); }
.pa-metric {
  padding: 14px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.pa-metric-title { font-size: 0.85rem; color: var(--text-dim); }
.pa-metric-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-metric-off { background: var(--surface-2); border-style: dashed; }
.pa-good .pa-metric-value { color: var(--ok); }
.pa-poor .pa-metric-value { color: var(--danger); }
.pa-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pa-changes li { padding: 8px 12px; border-radius: var(--radius-s); line-height: 1.5; }
.pa-change-down { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.pa-change-up { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }

/* ─────────────────────────── alert thresholds ─────────────────────────── */

.pa-threshold { inline-size: 7em; }

@media (max-width: 640px) {
  .pa-conv { padding: 10px 12px; gap: 10px; }
  .pa-metrics { grid-template-columns: 1fr 1fr; }
  .pa-code-input { inline-size: 100%; }
}