/* ===== Design tokens ===== */
:root {
  --bg: #0f0f10;
  --panel: #141416;
  --muted: #bfbfc6;
  --accent: #00E5FF;
  --heading: #FFD54F;
  --card-shadow: 0 8px 24px rgba(0,0,0,0.55);
  --radius: 12px;
  --gap: 18px;
  --container: 1100px;
  --text: #eaeaea;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Inter, sans-serif;
  /* This creates the professional "Deep Space" look */
  background: radial-gradient(circle at top right, #1a1c2c 0%, #0d0f1a 100%);
  background-attachment: fixed;
  color: #eaeaea;
  overflow-y: auto; /* This allows the scrollbar to appear only when needed */
}

/* App shell */
.app-shell {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--card-shadow);
  flex-shrink: 0;
}
.sidebar-inner { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.profile { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.avatar {
  width: 44px; height: 44px; border-radius: 10px; background: #111;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 18px;
  border: 1px solid rgba(151,82,235,0.08);
}
.profile-name { font-weight: 700; font-size: 14px; }
.profile-role { font-size: 12px; color: var(--muted); }

/* Nav */
.nav ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border-radius: 8px; text-decoration: none;
  color: var(--muted); font-weight: 600;
  transition: all .15s ease;
}
.nav-link i { width: 20px; text-align: center; }
.nav-link:hover {
  background: rgba(0, 229, 255, 0.12);
  color: var(--accent);
}
.nav-link.active {
  background: linear-gradient(90deg, rgba(0,229,255,0.2), rgba(0,229,255,0.05));
  color: var(--accent);
}
.nav-link.active i { color: var(--accent); }

/* Sidebar footer */
.sidebar-footer { display: flex; flex-direction: column; gap: 8px; }
.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid rgba(255,255,255,0.03);
  padding: 8px; border-radius: 8px;
  font-weight: 600; cursor: pointer;
}

/* Topbar */
.container { max-width: var(--container); width: 100%; padding: 0 6px; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 6px 0; }
.topbar-left h1 { font-size: 20px; margin-bottom: 6px; font-weight: 800; color: var(--heading); }
.subhead { color: var(--muted); font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.search {
  display: flex; align-items: center; background: #0e0e0f;
  padding: 8px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.02);
}
.search input {
  border: 0; background: transparent; color: var(--text);
  outline: none; padding-left: 8px; width: 220px;
}
.btn-primary {
  background: var(--accent); color: #0f0f10;
  padding: 9px 14px; border-radius: 10px;
  border: 0; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,229,255,0.2);
  transition: 0.3s;
}
.btn-primary:hover {
  background: #FFD54F;
  color: #0f0f10;
  box-shadow: 0 0 16px rgba(255,213,79,0.4);
}
.btn-secondary {
  background: transparent; border: 1px solid rgba(255,255,255,0.03);
  color: var(--text); padding: 8px 12px;
  border-radius: 10px; cursor: pointer; transition: 0.3s;
}
.btn-secondary:hover { border-color: #FFD54F; color: #FFD54F; }

/* Grid */
.grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--gap); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--gap); }

/* Cards */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  border-radius: 12px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 200, 255, 0.25);
  border: 1px solid rgba(0, 200, 255, 0.3);
}
.title, .card-title { font-weight: 700; color: var(--heading); }

/* Upload card */
.upload-card textarea {
  width: 100%; min-height: 84px; padding: 10px;
  border-radius: 10px; background: #0b0b0b;
  border: 1px solid rgba(255,255,255,0.02);
  color: var(--text); resize: none;
  margin-top:8px;
}
.row { display: flex; gap: 12px; align-items: flex-start; }
.image-upload {
  flex: 1; border: 1px dashed rgba(255,255,255,0.03);
  padding: 12px; border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; color: var(--muted); min-width: 150px;
  transition: 0.3s;
}
.image-upload:hover {
  border-color: var(--heading);
  color: var(--heading);
  transform: scale(1.02);
}
.post-meta { min-width: 140px; display: flex; flex-direction: column; gap: 12px; color: var(--muted);margin-bottom: 15px;
    align-items: center; }
.meta-item { display: flex; gap: 8px; align-items: center; font-size: 13px; }

