/* ============================================
   CONTACT DETAILS MODAL - ENTERPRISE TOKENIZED CSS
   Version: 2.0.0
   FAANG Quality | 50k+ User Scale | Zero Hardcodes
   IBM/Google/Apple Standards
============================================ */

/* ============================================
   1. DESIGN TOKENS - SINGLE SOURCE OF TRUTH
============================================ */

:root {
    /* ========== SPACING SYSTEM ========== */
    --modal-spacing-unit: 0.25rem; /* 4px base unit */
    --modal-spacing-2xs: calc(var(--modal-spacing-unit) * 1); /* 4px */
    --modal-spacing-xs: calc(var(--modal-spacing-unit) * 2); /* 8px */
    --modal-spacing-sm: calc(var(--modal-spacing-unit) * 3); /* 12px */
    --modal-spacing-md: calc(var(--modal-spacing-unit) * 4); /* 16px */
    --modal-spacing-lg: calc(var(--modal-spacing-unit) * 5); /* 20px */
    --modal-spacing-xl: calc(var(--modal-spacing-unit) * 6); /* 24px */
    --modal-spacing-xxl: calc(var(--modal-spacing-unit) * 8); /* 32px */
    --modal-spacing-xxxl: calc(var(--modal-spacing-unit) * 10); /* 40px */
    /* ========== TYPOGRAPHY SCALE ========== */
    --modal-font-base: 1rem; /* 16px */
    --modal-font-xxs: calc(var(--modal-font-base) * 0.6875); /* 11px */
    --modal-font-xs: calc(var(--modal-font-base) * 0.75); /* 12px */
    --modal-font-sm: calc(var(--modal-font-base) * 0.8125); /* 13px */
    --modal-font-md: calc(var(--modal-font-base) * 0.875); /* 14px */
    --modal-font-lg: calc(var(--modal-font-base) * 0.9375); /* 15px */
    --modal-font-xl: calc(var(--modal-font-base) * 1.125); /* 18px */
    --modal-font-xxl: calc(var(--modal-font-base) * 1.25); /* 20px */
    /* ========== FONT WEIGHTS ========== */
    --modal-font-weight-regular: 400;
    --modal-font-weight-medium: 500;
    --modal-font-weight-semibold: 600;
    --modal-font-weight-bold: 700;
    /* ========== COLOR SYSTEM ========== */
    /* Primary Colors */
    --modal-primary: #007AFF;
    --modal-primary-hover: #0051D5;
    --modal-primary-light: rgba(0, 122, 255, 0.15);
    --modal-secondary: #5856D6;
    /* Status Colors */
    --modal-success: #34C759;
    --modal-success-light: rgba(52, 199, 89, 0.15);
    --modal-warning: #FF9500;
    --modal-warning-light: rgba(255, 149, 0, 0.15);
    --modal-danger: #FF3B30;
    --modal-info: #5AC8FA;
    /* Grayscale Palette */
    --modal-white: #FFFFFF;
    --modal-gray-50: #FAFBFC;
    --modal-gray-100: #F8F9FA;
    --modal-gray-200: #E9ECEF;
    --modal-gray-300: #DEE2E6;
    --modal-gray-400: #CED4DA;
    --modal-gray-500: #ADB5BD;
    --modal-gray-600: #6C757D;
    --modal-gray-700: #495057;
    --modal-gray-800: #343A40;
    --modal-gray-900: #212529;
    /* ========== COMPONENT DIMENSIONS ========== */
    --modal-max-width: 50rem; /* 800px */
    --modal-avatar-size: 4rem; /* 64px */
    --modal-avatar-size-sm: 3rem; /* 48px */
    --modal-status-indicator-width: 0.25rem; /* 4px */
    --modal-border-radius: 0.75rem; /* 12px */
    --modal-border-radius-sm: 0.5rem; /* 8px */
    --modal-border-radius-xs: 0.375rem; /* 6px */
    --modal-border-width: 0.0625rem; /* 1px */
    --modal-tab-border-width: 0.1875rem; /* 3px */
    /* ========== SHADOWS ========== */
    --modal-shadow-xs: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    --modal-shadow-sm: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    --modal-shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    --modal-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* ========== TRANSITIONS ========== */
    --modal-transition-fast: 0.15s ease;
    --modal-transition-base: 0.2s ease;
    --modal-transition-slow: 0.3s ease;
    /* ========== Z-INDEX SCALE ========== */
    --modal-z-base: 0;
    --modal-z-content: 1;
    --modal-z-sticky: 2;
    --modal-z-fixed: 3;
    /* ========== ACTIVITY TIMELINE TOKENS ========== */
    --modal-timeline-dot-size: 3rem; /* 48px */
    --modal-timeline-marker-width: 4rem; /* 64px */
    --modal-timeline-line-width: 0.125rem; /* 2px */
    --modal-timeline-gap: 1.5rem; /* 24px */
    /* Activity Colors */
    --modal-activity-create: #34C759;
    --modal-activity-update: #007AFF;
    --modal-activity-delete: #FF3B30;
    --modal-activity-view: #5856D6;
    --modal-activity-email: #FF9500;
    --modal-activity-association: #AF52DE;
    --modal-activity-default: #8E8E93;
}

