<?php
/**
 * @var string $locale
 * @var Johncms\System\Legacy\Tools $tools
 * @var Johncms\System\Users\User $user
 * @var Johncms\Ads $ads
 */

/** @var \Johncms\Counters $counters */
$counters = $container->get('counters');
$forum_counters = $counters->forumCounters();
$guestbook_counters = $counters->guestbookCounters();
$downloads_counters = $counters->downloadsCounters();
$library_counters = $counters->libraryCounters();
$users_counters = $counters->usersCounters();
$album_counters = $counters->albumCounters();
$news_counters = $counters->news();
$ads = di(Johncms\Ads::class);
$ads_array = $ads->getAds();

?>
<!-- Main Menu -->
<div class="sidebar__wrapper">
    <!-- Ads Before Menu -->
    <?php if (! empty($ads_array['before_menu'])): ?>
        <div class="sidebar__ads sidebar__ads--before">
            <?php foreach ($ads_array['before_menu'] as $item): ?>
                <div class="sidebar__ad-item">
                    <?= $item ?>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Navigation Menu -->
    <nav class="sidebar__nav">
        <!-- News -->
        <a href="/news/" class="sidebar__menu-item sidebar__menu-item--news">
            <div class="sidebar__menu-icon">
                <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v12m0-12a2 2 0 012-2h2a2 2 0 012 2M9 6a2 2 0 012-2h2a2 2 0 012 2m-3 9l3-3m0 0l3 3m-3-3v6"></path>
                </svg>
            </div>
            <span class="sidebar__menu-text"><?= d__('system', 'News archive') ?></span>
            <?php if ($news_counters['new'] > 0): ?>
                <span class="sidebar__badge sidebar__badge--new">
                    + <?= $tools->formatNumber($news_counters['new']) ?>
                </span>
            <?php endif ?>
        </a>

        <!-- Forum -->
        <?php if ($config['mod_forum'] || $user->rights >= 7): ?>
            <a href="/forum/" class="sidebar__menu-item sidebar__menu-item--forum">
                <div class="sidebar__menu-icon">
                    <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                    </svg>
                </div>
                <span class="sidebar__menu-text"><?= d__('system', 'Forum') ?></span>
                <?php if ($forum_counters['new_messages'] > 0): ?>
                    <span class="sidebar__badge sidebar__badge--new">
                        + <?= $tools->formatNumber($forum_counters['new_messages']) ?>
                    </span>
                <?php endif; ?>
            </a>
        <?php endif ?>

        <!-- Guestbook -->
        <?php if ($config['mod_guest'] || $user->rights >= 7): ?>
            <a href="/guestbook/ga" class="sidebar__menu-item sidebar__menu-item--guestbook">
                <div class="sidebar__menu-icon">
                    <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                    </svg>
                </div>
                <span class="sidebar__menu-text"><?= d__('system', 'Guestbook') ?></span>
                <?php if ($guestbook_counters['guestbook'] > 0): ?>
                    <span class="sidebar__badge sidebar__badge--new">
                        + <?= $tools->formatNumber($guestbook_counters['guestbook']) ?>
                    </span>
                <?php endif ?>
            </a>
        <?php endif ?>

        <!-- Downloads -->
        <?php if ($config['mod_down'] || $user->rights >= 7): ?>
            <a href="/downloads/" class="sidebar__menu-item sidebar__menu-item--downloads">
                <div class="sidebar__menu-icon">
                    <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                    </svg>
                </div>
                <span class="sidebar__menu-text"><?= d__('system', 'Downloads') ?></span>
                <?php if ($downloads_counters['new'] > 0): ?>
                    <span class="sidebar__badge sidebar__badge--new"><?= $tools->formatNumber($downloads_counters['new']) ?></span>
                <?php endif ?>
            </a>
        <?php endif ?>

        <!-- Library -->
        <?php if ($config['mod_lib'] || $user->rights >= 7): ?>
            <a href="/library/" class="sidebar__menu-item sidebar__menu-item--library">
                <div class="sidebar__menu-icon">
                    <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
                <span class="sidebar__menu-text"><?= d__('system', 'Library') ?></span>
                <?php if ($library_counters['new'] > 0): ?>
                    <span class="sidebar__badge sidebar__badge--new">
                        + <?= $tools->formatNumber($library_counters['new']) ?>
                    </span>
                <?php endif ?>
            </a>
        <?php endif ?>

        <!-- Users -->
        <a href="/community/" class="sidebar__menu-item sidebar__menu-item--users">
            <div class="sidebar__menu-icon">
                <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                </svg>
            </div>
            <span class="sidebar__menu-text"><?= d__('system', 'Users') ?></span>
            <?php if ($users_counters['new'] > 0): ?>
                <span class="sidebar__badge sidebar__badge--new">
                    + <?= $tools->formatNumber($users_counters['new']) ?>
                </span>
            <?php endif ?>
        </a>

        <!-- Photo Albums -->
        <a href="/album/" class="sidebar__menu-item sidebar__menu-item--albums">
            <div class="sidebar__menu-icon">
                <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
            <span class="sidebar__menu-text"><?= d__('system', 'Photo Albums') ?></span>
            <?php if ($album_counters['new'] > 0): ?>
                <span class="sidebar__badge sidebar__badge--new">
                    + <?= $tools->formatNumber($album_counters['new']) ?>
                </span>
            <?php endif ?>
        </a>

        <!-- Information, FAQ -->
        <a href="/help/" class="sidebar__menu-item sidebar__menu-item--help">
            <div class="sidebar__menu-icon">
                <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <span class="sidebar__menu-text"><?= d__('system', 'Information, FAQ') ?></span>
        </a>

        <!-- Admin Section -->
        <?php if ($user->rights >= 1): ?>
            <!-- Separator -->
            <div class="sidebar__separator">
                <span class="sidebar__separator-text">
                    <i class="fas fa-shield-alt sidebar__separator-icon"></i>
                    <?= d__('system', 'Administration') ?>
                </span>
            </div>

            <!-- Admin Panel -->
            <?php if ($user->rights >= 7): ?>
                <a href="/admin/" class="sidebar__menu-item sidebar__menu-item--admin">
                    <div class="sidebar__menu-icon">
                        <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </div>
                    <span class="sidebar__menu-text"><?= d__('system', 'Admin Panel') ?></span>
                    <div class="sidebar__arrow">
                        <svg class="sidebar__arrow-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </div>
                </a>
            <?php endif ?>

            <!-- Admin Chat -->
            <a href="/guestbook/ga?do=set" class="sidebar__menu-item sidebar__menu-item--admin-chat">
                <div class="sidebar__menu-icon">
                    <svg class="sidebar__menu-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                    </svg>
                </div>
                <span class="sidebar__menu-text"><?= d__('system', 'Admin Chat') ?></span>
                <?php if ($guestbook_counters['admin_club'] > 0): ?>
                    <span class="sidebar__badge sidebar__badge--admin">
                        <?= $tools->formatNumber($guestbook_counters['admin_club']) ?>
                    </span>
                <?php endif ?>
            </a>
        <?php endif ?>
    </nav>
