/* Global Styles */
:root {
    --black: #000000;
    --dark-gray: #111111;
    --medium-gray: #222222;
    --light-gray: #333333;
    --darker-gray: #0a0a0a;
    --white: #FFFFFF;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-color: #FFFFFF;
    --border-color: rgba(255, 255, 255, 0.1);
    --hover-color: rgba(255, 255, 255, 0.15);
    --card-bg: rgba(17, 17, 17, 0.8);
    --gradient-dark: linear-gradient(135deg, #111111, #000000);
    --gradient-light: linear-gradient(135deg, #333333, #222222);
    --chrome-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.4);
    --chrome-highlight: rgba(255, 255, 255, 0.1);
    --particle-color: rgba(255, 255, 255, 0.1);
    --particle-glow: rgba(255, 255, 255, 0.2);
    --fluid-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    --border-radius-lg: 16px;
    
    /* Added missing variable */
    --background-elevated: var(--medium-gray); /* #222222 */
    
    /* Define other used variables if missing */
    --bg-primary: #0D0D0D;
    --bg-secondary: #1A1A1A;
    --accent-light: rgba(255, 255, 255, 0.1);
    --accent-hover: rgba(255, 255, 255, 0.2);
    --highlight: #7E6BC4;
    --success: #4CAF50;
    --green-accent: #4CAF50;
    --red-accent: #FF5252;
    --warning: #FFC107;
    --danger: #FF5252;
    --border-radius-md: 8px;
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
    --background-hover: var(--accent-light); /* Assuming hover background is accent-light */
    --primary: #7E6BC4; /* Assuming highlight is primary */

    /* Variables derived from others (check if needed) */
    /* --color-primary-light: rgba(126, 107, 196, 0.1); ? */
    /* --color-secondary: #2A2A2A; ? */
    /* --color-primary: #7E6BC4; ? */

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--darker-gray);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Navbar Styles */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.logo a {
    text-decoration: none;
    color: var(--white);
}

.logo a:hover {
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: var(--gradient-primary);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:hover {
    color: var(--white);
}

.auth-buttons {
    display: flex;
    gap: 1rem;
}

.auth-buttons button {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
}

.login-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--white);
}

.login-btn:hover {
    background: var(--hover-color);
}

.register-btn {
    background: var(--white);
    color: var(--black);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.register-btn:hover {
    background: var(--white);
    color: var(--black);
}

.auth-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Hero Section */
.hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    background: var(--black);
    position: relative;
    overflow: hidden;
    margin-top: 80px;
}

.hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--gradient-dark);
    opacity: 0.3;
}

.hero-content {
    max-width: 800px;
    text-align: center;
    z-index: 2;
    position: relative;
    color: var(--white);
}

.tech-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--white);
    margin-bottom: 2rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.cta-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.cta-button {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
    color: var(--black);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.tech-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Features Section */
.features {
    padding: 8rem 5%;
    background: var(--black);
    position: relative;
}

.features h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.6));
    padding: 2rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: var(--card-shadow);
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--chrome-highlight);
    box-shadow: var(--hover-shadow);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feature-icon i {
    font-size: 1.5rem;
    color: var(--white);
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--white);
    position: relative;
    z-index: 1;
}

.feature-card p {
    color: var(--white);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Reviews Section */
.reviews {
    padding: 8rem 5%;
    background: var(--dark-gray);
    position: relative;
    overflow: hidden;
}

.reviews h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.review-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.review-card {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

.review-card:hover {
    transform: translateY(-10px);
    border-color: var(--chrome-highlight);
    box-shadow: var(--hover-shadow);
}

.stars {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.review-card p {
    font-style: italic;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: var(--white);
}

.reviewer {
    margin-top: 1.5rem;
    color: var(--white);
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Pricing Section */
.pricing {
    padding: 8rem 5%;
    background: var(--black);
    position: relative;
}

.pricing h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.pricing p {
    text-align: center;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.1rem;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.pricing-card {
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.6));
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out; /* Ensure smooth transitions */
}

.pricing-card.featured {
    background: linear-gradient(135deg, rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    animation: pulse-glow 3.5s infinite alternate ease-in-out; /* Add static pulse animation */
}

@keyframes pulse-glow {
  from {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 5px rgba(126, 107, 196, 0.2); /* Base shadow + subtle highlight glow */
    border-color: rgba(255, 255, 255, 0.2);
  }
  to {
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35), 0 0 15px rgba(126, 107, 196, 0.4); /* Enhanced shadow + stronger highlight glow */
    border-color: rgba(255, 255, 255, 0.3);
  }
}

.pricing-card:hover {
    transform: translateY(-10px);
    border-color: var(--chrome-highlight);
    box-shadow: var(--hover-shadow);
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--white);
}

.pricing-card .description {
    color: var(--white);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    min-height: 48px;
}

.price {
    font-size: 3.5rem;
    margin: 1.5rem 0;
    font-weight: 800;
    color: var(--white);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

.price span {
    font-size: 1rem;
    color: var(--white);
    font-weight: 400;
}

.pricing-card ul {
    list-style: none;
    margin: 2rem 0;
    text-align: left;
    flex-grow: 1;
}

.pricing-card li {
    margin: 1rem 0;
    color: var(--white);
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.pricing-card li::before {
    content: '✓';
    color: var(--white);
    margin-right: 10px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.pricing-btn {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
    color: var(--black);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-top: auto;
}

.pricing-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.pricing-card.featured .pricing-btn {
    background: var(--text-color);
    color: var(--black);
}

/* FAQ Section */
.faq {
    padding: 8rem 5%;
    background: var(--dark-gray);
    position: relative;
}

.faq h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--card-bg);
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

.faq-item:hover {
    border-color: var(--chrome-highlight);
    box-shadow: var(--hover-shadow);
}

.faq-question {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question h3 {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--white);
}

.toggle {
    font-size: 1.5rem;
    color: var(--white);
}

.faq-item.active .toggle {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    color: var(--white);
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding-bottom: 1.5rem;
}

/* Contact Section */
.contact {
    padding: 8rem 5%;
    background: var(--black);
    position: relative;
}

.contact h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form {
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.6));
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    backdrop-filter: blur(5px);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.contact-form textarea {
    height: 150px;
    resize: vertical;
}

.submit-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
    color: var(--black);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.submit-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Footer */
.footer {
    background: var(--black);
    padding: 3rem 5% 1.5rem;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.footer-section h3 {
    margin-bottom: 1rem;
    color: var(--white);
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    display: inline-block;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: var(--white);
    bottom: -5px;
    left: 0;
    border-radius: 2px;
}

.footer-section p {
    color: var(--white);
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}

.footer-section a {
    display: block;
    color: var(--white);
    text-decoration: none;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.footer-section a:hover {
    color: var(--text-color);
    transform: translateX(3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    color: var(--white);
    font-size: 0.85rem;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 0.8rem;
}

.social-icons a {
    color: var(--white);
    font-size: 1.1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    color: var(--text-color);
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 1rem;
    }

    .nav-links {
        margin: 1rem 0;
    }

    .nav-links a {
        margin: 0 0.5rem;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 150px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-animation {
        width: 100%;
        height: 300px;
        margin-top: 2rem;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .pricing-card.featured {
        transform: none;
    }

    .footer {
        padding: 2rem 5% 1rem;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Update text colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--white);
}

p {
    color: var(--white);
}

/* Update graph styles */
.graph-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    transform: scale(1.2);
    filter: blur(0.5px);
}

.graph {
    width: 100%;
    height: 100%;
}

/* Grid Lines */
.grid-line {
    stroke: var(--white);
    stroke-width: 0.1;
    opacity: 0.15;
}

.grid-line.vertical {
    stroke-dasharray: 2;
    animation: fadeIn 2s ease-out forwards;
}

/* Graph Line */
.graph-line {
    fill: none;
    stroke: var(--white);
    stroke-width: 1.5;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

/* Glow Effect */
.graph-glow {
    fill: none;
    stroke: var(--white);
    stroke-width: 3;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    filter: blur(4px);
    opacity: 0.3;
}

/* Data Points */
.data-point {
    fill: var(--white);
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.data-point:nth-child(1) { animation-delay: 0.2s; }
.data-point:nth-child(2) { animation-delay: 1s; }
.data-point:nth-child(3) { animation-delay: 1.8s; }
.data-point:nth-child(4) { animation-delay: 2.6s; }

@keyframes drawLine {
    0% {
        stroke-dashoffset: 300;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Update floating elements */
.floating-element {
    background: var(--medium-gray);
    border: 1px solid var(--border-color);
}

/* Hero Animation Styles */
.hero-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    background: var(--dark-gray);
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color);
    box-shadow: 0 0 20px var(--particle-glow);
    pointer-events: none;
    transition: transform 0.3s ease-out;
}

.fluid-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fluid-gradient);
    filter: blur(40px);
    opacity: 0.5;
    pointer-events: none;
}

.light-effect {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--particle-glow) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Chrome Accents */
.chrome-accent {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.chrome-highlight {
    position: relative;
    overflow: hidden;
}

.chrome-highlight::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: chrome-shine 3s infinite;
}

@keyframes chrome-shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Use .active to match JavaScript */
.modal.active { 
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    opacity: 1;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 500px; /* Adjust max-width if needed */
    padding: 2rem; /* Adjust padding as needed */
    border-radius: var(--border-radius-lg); /* Use variable */
    text-align: left; /* Changed from center for better form layout */
    transform: translateY(-20px); /* Initial offset for animation */
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    background-color: var(--bg-secondary); /* Ensure background is set */
}



.close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--white);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.close-modal:hover {
    transform: rotate(90deg);
}

.modal h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
    color: var(--white);
}

.modal p {
    margin-bottom: 2rem;
    color: var(--text-secondary);
}

.waitlist-form {
    margin-bottom: 1.5rem;
}

.waitlist-form .form-group {
    margin-bottom: 1.5rem;
}

.waitlist-form input {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white);
    font-size: 1rem;
    backdrop-filter: blur(5px);
}

.waitlist-form input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.success-message {
    color: var(--white);
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.2), rgba(46, 125, 50, 0.1));
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.success-message i {
    font-size: 2rem;
    color: #4CAF50;
    margin-bottom: 1rem;
}

.success-message p {
    margin: 0;
    color: var(--white);
}

/* Auth Page Styles */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--black);
    position: relative;
    overflow: hidden;
}

/* Add sleek background elements */
.auth-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    z-index: 0;
}

/* Add chrome grid pattern */
.auth-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
}

/* Add floating chrome elements */
.auth-container .chrome-element {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.auth-container .chrome-element:nth-child(1) {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    opacity: 0.1;
    animation: float 15s ease-in-out infinite;
}

.auth-container .chrome-element:nth-child(2) {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    opacity: 0.08;
    animation: float 20s ease-in-out infinite reverse;
}

.auth-container .chrome-element:nth-child(3) {
    width: 150px;
    height: 150px;
    top: 30%;
    right: 10%;
    opacity: 0.06;
    animation: float 18s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(10px, 15px) rotate(5deg);
    }
    50% {
        transform: translate(-5px, 10px) rotate(-5deg);
    }
    75% {
        transform: translate(-15px, -5px) rotate(3deg);
    }
}

.auth-box {
    width: 100%;
    max-width: 450px;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* Add chrome highlight to auth box */
.auth-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 16px;
    z-index: -1;
    opacity: 0.5;
}

/* Add subtle chrome border glow */
.auth-box::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border-radius: 16px;
    z-index: -2;
    filter: blur(5px);
    opacity: 0.3;
}

.auth-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.auth-tab {
    flex: 1;
    padding: 0.8rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-tab.active {
    color: var(--white);
    position: relative;
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form .form-group {
    margin-bottom: 1.5rem;
}

.auth-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--white);
    font-weight: 500;
}