/* ============================================
   2. MODAL STRUCTURE - FLEXBOX LAYOUT
============================================ */

#contact-details-modal .modal-dialog {
    max-width: var(--modal-max-width);
}

#contact-details-modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--modal-border-radius);
}

#contact-details-modal .modal-header {
    flex-shrink: 0;
    border-bottom: var(--modal-border-width) solid var(--modal-gray-200);
    padding: var(--modal-spacing-lg);
}

#contact-details-modal .modal-body {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#contact-details-modal .modal-footer {
    flex-shrink: 0;
    border-top: var(--modal-border-width) solid var(--modal-gray-200);
    padding: var(--modal-spacing-lg);
}

/* ============================================
   3. CONTACT HEADER SECTION
============================================ */

.modal-contact-header {
    padding: var(--modal-spacing-xl);
    border-bottom: var(--modal-border-width) solid var(--modal-gray-200);
    background: var(--modal-gray-50);
    flex-shrink: 0;
}

.modal-contact-info {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-lg);
}

.modal-contact-avatar {
    width: var(--modal-avatar-size);
    height: var(--modal-avatar-size);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--modal-primary) 0%, var(--modal-secondary) 100%);
    color: var(--modal-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--modal-font-xxl);
    font-weight: var(--modal-font-weight-semibold);
    flex-shrink: 0;
}

.modal-contact-details {
    flex: 1;
    min-width: 0;
}

    .modal-contact-details h5 {
        margin: 0 0 var(--modal-spacing-2xs) 0;
        font-size: var(--modal-font-xxl);
        font-weight: var(--modal-font-weight-semibold);
        color: var(--modal-gray-900);
    }

.modal-contact-type {
    font-size: var(--modal-font-md);
    color: var(--modal-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.01875rem; /* 0.3px */
    font-weight: var(--modal-font-weight-medium);
}

/* ============================================
   4. TAB NAVIGATION
============================================ */

#contact-details-modal .tab-navigation {
    display: flex;
    background: var(--modal-white);
    border-bottom: var(--modal-border-width) solid var(--modal-gray-200);
    flex-shrink: 0;
}

#contact-details-modal .tab-item {
    flex: 1;
    padding: var(--modal-spacing-md) var(--modal-spacing-lg);
    border: none;
    background: none;
    color: var(--modal-gray-600);
    font-weight: var(--modal-font-weight-medium);
    font-size: var(--modal-font-md);
    cursor: pointer;
    transition: all var(--modal-transition-base);
    border-bottom: var(--modal-tab-border-width) solid transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--modal-spacing-xs);
}

    #contact-details-modal .tab-item:hover {
        color: var(--modal-gray-800);
        background: var(--modal-gray-50);
    }

    #contact-details-modal .tab-item.active {
        color: var(--modal-primary);
        border-bottom-color: var(--modal-primary);
        background: var(--modal-white);
    }

    #contact-details-modal .tab-item i {
        font-size: var(--modal-font-md);
    }