</div>

<!-- Footer Section -->
<div class="sidebar__footer">
    <!-- Ads After Menu -->
    <?php if (! empty($ads_array['after_menu'])): ?>
        <div class="sidebar__ads sidebar__ads--after">
            <?php foreach ($ads_array['after_menu'] as $item): ?>
                <div class="sidebar__ad-item sidebar__ad-item--footer">
                    <?= $item ?>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Online Counter -->
    <div class="sidebar__online">
        <a href="/online/" class="sidebar__online-link">
            <div class="sidebar__online-indicator">
                <div class="sidebar__online-ping"></div>
                <div class="sidebar__online-dot"></div>
            </div>
            <span class="sidebar__online-text">
                <?= $container->get('counters')->online() ?> <?= d__('system', 'online') ?>
            </span>
            <svg class="sidebar__online-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </a>
    </div>

    <!-- Language Selector -->
    <?php if (count($config['lng_list']) > 1): ?>
        <div class="sidebar__language">
            <button class="sidebar__language-btn" data-url="/language/" data-toggle="modal" data-target=".ajax_modal">
                <div class="sidebar__language-flag">
                    <img class="sidebar__language-flag-img" src="<?= $this->asset('images/flags/' . strtolower($locale) . '.svg') ?>" alt="<?= $locale ?>">
                </div>
                <span class="sidebar__language-text">
                    <?= $config['lng_list'][$locale]['name'] ?>
                </span>
                <svg class="sidebar__language-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </button>
        </div>
    <?php endif ?>
