/* 
 * Fix for Report View - Ensure Card View is completely hidden
 * This prevents the "Recent Contacts" cards section from appearing in the Report view
 */

/* When report view is visible, force hide card view */
#reportView:not([style*="display: none"]) ~ #cardView,
#reportView[style*="display: block"] ~ #cardView {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Ensure card view doesn't interfere when report view is active */
#cardView[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Make sure report view takes full space */
#reportView[style*="display: block"] {
    display: block !important;
    width: 100% !important;
}

/* Additional safeguard - hide cards container when report button is active */
.report-btn.active ~ * #cardView {
    display: none !important;
}

/* Fix for potential flex/grid conflicts */
.container {
    position: relative;
}

#cardView,
#reportView,
#tableView {
    position: relative;
    width: 100%;
}

/* Ensure only one view is shown at a time */
body:has(#reportView[style*="display: block"]) #cardView {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body:has(#cardView[style*="display: grid"]) #reportView {
    display: none !important;
}

body:has(#tableView[style*="display: block"]) #cardView,
body:has(#tableView[style*="display: block"]) #reportView {
    display: none !important;
}

/* Styling for View button in Report View */
.view-from-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.view-from-report-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.view-from-report-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.3);
}

.view-from-report-btn i {
    font-size: 12px;
}

/* Dark theme support for View button */
.theme-dark .view-from-report-btn {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.theme-dark .view-from-report-btn:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* ==========================================
   Report Details Two-Column Layout
   ========================================== */

/* Two-column container for details section */
.report-item-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 16px 0;
}

/* Left column - ONLY show border when inside report view */
.report-details-left {
    padding-left: 12px;
    padding-right: 20px;
    border-right: none; /* Removed default border */
}

/* Only show border inside actual report items */
#reportView .report-details-left,
.report-item .report-details-left {
    border-right: 1px solid #e2e8f0;
}

/* Right column - tighter label width for more content space */
.report-details-right {
    padding-left: 20px;
}

/* Individual field with separator line */
.report-field {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    align-items: start;
}

/* Right column fields - narrower label for more content space */
.report-details-right .report-field {
    grid-template-columns: 90px 1fr;
}

/* Remove bottom border from last field in each column */
.report-details-left .report-field:last-child,
.report-details-right .report-field:last-child {
    border-bottom: none;
}

/* Label styling within the new layout */
.report-field .report-label {
    font-weight: 600;
    color: #475569;
    font-size: 13px;
}

/* Value styling within the new layout */
.report-field .report-value {
    color: #1e293b;
    font-size: 14px;
    word-break: break-word;
}

/* Website link styling */
.report-field .report-value a {
    color: #3b82f6;
    text-decoration: none;
}

.report-field .report-value a:hover {
    text-decoration: underline;
}

/* Status badge in details */
.report-field .status-active-report {
    color: #10b981;
    font-weight: 600;
}

.report-field .status-inactive-report {
    color: #ef4444;
    font-weight: 600;
}

/* Responsive: Stack columns on smaller screens */
@media (max-width: 768px) {
    .report-item-details {
        grid-template-columns: 1fr;
    }
    
    .report-details-left {
        padding-left: 12px;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    
    #reportView .report-details-left,
    .report-item .report-details-left {
        border-right: none;
    }
    
    .report-details-right {
        padding-left: 12px;
    }
    
    .report-details-right .report-field {
        grid-template-columns: 100px 1fr;
    }
}

/* Dark theme support for new layout */
.theme-dark .report-details-left {
    border-right-color: #374151;
}

.theme-dark #reportView .report-details-left,
.theme-dark .report-item .report-details-left {
    border-right-color: #374151;
}

.theme-dark .report-field {
    border-bottom-color: #374151;
}

.theme-dark .report-field .report-label {
    color: #9ca3af;
}

.theme-dark .report-field .report-value {
    color: #e5e7eb;
}

.theme-dark .report-field .report-value a {
    color: #60a5fa;
}

/* ==========================================
   Card View - View Button (Upper Right)
   ========================================== */

/* Position the card as relative to allow absolute positioning of the button */
.business-card {
    position: relative;
}

/* View button in card - positioned upper right */
.card-view-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    z-index: 10;
}

.card-view-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.card-view-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.3);
}

.card-view-btn i {
    font-size: 12px;
}

/* Dark theme support for Card View button */
.theme-dark .card-view-btn {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.theme-dark .card-view-btn:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Adjust "New" badge position when View button is present */
.business-card .new-badge {
    top: 12px;
    left: 12px;
    right: auto;
}