#contact-details-modal .tab-badge {
    margin-left: var(--modal-spacing-2xs);
    background: var(--modal-gray-200);
    color: var(--modal-gray-600);
    padding: var(--modal-spacing-2xs) var(--modal-spacing-xs);
    border-radius: 0.625rem; /* 10px */
    font-size: var(--modal-font-xxs);
    min-width: 1.125rem; /* 18px */
    text-align: center;
    font-weight: var(--modal-font-weight-semibold);
}

    #contact-details-modal .tab-badge.warning {
        background: var(--modal-warning);
        color: var(--modal-white);
    }

/* ============================================
   5. TAB CONTENT CONTAINER
============================================ */

#contact-details-modal .tab-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#contact-details-modal .tab-pane {
    display: none;
    overflow-y: auto;
    flex: 1;
}

    #contact-details-modal .tab-pane.active {
        display: block;
    }

    /* Default padding for most tabs */
    #contact-details-modal .tab-pane:not(#activity-tab) {
        padding: var(--modal-spacing-xl);
    }

/* Activity tab - NO padding, wrapper handles it */
#contact-details-modal #activity-tab {
    padding: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   6. DETAILS TAB - CARD SYSTEM
============================================ */

.details-card {
    background: var(--modal-white);
    border: var(--modal-border-width) solid var(--modal-gray-200);
    border-radius: var(--modal-border-radius);
    margin-bottom: var(--modal-spacing-lg);
    overflow: hidden;
    box-shadow: var(--modal-shadow-xs);
    transition: box-shadow var(--modal-transition-base);
}

    .details-card:hover {
        box-shadow: var(--modal-shadow-sm);
    }

    .details-card:last-child {
        margin-bottom: 0;
    }

.details-card-header {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-sm);
    padding: var(--modal-spacing-md) var(--modal-spacing-lg);
    background: linear-gradient(to bottom, var(--modal-gray-50) 0%, var(--modal-gray-100) 100%);
    border-bottom: var(--modal-border-width) solid var(--modal-gray-200);
}

    .details-card-header i {
        font-size: var(--modal-font-xxl);
        color: var(--modal-primary);
    }

    .details-card-header h6 {
        margin: 0;
        font-size: var(--modal-font-lg);
        font-weight: var(--modal-font-weight-semibold);
        color: var(--modal-gray-900);
        letter-spacing: -0.00625rem;
    }

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 0;
    padding: 0;
}

.detail-item {
    padding: var(--modal-spacing-lg);
    border-bottom: var(--modal-border-width) solid var(--modal-gray-100);
    display: flex;
    flex-direction: column;
    gap: var(--modal-spacing-xs);
    transition: background-color var(--modal-transition-fast);
}

    .detail-item:hover {
        background-color: var(--modal-gray-50);
    }

    .detail-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

.detail-item-full {
    grid-column: 1 / -1;
}

    .detail-item-full:last-child {
        border-bottom: none;
    }

.detail-label {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    font-size: var(--modal-font-xs);
    font-weight: var(--modal-font-weight-semibold);
    color: var(--modal-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
}

    .detail-label i {
        font-size: var(--modal-font-md);
        color: var(--modal-gray-500);
    }

.detail-value {
    font-size: var(--modal-font-md);
    color: var(--modal-gray-900);
    line-height: 1.5;
    font-weight: var(--modal-font-weight-medium);
}

    .detail-value address,
    .detail-address {
        font-style: normal;
        margin: 0;
        line-height: 1.6;
    }

.detail-notes {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--modal-gray-700);
    background: var(--modal-gray-100);
    padding: var(--modal-spacing-sm);
    border-radius: var(--modal-border-radius-xs);
    border-left: var(--modal-tab-border-width) solid var(--modal-primary);
}

.detail-value-list {
    display: flex;
    flex-direction: column;
    gap: var(--modal-spacing-sm);
}

.detail-value-item {
    display: flex;
    flex-direction: column;
    gap: var(--modal-spacing-xs);
}

.detail-link {
    display: inline-flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    color: var(--modal-primary);
    text-decoration: none;
    font-weight: var(--modal-font-weight-medium);
    transition: all var(--modal-transition-base);
    font-size: var(--modal-font-md);
}

    .detail-link:hover {
        color: var(--modal-primary-hover);
        text-decoration: none;
        transform: translateX(0.125rem);
    }

    .detail-link i {
        font-size: var(--modal-font-md);
    }

.detail-meta {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    flex-wrap: wrap;
}