.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="text"], .auth-form input[type="number"], .auth-form input[type="tel"] {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white);
    font-size: 1rem;
    backdrop-filter: blur(5px);
}

.password-input {
    position: relative;
    width: 100%;
}

.password-input input {
    width: 100%;
    padding: 1rem;
    padding-right: 3rem; /* Make room for the eye icon */
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white);
    font-size: 1rem;
    backdrop-filter: blur(5px);
    box-sizing: border-box;
}

.toggle-password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    z-index: 2;
}

.toggle-password:hover {
    color: var(--white);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.remember-me {
    display: flex; /* Changed to flex for alignment */
    align-items: center;
    cursor: pointer;
    user-select: none; /* Prevent text selection */
    color: #ccc; /* Light grey text */
}

.remember-me input[type="checkbox"] {
    opacity: 0; /* Hide the default checkbox */
    position: absolute;
    width: 0;
    height: 0;
}

.remember-me span {
    margin-left: 8px; /* Space between checkbox and text */
    transition: color 0.2s ease;
}

/* Create a custom checkbox appearance */
.remember-me input[type="checkbox"] + span::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #555; /* Darker grey border */
    border-radius: 3px;
    margin-right: 8px; /* Consistent spacing */
    vertical-align: middle; /* Align with text */
    background-color: #333; /* Dark background */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Style when checked */
.remember-me input[type="checkbox"]:checked + span::before {
    background-color: var(--highlight); /* Highlight color when checked */
    border-color: var(--highlight);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); /* White checkmark SVG */
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hover effect */
.remember-me:hover input[type="checkbox"] + span::before {
    border-color: #777;
}
.remember-me:hover span {
   color: #fff; /* Slightly brighten text on hover */
}

/* Focus outline for accessibility */
.remember-me input[type="checkbox"]:focus + span::before {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
}


.forgot-password {
    color: #4a90e2;
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    color: #6aaaff;
    text-decoration: underline;
}

.auth-button {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--black);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0D0D0D;
    --bg-secondary: #1A1A1A;
    --text-primary: #EDEDED;
    --text-secondary: #B0B0B0;
    --border-color: #2A2A2A;
    --accent-light: rgba(255, 255, 255, 0.1);
    --accent-hover: rgba(255, 255, 255, 0.2);
    --highlight: #7E6BC4;
    --success: #4CAF50;
    --warning: #FFC107;
    --danger: #FF5252;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 240px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 24px 16px;
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.logo-container {
    padding: 0 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    height: 48px;
    width: auto;
    transition: transform 0.2s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-divider {
    width: 1px;
    height: 36px;
    background-color: var(--border-color);
    opacity: 0.3;
}

.logo-text {
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 100;
    letter-spacing: 1.5px;
    opacity: 0.75;
}

.logo-text strong {
    font-weight: 600;
    opacity: 0.95;
}

/* Responsive adjustment for logo */
@media (max-width: 992px) {
    .logo {
        height: 40px;
    }
    
    .logo-text, .logo-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    .logo {
        height: 36px;
    }
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1; /* Allow nav menu to take up available space */
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-item:hover {
    background-color: var(--accent-light);
    color: var(--text-primary);
}

.nav-item.active {
    background-color: var(--accent-light);
    color: var(--text-primary);
}

.nav-icon {
    width: 20px;
    height: 20px;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 240px;
    padding: 24px 32px;
    max-width: calc(100% - 240px);
}

/* Header */
.content-header {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.header-title h1 {
    font-size: 32px;
    font-weight: 600;
}

.sync-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sync-status.syncing {
    opacity: 1;
    visibility: visible;
}

.sync-icon {
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Account Section */
.account-section {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2 {
    font-size: 18px;
    font-weight: 600;
}

/* Table Styles */
.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.data-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.account-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.account-handle {
    font-weight: 500;
    margin-bottom: 2px;
}

.account-name {
    font-size: 13px;
    color: var(--text-secondary);
}

.reel-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reel-type {
    font-weight: 500;
}

.reel-status {
    font-size: 13px;
    color: var(--text-secondary);
}

.stats-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-value {
    font-size: 16px;
    font-weight: 600;
}

.stats-change {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Statistics Section */
.statistics-section {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.date-filter .btn {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.chart-container {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    height: 300px;
    position: relative;
}

.y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 16px 0;
}

.chart-area {
    flex: 1;
    background: linear-gradient(180deg, 
        rgba(126, 107, 196, 0.1) 0%,
        rgba(126, 107, 196, 0.05) 50%,
        rgba(126, 107, 196, 0) 100%
    );
    border-radius: 4px;
}

.x-axis {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 0 24px;
}

.chart-legend {
    display: flex;
    gap: 24px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 2px;
    border-radius: 1px;
}

.legend-color.plays { background-color: var(--highlight); }
.legend-color.likes { background-color: var(--success); }
.legend-color.comments { background-color: var(--warning); }
.legend-color.shares { background-color: var(--danger); }

/* Daily Stats */
.daily-stats {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.daily-stats h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-card {
    text-align: center;
}

.stat-card h3 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
}

/* Buttons */
.btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
}

.btn-primary {
    background-color: var(--highlight);
    color: var(--text-primary);
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--accent-light);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--accent-hover);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .sidebar {
        width: 80px;
        padding: 24px 12px;
    }

    .nav-item span {
        display: none;
    }

    .main-content {
        margin-left: 80px;
        max-width: calc(100% - 80px);
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: 16px;
    }

    .account-section,
    .statistics-section,
    .daily-stats {
        padding: 16px;
    }
}

.nav-logo {
    height: 48px;
    width: auto;
    margin-right: 16px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.footer-logo-img {
    height: 48px;
    width: auto;
}

.footer-logo h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Team Selector Styles */
.team-selector {
    position: relative; /* Context for the dropdown */
}

.team-select-btn {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between avatar, name, icon */
}

.team-selector .team-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 12px; /* For text fallback if image breaks normally */
    display: inline-block; /* Default display */
    vertical-align: middle;
    /* Base background/color for fallback */
    background-color: var(--accent-light); 
    color: var(--text-secondary);
}

.team-selector .team-avatar.placeholder {
    /* Override styles for the placeholder state */
    background-color: var(--accent-light); /* Match base or use different? */
    color: var(--text-primary);
    font-size: 16px; /* Make '+' larger */
    font-weight: 600;
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    line-height: 1; /* Ensure text centers vertically */
    content: attr(alt); /* Try to display alt text directly */
}

/* Attempt to show textContent if src is empty/broken AND it's a placeholder */
.team-selector .team-avatar.placeholder::before { 
    content: '+'; /* Force the plus sign via pseudo-element */
    /* If the above doesn't work, the JS textContent + flex centering might */
}

.team-selector .dropdown-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease-in-out;
}

.team-selector .dropdown-icon.rotate-180 {
    transform: rotate(180deg);
}

.team-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: var(--background-elevated); 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md); 
    box-shadow: var(--shadow-lg);
    z-index: 50;
    min-width: 220px; /* Slightly wider */
    /* Removed overflow: hidden; */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    opacity: 1;
    transform: translateY(0);
    padding: 8px; /* Added padding to the container */
}

.team-dropdown.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.team-dropdown ul {
    list-style: none;
    padding: 0; /* Removed specific padding */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Add small gap between list items */
}

/* Style the link within the list item directly */
.team-dropdown li > a {
    display: flex;
    align-items: center;
    padding: 8px 10px; /* Adjusted padding */
    gap: 10px; /* Increased gap slightly */
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 6px; /* Add rounding to the link/item */
    transition: background-color 0.15s ease;
}

/* Hover effect on the link */
.team-dropdown li > a:hover {
    background-color: var(--accent-light); /* Use accent for hover */
}

/* Style the span used as avatar within the dropdown */
.team-dropdown .team-dropdown-item .team-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex; /* Use flex to center the initial */
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--accent-light); /* Match other avatars */
    color: var(--text-secondary);
    flex-shrink: 0; /* Prevent shrinking */
}

/* Style the 'Create New Team' item specifically */
.team-dropdown li#createTeamOption > a {
    color: var(--text-secondary); /* Slightly dimmer text */
}

.team-dropdown li#createTeamOption > a:hover {
    color: var(--text-primary);
    background-color: var(--accent-light);
}

.team-dropdown li#createTeamOption .nav-icon {
    width: 18px; /* Slightly smaller icon */
    height: 18px;
    stroke-width: 2;
    color: var(--text-secondary); /* Dimmer icon color */
    transition: color 0.15s ease;
}

.team-dropdown li#createTeamOption > a:hover .nav-icon {
    color: var(--text-primary);
}

.team-dropdown .team-dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 6px 0; /* Adjusted margin */
}

/* Style for the message when no teams exist */
.no-teams-message {
    padding: 10px 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Style for the button when no teams exist */
.team-select-btn.no-teams-button {
    /* Optional: Change background to suggest primary action */
    /* background-color: var(--color-primary-light); */
    /* border-color: var(--color-primary); */
}

.team-select-btn.no-teams-button #teamDropdownIcon {
    display: none; /* Hide the dropdown arrow */
}

.team-select-btn.no-teams-button #currentTeamName {
    /* Optional: Make text bolder or different */
    /* font-weight: 600; */
}

/* Invite Button Styles */
.invite-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
}

.invite-btn .nav-icon {
    width: 16px;
    height: 16px;
}

/* Tab Content */
.tab-content {
    position: relative;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dashboard Overview */
.dashboard-overview {
    margin-bottom: 32px;
}

.overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.overview-card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 16px;
}

.overview-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-icon svg {
    width: 24px;
    height: 24px;
}

.overview-icon.success {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.overview-icon.primary {
    background-color: rgba(126, 107, 196, 0.1);
    color: var(--highlight);
}

.overview-icon.warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #FFC107;
}

