/**
 * Help Center Styles
 * SubProject: SP-PUX-31 (Panel UX Redesign - Help Center)
 * 
 * Components:
 * - Help button in header
 * - Help dropdown panel
 * - Contextual help card
 * - Help links and categories
 * 
 * Created: December 2025
 */

/* ========================================
   Help Button
   ======================================== */

#kt_help_toggle {
    transition: all 0.2s ease;
}

#kt_help_toggle:hover {
    transform: scale(1.05);
}

#kt_help_toggle[aria-expanded="true"] {
    background-color: var(--bs-info-light) !important;
    color: var(--bs-info) !important;
}

#kt_help_toggle[aria-expanded="true"] i {
    color: var(--bs-info) !important;
}

/* What's New badge animation */
#kt_help_toggle .animation-blink {
    animation: help-badge-blink 1.5s infinite;
}

@keyframes help-badge-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========================================
   Help Dropdown Panel
   ======================================== */

.help-dropdown {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.75rem;
    animation: help-dropdown-appear 0.2s ease-out;
}

@keyframes help-dropdown-appear {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Contextual Help Card
   ======================================== */

.help-contextual-card {
    transition: all 0.2s ease;
    cursor: pointer;
}

.help-contextual-card:hover {
    background-color: var(--bs-info-light) !important;
    transform: translateX(2px);
}

.help-contextual-card .symbol-label {
    transition: transform 0.2s ease;
}

.help-contextual-card:hover .symbol-label {
    transform: scale(1.1);
}

/* ========================================
   Help Links
   ======================================== */

.help-link {
    transition: all 0.15s ease;
    border-radius: 0.5rem;
}

.help-link:hover {
    background-color: var(--bs-info-light) !important;
    transform: translateX(4px);
}

.help-link:focus {
    outline: 2px solid var(--bs-info);
    outline-offset: 2px;
}

.help-link.active {
    background-color: var(--bs-info-light) !important;
}

.help-link .menu-badge .ki-exit-up {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.help-link:hover .menu-badge .ki-exit-up {
    opacity: 1;
}

/* ========================================
   Help Categories
   ======================================== */

.help-category .menu-section {
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0;
}

/* ========================================
   Help Content Scrollable Area
   ======================================== */

.help-content {
    padding-right: 0.5rem;
}

.help-content::-webkit-scrollbar {
    width: 4px;
}

.help-content::-webkit-scrollbar-track {
    background: transparent;
}

.help-content::-webkit-scrollbar-thumb {
    background: var(--bs-gray-300);
    border-radius: 2px;
}

.help-content::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-400);
}

/* ========================================
   Keyboard Hints
   ======================================== */

.help-dropdown kbd {
    background-color: var(--bs-gray-200);
    border: 1px solid var(--bs-gray-300);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 10px;
    font-family: monospace;
    color: var(--bs-gray-700);
}

/* ========================================
   Close Button
   ======================================== */

#kt_help_close {
    transition: all 0.15s ease;
}

#kt_help_close:hover {
    transform: rotate(90deg);
}

/* ========================================
   System Status Badge
   ======================================== */

.help-link .badge.badge-light-success {
    font-size: 9px;
    padding: 3px 6px;
}

/* ========================================
   Dark Mode Support
   ======================================== */

[data-bs-theme="dark"] .help-dropdown {
    background-color: var(--bs-gray-900);
    border-color: var(--bs-gray-800);
}

[data-bs-theme="dark"] .help-contextual-card {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
}

[data-bs-theme="dark"] .help-contextual-card:hover {
    background-color: rgba(var(--bs-info-rgb), 0.2) !important;
}

[data-bs-theme="dark"] .help-link:hover {
    background-color: rgba(var(--bs-info-rgb), 0.1) !important;
}

[data-bs-theme="dark"] .help-dropdown kbd {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .help-content::-webkit-scrollbar-thumb {
    background: var(--bs-gray-700);
}

[data-bs-theme="dark"] .help-content::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-600);
}

/* ========================================
   Mobile Responsiveness
   ======================================== */

@media (max-width: 575.98px) {
    .help-dropdown {
        width: 100vw !important;
        max-width: 100vw !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .help-content {
        max-height: 60vh;
    }
    
    .help-contextual-card {
        padding: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .help-dropdown {
        width: 320px;
    }
    
    .help-dropdown kbd {
        display: none;
    }
}

/* ========================================
   Focus States for Accessibility
   ======================================== */

.help-dropdown:focus-within {
    outline: none;
}

.help-link:focus-visible {
    outline: 2px solid var(--bs-info);
    outline-offset: -2px;
}

#kt_help_toggle:focus-visible {
    outline: 2px solid var(--bs-info);
    outline-offset: 2px;
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .help-dropdown,
    .help-contextual-card,
    .help-link,
    #kt_help_toggle,
    #kt_help_close {
        transition: none;
        animation: none;
    }
    
    #kt_help_toggle .animation-blink {
        animation: none;
    }
}