.detail-type {
    font-size: var(--modal-font-xs);
    color: var(--modal-gray-600);
    font-weight: var(--modal-font-weight-medium);
}

.detail-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--modal-spacing-2xs) var(--modal-spacing-xs);
    border-radius: var(--modal-border-radius-xs);
    font-size: var(--modal-font-xxs);
    font-weight: var(--modal-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.01875rem;
}

    .detail-badge.primary {
        background: linear-gradient(135deg, var(--modal-primary) 0%, var(--modal-secondary) 100%);
        color: var(--modal-white);
    }

    .detail-badge.secondary {
        background: var(--modal-gray-200);
        color: var(--modal-gray-700);
    }

/* ============================================
   7. MATTER ITEMS
============================================ */

.matter-item {
    background: var(--modal-white);
    border: var(--modal-border-width) solid var(--modal-gray-200);
    border-radius: var(--modal-border-radius-sm);
    padding: var(--modal-spacing-md);
    margin-bottom: var(--modal-spacing-sm);
    transition: all var(--modal-transition-base);
    cursor: pointer;
}

    .matter-item:hover {
        border-color: var(--modal-primary);
        box-shadow: 0 0.125rem 0.75rem rgba(0, 122, 255, 0.08);
    }

.matter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--modal-spacing-sm);
}

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

.matter-title {
    font-weight: var(--modal-font-weight-semibold);
    color: var(--modal-gray-900);
    font-size: var(--modal-font-md);
    line-height: 1.3;
    margin-bottom: var(--modal-spacing-2xs);
}

.matter-number {
    font-size: var(--modal-font-xs);
    color: var(--modal-gray-500);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.matter-role {
    font-size: var(--modal-font-xs);
    color: var(--modal-gray-600);
    margin-top: var(--modal-spacing-2xs);
    font-style: italic;
}

.matter-status {
    flex-shrink: 0;
}

/* ============================================
   8. NOTE ITEMS
============================================ */

.note-item {
    background: var(--modal-white);
    border-radius: var(--modal-border-radius-sm);
    padding: var(--modal-spacing-sm);
    margin-bottom: var(--modal-spacing-xs);
    border-left: var(--modal-tab-border-width) solid var(--modal-primary);
    box-shadow: var(--modal-shadow-xs);
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--modal-spacing-xs);
}

.note-date {
    font-size: var(--modal-font-xxs);
    color: var(--modal-gray-500);
    font-weight: var(--modal-font-weight-medium);
}

.note-author {
    font-size: var(--modal-font-xxs);
    color: var(--modal-gray-600);
}

.note-content {
    font-size: var(--modal-font-sm);
    color: var(--modal-gray-700);
    line-height: 1.4;
}

/* ============================================
   9. STATUS BADGES
============================================ */

.status-badge {
    padding: var(--modal-spacing-2xs) var(--modal-spacing-xs);
    border-radius: var(--modal-border-radius-xs);
    font-size: var(--modal-font-xxs);
    font-weight: var(--modal-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    display: inline-block;
}

.status-active,
.status-open {
    background: var(--modal-success-light);
    color: var(--modal-success);
}

.status-pending,
.status-on-hold {
    background: var(--modal-warning-light);
    color: var(--modal-warning);
}

.status-inactive,
.status-closed {
    background: rgba(108, 117, 125, 0.15);
    color: var(--modal-gray-600);
}

/* ============================================
   10. EMPTY STATES
============================================ */

.no-content,
.empty-state {
    text-align: center;
    color: var(--modal-gray-500);
    padding: var(--modal-spacing-xxxl) var(--modal-spacing-lg);
}

    .no-content i,
    .empty-state i {
        font-size: calc(var(--modal-font-base) * 2);
        margin-bottom: var(--modal-spacing-sm);
        display: block;
        color: var(--modal-gray-300);
    }

    .empty-state i {
        font-size: calc(var(--modal-font-base) * 4);
        margin-bottom: var(--modal-spacing-md);
    }

    .no-content strong,
    .empty-state-title {
        color: var(--modal-gray-700);
        font-weight: var(--modal-font-weight-semibold);
    }

.empty-state-title {
    font-size: var(--modal-font-xl);
    margin-bottom: var(--modal-spacing-xs);
}

.empty-state-text {
    font-size: var(--modal-font-md);
    color: var(--modal-gray-600);
    max-width: 25rem;
}

/* ============================================
   11. ACTIVITY TIMELINE
============================================ */

.activity-timeline-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.activity-timeline-header {
    padding: var(--modal-spacing-lg) var(--modal-spacing-xl);
    background: linear-gradient(to bottom, var(--modal-gray-50) 0%, var(--modal-gray-100) 100%);
    border-bottom: var(--modal-border-width) solid var(--modal-gray-200);
    flex-shrink: 0;
}

.timeline-header-content {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-sm);
}

    .timeline-header-content i {
        font-size: var(--modal-font-xl);
        color: var(--modal-primary);
    }

    .timeline-header-content h6 {
        margin: 0;
        font-size: var(--modal-font-md);
        font-weight: var(--modal-font-weight-semibold);
        color: var(--modal-gray-900);
    }

