/* feature-specific styles for database (see styles/features.css for shared pieces) */
.db-subnav a { display: inline-flex; align-items: center; gap: 6px; } .db-subnav a svg { width: 15px; height: 15px; }

/* facts strip on the client page */
.facts-strip .fact { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.facts-strip .fact::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--fact-c, var(--brand)); }
.fact.c-success { --fact-c: var(--success); } .fact.c-info { --fact-c: var(--info); } .fact.c-accent { --fact-c: var(--accent); } .fact.c-warning { --fact-c: var(--warning); } .fact.c-danger { --fact-c: var(--danger); } .fact.c-ai { --fact-c: var(--ai); }
.fact.c-success b { color: var(--success); } .fact.c-info b { color: var(--info); } .fact.c-accent b { color: var(--accent); } .fact.c-warning b { color: var(--warning); } .fact.c-danger b { color: var(--danger); } .fact.c-ai b { color: var(--ai); }
.import-stats .fact { border: 1px solid var(--border); background: var(--surface); position: relative; } .import-stats .fact::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--fact-c, var(--border-strong)); }
.import-stats .fact b svg { width: 16px; height: 16px; color: var(--fact-c, var(--text-4)); }

/* activity / conversation icons in client rows */
.act-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand-ink); }
.act-ico svg { width: 17px; height: 17px; } .act-ico.whatsapp { background: var(--success-soft); color: var(--success); } .act-ico.email, .act-ico.mail { background: var(--info-soft); color: var(--info); } .act-ico.meeting, .act-ico.visit { background: var(--ai-soft); color: var(--ai); } .act-ico.call { background: var(--warning-soft); color: var(--warning); }
.notes-area { min-height: 220px; line-height: 1.7; }
.step-line { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); } .step-line svg { width: 15px; height: 15px; color: var(--brand); }

/* duplicates */
.dup-group { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
.dup-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: all var(--t-fast); }
.dup-row:hover { border-color: var(--brand); background: var(--brand-soft); } .dup-row:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* contacts */
.wa-link, .wa-btn { color: var(--success); display: inline-grid; place-items: center; } .wa-link svg { width: 16px; height: 16px; } .wa-link:hover { transform: scale(1.15); }
.star { color: var(--warning); display: inline-flex; } .star svg { width: 13px; height: 13px; }

/* exhibitions */
.expo-card .expo-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); }
.expo-card .expo-foot div { display: flex; flex-direction: column; } .expo-card .expo-foot b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; } .expo-card .expo-foot span { font-size: 10.5px; color: var(--text-4); text-transform: uppercase; letter-spacing: .04em; }
.expo-head .expo-ico { width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid var(--border); flex: none; } .expo-head .expo-ico svg { width: 26px; height: 26px; }
.stat .temp-bar { margin-top: 10px; }
.chip.t-hot.active { background: var(--hot); border-color: var(--hot); } .chip.t-warm.active { background: var(--warm); border-color: var(--warm); } .chip.t-cold.active { background: var(--cold); border-color: var(--cold); }
.tbl td.center { text-align: center; } .ok-check { color: var(--success); display: inline-flex; } .ok-check svg { width: 20px; height: 20px; }
.import-preview { max-height: 46vh; overflow: auto; } .import-preview thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.lead-row.dup td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.lead-row.dup { color: inherit; } .lead-row.dup td { background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }

/* ---------- client documents (commercial register, tax card, licence…) ---------- */
.dropzone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: var(--r-lg);
  border: 2px dashed var(--border-strong); background: var(--surface-2); transition: all var(--t-fast); }
.dropzone > svg { width: 28px; height: 28px; color: var(--text-3); flex: none; }
.dropzone .col { flex: 1; min-width: 160px; }
.dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.over > svg { color: var(--brand); }