/* Responsive Design Fixes for GTM.ai */

/* ===== GLOBAL RESPONSIVE STYLES ===== */

/* Ensure proper box-sizing */
* {
    box-sizing: border-box;
}

/* ===== INPUT FIELD WIDTH CONSTRAINTS ===== */
/* Ensure all input fields have reasonable max-width on desktop */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    max-width: 400px !important;
}

/* For inputs inside flex or grid containers that need full width on mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        max-width: 100% !important;
    }
}

/* Special handling for search inputs or inputs that should be wider */
.wide-input,
input[type="search"].wide,
.search-container input {
    max-width: 500px !important;
}

/* Ensure form containers can be wider than inputs */
form,
.form-container,
.form-wrapper {
    max-width: none;
}

/* Responsive Typography */
@media (max-width: 1024px) {
    /* Tablet styles */
    h1 {
        font-size: clamp(2rem, 5vw, 3.75rem) !important;
        line-height: 1.2 !important;
        /* Preserve font-weight */
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
        line-height: 1.3 !important;
        /* Preserve font-weight */
    }
    
    h3 {
        font-size: clamp(1.25rem, 3vw, 2rem) !important;
        line-height: 1.4 !important;
        /* Preserve font-weight */
    }
    
    p.text-3xl {
        font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
        line-height: 1.4 !important;
        /* Preserve font-weight */
    }
}

@media (max-width: 768px) {
    /* Mobile styles */
    h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
        /* Preserve font-weight */
    }
    
    h2 {
        font-size: clamp(1.25rem, 5vw, 2rem) !important;
        line-height: 1.3 !important;
        /* Preserve font-weight */
    }
    
    h3 {
        font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
        line-height: 1.4 !important;
        /* Preserve font-weight */
    }
    
    p.text-3xl, p.text-2xl {
        font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
        line-height: 1.5 !important;
        /* Preserve font-weight */
    }
    
    p.text-xl {
        font-size: clamp(1rem, 3.5vw, 1.25rem) !important;
        line-height: 1.5 !important;
        /* Preserve font-weight */
    }
}

/* Ensure font-weight consistency across all breakpoints */
.font-extrabold {
    font-weight: 800 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-normal {
    font-weight: 400 !important;
}

/* Preserve monospace font properties */
.font-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace !important;
}

/* ===== BACKGROUND IMAGE FIXES ===== */
.data-background {
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important; /* Better mobile performance */
}

