/**
 * TASKMATE - Kontakte, geteilte Ansicht (seit v408)
 * =================================================
 * Ergänzt contacts.css. Alle Klassen tragen das Präfix ct-, damit alte Regeln nicht kollidieren.
 */

.ct-layout { display: flex; flex-direction: column; gap: 12px; padding: 6px 20px 24px; }
@media (max-width: 900px) { .ct-layout { padding: 6px 12px 20px; } }

/* Kopfzeile */
.ct-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-title { display: flex; align-items: baseline; gap: 10px; }
.ct-title h2 { margin: 0; font-size: 1.35rem; }
.ct-count { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }
.ct-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 10px; color: var(--text-disabled); min-height: 40px; }
.ct-search:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.ct-search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--text-primary); min-width: 0; outline: none; padding: 8px 0; }
.ct-search input::-webkit-search-cancel-button { cursor: pointer; }
.ct-search kbd { font-size: 11px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1px 6px; color: var(--text-disabled); background: var(--surface-2); }
.ct-new { position: relative; }
.ct-new .btn { display: inline-flex; align-items: center; gap: 6px; }
.ct-new-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px; min-width: 190px; z-index: 30; }
.ct-new-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: var(--radius-sm); font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.ct-new-menu button:hover { background: var(--surface-2); }

/* Filter-Chips */
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.ct-chip:hover { border-color: var(--border-dark); color: var(--text); }
.ct-chip svg { width: 16px; height: 16px; }
/* Aktiver Chip in Gold, Text darauf immer dunkel */
.ct-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ct-chip-count { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-2); color: inherit; }
.ct-chip.active .ct-chip-count { background: rgba(var(--navy-rgb), 0.12); }
.ct-chip-tag { border-style: dashed; }
.ct-chip-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

/* Geteilte Ansicht */
.ct-split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ct-list-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; max-height: calc(100vh - 230px); overflow-y: auto; }
.ct-detail-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; position: sticky; top: 12px; max-height: calc(100vh - 230px); overflow-y: auto; }

.ct-group + .ct-group { margin-top: 2px; }
.ct-letter { padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); background: var(--bg-tertiary); border-top: 1px solid var(--border-light); position: sticky; top: 0; z-index: 1; }
.ct-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border-light); cursor: pointer; }
.ct-row:hover { background: var(--bg-hover); }
.ct-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
/* Auswahl nur über die Fläche, kein seitlicher Streifen */
.ct-row.selected { background: var(--primary-light); }
.ct-row-text { min-width: 0; flex: 1; }
.ct-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row-sub { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row-when { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ct-row-when.stale { color: var(--warning-text); }
.ct-row-when.never { color: var(--text-muted); font-style: italic; }
.ct-row-chevron { color: var(--text-muted); display: inline-flex; }
.ct-row-member { border-top: 1px solid var(--border-light); padding: 8px 0; }
.ct-row-member:first-of-type { border-top: 0; }
.ct-row-member:hover { background: transparent; }

/* Nutzerfarbe kommt per Inline-Style, Rahmen für Kontrast im Dark-Theme */
.ct-avatar, .ct-avatar-large { display: grid; place-items: center; color: var(--text-on-color); font-weight: 700; flex-shrink: 0; overflow: hidden; border: 1px solid var(--border); }
.ct-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); font-size: 12px; }
.ct-avatar.org { border-radius: var(--radius-lg); }
.ct-avatar-large { width: 60px; height: 60px; border-radius: var(--radius-full); font-size: 20px; }
.ct-avatar-large.org { border-radius: var(--radius-lg); }
.ct-avatar img, .ct-avatar-large img { width: 100%; height: 100%; object-fit: cover; }

.ct-empty, .ct-detail-empty { padding: 40px 20px; text-align: center; color: var(--text-secondary); }
.ct-empty h3, .ct-detail-empty h3 { margin: 6px 0; color: var(--text-primary); }
.ct-empty p, .ct-detail-empty p { margin: 0; }
.ct-detail-empty-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-disabled); }

