/* Contacts app (admin.css tokens only, logical properties for RTL). */

/* ------------------------------------------------------------ avatar + tags */
.c-avatar { --av: var(--brand); display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--av) 35%, transparent); background: color-mix(in srgb, var(--av) 16%, var(--panel)); color: color-mix(in srgb, var(--av) 60%, var(--ink)); font-size: 13px; font-weight: 800; }
.c-avatar.co { border-radius: 10px; }
.c-avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.c-avatar.lg.co { border-radius: 16px; }
.c-tag { padding: 2px 9px; font-size: 12px; }
.c-tags { gap: 4px; }
.who > div { min-width: 0; }

/* ------------------------------------------------------------ kanban cards */
.cont-list .kanban { grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); align-items: start; }
.ccard { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ccard.clickable { cursor: pointer; }
.ccard.clickable:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.ccard.archived { opacity: .6; }
.ccard-top { display: flex; align-items: flex-start; gap: 12px; }
.ccard-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.ccard-lines { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.ccard-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ccard-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------ overview */
.cont-kpi { display: block; color: inherit; }
a.cont-kpi:hover, a.cont-kpi:focus-visible { border-color: var(--accent); }
.attn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.attn-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); transition: border-color .15s; }
.attn-card:hover { border-color: var(--warn); }
.attn-n { display: grid; place-items: center; flex: 0 0 auto; min-width: 36px; height: 36px; padding-inline: 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); font-weight: 800; }
.attn-t { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.attn-ok { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }
.attn-ok .muted { color: var(--ok-ink); opacity: .8; }
.cont-recent-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line-2); }
.cont-recent-row:first-child { margin-top: 12px; }
.cont-recent-row:hover { background: var(--panel-2); }

/* ------------------------------------------------------------ contact form */
.cf-identity { display: grid; gap: 14px; }
.cf-type { justify-self: start; }
.cf-type .seg { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; }
.cf-name input { min-height: 50px !important; font-size: 20px !important; font-weight: 700; }
.cf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-items: start; }
.cf-h { margin-bottom: 10px; color: var(--brand); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cf-tabs { overflow-x: auto; scrollbar-width: none; }
.cf-tabs .tab { flex: 0 0 auto; min-height: 44px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
.cf-tabs .tab:hover { color: var(--ink); }
.cf-tabs .tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.cf-panel { padding-top: 16px; display: grid; gap: 12px; }
.cf-mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cf-hint { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.cf-hint:empty { display: none; }
.cf-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cf-preset { min-height: 34px; cursor: pointer; font: inherit; font-size: 12.5px; }
.cf-preset:hover { border-color: var(--accent); }
.cf-preset.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }
.cf-terms .input-suffix input { max-width: 120px; }
.cf-tags { display: grid; gap: 8px; }
.cf-tag-add { max-width: 320px; }
.cf-summary { display: grid; justify-items: start; gap: 12px; }
.cf-sum-name { display: grid; gap: 6px; }
.cf-quicks { display: grid; gap: 2px; width: 100%; }
.cf-quick { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--accent-d); font-weight: 600; overflow-wrap: anywhere; }
.cf-quick:hover { text-decoration: underline; }
.cf-summary .kv-list { width: 100%; }

/* ------------------------------------------------------------ UI kit demo (temporary) */
.kit-qr { display: grid; gap: 10px; justify-items: start; }
.kit-qr [data-ok="0"] { color: var(--danger-ink); }
.kit-words { display: grid; gap: 12px; }
.kit-words > div { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.kit-preview summary { cursor: pointer; font-weight: 700; }

@media (max-width: 900px) { .cf-cols { gap: 20px; } }
@media (max-width: 720px) {
  .cf-cols { grid-template-columns: 1fr; }
  .cont-list .kanban { grid-template-columns: 1fr; }
  .cf-name input { font-size: 18px !important; }
  .cf-quick { min-height: 44px; }
  .cont-recent-row { padding-inline: 14px; }
}

/* recent documents (side card) */
.cf-docs { display: grid; }
.cf-doc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.cf-doc:first-child { border-top: 0; }
.cf-doc:hover b { text-decoration: underline; }
.cf-doc .num { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }