/* Global Email Column Styles - Apply to all tables in the system */
/* Designed to show full email for 98% of users */

/* Target email columns by various selectors */
td[class*="email" i],
td[id*="email" i],
td[name*="email" i],
td.userEmail,
th:contains("מייל") ~ td,
th:contains("אימייל") ~ td,
th:contains("Email") ~ td,
th:contains("דוא\"ל") ~ td,
th:contains("דואר") ~ td,
.table-fill td:nth-child(2), /* Common position for email column */
.table-fill2 td:nth-child(2) {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px !important;
}

/* Override inline styles */
table td[style*="userEmail"],
table td > *[id*="userEmail"],
table td > *[name*="userEmail"],
table td > *[class*="userEmail"],
table td:has(> [href*="mailto:"]) {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
}

/* Email input fields in tables */
table td input[type="email"],
table td input[id*="email" i],
table td input[name*="email" i],
table td input[placeholder*="מייל"],
table td input[placeholder*="Email"] {
    max-width: 225px !important;
    width: 225px !important;
}

/* Hover effect to show full email */
td[class*="email" i]:hover,
td[id*="email" i]:hover,
td[name*="email" i]:hover,
td.userEmail:hover,
table td:has(> [href*="mailto:"]):hover {
    overflow: visible !important;
    white-space: normal !important;
    position: relative !important;
    z-index: 100 !important;
    background: #f5f5f5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 8px !important;
    max-width: none !important;
    width: auto !important;
    min-width: 230px !important;
}

/* CRM specific email columns */
.editablegrid td[data-field="email"],
.editable[data-field="email"],
span[data-field="email"],
td > span[class*="email" i] {
    display: inline-block;
    max-width: 230px !important;
    width: 230px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dynamic tables created by JavaScript */
[class*="DataTable"] td:nth-child(2),
[class*="datatable"] td:nth-child(2),
[id*="DataTable"] td:nth-child(2),
[id*="datatable"] td:nth-child(2) {
    max-width: 230px !important;
    width: 230px !important;
}

/* Special handling for admin tables */
.table-fill tbody td:nth-of-type(2),
.table-fill2 tbody td:nth-of-type(2),
[class*="admin"] table td:nth-child(2),
[id*="admin"] table td:nth-child(2) {
    max-width: 230px !important;
    width: 230px !important;
}

/* Ensure headers also have consistent width */
th:contains("מייל"),
th:contains("אימייל"), 
th:contains("Email"),
th:contains("דוא\"ל"),
th:contains("דואר"),
.table-fill th:nth-child(2),
.table-fill2 th:nth-child(2) {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
}

/* Media query for smaller screens */
@media screen and (max-width: 1200px) {
    td[class*="email" i],
    td.userEmail,
    .table-fill td:nth-child(2),
    .table-fill2 td:nth-child(2) {
        max-width: 200px !important;
        min-width: 190px !important;
        width: 200px !important;
    }
}

/* Additional specific cases for model-generated tables */
/* Model_users generated tables */
table[id*="testTable"] td:nth-child(2),
table[id*="usersTable"] td:nth-child(2),
table[id*="contactsTable"] td:nth-child(2) {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pipeline and CRM specific tables */
.pipeline-stage td[data-field="email"],
.lead-table td.email-column,
.leads-container td:has(span[data-field="email"]) {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
}

/* Admin panel tables - force email column width */
[class*="admin"] table td:contains("@"),
.admin-content table td:contains("@"),
#admin-table td:contains("@") {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Input fields inside table cells */
td input[type="email"],
td input[placeholder*="מייל"],
td input[placeholder*="Email"],
td input[name*="email" i],
td input[id*="email" i] {
    max-width: 150px !important;
    width: 150px !important;
}

/* Force consistent width even with inline styles */
td[style*="userEmail"],
td[style*="@"] {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
}

/* Print media query */
@media print {
    td[class*="email" i],
    td.userEmail,
    .table-fill td:nth-child(2),
    .table-fill2 td:nth-child(2) {
        max-width: 230px !important;
        width: 230px !important;
    }
}

/* Ultimate override for any inline styles - use attribute selectors */
[style*="width"][style*="px"] td:contains("@"),
td[style*="width"][style*="px"]:contains("@"),
[style*="width"][style*="%"] td:contains("@"),
td[style*="width"][style*="%"]:contains("@") {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
}

/* Specific override for common table patterns */
.table-fill tbody tr td:nth-child(2)[style],
.table-fill2 tbody tr td:nth-child(2)[style],
table[id*="Table"] tbody tr td:nth-child(2)[style] {
    max-width: 230px !important;
    min-width: 220px !important; 
    width: 230px !important;
}

/* Override for dynamically generated content */
body * td:contains("@") {
    max-width: 230px !important;
    min-width: 220px !important;
    width: 230px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}