.overview-icon.info {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.overview-info h3 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.overview-value {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.trend {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trend.positive {
    color: #4CAF50;
}

.trend.negative {
    color: #FF5252;
}

/* Add styles for the dynamic trend indicator */
.overview-trend {
    font-size: 0.85rem;
    display: inline-block; /* Ensure it takes space */
    margin-left: 8px; /* Add some space */
    /* Default color or inherit */
    color: var(--text-secondary);
}

.overview-trend.positive {
    color: var(--success);
}

.overview-trend.negative {
    color: var(--danger);
}

/* Assistants Tab Styles */
.assistants-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-left {
    flex: 1;
}

.header-left h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

.header-actions {
    display: flex;
    gap: 12px;
}

/* Filters Section */
.assistants-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.search-input {
    width: 100%;
    padding: 12px 12px 12px 44px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.search-input:focus {
    outline: none;
    border-color: var(--highlight);
}

/* Table Styles */
.assistants-table-container {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
}

.assistants-table {
    width: 100%;
    border-collapse: collapse;
}

.assistants-table th {
    background-color: var(--bg-primary);
    padding: 16px;
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 14px;
}

.assistants-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.assistants-table tbody tr:hover {
    background-color: var(--accent-light);
}

/* Assistant Info */
.assistant-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.assistant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.assistant-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.assistant-email {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Role Info */
.role-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.role-title {
    font-weight: 500;
}

.role-team {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Accounts Display */
.accounts-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accounts-count {
    font-weight: 500;
}

.accounts-avatars {
    display: flex;
    align-items: center;
}

.accounts-avatars img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
    margin-left: -8px;
}

.accounts-avatars img:first-child {
    margin-left: 0;
}

.more-accounts {
    margin-left: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Stats Cell */
.stats-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-value {
    font-weight: 600;
}

.stats-trend {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-trend.positive {
    color: var(--success);
}

.stats-trend.negative {
    color: var(--danger);
}

.stats-trend.neutral {
    color: var(--text-secondary); /* Or your preferred neutral color */
}
/* Engagement Bar */
.engagement-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.engagement-bar {
    flex: 1;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.engagement-fill {
    height: 100%;
    width: var(--percentage);
    background-color: var(--highlight);
    border-radius: 2px;
}

/* Status Badge */
.status-badge {
    position: relative; /* Needed for absolute positioning of icons */
    padding: 4px 12px; /* Adjust padding slightly */
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex; /* Use flex to align potential icons */
    align-items: center;
    gap: 4px; /* Space between icon and text */
}

/* --- UPDATED ACTIVE STATUS BADGE --- */
.status-badge.active {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(102, 187, 106, 0.25));
    color: #A5D6A7; /* Lighter green text */
    border: 1px solid rgba(102, 187, 106, 0.3);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
    padding-right: 18px; /* Space for icon */
}

.status-badge.active::after {
    content: '✓'; /* Checkmark */
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: bold;
    color: #C8E6C9; /* Very light green */
    line-height: 1;
    opacity: 0.8;
}

/* --- UPDATED SUSPENDED STATUS BADGE --- */
.status-badge.suspended {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(239, 83, 80, 0.25));
    color: #EF9A9A; /* Lighter red text */
    border: 1px solid rgba(239, 83, 80, 0.3);
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.3);
    padding-right: 18px; /* Space for icon */
}

.status-badge.suspended::after {
    content: '!'; /* Exclamation mark */
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: bold;
    color: #FFCDD2; /* Very light red */
    line-height: 1;
    opacity: 0.8;
}

/* --- UPDATED WARMING-UP STATUS BADGE --- */
.status-badge.warming-up {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 204, 51, 0.25));
    color: #FFE082; /* Lighter yellow text */
    border: 1px solid rgba(255, 204, 51, 0.3);
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
    padding-right: 18px; /* Space for icon */
}

.status-badge.warming-up::after {
    content: '▲'; /* Up arrow / triangle */
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 10px; /* Slightly smaller */
    color: #FFF9C4; /* Very light yellow */
    line-height: 1;
    opacity: 0.8;
}

/* --- UPDATED NEW STATUS BADGE --- */
@keyframes pulse-star {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

.status-badge.new {
    position: relative; 
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(100, 181, 246, 0.25)); /* Subtle gradient */
    color: #90CAF9; /* Even lighter blue text */
    padding-right: 18px; 
    font-weight: 500;
    border: 1px solid rgba(100, 181, 246, 0.3); /* Subtle border */
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3); /* Soft glow */
}

.status-badge.new::after {
    content: '✦'; /* Changed to a different star/sparkle character */
    position: absolute;
    top: 1px; /* Adjusted position */
    right: 4px; /* Adjusted position */
    font-size: 11px; 
    color: #E3F2FD; /* Very light blue/white for star */
    line-height: 1;
    text-shadow: 0 0 3px rgba(100, 181, 246, 0.7);
    animation: pulse-star 2s infinite ease-in-out;
}
/* --- END UPDATED NEW STATUS BADGE --- */

/* Row Actions */
.row-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background-color: var(--accent-light);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background-color: var(--accent-hover);
    color: var(--text-primary);
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

/* Table Footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: var(--bg-secondary);
    border-radius: 12px;
}

.table-info {
    color: var(--text-secondary);
    font-size: 14px;
}

.pagination {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .assistants-table th:nth-child(6),
    .assistants-table td:nth-child(6) {
        display: none;
    }
}

@media (max-width: 992px) {
    .assistants-table th:nth-child(4),
    .assistants-table td:nth-child(4),
    .assistants-table th:nth-child(5),
    .assistants-table td:nth-child(5) {
        display: none;
    }

    .assistants-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .assistants-table th:nth-child(3),
    .assistants-table td:nth-child(3) {
        display: none;
    }

    .table-footer {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
}

/* Settings Styles */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

.settings-header h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.settings-header .subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

.settings-layout {
    display: flex;
    gap: 32px;
    min-height: calc(100vh - 200px);
}

/* Settings Navigation */
.settings-nav {
    height: fit-content;
    width: 240px;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.settings-nav-item svg {
    width: 20px;
    height: 20px;
}

.settings-nav-item:hover {
    background-color: var(--accent-light);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background-color: var(--accent-light);
    color: var(--text-primary);
}

/* Settings Content */
.settings-content {
    flex: 1;
    max-width: 800px;
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.section-header {
    margin-bottom: 24px;
}

.section-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Settings Cards */
.settings-card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.card-header {
    margin-bottom: 24px;
}

.card-header h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Profile Upload */
.profile-upload {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.profile-image-container {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.image-overlay:hover {
    opacity: 1;
}

.image-overlay svg {
    width: 24px;
    height: 24px;
    color: var(--white);
    margin-bottom: 8px;
}

.image-overlay span {
    font-size: 12px;
    color: var(--white);
}

.upload-info {
    flex: 1;
}

.upload-info p {
    font-weight: 500;
    margin-bottom: 4px;
}

.upload-info span {
    display: block;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 16px;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--highlight);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.text-hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Social Links */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

.social-icon.twitter {
    background-color: rgba(29, 161, 242, 0.1);
    color: #1DA1F2;
}

.social-icon.instagram {
    background-color: rgba(225, 48, 108, 0.1);
    color: #E1306C;
}

.social-info {
    flex: 1;
}

.social-info span {
    display: block;
}

.social-status {
    font-size: 13px;
    color: var(--text-secondary);
}

.social-status.connected {
    color: var(--success);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .settings-layout {
        flex-direction: column;
    }

    .settings-nav {
        width: 100%;
        display: flex;
        overflow-x: auto;
        padding: 12px;
    }

    .settings-nav-item {
        flex: 0 0 auto;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .profile-upload {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .social-link {
        flex-direction: column;
        text-align: center;
    }

    .social-info {
        margin: 8px 0;
    }
}

/* Dashboard Styles */
.overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.overview-card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 16px;
}

.overview-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-icon svg {
    width: 24px;
    height: 24px;
}

.overview-icon.success {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.overview-icon.primary {
    background-color: rgba(126, 107, 196, 0.1);
    color: var(--highlight);
}

.overview-icon.warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #FFC107;
}

.overview-icon.info {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.overview-info h3 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.overview-value {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.trend {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trend.positive {
    color: #4CAF50;
}

.trend.negative {
    color: #FF5252;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dashboard-card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
}

.dashboard-card.large {
    grid-column: 1 / -1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-left h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.header-left p {
    color: var(--text-secondary);
    font-size: 14px;
}

.header-actions {
    display: flex;
    gap: 8px;
}

/* Charts */
.chart-container {
    position: relative;
}

.chart-area {
    height: 300px;
    margin-bottom: 16px;
    position: relative;
}

.revenue-chart {
    background: linear-gradient(180deg, 
        rgba(126, 107, 196, 0.1) 0%,
        rgba(126, 107, 196, 0.05) 50%,
        rgba(126, 107, 196, 0) 100%
    );
    border-radius: 8px;
}

.engagement-chart {
    background: linear-gradient(180deg, 
        rgba(76, 175, 80, 0.1) 0%,
        rgba(76, 175, 80, 0.05) 50%,
        rgba(76, 175, 80, 0) 100%
    );
    border-radius: 8px;
}

.chart-legend {
    display: flex;
    gap: 24px;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.revenue {
    background-color: var(--highlight);
}

.legend-color.profit {
    background-color: #4CAF50;
}

.legend-value {
    font-weight: 600;
    margin-left: 8px;
}

/* Assistants List */
.assistants-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- End Checkbox Styles --- */

/* --- Litepicker Dark Theme Styles --- */
.litepicker {
    background-color: var(--bg-secondary) !important;
    /* border-color: var(--border-color) !important; */ /* Removed border */
    border: none !important; /* Explicitly remove border */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4) !important; /* Softer shadow */
    border-radius: 8px !important; 
}

.litepicker .container__months {
    background-color: var(--bg-secondary) !important;
    border-radius: 8px !important; 
    padding: 8px !important; /* Add some padding inside */
    flex-wrap: nowrap !important;
}

.litepicker .month-item {
    padding: 0 8px !important; /* Space between months */
}

.litepicker .month-item-header {
    background-color: transparent !important; /* Transparent header bg */
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 0 8px 0 !important; /* Adjust padding */
    margin-bottom: 8px !important;
}

.litepicker .month-item-header div,
.litepicker .month-item-header button,
.litepicker .month-item-header select {
    color: var(--text-primary) !important;
    font-weight: 600 !important; /* Bolder month/year */
    border: none !important; /* Remove select border */
    background-color: transparent !important; /* Ensure select bg is transparent */
}

.litepicker .month-item-header select {
    padding: 4px 8px !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.litepicker .month-item-header select:hover {
    background-color: var(--accent-light) !important;
}

.litepicker .month-item-header button {
    border-radius: 50% !important; /* Round prev/next buttons */
    width: 28px !important;
    height: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.litepicker .month-item-header button:hover {
    background-color: var(--accent-light) !important;
}

.litepicker .container__tooltip {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

.litepicker .calendar-week-days div {
    color: var(--text-secondary) !important; 
    font-weight: 500 !important;
    font-size: 12px !important; /* Smaller weekday names */
}

.litepicker .day-item {
    color: var(--text-secondary) !important;
    border-radius: 4px !important;
    border: none !important; /* Remove default border */
    height: 30px !important; /* Consistent height */
    line-height: 30px !important;
    font-size: 13px !important;
}

.litepicker .day-item:hover {
    background-color: var(--accent-light) !important;
    color: var(--text-primary) !important;
}

.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
    background-color: var(--highlight) !important;
    color: var(--text-primary) !important;
    border-radius: 4px !important; /* Ensure consistent radius */
}

/* Make start/end date circles */
/* .litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
    border-radius: 50% !important;
} */

.litepicker .day-item.is-in-range {
    background-color: rgba(126, 107, 196, 0.15) !important; /* Slightly less intense range */
    color: var(--text-secondary) !important;
    border-radius: 0 !important; /* Make range selection square between start/end */
}

/* Connect range background to start/end dates */
.litepicker .day-item.is-in-range.is-start-date {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.litepicker .day-item.is-in-range.is-end-date {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.litepicker .day-item.is-today {
    color: var(--highlight) !important;
    border: 1px solid var(--highlight) !important;
}

.litepicker .day-item.is-locked {
    color: rgba(176, 176, 176, 0.5) !important; 
}

.litepicker .container__buttons {
    border-top: 1px solid var(--border-color) !important;
    padding: 8px 16px !important;
}

.litepicker .button-cancel,
.litepicker .button-apply {
    background-color: var(--accent-light) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
}

.litepicker .button-apply {
    background-color: var(--highlight) !important;
}

.litepicker .button-cancel:hover,
.litepicker .button-apply:hover {
    opacity: 0.9;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
    /* Hide scrollbar for IE/Edge (older) - optional, less common */
    -ms-overflow-style: none;  
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.activity-list::-webkit-scrollbar {
    display: none; /* or width: 0; */
}


.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon svg {
    width: 16px;
    height: 16px;
}

.activity-icon.success {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.activity-icon.warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #FFC107;
}

.activity-icon.info {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.activity-content p {
    margin-bottom: 4px;
}

.activity-time {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .assistant-stats {
        flex-direction: column;
        gap: 8px;
    }

    .stat-item {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .overview-cards {
        grid-template-columns: 1fr;
    }

    .assistant-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .assistant-stats {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    .chart-legend {
        flex-direction: column;
        gap: 12px;
    }
}

.legend-color.reels {
    background-color: var(--highlight);
}

.legend-color.engagement {
    background-color: #4CAF50;
}

/* Hours Chart */
.hours-chart {
    background: linear-gradient(180deg, 
        rgba(255, 193, 7, 0.1) 0%,
        rgba(255, 193, 7, 0.05) 50%,
        rgba(255, 193, 7, 0) 100%
    );
    border-radius: 8px;
}

/* Reels Chart */
.reels-chart {
    background: linear-gradient(180deg, 
        rgba(126, 107, 196, 0.1) 0%,
        rgba(126, 107, 196, 0.05) 50%,
        rgba(126, 107, 196, 0) 100%
    );
    border-radius: 8px;
}

/* Assistant Stats */
.assistant-stats {
    display: flex;
    gap: 24px;
}

.stat-item {
    text-align: right;
    min-width: 80px;
}

.stat-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon svg {
    width: 16px;
    height: 16px;
}

.activity-icon.success {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.activity-icon.warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #FFC107;
}

.activity-icon.info {
    background-color: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.activity-content p {
    margin-bottom: 4px;
}

.activity-time {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .assistant-stats {
        flex-direction: column;
        gap: 8px;
    }

    .stat-item {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .overview-cards {
        grid-template-columns: 1fr;
    }

    .assistant-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .assistant-stats {
        width: 100%;
        justify-content: space-between;
    }

    .stat-item {
        text-align: left;
    }

    .activity-item {
        padding: 12px;
    }

    .activity-icon {
        width: 28px;
        height: 28px;
    }

    .activity-icon svg {
        width: 14px;
        height: 14px;
    }
}

.accounts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.accounts-table th {
    position: sticky;
    top: 0;
    background-color: var(--bg-primary);
    z-index: 10;
    padding: 16px;
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.accounts-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

/* Handle container and interactions */
.handle-container {
    position: relative;
    display: inline-block;
}

.account-handle {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.account-handle:hover {
    background-color: var(--accent-light);
}

.handle-menu {
    display: none;
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 4px;
}

.menu-item:hover {
    background-color: var(--accent-light);
}

.copy-tooltip {
    display: none;
    position: absolute;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Password field */
.password-dots {
    color: var(--text-secondary);
    letter-spacing: 2px;
}

/* Bio and links */
.bio-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-link {
    color: var(--highlight);
    text-decoration: none;
}

.bio-link:hover {
    text-decoration: underline;
}

/* Status badge */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.status-badge.active {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.status-badge.suspended {
    background-color: rgba(244, 67, 54, 0.1);
    color: #F44336;
}

.status-badge.warming-up {
    background-color: rgba(255, 193, 7, 0.1);
    color: #FFC107;
}

/* --- NEW STATUS BADGE --- */
.status-badge.new {
    position: relative; /* Needed for absolute positioning of the star */
    background-color: rgba(33, 150, 243, 0.15); /* Light blue background */
    color: #64B5F6; /* Lighter blue text */
    padding-right: 18px; /* Make space for the star */
}

.status-badge.new::after {
    content: '★'; /* Unicode star character */
    position: absolute;
    top: -2px; /* Adjust position */
    right: 3px; /* Adjust position */
    font-size: 10px; /* Smaller star size */
    color: #2196F3; /* Slightly darker blue for star */
    line-height: 1;
}
/* --- END NEW STATUS BADGE --- */

/* Assistant info */
.assistant-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assistant-avatar-sm {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* Column customization modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 16px;
    overflow-y: auto;
}

.modal-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Column list in modal */
.columns-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.column-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: move;
}

.column-item:hover {
    background: var(--accent-light);
}

.column-item.dragging {
    opacity: 0.5;
}

.drag-handle {
    width: 16px;
    height: 16px;
    margin-left: auto;
    cursor: move;
    color: var(--text-secondary);
}

/* Table controls */
.table-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.icon-sm {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.status-menu {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    min-width: 150px; /* Adjust as needed */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    /* Remove transform, positioning handled by JS */
    animation: statusMenuFadeInBelow 0.15s ease-out;
    display: flex;
    flex-direction: column;
    gap: 4px; /* Spacing between badge options */
}

/* Remove pointer style */
/* .status-menu-pointer { ... } */

/* Animation for dropdown below */
@keyframes statusMenuFadeInBelow {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Style the options within the status menu */
.status-menu .status-option-badge {
    display: flex; /* Use flex to align dot and text */
    align-items: center;
    gap: 6px; /* Space between dot and text */
    cursor: pointer;
    padding: 6px 10px; /* Adjust padding */
    border-radius: 6px; /* Consistent rounding */
    transition: background-color 0.2s ease;
}

.status-menu .status-option-badge:hover {
    background-color: var(--accent-light);
}

.tooltip {
    position: absolute;
    background: var(--bg-primary); /* Use primary bg for tooltip */
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1010; /* Above menus */
    pointer-events: none; /* Prevent interaction */
    opacity: 0; /* Start hidden */
    transition: opacity 0.2s ease-out;
}

.status-menu .status-option-badge:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly lighter hover */
}

/* -- NEW -- Context Menu for Account Handle */
.context-menu {
    position: absolute; /* Already set by JS, but good for clarity */
    display: flex;
    flex-direction: column;
    background-color: var(--medium-gray); /* Match status menu? */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001; /* Ensure it's above other elements */
    overflow: hidden; /* Prevent content spill */
    min-width: 150px; /* Set a reasonable min-width */
    max-height: 200px; /* Explicitly limit height */
    box-sizing: border-box; /* Include padding/border in size */
}

.context-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--text-secondary);
    background-color: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
    box-sizing: border-box;
}

.context-menu .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.context-menu .menu-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex-shrink: 0; /* Prevent icon shrinking */
}

/* Specific styles for Invite Modal */
.invite-modal-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Spacing between main sections */
}

.input-with-button {
    position: relative;
    display: flex;
}

.input-with-button .form-control {
    padding-right: 50px; /* Make space for the button */
}

.input-with-button .copy-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px; /* Smaller padding for icon button */
    height: calc(100% - 12px); /* Match input height */
    width: 36px;
    min-width: auto;
}

.input-with-button .copy-success-tooltip {
    display: none; /* Hidden by default */
    position: absolute;
    right: 45px; /* Position next to copy button */
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--success);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1;
}

.invite-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px; /* Row gap, Column gap */
    margin-top: 8px;
    margin-bottom: 8px;
}

.invite-options-grid .form-group.full-span {
    grid-column: 1 / -1; /* Make role selection span full width */
}

.modal-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 24px 0; /* Add more vertical space around divider */
    position: relative;
    text-align: center;
}

.modal-divider span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-secondary); /* Match modal background */
    padding: 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.email-invite-btn {
    display: inline-flex; /* Align icon and text nicely */
    align-items: center;
    gap: 8px;
    align-self: flex-start; /* Align button to the left */
}


/* Ensure base modal styles are sufficient */
.modal {
    /* ... existing styles ... */
    z-index: 1000;
}

.modal-content {
     /* ... existing styles ... */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.close-modal:hover {
    color: var(--text-primary);
}

.modal-footer {
     /* ... existing styles ... */
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
}

/* --- Invite Modal --- */
.invite-modal-content {
    max-width: 550px; /* Slightly wider if needed for tabs */
}

.invite-modal-body {
    padding-top: 0; /* Remove top padding, tabs will handle it */
    overflow-y: visible; /* Prevent scrolling */
    max-height: none; /* Remove max-height */
}

.invite-tab-selector {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem; /* Space between tabs and content */
}

.invite-tab-btn {
    flex: 1;
    padding: 1rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.9rem; /* Slightly smaller if needed */
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease-in-out;
    margin-bottom: -1px; /* Overlap border */
}

.invite-tab-btn:hover {
    color: var(--text-primary);
    background-color: rgba(var(--primary-rgb), 0.05); /* Subtle hover */
}

.invite-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.invite-tab-btn svg {
    width: 16px;
    height: 16px;
}

.invite-tab-content {
    /* Container for the panes */
}

.invite-tab-pane {
    display: none; /* Hide panes by default */
}

.invite-tab-pane.active {
    display: block; /* Show active pane */
}

.invite-modal-body .modal-section {
    padding-top: 0; /* No extra top padding needed within sections */
    margin-bottom: 0; /* No extra bottom margin */
}

/* Remove the divider */
.modal-divider {
    display: none;
}

.email-invite-btn {
    margin-top: 1rem; /* Add some space above email send button */
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 0.5rem;
}

/* --- End Invite Modal --- */


/* --- Tooltips --- */

/* --- Settings Tab Specific Styles --- */

/* Security */
.two-factor-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    margin-top: 16px;
}

.two-factor-status p {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Billing */
.plan-details,
.payment-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.plan-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.plan-info p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.plan-info span {
    font-size: 13px;
    color: var(--text-secondary);
}

.usage-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.usage-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.usage-item label {
    width: 120px;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.usage-bar {
    flex: 1;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    width: var(--percentage);
    background-color: var(--highlight);
    border-radius: 4px;
}

.usage-item span {
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
    text-align: right;
}

.card-logo {
    height: 24px;
    width: auto;
}

.payment-method span {
    flex: 1;
    margin-left: 16px;
}

.billing-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.invoice-item span {
    font-size: 14px;
    color: var(--text-secondary);
}

.invoice-item span:nth-child(2) {
    font-weight: 500;
    color: var(--text-primary);
}

/* Notifications */
.notification-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.notification-info {
    flex: 1;
    margin-right: 24px;
}

.notification-info h5 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

.notification-info p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Toggle Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 48px; /* Slightly smaller */
  height: 24px; /* Slightly smaller */
  flex-shrink: 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px; /* Adjusted */
  width: 18px; /* Adjusted */
  left: 3px; /* Adjusted */
  bottom: 3px; /* Adjusted */
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--highlight);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--highlight);
}

input:checked + .slider:before {
  transform: translateX(24px); /* Adjusted */
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* --- End Settings Tab Specific Styles --- */

/* --- Invite Modal --- */
.filter-dropdown {
    display: none; /* Explicitly ensure it's hidden by default */
    position: absolute;
    top: calc(100% + 8px); /* Position below the button */
    right: 0;
}

/* --- Assistants Filter Dropdown --- */
.filter-container {
    position: relative; /* Needed for absolute positioning of dropdown */
}

.filter-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: calc(100% + 8px); /* Position below the button */
    right: 0;
    width: 280px; /* Adjust width as needed */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1010; /* Ensure it's above table content */
    padding: 12px;
    animation: fadeInDropdown 0.15s ease-out;
}

.filter-dropdown.active {
    display: block;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-section {
    margin-bottom: 12px;
}

.filter-section h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
}

.filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--highlight);
    cursor: pointer;
}

.filter-option:hover span {
    color: var(--text-primary);
}

.filter-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 12px 0;
}

.filter-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* --- End Assistants Filter Dropdown --- */


/* --- Add Assistant Modal Logic --- */
.filter-dropdown {
    display: none; /* Explicitly ensure it's hidden by default */
    position: absolute;
    top: calc(100% + 8px); /* Position below the button */
    right: 0;
}

/* Checkbox Styles */
input[type="checkbox"].checkbox-all,
input[type="checkbox"].checkbox-row {
    appearance: none; /* Remove default browser styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle; /* Align with text if needed */
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"].checkbox-all:hover,
input[type="checkbox"].checkbox-row:hover {
    border-color: var(--highlight);
}

input[type="checkbox"].checkbox-all:checked,
input[type="checkbox"].checkbox-row:checked {
    background-color: var(--highlight);
    border-color: var(--highlight);
}

/* Custom checkmark using SVG */
input[type="checkbox"].checkbox-all:checked::after,
input[type="checkbox"].checkbox-row:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}

/* Indeterminate state for 'select all' (optional but good UX) */
input[type="checkbox"].checkbox-all:indeterminate {
    background-color: var(--highlight);
    border-color: var(--highlight);
}

input[type="checkbox"].checkbox-all:indeterminate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px; /* Make it a line */
    background-color: var(--text-primary);
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

/* Adjustments for table layout */
.assistants-table th:first-child,
.assistants-table td:first-child {
    padding-left: 16px; /* Align checkbox visually */
    padding-right: 8px;
    width: 40px; /* Fixed width for checkbox column */
}

/* --- End Checkbox Styles --- */

/* --- Page Title Loader Animation --- */
.loader {
    border: 4px solid rgba(255, 255, 255, .2); /* Lighter border for dark theme */
    border-left-color: var(--text-primary); /* Use primary text color for spinning part */
    border-radius: 50%;
    width: 18px; /* Smaller size to fit next to title */
    height: 18px;
    animation: spin89345 1s linear infinite;
    display: none; /* Hidden by default */
    vertical-align: middle; /* Align with text */
    margin-left: 8px; /* Space from title */
  }
  
  /* Control visibility based on parent span classes set by JS */
  .page-title-indicator.visible.loading .loader {
      display: inline-block; /* Show only when loading */
  }
  
  @keyframes spin89345 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  /* --- End Page Title Loader Animation --- */
/* --- Settings Styles --- */

/* --- End Reels Tab --- */

/* --- Reels List Section Specific Styles --- */
.reels-list-section {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-top: 32px; /* Space after Daily Stats */
    margin-bottom: 32px; /* Added bottom spacing */
}

.reels-list-table {
    border-collapse: separate; /* Required for row spacing */
    border-spacing: 0 12px; /* Horizontal 0, Vertical 12px spacing */
    width: 100%;
}

/* Remove default table borders */
.reels-list-table th,
.reels-list-table td {
    border: none;
    vertical-align: middle;
}

/* Style header */
.reels-list-table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 13px; /* Slightly smaller header */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style each row as a block */
.reels-list-table tbody tr {
    background-color: var(--bg-primary); /* Darker background for rows */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensure children respect rounded corners */
    transition: background-color 0.2s ease;
}

.reels-list-table tbody tr:hover {
    background-color: var(--accent-light); /* Hover effect */
}

/* Adjust padding for cells within the new row style */
.reels-list-table td {
    padding: 10px 16px; /* Consistent padding */
}

/* Ensure first and last cell borders match row rounding */
.reels-list-table td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.reels-list-table td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Preview Column */
.column-reel-preview {
    width: 60px; /* Reduced width */
}

.reel-preview-img {
    width: 40px; /* Smaller preview image */
    height: 60px; /* Smaller preview image */
    object-fit: cover;
    border-radius: 4px;
    display: block; /* Prevents extra space below image */
    transition: transform 0.2s ease;
}

.column-reel-preview a:hover .reel-preview-img {
    transform: scale(1.05);
}

/* Caption Column */
.column-reel-caption {
    max-width: 300px; /* Limit caption width */
}

.caption-text {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px; /* Slightly smaller font */
    line-height: 1.3;
    color: var(--text-secondary);
}

/* Account Column */
.column-reel-account a {
    color: var(--highlight);
    text-decoration: none;
    font-size: 13px; /* Smaller font */
}

.column-reel-account a:hover {
    text-decoration: underline;
}

/* Views Column */
.column-reel-views {
    min-width: 90px; /* Slightly reduced width */
}

.column-reel-views .stats-value {
    font-weight: 500;
    margin-right: 6px; /* Reduced margin */
    font-size: 14px;
}

.column-reel-views .stats-trend {
    font-size: 12px; /* Smaller trend text */
}

/* Likes/Comments Column */
.column-reel-likes,
.column-reel-comments {
    text-align: right; /* Align numbers to the right */
    min-width: 70px; /* Reduced width */
    font-size: 14px;
}

/* Assistant Column */
.column-reel-assistant .assistant-info {
    gap: 8px; /* Adjust gap */
}

/* Reduce size of assistant avatar within reels table */
.reels-list-table .assistant-avatar-sm {
    width: 20px;
    height: 20px;
}

.column-reel-assistant .assistant-info span {
    font-size: 12px; /* Smaller name */
}

/* Updated/Posted Column */
.column-reel-posted,
.column-reel-updated {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 90px;
}

/* --- End Reels List Styles --- */


/* --- Assistants Tab --- */

/* Ensure header actions can contain positioned elements */
.reels-list-section .header-actions {
    position: relative; /* Needed for absolute positioning of the dropdown */
    display: flex; /* Align buttons horizontally */
    align-items: center;
    gap: 8px; /* Add some space between buttons */
}

/* Settings Dropdown Styles */
.settings-dropdown {
    display: none; /* Hidden by default, JS will toggle */
    position: absolute;
    top: 100%; /* Position below the button */
    right: 0;  /* Align to the right of the header actions */
    background-color: var(--bg-secondary); /* Apply theme background */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Consistent rounding */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Theme shadow */
    padding: 16px; /* More padding */
    min-width: 240px; /* Adjust as needed */
    z-index: 1010; /* Ensure it appears above other elements */
    margin-top: 5px; /* Small gap from the button */
}

/* Style headings inside dropdown */
.dropdown-heading {
    font-size: 0.75rem; /* Small uppercase heading */
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    margin-top: 12px; /* Add space above headings */
}
.dropdown-heading:first-of-type {
    margin-top: 0; /* No top margin for the first heading */
}

/* Style labels and inputs within the dropdown */
.settings-dropdown .fetch-mode-label {
    display: block; 
    margin-bottom: 8px; 
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.settings-dropdown .fetch-mode-label:hover {
    color: var(--text-primary);
}

.settings-dropdown input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--highlight); /* Use highlight color */
    vertical-align: middle;
}

/* Auto Fetch Options within Dropdown */
.auto-fetch-options {
    padding-left: 26px; /* Indent options under Automatic */
    margin-top: 4px; /* Reduced spacing */
    margin-bottom: 12px;
    display: none; /* Hidden by default, shown by JS */
}

/* Style small form groups in dropdown */
.form-group-sm {
    margin-top: 8px;
}
.form-group-sm label {
    display: block;
    font-size: 0.85rem; 
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.form-group-sm input[type="number"],
.form-group-sm select {
    width: 100%;
    font-size: 0.85rem; 
    padding: 6px 10px; /* Smaller padding */
}
/* Apply form-control styles to select too */
.form-control-sm {
     height: auto; /* Override default height if needed */
     line-height: 1.4; 
}

/* Dropdown divider */
.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 16px 0; /* Increased margin */
}

/* --- End Settings Dropdown Styles --- */


/* --- Reels List Section Specific Styles --- */

/* Assistant Column Badge Style */
.reels-list-table .column-reel-assistant .assistant-info {
    display: inline-flex; /* Allow background and padding */
    align-items: center;
    gap: 6px;
    background-color: var(--accent-light); /* Badge background */
    padding: 4px 8px; /* Badge padding */
    border-radius: 12px; /* Rounded badge */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.reels-list-table .column-reel-assistant .assistant-info:hover {
    background-color: var(--accent-hover); /* Hover effect */
}

.reels-list-table .assistant-avatar-sm {
    width: 18px; /* Slightly smaller avatar in badge */
    height: 18px;
}

.reels-list-table .column-reel-assistant .assistant-info span {
    font-size: 12px; /* Smaller name */
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Daily Statistics Card Styles --- */
.daily-stats-card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px; /* Keep spacing */
}

.daily-stats-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.daily-stats-card .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.daily-stats-card .stat-card {
    background-color: var(--bg-primary); /* Inner card background */
    border-radius: 12px; /* Increased rounding */
    padding: 16px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.daily-stats-card .stat-card h3 {
    font-size: 13px; /* Smaller heading */
    color: var(--text-secondary);
    margin-bottom: 12px; /* More space below title */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.daily-stats-card .stat-value {
    font-size: 24px; /* Slightly smaller value */
    font-weight: 600;
    color: var(--text-primary);
}

/* Responsive for Daily Stats */
@media (max-width: 1200px) {
    .daily-stats-card .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .daily-stats-card .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* --- End Daily Statistics Styles --- */

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dashboard-card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
}

.dashboard-card.large {
    grid-column: 1 / -1;
}

/* Add margin-bottom to the Reels Activity card for spacing */
.dashboard-grid .dashboard-card.large:first-child {
    margin-bottom: 0px; /* Add space below the first large card */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.header-left h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.header-left p {
    color: var(--text-secondary);
    font-size: 14px;
}

.header-actions {
    display: flex;
    gap: 8px;
}

/* Date Range Selector */
.date-range-selector {
    position: relative;
}

.date-range-selector .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.date-range-dropdown a {
    display: block;
    padding: 8px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.date-range-dropdown a:hover {
    background-color: var(--accent-light);
    color: var(--text-primary);
}

/* Charts */
.chart-container {
    position: relative;
}

.chart-area {
    height: 300px;
    margin-bottom: 16px;
    position: relative;
} 

.chart-area canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.reels-chart {
    background: linear-gradient(180deg, 
        rgba(126, 107, 196, 0.1) 0%,
        rgba(126, 107, 196, 0.05) 50%,
        rgba(126, 107, 196, 0) 100%
    );
    border-radius: 8px;
}

.engagement-chart {
    background: linear-gradient(180deg, 
        rgba(76, 175, 80, 0.1) 0%,
        rgba(76, 175, 80, 0.05) 50%,
        rgba(76, 175, 80, 0) 100%
    );
    border-radius: 8px;
}

.chart-legend {
    display: flex;
    gap: 24px;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    justify-content: center; /* Center legend items */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.reels { background-color: var(--highlight); }
.legend-color.engagement { background-color: #4CAF50; }
.legend-color.plays { background-color: #2196F3; } /* Blue */
.legend-color.likes { background-color: #4CAF50; } /* Green */
.legend-color.comments { background-color: #FFC107; } /* Yellow */
.legend-color.shares { background-color: #FF5252; } /* Red */

.legend-value {
    font-weight: 600;
    margin-left: 8px;
}

/* Assistants List */
.assistants-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- End Checkbox Styles --- */

/* --- Litepicker Dark Theme Styles --- */
.litepicker {
    background-color: var(--bg-secondary) !important;
    /* border-color: var(--border-color) !important; */ /* Removed border */
    border: none !important; /* Explicitly remove border */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4) !important; /* Softer shadow */
    border-radius: 8px !important; 
}

.litepicker .container__months {
    background-color: var(--bg-secondary) !important;
    border-radius: 8px !important; 
    padding: 8px !important; /* Add some padding inside */
    flex-wrap: nowrap !important;
}

.litepicker .month-item {
    padding: 0 8px !important; /* Space between months */
}

.litepicker .month-item-header {
    background-color: transparent !important; /* Transparent header bg */
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 0 8px 0 !important; /* Adjust padding */
    margin-bottom: 8px !important;
}

.litepicker .month-item-header div,
.litepicker .month-item-header button,
.litepicker .month-item-header select {
    color: var(--text-primary) !important;
    font-weight: 600 !important; /* Bolder month/year */
    border: none !important; /* Remove select border */
    background-color: transparent !important; /* Ensure select bg is transparent */
}

.litepicker .month-item-header select {
    padding: 4px 8px !important;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.litepicker .month-item-header select:hover {
    background-color: var(--accent-light) !important;
}

.litepicker .month-item-header button {
    border-radius: 50% !important; /* Round prev/next buttons */
    width: 28px !important;
    height: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.litepicker .month-item-header button:hover {
    background-color: var(--accent-light) !important;
}

.litepicker .container__tooltip {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

.litepicker .calendar-week-days div {
    color: var(--text-secondary) !important; 
    font-weight: 500 !important;
    font-size: 12px !important; /* Smaller weekday names */
}

.litepicker .day-item {
    color: var(--text-secondary) !important;
    border-radius: 4px !important;
    border: none !important; /* Remove default border */
    height: 30px !important; /* Consistent height */
    line-height: 30px !important;
    font-size: 13px !important;
}

.litepicker .day-item:hover {
    background-color: var(--accent-light) !important;
    color: var(--text-primary) !important;
}

.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
    background-color: var(--highlight) !important;
    color: var(--text-primary) !important;
    border-radius: 4px !important; /* Ensure consistent radius */
}

/* Make start/end date circles */
/* .litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
    border-radius: 50% !important;
} */

.litepicker .day-item.is-in-range {
    background-color: rgba(126, 107, 196, 0.15) !important; /* Slightly less intense range */
    color: var(--text-secondary) !important;
    border-radius: 0 !important; /* Make range selection square between start/end */
}

/* Connect range background to start/end dates */
.litepicker .day-item.is-in-range.is-start-date {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.litepicker .day-item.is-in-range.is-end-date {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.litepicker .day-item.is-today {
    color: var(--highlight) !important;
    border: 1px solid var(--highlight) !important;
}

.litepicker .day-item.is-locked {
    color: rgba(176, 176, 176, 0.5) !important; 
}

.litepicker .container__buttons {
    border-top: 1px solid var(--border-color) !important;
    padding: 8px 16px !important;
}

.litepicker .button-cancel,
.litepicker .button-apply {
    background-color: var(--accent-light) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
}

.litepicker .button-apply {
    background-color: var(--highlight) !important;
}

.litepicker .button-cancel:hover,
.litepicker .button-apply:hover {
    opacity: 0.9;
}

/* Specific alignment for Add Assistant button */
#assistants .assistants-filters .header-actions .btn-primary {
    display: inline-flex; /* Enable flexbox for inline items */
    align-items: center;  /* Vertically center items */
    gap: 8px;             /* Add space between icon and text */
}

/* Table Container Styling (for rounded corners) */
.table-container {
    border-radius: 12px; /* Rounded corners for the container */
    overflow: hidden; /* Ensure content respects the rounded corners */
    background-color: var(--bg-secondary); /* Match card background */
    margin-bottom: 24px; /* Keep bottom margin consistent */
}

/* First Column (Checkbox) Styling for BOTH tables */
.assistants-table th:first-child,
.accounts-table th:first-child {
    /* Ensure top-left rounding for the first header cell */
    border-top-left-radius: 12px;
}

/* Add top-right rounding for the LAST header cell */
.assistants-table th:last-child,
.accounts-table th:last-child {
     border-top-right-radius: 12px;
}

/* General TH styling for BOTH tables (excluding first checkbox col) */
.assistants-table th:not(:first-child),
.accounts-table th:not(:first-child) {
    /* ... existing code ... */
}

.accounts-table tbody tr { /* COMBINED RULE */
    border-bottom: none; /* Remove the default bottom border */
    /* Rows will be visually separated by border-spacing */
    transition: background-color 0.2s ease;
    background-color: rgba(51, 51, 51, 0.6);
    border-radius: 8px; /* Round the corners of each row */
}

/* Apply rounding to the first and last cell within each row */
.assistants-table td:first-child,
.accounts-table td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.assistants-table td:last-child,
.accounts-table td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}


.assistants-table tbody tr:last-child,
.accounts-table tbody tr:last-child { /* COMBINED RULE */
    border-bottom: none; /* Still remove border from last row ( belt and braces ) */
}

.assistants-table tbody tr:hover,
.accounts-table tbody tr:hover { /* COMBINED RULE */
    background-color: var(--base-100); /* Consistent hover effect */
}

/* Style for SELECTED rows in BOTH tables */
.assistants-table tbody tr.selected,
.accounts-table tbody tr.selected {
    background-color: var(--base-150); /* Slightly darker/different shade */
    /* Optionally add a border or other visual cue */
    /* border-left: 3px solid var(--highlight); */ 
}

.assistants-table tbody tr.selected:hover,
.accounts-table tbody tr.selected:hover {
     background-color: var(--base-200); /* Slightly darker hover for selected rows */
}

/* Adjust border-spacing for the tables */
.assistants-table,
.accounts-table {
    border-spacing: 0 8px; /* Add 8px vertical spacing between rows */
    /* Remove margin from table itself if container has it */
     margin-bottom: 0;
}

/* Remove padding from the container if table has spacing */
.table-container {
    padding: 16px; /* Add padding to container instead of table */
    padding-bottom: 8px; /* Reduce bottom padding to account for last row spacing */
}

/* Ensure header background fills container padding */
.assistants-table thead,
.accounts-table thead {
     /* The background is on the th now, which is fine */
}



/* --- End General Data Table Styles --- */

/* New styles for form layout */
.form-row {
    display: flex;
    gap: 1.5rem; /* Adjust gap between side-by-side fields */
    margin-bottom: 1.5rem; /* Keep the standard margin below the row */
}

.form-group.half-width {
    flex: 1; /* Allow fields to take equal space */
    margin-bottom: 0; /* Remove bottom margin as it's handled by form-row */
}
/* End new styles */

/* --- New Logout Button Styles --- */
.sidebar-footer {
    margin-top: auto; /* Pushes this div to the bottom */
    padding-top: 16px; /* Add padding above the button */
    border-top: 1px solid var(--border-color); /* Optional separator line */
}

.logout-btn {
    width: 100%; /* Make button full width of sidebar padding */
    display: flex; /* Align icon and text */
    align-items: center;
    justify-content: flex-start; /* Align content to the left */
    gap: 12px; /* Space between icon and text */
    background-color: transparent; /* Make it less prominent initially */
    border: none;
    color: var(--text-secondary); /* Use secondary text color */
    padding: 12px; /* Match nav-item padding */
    text-align: left;
    border-radius: 8px; /* Match nav-item rounding */
    font-size: 14px; /* Match nav-item font size */
    font-weight: 500; /* Match nav-item font weight */
}

.logout-btn:hover {
    background-color: var(--accent-light); /* Use standard hover */
    color: var(--danger); /* Make text red on hover */
    cursor: pointer;
}

.logout-btn .nav-icon {
    /* Ensure icon inherits color */
    stroke: currentColor; /* Assuming SVG uses stroke */
    fill: currentColor; /* Or fill if SVG uses fill */
    color: inherit;
}
/* --- End Logout Button Styles --- */

/* --- Inline Error Message Style --- */
.error-message {
    color: var(--danger); /* Use the danger color from root variables */
    font-size: 0.85em;
    margin-top: 0.5rem; /* Space above the error message */
    min-height: 1.2em; /* Reserve space even when empty to prevent layout shifts */
}
/* --- End Inline Error Message Style --- */

/* --- End Invite Modal --- */


/* --- Tooltips --- */

/* --- Settings Tab Specific Styles --- */

/* Add margin above the save button in profile settings */
.settings-section#profile .form-actions {
    margin-top: 24px; /* Adjust value as needed */
    text-align: right; /* Optional: Align button to the right */
}

/* Security */
.two-factor-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    margin-top: 16px;
}

.two-factor-status p {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Billing */
.plan-details,
.payment-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.plan-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.plan-info p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.plan-info span {
    font-size: 13px;
    color: var(--text-secondary);
}

.usage-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.usage-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.usage-item label {
    width: 120px;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.usage-bar {
    flex: 1;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    width: var(--percentage);
    background-color: var(--highlight);
    border-radius: 4px;
}

.usage-item span {
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
    text-align: right;
}

.card-logo {
    height: 24px;
    width: auto;
}

.payment-method span {
    flex: 1;
    margin-left: 16px;
}

.billing-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.invoice-item span {
    font-size: 14px;
    color: var(--text-secondary);
}

.invoice-item span:nth-child(2) {
    font-weight: 500;
    color: var(--text-primary);
}

/* Notifications */
.notification-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
}

.notification-info {
    flex: 1;
    margin-right: 24px;
}

.notification-info h5 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

.notification-info p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Toggle Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 48px; /* Slightly smaller */
  height: 24px; /* Slightly smaller */
  flex-shrink: 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px; /* Adjusted */
  width: 18px; /* Adjusted */
  left: 3px; /* Adjusted */
  bottom: 3px; /* Adjusted */
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--highlight);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--highlight);
}

input:checked + .slider:before {
  transform: translateX(24px); /* Adjusted */
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* --- End Settings Tab Specific Styles --- */

/* --- Invite Modal --- */
.filter-dropdown {
    display: none; /* Explicitly ensure it's hidden by default */
    position: absolute;
    top: calc(100% + 8px); /* Position below the button */
    right: 0;
}

/* --- Assistants Filter Dropdown --- */
.filter-container {
    position: relative; /* Needed for absolute positioning of dropdown */
}

.filter-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: calc(100% + 8px); /* Position below the button */
    right: 0;
    width: 280px; /* Adjust width as needed */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1010; /* Ensure it's above table content */
    padding: 12px;
    animation: fadeInDropdown 0.15s ease-out;
}

.filter-dropdown.active {
    display: block;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-section {
    margin-bottom: 12px;
}

.filter-section h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
}

.filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--highlight);
    cursor: pointer;
}

.filter-option:hover span {
    color: var(--text-primary);
}

.filter-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 12px 0;
}

.filter-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* --- End Assistants Filter Dropdown --- */


/* --- Add Assistant Modal Logic --- */
.filter-dropdown {
    display: none; /* Explicitly ensure it's hidden by default */
    position: absolute;
    top: calc(100% + 8px); /* Position below the button */
    right: 0;
}

/* Checkbox Styles */
input[type="checkbox"].checkbox-all,
input[type="checkbox"].checkbox-row {
    appearance: none; /* Remove default browser styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle; /* Align with text if needed */
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"].checkbox-all:hover,
input[type="checkbox"].checkbox-row:hover {
    border-color: var(--highlight);
}

input[type="checkbox"].checkbox-all:checked,
input[type="checkbox"].checkbox-row:checked {
    background-color: var(--highlight);
    border-color: var(--highlight);
}

/* Custom checkmark using SVG */
input[type="checkbox"].checkbox-all:checked::after,
input[type="checkbox"].checkbox-row:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}

/* Indeterminate state for 'select all' (optional but good UX) */
input[type="checkbox"].checkbox-all:indeterminate {
    background-color: var(--highlight);
    border-color: var(--highlight);
}

input[type="checkbox"].checkbox-all:indeterminate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px; /* Make it a line */
    background-color: var(--text-primary);
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

/* Adjustments for table layout */
.assistants-table th:first-child,
.assistants-table td:first-child {
    padding-left: 16px; /* Align checkbox visually */
    padding-right: 8px;
    width: 40px; /* Fixed width for checkbox column */
}

/* --- End Checkbox Styles --- */


/* --- Settings Styles --- */

/* --- End Reels Tab --- */

/* --- Reels List Section Specific Styles --- */
.reels-list-section {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-top: 32px; /* Space after Daily Stats */
    margin-bottom: 32px; /* Added bottom spacing */
}

.reels-list-table {
    border-collapse: separate; /* Required for row spacing */
    border-spacing: 0 12px; /* Horizontal 0, Vertical 12px spacing */
    width: 100%;
}

/* Remove default table borders */
.reels-list-table th,
.reels-list-table td {
    border: none;
    vertical-align: middle;
}

/* Style header */
.reels-list-table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 13px; /* Slightly smaller header */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Style each row as a block */
.reels-list-table tbody tr {
    background-color: var(--bg-primary); /* Darker background for rows */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensure children respect rounded corners */
    transition: background-color 0.2s ease;
}

.reels-list-table tbody tr:hover {
    background-color: var(--accent-light); /* Hover effect */
}

/* Adjust padding for cells within the new row style */
.reels-list-table td {
    padding: 10px 16px; /* Consistent padding */
}

/* Ensure first and last cell borders match row rounding */
.reels-list-table td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.reels-list-table td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Preview Column */
.column-reel-preview {
    width: 60px; /* Reduced width */
}

.reel-preview-img {
    width: 40px; /* Smaller preview image */
    height: 60px; /* Smaller preview image */
    object-fit: cover;
    border-radius: 4px;
    display: block; /* Prevents extra space below image */
    transition: transform 0.2s ease;
}

.column-reel-preview a:hover .reel-preview-img {
    transform: scale(1.05);
}

/* Caption Column */
.column-reel-caption {
    max-width: 300px; /* Limit caption width */
}

.caption-text {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px; /* Slightly smaller font */
    line-height: 1.3;
    color: var(--text-secondary);
}

/* Account Column */
.column-reel-account a {
    color: var(--highlight);
    text-decoration: none;
    font-size: 13px; /* Smaller font */
}

.column-reel-account a:hover {
    text-decoration: underline;
}

/* Views Column */
.column-reel-views {
    min-width: 90px; /* Slightly reduced width */
}

.column-reel-views .stats-value {
    font-weight: 500;
    margin-right: 6px; /* Reduced margin */
    font-size: 14px;
}

.column-reel-views .stats-trend {
    font-size: 12px; /* Smaller trend text */
}

/* Likes/Comments Column */
.column-reel-likes,
.column-reel-comments {
    text-align: right; /* Align numbers to the right */
    min-width: 70px; /* Reduced width */
    font-size: 14px;
}

/* Assistant Column */
.column-reel-assistant .assistant-info {
    gap: 8px; /* Adjust gap */
}

/* Reduce size of assistant avatar within reels table */
.reels-list-table .assistant-avatar-sm {
    width: 20px;
    height: 20px;
}

.column-reel-assistant .assistant-info span {
    font-size: 12px; /* Smaller name */
}

/* Updated/Posted Column */
.column-reel-posted,
.column-reel-updated {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 90px;
}

/* --- End Reels List Styles --- */


/* --- Assistants Tab --- */

/* Ensure header actions can contain positioned elements */
.reels-list-section .header-actions {
    position: relative; /* Needed for absolute positioning of the dropdown */
    display: flex; /* Align buttons horizontally */
    align-items: center;
    gap: 8px; /* Add some space between buttons */
}

/* Settings Dropdown Styles */
.settings-dropdown {
    display: none; /* Hidden by default, JS will toggle */
    position: absolute;
    top: 100%; /* Position below the button */
    right: 0;  /* Align to the right of the header actions */
    background-color: var(--bg-secondary); /* Apply theme background */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Consistent rounding */
}

/* --- Page Title Loader Animation --- */
.page-title-indicator {
    display: none; /* Hidden by default */
    align-items: center;
    padding: 6px 12px;
    background-color: rgba(34, 34, 34, 0.7); /* Semi-transparent card bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-left: 12px; /* Space from the title */
    backdrop-filter: blur(4px);
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-title-indicator.visible {
    display: inline-flex; /* Use inline-flex to show */
    opacity: 1;
}

.loader {
    border: 4px solid rgba(255, 255, 255, .2); /* Reverted border */
    border-left-color: var(--text-primary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin89345 1s linear infinite;
    display: none; /* Still hidden by default */
    /* vertical-align: middle; Remove this, flex handles alignment */
    margin-left: 0; /* Remove left margin here */
    margin-right: 8px; /* Add right margin for spacing from text */
    flex-shrink: 0; /* Prevent shrinking */
}

.page-title-indicator.visible.loading .loader {
    display: block; /* Change to block or inline-block, let flex handle layout */
}

.page-title-indicator .indicator-text {
    margin-left: 4px; /* Add small left margin to text */
}

@keyframes spin89345 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  /* --- End Page Title Loader Animation --- */

/* --- Image Lightbox Modal Styles --- */
.image-lightbox {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
    opacity: 0; /* Start transparent for transition */
    transition: opacity 0.3s ease-in-out; /* Transition opacity */
    pointer-events: none; /* Prevent interaction when hidden */
}

.image-lightbox.active {
    display: block; /* Become block when active */
    opacity: 1; /* Fade in */
    pointer-events: auto; /* Allow interaction when active */
}

/* Modal Content (the image) */
.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* Close Button */
.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Optional Caption */
#lightboxCaption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add responsiveness - smaller image on smaller screens */
@media only screen and (max-width: 700px){
    .lightbox-content {
        width: 100%;
    }
}
/* --- End Image Lightbox Modal Styles --- */

/* --- Bio Tooltip Styles --- */
.bio-tooltip {
    position: absolute;
    background-color: var(--bg-primary); /* Darker background */
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 13px;
    max-width: 300px; /* Limit width */
    word-wrap: break-word; /* Wrap long text */
    white-space: normal; /* Allow wrapping */
    z-index: 1100; /* Above other content */
    pointer-events: none; /* Don't interfere with mouse */
    opacity: 0;
    transition: opacity 0.2s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* --- End Bio Tooltip Styles --- */

/* --- UPDATED NEW STATUS BADGE --- */
@keyframes pulse-star {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

.status-badge.new {
    position: relative; 
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(100, 181, 246, 0.25)); /* Subtle gradient */
    color: #90CAF9; /* Even lighter blue text */
    padding-right: 18px; 
    font-weight: 500;
    border: 1px solid rgba(100, 181, 246, 0.3); /* Subtle border */
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3); /* Soft glow */
}

.status-badge.new::after {
    content: '✦'; /* Changed to a different star/sparkle character */
    position: absolute;
    top: 1px; /* Adjusted position */
    right: 4px; /* Adjusted position */
    font-size: 11px; 
    color: #E3F2FD; /* Very light blue/white for star */
    line-height: 1;
    text-shadow: 0 0 3px rgba(100, 181, 246, 0.7);
    animation: pulse-star 2s infinite ease-in-out;
}
/* --- END UPDATED NEW STATUS BADGE --- */

/* Assistant info */

/* --- End Bio Tooltip Styles --- */

/* --- Table Sorting Styles --- */
.sortable-header {
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
    position: relative; /* For indicator positioning if needed */
}

.sortable-header:hover {
    color: var(--text-primary); /* Indicate hover */
}

.sort-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin-left: 6px;
    opacity: 0.5; /* Dim by default */
    transition: opacity 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
}

.sortable-header.sort-asc .sort-indicator {
    border-bottom: 5px solid var(--text-secondary); /* Arrow up */
    opacity: 1;
    transform: translateY(-2px);
}

.sortable-header.sort-desc .sort-indicator {
    border-top: 5px solid var(--text-secondary); /* Arrow down */
    opacity: 1;
    transform: translateY(2px);
}
/* --- End Table Sorting Styles --- */

/* --- Settings Styles --- */

/* --- UPDATED WARMING-UP STATUS BADGE --- */
.status-badge.warming-up {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 204, 51, 0.25));
    color: #FFE082; /* Lighter yellow text */
    border: 1px solid rgba(255, 204, 51, 0.3);
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
    padding-right: 18px; /* Space for icon */
}

.status-badge.warming-up::after {
    content: '▲'; /* Up arrow / triangle */
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 10px; /* Slightly smaller */
    color: #FFF9C4; /* Very light yellow */
    line-height: 1;
    opacity: 0.8;
}

/* --- REMOVED .restricted and .pending styles if they existed --- */

/* --- NEW SHADOW BANNED STATUS BADGE --- */
.status-badge.shadow-banned {
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.2), rgba(90, 90, 90, 0.25)); /* Dark grey gradient */
    color: #BDBDBD; /* Grey text */
    border: 1px solid rgba(120, 120, 120, 0.3);
    box-shadow: 0 0 8px rgba(80, 80, 80, 0.3);
    padding-right: 18px; /* Space for icon */
}

.status-badge.shadow-banned::after {
    content: '👻'; /* Ghost emoji */
    position: absolute;
    top: 50%;
    right: 5px; /* Adjust position */
    transform: translateY(-50%);
    font-size: 11px;
    color: #E0E0E0; /* Light grey */
    line-height: 1;
    opacity: 0.7;
}

/* --- UPDATED NEW STATUS BADGE --- */
@keyframes pulse-star {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

.status-badge.new {
    position: relative; 
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(100, 181, 246, 0.25)); /* Subtle gradient */
    color: #90CAF9; /* Even lighter blue text */
    padding-right: 18px; 
    font-weight: 500;
    border: 1px solid rgba(100, 181, 246, 0.3); /* Subtle border */
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3); /* Soft glow */
}

.status-badge.new::after {
    content: '✦'; /* Changed to a different star/sparkle character */
    position: absolute;
    top: 1px; /* Adjusted position */
    right: 4px; /* Adjusted position */
    font-size: 11px; 
    color: #E3F2FD; /* Very light blue/white for star */
    line-height: 1;
    text-shadow: 0 0 3px rgba(100, 181, 246, 0.7);
    animation: pulse-star 2s infinite ease-in-out;
}
/* --- END UPDATED NEW STATUS BADGE --- */

/* --- Fullscreen Modal for Assistant Details --- */
.fullscreen-modal .modal-content {
    width: 90vw; /* 90% of viewport width */
    max-width: 1200px; /* Max width */
    height: 85vh; /* 85% of viewport height */
    max-height: 800px; /* Max height */
    display: flex;
    flex-direction: column;
}

.assistant-details-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex-grow: 1; /* Allows body to take remaining space */
}

.assistant-details-grid {
    display: grid;
    grid-template-columns: 300px 1fr; /* Sidebar for profile, main content for others */
    gap: 24px;
    height: 100%;
}

.assistant-profile-overview {
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: fit-content;
}

.assistant-detail-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
    border: 3px solid var(--border-color-light);
}

.assistant-profile-overview h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.assistant-profile-overview p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.assistant-profile-overview .status-badge {
    margin-top: 8px;
}

.assistant-detail-section {
    padding: 16px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.assistant-detail-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

/* To-Do List Styling */
.todos-section #assistantTodoForm {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.todos-section #assistantTodoForm input[type="text"],
.todos-section #assistantTodoForm textarea,
.todos-section #assistantTodoForm select {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 0.9rem;
}

.todos-section #assistantTodoForm textarea {
    min-height: 40px;
    resize: vertical;
    width: 100%;
}

.todos-section #assistantTodoForm input[type="text"] {
    min-width: 150px;
}

.todos-section #assistantTodoForm select {
    flex-grow: 0;
    min-width: 100px;
}

.todos-section #assistantTodoForm button {
    padding: 8px 12px;
    align-self: flex-end;
}

#assistantTodoListContainer {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 100px;
}

#assistantTodoListContainer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#assistantTodoListContainer li {
    padding: 10px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color-extralight);
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
}

#assistantTodoListContainer li.completed {
    background-color: var(--bg-completed); /* A slightly different bg for completed */
    border-left: 3px solid var(--accent-success);
}

#assistantTodoListContainer li.completed .todo-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.todo-complete-checkbox {
    margin-right: 10px;
    transform: scale(1.2); /* Make checkbox slightly larger */
    cursor: pointer;
}

.todo-title {
    flex-grow: 1;
    color: var(--text-primary);
}
.todo-priority, .todo-due-date {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-left: 10px;
    padding: 2px 5px;
    background-color: var(--bg-primary);
    border-radius: 3px;
}

#assistantTodoListContainer li .btn { /* Target buttons inside list items */
    margin-left: 5px;
    padding: 4px 8px; /* Smaller padding for xs buttons */
    font-size: 0.8em; /* Smaller font size */
}