</div>

<style>
/* Sidebar Base Styles */
.sidebar__wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 12px;
}

/* Menu Items */
.sidebar__menu-item {
    display: flex;
    align-items: center;
    padding: 16px;
    text-decoration: none;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.7);
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sidebar__menu-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    color: white;
    border-color: transparent;
}

.sidebar__menu-item--news:hover { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.sidebar__menu-item--forum:hover { background: linear-gradient(135deg, #10b981, #059669); }
.sidebar__menu-item--guestbook:hover { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sidebar__menu-item--downloads:hover { background: linear-gradient(135deg, #8b5cf6, #4f46e5); }
.sidebar__menu-item--library:hover { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.sidebar__menu-item--users:hover { background: linear-gradient(135deg, #ec4899, #db2777); }
.sidebar__menu-item--albums:hover { background: linear-gradient(135deg, #14b8a6, #059669); }
.sidebar__menu-item--help:hover { background: linear-gradient(135deg, #6b7280, #374151); }
.sidebar__menu-item--admin:hover { background: linear-gradient(135deg, #ef4444, #ea580c); }
.sidebar__menu-item--admin-chat:hover { background: linear-gradient(135deg, #f59e0b, #eab308); }

/* Menu Icons */
.sidebar__menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar__menu-item:hover .sidebar__menu-icon {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2) !important;
}

.sidebar__menu-svg {
    width: 20px;
    height: 20px;
    transition: color 0.3s ease;
}

.sidebar__menu-item:hover .sidebar__menu-svg {
    color: white;
}

/* Icon Colors */
.sidebar__menu-item--news .sidebar__menu-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.sidebar__menu-item--forum .sidebar__menu-icon { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.sidebar__menu-item--guestbook .sidebar__menu-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.sidebar__menu-item--downloads .sidebar__menu-icon { background: linear-gradient(135deg, #e9d5ff, #d8b4fe); }
.sidebar__menu-item--library .sidebar__menu-icon { background: linear-gradient(135deg, #cffafe, #a5f3fc); }
.sidebar__menu-item--users .sidebar__menu-icon { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.sidebar__menu-item--albums .sidebar__menu-icon { background: linear-gradient(135deg, #ccfbf1, #99f6e4); }
.sidebar__menu-item--help .sidebar__menu-icon { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); }
.sidebar__menu-item--admin .sidebar__menu-icon,
.sidebar__menu-item--admin-chat .sidebar__menu-icon { background: rgba(255, 255, 255, 0.2); }

.sidebar__menu-item--news .sidebar__menu-svg { color: #3b82f6; }
.sidebar__menu-item--forum .sidebar__menu-svg { color: #10b981; }
.sidebar__menu-item--guestbook .sidebar__menu-svg { color: #f59e0b; }
.sidebar__menu-item--downloads .sidebar__menu-svg { color: #8b5cf6; }
.sidebar__menu-item--library .sidebar__menu-svg { color: #06b6d4; }
.sidebar__menu-item--users .sidebar__menu-svg { color: #ec4899; }
.sidebar__menu-item--albums .sidebar__menu-svg { color: #14b8a6; }
.sidebar__menu-item--help .sidebar__menu-svg { color: #6b7280; }
.sidebar__menu-item--admin .sidebar__menu-svg,
.sidebar__menu-item--admin-chat .sidebar__menu-svg { color: white; }

/* Menu Text */
.sidebar__menu-text {
    flex: 1;
    transition: color 0.3s ease;
}

/* Badges */
.sidebar__badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: pulse-slow 2s ease-in-out infinite;
}

.sidebar__badge--new {
    background: linear-gradient(135deg, #ef4444, #ec4899);
}

.sidebar__badge--admin {
    background: rgba(255, 255, 255, 0.3);
    color: #92400e;
}

/* Separator */
.sidebar__separator {
    position: relative;
    margin: 32px 0;
    text-align: center;
}

.sidebar__separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), transparent);
}

.sidebar__separator-text {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1));
    backdrop-filter: blur(16px);
    font-size: 14px;
    font-weight: bold;
    color: #7c3aed;
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
}

.sidebar__separator-icon {
    margin-right: 8px;
}

/* Arrow */
.sidebar__arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.sidebar__menu-item:hover .sidebar__arrow {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
}

.sidebar__arrow-svg {
    width: 16px;
    height: 16px;
    color: white;
    transition: transform 0.3s ease;
}

.sidebar__menu-item:hover .sidebar__arrow-svg {
    transform: translateX(2px);
}

/* Ads */
.sidebar__ads {
    padding: 12px 16px;
}

.sidebar__ads--before {
    padding-top: 0;
}

.sidebar__ad-item {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    backdrop-filter: blur(16px);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.07);
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.sidebar__ad-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.sidebar__ad-item--footer {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 179, 8, 0.1));
    border-color: rgba(245, 158, 11, 0.2);
}

/* Footer */
.sidebar__footer {
    border-top: 1px solid rgba(168, 85, 247, 0.3);
    padding-top: 24px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Online Counter */
.sidebar__online-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.5s ease;
}

.sidebar__online-link:hover {
    transform: scale(1.05);
    color: #3b82f6;
}

.sidebar__online-indicator {
    position: relative;
    margin-right: 12px;
}

.sidebar__online-ping {
    width: 16px;
    height: 16px;
    background: #10b981;
    border-radius: 50%;
    animation: ping 2s ease-in-out infinite;
    position: absolute;
    top: -1px;
    right: -1px;
}

.sidebar__online-dot {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sidebar__online-text {
    font-weight: bold;
    background: linear-gradient(135deg, #374151, #111827);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.5s ease;
}

.sidebar__online-link:hover .sidebar__online-text {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar__online-arrow {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    color: #9ca3af;
    transition: all 0.3s ease;
}

.sidebar__online-link:hover .sidebar__online-arrow {
    color: #3b82f6;
    transform: translateX(2px);
}

/* Language Selector */
.sidebar__language-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #374151;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.5s ease;
}

.sidebar__language-btn:hover {
    transform: scale(1.05);
    color: #8b5cf6;
}

.sidebar__language-flag {
    width: 32px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid #d1d5db;
    overflow: hidden;
    margin-right: 12px;
    transition: all 0.5s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar__language-btn:hover .sidebar__language-flag {
    border-color: #8b5cf6;
    transform: scale(1.1);
}

.sidebar__language-flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar__language-text {
    flex: 1;
    font-weight: bold;
    background: linear-gradient(135deg, #374151, #111827);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.5s ease;
}

.sidebar__language-btn:hover .sidebar__language-text {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar__language-arrow {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    color: #9ca3af;
    transition: all 0.3s ease;
}

.sidebar__language-btn:hover .sidebar__language-arrow {
    color: #8b5cf6;
    transform: rotate(180deg);
}

/* Animations */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    .sidebar__nav {
        padding: 16px 8px;
        gap: 6px;
    }
    
    .sidebar__menu-item {
        padding: 12px;
        font-size: 13px;
    }
    
    .sidebar__menu-icon {
        width: 32px;
        height: 32px;
        margin-right: 12px;
    }
    
    .sidebar__menu-svg {
        width: 16px;
        height: 16px;
    }
    
    .sidebar__badge {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .sidebar__footer {
        padding: 16px 12px;
        gap: 16px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .sidebar__menu-item {
        background: rgba(55, 65, 81, 0.7);
        color: #e5e7eb;
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .sidebar__online-link,
    .sidebar__language-btn {
        color: #e5e7eb;
    }
    
    .sidebar__online-text,
    .sidebar__language-text {
        background: linear-gradient(135deg, #e5e7eb, #d1d5db);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .sidebar__online-link:hover .sidebar__online-text,
    .sidebar__language-btn:hover .sidebar__language-text {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .sidebar__language-flag {
        border-color: #4b5563;
    }
}
</style>