.activity-count {
    margin-left: auto;
    padding: var(--modal-spacing-2xs) var(--modal-spacing-sm);
    background: var(--modal-gray-200);
    color: var(--modal-gray-700);
    font-size: var(--modal-font-sm);
    font-weight: var(--modal-font-weight-semibold);
    border-radius: 0.75rem;
}

.activity-timeline-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--modal-spacing-xxl) var(--modal-spacing-xl);
    position: relative;
}

    .activity-timeline-content::before {
        content: '';
        position: absolute;
        left: calc(var(--modal-timeline-marker-width) + var(--modal-spacing-sm));
        top: calc(var(--modal-spacing-xl) + var(--modal-spacing-2xs));
        bottom: calc(var(--modal-spacing-xl) + var(--modal-spacing-2xs));
        width: var(--modal-timeline-line-width);
        background: linear-gradient(to bottom, var(--modal-gray-200) 0%, var(--modal-gray-200) 90%, transparent 100%);
        z-index: var(--modal-z-base);
    }

.activity-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--modal-timeline-gap);
    margin-bottom: var(--modal-spacing-xxl);
    padding-left: 0;
}

    .activity-timeline-item:last-child {
        margin-bottom: 0;
    }

.timeline-marker {
    flex-shrink: 0;
    width: var(--modal-timeline-marker-width);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* CRITICAL: Remove ALL visual properties */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.timeline-dot {
    width: var(--modal-timeline-dot-size);
    height: var(--modal-timeline-dot-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modal-white);
    border: var(--modal-tab-border-width) solid var(--modal-primary);
    box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(0, 122, 255, 0.25);
    transition: all var(--modal-transition-base) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

    .timeline-dot i {
        font-size: var(--modal-font-xxl);
        color: var(--modal-primary);
    }

    .timeline-dot.activity-create {
        border-color: var(--modal-activity-create);
        box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(52, 199, 89, 0.25);
    }

        .timeline-dot.activity-create i {
            color: var(--modal-activity-create);
        }

    .timeline-dot.activity-update {
        border-color: var(--modal-activity-update);
        box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(0, 122, 255, 0.25);
    }

        .timeline-dot.activity-update i {
            color: var(--modal-activity-update);
        }

    .timeline-dot.activity-delete {
        border-color: var(--modal-activity-delete);
        box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(255, 59, 48, 0.25);
    }

        .timeline-dot.activity-delete i {
            color: var(--modal-activity-delete);
        }

    .timeline-dot.activity-view {
        border-color: var(--modal-activity-view);
        box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(88, 86, 214, 0.25);
    }

        .timeline-dot.activity-view i {
            color: var(--modal-activity-view);
        }

    .timeline-dot.activity-email {
        border-color: var(--modal-activity-email);
        box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(255, 149, 0, 0.25);
    }

        .timeline-dot.activity-email i {
            color: var(--modal-activity-email);
        }

    .timeline-dot.activity-association {
        border-color: var(--modal-activity-association);
        box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(175, 82, 222, 0.25);
    }

        .timeline-dot.activity-association i {
            color: var(--modal-activity-association);
        }

    .timeline-dot.activity-default {
        border-color: var(--modal-activity-default);
        box-shadow: 0 var(--modal-tab-border-width) 0.75rem rgba(142, 142, 147, 0.25);
    }

        .timeline-dot.activity-default i {
            color: var(--modal-activity-default);
        }

.activity-timeline-item:hover .timeline-dot {
    transform: scale(1.15);
    box-shadow: 0 var(--modal-spacing-xs) 1.25rem rgba(0, 122, 255, 0.35);
}

.activity-card {
    flex: 1;
    min-width: 0;
    background: var(--modal-white);
    border: var(--modal-border-width) solid var(--modal-gray-200);
    border-radius: var(--modal-border-radius);
    overflow: hidden;
    transition: all var(--modal-transition-base) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--modal-shadow-sm);
}

.activity-timeline-item:hover .activity-card {
    border-color: var(--modal-primary);
    box-shadow: 0 var(--modal-spacing-xs) 1.25rem rgba(0, 122, 255, 0.15);
    transform: translateY(-0.125rem);
}

.activity-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--modal-spacing-sm);
    padding: calc(var(--modal-spacing-md) + var(--modal-spacing-2xs)) calc(var(--modal-spacing-lg) + var(--modal-spacing-2xs));
    background: linear-gradient(to bottom, var(--modal-gray-50) 0%, var(--modal-gray-100) 100%);
    border-bottom: var(--modal-border-width) solid var(--modal-gray-100);
}