#assistantTodoFormContainer {
    padding: 15px;
    background-color: var(--bg-secondary);
    border-radius: 6px;
    margin-top: 15px;
    border: 1px solid var(--border-color-light);
}

#assistantTodoForm .form-group {
    margin-bottom: 12px;
}

#assistantTodoForm label {
    font-size: 0.9em;
    margin-bottom: 4px;
}

#assistantTodoForm .form-control {
    font-size: 0.9em;
    padding: 8px 10px;
}

#assistantTodoForm textarea.form-control {
    min-height: 60px;
}

#assistantTodoForm .btn-primary,
#assistantTodoForm .btn-secondary {
    margin-right: 8px;
    padding: 6px 12px;
    font-size: 0.9em;
}

/* Ensure status badge styling is available for the profile overview as well */
.status-badge.active { background-color: var(--accent-success-bg); color: var(--accent-success); border: 1px solid var(--accent-success); }
.status-badge.invited { background-color: var(--accent-info-bg); color: var(--accent-info); border: 1px solid var(--accent-info); }
.status-badge.pending { background-color: var(--accent-warning-bg); color: var(--accent-warning); border: 1px solid var(--accent-warning); }
.status-badge.paused { background-color: var(--accent-paused-bg); color: var(--accent-paused); border: 1px solid var(--accent-paused); }
.status-badge.unknown { background-color: var(--bg-muted); color: var(--text-muted); border: 1px solid var(--border-color-light); }

