.social-label {
    font-size: 1.3rem;
}
.social-label i {
    font-size: 2rem;
}

.packages-container {
    padding: 2rem 0;
}

.package-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    border: none;
    padding-bottom: 100px;;
}

.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.package-header {
    padding: 2rem 2rem 1rem;
    text-align: center;
    position: relative;
}

.package-name {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.package-price {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.package-duration {
    color: #666;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .popular-badge {
        position: absolute;
        top: 17px;
        right: -35px;
        background: #ff4757;
        color: white;
        padding: 8px 50px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 0.9rem;
        transform: rotate(44deg);
        box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3);
    }

    .activated-badge {
        position: absolute;
        top: 17px;
        left: -35px;
        background: #10b981;
        color: white;
        padding: 8px 50px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 0.9rem;
        transform: rotate(-44deg);
        box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
    }
.features-list {
    padding: 0 2rem 2rem;
}

.feature-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-icon {
    color: #28a745 !important;
    margin-right: 12px;
    font-size: 1.2rem;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 1rem 0;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.facebook { background: #1877f2; }
.instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.tiktok { background: #000; }
.linkedin { background: #0077b5; }

.contact-section {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 3rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contact-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #333;
}

.contact-info {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 1rem;
}

.contact-details {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
}

/* Package specific colors */
.silver .package-name { color: #8e9aaf; }
.silver .package-price { color: #8e9aaf; }

.gold .package-name { color: #f39c12; }
.gold .package-price { color: #f39c12; }
.gold .package-card {
    border: 3px solid #f39c12;
    transform: scale(1.05);
}

.platinum .package-name { color: #34495e; }
.platinum .package-price { color: #34495e; }

@media (max-width: 768px) {
    .package-card {
        margin-bottom: 2rem;
    }
    
    .gold .package-card {
        transform: none;
    }
}

.package-footer{
    padding: 1rem 2rem;
    text-align: center;
    background: #f8f9fa;
    border-radius: 0 0 20px 20px;
    font-size: 1.1rem;
    color: #666;
    /* should be possion bottom 0  of parent div*/
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}


/* package dark mode */

/* Social & Package Components Dark Mode */

/* Social Label Dark Mode */
[data-bs-theme="dark"] .social-label,
.dark-mode .social-label,
[data-theme="dark"] .social-label {
    color: #e5e7eb;
}

/* Package Card Dark Mode */
[data-bs-theme="dark"] .package-card,
.dark-mode .package-card,
[data-theme="dark"] .package-card {
    background: #1e2129;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid #2d3748;
}

[data-bs-theme="dark"] .package-card:hover,
.dark-mode .package-card:hover,
[data-theme="dark"] .package-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Package Header Dark Mode */
[data-bs-theme="dark"] .package-name,
.dark-mode .package-name,
[data-theme="dark"] .package-name {
    color: #f8fafc;
}

[data-bs-theme="dark"] .package-price,
.dark-mode .package-price,
[data-theme="dark"] .package-price {
    color: #f8fafc;
}

[data-bs-theme="dark"] .package-duration,
.dark-mode .package-duration,
[data-theme="dark"] .package-duration {
    color: #9ca3af;
}

/* Badge styles remain the same as they have specific brand colors */
[data-bs-theme="dark"] .popular-badge,
.dark-mode .popular-badge,
[data-theme="dark"] .popular-badge {
    background: #ff4757;
    color: white;
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
}

[data-bs-theme="dark"] .activated-badge,
.dark-mode .activated-badge,
[data-theme="dark"] .activated-badge {
    background: #10b981;
    color: white;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
}

/* Features List Dark Mode */
[data-bs-theme="dark"] .feature-item,
.dark-mode .feature-item,
[data-theme="dark"] .feature-item {
    border-bottom: 1px solid #374151;
    color: #cbd5e1;
}

[data-bs-theme="dark"] .feature-icon,
.dark-mode .feature-icon,
[data-theme="dark"] .feature-icon {
    color: #10b981 !important;
}

/* Social Icons remain the same as they have brand-specific colors */

/* Contact Section Dark Mode */
[data-bs-theme="dark"] .contact-section,
.dark-mode .contact-section,
[data-theme="dark"] .contact-section {
    background: rgba(30, 33, 41, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid #2d3748;
}

[data-bs-theme="dark"] .contact-title,
.dark-mode .contact-title,
[data-theme="dark"] .contact-title {
    color: #f8fafc;
}

[data-bs-theme="dark"] .contact-info,
.dark-mode .contact-info,
[data-theme="dark"] .contact-info {
    color: #9ca3af;
}

[data-bs-theme="dark"] .contact-details,
.dark-mode .contact-details,
[data-theme="dark"] .contact-details {
    color: #e5e7eb;
}

/* Package Specific Colors Dark Mode */
[data-bs-theme="dark"] .silver .package-name,
[data-bs-theme="dark"] .silver .package-price,
.dark-mode .silver .package-name,
.dark-mode .silver .package-price,
[data-theme="dark"] .silver .package-name,
[data-theme="dark"] .silver .package-price {
    color: #94a3b8;
}

[data-bs-theme="dark"] .gold .package-name,
[data-bs-theme="dark"] .gold .package-price,
.dark-mode .gold .package-name,
.dark-mode .gold .package-price,
[data-theme="dark"] .gold .package-name,
[data-theme="dark"] .gold .package-price {
    color: #f39c12;
}

[data-bs-theme="dark"] .gold .package-card,
.dark-mode .gold .package-card,
[data-theme="dark"] .gold .package-card {
    border: 3px solid #f39c12;
    background: #1e2129;
    box-shadow: 0 20px 40px rgba(243, 156, 18, 0.2);
}

[data-bs-theme="dark"] .platinum .package-name,
[data-bs-theme="dark"] .platinum .package-price,
.dark-mode .platinum .package-name,
.dark-mode .platinum .package-price,
[data-theme="dark"] .platinum .package-name,
[data-theme="dark"] .platinum .package-price {
    color: #64748b;
}

/* Package Footer Dark Mode */
[data-bs-theme="dark"] .package-footer,
.dark-mode .package-footer,
[data-theme="dark"] .package-footer {
    background: #252932;
    color: #9ca3af;
    border-top: 1px solid #374151;
}

/* Scrollbar Dark Mode */
[data-bs-theme="dark"] ::-webkit-scrollbar,
.dark-mode ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track,
.dark-mode ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #252932;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb,
.dark-mode ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover,
.dark-mode ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* end of packaga dark mode */




/* Calender */
 .social-calendar-container {
            max-width: 100%;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 0 50px rgba(0,0,0,0.08);
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            border-radius: 12px;
            color: white;
        }

        .calendar-title {
            font-size: 28px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .calendar-nav {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .nav-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 12px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .nav-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .mode-selector {
            display: flex;
            background: rgba(255,255,255,0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        .mode-btn {
            background: transparent;
            border: none;
            color: white;
            padding: 10px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .mode-btn.active {
            background: rgba(255,255,255,0.3);
        }

        .calendar-grid {
            display: grid;
            gap: 1px;
            background: #e1e5e9;
            border-radius: 8px;
            overflow: hidden;
        }

        .calendar-grid.month-view {
            grid-template-columns: repeat(7, 1fr);
        }

        .calendar-grid.week-view {
            grid-template-columns: repeat(7, 1fr);
        }

        .calendar-grid.day-view {
            grid-template-columns: 1fr;
        }

        .calendar-day-header {
            background: #3f4254;
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
        }

        .calendar-day {
            background: white;
            min-height: 120px;
            padding: 12px;
            position: relative;
            transition: all 0.3s ease;
        }

        .calendar-day:hover {
            background: #f8f9fa;
        }

        .calendar-day.other-month {
            background: #f5f8fa;
            color: #a1a5b7;
        }

        .calendar-day.today {
            background: linear-gradient(135deg, #fff5f0 0%, #ffe8d4 100%);
            border: 2px solid #ff6b35;
        }

        .day-number {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 8px;
            color: #181c32;
        }

        .calendar-day.other-month .day-number {
            color: #a1a5b7;
        }

        .task-card {
            background: white;
            border-radius: 8px;
            padding: 8px 12px;
            margin-bottom: 6px;
            border-left: 4px solid #ff6b35;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(255,107,53,0.2);
        }

        .task-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #ff6b35, #f7931e);
        }

        .task-title {
            font-size: 13px;
            font-weight: 600;
            color: #181c32;
            margin-bottom: 4px;
            line-height: 1.2;
            width: 93%;;
        }
        .organization-name {
                font-size: 11px;
                font-weight: 500;
                color: slategray;
        }


        .task-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: #7e8299;
        }

        .task-time {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .task-status {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .status-published {
            background: #e8f5e8;
            color: #1bc51b;
        }
        .status-completed {
            background: #18c218;
            color: #ffffff;
        }

        .status-draft {
            background: #ffeaa7;
            color: #fdcb6e;
        }

        .status-scheduled {
            background: #e3f2fd;
            color: #2196f3;
        }
          .status-in_progress {
               background: #5a45cf;
                color: #ffffff;
          }

        .status-pending {
            background: #fff3e0;
            color: #ff9800;
        }

        .platform-icons {
            display: flex;
            gap: 4px;
            margin-top: 4px;
        }

        .platform-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: white;
        }

        .platform-facebook { background: #3b5998; }
        .platform-twitter { background: #1da1f2; }
        .platform-instagram { background: #e4405f; }
        .platform-linkedin { background: #0077b5; }
        .platform-youtube { background: #ff0000; }
        .platform-tiktok { background: #000000; }

        .type-tag {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
            margin-top: 4px;
                float: right;
        }

.tag-post {
    background: #e8f4f8;
    color: #1bc5bd;
}
.tag-post::before {
    content: "\f249"; /* thumbtack or any relevant icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-video {
    background: #fff0e6;
    color: #ff6b35;
}
.tag-video::before {
    content: "\f03d"; /* video */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-timeline {
    background: #f3f4f6;
    color: #6366f1;
}
.tag-timeline::before {
    content: "\f017"; /* clock */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-reel {
    background: #f0f4ff;
    color: #3b82f6;
}
.tag-reel::before {
    content: "\f008"; /* film */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-carousel {
    background: #fef2f2;
    color: #ef4444;
}
.tag-carousel::before {
    content: "\f302"; /* images */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-single_post {
    background: #f9fafb;
    color: #4b5563;
}

.tag-single_post::before {
    content: "\f0c9"; /* file */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-story {
    background: #fef3c7;
    color: #f59e0b;
}
.tag-story::before {
    content: "\f0f3"; /* camera */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-ad {
    background: #fef9c3;
    color: #f59e0b;
}
.tag-ad::before {
    content: "\f0a1"; /* bullhorn */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
}

.tag-design {
            background: #e0f7fa;
            color: #00acc1;
        }
 .tag-design::before {
            content: "\f1c5"; /* paint brush */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-right: 6px;
        }  
        
        .tag-blog {
            background: #e0e7ff;
            color: #3730a3;
        }
        .tag-blog::before {
            content: "\f02d"; /* book icon */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-right: 6px;
        }


        
        .tag-news { background: #e8f5e8; color: #1bc51b; }
        .tag-entertainment { background: #f3e5f5; color: #8e24aa; }

        .week-view .calendar-day {
            min-height: 100px;
        }

        .day-view .calendar-day {
            min-height: 600px;
            max-width: 800px;
            margin: 0 auto;
        }

        .day-view .task-card {
            margin-bottom: 12px;
            padding: 15px;
        }

        .day-view .task-title {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .day-view .task-meta {
            font-size: 14px;
        }

        .empty-state {
            text-align: center;
            color: #a1a5b7;
            font-style: italic;
            margin-top: 20px;
        }

        @media (max-width: 768px) {
            .calendar-header {
                flex-direction: column;
                gap: 15px;
            }
            
            .calendar-grid.month-view {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .calendar-day {
                min-height: 80px;
            }
        }


        /* Alternative compact horizontal design */
        .calendar-counts-compact {
              display: flex;
                    
                gap: 1rem;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 1rem;
                padding: 0.1rem 0.5rem;
                background: white;
                border-radius: 12px;
                /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */
                /* border: 1px solid #e2e8f0; */
        }

        .compact-badge {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .compact-badge:hover {
            transform: scale(1.05);
        }

        .compact-badge.available {
            /* background: linear-gradient(135deg, #e0f2fe, #b3e5fc); */
            color: #0277bd;
            /* border: 1px solid #81d4fa; */
        }

        .compact-badge.used {
            /* background: linear-gradient(135deg, #e8f5e8, #c8e6c9); */
            color: #2e7d32;
            /* border: 1px solid #a5d6a7; */
        }

        .compact-badge.remaining {
            /* background: linear-gradient(135deg, #fff3e0, #ffcc80); */
            color: #ef6c00;
            /* border: 1px solid #ffb74d; */
        }

        .compact-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
        }

/* dark calender */
/* Dark Mode Calendar Styles for Metronic UI */

/* Main container dark mode */
[data-bs-theme="dark"] .social-calendar-container,
.dark .social-calendar-container {
    background: #1e1e2d;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
    border: 1px solid #2b2b40;
}

/* Calendar header dark mode */
[data-bs-theme="dark"] .calendar-header,
.dark .calendar-header {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    /* Keep the gradient as is for brand consistency */
}

/* Navigation buttons dark mode */
[data-bs-theme="dark"] .nav-btn,
.dark .nav-btn {
    background: rgba(255,255,255,0.15);
    color: white;
}

[data-bs-theme="dark"] .nav-btn:hover,
.dark .nav-btn:hover {
    background: rgba(255,255,255,0.25);
}

/* Mode selector dark mode */
[data-bs-theme="dark"] .mode-selector,
.dark .mode-selector {
    background: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .mode-btn.active,
.dark .mode-btn.active {
    background: rgba(255,255,255,0.25);
}

/* Calendar grid dark mode */
[data-bs-theme="dark"] .calendar-grid,
.dark .calendar-grid {
    background: #2b2b40;
}

/* Day headers dark mode */
[data-bs-theme="dark"] .calendar-day-header,
.dark .calendar-day-header {
    background: #1b1b29;
    color: #a1a5b7;
    border-bottom: 1px solid #2b2b40;
}

/* Calendar days dark mode */
[data-bs-theme="dark"] .calendar-day,
.dark .calendar-day {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
}

[data-bs-theme="dark"] .calendar-day:hover,
.dark .calendar-day:hover {
    background: #252542;
}

[data-bs-theme="dark"] .calendar-day.other-month,
.dark .calendar-day.other-month {
    background: #181826;
    color: #5e6278;
}

[data-bs-theme="dark"] .calendar-day.today,
.dark .calendar-day.today {
    background: linear-gradient(135deg, #2d1810 0%, #3d2417 100%);
    border: 2px solid #ff6b35;
}

/* Day numbers dark mode */
[data-bs-theme="dark"] .day-number,
.dark .day-number {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .calendar-day.other-month .day-number,
.dark .calendar-day.other-month .day-number {
    color: #5e6278;
}

/* Task cards dark mode */
[data-bs-theme="dark"] .task-card,
.dark .task-card {
    background: #2b2b40;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid #323248;
}

[data-bs-theme="dark"] .task-card:hover,
.dark .task-card:hover {
    background: #323248;
    box-shadow: 0 4px 20px rgba(255,107,53,0.3);
}

/* Task titles dark mode */
[data-bs-theme="dark"] .task-title,
.dark .task-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .organization-name,
.dark .organization-name {
    color: #a1a5b7;
}

/* Task meta dark mode */
[data-bs-theme="dark"] .task-meta,
.dark .task-meta {
    color: #a1a5b7;
}

/* Status badges dark mode adjustments */
[data-bs-theme="dark"] .status-published,
.dark .status-published {
    background: #1f3a1f;
    color: #4ade80;
}

[data-bs-theme="dark"] .status-draft,
.dark .status-draft {
    background: #3d2f1f;
    color: #fbbf24;
}

[data-bs-theme="dark"] .status-scheduled,
.dark .status-scheduled {
    background: #1e293b;
    color: #60a5fa;
}

[data-bs-theme="dark"] .status-in_progress,
.dark .status-in_progress {
    background: #059669;
    color: #ffffff;
}

[data-bs-theme="dark"] .status-pending,
.dark .status-pending {
    background: #3d2817;
    color: #fb923c;
}

/* Type tags dark mode */
[data-bs-theme="dark"] .tag-post,
.dark .tag-post {
    background: #1a2e2a;
    color: #34d399;
}

[data-bs-theme="dark"] .tag-video,
.dark .tag-video {
    background: #3d251a;
    color: #fb7c37;
}

[data-bs-theme="dark"] .tag-timeline,
.dark .tag-timeline {
    background: #1e1b3a;
    color: #8b5cf6;
}

[data-bs-theme="dark"] .tag-reel,
.dark .tag-reel {
    background: #1e2a44;
    color: #60a5fa;
}

[data-bs-theme="dark"] .tag-carousel,
.dark .tag-carousel {
    background: #3a1e1e;
    color: #f87171;
}

[data-bs-theme="dark"] .tag-single_post,
.dark .tag-single_post {
    background: #2a2a2a;
    color: #d1d5db;
}

[data-bs-theme="dark"] .tag-story,
.dark .tag-story {
    background: #3d2f1a;
    color: #fbbf24;
}

[data-bs-theme="dark"] .tag-ad,
.dark .tag-ad {
    background: #3d331a;
    color: #fcd34d;
}

[data-bs-theme="dark"] .tag-design,
.dark .tag-design {
    background: #1a2e2e;
    color: #22d3ee;
}

[data-bs-theme="dark"] .tag-news,
.dark .tag-news {
    background: #1f3a1f;
    color: #4ade80;
}

[data-bs-theme="dark"] .tag-entertainment,
.dark .tag-entertainment {
    background: #2e1a3a;
    color: #c084fc;
}

/* Empty state dark mode */
[data-bs-theme="dark"] .empty-state,
.dark .empty-state {
    color: #7c7c99;
}

/* Compact badges dark mode */
[data-bs-theme="dark"] .calendar-counts-compact,
.dark .calendar-counts-compact {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
}

[data-bs-theme="dark"] .compact-badge.available,
.dark .compact-badge.available {
    color: #22d3ee;
    background: linear-gradient(135deg, #0f1419, #164e63);
    border: 1px solid #0891b2;
}

[data-bs-theme="dark"] .compact-badge.used,
.dark .compact-badge.used {
    color: #4ade80;
    background: linear-gradient(135deg, #0f1b0f, #15803d);
    border: 1px solid #16a34a;
}

[data-bs-theme="dark"] .compact-badge.remaining,
.dark .compact-badge.remaining {
    color: #fb923c;
    background: linear-gradient(135deg, #1f1611, #c2410c);
    border: 1px solid #ea580c;
}

/* Platform icons remain the same as they have specific brand colors */

/* Additional dark mode enhancements */
[data-bs-theme="dark"] .calendar-day,
.dark .calendar-day {
    transition: all 0.3s ease;
}

/* Scrollbar dark mode (webkit browsers) */
[data-bs-theme="dark"] .social-calendar-container::-webkit-scrollbar,
.dark .social-calendar-container::-webkit-scrollbar {
    width: 8px;
}

[data-bs-theme="dark"] .social-calendar-container::-webkit-scrollbar-track,
.dark .social-calendar-container::-webkit-scrollbar-track {
    background: #1e1e2d;
}

[data-bs-theme="dark"] .social-calendar-container::-webkit-scrollbar-thumb,
.dark .social-calendar-container::-webkit-scrollbar-thumb {
    background: #2b2b40;
    border-radius: 4px;
}

[data-bs-theme="dark"] .social-calendar-container::-webkit-scrollbar-thumb:hover,
.dark .social-calendar-container::-webkit-scrollbar-thumb:hover {
    background: #323248;
}

/* Focus states for accessibility in dark mode */
[data-bs-theme="dark"] .nav-btn:focus,
.dark .nav-btn:focus,
[data-bs-theme="dark"] .mode-btn:focus,
.dark .mode-btn:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}

[data-bs-theme="dark"] .task-card:focus,
.dark .task-card:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}
/* endof dark calender */



/* View Mode Selector */
.view-mode-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 12px;
}

.view-mode-btn {
    background: white;
    border: 2px solid #e1e5e9;
    color: #181c32;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 14px;
}

.view-mode-btn:hover {
    border-color: #ff6b35;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.view-mode-btn.active {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    border-color: transparent;
}

/* Kanban Board Styles */
.kanban-board {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 0;
    min-height: 600px;
}

.kanban-column {
    flex: 0 0 320px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e1e5e9;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #3f4254 0%, #2b2b40 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.kanban-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.task-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.kanban-tasks {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    min-height: 200px;
    transition: background-color 0.3s ease;
}

.kanban-tasks.drag-over {
    background-color: rgba(255, 107, 53, 0.1);
    border: 2px dashed #ff6b35;
}

.kanban-task-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #ff6b35;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.kanban-task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,107,53,0.15);
}

.kanban-task-card .task-title {
    font-size: 14px;
    font-weight: 600;
    color: #181c32;
    margin-bottom: 8px;
    line-height: 1.3;
}

.kanban-task-card .task-image {
    margin: 8px 0;
    border-radius: 4px;
    overflow: hidden;
}

.kanban-task-card .task-image img {
    width: 100%;
    height: auto;
    display: block;
}

.kanban-task-card .task-meta {
    font-size: 11px;
    color: #7e8299;
    margin-top: 8px;
}

.kanban-task-card .task-date {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.kanban-task-card .task-duration {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 10px;
}
/* Updated Gantt Chart Styles */
.gantt-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0,0,0,0.08);
    overflow: hidden;
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.gantt-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar with task header */
.gantt-sidebar {
    flex: 0 0 300px;
    background: #f8f9fa;
    border-right: 1px solid #e1e5e9;
    display: flex;
    flex-direction: column;
}

.gantt-task-header {
    padding: 9px 20px;
    font-weight: 600;
    font-size: 16px;
    background: linear-gradient(135deg, #3f4254 0%, #2b2b40 100%);
    color: white;
    border-bottom: 1px solid #e1e5e9;
}

.gantt-task-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Timeline with dates header */
.gantt-timeline {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gantt-dates-scroll {
    flex: 1;
    overflow: auto;
}

.gantt-dates-header {
    background: linear-gradient(135deg, #3f4254 0%, #2b2b40 100%);
    color: white;
    border-bottom: 1px solid #e1e5e9;
    min-width: max-content;
}

.gantt-dates-row {
    display: flex;
}

.gantt-dates-row.month-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   height: 22px;
   display: block;
   border-bottom: 0px;
   
}

.gantt-month {
    text-align: center;
    font-weight: bold;
    padding: 2px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gantt-date-header {
    flex: 0 0 40px;
    padding: 12px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.gantt-date-header.today {
    background: rgba(255, 107, 53, 0.2);
    font-weight: 700;
}

.gantt-task-row {
    display: flex;
    align-items: center;
    min-height: 60px;
    max-height: 60px;
    padding: 12px 20px;
    border-bottom: 1px solid #e1e5e9;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gantt-task-row:hover {
    background: #f0f3ff;
}

.gantt-task-info {
    flex: 1;
}

.gantt-task-info .task-title {
    font-size: 14px;
    font-weight: 600;
    color: #181c32;
    margin-bottom: 4px;
    line-height: 1.2;
}

.gantt-task-info .task-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    flex-wrap: wrap;
}

.gantt-timeline-content {
    min-width: max-content;
}

.gantt-timeline-row {
    display: flex;
    min-height: 60px;
    max-height: 60px;
    border-bottom: 1px solid #e1e5e9;
    align-items: center;
}

.gantt-timeline-cell {
    flex: 0 0 40px;
    border-right: 1px solid #e1e5e9;
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px;
    height: 60px;
}

.gantt-timeline-cell.in-range {
    background: rgba(255, 107, 53, 0.1);
}

.gantt-timeline-cell.range-start {
    background: rgba(255, 107, 53, 0.2);
}

.gantt-timeline-cell.range-end {
    background: rgba(255, 107, 53, 0.2);
}

.gantt-bar {
    height: 20px;
    border-radius: 10px;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gantt-bar:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
}

/* Subtask Support */
.gantt-task-row.subtask {
    padding-left: 40px;
    background: #fbfcfd;
}

.gantt-task-row.subtask::before {
    content: '└─';
    position: absolute;
    left: 20px;
    color: #a1a5b7;
    font-family: monospace;
}

.subtask-indicator {
    color: #a1a5b7;
    font-size: 10px;
    margin-left: 8px;
}

/* Dark Mode Updates */
[data-bs-theme="dark"] .gantt-container,
.dark .gantt-container {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
}

[data-bs-theme="dark"] .gantt-sidebar,
.dark .gantt-sidebar {
    background: #1e1e2d;
    border-right-color: #2b2b40;
}

[data-bs-theme="dark"] .gantt-task-header,
.dark .gantt-task-header {
    background: linear-gradient(135deg, #1b1b29 0%, #2b2b40 100%);
    border-bottom-color: #2b2b40;
}

[data-bs-theme="dark"] .gantt-dates-header,
.dark .gantt-dates-header {
    background: linear-gradient(135deg, #1b1b29 0%, #2b2b40 100%);
    border-bottom-color: #2b2b40;
}

[data-bs-theme="dark"] .gantt-date-header,
.dark .gantt-date-header {
    border-right-color: rgba(161, 165, 183, 0.1);
}

[data-bs-theme="dark"] .gantt-task-row,
.dark .gantt-task-row {
    border-bottom-color: #2b2b40;
}

[data-bs-theme="dark"] .gantt-task-row:hover,
.dark .gantt-task-row:hover {
    background: #252542;
}

[data-bs-theme="dark"] .gantt-task-info .task-title,
.dark .gantt-task-info .task-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .gantt-task-info .task-meta,
.dark .gantt-task-info .task-meta {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .gantt-timeline-cell,
.dark .gantt-timeline-cell {
    border-right-color: #2b2b40;
}

[data-bs-theme="dark"] .gantt-task-row.subtask,
.dark .gantt-task-row.subtask {
    background: #252542;
}
/* Responsive Design */
@media (max-width: 1200px) {
    .kanban-board {
        flex-direction: column;
        gap: 16px;
    }
    
    .kanban-column {
        flex: none;
        max-height: 400px;
    }
    
    .gantt-container {
        font-size: 12px;
    }
    
    .gantt-task-header,
    .gantt-sidebar {
        flex-basis: 200px;
    }
}

@media (max-width: 768px) {
    .view-mode-selector {
        flex-direction: column;
        gap: 8px;
    }
    
    .view-mode-btn {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .kanban-column {
        flex-basis: 280px;
    }
    
    .gantt-date-header {
        flex-basis: 30px;
        font-size: 10px;
    }
    
    .gantt-timeline-cell {
        flex-basis: 30px;
    }
}

/* Drag and Drop Visual Feedback */
.kanban-task-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.kanban-tasks.drag-over::after {
    content: 'Drop here';
    display: block;
    text-align: center;
    color: #ff6b35;
    font-weight: 600;
    padding: 20px;
    border: 2px dashed #ff6b35;
    border-radius: 8px;
    margin: 10px 0;
    background: rgba(255, 107, 53, 0.05);
}

/* Gantt Interaction Improvements */
.gantt-bar::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 10px 10px 0;
    cursor: e-resize;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gantt-bar:hover::after {
    opacity: 1;
}

/* Task Dependencies (for future enhancement) */
.gantt-dependency {
    position: absolute;
    height: 2px;
    background: #ff6b35;
    z-index: 10;
}

.gantt-dependency::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -2px;
    width: 0;
    height: 0;
    border-left: 6px solid #ff6b35;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

/* Enhanced Task Cards for All Views */
.task-card .task-priority {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.task-card .task-priority.high {
    background: #dc3545;
}

.task-card .task-priority.medium {
    background: #ffc107;
}

.task-card .task-priority.low {
    background: #28a745;
}

/* Loading States */
.kanban-column.loading {
    opacity: 0.6;
    pointer-events: none;
}

.gantt-container.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Tooltips for Gantt */
.gantt-tooltip {
    position: absolute;
    background: #181c32;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.gantt-tooltip.show {
    opacity: 1;
}

/* Progress Indicators */
.task-progress {
    height: 4px;
    background: #e1e5e9;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.task-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff6b35, #f7931e);
    transition: width 0.3s ease;
}

/* Subtask Styles */
.subtask-toggle {
    background: none;
    border: none;
    color: #7e8299;
    cursor: pointer;
    padding: 2px;
    margin-right: 8px;
    transition: color 0.3s ease;
}

.subtask-toggle:hover {
    color: #ff6b35;
}

.subtask-toggle.expanded::before {
    content: '\f147'; /* fa-minus-square */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.subtask-toggle.collapsed::before {
    content: '\f0fe'; /* fa-plus-square */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.subtasks-container {
    background: #f8f9fa;
    border-radius: 6px;
    margin-top: 8px;
    padding: 8px;
}

.subtask-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    color: #7e8299;
}

.subtask-item::before {
    content: '•';
    margin-right: 6px;
    color: #ff6b35;
}

/* Animation Classes */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.kanban-task-card {
    animation: slideInUp 0.3s ease;
}

.gantt-task-row {
    animation: slideInRight 0.3s ease;
}

/* Scrollbar Styling */
.kanban-tasks::-webkit-scrollbar,
.gantt-timeline::-webkit-scrollbar,
.gantt-sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.kanban-tasks::-webkit-scrollbar-track,
.gantt-timeline::-webkit-scrollbar-track,
.gantt-sidebar::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.kanban-tasks::-webkit-scrollbar-thumb,
.gantt-timeline::-webkit-scrollbar-thumb,
.gantt-sidebar::-webkit-scrollbar-thumb {
    background: #e1e5e9;
    border-radius: 3px;
}

.kanban-tasks::-webkit-scrollbar-thumb:hover,
.gantt-timeline::-webkit-scrollbar-thumb:hover,
.gantt-sidebar::-webkit-scrollbar-thumb:hover {
    background: #ff6b35;
}


/* Header Actions */
.gantt-header-actions {
    display: flex;
    gap: 8px;
}

.gantt-header-actions .gantt-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.gantt-header-actions .gantt-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Task Actions */
.gantt-task-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.gantt-task-row:hover .gantt-task-actions {
    opacity: 1;
    visibility: visible;
}

.gantt-task-actions .gantt-action-btn {
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    color: #7e8299;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.gantt-task-actions .add-subtask-btn:hover {
    background: #e3f2fd;
    border-color: #2196f3;
    color: #2196f3;
}

.gantt-task-actions .edit-task-btn:hover {
    background: #fff3e0;
    border-color: #ff9800;
    color: #ff9800;
}

.gantt-task-actions .delete-task-btn:hover,
.gantt-task-actions .delete-subtask-btn:hover {
    background: #ffebee;
    border-color: #f44336;
    color: #f44336;
}

/* Expand/Collapse Button */
.expand-btn {
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #7e8299;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 8px;
}

.expand-btn:hover {
    background: #e1e5e9;
    color: #3f4254;
}

.expand-btn.expanded {
    color: #ff6b35;
}

/* Task Content */
.task-content {
    flex: 1;
    min-width: 0;
}

.subtask-count {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
}

/* Subtask Styling */
.gantt-subtasks {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(to right, #f8f9fa 0%, #fff 100%);
}

.gantt-subtasks.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

.gantt-subtasks.expanded {
    max-height: 2000px;
    opacity: 1;
    margin: 4px 0;
}

.gantt-task-row.subtask {
    background: #fbfcfd;
    border-left: 3px solid #ff6b35;
    margin-left: 20px;
    padding-left: 16px;
    min-height: 50px;
    max-height: 50px;
    position: relative;
}

.gantt-task-row.subtask::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e1e5e9;
}

.gantt-task-row.subtask:hover {
    background: #f0f8ff;
}

.subtask-indicator {
    color: #a1a5b7;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    margin-right: 8px;
    font-weight: bold;
    flex-shrink: 0;
}

.gantt-task-row.subtask .task-title {
    font-size: 13px;
    font-weight: 500;
    color: #5e6278;
}

.gantt-task-row.subtask .task-meta {
    font-size: 10px;
}

/* Timeline Subtasks */
.gantt-subtasks-timeline {
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gantt-subtasks-timeline.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

.gantt-subtasks-timeline.expanded {
    max-height: 2000px;
    opacity: 1;
    margin: 4px 0;
}

.gantt-timeline-row.subtask-timeline {
    min-height: 50px;
    max-height: 50px;
    background: #fbfcfd;
    border-left: 3px solid #ff6b35;
    margin-left: 20px;
    position: relative;
}

.gantt-timeline-row.subtask-timeline::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e1e5e9;
}

/* Enhanced Gantt Bars */
.gantt-bar {
    height: 20px;
    border-radius: 10px;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.gantt-bar:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.gantt-bar.subtask-bar {
    height: 16px;
    opacity: 0.7;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px;
}

.gantt-bar.subtask-bar:hover {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.03);
}

.bar-label {
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Enhanced Date Headers */
.gantt-date-header {
    flex: 0 0 40px;
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.day-number {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.day-name {
    font-size: 9px;
    opacity: 0.8;
    margin-top: 2px;
}

.gantt-date-header.today {
    background: rgba(255, 107, 53, 0.2);
    font-weight: 700;
}

.gantt-date-header.today .day-number {
    color: #ff6b35;
}

/* Task Group Styling */
.gantt-task-group {
    border-bottom: 1px solid #f1f3f6;
    transition: all 0.3s ease;
}

.gantt-task-group:last-child {
    border-bottom: none;
}

.gantt-task-group:hover {
    background: rgba(240, 243, 255, 0.3);
}

/* Assignee Styling */
.assignee {
    background: #f3e5f5;
    color: #7b1fa2;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .gantt-sidebar {
        flex: 0 0 280px;
    }
    
    .gantt-task-header {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .gantt-task-row {
        padding: 10px 16px;
        min-height: 50px;
        max-height: 50px;
    }
}

@media (max-width: 768px) {
    .gantt-container {
        height: 60vh;
    }
    
    .gantt-sidebar {
        flex: 0 0 250px;
    }
    
    .gantt-header-actions {
        gap: 4px;
    }
    
    .gantt-header-actions .gantt-action-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Enhanced Dark Mode */
[data-bs-theme="dark"] .gantt-task-group:hover,
.dark .gantt-task-group:hover {
    background: rgba(37, 37, 66, 0.5);
}

[data-bs-theme="dark"] .gantt-subtasks,
.dark .gantt-subtasks {
    background: linear-gradient(to right, #1e1e2d 0%, #252542 100%);
}

[data-bs-theme="dark"] .subtask-count,
.dark .subtask-count {
    background: #1a237e;
    color: #e3f2fd;
}

[data-bs-theme="dark"] .assignee,
.dark .assignee {
    background: #4a148c;
    color: #f3e5f5;
}

[data-bs-theme="dark"] .gantt-action-btn,
.dark .gantt-action-btn {
    background: #2b2b40;
    border-color: #323248;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .gantt-task-actions .gantt-action-btn:hover,
.dark .gantt-task-actions .gantt-action-btn:hover {
    background: #323248;
}

[data-bs-theme="dark"] .gantt-task-actions .add-subtask-btn:hover,
.dark .gantt-task-actions .add-subtask-btn:hover {
    background: #1e3a8a;
    border-color: #3b82f6;
    color: #60a5fa;
}

[data-bs-theme="dark"] .gantt-task-actions .edit-task-btn:hover,
.dark .gantt-task-actions .edit-task-btn:hover {
    background: #92400e;
    border-color: #f59e0b;
    color: #fbbf24;
}

[data-bs-theme="dark"] .gantt-task-actions .delete-task-btn:hover,
[data-bs-theme="dark"] .gantt-task-actions .delete-subtask-btn:hover,
.dark .gantt-task-actions .delete-task-btn:hover,
.dark .gantt-task-actions .delete-subtask-btn:hover {
    background: #7f1d1d;
    border-color: #ef4444;
    color: #f87171;
}







/* Context Menu for Tasks */
.task-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    padding: 8px 0;
    min-width: 150px;
}

.task-context-menu .menu-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #181c32;
    transition: background-color 0.3s ease;
}

.task-context-menu .menu-item:hover {
    background: #f8f9fa;
}

.task-context-menu .menu-item.danger {
    color: #dc3545;
}

.task-context-menu .menu-item.danger:hover {
    background: #f8d7da;
}

[data-bs-theme="dark"] .task-context-menu,
.dark .task-context-menu {
    background: #2b2b40;
    border-color: #323248;
}

[data-bs-theme="dark"] .task-context-menu .menu-item,
.dark .task-context-menu .menu-item {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .task-context-menu .menu-item:hover,
.dark .task-context-menu .menu-item:hover {
    background: #323248;
}





.task-type-post .calendar-header {
    background: #5578eb;
}


        /* dropzone and files que */

 .modal-content {
            border-radius: 12px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            border-bottom: 1px solid #e9ecef;
            padding: 1.5rem;
        }

        .modal-body {
            padding: 1.5rem;
        }

        /* Social Media Platform Styles */
        .platform-selection {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .platform-btn {
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin: 0.25rem;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .platform-btn:hover {
            border-color: #0d6efd;
            background: #f8f9ff;
        }

        .platform-btn.active {
            border-color: #0d6efd;
            background: #0d6efd;
            color: white;
        }

        .platform-btn.facebook { border-color: #1877f2; }
        .platform-btn.facebook.active { background: #1877f2; }
        .platform-btn.instagram { border-color: #e4405f; }
        .platform-btn.instagram.active { background: #833ab4;
                                        background: linear-gradient(
                                            to right,
                                            #833ab4,#fd1d1d,#fcb045
                                        ); }
        .platform-btn.linkedin { border-color: #0a66c2; }
        .platform-btn.linkedin.active { background: #0a66c2; }
        .platform-btn.twitter { border-color: #1da1f2; }
        .platform-btn.twitter.active { background: #1da1f2; }
        .platform-btn.youtube { border-color: #ff0000; }
        .platform-btn.youtube.active { background: #ff0000; }
        .platform-btn.tiktok { border-color: #000000; }
        .platform-btn.tiktok.active { background: #000000; }


        /* platform style in dark mode */

/* Social Media Platform Styles - Light Mode */
.platform-selection {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.platform-btn {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.25rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #495057;
}

.platform-btn:hover {
    border-color: #0d6efd;
    background: #f8f9ff;
}

.platform-btn.active {
    border-color: #0d6efd;
    background: #0d6efd;
    color: white;
}

.platform-btn.facebook { border-color: #1877f2; }
.platform-btn.facebook.active { background: #1877f2; }
.platform-btn.instagram { border-color: #e4405f; }
.platform-btn.instagram.active { 
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); 
}
.platform-btn.linkedin { border-color: #0a66c2; }
.platform-btn.linkedin.active { background: #0a66c2; }
.platform-btn.twitter { border-color: #1da1f2; }
.platform-btn.twitter.active { background: #1da1f2; }
.platform-btn.youtube { border-color: #ff0000; }
.platform-btn.youtube.active { background: #ff0000; }
.platform-btn.tiktok { border-color: #000000; }
.platform-btn.tiktok.active { background: #000000; }

/* Dark Mode Styles */
[data-bs-theme="dark"] .platform-selection,
[data-theme="dark"] .platform-selection,
.dark .platform-selection {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
}

[data-bs-theme="dark"] .platform-btn,
[data-theme="dark"] .platform-btn,
.dark .platform-btn {
    background: #1e1e2d;
    border-color: #2b2b40;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .platform-btn:hover,
[data-theme="dark"] .platform-btn:hover,
.dark .platform-btn:hover {
    border-color: #0d6efd;
    background: #151521;
    color: #ffffff;
}

[data-bs-theme="dark"] .platform-btn.active,
[data-theme="dark"] .platform-btn.active,
.dark .platform-btn.active {
    border-color: #0d6efd;
    background: #0d6efd;
    color: white;
}

/* Dark Mode Platform Specific Styles */
[data-bs-theme="dark"] .platform-btn.facebook,
[data-theme="dark"] .platform-btn.facebook,
.dark .platform-btn.facebook { 
    border-color: #3b5998;
}

[data-bs-theme="dark"] .platform-btn.facebook.active,
[data-theme="dark"] .platform-btn.facebook.active,
.dark .platform-btn.facebook.active { 
    background: #1877f2;
    border-color: #1877f2;
}

[data-bs-theme="dark"] .platform-btn.instagram,
[data-theme="dark"] .platform-btn.instagram,
.dark .platform-btn.instagram { 
    border-color: #c13584;
}

[data-bs-theme="dark"] .platform-btn.instagram.active,
[data-theme="dark"] .platform-btn.instagram.active,
.dark .platform-btn.instagram.active { 
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    border-color: #833ab4;
}

[data-bs-theme="dark"] .platform-btn.linkedin,
[data-theme="dark"] .platform-btn.linkedin,
.dark .platform-btn.linkedin { 
    border-color: #0077b5;
}

[data-bs-theme="dark"] .platform-btn.linkedin.active,
[data-theme="dark"] .platform-btn.linkedin.active,
.dark .platform-btn.linkedin.active { 
    background: #0a66c2;
    border-color: #0a66c2;
}

[data-bs-theme="dark"] .platform-btn.twitter,
[data-theme="dark"] .platform-btn.twitter,
.dark .platform-btn.twitter { 
    border-color: #1da1f2;
}

[data-bs-theme="dark"] .platform-btn.twitter.active,
[data-theme="dark"] .platform-btn.twitter.active,
.dark .platform-btn.twitter.active { 
    background: #1da1f2;
    border-color: #1da1f2;
}

[data-bs-theme="dark"] .platform-btn.youtube,
[data-theme="dark"] .platform-btn.youtube,
.dark .platform-btn.youtube { 
    border-color: #c4302b;
}

[data-bs-theme="dark"] .platform-btn.youtube.active,
[data-theme="dark"] .platform-btn.youtube.active,
.dark .platform-btn.youtube.active { 
    background: #ff0000;
    border-color: #ff0000;
}

[data-bs-theme="dark"] .platform-btn.tiktok,
[data-theme="dark"] .platform-btn.tiktok,
.dark .platform-btn.tiktok { 
    border-color: #25f4ee;
}

[data-bs-theme="dark"] .platform-btn.tiktok.active,
[data-theme="dark"] .platform-btn.tiktok.active,
.dark .platform-btn.tiktok.active { 
    background: #000000;
    border-color: #000000;
    color: #25f4ee;
}

/* Alternative Dark Mode Selectors for Different Metronic Versions */
.theme-dark .platform-selection {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
}

.theme-dark .platform-btn {
    background: #1e1e2d;
    border-color: #2b2b40;
    color: #a1a5b7;
}

.theme-dark .platform-btn:hover {
    border-color: #0d6efd;
    background: #151521;
    color: #ffffff;
}

.theme-dark .platform-btn.active {
    border-color: #0d6efd;
    background: #0d6efd;
    color: white;
}
        /* end of platform style in dark mode */


        /* Post Type Styles */
        .post-type-selection {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .post-type-option {
            flex: 1;
            text-align: center;
            padding: 1rem;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .post-type-option:hover {
            border-color: #FFBD06;
            background: #f8f9ff;
        }

        .post-type-option.active {
            border-color: #FFA15F;
              background: #FFBD06;
            background: linear-gradient(135deg, #FFBD06, #FFA15F);
            color: rgb(5, 5, 5);
        }

/* post type style dark mode */
        /* Post Type Styles Dark Mode */
[data-bs-theme="dark"] .post-type-option,
.dark-mode .post-type-option,
[data-theme="dark"] .post-type-option {
    border: 2px solid #374151;
    background: #252932;
    color: #e5e7eb;
}

[data-bs-theme="dark"] .post-type-option:hover,
.dark-mode .post-type-option:hover,
[data-theme="dark"] .post-type-option:hover {
    border-color: #FFBD06;
    background: #2d3748;
    color: #f8fafc;
}

[data-bs-theme="dark"] .post-type-option.active,
.dark-mode .post-type-option.active,
[data-theme="dark"] .post-type-option.active {
    border-color: #FFA15F;
    background: linear-gradient(135deg, #FFBD06, #FFA15F);
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(255, 189, 6, 0.3);
}

/* Scrollbar Dark Mode */
[data-bs-theme="dark"] ::-webkit-scrollbar,
.dark-mode ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track,
.dark-mode ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #252932;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb,
.dark-mode ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover,
.dark-mode ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}
/* end of type style dark mode */


        /* Dropzone Styles */
        .dropzone-area {
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .dropzone-area:hover {
            border-color: #0d6efd;
            background: #f8f9ff;
        }

        .dropzone-area.dragover {
            border-color: #0d6efd;
            background: #f8f9ff;
            transform: scale(1.02);
        }

        .dropzone-icon {
            font-size: 3rem;
            color: #6c757d;
            margin-bottom: 1rem;
        }

        /* File Item Styles */
        .file-item {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 0.75rem;
            background: white;
            transition: all 0.3s ease;
        }

        .file-item:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-color: #0d6efd;
        }

        .progress-sm {
            height: 0.5rem;
            border-radius: 0.25rem;
        }

        /* Preview Panel Styles */
        .preview-panel {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            height: max-content;
            overflow-y: auto;
        }

        .preview-post {
            background: white;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .business-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .business-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #0d6efd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        /* Tab Styles */
        .attachment-tabs {
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 1rem;
        }

        .attachment-tab {
            padding: 0.75rem 1rem;
            border: none;
            background: none;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .attachment-tab:hover {
            background: #f8f9fa;
        }

        .attachment-tab.active {
            border-bottom-color: #0d6efd;
            color: #0d6efd;
            font-weight: 600;
        }

    
        .form-label.required::after {
            content: " *";
            color: #dc3545;
        }
   


        /* drop zone for dark mode */

        
/* Dropzone Dark Mode */
[data-bs-theme="dark"] .dropzone-area,
[data-theme="dark"] .dropzone-area,
.dark .dropzone-area {
    border: 2px dashed #2b2b40;
    background: #1e1e2d;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .dropzone-area:hover,
[data-theme="dark"] .dropzone-area:hover,
.dark .dropzone-area:hover {
    border-color: #0d6efd;
    background: #151521;
}

[data-bs-theme="dark"] .dropzone-area.dragover,
[data-theme="dark"] .dropzone-area.dragover,
.dark .dropzone-area.dragover {
    border-color: #0d6efd;
    background: #151521;
    transform: scale(1.02);
}

[data-bs-theme="dark"] .dropzone-icon,
[data-theme="dark"] .dropzone-icon,
.dark .dropzone-icon {
    color: #5e6278;
}

/* File Item Dark Mode */
[data-bs-theme="dark"] .file-item,
[data-theme="dark"] .file-item,
.dark .file-item {
    border: 1px solid #2b2b40;
    background: #1e1e2d;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .file-item:hover,
[data-theme="dark"] .file-item:hover,
.dark .file-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-color: #0d6efd;
    background: #151521;
}

/* Preview Panel Dark Mode */
[data-bs-theme="dark"] .preview-panel,
[data-theme="dark"] .preview-panel,
.dark .preview-panel {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
}

[data-bs-theme="dark"] .preview-post,
[data-theme="dark"] .preview-post,
.dark .preview-post {
    background: #151521;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid #2b2b40;
    color: #ffffff;
}

[data-bs-theme="dark"] .business-avatar,
[data-theme="dark"] .business-avatar,
.dark .business-avatar {
    background: #0d6efd;
    color: white;
}

/* end of drop zone dark mode */






        /* comments  */

        .comments-section {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            overflow: hidden;
        }

        .comments-header {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            /*
                * Created with https://www.css-gradient.com
                * Gradient link: https://www.css-gradient.com/?c1=ffbd06&c2=ffa15f&gt=l&gd=dtl
                */
                background: #FFBD06;
                background: linear-gradient(135deg, #FFBD06, #FFA15F);
            color: white;
        }


         .comment-header .symbolic-avatar{
                width: 40px;
                height: 40px;
                background-color: #ffa5004d;
                border-radius: 50%;
                padding: 10px 15px;
        }

        .comments-title {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .comment-composer {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            background: #f8f9fa;
        }

        .composer-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .comment-textarea {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            resize: vertical;
            transition: border-color 0.2s ease;
            font-family: inherit;
        }

        .comment-textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .composer-actions {
            display: contents;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }

        .file-upload-area {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .file-input {
            display: none;
        }

        .file-upload-btn {
            padding: 8px 12px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #6c757d;
            transition: all 0.2s ease;
        }

        .file-upload-btn:hover {
            background: #e9ecef;
            color: #495057;
        }

        .submit-btn {
            padding: 8px 20px;
            /*
            * Created with https://www.css-gradient.com
            * Gradient link: https://www.css-gradient.com/?c1=ffbd06&c2=ffa15f&gt=l&gd=dtl
            */
            background: #FFBD06;
            background: linear-gradient(135deg, #FFBD06, #FFA15F);
            color: rgb(7, 7, 7);
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .submit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .attachment-preview {
            margin-top: 12px;
        }

        .attachment-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .attachment-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            font-size: 13px;
            max-width: 200px;
        }

        .attachment-item.image {
            position: relative;
        }

        .attachment-thumb {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            object-fit: cover;
        }

        .attachment-info {
            flex: 1;
            min-width: 0;
        }

        .attachment-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .attachment-size {
            color: #6c757d;
            font-size: 11px;
        }

        .remove-attachment {
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            padding: 2px;
            border-radius: 3px;
            transition: background-color 0.2s ease;
        }

        .remove-attachment:hover {
            background: #fee;
        }

        .comments-list {
            max-height: 600px;
            overflow-y: auto;
        }

        .comment-item {
            padding: 16px 20px;
            border-bottom: 1px solid #f1f3f4;
            transition: background-color 0.2s ease;
        }

        .comment-item:hover {
            background: #fafbfc;
        }

        .comment-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e9ecef;
        }

        .user-info {
            flex: 1;
        }

        .user-name {
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
        }

        .comment-time {
            color: #6c757d;
            font-size: 12px;
        }

        .comment-edited {
            color: #6c757d;
            font-size: 11px;
            font-style: italic;
        }

        .comment-actions {
            display: flex;
            gap: 8px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .comment-item:hover .comment-actions {
            opacity: 1;
        }

        .action-btn {
            background: none;
            border: none;
            color: #6c757d;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            background: #f8f9fa;
            color: #495057;
        }

        .action-btn.delete:hover {
            color: #dc3545;
            background: #fee;
        }

        .comment-content {
            margin: 8px 0;
            line-height: 1.5;
            color: #2c3e50;
            word-wrap: break-word;
        }

        .comment-content p {
            margin: 0 0 8px 0;
        }

        .comment-content a {
            color: #667eea;
            text-decoration: none;
        }

        .comment-content a:hover {
            text-decoration: underline;
        }

        .comment-attachments {
            margin: 12px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .comment-attachment {
            position: relative;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
            background: white;
            transition: transform 0.2s ease;
        }

        .comment-attachment:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .comment-attachment.image {
            width: 120px;
            height: 120px;
        }

        .comment-attachment.image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .comment-attachment.file {
            padding: 12px;
            min-width: 180px;
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 260px;
        }

        .file-icon {
            font-size: 24px;
        }

        .file-details {
            flex: 1;
            min-width: 0;
        }

        .file-name {
            font-weight: 500;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-size {
            color: #6c757d;
            font-size: 11px;
        }

        .link-preview {
            margin: 12px 0;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
            background: white;
            transition: transform 0.2s ease;
            width:260px;
            max-width: 100%;
        }

        .link-preview:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .link-preview-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }

        .link-preview-content {
            padding: 12px;
        }

        .link-preview-title {
            font-weight: 600;
            margin-bottom: 4px;
            color: #2c3e50;
        }

        .link-preview-description {
            color: #6c757d;
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 6px;
        }

        .link-preview-domain {
            color: #667eea;
            font-size: 12px;
        }

        .replies-section {
            margin-left: 48px;
            margin-top: 12px;
            border-left: 2px solid #f1f3f4;
            padding-left: 16px;
        }

        .reply-item {
            padding: 12px 0;
            border-bottom: 1px solid #f8f9fa;
        }

        .reply-item:last-child {
            border-bottom: none;
        }

        .loading-spinner {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #6c757d;
        }

        .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .drag-over {
            border-color: #667eea !important;
            background: rgba(102, 126, 234, 0.05) !important;
        }

        .upload-progress {
            margin-top: 8px;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transition: width 0.3s ease;
        }

        .edit-mode .comment-content {
            display: none;
        }

        .edit-form {
            display: none;
            gap: 8px;
        }

        .edit-mode .edit-form {
            display: flex;
            flex-direction: column;
        }

        .edit-textarea {
            width: 100%;
            min-height: 60px;
            padding: 8px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            font-size: 13px;
            resize: vertical;
        }

        .edit-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        .btn-sm {
            padding: 4px 12px;
            font-size: 12px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-weight: 500;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .new-comment {
            animation: slideIn 0.3s ease-out;
        }

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

        @media (max-width: 768px) {
            .comments-section {
                margin: 0 -20px;
                border-radius: 0;
            }
            
            .composer-actions {
                flex-direction: column;
                align-items: stretch;
            }
            
            .replies-section {
                margin-left: 24px;
                padding-left: 12px;
            }
            
            .attachment-list {
                flex-direction: column;
            }
            
            .comment-attachment.file {
                min-width: auto;
            }
        }





        /* dark mode for comment section  */

        /* ===== DARK MODE STYLES FOR COMMENTS SECTION ===== */

/* Comments Section Dark Mode */
[data-bs-theme="dark"] .comments-section,
[data-theme="dark"] .comments-section,
.dark .comments-section {
    background: #1e1e2d;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    border: 1px solid #2b2b40;
}

/* Comments Header Dark Mode */
[data-bs-theme="dark"] .comments-header,
[data-theme="dark"] .comments-header,
.dark .comments-header {
    border-bottom: 1px solid #2b2b40;
    /* Keep the gradient as is for brand consistency */
    background: #FFBD06;
    background: linear-gradient(135deg, #FFBD06, #FFA15F);
    color: white;
}

[data-bs-theme="dark"] .comment-header .symbolic-avatar,
[data-theme="dark"] .comment-header .symbolic-avatar,
.dark .comment-header .symbolic-avatar {
    background-color: rgba(255, 160, 0, 0.3);
}

/* Comment Composer Dark Mode */
[data-bs-theme="dark"] .comment-composer,
[data-theme="dark"] .comment-composer,
.dark .comment-composer {
    background: #151521;
    border-bottom: 1px solid #2b2b40;
}

[data-bs-theme="dark"] .comment-textarea,
[data-theme="dark"] .comment-textarea,
.dark .comment-textarea {
    background: #1e1e2d;
    border: 2px solid #2b2b40;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .comment-textarea:focus,
[data-theme="dark"] .comment-textarea:focus,
.dark .comment-textarea:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.1);
}

[data-bs-theme="dark"] .comment-textarea::placeholder,
[data-theme="dark"] .comment-textarea::placeholder,
.dark .comment-textarea::placeholder {
    color: #5e6278;
}

/* File Upload Button Dark Mode */
[data-bs-theme="dark"] .file-upload-btn,
[data-theme="dark"] .file-upload-btn,
.dark .file-upload-btn {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .file-upload-btn:hover,
[data-theme="dark"] .file-upload-btn:hover,
.dark .file-upload-btn:hover {
    background: #151521;
    color: #ffffff;
}

/* Submit Button - Keep gradient for brand consistency */
[data-bs-theme="dark"] .submit-btn:hover,
[data-theme="dark"] .submit-btn:hover,
.dark .submit-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 189, 6, 0.3);
}

/* Attachment Items Dark Mode */
[data-bs-theme="dark"] .attachment-item,
[data-theme="dark"] .attachment-item,
.dark .attachment-item {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .attachment-name,
[data-theme="dark"] .attachment-name,
.dark .attachment-name {
    color: #ffffff;
}

[data-bs-theme="dark"] .attachment-size,
[data-theme="dark"] .attachment-size,
.dark .attachment-size {
    color: #5e6278;
}

[data-bs-theme="dark"] .remove-attachment:hover,
[data-theme="dark"] .remove-attachment:hover,
.dark .remove-attachment:hover {
    background: rgba(241, 65, 108, 0.1);
}

/* Comments List Dark Mode */
[data-bs-theme="dark"] .comments-list,
[data-theme="dark"] .comments-list,
.dark .comments-list {
    background: #1e1e2d;
}

[data-bs-theme="dark"] .comment-item,
[data-theme="dark"] .comment-item,
.dark .comment-item {
    border-bottom: 1px solid #2b2b40;
}

[data-bs-theme="dark"] .comment-item:hover,
[data-theme="dark"] .comment-item:hover,
.dark .comment-item:hover {
    background: #151521;
}

/* User Avatar Dark Mode */
[data-bs-theme="dark"] .user-avatar,
[data-theme="dark"] .user-avatar,
.dark .user-avatar {
    border: 2px solid #2b2b40;
}

/* User Info Dark Mode */
[data-bs-theme="dark"] .user-name,
[data-theme="dark"] .user-name,
.dark .user-name {
    color: #ffffff;
}

[data-bs-theme="dark"] .comment-time,
[data-theme="dark"] .comment-time,
.dark .comment-time {
    color: #5e6278;
}

[data-bs-theme="dark"] .comment-edited,
[data-theme="dark"] .comment-edited,
.dark .comment-edited {
    color: #5e6278;
}

/* Action Buttons Dark Mode */
[data-bs-theme="dark"] .action-btn,
[data-theme="dark"] .action-btn,
.dark .action-btn {
    color: #5e6278;
}

[data-bs-theme="dark"] .action-btn:hover,
[data-theme="dark"] .action-btn:hover,
.dark .action-btn:hover {
    background: #151521;
    color: #ffffff;
}

[data-bs-theme="dark"] .action-btn.delete:hover,
[data-theme="dark"] .action-btn.delete:hover,
.dark .action-btn.delete:hover {
    color: #f1416c;
    background: rgba(241, 65, 108, 0.1);
}

/* Comment Content Dark Mode */
[data-bs-theme="dark"] .comment-content,
[data-theme="dark"] .comment-content,
.dark .comment-content {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .comment-content a,
[data-theme="dark"] .comment-content a,
.dark .comment-content a {
    color: #009ef7;
}

/* Comment Attachments Dark Mode */
[data-bs-theme="dark"] .comment-attachment,
[data-theme="dark"] .comment-attachment,
.dark .comment-attachment {
    border: 1px solid #2b2b40;
    background: #1e1e2d;
}

[data-bs-theme="dark"] .comment-attachment:hover,
[data-theme="dark"] .comment-attachment:hover,
.dark .comment-attachment:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .file-name,
[data-theme="dark"] .file-name,
.dark .file-name {
    color: #ffffff;
}

[data-bs-theme="dark"] .file-size,
[data-theme="dark"] .file-size,
.dark .file-size {
    color: #5e6278;
}

/* Link Preview Dark Mode */
[data-bs-theme="dark"] .link-preview,
[data-theme="dark"] .link-preview,
.dark .link-preview {
    border: 1px solid #2b2b40;
    background: #1e1e2d;
}

[data-bs-theme="dark"] .link-preview:hover,
[data-theme="dark"] .link-preview:hover,
.dark .link-preview:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .link-preview-title,
[data-theme="dark"] .link-preview-title,
.dark .link-preview-title {
    color: #ffffff;
}

[data-bs-theme="dark"] .link-preview-description,
[data-theme="dark"] .link-preview-description,
.dark .link-preview-description {
    color: #5e6278;
}

[data-bs-theme="dark"] .link-preview-domain,
[data-theme="dark"] .link-preview-domain,
.dark .link-preview-domain {
    color: #009ef7;
}

/* Replies Section Dark Mode */
[data-bs-theme="dark"] .replies-section,
[data-theme="dark"] .replies-section,
.dark .replies-section {
    border-left: 2px solid #2b2b40;
}

[data-bs-theme="dark"] .reply-item,
[data-theme="dark"] .reply-item,
.dark .reply-item {
    border-bottom: 1px solid #2b2b40;
}

/* Loading Spinner Dark Mode */
[data-bs-theme="dark"] .loading-spinner,
[data-theme="dark"] .loading-spinner,
.dark .loading-spinner {
    color: #5e6278;
}

[data-bs-theme="dark"] .spinner,
[data-theme="dark"] .spinner,
.dark .spinner {
    border: 2px solid #2b2b40;
    border-top: 2px solid #009ef7;
}

/* Empty State Dark Mode */
[data-bs-theme="dark"] .empty-state,
[data-theme="dark"] .empty-state,
.dark .empty-state {
    color: #5e6278;
}

/* Progress Bar Dark Mode */
[data-bs-theme="dark"] .progress-bar,
[data-theme="dark"] .progress-bar,
.dark .progress-bar {
    background: #2b2b40;
}

[data-bs-theme="dark"] .progress-fill,
[data-theme="dark"] .progress-fill,
.dark .progress-fill {
    background: linear-gradient(90deg, #009ef7, #50CD89);
}

/* Edit Form Dark Mode */
[data-bs-theme="dark"] .edit-textarea,
[data-theme="dark"] .edit-textarea,
.dark .edit-textarea {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .edit-textarea:focus,
[data-theme="dark"] .edit-textarea:focus,
.dark .edit-textarea:focus {
    border-color: #009ef7;
    outline: none;
}

/* Button Styles Dark Mode */
[data-bs-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary,
.dark .btn-primary {
    background: #009ef7;
    color: white;
}

[data-bs-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-secondary,
.dark .btn-secondary {
    background: #5e6278;
    color: white;
}

/* Drag Over State Dark Mode */
[data-bs-theme="dark"] .drag-over,
[data-theme="dark"] .drag-over,
.dark .drag-over {
    border-color: #009ef7 !important;
    background: rgba(0, 158, 247, 0.05) !important;
}

/* Scrollbar Dark Mode */
[data-bs-theme="dark"] .comments-list::-webkit-scrollbar,
[data-theme="dark"] .comments-list::-webkit-scrollbar,
.dark .comments-list::-webkit-scrollbar {
    width: 6px;
}

[data-bs-theme="dark"] .comments-list::-webkit-scrollbar-track,
[data-theme="dark"] .comments-list::-webkit-scrollbar-track,
.dark .comments-list::-webkit-scrollbar-track {
    background: #2b2b40;
    border-radius: 3px;
}

[data-bs-theme="dark"] .comments-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .comments-list::-webkit-scrollbar-thumb,
.dark .comments-list::-webkit-scrollbar-thumb {
    background: #5e6278;
    border-radius: 3px;
}

[data-bs-theme="dark"] .comments-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .comments-list::-webkit-scrollbar-thumb:hover,
.dark .comments-list::-webkit-scrollbar-thumb:hover {
    background: #7e8299;
}

/* Alternative Dark Mode Selectors for Different Metronic Versions */
.theme-dark .comments-section {
    background: #1e1e2d;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    border: 1px solid #2b2b40;
}

.theme-dark .comment-composer {
    background: #151521;
    border-bottom: 1px solid #2b2b40;
}

.theme-dark .comment-textarea {
    background: #1e1e2d;
    border: 2px solid #2b2b40;
    color: #a1a5b7;
}

.theme-dark .comment-textarea:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.1);
}

.theme-dark .comment-item {
    border-bottom: 1px solid #2b2b40;
}

.theme-dark .comment-item:hover {
    background: #151521;
}

.theme-dark .user-name {
    color: #ffffff;
}

.theme-dark .comment-content {
    color: #a1a5b7;
}

.theme-dark .comment-content a {
    color: #009ef7;
}

        /* end of dark mode of comment section  */

        /* step container */

         .xess-step-container {
            background: white;
            border-radius: 16px;
       
            width: 100%;
           
            position: relative;
            overflow: hidden;
            padding:10px;
        }

        .xess-step-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
    
        }

        .xess-step-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .xess-step-title {
            font-size: 28px;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .xess-step-subtitle {
            color: #718096;
            font-size: 14px;
            font-weight: 500;
        }

        .xess-step-progress {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* margin-bottom: 50px; */
            position: relative;
        }

        .xess-step-progress::before {
            content: '';
           position: absolute;
             top: 26%;
            left: 30px;
            right: 30px;
            height: 4px;
            background: #e2e8f0;
            transform: translateY(-50%);
            z-index: 1;
                max-width: 90%;
        }

        .xess-step-progress-line {
            position: absolute;
             top: 26%;
            left: 30px;
            right: 30px;
            height: 4px;
            background: #a0aec0;
            transform: translateY(-50%);
            z-index: 2;
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            width: 0%;
                max-width: 90%;
        }

        .xess-step-item {
              display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 80px;
    height: 100px;
        }

        .xess-step-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 3px solid #e2e8f0;
            background: white;
            color: #a0aec0;
            position: relative;
            overflow: hidden;
        }

        .xess-step-circle::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
            transition: left 0.6s ease;
        }

        .xess-step-circle.active {
            background: linear-gradient(135deg, #FF6C37, #FF8E53);
            border-color: #FF6C37;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(255, 108, 55, 0.3);
        }

        .xess-step-circle.completed {
            background: #a0aec0;
            border-color: #a0aec0;
            color: white;
            transform: scale(1.05);
        }

        .xess-step-circle.active::before,
        .xess-step-circle.completed::before {
            left: 100%;
        }

        .xess-step-label {
            font-size: 10px;
            font-weight: 600;
            text-align: center;
            color: #a0aec0;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
                width: 80px;
    display: inline;
        }

        .xess-step-item.active .xess-step-label {
            color: #FF6C37;
        }

        .xess-step-item.completed .xess-step-label {
            color: #a0aec0;
        }

        .xess-step-content {
            position: relative;
            min-height: 200px;
        }

        .xess-step-section {
            display: none;
            opacity: 0;
            transform: translateX(30px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .xess-step-section.active {
            display: block;
            opacity: 1;
            transform: translateX(0);
        }

        .xess-step-section h3 {
            color: #2d3748;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .xess-step-section p {
            color: #4a5568;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .xess-step-controls {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            gap: 15px;
        }

        .xess-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .xess-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }

        .xess-btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .xess-btn-primary {
            background: linear-gradient(135deg, #FF6C37, #FF8E53);
            color: white;
            border: 2px solid transparent;
        }

        .xess-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 108, 55, 0.3);
        }

        .xess-btn-secondary {
            background: transparent;
            color: #718096;
            border: 2px solid #e2e8f0;
        }

        .xess-btn-secondary:hover {
            border-color: #FF6C37;
            color: #FF6C37;
        }

        .xess-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        .xess-step-indicator {
         position: relative;
            top: -5px;
            right: 0px;
            background: rgba(255, 108, 55, 0.1);
            color: #FF6C37;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
                width: 80px;
    float: right;
        margin-left: auto;
        }
        

        /* Responsive Design */
        @media (max-width: 768px) {
            .xess-step-container {
                padding: 20px;
            }
            
            .xess-step-progress {
                flex-direction: column;
                gap: 20px;
            }
            
            .xess-step-progress::before {
                display: none;
            }
            
            .xess-step-progress-line {
                display: none;
            }
            
            .xess-step-controls {
                flex-direction: column;
            }
        }

        /* Animation keyframes */
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .xess-step-circle.active {
            animation: pulse 2s infinite;
        }



        .custom-date-chosser{
           border: 0px !important;
    font-size: 12px;
    padding: 5px 10px;
    height: 30px;
    font-weight: 600;
    color: #ff713e;
    background-color: #f9ebe7;
    border-radius: 20px;
    width: 113px;
        }

                .custom-add-button{
           border: 0px !important;
    font-size: 12px;
    padding: 5px 10px;
    height: 30px;
    font-weight: 600;
    color: #ff713e;
    background-color: #f9ebe7;
    border-radius: 20px;
    display: none;

        }






    /* revition */
   :root {
            --kt-primary: #ff6b35;
            --kt-primary-light: #ffab8a;
            --kt-primary-dark: #e55a2b;
            --kt-gray-100: #f1f1f2;
            --kt-gray-200: #eff2f5;
            --kt-gray-300: #e4e6ea;
            --kt-gray-400: #b5b5c3;
            --kt-gray-600: #7e8299;
            --kt-gray-800: #3f4254;
            --kt-gray-900: #181c32;
        }
      .revision-header {
            background: linear-gradient(135deg, var(--kt-primary) 0%, var(--kt-primary-dark) 100%);
            color: white;
            padding: 2rem;
            border-radius: 12px;
            margin-bottom: 2rem;
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.15);
        }

        .revision-header h1 {
            margin: 0 0 0.5rem 0;
            font-weight: 700;
            font-size: 1.8rem;
        }

        .revision-header p {
            margin: 0;
            opacity: 0.9;
        }

        /* Custom Nav Pills with Step Design */
        .nav-pills-custom {
            background: white;
            padding: 1rem;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.08);
            margin-bottom: 2rem;
            position: relative;
        }

        .nav-pills-custom::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 2rem;
            right: 2rem;
            height: 2px;
            background: var(--kt-gray-300);
            z-index: 1;
            transform: translateY(-50%);
        }

        .nav-pills-custom .nav-item {
            position: relative;
            z-index: 2;
        }

        .nav-pills-custom .nav-link {
            background: white;
            color: var(--kt-gray-600);
            border: 2px solid var(--kt-gray-300);
            border-radius: 50px;
            padding: 0.6rem 1rem;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            position: relative;
            min-width: 100px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
                min-height: 42px;
        }

        .nav-pills-custom .nav-link:hover {
            border-color: var(--kt-primary-light);
            color: var(--kt-primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
        }

        .nav-pills-custom .nav-link.active {
            background: linear-gradient(135deg, var(--kt-primary) 0%, var(--kt-primary-dark) 100%);
            color: white;
            border-color: var(--kt-primary);
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
            transform: translateY(-3px);
        }

        .nav-pills-custom .nav-link.completed {
            background: #10b981;
            color: white;
            border-color: #10b981;
        }


         .nav-pills-custom .nav-link.disabled {
            background: var(--kt-gray-200);
            color: var(--kt-gray-400);
            border-color: var(--kt-gray-300);
            cursor: not-allowed;
            opacity: 0.8;
            pointer-events: none;
        }
        .step-number {
            background: rgba(255,255,255,0.2);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .nav-link.active .step-number,
        .nav-link.completed .step-number {
            background: rgba(255,255,255,0.3);
        }

        /* Content Area */
        .tab-content-custom {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.08);
            overflow: hidden;
        }

        .tab-pane-custom {
            padding: 2.5rem;
        }

        .revision-card {
            border-left: 4px solid var(--kt-primary);
            background: var(--kt-gray-100);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-radius: 0 8px 8px 0;
        }

        .revision-meta {
            display: flex;
            gap: 2rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--kt-gray-600);
            font-size: 0.9rem;
        }

        .meta-item i {
            color: var(--kt-primary);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }

        .feature-card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid var(--kt-gray-300);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-color: var(--kt-primary-light);
        }

        /* .feature-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--kt-primary) 0%, var(--kt-primary-dark) 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-bottom: 1rem;
        } */

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .status-development {
            background: #fef3c7;
            color: #92400e;
        }

        .status-testing {
            background: #dbeafe;
            color: #1e40af;
        }

        .status-production {
            background: #d1fae5;
            color: #065f46;
        }

        .changelog {
            background: #f8fafc;
            border: 1px solid var(--kt-gray-300);
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .changelog h6 {
            color: var(--kt-primary);
            margin-bottom: 1rem;
        }

        .changelog ul {
            margin: 0;
            padding-left: 1.5rem;
        }

        .changelog li {
            margin-bottom: 0.5rem;
            color: var(--kt-gray-700);
        }

        @media (max-width: 768px) {
            .nav-pills-custom {
                padding: 0.5rem;
            }
            
            .nav-pills-custom::before {
                display: none;
            }
            
            .nav-pills-custom .nav-link {
                min-width: auto;
                margin-bottom: 0.5rem;
            }
            
            .tab-pane-custom {
                padding: 1.5rem;
            }
            
            .revision-meta {
                gap: 1rem;
            }
        }



        /* step Container Dark Mode */
        /* Dark Mode Styles for Step Container and Revision Components - Metronic UI */

/* Dark mode CSS variables */
[data-bs-theme="dark"], .dark {
    --kt-primary: #ff6b35;
    --kt-primary-light: #ffab8a;
    --kt-primary-dark: #e55a2b;
    --kt-gray-100: #2b2b40;
    --kt-gray-200: #323248;
    --kt-gray-300: #3f3f56;
    --kt-gray-400: #7c7c99;
    --kt-gray-600: #a1a5b7;
    --kt-gray-800: #f5f8fa;
    --kt-gray-900: #ffffff;
}

/* ===============================
   STEP CONTAINER DARK MODE
   =============================== */

/* Main step container */
[data-bs-theme="dark"] .xess-step-container,
.dark .xess-step-container {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Step header */
[data-bs-theme="dark"] .xess-step-title,
.dark .xess-step-title {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .xess-step-subtitle,
.dark .xess-step-subtitle {
    color: #a1a5b7;
}

/* Step progress line */
[data-bs-theme="dark"] .xess-step-progress::before,
.dark .xess-step-progress::before {
    background: #3f3f56;
}

[data-bs-theme="dark"] .xess-step-progress-line,
.dark .xess-step-progress-line {
    background: #7c7c99;
}

/* Step circles */
[data-bs-theme="dark"] .xess-step-circle,
.dark .xess-step-circle {
    background: #1e1e2d;
    border-color: #3f3f56;
    color: #a1a5b7;
}

[data-bs-theme="dark"] .xess-step-circle.active,
.dark .xess-step-circle.active {
    background: linear-gradient(135deg, #FF6C37, #FF8E53);
    border-color: #FF6C37;
    color: white;
    box-shadow: 0 8px 25px rgba(255, 108, 55, 0.4);
}

[data-bs-theme="dark"] .xess-step-circle.completed,
.dark .xess-step-circle.completed {
    background: #7c7c99;
    border-color: #7c7c99;
    color: white;
}

/* Step labels */
[data-bs-theme="dark"] .xess-step-label,
.dark .xess-step-label {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .xess-step-item.active .xess-step-label,
.dark .xess-step-item.active .xess-step-label {
    color: #FF6C37;
}

[data-bs-theme="dark"] .xess-step-item.completed .xess-step-label,
.dark .xess-step-item.completed .xess-step-label {
    color: #7c7c99;
}

/* Step content */
[data-bs-theme="dark"] .xess-step-section h3,
.dark .xess-step-section h3 {
    color: #f5f8fa;
}

[data-bs-theme="dark"] .xess-step-section p,
.dark .xess-step-section p {
    color: #a1a5b7;
}

/* Buttons */
[data-bs-theme="dark"] .xess-btn-secondary,
.dark .xess-btn-secondary {
    background: transparent;
    color: #a1a5b7;
    border-color: #3f3f56;
}

[data-bs-theme="dark"] .xess-btn-secondary:hover,
.dark .xess-btn-secondary:hover {
    border-color: #FF6C37;
    color: #FF6C37;
    background: rgba(255, 108, 55, 0.1);
}

/* Step indicator */
[data-bs-theme="dark"] .xess-step-indicator,
.dark .xess-step-indicator {
    background: rgba(255, 108, 55, 0.2);
    color: #FF6C37;
}

/* Custom elements */
[data-bs-theme="dark"] .custom-date-chosser,
.dark .custom-date-chosser {
    color: #ff713e;
    background-color: rgba(255, 113, 62, 0.15);
    border: 1px solid rgba(255, 113, 62, 0.3) !important;
}

[data-bs-theme="dark"] .custom-add-button,
.dark .custom-add-button {
    color: #ff713e;
    background-color: rgba(255, 113, 62, 0.15);
    border: 1px solid rgba(255, 113, 62, 0.3) !important;
}

/* ===============================
   REVISION COMPONENTS DARK MODE
   =============================== */

/* Revision header */
[data-bs-theme="dark"] .revision-header,
.dark .revision-header {
    background: linear-gradient(135deg, var(--kt-primary) 0%, var(--kt-primary-dark) 100%);
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}

/* Nav pills container */
[data-bs-theme="dark"] .nav-pills-custom,
.dark .nav-pills-custom {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}

[data-bs-theme="dark"] .nav-pills-custom::before,
.dark .nav-pills-custom::before {
    background: #3f3f56;
}

/* Nav links */
[data-bs-theme="dark"] .nav-pills-custom .nav-link,
.dark .nav-pills-custom .nav-link {
    background: #1e1e2d;
    color: #a1a5b7;
    border-color: #3f3f56;
}

[data-bs-theme="dark"] .nav-pills-custom .nav-link:hover,
.dark .nav-pills-custom .nav-link:hover {
    border-color: var(--kt-primary-light);
    color: var(--kt-primary);
    background: rgba(255, 107, 53, 0.1);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

[data-bs-theme="dark"] .nav-pills-custom .nav-link.active,
.dark .nav-pills-custom .nav-link.active {
    background: linear-gradient(135deg, var(--kt-primary) 0%, var(--kt-primary-dark) 100%);
    color: white;
    border-color: var(--kt-primary);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

[data-bs-theme="dark"] .nav-pills-custom .nav-link.completed,
.dark .nav-pills-custom .nav-link.completed {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

[data-bs-theme="dark"] .nav-pills-custom .nav-link.disabled,
.dark .nav-pills-custom .nav-link.disabled {
    background: #2b2b40;
    color: #7c7c99;
    border-color: #3f3f56;
}

/* Step number */
[data-bs-theme="dark"] .step-number,
.dark .step-number {
    background: rgba(255,255,255,0.15);
}

/* Tab content */
[data-bs-theme="dark"] .tab-content-custom,
.dark .tab-content-custom {
    background: #1e1e2d;
    border: 1px solid #2b2b40;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}

/* Revision card */
[data-bs-theme="dark"] .revision-card,
.dark .revision-card {
    background: #2b2b40;
    border-left-color: var(--kt-primary);
    color: #f5f8fa;
}

/* Meta items */
[data-bs-theme="dark"] .meta-item,
.dark .meta-item {
    color: #a1a5b7;
}

[data-bs-theme="dark"] .meta-item i,
.dark .meta-item i {
    color: var(--kt-primary);
}

/* Feature cards */
[data-bs-theme="dark"] .feature-card,
.dark .feature-card {
    background: #2b2b40;
    border-color: #3f3f56;
    color: #f5f8fa;
}

[data-bs-theme="dark"] .feature-card:hover,
.dark .feature-card:hover {
    background: #323248;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border-color: var(--kt-primary-light);
}

/* Status badges - enhanced for dark mode */
[data-bs-theme="dark"] .status-development,
.dark .status-development {
    background: #3d2f1a;
    color: #fbbf24;
}

[data-bs-theme="dark"] .status-testing,
.dark .status-testing {
    background: #1e2a44;
    color: #60a5fa;
}

[data-bs-theme="dark"] .status-production,
.dark .status-production {
    background: #1f3a1f;
    color: #4ade80;
}

/* Changelog */
[data-bs-theme="dark"] .changelog,
.dark .changelog {
    background: #2b2b40;
    border-color: #3f3f56;
    color: #f5f8fa;
}

[data-bs-theme="dark"] .changelog h6,
.dark .changelog h6 {
    color: var(--kt-primary);
}

[data-bs-theme="dark"] .changelog li,
.dark .changelog li {
    color: #a1a5b7;
}

/* Enhanced focus states for accessibility */
[data-bs-theme="dark"] .xess-btn:focus,
.dark .xess-btn:focus,
[data-bs-theme="dark"] .nav-pills-custom .nav-link:focus,
.dark .nav-pills-custom .nav-link:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}

/* Custom scrollbar for dark mode */
[data-bs-theme="dark"] .xess-step-container::-webkit-scrollbar,
.dark .xess-step-container::-webkit-scrollbar,
[data-bs-theme="dark"] .tab-content-custom::-webkit-scrollbar,
.dark .tab-content-custom::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] .xess-step-container::-webkit-scrollbar-track,
.dark .xess-step-container::-webkit-scrollbar-track,
[data-bs-theme="dark"] .tab-content-custom::-webkit-scrollbar-track,
.dark .tab-content-custom::-webkit-scrollbar-track {
    background: #1e1e2d;
    border-radius: 4px;
}

[data-bs-theme="dark"] .xess-step-container::-webkit-scrollbar-thumb,
.dark .xess-step-container::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .tab-content-custom::-webkit-scrollbar-thumb,
.dark .tab-content-custom::-webkit-scrollbar-thumb {
    background: #3f3f56;
    border-radius: 4px;
}

[data-bs-theme="dark"] .xess-step-container::-webkit-scrollbar-thumb:hover,
.dark .xess-step-container::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .tab-content-custom::-webkit-scrollbar-thumb:hover,
.dark .tab-content-custom::-webkit-scrollbar-thumb:hover {
    background: #4a4a6a;
}

/* Animation adjustments for dark mode */
[data-bs-theme="dark"] .xess-step-circle.active,
.dark .xess-step-circle.active {
    animation: pulse-dark 2s infinite;
}

@keyframes pulse-dark {
    0%, 100% { 
        transform: scale(1.1); 
        box-shadow: 0 8px 25px rgba(255, 108, 55, 0.4);
    }
    50% { 
        transform: scale(1.15); 
        box-shadow: 0 12px 35px rgba(255, 108, 55, 0.6);
    }
}
        /* end of step Container Dark Mode */

    
/*     
       / * Professional Revisions Styling */ */
.professional-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    overflow: hidden;
    transition: all 0.3s ease;
}

.professional-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-header-section {
    padding: 2rem 2rem 1rem 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e9ecef;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
}

.status-badge i {
    margin-right: 0.5rem;
}

.status-approved, .status-active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.status-pending, .status-draft {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.status-rejected {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}
.status-review_requested {
    background: linear-gradient(135deg, #ffa600, #f0ec04);
    color: rgb(10, 10, 10);
}

.revision-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    color: #6b7280;
    font-size: 0.9rem;
}

.meta-item i {
    margin-right: 0.5rem;
    color: #9ca3af;
    width: 16px;
}

.card-content-section {
    padding: 2rem;
}

.content-section {
    margin-bottom: 2rem;
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.content-row:last-child {
    border-bottom: none;
}

.content-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.content-section .content-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    text-transform: none;
    letter-spacing: normal;
}

.content-value {
    color: #4b5563;
    line-height: 1.6;
    white-space: pre-line;
}

.overview-content {
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    white-space: pre-line;

}
.preview-caption{
    white-space: pre-line;
        display: inline-table;
}

.card-actions {
    padding: 1.5rem 2rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.card-actions .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.card-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Form Styling */
.revision-form-container {
    padding: 2rem;
}

.form-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.form-header h4 {
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-header p {
    margin-bottom: 0;
    font-size: 0.95rem;
}

.form-group .form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-control {
    border-radius: 6px;
    border: 2px solid #e5e7eb;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Tab Styling */
.nav-pills .nav-link {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
    background: #f3f4f6;
    color: #374151;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: #3b82f6;
}

.tab-pane-custom {
    padding: 0;
}

/* Notification Toast */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .card-header-section,
    .card-content-section,
    .card-actions {
        padding: 1.5rem;
    }
    
    .content-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .revision-meta {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .card-actions .d-flex {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .card-actions .btn {
        width: 100%;
    }
}



        /* Main approved label styles */
        .approved-label {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 0.5rem 0.875rem;
            border-radius: 8px;
            font-size: 0.8125rem;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }

        .approved-label::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        }

        .approved-icon {
            width: 14px;
            height: 14px;
            fill: currentColor;
            flex-shrink: 0;
        }

        /* Alternative attachment-style label */
        .approved-attachment {
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 0.8125rem;
            color: #166534;
            font-weight: 500;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
        }

        .approved-attachment:hover {
            background: #ecfdf5;
            border-color: #86efac;
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .approved-attachment .approved-icon {
            width: 16px;
            height: 16px;
            fill: #10b981;
        }



        /* Review Request Label Styles */
.review-request-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #92400e;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.review-request-attachment:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.review-icon {
    width: 16px;
    height: 16px;
    fill: #f59e0b;
    flex-shrink: 0;
}

/* Popup Modal Styles */
.revision-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.revision-popup {
    background: white;
    position: relative;
    z-index: 100000;
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.3s ease;
}

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

.popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.popup-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.popup-form .form-group {
    margin-bottom: 20px;
}

.popup-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.popup-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 100px;
}

.popup-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.popup-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.popup-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.popup-btn-primary {
    background: #007bff;
    color: white;
}

.popup-btn-primary:hover {
    background: #0056b3;
}

.popup-btn-secondary {
    background: #6c757d;
    color: white;
}

.popup-btn-secondary:hover {
    background: #545b62;
}

.popup-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Force textarea to be editable */
.popup-form textarea,
#revisionComment {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    resize: vertical !important;
    min-height: 100px !important;
    background: white !important;
    color: #333 !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    position: relative !important;
    z-index: 100001 !important;
}

/* Remove any disabled/readonly styling */
.popup-form textarea:disabled,
.popup-form textarea[readonly] {
    background: white !important;
    color: #333 !important;
    cursor: text !important;
    opacity: 1 !important;
}

/* Focus styles */
.popup-form textarea:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}




/* revision / popup dark mode  */
/* Dark Mode Professional Revisions Styling */

/* Base dark mode variables */
:root[data-bs-theme="dark"], 
.dark-mode,
[data-theme="dark"] {
    --bs-dark-rgb: 25, 28, 33;
    --bs-body-bg: #191c21;
    --bs-body-color: #e5e7eb;
    --bs-card-bg: #1e2129;
    --bs-border-color: #2d3748;
    --bs-secondary-bg: #252932;
}

/* Professional Card Dark Mode */
[data-bs-theme="dark"] .professional-card,
.dark-mode .professional-card,
[data-theme="dark"] .professional-card {
    background: #1e2129;
    border: 1px solid #2d3748;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .professional-card:hover,
.dark-mode .professional-card:hover,
[data-theme="dark"] .professional-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Card Header Dark Mode */
[data-bs-theme="dark"] .card-header-section,
.dark-mode .card-header-section,
[data-theme="dark"] .card-header-section {
    background: linear-gradient(135deg, #252932 0%, #1e2129 100%);
    border-bottom: 1px solid #2d3748;
}

/* Card Title Dark Mode */
[data-bs-theme="dark"] .card-title,
.dark-mode .card-title,
[data-theme="dark"] .card-title {
    color: #f8fafc;
}

/* Status Badges Dark Mode (keeping original colors for status indication) */
[data-bs-theme="dark"] .status-approved,
[data-bs-theme="dark"] .status-active,
.dark-mode .status-approved,
.dark-mode .status-active,
[data-theme="dark"] .status-approved,
[data-theme="dark"] .status-active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

[data-bs-theme="dark"] .status-pending,
[data-bs-theme="dark"] .status-draft,
.dark-mode .status-pending,
.dark-mode .status-draft,
[data-theme="dark"] .status-pending,
[data-theme="dark"] .status-draft {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

[data-bs-theme="dark"] .status-rejected,
.dark-mode .status-rejected,
[data-theme="dark"] .status-rejected {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

[data-bs-theme="dark"] .status-review_requested,
.dark-mode .status-review_requested,
[data-theme="dark"] .status-review_requested {
    background: linear-gradient(135deg, #ffa600, #f0ec04);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(255, 166, 0, 0.3);
}

/* Meta Items Dark Mode */
[data-bs-theme="dark"] .meta-item,
.dark-mode .meta-item,
[data-theme="dark"] .meta-item {
    color: #9ca3af;
}

[data-bs-theme="dark"] .meta-item i,
.dark-mode .meta-item i,
[data-theme="dark"] .meta-item i {
    color: #6b7280;
}

/* Content Section Dark Mode */
[data-bs-theme="dark"] .card-content-section,
.dark-mode .card-content-section,
[data-theme="dark"] .card-content-section {
    background: #1e2129;
}

[data-bs-theme="dark"] .content-row,
.dark-mode .content-row,
[data-theme="dark"] .content-row {
    border-bottom: 1px solid #2d3748;
}

[data-bs-theme="dark"] .content-label,
.dark-mode .content-label,
[data-theme="dark"] .content-label {
    color: #e5e7eb;
}

[data-bs-theme="dark"] .content-section .content-label,
.dark-mode .content-section .content-label,
[data-theme="dark"] .content-section .content-label {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .content-value,
.dark-mode .content-value,
[data-theme="dark"] .content-value {
    color: #cbd5e1;
}

/* Overview Content Dark Mode */
[data-bs-theme="dark"] .overview-content,
.dark-mode .overview-content,
[data-theme="dark"] .overview-content {
    background: #252932;
    border-left: 4px solid #3b82f6;
}

/* Card Actions Dark Mode */
[data-bs-theme="dark"] .card-actions,
.dark-mode .card-actions,
[data-theme="dark"] .card-actions {
    background: #252932;
    border-top: 1px solid #2d3748;
}

/* Form Styling Dark Mode */
[data-bs-theme="dark"] .revision-form-container,
.dark-mode .revision-form-container,
[data-theme="dark"] .revision-form-container {
    background: #1e2129;
}

[data-bs-theme="dark"] .form-header,
.dark-mode .form-header,
[data-theme="dark"] .form-header {
    border-bottom: 2px solid #2d3748;
}

[data-bs-theme="dark"] .form-header h4,
.dark-mode .form-header h4,
[data-theme="dark"] .form-header h4 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .form-header p,
.dark-mode .form-header p,
[data-theme="dark"] .form-header p {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .form-group .form-label,
.dark-mode .form-group .form-label,
[data-theme="dark"] .form-group .form-label {
    color: #e5e7eb;
}

[data-bs-theme="dark"] .form-control,
.dark-mode .form-control,
[data-theme="dark"] .form-control {
    background: #252932;
    border: 2px solid #374151;
    color: #e5e7eb;
}

[data-bs-theme="dark"] .form-control:focus,
.dark-mode .form-control:focus,
[data-theme="dark"] .form-control:focus {
    background: #252932;
    border-color: #3b82f6;
    color: #e5e7eb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-bs-theme="dark"] .form-control::placeholder,
.dark-mode .form-control::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: #6b7280;
}

/* Tab Styling Dark Mode */
[data-bs-theme="dark"] .nav-pills .nav-link,
.dark-mode .nav-pills .nav-link,
[data-theme="dark"] .nav-pills .nav-link {
    color: #9ca3af;
    background: #252932;
    border: 1px solid #374151;
}

[data-bs-theme="dark"] .nav-pills .nav-link:hover,
.dark-mode .nav-pills .nav-link:hover,
[data-theme="dark"] .nav-pills .nav-link:hover {
    background: #374151;
    color: #e5e7eb;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active,
.dark-mode .nav-pills .nav-link.active,
[data-theme="dark"] .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: #3b82f6;
}

/* Notification Toast Dark Mode */
[data-bs-theme="dark"] .notification-toast,
.dark-mode .notification-toast,
[data-theme="dark"] .notification-toast {
    background: #1e2129;
    border: 1px solid #2d3748;
    color: #e5e7eb;
}

/* Approved Label Dark Mode */
[data-bs-theme="dark"] .approved-label,
.dark-mode .approved-label,
[data-theme="dark"] .approved-label {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .approved-attachment,
.dark-mode .approved-attachment,
[data-theme="dark"] .approved-attachment {
    background: #064e3b;
    border: 1px solid #065f46;
    color: #a7f3d0;
}

[data-bs-theme="dark"] .approved-attachment:hover,
.dark-mode .approved-attachment:hover,
[data-theme="dark"] .approved-attachment:hover {
    background: #065f46;
    border-color: #059669;
}

[data-bs-theme="dark"] .approved-attachment .approved-icon,
.dark-mode .approved-attachment .approved-icon,
[data-theme="dark"] .approved-attachment .approved-icon {
    fill: #10b981;
}

/* Review Request Label Dark Mode */
[data-bs-theme="dark"] .review-request-attachment,
.dark-mode .review-request-attachment,
[data-theme="dark"] .review-request-attachment {
    background: #451a03;
    border: 1px solid #78350f;
    color: #fcd34d;
}

[data-bs-theme="dark"] .review-request-attachment:hover,
.dark-mode .review-request-attachment:hover,
[data-theme="dark"] .review-request-attachment:hover {
    background: #78350f;
    border-color: #f59e0b;
}

[data-bs-theme="dark"] .review-icon,
.dark-mode .review-icon,
[data-theme="dark"] .review-icon {
    fill: #f59e0b;
}

/* Popup Modal Dark Mode */
[data-bs-theme="dark"] .revision-popup-overlay,
.dark-mode .revision-popup-overlay,
[data-theme="dark"] .revision-popup-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-bs-theme="dark"] .revision-popup,
.dark-mode .revision-popup,
[data-theme="dark"] .revision-popup {
    background: #1e2129;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #2d3748;
}

[data-bs-theme="dark"] .popup-title,
.dark-mode .popup-title,
[data-theme="dark"] .popup-title {
    color: #f8fafc;
}

[data-bs-theme="dark"] .popup-form label,
.dark-mode .popup-form label,
[data-theme="dark"] .popup-form label {
    color: #e5e7eb;
}

[data-bs-theme="dark"] .popup-form textarea,
[data-bs-theme="dark"] #revisionComment,
.dark-mode .popup-form textarea,
.dark-mode #revisionComment,
[data-theme="dark"] .popup-form textarea,
[data-theme="dark"] #revisionComment {
    background: #252932 !important;
    border: 1px solid #374151 !important;
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .popup-form textarea:focus,
[data-bs-theme="dark"] #revisionComment:focus,
.dark-mode .popup-form textarea:focus,
.dark-mode #revisionComment:focus,
[data-theme="dark"] .popup-form textarea:focus,
[data-theme="dark"] #revisionComment:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

[data-bs-theme="dark"] .popup-form textarea::placeholder,
[data-bs-theme="dark"] #revisionComment::placeholder,
.dark-mode .popup-form textarea::placeholder,
.dark-mode #revisionComment::placeholder,
[data-theme="dark"] .popup-form textarea::placeholder,
[data-theme="dark"] #revisionComment::placeholder {
    color: #6b7280 !important;
}

/* Button Styling Dark Mode */
[data-bs-theme="dark"] .popup-btn-primary,
.dark-mode .popup-btn-primary,
[data-theme="dark"] .popup-btn-primary {
    background: #3b82f6;
    color: white;
}

[data-bs-theme="dark"] .popup-btn-primary:hover,
.dark-mode .popup-btn-primary:hover,
[data-theme="dark"] .popup-btn-primary:hover {
    background: #2563eb;
}

[data-bs-theme="dark"] .popup-btn-secondary,
.dark-mode .popup-btn-secondary,
[data-theme="dark"] .popup-btn-secondary {
    background: #4b5563;
    color: white;
}

[data-bs-theme="dark"] .popup-btn-secondary:hover,
.dark-mode .popup-btn-secondary:hover,
[data-theme="dark"] .popup-btn-secondary:hover {
    background: #374151;
}

/* Additional dark mode support for buttons and interactive elements */
[data-bs-theme="dark"] .btn,
.dark-mode .btn,
[data-theme="dark"] .btn {
    border-color: #374151;
}

[data-bs-theme="dark"] .btn-primary,
.dark-mode .btn-primary,
[data-theme="dark"] .btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
}

[data-bs-theme="dark"] .btn-secondary,
.dark-mode .btn-secondary,
[data-theme="dark"] .btn-secondary {
    background: #4b5563;
    border-color: #4b5563;
    color: white;
}

[data-bs-theme="dark"] .btn-outline-primary,
.dark-mode .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary {
    color: #60a5fa;
    border-color: #3b82f6;
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
.dark-mode .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:hover {
    background: #3b82f6;
    color: white;
}

/* Scrollbar Dark Mode */
[data-bs-theme="dark"] ::-webkit-scrollbar,
.dark-mode ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track,
.dark-mode ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #252932;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb,
.dark-mode ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover,
.dark-mode ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* end of revison / popup dark mode */
.symbol-label img{
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/* Select All / Remove All Buttons */
.select-all-btn, .remove-all-btn {
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}

.select-all-btn:hover {
    background: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3) !important;
}

.remove-all-btn:hover {
    background: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
}

.select-all-btn:disabled, .remove-all-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Container and Selection Box */
.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 48px !important;
    padding: 0.5rem 0.75rem !important;
    border: 2px solid #e4e6ea !important;
    border-radius: 0.75rem !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15) !important;
    background: #ffffff !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25), 0 4px 12px rgba(13, 110, 253, 0.15) !important;
    background: #ffffff !important;
}

/* Selected Items (Tags) Container */
.select2-container--bootstrap-5 .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

/* Individual Selected Items (Tags) */
.select2-container--bootstrap-5 .select2-selection__choice {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 2rem !important;
    padding: 0.4rem 0.75rem 0.4rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3) !important;
    transition: all 0.2s ease !important;
    max-width: 200px !important;
    overflow: hidden !important;
    position: relative !important;
}

.select2-container--bootstrap-5 .select2-selection__choice:hover {
    background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.4) !important;
}

/* Tag Text */
.select2-container--bootstrap-5 .select2-selection__choice__display {
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
}

/* Remove Button */
.select2-container--bootstrap-5 .select2-selection__choice__remove {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    order: 2 !important;
}

.select2-container--bootstrap-5 .select2-selection__choice__remove:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #ffc107 !important;
    transform: scale(1.1) !important;
}

.select2-container--bootstrap-5 .select2-selection__choice__remove:before {
    content: "×" !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Search Input */
.select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
    border: none !important;
    background: transparent !important;
    padding: 0.5rem 0 !important;
    font-size: 1rem !important;
    color: #495057 !important;
    outline: none !important;
    min-width: 200px !important;
    flex-grow: 1 !important;
}

.select2-container--bootstrap-5 .select2-search--inline .select2-search__field::placeholder {
    color: #6c757d !important;
    font-style: italic !important;
}

/* Dropdown Container */
.select2-container--bootstrap-5 .select2-dropdown {
    border: 2px solid #e4e6ea !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    background: #ffffff !important;
    margin-top: 0.5rem !important;
    z-index: 1056 !important;
    overflow: hidden !important;
}

/* Search in Dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown {
    padding: 1rem !important;
    border-bottom: 1px solid #e9ecef !important;
    background: #f8f9fa !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    background: #ffffff !important;
    color: #495057 !important;
    transition: all 0.2s ease !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    outline: none !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Results Container */
.select2-container--bootstrap-5 .select2-results {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 0.5rem 0 !important;
}

/* Individual Result Options */
.select2-container--bootstrap-5 .select2-results__option {
    padding: 0.75rem 1.25rem !important;
    color: #495057 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-bottom: 1px solid #f1f3f4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.select2-container--bootstrap-5 .select2-results__option:last-child {
    border-bottom: none !important;
}

.select2-container--bootstrap-5 .select2-results__option:hover,
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #0d6efd !important;
    transform: translateX(4px) !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"]:before {
    content: "✓" !important;
    font-weight: bold !important;
    margin-right: 0.5rem !important;
}

/* Loading and No Results */
.select2-container--bootstrap-5 .select2-results__option--loading {
    text-align: center !important;
    color: #6c757d !important;
    font-style: italic !important;
}

.select2-container--bootstrap-5 .select2-results__option--no-results {
    text-align: center !important;
    color: #dc3545 !important;
    font-style: italic !important;
}

/* Scrollbar Styling */
.select2-container--bootstrap-5 .select2-results::-webkit-scrollbar {
    width: 6px !important;
}

.select2-container--bootstrap-5 .select2-results::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

.select2-container--bootstrap-5 .select2-results::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
}

.select2-container--bootstrap-5 .select2-results::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* Error State Styling */
.is-invalid + .select2-container--bootstrap-5 .select2-selection--multiple,
.generic-select2.is-invalid + .select2-container--bootstrap-5 .select2-selection--multiple {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Success State Styling */
.is-valid + .select2-container--bootstrap-5 .select2-selection--multiple,
.generic-select2.is-valid + .select2-container--bootstrap-5 .select2-selection--multiple {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25) !important;
}

/* Animation for adding/removing tags */
@keyframes tagAdd {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.select2-container--bootstrap-5 .select2-selection__choice {
    animation: tagAdd 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.select2-dropdown-scroll-fix .select2-results__options {
    overflow-y: auto !important;
    max-height: 200px !important;
}
.select2-dropdown-scroll-fix .select2-results__options::-webkit-scrollbar {
    width: 6px;
}
.select2-dropdown-scroll-fix .select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.select2-dropdown-scroll-fix .select2-results__options::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}
.select2-dropdown-scroll-fix .select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
    .select2-container--bootstrap-5 .select2-selection__choice {
        max-width: 120px !important;
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem 0.3rem 0.8rem !important;
    }
    
    .select2-container--bootstrap-5 .select2-selection__choice__display {
        max-width: 80px !important;
    }
    
    .select2-container--bootstrap-5 .select2-search--inline .select2-search__field {
        min-width: 150px !important;
    }
    
    .select-all-btn, .remove-all-btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}


  :root {
            --orange-primary: #ff6b35;
            --orange-secondary: #ff8c42;
            --orange-dark: #e55a2b;
        
        }
  .preview-image {
            position: relative;
            background: var(--dark-bg);
            border-radius: 12px;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--dark-border);
            overflow: hidden;
            margin-bottom: 15px;
        }

        .preview-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        .preview-image video {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        /* Custom Video Controls */
        .video-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-container video {
            width: 100%;
            height: auto;
            max-height: 600px;
        }

        .video-container video::-webkit-media-controls-panel {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .video-container video::-webkit-media-controls-play-button {
            background-color: var(--orange-primary);
            border-radius: 50%;
        }

        .video-container video::-webkit-media-controls-timeline {
            background-color: var(--dark-border);
        }

        .video-container video::-webkit-media-controls-current-time-display,
        .video-container video::-webkit-media-controls-time-remaining-display {
            color: var(--dark-text);
        }

        /* Download Button */
        .download-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            transform: scale(0.8);
        }

        .show-more-btn {
            background: none;
            border: none;
            color: var(--orange-primary);
            cursor: pointer;
            font-size: 14px;
            padding: 0;
            margin-top: 5px;
        }

        .show-more-btn:hover {
            color: var(--orange-secondary);
            text-decoration: underline;
        }

        .preview-image:hover .download-btn {
            opacity: 1;
            transform: scale(1);
        }

        .download-btn:hover {
            background: var(--orange-primary);
            transform: scale(1.1);
        }

        .download-btn i {
            font-size: 16px;
        }

        
          .preview-image:hover .download-btn {
            opacity: 1;
            transform: scale(1);
        }

        .download-btn:hover {
            background: var(--orange-primary);
            transform: scale(1.1);
        }

        .download-btn i {
            font-size: 16px;
        }


           /* Loading State */
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--dark-border);
            border-top: 3px solid var(--orange-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        /* Responsive Design */
        @media (max-width: 768px) {
            .preview-post {
                margin: 10px;
                padding: 15px;
            }
            
            .preview-image {
                min-height: 150px;
            }
        }

        /* Focus States for Accessibility */
        .download-btn:focus,
        .show-more-btn:focus {
            outline: 2px solid var(--orange-primary);
            outline-offset: 2px;
        }


      .download-btn-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    z-index: 10;
}

.attachment-preview:hover .download-btn-overlay {
    opacity: 1;
    transform: scale(1);
}

.download-btn-overlay:hover {
    background: #ff6b35;
    transform: scale(1.1);
}

.download-btn-overlay:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}

.download-btn-overlay i {
    font-size: 14px;
}

/* Download Button for Files */
.download-btn-file {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.download-btn-file:hover {
    background: #ff6b35;
    color: white;
    border-color: #ff6b35;
    transform: translateY(-1px);
}

.download-btn-file:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}

.download-btn-file i {
    font-size: 12px;
}

/* File Preview Container */
.file-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6 !important;
    transition: all 0.3s ease;
}

.file-preview:hover {
    border-color: #ff6b35 !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.1);
}

/* Image and Video Containers */
.image-container,
.video-container {
    border-radius: 8px;
    overflow: hidden;
}

.image-container img,
.video-container video {
    transition: transform 0.3s ease;
}

.attachment-preview:hover .image-container img,
.attachment-preview:hover .video-container video {
    transform: scale(1.02);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .download-btn-file {
        background: #2a2a3e;
        color: #a0a0a0;
        border-color: #3a3a4e;
    }
    
    .download-btn-file:hover {
        background: #ff6b35;
        color: white;
        border-color: #ff6b35;
    }
    
    .file-preview {
        background: #2a2a3e;
        border-color: #3a3a4e !important;
        color: #ffffff;
    }
    
    .file-preview:hover {
        border-color: #ff6b35 !important;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .download-btn-overlay {
        width: 36px;
        height: 36px;
        opacity: 1;
        transform: scale(1);
    }
    
    .download-btn-overlay i {
        font-size: 12px;
    }
    
    .download-btn-file {
        width: 32px;
        height: 32px;
    }
    
    .download-btn-file i {
        font-size: 11px;
    }
}

/* Loading State */
.download-btn-overlay.loading,
.download-btn-file.loading {
    pointer-events: none;
    opacity: 0.6;
}

.download-btn-overlay.loading::after,
.download-btn-file.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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




/* task type for project create form  */
/* Task type selector grid */
 .task-types-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .task-type-option {
            background: #ffffff;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: .5rem .5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            min-height: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            min-width: 130px;
        }

        .task-type-option::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: transparent;
            transition: all 0.3s ease;
        }

        .task-type-option:hover {
            border-color: #ff8c00;
            box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
            transform: translateY(-4px);
        }

        .task-type-option:hover::before {
            background: linear-gradient(90deg, #ff8c00, #ffa500);
        }

        .task-type-option.active {
            border: 2px solid #ff8c00;
            background: linear-gradient(135deg, #fff5e6 0%, #ffe0b3 100%);
            box-shadow: 0 12px 35px rgba(255, 140, 0, 0.25);
            transform: translateY(-2px);
        }

        .task-type-option.active::before {
            background: linear-gradient(90deg, #ff8c00, #ffa500);
        }

        .task-icon {
            width: 3.5rem;
            height: 3.5rem;
            background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
            position: relative;
        }

        .task-icon::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 10px;
            padding: 1px;
            background: transparent;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: xor;
            transition: all 0.3s ease;
        }

        .task-icon i {
            font-size: 1.5rem;
            color: #64748b;
            transition: all 0.3s ease;
        }

        .task-type-option:hover .task-icon {
            transform: scale(1.1) rotate(5deg);
            background: linear-gradient(135deg, #fff5e6 0%, #ffe0b3 100%);
        }

        .task-type-option:hover .task-icon i {
            color: #ff8c00;
        }

        .task-type-option.active .task-icon {
            background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
            box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
            transform: scale(1.05);
        }

        .task-type-option.active .task-icon::after {
            background: linear-gradient(135deg, #ff8c00, #ffa500);
        }

        .task-type-option.active .task-icon i {
            color: white;
            transform: scale(1.1);
            z-index: 9;
        }

        /* None/Other option styling */
        .task-type-option.none-option {
            border: 2px dashed #cbd5e0;
            background: #f8fafc;
        }

        .task-type-option.none-option:hover {
            border-color: #ff8c00;
            border-style: solid;
            background: #fff5e6;
        }

        .task-type-option.none-option.active {
            border: 2px solid #ff8c00;
            background: linear-gradient(135deg, #fff5e6 0%, #ffe0b3 100%);
        }

        .none-icon {
            width: 3.5rem;
            height: 3.5rem;
            border: 2px dashed #cbd5e0;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .none-icon i {
            font-size: 1.25rem;
            color: #94a3b8;
            transition: all 0.3s ease;
        }

        .task-type-option.none-option:hover .none-icon {
            border-color: #ff8c00;
            border-style: solid;
            background: #fff5e6;
        }

        .task-type-option.none-option:hover .none-icon i {
            color: #ff8c00;
        }

        .task-type-option.none-option.active .none-icon {
            border: none;
            background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
            box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
        }

        .task-type-option.none-option.active .none-icon i {
            color: white;
        }

        .task-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: #2d3748;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
        }

        .task-type-option.active .task-name {
            color: #ff8c00;
        }

        .task-description {
            font-size: 0.75rem;
            color: #64748b;
            line-height: 1.4;
            transition: all 0.3s ease;
        }

        .task-type-option.active .task-description {
            color: #8b5a00;
        }

        .selected-indicator {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.75rem;
            box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
            animation: bounceIn 0.3s ease;
        }

        .task-type-option.active .selected-indicator {
            display: flex;
        }

         .task-type-option.active .selected-indicator i{     
                z-index: 9;
            color: white !important;
            font-size: small !important;   

        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.1);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Pulse animation for active state */
        .task-type-option.active {
            animation: gentlePulse 2s ease-in-out infinite;
        }

        @keyframes gentlePulse {
            0%, 100% {
                box-shadow: 0 12px 35px rgba(255, 140, 0, 0.25);
            }
            50% {
                box-shadow: 0 12px 35px rgba(255, 140, 0, 0.35);
            }
        }





/* end of task type for project create form  */
/* Metronic Select2 Bootstrap 5 Theme Custom Styling */

/* Main container styling */
.select2-container--bootstrap5 {
    width: 100% !important;
    min-width: 160px !important;
}

/* Single selection styling */
.select2-container--bootstrap5 .select2-selection--single {
    height: 44px !important; /* Increased height for better click area */
    min-height: 44px !important;
    padding: 0.75rem 1.25rem !important; /* Increased padding for size */
    font-size: 1rem !important; /* Slightly larger font */
    border: 1.5px solid #e4e6ea !important;
    border-radius: 0.5rem !important;
    background-color: #f5f8fa !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* Fix for form-select-solid class */
.select2-container--bootstrap5 .select2-selection--single.form-select-solid {
    background-color: #f5f8fa !important;
    border-color: #e4e6ea !important;
}

/* Focus state */
.select2-container--bootstrap5.select2-container--focus .select2-selection--single {
    border-color: #009ef7 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15) !important;
    outline: 0 !important;
}

/* Rendered text styling */
.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    color: #5e6278 !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    padding-right: 60px !important; /* Add space for clear button and arrow */
    font-weight: 500 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Arrow styling - Show but make it smaller */
.select2-container--bootstrap5 .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 1rem !important;
    top: 0 !important;
    width: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__arrow b {
    border-color: #a1a5b7 transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 6px 5px 0 5px !important;
    height: 0 !important;
    left: 50% !important;
    margin-left: -5px !important;
    margin-top: -3px !important;
    position: absolute !important;
    top: 50% !important;
    width: 0 !important;
    opacity: 0 !important; /* Hide the arrow by default */
}

/* Clear button styling - Fixed positioning */
.select2-container--bootstrap5 .select2-selection--single .select2-selection__clear {
    color: #a1a5b7 !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    padding: 4px 6px !important;
    position: absolute !important;
    right: 2.5rem !important; /* Position to the left of arrow */
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.15s ease-in-out !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__clear:hover {
    color: #ffffff !important;
    background-color: #e4e6ea !important;
}

/* When allowClear is enabled, adjust rendered text padding */
.select2-container--bootstrap5[dir="ltr"] .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
}

/* Dropdown styling */
.select2-container--bootstrap5 .select2-dropdown {
    border: 1.5px solid #e4e6ea !important;
    border-radius: 0.5rem !important;
    background-color: #ffffff !important;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important;
    margin-top: 0.125rem !important;
    font-size: 1rem !important;
}

/* Results styling */
.select2-container--bootstrap5 .select2-results__options {
    max-height: 240px !important;
    overflow-y: auto !important;
}

.select2-container--bootstrap5 .select2-results__option {
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    color: #5e6278 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out !important;
}

.select2-container--bootstrap5 .select2-results__option:hover,
.select2-container--bootstrap5 .select2-results__option--highlighted {
    background-color: #f5f8fa !important;
    color: #181c32 !important;
}

.select2-container--bootstrap5 .select2-results__option[aria-selected="true"] {
    background-color: #009ef7 !important;
    color: #ffffff !important;
}

/* Search field styling */
.select2-container--bootstrap5 .select2-search--dropdown {
    padding: 0.75rem !important;
}

.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e4e6ea !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    width: 100% !important;
    background-color: #ffffff !important;
    color: #5e6278 !important;
    outline: none !important;
    box-shadow: none !important;
}

.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field:focus {
    border-color: #009ef7 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15) !important;
}

/* Placeholder styling */
.select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder {
    color: #a1a5b7 !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
}

/* Disabled state */
.select2-container--bootstrap5 .select2-selection--single:disabled {
    background-color: #f5f8fa !important;
    border-color: #e4e6ea !important;
    color: #a1a5b7 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Fix for width classes */
.select2-container--bootstrap5.w-180px {
    width: 200px !important;
}

.select2-container--bootstrap5.w-200px {
    width: 220px !important;
}

.select2-container--bootstrap5.w-250px {
    width: 270px !important;
}

/* Fix for specific form-select-solid styling */
.select2-selection.form-select-solid {
    background-color: #f5f8fa !important;
    border-color: #e4e6ea !important;
}

/* Additional fixes for Metronic theme */
.select2-container--bootstrap5 .select2-selection--single.form-select {
    height: auto !important;
    min-height: 44px !important;
}

/* Focus state for Bootstrap 5 theme */
.select2-container--bootstrap5.select2-container--focus .select2-selection {
    border-color: #009ef7 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15) !important;
}

/* Additional styling for better clear button visibility */
.select2-container--bootstrap5 .select2-selection--single .select2-selection__clear::before {
    content: "×" !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

.select2-organization-option {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid #f0f0f0;
            transition: background-color 0.2s ease;
        }
        
        .select2-organization-option:hover {
            background-color: #f8f9fa;
        }
        
        .org-logo-container {
            flex-shrink: 0;
            margin-right: 12px;
        }
        
        .org-logo {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            object-fit: cover;
            border: 2px solid #e9ecef;
            background-color: #fff;

        }
        
        .org-logo-placeholder {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-size: 18px;
        }
        
        .org-details {
            flex: 1;
            min-width: 0;
        }
        
        .org-name {
            font-weight: 600;
            color: #212529;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .org-location {
            font-size: 12px;
            color: #6c757d;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .org-location i {
            font-size: 10px;
            color: #28a745;
        }
        
        .select2-option-all {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            font-weight: 600;
            color: #495057;
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
        }
        
        .select2-results__option--highlighted .select2-organization-option {
            background-color: #007bff;
            color: white;
        }
        
        .select2-results__option--highlighted .org-name {
            color: white;
        }
        
        .select2-results__option--highlighted .org-location {
            color: rgba(255, 255, 255, 0.8);
        }
        
        .select2-results__option--highlighted .org-location i {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .select2-results__option--highlighted .select2-option-all {
            background-color: #007bff;
            color: white;
        }
        
        /* Adjust dropdown width for better content display */
        .select2-dropdown {
            min-width: 300px;
        }
        
        .select2-results__option {
            padding: 0;
        }
        
        .select2-results__option[aria-selected="true"] {
            background-color: #e3f2fd;
        }




/* preloader to caleder task open  */

/* Task Preloader Overlay Styles */
/* Start of Selection */
.task-preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.task-preloader-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    min-width: 200px;
}

.task-preloader-content .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #fd7e14 !important;
}

/* Modal Preloader Styles */
.modal-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Animation for smooth loading */
.task-preloader-overlay {
    animation: fadeIn 0.3s ease-in-out;
}

.modal-preloader {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Spinner customization for better visibility */
.task-preloader-content .spinner-border {
    border-width: 3px;
    color: #fd7e14 !important;
}

/* Alternative loading spinner styles */
.task-preloader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #fd7e14;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Pulse animation for loading text */
.task-preloader-content div:last-child {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Dark mode spinner alternative */
[data-bs-theme="dark"] .task-preloader-spinner,
[data-theme="dark"] .task-preloader-spinner,
.dark .task-preloader-spinner,
body.dark .task-preloader-spinner {
    border-color: #333;
    border-top-color: #fd7e14;
}

/* Dark Mode Styles */
[data-bs-theme="dark"] .task-preloader-overlay,
[data-theme="dark"] .task-preloader-overlay,
.dark .task-preloader-overlay,
body.dark .task-preloader-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

[data-bs-theme="dark"] .task-preloader-content,
[data-theme="dark"] .task-preloader-content,
.dark .task-preloader-content,
body.dark .task-preloader-content {
    background: #1e1e2e;
    color: #ffffff;
    border: 1px solid #333;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .task-preloader-content .spinner-border,
[data-theme="dark"] .task-preloader-content .spinner-border,
.dark .task-preloader-content .spinner-border,
body.dark .task-preloader-content .spinner-border {
    border-color: #fd7e14;
    border-right-color: transparent;
}

[data-bs-theme="dark"] .modal-preloader,
[data-theme="dark"] .modal-preloader,
.dark .modal-preloader,
body.dark .modal-preloader {
    background-color: rgba(30, 30, 46, 0.95);
    color: #ffffff;
}
/* End of Selection */
/* end of calender task preloader */

.kanban-board .kanban-drag {
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.kanban-container .kanban-board{
    width: 310 !important;
}



#kt_kanban_board {
    padding: 1rem; /* Optional for spacing */
    gap: 1rem;     /* Optional for column spacing */
    scroll-behavior: smooth; /* Optional for nice scroll */
}

.kanban-container {
    width: 100% !important;
    display: flex;
    flex-wrap: nowrap;        /* Keep columns side-by-side */
    overflow-y: hidden;       /* Prevent vertical scroll */
    white-space: nowrap;      /* Prevent line breaks */
    padding-bottom: 1rem;     /* Optional for spacing */
    gap: 1rem;                /* Optional for column spacing */
    scroll-behavior: smooth;  /* Smooth scroll effect */
}


/* section part of form */
.sections-container {
    margin: 20px 0;
}

.sections-header {
    margin-bottom: 15px;
}

.sections-header h4 {
    margin-bottom: 5px;
    color: #333;
}

.sections-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Negative margin to compensate for column padding */
    margin-bottom: 2rem;
    gap: 1rem; /* Gap between items */
}

.section-item {
    position: unset;
}

.section-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: .5rem .5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: unset;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    min-width: 168px;
    z-index: 0;
}

.section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: all 0.3s ease;
}

.section-card:hover {
    border-color: #ff8c00;
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.15);
    transform: translateY(-4px);
    z-index: 99999;
}

.section-card:hover::before {
    background: linear-gradient(90deg, #ff8c00, #ffa500);
}

.section-card.selected {
    border: 2px solid #ff8c00;
    background: linear-gradient(135deg, #fff5e6 0%, #ffe0b3 100%);
    box-shadow: 0 12px 35px rgba(255, 140, 0, 0.25);
    transform: translateY(-2px);
    animation: gentlePulse 2s ease-in-out infinite;
}

.section-card.selected::before {
    background: linear-gradient(90deg, #ff8c00, #ffa500);
}

.section-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    position: absolute;
    left: 5px;
    top: 5px;
}

.section-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: transparent;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    transition: all 0.3s ease;
}

.section-icon img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    transition: all 0.3s ease;
}

.section-card:hover .section-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, #fff5e6 0%, #ffe0b3 100%);
}

.section-card.selected .section-icon {
    background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
    box-shadow: 0 8px 20px rgba(255, 140, 0, 0.3);
    transform: scale(1.05);
}

.section-card.selected .section-icon::after {
    background: linear-gradient(135deg, #ff8c00, #ffa500);
}

.section-card.selected .section-icon img {
    filter: brightness(0) invert(1);
    transform: scale(1.1);
}

.section-info {
    text-align: center;
    margin-top: 55px;;
}

.section-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2d3748;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.section-card.selected .section-title {
    color: #ff8c00;
}

.section-name {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.section-card.selected .section-name {
    color: #8b5a00;
}

.section-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4);
    animation: bounceIn 0.3s ease;
}

.section-card.selected .section-checkbox {
    display: flex;
}

.section-card.selected .section-checkbox input[type="checkbox"] {
    opacity: 0;
    position: unset;
}

.section-card.selected .section-checkbox::after {
    content: '✓';
    color: white;
    font-size: small;
}

.sections-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.add-section-form {
    margin-top: 20px;
    border-top: 1px solid #dee2e6;
    padding-top: 20px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 15px;
}


.section-card .section-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    float: right;
    font-size: 11px;
    padding: 5px 9px !important;
    text-align: center;

    cursor: pointer;
}
.no-sections-message {
    padding: 40px 20px;
    text-align: center;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gentlePulse {
    0%, 100% {
        box-shadow: 0 12px 35px rgba(255, 140, 0, 0.25);
    }
    50% {
        box-shadow: 0 12px 35px rgba(255, 140, 0, 0.35);
    }
}

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


/* // Optional: Add this to your CSS for visual feedback */
.section-modified {
    border-left: 3px solid #ff8c00 !important;
}

.section-title-input, .section-order-input {
    text-align: center;
    padding: 0.25rem;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.3s ease;
}

.section-title-input:hover, .section-order-input:hover {
    border-color: #e2e8f0;
    background: rgba(255,255,255,0.8);
}

.section-title-input:focus, .section-order-input:focus {
    border-color: #ff8c00;
    background: white;
    box-shadow: 0 0 0 0.2rem rgba(255, 140, 0, 0.25);
}

.section-info .form-group {
    margin-bottom: 0.5rem;
}

.section-name {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}


.estimated-time-group {
    display: flex;
    align-items: center;
}

.estimated-time-input {
    width: 60px;
    text-align: center;
    margin: 0 5px;
}

.estimated-time-label {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0 5px;
}

.section-card  .input-group { 
    position: unset;
}



.input-group-sm > .form-control {
    padding: 0.25rem 0.5rem;
    height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .input-group-append > .input-group-text {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .input-group-text {
    border-radius: 0;
}

.input-group-sm > .form-control:first-child {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}

.input-group-sm > .input-group-append:last-child > .input-group-text {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}


.section-dropdown .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.section-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.section-dropdown .dropdown-item img {
    margin-right: 10px;
    object-fit: contain;
}






/* Section User Avatar Styles */
.section-user-avatar {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.user-avatar-container {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e1e5e9;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.user-avatar-container:hover {
    border-color: #3b82f6;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.user-avatar-container:hover .avatar-overlay {
    opacity: 1;
}

/* User Selection Dropdown Styles */
.user-selection-dropdown {
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 9999;
    min-width: 280px;
    max-height: 300px;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: fadeInUp 0.2s ease-out;
}

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

.dropdown-header {
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e5e9;
}

.dropdown-header h6 {
    color: #495057;
    font-weight: 600;
    margin: 0;
}

.dropdown-body {
    max-height: 250px;
    overflow-y: auto;
}

/* Custom scrollbar for dropdown */
.dropdown-body::-webkit-scrollbar {
    width: 6px;
}

.dropdown-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dropdown-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.dropdown-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* User Option Styles */
.user-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid #f1f3f4;
}

.user-option:last-child {
    border-bottom: none;
}

.user-option:hover {
    background: #f8f9fa;
    transform: translateX(2px);
}

.user-option.selected {
    background: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.user-option-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 2px solid #e1e5e9;
    flex-shrink: 0;
}

.user-option-name {
    flex: 1;
    font-weight: 500;
    color: #495057;
    font-size: 14px;
}

.user-selected-check {
    color: #28a745;
    font-size: 14px;
    margin-left: 8px;
}

/* Special styling for "No User" option */
.user-option:first-child {
    border-bottom: 2px solid #e1e5e9;
    background: #f9f9f9;
}

.user-option:first-child .user-option-avatar {
    opacity: 0.7;
    border: 2px dashed #adb5bd;
}

.user-option:first-child .user-option-name {
    color: #6c757d;
    font-style: italic;
}

/* Section Card Enhancements */
.section-card {
    position: relative;
    padding: 15px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.3s ease;
    overflow: visible;

}

.section-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-selection-dropdown {
        min-width: 250px;
        left: -50px;
    }
    
    .user-option {
        padding: 10px 12px;
    }
    
    .user-option-avatar {
        width: 28px;
        height: 28px;
        margin-right: 10px;
    }
    
    .user-avatar-container {
        width: 36px;
        height: 36px;
    }
}

/* Loading state */
.user-option .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tooltip enhancements */
.user-avatar-container[data-bs-toggle="tooltip"] {
    position: relative;
}

/* Focus states for accessibility */
.user-avatar-container:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.user-option:focus {
    background: #e3f2fd;
    outline: none;
}

/* Animation for avatar change */
.selected-user-avatar {
    transition: all 0.3s ease;
}

.selected-user-avatar.updating {
    transform: scale(0.8);
    opacity: 0.5;
}
/* end of section part of form */



/* Improve muted text clarity */
.select2-results__option .text-muted {
    color: #6c757d !important; /* Darker than default Bootstrap muted */
}

/* Ensure good contrast on hover */
.select2-results__option--highlighted .text-muted {
    color: #ffffff !important;
    opacity: 0.9;
}

/* Improve hover background */
.select2-results__option--highlighted {
    background-color: #3b82f6 !important; /* Tailwind blue-500 or pick your own */
    color: #fff !important;
}
/* Highlight the short code text */
.short-code-highlight {
    color: #0d6efd;          /* Bootstrap blue */
    font-weight: bold;
}

/* On hover (Select2 highlighted option) */
.select2-results__option--highlighted .short-code-highlight {
    color: #fff;             /* Make it white on highlight */
    background-color: rgba(13, 110, 253, 0.2); /* subtle blue background */
    padding: 2px 4px;
    border-radius: 4px;
}



.blur {
    filter: blur(4px);
    transition: filter 0.3s ease;
}

.main-task-container .task-detail-container {
            display: flex;
            height: auto;
            overflow: hidden;
        }

        .main-task-container .workflow-sidebar {
            width: 100px;
            flex-shrink: 0;

            overflow-y: auto;
        }

        .main-task-container .task-content {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        .main-task-container .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .main-task-container .fixed-info-card {
            flex-shrink: 0;

            z-index: 1;
        }

        .main-task-container .scrollable-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .main-task-container .chat-sidebar {
            width: 400px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
        }

        .main-task-container .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .main-task-container .chat-messages {
            flex: 1;
            overflow-y: auto;
        }

        .main-task-container .workflow-step {
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }


        .main-task-container .workflow-step.active .symbol-label {
            background-color: #009ef7 !important;
            color: white !important;
        }

        .main-task-container .workflow-step.completed .symbol-label {
            background-color: #50cd89 !important;
            color: white !important;
        }

        /* .main-task-container .workflow-step:hover {
            background-color: #f1faff;
        } */

        .main-task-container .separator-dashed {
            border-top: 1px dashed #e4e6ef;
            margin: 10px auto;
            width: 40px;
        }

        .main-task-container div {
            /* overflow: auto; */
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
        }

        .main-task-container div::-webkit-scrollbar {
            display: none;
            /* Chrome, Safari */
        }


        /* user form */

        .user-form-selection-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 10px;
        }

        .user-form-selection-option {
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            position: relative;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .user-form-selection-option:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
            transform: translateY(-2px);
        }

        .user-form-selection-option.active {
            border-color: #3b82f6;
            background: #eff6ff;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
        }

        .user-form-option-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-size: 18px;
            color: white;
        }
        .user-form-option-icon i{
            font-size: 24px;
            color: white;
            transition: transform 0.3s ease; 

        }

        .user-form-selection-option:hover .user-form-option-icon i {
            transform: scale(1.1);
        }

        .user-form-department-option .user-form-option-icon {
            background: var(--dept-color, #6b7280);
        }

        .user-form-role-option .user-form-option-icon {
            background: #8b5cf6;
        }

        .user-form-option-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 4px;
            color: #1f2937;
        }

        .user-form-option-description {
            font-size: 12px;
            color: #6b7280;
            line-height: 1.3;
        }

        .user-form-selected-indicator {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            background: #22c55e;
            border-radius: 50%;
            color: white;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .user-form-selection-option.active .user-form-selected-indicator {
            display: flex;
        }

        .user-form-section-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 15px;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .user-form-section-title i {
            color: #6b7280;
        }

        .user-form-section {
            margin-bottom: 30px;
        }

        .user-form-required-indicator {
            color: #ef4444;
            margin-left: 4px;
        }

        /* Hidden inputs for form submission */
        .user-form-hidden-inputs {
            display: none;
        }

        .user-form-selection-summary {
            margin-top: 15px;
            padding: 12px;
            background: #f8fafc;
            border-radius: 8px;
            font-size: 13px;
            color: #64748b;
        }

        .user-form-summary-item {
            margin-bottom: 4px;
        }

        .user-form-summary-item:last-child {
            margin-bottom: 0;
        }

        .user-form-selection-option {
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid #E4E6EF;
        margin-bottom: 1rem;
    }

    .user-form-selection-option:hover {
        border-color: var(--dept-color, #3699FF);
        box-shadow: 0 0 0 1px var(--dept-color, #3699FF);
    }

    .user-form-selection-option.selected {
        border-color: var(--dept-color, #3699FF);
        background-color: rgba(var(--dept-color-rgb, 54, 153, 255), 0.05);
        box-shadow: 0 0 0 1px var(--dept-color, #3699FF);
    }

    .user-form-option-icon {
        color: var(--dept-color, #3699FF);
        margin-bottom: 1rem;
        font-size: 1.75rem;
    }

    .user-form-option-name {
        font-weight: 600;
        margin-bottom: 0.25rem;
        font-size: 1.1rem;
    }

    .user-form-option-description {
        color: #B5B5C3;
        font-size: 0.9rem;
    }

    .user-form-selected-indicator {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: var(--dept-color, #3699FF);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        opacity: 0;
        transform: scale(0);
        transition: all 0.2s ease;
    }

    .user-form-selection-option.selected .user-form-selected-indicator {
        opacity: 1;
        transform: scale(1);
    }

    .user-form-summary-item {
        margin-bottom: 0.25rem;
    }

    #notification-badge {
        font-size: 0.6rem;
        padding: 0.25em 0.4em;
        min-width: 1.25em;
        display: none; /* Hidden by default */
        z-index: 1;
        transform: translate(30%, -30%);
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { transform: translate(30%, -30%) scale(1); }
        50% { transform: translate(30%, -30%) scale(1.1); }
        100% { transform: translate(30%, -30%) scale(1); }
    }

    @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6);
                /* Bootstrap danger/red */
            }

            70% {
                box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
            }
        }

        .animate-badge-alert {
            animation: badgePopIn 0.3s ease-in-out, pulse 2s infinite;
        }

        /* Calendar event status colors */
.fc-event-scheduled {
    background-color: #3E97FF;
    border-color: #3E97FF;
}

.fc-event-ongoing {
    background-color: #50CD89;
    border-color: #50CD89;
}

.fc-event-completed {
    background-color: #7239EA;
    border-color: #7239EA;
}

.fc-event-cancelled {
    background-color: #F1416C;
    border-color: #F1416C;
}

/* Calendar loading indicator */
.fc .fc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Modal adjustments */
.modal-body.scroll-y {
    max-height: 70vh;
    overflow-y: auto;
}

/* Time inputs */
input[type="datetime-local"] {
    padding: 0.65rem 1rem;
}

/* Style for email suggestions dropdown */
#emailSuggestions {
    position: absolute;
    z-index: 1060; /* Higher than modal z-index (1050) */
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    margin-top: 0.25rem;
    display: none;
}

#emailSuggestions .dropdown-item {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#emailSuggestions .dropdown-item:hover {
    background-color: #f8f9fa;
}



#selectedAttendees .badge {
    padding: 0.5rem;
}

/* Custom styles for calendar event avatars */
.custom-calendar-event {
    overflow: visible !important;
}

.custom-calendar-event .fc-event-main {
    padding: 4px 6px !important;
    min-height: auto;
}

/* FullCalendar specific daygrid event styles */
.fc-direction-ltr .fc-daygrid-event.fc-event-end, 
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
    margin-right: 2px !important;
    display: flex !important;
    flex-direction: column !important;
}

.fc-direction-rtl .fc-daygrid-event.fc-event-end, 
.fc-direction-ltr .fc-daygrid-event.fc-event-start {
    margin-left: 2px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* All daygrid events should use column layout for attendees */
.fc-daygrid-event.custom-calendar-event {
    display: flex !important;
    flex-direction: column !important;
    min-height: 45px !important;
}

.fc-daygrid-event.custom-calendar-event .fc-event-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 3px 4px !important;
}

.fc-daygrid-event.custom-calendar-event .fc-event-title {
    flex-shrink: 0 !important;
    margin-bottom: 2px !important;
}

.event-content-wrapper {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.attendees-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.attendees-row .symbol {
    flex-shrink: 0 !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.attendees-row .symbol img {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.attendees-row .symbol-label {
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Event title styling */
.fc-event-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Responsive adjustments for different calendar views */
.fc-dayGridMonth-view .custom-calendar-event {
    min-height: 45px !important;
}

.fc-dayGridMonth-view .custom-calendar-event .fc-event-main {
    padding: 3px 4px !important;
}

.fc-dayGridMonth-view .fc-event-title {
    font-size: 10px !important;
    line-height: 1.2 !important;
}

.fc-dayGridMonth-view .attendees-row .symbol {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
}

.fc-dayGridMonth-view .attendees-row .symbol-label {
    font-size: 7px !important;
}

/* Week and Day views */
.fc-timeGridWeek-view .custom-calendar-event,
.fc-timeGridDay-view .custom-calendar-event {
    min-height: 55px !important;
}

.fc-timeGridWeek-view .custom-calendar-event .fc-event-main,
.fc-timeGridDay-view .custom-calendar-event .fc-event-main {
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
}

.fc-timeGridWeek-view .attendees-row .symbol,
.fc-timeGridDay-view .attendees-row .symbol {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

.fc-timeGridWeek-view .attendees-row .symbol-label,
.fc-timeGridDay-view .attendees-row .symbol-label {
    font-size: 8px !important;
}

/* Timegrid events also need column layout */
.fc-timegrid-event.custom-calendar-event .fc-event-main {
    display: flex !important;
    flex-direction: column !important;
}

/* List view - hide avatars if needed */
.fc-listMonth-view .attendees-row {
    display: none !important;
}

/* Past event styling adjustments */
.fc-event-past {
    opacity: 0.75 !important;
}

.fc-event-past .attendees-row {
    opacity: 0.85 !important;
}

/* Status-based event styling improvements */
.fc-event-scheduled {
    border-left: 3px solid var(--bs-success) !important;
}

.fc-event-completed {
    border-left: 3px solid var(--bs-primary) !important;
}

.fc-event-cancelled {
    border-left: 3px solid var(--bs-danger) !important;
    opacity: 0.6 !important;
}

/* Ensure proper event structure for all event types */
.fc-event.custom-calendar-event {
    overflow: visible !important;
}

.fc-event.custom-calendar-event .fc-event-main-frame {
    display: flex !important;
    flex-direction: column !important;
}

/* Override FullCalendar's default event display */
.fc-daygrid-event .fc-event-main {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.fc-daygrid-event.fc-event-mirror {
    display: flex !important;
    flex-direction: column !important;
}

/* Tooltip styling for better readability */
.tooltip {
    z-index: 9999 !important;
    font-size: 11px !important;
}

.tooltip-inner {
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

/* Hover effects */
.custom-calendar-event:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.custom-calendar-event:hover .attendees-row .symbol {
    transform: scale(1.05) !important;
    transition: transform 0.15s ease !important;
}

/* Ensure proper layering and spacing */
.fc-event {
    margin-bottom: 2px !important;
}

.fc-daygrid-event {
    margin-bottom: 1px !important;
}

/* Force column layout for all calendar events */
.fc-event-main {
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure attendees don't interfere with event text */
.fc-event-title-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .fc-dayGridMonth-view .attendees-row .symbol {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
    }
    
    .fc-dayGridMonth-view .attendees-row .symbol-label {
        font-size: 6px !important;
    }
    
    .fc-event-title {
        font-size: 9px !important;
    }
    
    .fc-daygrid-event.custom-calendar-event {
        min-height: 40px !important;
    }
}

/* Custom styles for the approval dropdown */
.select2-container--bootstrap-5 .select2-selection--single {
    height: 45px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    padding-left: 0;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 10px 12px;
    border-bottom: 1px solid #f8f9fa;
}

.select2-container--bootstrap-5 .select2-results__option:last-child {
    border-bottom: none;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #0d6efd;
    color: white;
}

/* Avatar and icon styles in dropdown */
.select2-results__option img {
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.select2-results__option i {
    width: 24px;
    text-align: center;
}






/* WEB PROJECT  */

#kt_modal_add_project_form .padding-14 {

    padding: 14px 16px;
    text-align: center;
}