/* Email Content Isolation Styles */

/* Container for email content - creates an isolation boundary */
.email-content-wrapper {
    /* Reset all inherited styles */
    all: initial;
    /* Re-apply necessary styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #374151; /* gray-700 */
}

.dark .email-content-wrapper {
    color: #D1D5DB; /* gray-300 */
}

/* Iframe container for complete isolation */
.email-content-iframe-container {
    width: 100%;
    border: none;
    background: transparent;
}

/* Preserve application styles for UI elements */
#panel3 .content-accordion,
#panel3 .accordion-header,
#panel3 .accordion-content {
    /* Force application styles */
    all: revert !important;
}

/* Ensure panel3 maintains consistent typography - only when email content is present */
#panel3 .email-content-isolated {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

#panel3 .email-content-isolated h1, 
#panel3 .email-content-isolated h2, 
#panel3 .email-content-isolated h3, 
#panel3 .email-content-isolated h4, 
#panel3 .email-content-isolated h5, 
#panel3 .email-content-isolated h6 {
    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

/* Keep the asset title style specific */
#panel3 h3#assetDetailsTitle {
    font-size: 1.25rem !important; /* text-xl */
    font-weight: 600 !important; /* font-semibold */
}

/* Override prose styles for email content */
#Content-view-container.email-content {
    max-width: none !important;
}

#Content-view-container.email-content .prose {
    all: initial;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}

/* Sandbox email HTML content */
.email-html-content {
    /* Create a new stacking context */
    isolation: isolate;
    /* Contain layout changes */
    contain: layout style;
    /* Reset typography that might leak */
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: inherit !important;
}

/* Preserve accordion styles */
.content-accordion {
    border: 1px solid #e5e7eb !important; /* gray-200 */
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    background-color: white !important;
}

.dark .content-accordion {
    border-color: #374151 !important; /* gray-700 */
    background-color: #1f2937 !important; /* gray-800 */
}

.accordion-header {
    background-color: #f9fafb !important; /* gray-50 */
    padding: 0.75rem 1rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important; /* text-sm */
    color: #374151 !important; /* gray-700 */
}

.dark .accordion-header {
    background-color: #1f2937 !important; /* gray-800 */
    color: #d1d5db !important; /* gray-300 */
}

.accordion-header:hover {
    background-color: #f3f4f6 !important; /* gray-100 */
}

.dark .accordion-header:hover {
    background-color: #374151 !important; /* gray-700 */
}

.accordion-content {
    padding: 1rem !important;
    background-color: white !important;
    font-size: 0.875rem !important; /* text-sm */
    color: #4b5563 !important; /* gray-600 */
}

.dark .accordion-content {
    background-color: #111827 !important; /* gray-900 */
    color: #9ca3af !important; /* gray-400 */
}

/* Fix for metadata cards */
.metadata-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem !important;
    background-color: #f9fafb !important; /* gray-50 */
    border-radius: 0.375rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.875rem !important; /* text-sm */
}

.dark .metadata-card {
    background-color: #1f2937 !important; /* gray-800 */
}

/* Ensure topic selector maintains style */
#topicSelector {
    font-size: 0.875rem !important; /* text-sm */
    padding: 0.375rem 0.75rem !important;
}

/* Fix button styles only within email content */
#panel3 .email-content-isolated button {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* Shadow DOM-like isolation for email content */
.email-content-isolated {
    display: block;
    width: 100%;
    padding: 1rem;
    overflow: auto;
    /* Create a stacking context to contain styles */
    isolation: isolate;
    /* Ensure dark mode colors are preserved */
    background-color: transparent !important;
    color: inherit !important;
}