/* Variables if not already defined (add to the top of your CSS or adjust as needed) */
:root {
    --bg-completed: #2a3a2b; /* Example color for completed tasks */
    --accent-success: #4CAF50;
    --accent-success-bg: rgba(76, 175, 80, 0.1);
    --accent-info: #2196F3;
    --accent-info-bg: rgba(33, 150, 243, 0.1);
    --accent-warning: #FFC107;
    --accent-warning-bg: rgba(255, 193, 7, 0.1);
    --accent-paused: #757575; /* Example */
    --accent-paused-bg: rgba(117, 117, 117, 0.1); /* Example */
    --text-muted: #9e9e9e;
    --border-color-extralight: #3a3a3a;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Made round again */
    object-fit: cover;
    margin-bottom: 16px;
    border: 3px solid var(--highlight);
}

/* ... existing code ... */
.todos-section {
    background-color: var(--bg-primary);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color-light);
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    min-height: 0; 
    /* No overflow-y: auto here, let the parent .assistant-first-column handle scrolling */
}

/* ... existing code ... */
#assistantTodoListContainer {
    flex-grow: 1; 
    /* Removed overflow-y: auto; to let it expand fully */
    /* Removed max-height; to let it expand fully */
    min-height: 250px; /* Keep a minimum height */
    padding-right: 0px; /* No need for scrollbar padding if it doesn't scroll itself */
}

