/* Note: This assumes dashboard.css is linked first for base styles (var(--card-shadow), .card, .container, etc.) */
#analytics-section {
    display: flex; /* or display: grid; */
    flex-direction: column; 
    gap: var(--gap, 20px); /* This adds the space between all direct children */
}
/* Large Metrics Card */
.large-metrics-card {
    padding: 20px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    margin-top: 10px;
}

.big-stat {
    padding: 18px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
    border: 1px solid rgba(255,255,255,0.04);
    text-align: center;
    transition: transform 0.2s ease;
}

.big-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
}

.big-stat .stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--accent); /* #00E5FF */
}

.green-up {
    color: #4CAF50; /* A green color for positive change */
    margin-left: 5px;
}

/* Comparison Section */
#comparison-card {
    /* Sets a maximum height for the entire card */
    max-height: 450px; 
    /* Ensures content doesn't overflow if it exceeds max-height */
    overflow: hidden; 
}

.comparison-col {
    /* Makes the columns take up all available vertical space in the grid */
    height: 100%;
    /* Sets a constrained height for the wrapper inside the column */
    max-height: 380px; 
    display: flex; /* Helps align content within the column */
    flex-direction: column; 
}

.comparison-col canvas {
    /* Essential: makes the canvas fill the constrained height of its parent */
    flex-grow: 1; 
    height: 100%; 
}
.comparison-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--gap);
    padding-top: 10px;
}

.comparison-col h4 {
    font-size: 1.1rem;
    color: var(--heading);
    margin-bottom: 15px;
}

.comparison-key {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.platform-key::before {
    content: '•';
    display: inline-block;
    margin-right: 6px;
    font-size: 1.5em;
    line-height: 0.5;
}

.fb-key::before { color: #4267B2; }
.ig-key::before { color: #C13584; }
.li-key::before { color: #0A66C2; }

/* Responsive Adjustments */
@media (max-width: 900px) {
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .comparison-grid {
        grid-template-columns: 1fr; /* Stack the comparison charts */
    }
}
/* FINAL CSS OVERRIDE for Dashboard and Analytics 
   This ensures the main layout elements are visible and correctly aligned,
   overriding the 'display: none' or bad layout property from style.css.
*/

/* 1. Ensure the app shell is visible and uses the correct layout 
      (sidebar on left, main content on right). */
.app-shell {
    display: flex !important;
    visibility: visible !important;
}

/* 2. Ensure the main content area is visible and takes up the remaining space. */
.app-shell main.main {
    display: block !important;
    flex-grow: 1 !important;
    visibility: visible !important;
}

/* 3. Ensure the dashboard section is visible and allows its children to flow. */
#dashboard-section,
#analytics-section {
    display: block !important; 
    visibility: visible !important;
}

/* 4. Ensure your main column and side column are visible. */
.col {
    visibility: visible !important;
}
/* FINAL CSS OVERRIDE: This fix forces content to display correctly */

/* 1. Ensure the app shell (which wraps the sidebar and main content) is visible 
       AND uses the correct layout for the whole page. */
.app-shell {
    /* Use flex, as this is the standard way to position a sidebar next to content */
    display: flex !important;
    visibility: visible !important;
}

/* 2. Ensure the main content area is visible, takes up the remaining space, 
       AND is not incorrectly forced into a horizontal flex alignment. */
.app-shell main.main {
    /* Reverts the main area to its normal block flow for vertical content */
    display: block !important;
    /* Allows the main area to fill the width next to the fixed sidebar */
    flex-grow: 1 !important; 
    visibility: visible !important;
}
/* FIX 1: Add a clean margin below the top header bar (topbar) 
   This creates the required vertical gap above the first card. */
.topbar {
    margin-bottom: var(--gap, 18px) !important; 
    align-items: center !important; /* Re-affirm vertical centering */
    padding: 10px 0 !important;
}

/* Ensure the main area padding is clean so the topbar margin can work */
main.main {
    /* If your design requires some left/right padding inside main, adjust here */
    padding: 0 var(--gap, 18px) !important; /* Only horizontal padding, let the topbar margin handle vertical separation */
    display: block !important;
    flex-grow: 1 !important;
}

/* Ensure the content container (section) below starts right after the margin */
.section {
    padding-top: 0 !important; 
}
/* FIX 2: Override the aggressive hover effect to make it subtle */
.card:hover {
    /* Reduce the lift from 4px to 1px (or even 0 if you want no movement) */
    transform: translateY(-1px) !important; 
    
    /* Reduce the shadow to make it less dramatic, or keep the original shadow */
    box-shadow: var(--card-shadow) !important; 
    
    /* Keep the border change, but make sure the transition is smooth */
    transition: all 0.2s ease-out !important;
}
/* === Subtle Hover Effect for Analytics Cards === */
#analytics-section .card:hover,
#analytics-section .big-stat:hover {
    transform: translateY(-2px) !important; /* gentle lift */
    box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important; /* softer shadow */
    transition: all 0.2s ease-out !important; /* smooth animation */
}
/* === Analytics Card Hover + Bottom Spacing Fix === */

/* Gentle hover effect */
#analytics-section .card:hover,
#analytics-section .big-stat:hover {
  transform: translateY(-1px) !important;  /* tiny lift only */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important; /* softer */
  transition: all 0.2s ease-out !important;
}

/* Ensure bottom cards have breathing space */
#analytics-section {
  padding-bottom: 2rem !important; /* pushes content up from page edge */
}
/* === Subtle Hover Effect for Analytics (identical to Dashboard) === */
#analytics-section .card {
  opacity: 1 !important;
  transform: none !important;
  display: block !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  box-shadow: var(--card-shadow) !important;
  padding: 1.2rem !important;
  border-radius: var(--radius) !important;
  transition: all 0.25s ease-out !important;
}

#analytics-section {
  margin-top: 24px !important;
  padding-bottom: 2rem !important; /* breathing room at bottom */
  display: block !important;
}

#analytics-section .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important;
}
/* === Consistent Card Spacing for Dashboard & Analytics === */
#dashboard-section .card,
#analytics-section .card {
  margin-bottom: 24px !important; /* equal spacing between cards */
}

#dashboard-section,
#analytics-section {
  padding-bottom: 2rem !important; /* breathing room at bottom of page */
}
/* ==========================================================================
   MOBILE TOUCH OPTIMIZATION GATEWAY
   ========================================================================== */
@media (max-width: 768px) {
    /* Prevent the layout from collapsing on narrow screens */
    .dashboard-layout {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        gap: 16px !important;
    }

    /* Expand button touch zones to meet standard accessibility guidelines (minimum 44px) */
    button, 
    .instagram-post-card,
    .nav-links a {
        min-height: 44px !important;
        padding: 12px !important;
    }

    /* Make the calendar grid easily scrollable on mobile screens */
    .calendar-grid {
        overflow-x: auto !important;
        display: block !important;
        white-space: nowrap !important;
    }
}