.activity-title {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    flex: 1;
    min-width: 0;
}

    .activity-title strong {
        font-size: var(--modal-font-lg);
        font-weight: var(--modal-font-weight-semibold);
        color: var(--modal-gray-900);
    }

.activity-entity {
    font-size: var(--modal-font-xs);
    color: var(--modal-gray-600);
    font-weight: var(--modal-font-weight-medium);
    padding: var(--modal-spacing-2xs) var(--modal-spacing-xs);
    background: var(--modal-white);
    border-radius: var(--modal-border-radius-xs);
}

.activity-category-badge {
    padding: var(--modal-spacing-2xs) var(--modal-spacing-sm);
    background: var(--modal-gray-200);
    color: var(--modal-gray-700);
    font-size: var(--modal-font-xxs);
    font-weight: var(--modal-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    border-radius: var(--modal-border-radius-xs);
    white-space: nowrap;
}

.activity-card-body {
    padding: calc(var(--modal-spacing-md) + var(--modal-spacing-2xs)) calc(var(--modal-spacing-lg) + var(--modal-spacing-2xs));
    display: flex;
    flex-direction: column;
    gap: var(--modal-spacing-md);
}

.activity-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--modal-spacing-md);
    flex-wrap: wrap;
}

.activity-user {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    font-size: var(--modal-font-md);
    color: var(--modal-gray-700);
    font-weight: var(--modal-font-weight-medium);
}

    .activity-user i {
        font-size: var(--modal-font-xl);
        color: var(--modal-gray-500);
    }

.activity-time {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    font-size: var(--modal-font-sm);
    color: var(--modal-gray-600);
}

    .activity-time i {
        font-size: var(--modal-font-md);
        color: var(--modal-gray-500);
    }

.activity-time-relative {
    color: var(--modal-gray-500);
    font-weight: var(--modal-font-weight-semibold);
    font-size: var(--modal-font-xs);
}

.activity-details {
    padding: var(--modal-spacing-md);
    background: var(--modal-gray-100);
    border-left: var(--modal-tab-border-width) solid var(--modal-primary);
    border-radius: var(--modal-border-radius-sm);
}

.activity-details-label {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    font-size: var(--modal-font-xxs);
    font-weight: var(--modal-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    color: var(--modal-gray-600);
    margin-bottom: var(--modal-spacing-xs);
}

    .activity-details-label i {
        font-size: var(--modal-font-md);
    }

.activity-details-content {
    font-size: var(--modal-font-md);
    color: var(--modal-gray-700);
    line-height: 1.6;
}

.activity-context {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-md);
    flex-wrap: wrap;
    padding-top: var(--modal-spacing-sm);
    border-top: var(--modal-border-width) solid var(--modal-gray-100);
}

.context-item {
    display: flex;
    align-items: center;
    gap: var(--modal-spacing-xs);
    font-size: var(--modal-font-xs);
    color: var(--modal-gray-500);
    font-weight: var(--modal-font-weight-medium);
}

    .context-item i {
        font-size: var(--modal-font-md);
    }