/* ... existing code ... */

/* ... existing code ... */
.item-info .status-badge { /* Status badge within account item */
    margin-top: 6px;
    display: inline-block; /* Ensure it behaves as expected */
}

/* Activity Feed Placeholder - ensure it also looks consistent */
#assistantActivityFeedContainer {
    flex-grow: 1;
    overflow-y: auto;
}
#assistantActivityFeedContainer p {
    font-style: italic;
    color: var(--text-secondary);
    padding: 10px 0;
}

/* Ensure profile overview text elements have sensible bottom margins */
.assistant-profile-overview h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.4em;
    color: var(--text-primary);
    font-weight: 600;
}

.assistant-profile-overview p {
    margin-bottom: 8px;
    font-size: 0.9em;
    color: var(--text-secondary);
}
.assistant-profile-overview p:last-child {
    margin-bottom: 0;
}

.assistant-profile-overview p .status-badge {
    font-size: 0.85em;
    padding: 3px 8px;
}


/* Remove max-height from .assistant-items-container if its parent .assistant-detail-section will control scrolling */
.assistant-detail-section.accounts-section,
.assistant-detail-section.reels-section,
.assistant-detail-section.activity-section {
    flex-grow: 1; /* Allow these sections to take space */
    min-height: 0; /* For flexbox overflow */
}
.assistant-detail-section.accounts-section .assistant-items-container,
.assistant-detail-section.reels-section .assistant-items-container {
    max-height: none; /* Remove max-height, let section scroll */
    flex-grow: 1; /* Let container fill the section */
}

