/**
 * Leads Table Styles
 * ==================
 * Custom styles for the leads list table
 */

/* Override Filament's flex layout for containers with lead badges */
.fi-ta-text-has-descriptions:has(.is-lead-badges) {
    display: table-cell !important;
}

/* Badge container under Lead # column */
.is-lead-badges {
    margin-top: 4px;
}

.is-lead-badges > * {
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 4px;
}

/* Score badge - outline style */
.is-badge-outline {
    border-width: 1px;
    border-style: solid;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
}

.is-badge-outline-success {
    border-color: rgb(34, 197, 94);
    color: rgb(34, 197, 94);
}

.is-badge-outline-warning {
    border-color: rgb(234, 179, 8);
    color: rgb(234, 179, 8);
}

.is-badge-outline-info {
    border-color: rgb(59, 130, 246);
    color: rgb(59, 130, 246);
}

.is-badge-outline-danger {
    border-color: rgb(239, 68, 68);
    color: rgb(239, 68, 68);
}

.is-badge-outline-gray {
    border-color: rgb(156, 163, 175);
    color: rgb(156, 163, 175);
}

.is-badge-outline-primary {
    border-color: rgb(99, 102, 241);
    color: rgb(99, 102, 241);
}

/* Status badge under Source column */
.is-status-badge {
    display: inline-block;
    margin-top: 4px;
}

/* No email placeholder */
.is-no-email {
    font-style: italic;
    font-weight: 400;
    color: #9ca3af;
}

/* Date column - Updated / Follow-up */
.is-date-cell {
    font-size: 12px;
    line-height: 1.5;
}

.is-date-overdue {
    color: rgb(239, 68, 68);
    font-weight: 600;
}

/* Dark mode support */
.dark .is-no-email {
    color: #6b7280;
}

.dark .is-badge-outline-success {
    border-color: rgb(74, 222, 128);
    color: rgb(74, 222, 128);
}

.dark .is-badge-outline-warning {
    border-color: rgb(250, 204, 21);
    color: rgb(250, 204, 21);
}

.dark .is-badge-outline-info {
    border-color: rgb(96, 165, 250);
    color: rgb(96, 165, 250);
}

.dark .is-badge-outline-danger {
    border-color: rgb(248, 113, 113);
    color: rgb(248, 113, 113);
}

.dark .is-badge-outline-gray {
    border-color: rgb(107, 114, 128);
    color: rgb(107, 114, 128);
}

.dark .is-badge-outline-primary {
    border-color: rgb(129, 140, 248);
    color: rgb(129, 140, 248);
}

.dark .is-date-overdue {
    color: rgb(248, 113, 113);
}

/* ==========================================================================
   Leads Table - Compact Row Spacing
   ========================================================================== */

/* Reduce table text column padding (Filament uses padding-block with CSS vars) */
.fi-ta-text:not(.fi-inline) {
    padding-block: 8px !important;
}

/* Reduce action cell padding */
.fi-ta-cell:has(.fi-ta-actions) {
    padding-block: 8px !important;
}

/* Reduce checkbox cell padding */
.fi-ta-cell:has(.fi-ta-record-checkbox) {
    padding-block: 8px !important;
}


/* ==========================================================================
   Leads Table - Contact Display (3-line: name, email, phone)
   ========================================================================== */

.is-lead-contact {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Lead name line */
.is-lead-name {
    font-size: 14px;
    font-weight: 500;
    color: rgb(17 24 39);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.dark .is-lead-name {
    color: rgb(255 255 255);
}

/* Lead email and phone lines */
.is-lead-email,
.is-lead-phone {
    font-size: 12px;
    color: rgb(107 114 128);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.dark .is-lead-email,
.dark .is-lead-phone {
    color: rgb(156 163 175);
}

.is-no-email,
.is-no-phone {
    display: flex;
    align-items: center;
    gap: 4px;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    color: #9ca3af;
}

.dark .is-no-email,
.dark .is-no-phone {
    color: #6b7280;
}

/* ==========================================================================
   Leads Table - Date Column (3-line: created, updated, follow-up)
   ========================================================================== */

.is-date-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    line-height: 1.3;
}

.is-date-created {
    color: rgb(107 114 128);
}

.dark .is-date-created {
    color: rgb(156 163 175);
}

.is-date-updated {
    color: rgb(55 65 81);
    font-weight: 500;
}

.dark .is-date-updated {
    color: rgb(209 213 219);
}

.is-date-followup {
    color: rgb(59 130 246);
}

.dark .is-date-followup {
    color: rgb(96 165 250);
}

/* Date labels */
.is-date-label {
    font-weight: 500;
    color: rgb(107 114 128);
    font-size: 11px;
}

.dark .is-date-label {
    color: rgb(156 163 175);
}

/* ==========================================================================
   Lead Activity Timeline
   ========================================================================== */

.is-timeline-scroll {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 4px;
}

.is-timeline {
    position: relative;
    padding-left: 24px;
}

.is-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(229 231 235);
}

.is-timeline-item {
    position: relative;
    padding-bottom: 20px;
}

.is-timeline-item:last-child {
    padding-bottom: 0;
}

.is-timeline-dot {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    z-index: 1;
}

.is-timeline-dot-blue { background: #3b82f6; }
.is-timeline-dot-green { background: #10b981; }
.is-timeline-dot-orange { background: #f59e0b; }
.is-timeline-dot-red { background: #ef4444; }
.is-timeline-dot-gray { background: #9ca3af; }

.is-timeline-content {
    background: white;
    border: 1px solid rgb(229 231 235);
    border-radius: 8px;
    padding: 12px;
}

.is-timeline-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.is-timeline-type-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 9999px;
    background: #dbeafe;
    color: #1d4ed8;
}

.is-timeline-description {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.is-timeline-meta {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Dark mode */
.dark .is-timeline::before {
    background: rgb(55 65 81);
}

.dark .is-timeline-dot {
    border-color: rgb(17 24 39);
}

.dark .is-timeline-content {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

.dark .is-timeline-type-badge {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(96 165 250);
}

.dark .is-timeline-description {
    color: rgb(209 213 219);
}

.dark .is-timeline-meta {
    color: rgb(107 114 128);
}