.activity-load-more {
    padding: var(--modal-spacing-lg) var(--modal-spacing-xl);
    text-align: center;
    border-top: var(--modal-border-width) solid var(--modal-gray-200);
    background: var(--modal-gray-50);
}

    .activity-load-more .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--modal-spacing-xs);
    }

/* ============================================
   12. SCROLLBAR STYLING
============================================ */

#contact-details-modal .tab-pane::-webkit-scrollbar,
.activity-timeline-content::-webkit-scrollbar {
    width: var(--modal-spacing-xs);
}

#contact-details-modal .tab-pane::-webkit-scrollbar-track,
.activity-timeline-content::-webkit-scrollbar-track {
    background: var(--modal-gray-100);
    border-radius: var(--modal-border-radius-xs);
}

#contact-details-modal .tab-pane::-webkit-scrollbar-thumb,
.activity-timeline-content::-webkit-scrollbar-thumb {
    background: var(--modal-gray-400);
    border-radius: var(--modal-border-radius-xs);
}

    #contact-details-modal .tab-pane::-webkit-scrollbar-thumb:hover,
    .activity-timeline-content::-webkit-scrollbar-thumb:hover {
        background: var(--modal-gray-500);
    }

/* ============================================
   13. UTILITY CLASSES
============================================ */

#contact-details-modal .row {
    margin: 0 calc(var(--modal-spacing-xs) * -1);
}

#contact-details-modal .col-md-6 {
    padding: 0 var(--modal-spacing-xs);
}

#contact-details-modal .mb-3 {
    margin-bottom: var(--modal-spacing-md);
}

#contact-details-modal label.text-muted {
    font-size: var(--modal-font-xxs);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    font-weight: var(--modal-font-weight-semibold);
    color: var(--modal-gray-500) !important;
    margin-bottom: var(--modal-spacing-2xs);
    display: block;
}

#contact-details-modal .d-flex {
    display: flex;
}

#contact-details-modal .align-items-center {
    align-items: center;
}

#contact-details-modal .gap-2 {
    gap: var(--modal-spacing-xs);
}

#contact-details-modal a {
    color: var(--modal-primary);
    text-decoration: none;
    transition: color var(--modal-transition-base);
}

    #contact-details-modal a:hover {
        text-decoration: underline;
        color: var(--modal-primary-hover);
    }

#contact-details-modal address {
    font-style: normal;
    margin: 0;
}

#contact-details-modal .badge {
    padding: var(--modal-spacing-2xs) var(--modal-spacing-xs);
    border-radius: var(--modal-border-radius-xs);
    font-size: var(--modal-font-xxs);
    font-weight: var(--modal-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.01875rem;
}

    #contact-details-modal .badge.bg-secondary {
        background: var(--modal-gray-200) !important;
        color: var(--modal-gray-700) !important;
    }

/* ============================================
   14. CRITICAL OVERRIDES FOR ACTIVITY TAB
============================================ */

#contact-details-modal #activity-tab .activity-timeline-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#contact-details-modal #activity-tab .activity-timeline-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: var(--modal-spacing-xxl) var(--modal-spacing-xl) !important;
}

#contact-details-modal #activity-tab .timeline-marker {
    flex-shrink: 0 !important;
    width: var(--modal-timeline-marker-width) !important;
    display: flex !important;
    justify-content: center !important;
}

#contact-details-modal #activity-tab .timeline-dot {
    width: var(--modal-timeline-dot-size) !important;
    height: var(--modal-timeline-dot-size) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    #contact-details-modal #activity-tab .timeline-dot i {
        font-size: var(--modal-font-xxl) !important;
        display: block !important;
    }

/* ============================================
   15. RESPONSIVE BREAKPOINTS
============================================ */

#contact-details-modal {
    container: modal / inline-size;
}