/* End of intended CSS. Remove duplicated content after this line. */

/* Assistant Details Modal Enhancements */
#assistantDetailsModal .modal-content {
    /* Keep existing styles like background, padding, border-radius */
    width: 90vw; /* Make it wide */
    max-width: 1300px; /* But not excessively wide on very large screens */
    height: 85vh; /* Make it tall */
    max-height: 900px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent modal content from making the whole page scroll */
}

#assistantDetailsModal .modal-header {
    flex-shrink: 0;
}

#assistantDetailsModal .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* Allow body to scroll if content exceeds height */
    padding: 20px; /* Ensure padding is consistent */
}

.assistant-details-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 2fr; /* First column for profile/activity, second for main content */
    gap: 25px; /* Increased gap for more spacing */
    height: 100%; /* Ensure grid takes full height of modal body */
}

.assistant-first-column, .assistant-main-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Spacing between sections in the same column */
    overflow-y: auto; /* Allow individual columns to scroll if their content is too long */
    padding-right: 10px; /* Add some padding to prevent scrollbars from overlapping content */
}

/* Make scrollbars less obtrusive */
.assistant-first-column::-webkit-scrollbar, 
.assistant-main-content::-webkit-scrollbar {
    width: 8px;
}

.assistant-first-column::-webkit-scrollbar-thumb, 
.assistant-main-content::-webkit-scrollbar-thumb {
    background-color: var(--medium-gray); /* Corrected to --medium-gray */
    border-radius: 4px;
}