@media (max-width: 768px) {
    .data-background {
        background-position: center top !important;
        /* Ensure background doesn't cause horizontal scroll */
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ===== LAYOUT CONSTRAINTS ===== */
/* Prevent horizontal overflow */
body {
    overflow-x: hidden !important;
}

/* Container width constraints - Enforce 1280px max-width */
main {
    overflow-x: hidden !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Maximum width constraint for data cubes grid */
.grid.grid-cols-1.lg\\:grid-cols-2.xl\\:grid-cols-3 {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Enforce 1280px container width on all major containers */
.max-w-7xl {
    max-width: 1280px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1rem, 5vw, 2rem) !important;
    padding-right: clamp(1rem, 5vw, 2rem) !important;
}

/* Ensure all content sections respect the 1280px limit */
section > div:first-child,
.relative > .max-w-7xl,
footer > div > div {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Adjust padding for different screen sizes */
@media (min-width: 640px) {
    .max-w-7xl {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .max-w-7xl {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 1280px) {
    .max-w-7xl {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Ensure hero sections and other content areas also respect the constraint */
.p-8, .p-6, .p-4 {
    max-width: 100% !important;
}

/* Constrain the inner content wrapper that appears on detail pages */
main > div {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Constrain all images and graphics */
img, svg, video, canvas, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* ===== CHART AND GRAPHIC CONSTRAINTS ===== */
/* Insights section chart container */
.rounded-2xl img, 
.rounded-xl img,
[class*="rounded"] img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Data visualization canvases */
#dataCanvas {
    max-width: 100% !important;
    width: 100% !important;
}

/* ===== RESPONSIVE PADDING AND MARGINS ===== */
@media (max-width: 768px) {
    /* Reduce padding on mobile */
    .p-8 {
        padding: 1.5rem !important;
    }
    
    .p-6 {
        padding: 1.25rem !important;
    }
    
    .px-8 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .px-6 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
    .py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Adjust margins */
    .mb-16 {
        margin-bottom: 3rem !important;
    }
    
    .mb-12 {
        margin-bottom: 2.5rem !important;
    }
    
    .mb-8 {
        margin-bottom: 2rem !important;
    }
}

/* ===== RESPONSIVE TABLES ===== */
/* Mobile card-based table layout */
@media (max-width: 768px) {
    /* Target all tables more specifically */
    table, 
    .overflow-x-auto table,
    div[class*="overflow"] table {
        width: 100% !important;
    }
    
    /* Hide table headers on mobile */
    table thead,
    .overflow-x-auto table thead,
    div[class*="overflow"] table thead {
        display: none !important;
    }
    
    /* Convert table rows to cards */
    table tbody tr,
    .overflow-x-auto table tbody tr,
    div[class*="overflow"] table tbody tr {
        display: block !important;
        margin-bottom: 1rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.5rem !important;
        padding: 1rem !important;
        background-color: white !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Stack table cells */
    table tbody td,
    .overflow-x-auto table tbody td,
    div[class*="overflow"] table tbody td {
        display: block !important;
        text-align: left !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        position: relative !important;
        padding-left: 45% !important;
        min-height: 2rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Add labels before each cell */
    table tbody td[data-label]:before,
    .overflow-x-auto table tbody td[data-label]:before,
    div[class*="overflow"] table tbody td[data-label]:before {
        content: attr(data-label) !important;
        position: absolute !important;
        left: 0 !important;
        width: 40% !important;
        padding-right: 0.5rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        font-size: 0.7rem !important;
        color: #6b7280 !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }
    
    /* Remove alternating row colors on mobile */
    table tbody tr:nth-child(even),
    .overflow-x-auto table tbody tr:nth-child(even),
    div[class*="overflow"] table tbody tr:nth-child(even) {
        background-color: white !important;
    }
    
    /* Remove any table wrapper horizontal scroll */
    .overflow-x-auto,
    div[class*="overflow-x"] {
        overflow-x: visible !important;
    }
}

/* ===== RESPONSIVE GRID LAYOUTS ===== */
/* Better grid breakpoints for data cubes */
/* 3 columns only on larger screens (1280px+) */
@media (max-width: 1279px) {
    /* 2 columns on medium screens */
    .grid-cols-3,
    .lg\\:grid-cols-3,
    .xl\\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    /* Single column on mobile */
    .grid-cols-3,
    .grid-cols-2,
    .md\\:grid-cols-2,
    .lg\\:grid-cols-3,
    .xl\\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    /* Stack flex items on mobile */
    .flex-row {
        flex-direction: column !important;
    }
    
    .lg\\:flex-row {
        flex-direction: column !important;
    }
    
    .lg\\:flex-row-reverse {
        flex-direction: column !important;
    }
}

/* Ensure proper grid gaps at all sizes */
.gap-8 {
    gap: 2rem !important;
}

@media (max-width: 768px) {
    .gap-8 {
        gap: 1.5rem !important;
    }
}

/* ===== NAVIGATION RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Ensure header doesn't cause overflow */
    header {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Adjust header padding */
    header .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ===== HERO SECTION RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Adjust hero padding */
    .pt-24 {
        padding-top: 5rem !important;
    }
    
    /* Ensure hero content doesn't overflow */
    .text-left {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ===== CARD COMPONENTS RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Ensure cards don't overflow */
    .rounded-2xl,
    .rounded-xl,
    .rounded-lg {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Adjust card padding */
    .rounded-2xl .p-6,
    .rounded-xl .p-6 {
        padding: 1rem !important;
    }
}

/* ===== BUTTON RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Make buttons full width on mobile */
    .rounded-full {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure button text doesn't overflow */
    button, a.rounded-full {
        white-space: normal !important;
        text-align: center !important;
        padding: 0.75rem 1rem !important;
    }
}

/* ===== FOOTER RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Adjust footer padding */
    footer.py-64 {
        padding-top: 8rem !important;
        padding-bottom: 8rem !important;
    }
    
    /* Fix footer background on mobile */
    footer[style*="background-attachment: fixed"] {
        background-attachment: scroll !important;
    }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE ===== */
/* Hide on mobile */
@media (max-width: 768px) {
    .mobile\\:hidden {
        display: none !important;
    }
}

/* Show on mobile */
@media (min-width: 769px) {
    .mobile\\:block {
        display: none !important;
    }
}

/* ===== SPECIFIC COMPONENT FIXES ===== */
/* Fix the insights section layout */
@media (max-width: 768px) {
    /* Stack the contact card properly */
    .flex.items-start.space-x-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .flex.items-start.space-x-4 > * {
        margin-left: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Fix nested arrow results - REMOVED OLD RULE */
}

/* ===== NESTED ARROW INDENTATION FIXES ===== */
/* Progressive indentation for the cascading arrows on different screen sizes */

/* Mobile screens (up to 768px) - Gentle indentation */
@media (max-width: 768px) {
    /* First arrow - 25% response rate */
    div[style*="margin-left: 24px"] {
        margin-left: 1rem !important; /* 16px */
    }
    
    /* Second arrow - 462 conversations */
    div[style*="margin-left: 112px"] {
        margin-left: 2.5rem !important; /* 40px */
    }
    
    /* Third arrow - $50M revenue */
    div[style*="margin-left: 176px"] {
        margin-left: 4rem !important; /* 64px */
    }
}

/* Tablet screens (768px to 1024px) - Medium indentation */
@media (min-width: 769px) and (max-width: 1024px) {
    /* First arrow - 25% response rate */
    div[style*="margin-left: 24px"] {
        margin-left: 1.5rem !important; /* 24px - keep original */
    }
    
    /* Second arrow - 462 conversations */
    div[style*="margin-left: 112px"] {
        margin-left: 4.5rem !important; /* 72px */
    }
    
    /* Third arrow - $50M revenue */
    div[style*="margin-left: 176px"] {
        margin-left: 7rem !important; /* 112px */
    }
}

/* Small desktop screens (1024px to 1280px) - Slightly reduced from full */
@media (min-width: 1025px) and (max-width: 1280px) {
    /* First arrow - 25% response rate */
    div[style*="margin-left: 24px"] {
        margin-left: 1.5rem !important; /* 24px - keep original */
    }
    
    /* Second arrow - 462 conversations */
    div[style*="margin-left: 112px"] {
        margin-left: 6rem !important; /* 96px */
    }
    
    /* Third arrow - $50M revenue */
    div[style*="margin-left: 176px"] {
        margin-left: 9rem !important; /* 144px */
    }
}

/* Ensure the arrow images scale appropriately on smaller screens */
@media (max-width: 768px) {
    /* Scale down arrow images slightly on mobile */
    img[src*="insight-nested-arrow.svg"] {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ===== FLOATING AVATAR BUBBLE FIXES ===== */
/* Fix the floating avatar detail shot positioning and sizing */
.absolute.-bottom-4 {
    /* Default positioning for larger screens */
    right: 1rem !important;
    width: fit-content !important;
    max-width: fit-content !important;
}

/* Ensure consistent avatar sizing across all breakpoints */
.absolute.-bottom-4 img {
    width: 2rem !important;
    height: 2rem !important;
}

/* Adjust positioning for medium screens */
@media (max-width: 1024px) {
    .absolute.-bottom-4 {
        right: 1rem !important;
        width: fit-content !important;
        max-width: fit-content !important;
    }
}

/* Maintain same size on mobile */
@media (max-width: 768px) {
    .absolute.-bottom-4 {
        right: 1rem !important;
        bottom: -1rem !important;
        width: fit-content !important;
        max-width: fit-content !important;
    }
    
    /* Keep avatar images consistent size */
    .absolute.-bottom-4 img {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* ===== CHECKMARK CIRCLE FIXES ===== */
/* Ensure checkmark stays circular at all breakpoints */
.bg-green-500.rounded-full,
.bg-green-700.rounded-full,
.bg-green-100.rounded-full,
.bg-blue-100.rounded-full,
[class*="bg-"][class*="1a2b5c"][class*="rounded-full"] {
    flex-shrink: 0 !important;
    width: 1.5rem !important; /* 24px */
    height: 1.5rem !important; /* 24px */
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    max-width: 1.5rem !important;
    max-height: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important; /* Ensure perfect circle */
}

/* Larger icon holders (like the first card) */
.w-12.h-12.rounded-full {
    flex-shrink: 0 !important;
    width: 3rem !important; /* 48px */
    height: 3rem !important; /* 48px */
    min-width: 3rem !important;
    min-height: 3rem !important;
    max-width: 3rem !important;
    max-height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important; /* Ensure perfect circle */
}

/* Medium icon holders */
.w-10.h-10.rounded-full {
    flex-shrink: 0 !important;
    width: 2.5rem !important; /* 40px */
    height: 2.5rem !important; /* 40px */
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important; /* Ensure perfect circle */
}

/* Small icon holders */
.w-8.h-8.rounded-full {
    flex-shrink: 0 !important;
    width: 2rem !important; /* 32px */
    height: 2rem !important; /* 32px */
    min-width: 2rem !important;
    min-height: 2rem !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important; /* Ensure perfect circle */
}

/* Ensure the checkmark icon inside stays centered and sized properly */
.bg-green-500.rounded-full svg,
.bg-green-700.rounded-full svg {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
}

/* Prevent flex container from stretching the checkmark on mobile */
@media (max-width: 768px) {
    /* Success message box flex container */
    .bg-green-50 .flex {
        align-items: center !important;
    }
    
    /* Ensure checkmark container doesn't stretch */
    .bg-green-500.rounded-full,
    .bg-green-700.rounded-full {
        flex-shrink: 0 !important;
        width: 1.5rem !important; /* 24px */
        height: 1.5rem !important; /* 24px */
        min-width: 1.5rem !important;
        min-height: 1.5rem !important;
        max-width: 1.5rem !important;
        max-height: 1.5rem !important;
        border-radius: 9999px !important;
    }
}

/* ===== LOGO MONOGRAM CENTERING FIXES ===== */
/* Center the ZoomInfo monogram in the logo */
.bg-gtm-red.rounded {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure the logo SVG is centered */
.bg-gtm-red.rounded img,
.bg-gtm-red.rounded-lg img {
    margin: auto !important;
    display: block !important;
}

/* ===== CONTACT CARD 2-COLUMN LAYOUT FIXES ===== */
/* Fix the contact card details layout */
.grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 0.75rem 1.5rem !important;
    align-items: start !important;
}

/* Hide the middle column that was causing issues */
.grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:first-child {
    grid-column: 1 !important;
}

.grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:last-child {
    grid-column: 2 !important;
}

/* Style the labels */
.grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:first-child p {
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Style the values and secondary info */
.grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:last-child p {
    display: inline !important;
}

/* Style secondary info in parentheses */
.grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:last-child p:has-text("(") {
    opacity: 0.5 !important;
}

/* Target parenthetical content more specifically */
.grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:last-child p {
    position: relative !important;
}

/* Use a more specific approach for parenthetical content */
.text-gray-900:has-text("Down from"),
.text-gray-900:has-text("Added outdoor"),
.text-gray-900:has-text("DoorDash") {
    display: block !important;
}

/* Add styles to wrap and style parenthetical content */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:first-child,
    .grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:last-child {
        grid-column: 1 !important;
    }
    
    .grid.grid-cols-1.md\\:grid-cols-3.gap-y-3 > div:last-child p {
        display: block !important;
        margin-top: 0.25rem !important;
    }
}

/* ===== HORIZONTAL SCROLL PREVENTION ===== */
/* Ensure no element causes horizontal scroll */
* {
    max-width: 100vw !important;
}

.absolute {
    /* Prevent absolute positioned elements from causing overflow */
    max-width: 100% !important;
}

/* Fix wide gradient overlays */
.w-screen {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transform: none !important;
}

/* Contact card responsive layout */
@media (max-width: 768px) {
    /* Stack contact info properly */
    .contact-info-row {
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .contact-info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    /* Ensure logo and text don't overflow */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Fix icon alignment in message boxes */
.flex.items-start svg {
    margin-top: 0.125rem; /* Slight offset to align with text baseline */
}

/* Fix email icon alignment in green success box on mobile */
@media (max-width: 768px) {
    /* Align email icon to top of text in green success message */
    div[style*="background-color: #E0F0E7"] .flex.items-start svg {
        margin-top: 0 !important;
        align-self: flex-start !important;
    }
}


/* Contact card logo positioning */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Ensure proper spacing in contact cards on mobile */
@media (max-width: 640px) {
    .gap-4 {
        gap: 0.75rem;
    }
}

/* Fix 2-column layout responsiveness */
@media (min-width: 768px) {
    .contact-info-row {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 1rem;
        align-items: start;
    }
    
    .contact-info-row p:first-child {
        margin-bottom: 0;
    }
}

/* Ensure mail icon matches search icon size */
svg[stroke*="M3 8l7.89"] {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* Contact card responsive layout */
@media (max-width: 768px) {
    /* Stack contact info properly */
    .contact-info-row {
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .contact-info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    /* Ensure logo and text don't overflow */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Fix icon alignment in message boxes */
.flex.items-start svg {
    margin-top: 0.125rem; /* Slight offset to align with text baseline */
}

/* Responsive arrow sizing - override existing rules */
@media (max-width: 768px) {
    /* Increase arrow sizes on mobile - 40% larger than 1.5rem (24px) = 2.1rem (33.6px) */
    img[src*="insight-nested-arrow.svg"] {
        width: 2.1rem !important;
        height: 2.1rem !important;
    }
}

@media (min-width: 769px) {
    /* Standard arrow size on larger screens - 40% larger than 1.75rem (28px) = 2.45rem (39.2px) */
    img[src*="insight-nested-arrow.svg"] {
        width: 2.45rem !important;
        height: 2.45rem !important;
    }
}

/* Contact card logo positioning */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Ensure proper spacing in contact cards on mobile */
@media (max-width: 640px) {
    .gap-4 {
        gap: 0.75rem;
    }
}

/* Fix 2-column layout responsiveness */
@media (min-width: 768px) {
    .contact-info-row {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 1rem;
        align-items: start;
    }
    
    .contact-info-row p:first-child {
        margin-bottom: 0;
    }
}

/* Ensure mail icon matches search icon size - more specific selector */
div.flex.items-start svg[stroke*="M3 8l7.89"] {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* Override any conflicting icon sizes */
.flex.items-start > svg {
    flex-shrink: 0;
}

/* ===== INSIGHTS SECTION RESPONSIVE FIXES FINAL ===== */

/* Contact card responsive layout */
@media (max-width: 768px) {
    /* Stack contact info properly */
    .contact-info-row {
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .contact-info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    /* Ensure logo and text don't overflow */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Fix icon alignment in message boxes */
.flex.items-start svg {
    margin-top: 0.125rem; /* Slight offset to align with text baseline */
}


/* Contact card logo positioning */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Ensure proper spacing in contact cards on mobile */
@media (max-width: 640px) {
    .gap-4 {
        gap: 0.75rem;
    }
}

/* Fix 2-column layout responsiveness */
@media (min-width: 768px) {
    .contact-info-row {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 1rem;
        align-items: start;
    }
    
    .contact-info-row p:first-child {
        margin-bottom: 0;
    }
}

/* Ensure mail icon matches search icon size - more specific selector */
div.flex.items-start svg[stroke*="M3 8l7.89"] {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* Override any conflicting icon sizes */
.flex.items-start > svg {
    flex-shrink: 0;
}

/* ===== KEY DATA ELEMENTS RESPONSIVE HIDING ===== */
/* Hide Key Data Elements sidebar on screens under 1024px */
@media (max-width: 1023px) {
    .key-data-sidebar {
        display: none !important;
    }
    
    /* Ensure the sidebar container is hidden */
    .lg\:col-span-1:has(.key-data-sidebar) {
        display: none !important;
    }
    
    /* Expand main content to full width when sidebar is hidden */
    .lg\:col-span-2 {
        grid-column: span 1 / span 1 !important;
        width: 100% !important;
    }
}

/* Show Key Data Elements sidebar on larger screens */
@media (min-width: 1024px) {
    .hidden.lg\:block {
        display: block !important;
    }
    
    .key-data-sidebar {
        display: block !important;
    }
}