/* Actions */
.card-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* Scheduled posts */
.scheduled-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.scheduled-list li {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}
.platform {
  width: 48px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: white;
}
/* === PLATFORM BRAND COLORS (DASHBOARD TAGS) === */
.platform.fb { background: #4267B2; }        /* Facebook Blue */
.platform.yt { background: #FF0000; }        /* YouTube Red */
.platform.li { background: #0A66C2; }        /* LinkedIn Blue */
.platform.pt { background: #E60023; }        /* Pinterest Red */
.platform.ig { background: #C13584; }        /* Instagram Pink/Purple */
/* ============================================== */
.scheduled-list .meta strong { display: block; font-size: 14px; }
.scheduled-list .muted { font-size: 12px; }
/* Insights */
.compact-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.stat {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  padding: 10px; border-radius: 8px; text-align: center;
}
.stat-value {
  font-weight: 800;
  font-size: 20px;
  color: #4DD0E1;
  text-shadow: 0 0 6px rgba(77,208,225,0.4);
}

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.04);
  border-radius: 10px; border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.06); }

/* === Chart Canvas Visibility Fix === */
canvas {
  width: 100% !important;
  height: 300px !important;
  display: block !important;
}
.chart-card, #engagement-card {
  position: relative !important;
  height: auto !important;
  min-height: 320px !important;
}


/* Responsive */
@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .app-shell { padding: 12px; }
}
/* FINAL REFINED VISIBILITY FIX FOR DASHBOARD */

/* 1. Ensure the app-shell is always a flexible, visible container */
.app-shell {
    /* Use flex to maintain layout, even if the screen is narrow */
    display: flex !important; 
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Force the main content area to be visible and correctly positioned. */
.app-shell main.main {
    /* The most aggressive way to override display: none */
    display: block !important; 
    
    /* Crucial: Take up all available space. */
    flex-grow: 1 !important;
    
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Ensure no vertical height collapse */
    min-height: 100px !important; 
}

/* 3. Force the main section and grid to display block (or flex) and be visible */
#dashboard-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.grid {
    display: grid !important; /* Forces your two-column layout */
    visibility: visible !important;
    opacity: 1 !important;
}
.card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important; /* Prevents height collapse */
}
/* 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;
}
/* === Dashboard Conflict Overrides === */

/* 1. Force dashboard cards/charts visible */
#dashboard-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;
}

/* 2. Fix spacing under the topbar */
#dashboard-section {
  margin-top: 24px !important;
  display: block !important;
}

/* 3. Smooth, non-jumpy hover effect */
#dashboard-section .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important;
}
/* === Dashboard Topbar Alignment Fixes === */
#dashboard-section .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem !important; /* adds breathing room left/right */
  margin-bottom: 1.2rem !important;  /* spacing between topbar and cards */
  background: var(--panel, #1e1e1e); /* keep consistent with cards */
  border-radius: var(--radius, 10px);
  box-shadow: var(--card-shadow, 0 4px 12px rgba(0,0,0,0.4));
}

/* Ensure left + right content don't touch edges */
#dashboard-section .topbar-left {
  margin-left: 0.2rem !important;
}

#dashboard-section .topbar-right {
  margin-right: 0.2rem !important;
}
/* === FORCE Topbar Fixes for Dashboard === */
#dashboard-section .topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important; /* vertical centering */
  padding: 0.8rem 1.5rem !important; /* breathing space left/right */
  margin-bottom: 1.2rem !important; /* gap under topbar */
  background: var(--panel, #1e1e1e) !important;
  border-radius: var(--radius, 10px) !important;
  box-shadow: var(--card-shadow, 0 4px 12px rgba(0,0,0,0.4)) !important;
}

#dashboard-section .topbar-left {
  display: flex !important;
  align-items: center !important; /* vertically align title text */
  margin-left: 0.5rem !important;
}

#dashboard-section .topbar-right {
  display: flex !important;
  align-items: center !important; /* vertically align button */
  margin-right: 0.5rem !important;
}
/* === Dashboard Topbar Spacing & Alignment Fix === */
main .topbar.container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important; /* vertical centering */
  padding: 0.8rem 2rem !important; /* breathing room left + right */
  margin-bottom: 1.5rem !important; /* gap below topbar */
  background: var(--panel, #1e1e1e) !important;
  border-radius: var(--radius, 10px) !important;
  box-shadow: var(--card-shadow, 0 4px 12px rgba(0,0,0,0.4)) !important;
}