.assistant-first-column::-webkit-scrollbar-track, 
.assistant-main-content::-webkit-scrollbar-track {
    background-color: var(--dark-gray); /* Corrected to --dark-gray */
}


.assistant-profile-overview {
    background-color: var(--dark-gray); /* Corrected to --dark-gray */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px; /* Spacing below this specific card */
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid var(--highlight);
}

.assistant-detail-section {
    background-color: var(--dark-gray); /* Corrected to --dark-gray */
    padding: 20px;
    border-radius: 8px;
    /* Removed margin-bottom from here, handled by parent flex gap or specific overrides */
}

.assistant-detail-section h4 {
    margin-bottom: 15px;
    color: var(--light-gray); /* Corrected to --light-gray */
    border-bottom: 1px solid var(--medium-gray); /* Corrected to --medium-gray */
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assistant-items-container {
    max-height: 300px; /* Example max height, adjust as needed */
    overflow-y: auto;
    padding-right: 5px; /* Space for scrollbar */
}

.assistant-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.assistant-account-item, .assistant-reel-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--medium-gray); /* Corrected to --medium-gray */
}
.assistant-account-item:last-child, .assistant-reel-item:last-child {
    border-bottom: none;
}

.item-avatar, .item-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    margin-right: 15px;
    object-fit: cover;
}

.item-info .item-title {
    font-weight: bold;
    color: var(--light-gray); /* Corrected to --light-gray */
    display: block;
    margin-bottom: 3px;
}

.item-info .item-description {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.item-info .item-meta, .item-info .item-date {
    font-size: 0.8em;
    color: var(--text-secondary);
    display: block;
}

/* To-Do List Specific Styles in Modal */
.todos-section #assistantTodoListContainer {
    /* max-height: none; /* Remove max-height if the column itself should scroll */
    /* overflow-y: visible; */
}

.todos-section #assistantTodoListContainer ul {
    padding-left: 0; /* Remove default ul padding */
    list-style-type: none;
}

.todos-section #assistantTodoListContainer li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px;
    border-bottom: 1px solid var(--medium-gray); /* Corrected to --medium-gray */
    transition: background-color 0.2s ease;
}
.todos-section #assistantTodoListContainer li:last-child {
    border-bottom: none;
}

.todos-section #assistantTodoListContainer li.completed .todo-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.todos-section #assistantTodoListContainer li:hover {
    background-color: var(--medium-gray); /* Corrected to --medium-gray */
}

.todos-section .todo-complete-checkbox {
    margin-right: 10px;
    transform: scale(1.2);
}

.todos-section .todo-title {
    flex-grow: 1;
    color: var(--light-gray); /* Corrected to --light-gray */
}

.todos-section .todo-priority {
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    color: #fff;
}
.todos-section .todo-priority.low {
    background-color: var(--info-light);
    color: var(--info-dark);
}
.todos-section .todo-priority.medium {
    background-color: var(--warning-light);
    color: var(--warning-dark);
}
.todos-section .todo-priority.high {
    background-color: var(--danger-light);
    color: var(--danger-dark);
}

.todos-section #assistantTodoFormContainer {
    background-color: var(--darker-gray); /* Corrected to --darker-gray */
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.todos-section #assistantTodoForm .form-group {
    margin-bottom: 10px;
}

.todos-section #assistantTodoForm .form-row {
    display: flex;
    gap: 10px;
    align-items: flex-end; /* Align items at the bottom if heights differ */
}

.todos-section #assistantTodoForm .form-row .form-group {
    flex: 1;
    margin-bottom: 0; /* Remove bottom margin as gap is handled by .form-row */
}

.todos-section #assistantTodoForm .form-actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Ensure status badges in modal are styled */
#assistantDetailsModal .status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
    display: inline-flex; /* Use inline-flex for better alignment with text */
    align-items: center;   /* Vertically align items if you add icons */
    line-height: 1.2;    /* Adjust line height for badges */
}

#assistantDetailsModal .status-badge.active {
    background-color: var(--success-light);
    color: var(--success-dark);
}
#assistantDetailsModal .status-badge.invited {
    background-color: var(--info-light);
    color: var(--info-dark);
}
#assistantDetailsModal .status-badge.paused {
    background-color: var(--warning-light);
    color: var(--warning-dark);
}
#assistantDetailsModal .status-badge.unknown {
    background-color: var(--medium-grey);
    color: var(--light-grey);
}


/* General Modal Styles (Ensure these are generic enough) */
.modal {
/* ... existing code ... */
}

/* Styling for a potentially smaller generic modal */
.small-modal-content {
    max-width: 450px; /* Adjust as needed for confirmation/message dialogs */
}

#genericModal .modal-body p {
    margin-bottom: 0; /* Remove default paragraph margin if it's the only content */
}

/* Bio Tooltip (can be reused or adapted) */
.bio-tooltip {
    /* Styles for bio tooltip - assumed to exist elsewhere or be similar */
}

/* NEW: Caption Tooltip */
.caption-tooltip {
    position: absolute;
    background-color: var(--darker-gray); /* Match theme */
    color: var(--light-gray);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    z-index: 1005; /* Ensure it's above other elements, but below modals if needed */
    max-width: 350px; /* Prevent excessively wide tooltips */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    white-space: pre-wrap; /* Allow newlines in caption to be respected */
    pointer-events: none; /* Tooltip itself should not be interactive */
}

.caption-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;
}

/* Ensure reel captions can be targeted and have necessary styles for truncation check */
.column-reel-caption .caption-text {
    /* Ensure this class exists on the caption text div and has overflow properties */
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; /* Or other properties that cause overflow to check */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 2; */ /* Example: show 2 lines */
    /* -webkit-box-orient: vertical; */
}

/* ... existing code ... */

.reel-stat-trend {
  display: block; /* Or inline-block if you prefer them next to something */
  font-size: 0.75em;
  margin-top: 2px;
  margin-left: 5px; /* Optional: if you want some space from the stat value */
}

.trend-positive {
  color: var(--green-accent); /* Or your preferred positive color */
}

.trend-negative {
  color: var(--red-accent); /* Or your preferred negative color */
}

.trend-stagnant {
  color: var(--medium-gray); /* Or your preferred neutral color */
}

/* Optional: if you want to use icons instead of text for trends */
.reel-stat-trend .icon-up::before {
  content: '▲';
}

.reel-stat-trend .icon-down::before {
  content: '▼';
}

.reel-stat-trend .icon-stagnant::before {
  content: '▬'; /* Or '–' or similar */
}

/* ... existing code ... */

/* NEW: Styles for numerical trend value */
.trend-value {
  font-size: 0.7em; /* Smaller than main stat */
  margin-left: 5px;
  font-weight: 500;
}

.trend-value.positive {
  color: var(--green-accent); /* Existing positive color */
}

.trend-value.negative {
  color: var(--red-accent); /* Existing negative color */
}

/* Ensure --green-accent and --red-accent are defined in :root */
/* Example (add to your :root if not present): */
/* 
:root {
  --green-accent: #4CAF50; 
  --red-accent: #F44336;
}
*/

/* ... existing code ... */