/* Clio — Clienți / CRM. Leans on _shared/mythos-dl + design-system;
   only Clio-specific layout + badges live here. */

.clio-content { max-width: 1100px; margin: 0 auto; padding: 20px 24px 64px; }

/* Toolbar (search + count) */
.clio-toolbar {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.clio-search { flex: 1; max-width: 420px; }
.clio-count { color: var(--text-secondary, #667); font-size: 13px; font-weight: 600; }

/* List table */
.clio-table { width: 100%; }
.clio-row { cursor: pointer; }
.clio-row:hover { background: var(--surface-hover, rgba(0,0,0,0.03)); }
.clio-name { font-weight: 600; }
.ta-r { text-align: right; }

.clio-pager { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

.clio-empty, .clio-empty-sm { color: var(--text-secondary, #667); }
.clio-empty { text-align: center; }
.clio-empty-sm { font-size: 13px; padding: 8px 2px; }

/* Detail */
.clio-back { margin-bottom: 14px; }
.clio-head { margin-bottom: 16px; }
.clio-head-top { display: flex; align-items: center; gap: 12px; }
.clio-head-name { margin: 0; font-size: 20px; }
.clio-head-meta {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;
  font-size: 14px; color: var(--text-primary, #223);
}
.clio-muted { color: var(--text-tertiary, #99a); }
.clio-period { font-size: 12px; margin: 6px 2px 4px; }
.clio-note-inline {
  margin-top: 10px; font-size: 12px; color: var(--text-tertiary, #99a);
  border-left: 3px solid var(--accent, #f59e0b); padding-left: 8px;
}

.clio-section { margin-top: 22px; }
.clio-section h3 { font-size: 14px; margin: 0 0 8px; color: var(--text-secondary, #556); }
.clio-link { color: var(--accent, #2563eb); text-decoration: none; }
.clio-link:hover { text-decoration: underline; }

/* Notes */
.clio-note-add { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.clio-note-input { flex: 1; resize: vertical; }
.clio-note { padding: 10px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); }
.clio-note-body { white-space: pre-wrap; }
.clio-note-meta { font-size: 11px; margin-top: 4px; }

/* Confidence badge */
.clio-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
.clio-badge.st-done  { background: rgba(52,199,89,0.16);  color: #1a7f37; }
.clio-badge.st-open  { background: rgba(245,158,11,0.18); color: #a15c00; }
.clio-badge.st-draft { background: rgba(120,120,130,0.16); color: #556; }

.clio-spin { padding: 24px; text-align: center; color: var(--text-tertiary, #99a); }
.clio-err  { color: #b42318; }