/* Akte */
.ct-mobile-bar { display: none; margin-bottom: 10px; }
.ct-detail-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ct-detail-title { flex: 1; min-width: 200px; }
.ct-detail-title h1 { margin: 0 0 2px; font-size: 1.3rem; }
.ct-detail-sub { margin: 0; color: var(--text-secondary); }
/* Links nicht in Gold, zu wenig Kontrast */
.ct-link { color: var(--link); font-weight: 600; text-decoration: none; }
.ct-link:hover { color: var(--link-hover); text-decoration: underline; }
.ct-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ct-tag { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-secondary); font-weight: 600; }
.ct-detail-actions { display: flex; gap: 8px; }
.ct-detail-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ct-danger { color: var(--error-text); }

.ct-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.ct-quick-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: none; max-width: 100%; }
.ct-quick-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-quick-item:hover { border-color: var(--primary); background: var(--primary-light); }
.ct-quick-item svg { color: var(--text-muted); flex-shrink: 0; }

.ct-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 14px; overflow-x: auto; }
.ct-tab { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
/* Aktiver Tab mit Gold-Unterstrich, Beschriftung bleibt dunkel */
.ct-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.ct-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; min-width: 0; }
.ct-card-wide { grid-column: 1 / -1; }
.ct-card h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ct-card-head h4 { margin: 0; }
.ct-card-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.ct-card-foot { margin: 8px 0 0; }
.ct-kvs { margin: 0; }
.ct-kv { display: grid; grid-template-columns: 120px 1fr; gap: 2px 10px; padding: 5px 0; border-top: 1px solid var(--border-light); font-size: var(--text-sm); }
.ct-kv:first-child { border-top: 0; }
.ct-kv dt { color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ct-kv dt small { color: var(--text-muted); font-weight: 400; }
.ct-kv dd { margin: 0; word-break: break-word; }
.ct-kv a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-dark); }
.ct-primary { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); font-weight: 700; margin-left: 4px; }
.ct-muted { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.ct-notes { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.55; }

/* Verlauf */
.ct-timeline { margin-top: 12px; }
.ct-tl-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-light); }
.ct-timeline .ct-tl-item:first-child { border-top: 0; }
.ct-tl-icon { width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; color: var(--text-on-color); background: var(--info); }
.ct-tl-note { background: var(--warning); } .ct-tl-call { background: var(--success); } .ct-tl-email { background: var(--info); } .ct-tl-meeting { background: var(--info); } .ct-tl-task { background: var(--accent); color: var(--on-accent); }
.ct-tl-head { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-xs); color: var(--text-muted); }
.ct-tl-type { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ct-tl-subject { font-weight: 600; margin-top: 2px; }
.ct-tl-text { font-size: var(--text-sm); white-space: pre-wrap; margin-top: 2px; }
.ct-tl-by { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.ct-activity-form { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; margin-top: 6px; }
.ct-activity-form .form-control { margin: 0; }

.ct-meta { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border-light); font-size: var(--text-xs); color: var(--text-muted); }

/* Formular */
.ct-modal { max-height: 90vh; overflow-y: auto; }
.ct-form .form-section h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 8px; }
.ct-type-toggle .radio-item span { display: inline-flex; align-items: center; gap: 6px; }
.ct-more { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; }
.ct-more summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.ct-more[open] summary { margin-bottom: 10px; }
.ct-more .form-label small { color: var(--text-muted); font-weight: 400; }
.ct-detail-field .detail-controls { display: grid; grid-template-columns: 110px 120px 1fr auto auto; gap: 6px; align-items: center; }
.ct-detail-field .btn-remove-detail { display: inline-grid; place-items: center; }

/* Handy und schmale Fenster: Liste und Akte nacheinander */
@media (max-width: 900px) {
  .ct-split { grid-template-columns: 1fr; }
  .ct-list-pane, .ct-detail-pane { max-height: none; position: static; }
  .ct-layout.show-detail .ct-list-pane, .ct-layout.show-detail .ct-chips, .ct-layout.show-detail .ct-head { display: none; }
  .ct-layout:not(.show-detail) .ct-detail-pane { display: none; }
  .ct-mobile-bar { display: block; }
  .ct-detail-pane { padding: 14px; }
  .ct-cards { grid-template-columns: 1fr; }
  .ct-detail-actions { width: 100%; }
  .ct-activity-form { grid-template-columns: 1fr; }
  .ct-kv { grid-template-columns: 1fr; }
  .ct-detail-field .detail-controls { grid-template-columns: 1fr 1fr; }
  .ct-detail-field .detail-value { grid-column: 1 / -1; }
  .ct-search kbd { display: none; }
}