/* Container for sanitized email content */
.email-content-container {
    /* Reset any inherited styles */
    all: initial;
    /* Re-apply base styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
    display: block;
    width: 100%;
}

.dark .email-content-container {
    color: #d1d5db;
}

/* Dark mode specific styling for email content */
.dark .email-content-isolated {
    color: #d1d5db !important;
}

/* Reset styles only for specific email HTML elements */
.email-content-isolated table,
.email-content-isolated td,
.email-content-isolated th,
.email-content-isolated tr {
    /* Reset table styles but preserve dark mode */
    border-collapse: collapse;
    padding: 0.5rem;
    border: 1px solid currentColor;
    opacity: 0.8;
}

.email-content-isolated div,
.email-content-isolated span,
.email-content-isolated p {
    /* Preserve text color from parent */
    color: inherit !important;
    background-color: transparent !important;
    /* Override any inline styles for max width */
    max-width: 100% !important;
    word-wrap: break-word !important;
}

/* Override inline styles in email content */
.email-content-isolated [style*="background"],
.email-content-isolated [style*="color"] {
    background-color: transparent !important;
    color: inherit !important;
}

/* Ensure images and media don't break layout */
.email-content-isolated img,
.email-content-isolated video {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix PUBLISHED badge styling in content accordion */
.accordion-content .badge,
.Content-accordion-content .badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.125rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 0.25rem !important;
    background-color: #10b981 !important; /* green-500 */
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    margin-right: 0.5rem !important;
}

.accordion-content .badge.published,
.Content-accordion-content .badge.published {
    background-color: #10b981 !important; /* green-500 */
}

.accordion-content .badge.unpublished,
.Content-accordion-content .badge.unpublished,
.accordion-content .badge.draft,
.Content-accordion-content .badge.draft {
    background-color: #6b7280 !important; /* gray-500 */
}

/* Isolate email body content more aggressively */
.Content-accordion-content .email-body,
.accordion-content .email-body,
.email-content-isolated *,
.email-content-container * {
    /* Force normal text direction - fixes vertical text issue */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    text-combine-upright: none !important;
    direction: ltr !important;
    transform: none !important;
    
    /* Reset all inherited styles from email HTML */
    all: unset !important;
    /* Re-apply necessary base styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #374151 !important; /* gray-700 */
    display: revert !important;
    width: auto !important;
    /* Contain any styling from escaping */
    isolation: isolate !important;
    contain: layout style !important;
}

.dark .Content-accordion-content .email-body,
.dark .accordion-content .email-body,
.dark .email-content-isolated *,
.dark .email-content-container * {
    color: #d1d5db !important; /* gray-300 */
}

/* Ensure email container itself has proper layout */
.email-content-container,
.email-content-isolated {
    display: block !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
    transform: none !important;
    width: 100% !important;
}

/* Fix for email table conversions */
.email-table {
    display: block !important;
    margin: 1rem 0 !important;
}

.email-row {
    display: block !important;
    margin: 0.5rem 0 !important;
}

.email-cell {
    display: block !important;
    padding: 0.25rem !important;
}

/* Ensure block elements display correctly */
.email-content-container div,
.email-content-isolated div {
    display: block !important;
    writing-mode: horizontal-tb !important;
}

.email-content-container p,
.email-content-isolated p {
    display: block !important;
    margin: 0.5rem 0 !important;
    writing-mode: horizontal-tb !important;
}

.email-content-container h1,
.email-content-container h2,
.email-content-container h3,
.email-content-isolated h1,
.email-content-isolated h2,
.email-content-isolated h3 {
    display: block !important;
    font-weight: bold !important;
    margin: 0.75rem 0 !important;
    writing-mode: horizontal-tb !important;
}

.email-content-container blockquote,
.email-content-isolated blockquote {
    display: block !important;
    padding-left: 1rem !important;
    border-left: 3px solid #d1d5db !important;
    margin: 0.5rem 0 !important;
}

/* Override any inline styles in email content */
.Content-accordion-content .email-body *[style],
.accordion-content .email-body *[style] {
    /* Reset backgrounds and colors from inline styles */
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
}

/* Preserve structure but remove styling from email tables */
.Content-accordion-content .email-body table,
.accordion-content .email-body table {
    border-collapse: collapse !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
}

.Content-accordion-content .email-body td,
.accordion-content .email-body td,
.Content-accordion-content .email-body th,
.accordion-content .email-body th {
    padding: 0.25rem 0.5rem !important;
    border: 1px solid #e5e7eb !important;
    background: transparent !important;
    color: inherit !important;
}

.dark .Content-accordion-content .email-body td,
.dark .accordion-content .email-body td,
.dark .Content-accordion-content .email-body th,
.dark .accordion-content .email-body th {
    border-color: #4b5563 !important;
}