/* fine-tune left + right groups */
main .topbar-left {
  display: flex !important;
  flex-direction: column !important; /* title above subhead */
  justify-content: center !important;
  margin-left: 0 !important; /* keep clean spacing */
}

main .topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important; /* space between search + button */
  margin-right: 0 !important;
} 
/* === POST META PLATFORM ICON STYLES === */

/* Styling for smaller platform tags inside the post meta/card */
.platform-small {
    width: 32px; /* Smaller width */
    height: 24px; /* Smaller height */
    font-size: 10px;
    padding: 0;
    margin-right: 4px;
    border-radius: 4px; /* Slightly smaller radius */
}

/* Ensure the meta-item can hold the small tags and align them */
.meta-item.platform-preview {
    display: flex;
    align-items: center;
    color: var(--muted); /* Use the muted color for the text label */
    gap: 4px; /* Space between tags */
    margin-top: 6px;
}

/* Style for the "Publishing to:" text label */
.meta-item.platform-preview span:first-child {
    margin-right: 4px; 
}
/* ... [Existing card styles, e.g., .card, .card-head, .card-title] ... */

/* === AI COACH (cleaner look, no avatar) === */
.ai-coach-body {
  background: linear-gradient(145deg, #141416, #1b1c1f);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 16px 20px;
  position: relative;
}
.ai-coach-body p {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}
.coach-typing {
  margin-top: 8px;
  height: 5px;
  width: 30px;
  border-radius: 3px;
  background: var(--accent);
  animation: typing 1.2s infinite ease-in-out;
  opacity: 0.6;
}
@keyframes typing {
  0%,100% { width: 30px; opacity: 0.4; }
  50% { width: 60px; opacity: 1; }
}

/* === RECENT ACTIVITY (softer hover effect) === */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.activity-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  padding: 10px 14px;
  border-radius: 10px;
  transition: background 0.3s ease;
}
.activity-list li:hover {
  background: rgba(255,255,255,0.08);
}
.activity-list i {
  font-size: 1.1rem;
  opacity: 0.9;
}
.success { color: #4CAF50; }
.accent { color: #00E5FF; }
.warning { color: #FFD54F; }
.info { color: #7C4DFF; }

/* ======================================================= */
/* NEW POST MODAL STYLES (MATCHING DARK THEME) */
/* ======================================================= */

.modal {
    /* OVERLAY SETUP: Covers the entire screen */
    position: fixed;
    z-index: 2000; /* Ensure it's above everything else */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    
    /* CENTERING & BACKGROUND */
    background-color: rgba(0, 0, 0, 0.7); /* Darker, more opaque background */
    display: flex; /* Critical for centering */
    align-items: center; 
    justify-content: center; 
}

.modal-content {
    /* CONTENT CONTAINER: Uses your --panel and dark shadow */
    background-color: var(--panel); 
    color: var(--text);
    padding: 24px; /* Slightly more padding */
    border: 1px solid rgba(255,255,255,0.05); /* Subtle border */
    width: 90%; 
    max-width: 550px; /* Increased max width */
    border-radius: var(--radius); 
    box-shadow: var(--card-shadow); 
    position: relative; 
    animation: fadeIn 0.3s ease-out; /* Add a simple animation */
}

/* Modal specific typography */
.modal-content h2 {
    color: var(--heading); /* Use heading color for the title */
    font-size: 22px;
    margin-bottom: 15px;
}
.modal-content p {
    color: var(--muted);
    margin-bottom: 15px;
}

/* Style for the text area and label to match your upload-card style */
.modal-content textarea {
    width: 100%; 
    min-height: 120px; 
    padding: 10px;
    border-radius: 10px; 
    background: #0b0b0b; /* Match the dark input/textarea background */
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--text); 
    resize: vertical;
    margin-top: 8px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.modal-content textarea:focus {
    border-color: var(--accent);
}

.modal-content label {
    font-size: 14px;
    color: var(--muted);
    font-weight: 600;
    display: block; /* Ensure label is on its own line */
}

/* Modal Footer/Actions */
.modal-content .modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.modal-content .modal-footer-actions button {
    /* Inherits your existing .btn-primary and .btn-secondary styles */
}

.close-btn {
    /* CLOSE BUTTON STYLES */
    color: var(--muted);
    font-size: 32px;
    font-weight: 300; /* Lighter font weight looks better on dark themes */
    position: absolute; 
    top: 10px;
    right: 20px;
    line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--heading);
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
/* -----------------------------------------------
   INSTAGRAM FEED FIX — FORCE GRID OVERRIDE
   ----------------------------------------------- */
#instagram-feed-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 15px !important;
  padding: 10px !important;
}

#instagram-feed-container .instagram-post-card {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  display: block !important;
  text-decoration: none !important;
}

#instagram-feed-container .instagram-post-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}

/* White overlay with hearts/comments */
#instagram-feed-container .instagram-post-card::after {
  content: "❤️  💬";
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #333;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

#instagram-feed-container .instagram-post-card:hover::after {
  opacity: 1;
}

#instagram-feed-container .instagram-post-card:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}
/* ------------------------------------------------
   FIX: Prevent Caption Text Overlap with Hover Icons
   ------------------------------------------------ */
#instagram-feed-container .post-caption-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#instagram-feed-container .instagram-post-card:hover .post-caption-overlay {
  opacity: 0; /* stays hidden even on hover */
  pointer-events: none;
}
/* Instagram overlay with white tint + like/comment counts */
.instagram-post-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.instagram-post-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.instagram-post-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.instagram-post-card:hover .overlay {
  opacity: 1;
}

