/* Custom styles for Facebook Metrics Dashboard */

/* Dashboard Summary Cards - matching date-level card styling */
#summaryCards > div {
    @apply transition-all duration-200;
}

/* Special styling for total reach card (2nd card) - green theme */
#summaryCards > div:nth-child(2) {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
}

#summaryCards > div:nth-child(2):hover {
    @apply shadow-xl;
}

/* Date Group Styling with enhanced visual separation */
.date-group {
    @apply rounded-lg border overflow-hidden mb-2 transition-all duration-200;
    border-color: #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.date-group:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Weekly reach champion highlighting - pastel colors (no blue) */
.date-group.weekly-champion.champion-color-0 {
    background-color: #fef0f5 !important; /* Pastel pink */
}
.date-group.weekly-champion.champion-color-0 .date-header {
    background-color: #fdecf2 !important;
}

.date-group.weekly-champion.champion-color-1 {
    background-color: #f5fdf0 !important; /* Pastel green */
}
.date-group.weekly-champion.champion-color-1 .date-header {
    background-color: #f3fbee !important;
}

.date-group.weekly-champion.champion-color-2 {
    background-color: #fefcf0 !important; /* Pastel yellow */
}
.date-group.weekly-champion.champion-color-2 .date-header {
    background-color: #fdfaec !important;
}

.date-group.weekly-champion.champion-color-3 {
    background-color: #f5f0fe !important; /* Pastel purple */
}
.date-group.weekly-champion.champion-color-3 .date-header {
    background-color: #f2ecfd !important;
}

.date-group.weekly-champion.champion-color-4 {
    background-color: #f0fef8 !important; /* Pastel teal */
}
.date-group.weekly-champion.champion-color-4 .date-header {
    background-color: #ecfdf5 !important;
}

/* Alternating backgrounds with better contrast */
.date-group:nth-child(odd) {
    background: #ffffff;
}

.date-group:nth-child(even) {
    background: linear-gradient(to right, #f9fafb 0%, #f7fafc 100%);
}

/* Weekend highlighting */
.date-group[data-weekend="true"] .date-header {
    background: linear-gradient(to right, #fef3c7 0%, #fef9e7 100%);
}

.date-header {
    @apply px-6 py-4 border-b cursor-pointer transition-all duration-200 relative;
    background: #f8fafc;
    border-bottom-color: #e5e7eb;
}

/* Add subtle left border accent */
.date-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e5e7eb;
    transition: all 0.2s ease;
}

/* Different accent colors for different days */
.date-group:nth-child(7n+1) .date-header::before { background: #f87171; }
.date-group:nth-child(7n+2) .date-header::before { background: #fb923c; }
.date-group:nth-child(7n+3) .date-header::before { background: #fbbf24; }
.date-group:nth-child(7n+4) .date-header::before { background: #34d399; }
.date-group:nth-child(7n+5) .date-header::before { background: #60a5fa; }
.date-group:nth-child(7n+6) .date-header::before { background: #a78bfa; }
.date-group:nth-child(7n+7) .date-header::before { background: #f472b6; }

.date-header:hover {
    @apply bg-gray-100;
    transform: translateX(2px);
}

.date-content {
    @apply p-4;
}

.date-header.expanded {
    @apply bg-blue-50 border-b-2 border-blue-200;
}

.date-header.expanded::before {
    width: 6px;
    background: #3b82f6 !important;
}

/* Post Item Styling - 2-level collapse */
/* Styles moved to dashboard-posts.css */

/* Collapsed post shows inline metrics */
.post-item.collapsed .post-content {
    @apply hidden;
}

.post-item.collapsed .post-title {
    @apply line-clamp-2;
}

.post-item.collapsed .post-metrics-inline {
    @apply flex;
}

/* Expanded post hides inline metrics and shows full content */
.post-item.expanded .post-content {
    @apply block;
}

.post-item.expanded .post-metrics-inline {
    @apply hidden;
}

.post-item.expanded .chevron {
    @apply rotate-180;
}

.post-content {
    @apply border-t border-gray-200;
}

.post-content-inner {
    @apply px-4 py-4 bg-gray-50;
}

/* Expanded post content has better contrast */
.post-item.expanded .post-content-inner {
    @apply bg-white border-t-2 border-gray-300;
}

/* Post title styling */
.post-title {
    @apply text-gray-900 font-medium text-sm;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* Post metrics inline (for collapsed view) */
.post-metrics-inline {
    @apply flex items-center gap-3 text-sm;
}

/* Hide post content by default */
.post-content.hidden {
    display: none !important;
}

/* Metric Icons */
.metric-icon {
    @apply w-6 h-6 rounded-full inline-flex items-center justify-center text-xs font-bold;
}

.reach-icon {
    @apply bg-green-100 text-green-600;
}

.like-icon {
    @apply bg-pink-100 text-pink-600;
}

.share-icon {
    @apply bg-green-100 text-green-600;
}

.comment-icon {
    @apply bg-orange-100 text-orange-600;
}

/* Chevron Animation */
.chevron {
    @apply transition-transform duration-300;
}

.expanded .chevron {
    @apply rotate-180;
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading-skeleton {
    @apply bg-gray-200 rounded animate-pulse;
}

/* Pagination */
.page-number {
    @apply px-3 py-1 border rounded-md hover:bg-gray-50 cursor-pointer transition-colors;
}

.page-number.active {
    @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
}

/* Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Full content text */
.full-content {
    @apply bg-white p-4 rounded-md mt-4 whitespace-pre-wrap break-words max-h-96 overflow-y-auto custom-scrollbar;
}

/* Date-level summary cards */
.date-content .grid {
    margin-top: 0.5rem;
    min-width: max-content; /* Prevent wrapping */
}

.date-content .grid > div {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 120px; /* Minimum width to ensure readability */
}

.date-content .grid > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Ensure cards stay in one line on smaller screens */
@media (max-width: 1024px) {
    .date-content .grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .date-content .grid > div {
        flex-shrink: 0;
    }
}

/* Post sorting buttons */
.sort-option {
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.sort-option:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.sort-option.active {
    color: #2563eb !important;
    font-weight: 600;
    background-color: rgba(59, 130, 246, 0.1);
}