/* ═══════════════════════════════════════════════════════════
   נדל״ן פרו — Contacts Module Styles
   Cards, List, Type badges, Transaction-detail tab
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. PAGE LAYOUT
   ───────────────────────────────────────────────────────── */

.contacts-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.contacts-view-toggle {
    display: flex;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 3px;
    border: 1px solid var(--border-default);
}

.contacts-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.contacts-content { min-height: 200px; }

.contacts-tx-filter {
    height: 36px;
    font-size: var(--text-xs);
    min-width: 180px;
}

/* ─────────────────────────────────────────────────────────
   2. STATS BAR
   ───────────────────────────────────────────────────────── */

.contacts-stats {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────
   3. CARDS VIEW
   ───────────────────────────────────────────────────────── */

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--space-4);
}

.contact-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    overflow: hidden;
    cursor: pointer;
    transition:
        box-shadow var(--duration-fast),
        transform var(--duration-fast) var(--ease-spring),
        border-color var(--duration-fast);
}
.contact-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--navy-200);
}

/* Type color strip */
.contact-card-strip {
    height: 3px;
    width: 100%;
}
.contact-card-strip.navy    { background: var(--navy-500); }
.contact-card-strip.gold    { background: var(--gold-500); }
.contact-card-strip.emerald { background: var(--emerald-500); }
.contact-card-strip.info    { background: var(--info-500); }
.contact-card-strip.gray    { background: var(--gray-300); }

.contact-card-body {
    padding: var(--space-4);
}

/* Top row: avatar + identity */
.contact-card-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* Avatar */
.contact-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-card-avatar .material-icons-round { font-size: 20px; }

.contact-card-avatar.navy    { background: var(--navy-50); color: var(--navy-600); }
.contact-card-avatar.gold    { background: var(--gold-50); color: var(--gold-700); }
.contact-card-avatar.emerald { background: var(--emerald-50); color: var(--emerald-600); }
.contact-card-avatar.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }
.contact-card-avatar.gray    { background: var(--gray-75); color: var(--gray-500); }

.contact-card-identity { flex: 1; min-width: 0; }

.contact-card-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-card-role {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Type badge */
.contact-card-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}
.contact-card-type-badge .material-icons-round { font-size: 11px; }

.contact-card-type-badge.navy    { background: var(--navy-50); color: var(--navy-700); }
.contact-card-type-badge.gold    { background: var(--gold-50); color: var(--gold-700); }
.contact-card-type-badge.emerald { background: var(--emerald-50); color: var(--emerald-700); }
.contact-card-type-badge.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }
.contact-card-type-badge.gray    { background: var(--gray-75); color: var(--gray-600); }

/* Contact action links */
.contact-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    margin-bottom: var(--space-3);
}

.contact-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--navy-600);
    text-decoration: none;
    transition: background var(--duration-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: right;
}
.contact-action-btn .material-icons-round { font-size: 15px; flex-shrink: 0; }
.contact-action-btn:hover { background: var(--navy-50); }

/* Transaction link */
.contact-card-tx {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.contact-card-tx > .material-icons-round { font-size: 13px; flex-shrink: 0; }

.contact-card-tx-link {
    cursor: pointer;
    color: var(--navy-600);
    transition: color var(--duration-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-card-tx-link:hover { color: var(--navy-800); text-decoration: underline; }

/* Notes */
.contact-card-notes {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────
   4. LIST VIEW
   ───────────────────────────────────────────────────────── */

.contacts-table { min-width: 800px; }

.contacts-row {
    cursor: pointer;
    transition: background var(--duration-fast);
}
.contacts-row:hover { background: var(--gray-25); }

.contacts-list-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contacts-list-avatar .material-icons-round { font-size: 16px; }

.contacts-list-avatar.navy    { background: var(--navy-50); color: var(--navy-600); }
.contacts-list-avatar.gold    { background: var(--gold-50); color: var(--gold-700); }
.contacts-list-avatar.emerald { background: var(--emerald-50); color: var(--emerald-600); }
.contacts-list-avatar.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }
.contacts-list-avatar.gray    { background: var(--gray-75); color: var(--gray-500); }

.contacts-list-name-cell { max-width: 220px; }

.contacts-list-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-list-notes {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Shared type chip */
.contact-type-chip {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.contact-type-chip.navy    { background: var(--navy-50); color: var(--navy-700); }
.contact-type-chip.gold    { background: var(--gold-50); color: var(--gold-700); }
.contact-type-chip.emerald { background: var(--emerald-50); color: var(--emerald-700); }
.contact-type-chip.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }
.contact-type-chip.gray    { background: var(--gray-75); color: var(--gray-600); }

/* Phone / email links in list */
.contacts-phone-link,
.contacts-email-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--navy-600);
    text-decoration: none;
    direction: ltr;
    transition: color var(--duration-fast);
}
.contacts-phone-link .material-icons-round,
.contacts-email-link .material-icons-round { font-size: 14px; }
.contacts-phone-link:hover,
.contacts-email-link:hover { color: var(--navy-800); text-decoration: underline; }

.contacts-tx-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    color: var(--navy-600);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    transition: background var(--duration-fast);
}
.contacts-tx-link .material-icons-round { font-size: 13px; }
.contacts-tx-link:hover { background: var(--navy-50); }

/* ─────────────────────────────────────────────────────────
   5. MODAL
   ───────────────────────────────────────────────────────── */

.contacts-modal { max-width: 560px; }

.contacts-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contacts-modal .modal-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────
   6. TRANSACTION DETAIL — Contacts Tab
   ───────────────────────────────────────────────────────── */

.txd-contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.txd-contacts-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
}

.txd-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.txd-contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        box-shadow var(--duration-fast),
        border-color var(--duration-fast);
}
.txd-contact-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--navy-200);
}

.txd-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.txd-contact-avatar .material-icons-round { font-size: 17px; }

.txd-contact-avatar.navy    { background: var(--navy-50); color: var(--navy-600); }
.txd-contact-avatar.gold    { background: var(--gold-50); color: var(--gold-700); }
.txd-contact-avatar.emerald { background: var(--emerald-50); color: var(--emerald-600); }
.txd-contact-avatar.info    { background: rgba(59,130,246,0.08); color: var(--info-500); }
.txd-contact-avatar.gray    { background: var(--gray-75); color: var(--gray-500); }

.txd-contact-info { flex: 1; min-width: 0; }

.txd-contact-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txd-contact-role {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.txd-contact-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Quick-add row in tx detail */
.txd-contact-add { padding: var(--space-4) var(--space-5); }

.txd-contact-add-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.txd-contact-add-row .form-input { min-width: 120px; flex: 1; }
.txd-contact-add-row .form-select { min-width: 100px; flex: 0 0 auto; width: auto; }

/* ─────────────────────────────────────────────────────────
   7. RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .contacts-grid { grid-template-columns: 1fr; }
    .txd-contact-grid { grid-template-columns: 1fr; }
    .contacts-header-actions { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .contacts-toolbar { flex-direction: column; }
    .txd-contact-add-row { flex-direction: column; }
    .txd-contact-add-row .form-input { width: 100%; }
}