@container modal (max-width: 48rem) {
    #contact-details-modal .modal-dialog {
        max-width: 100%;
        margin: 0;
    }

    #contact-details-modal .modal-content {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-contact-header {
        padding: var(--modal-spacing-md);
    }

    .modal-contact-avatar {
        width: var(--modal-avatar-size-sm);
        height: var(--modal-avatar-size-sm);
        font-size: var(--modal-font-md);
    }

    #contact-details-modal .tab-item {
        padding: var(--modal-spacing-sm) var(--modal-spacing-xs);
        font-size: var(--modal-font-xs);
    }

        #contact-details-modal .tab-item i {
            font-size: var(--modal-font-md);
        }

    #contact-details-modal .tab-pane:not(#activity-tab) {
        padding: var(--modal-spacing-md);
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    .detail-item {
        padding: var(--modal-spacing-md);
    }

    .details-card-header {
        padding: var(--modal-spacing-md);
    }

    .activity-timeline-content {
        padding: var(--modal-spacing-xl) var(--modal-spacing-md);
    }

        .activity-timeline-content::before {
            left: calc(3.5rem + var(--modal-spacing-xs));
        }

    .timeline-marker {
        width: 3.5rem;
    }

    .timeline-dot {
        width: 2.75rem;
        height: 2.75rem;
    }

        .timeline-dot i {
            font-size: var(--modal-font-xl);
        }

    .activity-card-header,
    .activity-card-body {
        padding: var(--modal-spacing-md);
    }

    .activity-timeline-item {
        gap: var(--modal-spacing-md);
    }
}

@container modal (max-width: 30rem) {
    .details-card {
        border-radius: var(--modal-border-radius-sm);
        margin-bottom: var(--modal-spacing-md);
    }

    .detail-item {
        padding: var(--modal-spacing-md);
    }

    .details-card-header {
        padding: var(--modal-spacing-sm) var(--modal-spacing-md);
    }

        .details-card-header h6 {
            font-size: var(--modal-font-md);
        }

    .detail-label {
        font-size: var(--modal-font-xxs);
    }

    .detail-value {
        font-size: var(--modal-font-sm);
    }

    .activity-timeline-header {
        padding: var(--modal-spacing-md);
    }

    .timeline-header-content {
        flex-wrap: wrap;
    }

    .activity-count {
        flex: 1 0 100%;
        text-align: center;
        margin-left: 0;
        margin-top: var(--modal-spacing-xs);
    }

    .activity-timeline-content {
        padding: var(--modal-spacing-lg) var(--modal-spacing-sm);
    }

        .activity-timeline-content::before {
            left: calc(3rem + var(--modal-spacing-xs));
        }

    .timeline-marker {
        width: 3rem;
    }

    .timeline-dot {
        width: 2.5rem;
        height: 2.5rem;
    }

        .timeline-dot i {
            font-size: var(--modal-font-md);
        }

    .activity-timeline-item {
        gap: var(--modal-spacing-sm);
        margin-bottom: var(--modal-spacing-xl);
    }

    .activity-title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--modal-spacing-2xs);
    }

    .activity-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--modal-spacing-xs);
    }
}

/* ============================================
   16. ACCESSIBILITY
============================================ */

@media (prefers-contrast: high) {
    .details-card,
    .activity-card {
        border: calc(var(--modal-border-width) * 2) solid currentColor;
    }

    .detail-link:focus-visible {
        outline: var(--modal-tab-border-width) solid var(--modal-primary);
        outline-offset: var(--modal-spacing-2xs);
    }

    .timeline-dot {
        border-width: calc(var(--modal-border-width) * 4);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .timeline-dot,
    .activity-card,
    .detail-link {
        transition: none !important;
    }

    .activity-timeline-item:hover .timeline-dot,
    .activity-timeline-item:hover .activity-card {
        transform: none !important;
    }
}

@supports selector(:focus-visible) {
    #contact-details-modal .tab-item:focus {
        outline: none;
    }

    #contact-details-modal .tab-item:focus-visible {
        outline: var(--modal-spacing-2xs) solid var(--modal-primary);
        outline-offset: calc(var(--modal-spacing-2xs) * -1);
    }
}

@media print {
    #contact-details-modal .modal-dialog {
        max-width: 100%;
        margin: 0;
    }

    #contact-details-modal .modal-content {
        box-shadow: none;
        border: var(--modal-border-width) solid var(--modal-gray-900);
    }

    .activity-timeline-content::before {
        background: var(--modal-gray-900) !important;
    }

    .timeline-dot {
        border-color: var(--modal-gray-900) !important;
        box-shadow: none !important;
    }
}