.overlay-content {
  display: flex;
  gap: 20px;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}

.overlay-content i {
  margin-right: 6px;
  color: #000;
}
@media (min-width: 900px) {
  #instagram-feed-container {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
/* Custom Scrollbar for Chrome/Safari */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0d0f1a;
}
::-webkit-scrollbar-thumb {
    background: #35cafc; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #7D3CF6;
}
/* Ensure the column stacks elements properly with a gap */
.side-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* This forces space between the chart and the feed */
}

/* Fix the chart container to prevent it from being "cut off" */
.side-col .card {
    margin-bottom: 0; /* Remove any old margins that might cause shifts */
    position: relative; 
    z-index: 1;
}

/* Ensure the Feed is below and doesn't float up */
#instagram-feed-container {
    clear: both;
    margin-top: 10px;
}
/* Sidebar Home Button */
.sidebar-brand {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.back-home-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

/* Sidebar Home Button - Clean & Professional */
.back-home-link {
    display: inline-flex !important; /* Prevents it from stretching full width */
    align-items: center;
    gap: 10px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 10px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 30px !important; /* THIS IS THE GAP you need */
    margin-left: 20px !important;   /* Aligns it with the profile text */
    margin-top: 20px !important;    /* Gap from the very top of screen */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-home-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-2px); /* Slight lift on hover */
}
/* Tip styling inside your specific card */
.ai-tip-item {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

.ai-tip-item strong {
    color: var(--accent); /* Neon Blue */
    display: block;
    margin-bottom: 4px;
}
/* Ensure the activity item allows the button to sit on the far right */
.activity-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Style the trash button */
.delete-activity-btn {
    background: none;
    border: none;
    color: #ff5252; /* Making it red by default so you can find it */
    opacity: 0.6;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

.delete-activity-btn:hover {
    opacity: 1;
    transform: scale(1.2);
}

.delete-activity-btn i {
    font-size: 14px;
}
.delete-activity-btn i {
    display: inline-block !important;
    visibility: visible !important;
    color:#FFFFFF !important; /* Forces it to be red */
    min-width: 14px;
    min-height: 14px;
}
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.modal-content {
    background: var(--panel); padding: 30px; border-radius: 12px; width: 400px;
    border: 1px solid rgba(255,255,255,0.1);
}
.modal-body label { display: block; margin: 15px 0 5px; color: var(--accent); font-size: 0.8rem; }
.modal-body textarea { width: 100%; height: 100px; background: rgba(0,0,0,0.2); color: white; border: 1px solid #333; border-radius: 6px; padding: 10px; }
/* ===== MOBILE RESPONSIVE FIX (2026 SaaS Standard) ===== */
@media (max-width: 768px) {
    /* 1. Stack the sidebar and main content vertically */
    .app-shell {
        flex-direction: column;
        padding: 10px;
        gap: 15px;
    }

    /* 2. Make the sidebar full width and adjust inner padding */
    .sidebar {
        width: 100%;
        position: relative; /* Removes fixed positioning if any */
        top: 0;
    }

    .sidebar-inner {
        padding: 15px;
    }

    /* 3. Adjust the profile layout for mobile */
    .profile {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    /* 4. Ensure the main content takes up 100% width */
    .main-content {
        width: 100%;
    }

    /* 5. Make the Instagram Preview Feed fit small screens */
    #instagram-feed-container {
        display: flex;
        flex-wrap: wrap; /* Allows thumbnails to wrap to the next line */
        justify-content: center;
        gap: 10px;
    }

    /* Adjust thumbnail size so 2-3 fit per row on mobile */
    .ig-post-pill {
        width: calc(50% - 10px); /* 2 posts per row */
        max-width: 150px;
    }
}
/* Empty State Styling */
.placeholder-content i, .empty-plan-state i {
    display: block;
    margin-bottom: 10px;
}

.empty-plan-state {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.empty-plan-state:hover {
    border-color: var(--accent) !important;
    background: rgba(0, 229, 255, 0.05);
}

.btn-primary {
    cursor: pointer;
    /* ensure your existing btn-primary styles are here */
}
/* This targets the specific preview box in your mockup */
.social-mockup div[style*="aspect-ratio"] {
    border: 2px solid #00E5FF !important; /* Force Cyan Border */
    background: #000; /* Dark background so videos don't flash white */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- THE PERFECT DASHED BORDER --- */
/* --- THE CLEAN DASHED CYAN BORDER (FIXED) --- */
/* This targets the outer container */
.instagram-post-card, .real-post {
    border: 2px dashed #00E5FF !important; /* Only one border rule here */
    border-radius: 12px !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1;
    background: #000;
    position: relative;
    display: flex;
    padding: 0 !important; /* Prevents the 'solid block' look */
}

/* This ensures the inner pill doesn't have its own border */
.ig-post-pill {
    width: 100%;
    height: 100%;
    position: relative;
    border: none !important; /* Removes the second solid border */
}

/* Ensure media fills the dashed frame */
.main-feed-media, 
.instagram-post-card img, 
.instagram-post-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none !important; /* Prevents 3rd border on the image itself */
}
/* Platform Toggle Styling */
.toggle-platform {
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.toggle-platform:hover {
    transform: translateY(-2px);
}

.toggle-platform.active {
    border-color: var(--accent);
}

/* Specific colors for active states */
.platform.fb.active { background: #1877F2 !important; color: white; }
.platform.ig.active { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; color: white; }
.upload-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 400px; /* Ensures the card is tall enough */
}

#queuePostBtn {
    margin-top: auto !important; /* Pushes button to the very bottom of the card */
    z-index: 10;
}
/* Success State for the Button */
/* 2026 High-Visibility Success State */
#queuePostBtn.success {
    background: linear-gradient(135deg, #00FF88 0%, #00AD5F 100%) !important;
    border-color: #00FF88 !important;
    color: #000000 !important; /* Black text pops harder on neon */
    font-weight: 800;
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
    /* The "Glow" effect */
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6), 
                inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
}

/* 2026 Micro-interaction: The "Pop" Animation */
@keyframes successPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); filter: brightness(1.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

.animate-success {
    animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Force brand colors when .active is present */
.toggle-platform.active[data-platform="facebook"] { background: #1877F2 !important; opacity: 1; filter: grayscale(0); }
.toggle-platform.active[data-platform="instagram"] { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important; opacity: 1; filter: grayscale(0); }
/* --- CONSOLIDATED PLATFORM TOGGLES --- */
/* --- CONSOLIDATED PLATFORM TOGGLES --- */
.toggle-platform {
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.3; /* Dimmed by default */
    filter: grayscale(1);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-flex;
   display: inline-flex; /* Use inline-flex for better icon alignment */
    align-items: center;
    gap: 5px;            /* Gap between the icon and the text "FB/IG" */
}

/* Base Active State */
.toggle-platform.active {
    opacity: 1 !important;
    filter: grayscale(0) !important;
    transform: scale(1.05);
}

/* Brand Specific Active Colors */
.toggle-platform.active[data-platform="facebook"] {
    background: #1877F2 !important;
    color: white !important;
}

.toggle-platform.active[data-platform="instagram"] {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
    color: white !important;
}
/* ==========================================================================
   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;
    }
}