/**
 * Agent & Voucher Online Menu Enhanced Theme
 * Premium gradient colors, responsive, dark mode compatible
 */

/* ============================================
   AGENT SYSTEM MENU - Gradient Style
   ============================================ */

/* Agent System Dropdown Button */
.dropdown-btn[class*="sagent"],
.dropdown-btn:has(+ .dropdown-container a[href*="agent="]) {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%) !important;
    color: white !important;
    border-left: 4px solid #574b90 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dropdown-btn[class*="sagent"]:hover,
.dropdown-btn:has(+ .dropdown-container a[href*="agent="]):hover {
    background: linear-gradient(135deg, #574b90 0%, #6c5ce7 100%) !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.5) !important;
}

/* Agent Sub-menu Items */
.dropdown-container a[href*="agent=list"],
.dropdown-container a[href*="agent=global_prices"],
.dropdown-container a[href*="agent=custom_prices"],
.dropdown-container a[href*="agent=topup"],
.dropdown-container a[href*="agent=public_transactions"],
.dropdown-container a[href*="agent=transactions"],
.dropdown-container a[href*="agent=settings"],
.dropdown-container a[href*="agent=add"],
.dropdown-container a[href*="agent=bot_settings"] {
    color: #ddd !important;
    padding: 10px 15px 10px 30px !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
    background: rgba(108, 92, 231, 0.05) !important;
}

.dropdown-container a[href*="agent="]:hover {
    background: linear-gradient(90deg, rgba(108, 92, 231, 0.2) 0%, rgba(162, 155, 254, 0.1) 100%) !important;
    border-left-color: #a29bfe !important;
    color: #fff !important;
    padding-left: 35px !important;
}

.dropdown-container a[href*="agent="].active,
.dropdown-container a[href*="agent="][class*="active"] {
    background: linear-gradient(90deg, rgba(108, 92, 231, 0.3) 0%, rgba(162, 155, 254, 0.2) 100%) !important;
    border-left-color: #00E8A8 !important;
    color: #00E8A8 !important;
    font-weight: 600 !important;
    padding-left: 35px !important;
}

/* ============================================
   VOUCHER ONLINE MENU - Gradient Style
   ============================================ */

/* Voucher Online Dropdown Button */
.dropdown-btn[class*="svoucheronline"],
.dropdown-btn:has(+ .dropdown-container a[href*="vo="]) {
    background: linear-gradient(135deg, #00A8E8 0%, #00D4FF 100%) !important;
    color: white !important;
    border-left: 4px solid #0088BA !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 168, 232, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dropdown-btn[class*="svoucheronline"]:hover,
.dropdown-btn:has(+ .dropdown-container a[href*="vo="]):hover {
    background: linear-gradient(135deg, #0088BA 0%, #00A8E8 100%) !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 12px rgba(0, 168, 232, 0.5) !important;
}

/* Voucher Online Sub-menu Items */
.dropdown-container a[href*="vo=index"],
.dropdown-container a[href*="vo=transactions"],
.dropdown-container a[href*="vo=gateways"],
.dropdown-container a[href*="vo=packages"],
.dropdown-container a[href*="vo=payments"],
.dropdown-container a[href*="vo=settings"],
.dropdown-container a[href*="vo=voucher_format"],
.dropdown-container a[href*="vo=whatsapp"] {
    color: #ddd !important;
    padding: 10px 15px 10px 30px !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
    background: rgba(0, 168, 232, 0.05) !important;
}

.dropdown-container a[href*="vo="]:hover {
    background: linear-gradient(90deg, rgba(0, 168, 232, 0.2) 0%, rgba(0, 212, 255, 0.1) 100%) !important;
    border-left-color: #00D4FF !important;
    color: #fff !important;
    padding-left: 35px !important;
}

.dropdown-container a[href*="vo="].active,
.dropdown-container a[href*="vo="][class*="active"] {
    background: linear-gradient(90deg, rgba(0, 168, 232, 0.3) 0%, rgba(0, 212, 255, 0.2) 100%) !important;
    border-left-color: #FFD700 !important;
    color: #FFD700 !important;
    font-weight: 600 !important;
    padding-left: 35px !important;
}

/* ============================================
   ADMIN BOT MENU - Telegram Blue Gradient
   ============================================ */

.dropdown-btn[class*="sbot"],
.dropdown-btn:has(+ .dropdown-container a[href*="bot_settings"]) {
    background: linear-gradient(135deg, #0088cc 0%, #00aced 100%) !important;
    color: white !important;
    border-left: 4px solid #006699 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3) !important;
    transition: all 0.3s ease !important;
}

.dropdown-btn[class*="sbot"]:hover,
.dropdown-btn:has(+ .dropdown-container a[href*="bot_settings"]):hover {
    background: linear-gradient(135deg, #006699 0%, #0088cc 100%) !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.5) !important;
}

/* ============================================
   ICONS - Enhanced with colors
   ============================================ */

/* Agent System Icon */
.dropdown-btn[class*="sagent"] i.fa-users,
.dropdown-btn:has(+ .dropdown-container a[href*="agent="]) i.fa-users {
    color: #FFD700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Voucher Online Icon */
.dropdown-btn[class*="svoucheronline"] i.fa-shopping-cart,
.dropdown-btn:has(+ .dropdown-container a[href*="vo="]) i.fa-shopping-cart {
    color: #FFD700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Bot Icon */
.dropdown-btn[class*="sbot"] i.fa-paper-plane {
    color: #FFD700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Sub-menu Icons Color */
.dropdown-container a[href*="agent="] i,
.dropdown-container a[href*="vo="] i {
    color: #a29bfe !important;
    margin-right: 8px !important;
    transition: all 0.2s ease !important;
}

.dropdown-container a[href*="agent="]:hover i,
.dropdown-container a[href*="vo="]:hover i {
    color: #00E8A8 !important;
    transform: scale(1.1) !important;
}

/* ============================================
   RESPONSIVE - Mobile First
   ============================================ */

@media screen and (max-width: 800px) {

    /* Ensure menus not cut off on mobile */
    .dropdown-container a[href*="agent="],
    .dropdown-container a[href*="vo="] {
        font-size: 13px !important;
        padding: 8px 12px 8px 35px !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    .dropdown-btn[class*="sagent"],
    .dropdown-btn[class*="svoucheronline"],
    .dropdown-btn[class*="sbot"] {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* Icon sizing untuk mobile */
    .dropdown-container a[href*="agent="] i,
    .dropdown-container a[href*="vo="] i {
        font-size: 13px !important;
        margin-right: 6px !important;
    }
}

@media screen and (min-width: 801px) and (max-width: 1200px) {

    /* Tablet adjustments */
    .dropdown-container a[href*="agent="],
    .dropdown-container a[href*="vo="] {
        font-size: 14px !important;
    }
}

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */

/* Ensure text remains readable in dark mode */
body[class*="dark"] .dropdown-btn[class*="sagent"],
body[class*="dark"] .dropdown-btn[class*="svoucheronline"],
body[class*="dark"] .dropdown-btn[class*="sbot"],
.dark-theme .dropdown-btn[class*="sagent"],
.dark-theme .dropdown-btn[class*="svoucheronline"],
.dark-theme .dropdown-btn[class*="sbot"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

body[class*="dark"] .dropdown-container a[href*="agent="],
body[class*="dark"] .dropdown-container a[href*="vo="],
.dark-theme .dropdown-container a[href*="agent="],
.dark-theme .dropdown-container a[href*="vo="] {
    color: #e0e0e0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

body[class*="dark"] .dropdown-container a[href*="agent="]:hover,
body[class*="dark"] .dropdown-container a[href*="vo="]:hover,
.dark-theme .dropdown-container a[href*="agent="]:hover,
.dark-theme .dropdown-container a[href*="vo="]:hover {
    color: #ffffff !important;
    background: rgba(108, 92, 231, 0.3) !important;
}

/* Active state in dark mode */
body[class*="dark"] .dropdown-container a[href*="agent="].active,
body[class*="dark"] .dropdown-container a[href*="vo="].active,
.dark-theme .dropdown-container a[href*="agent="].active,
.dark-theme .dropdown-container a[href*="vo="].active {
    color: #00E8A8 !important;
    font-weight: 700 !important;
}

/* ============================================
   ANIMATION & SMOOTH TRANSITIONS
   ============================================ */

.dropdown-container a[href*="agent="],
.dropdown-container a[href*="vo="] {
    animation: slideInLeft 0.3s ease-out !important;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Caret icon animation */
.dropdown-btn i.fa-caret-down {
    transition: transform 0.3s ease !important;
}

.dropdown-btn.active i.fa-caret-down,
.dropdown-btn[aria-expanded="true"] i.fa-caret-down {
    transform: rotate(180deg) !important;
}

/* ============================================
   BADGE & LABEL STYLING (Optional)
   ============================================ */

/* Add badge for new features */
.dropdown-container a[href*="vo=gateways"]::after,
.dropdown-container a[href*="agent=bot_settings"]::after {
    content: "NEW";
    background: #ff4757;
    color: white;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
}

/* ============================================
   HOVER GLOW EFFECT
   ============================================ */

.dropdown-btn[class*="sagent"]:hover,
.dropdown-btn[class*="svoucheronline"]:hover,
.dropdown-btn[class*="sbot"]:hover {
    box-shadow:
        0 0 20px rgba(108, 92, 231, 0.6),
        0 4px 12px rgba(108, 92, 231, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ============================================
   SCROLLBAR STYLING FOR DROPDOWN
   ============================================ */

.dropdown-container::-webkit-scrollbar {
    width: 6px;
}

.dropdown-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.dropdown-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    border-radius: 3px;
}

.dropdown-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #574b90 0%, #6c5ce7 100%);
}