/* =========================================================================
   NINJAKA - Shared Application Styles
   ========================================================================= */

:root {
    --color-neon: #25f436;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Sidebar custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

/* =========================================================================
   Sidebar collapse / expand
   ========================================================================= */

#app-sidebar {
    width: 16rem;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    overflow-y: hidden;
}

#app-sidebar nav {
    overflow-x: hidden;
}

#app-sidebar.collapsed {
    width: 5rem;
}

/* Labels: smooth fade */
#app-sidebar .sidebar-label {
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
    white-space: nowrap;
    overflow: hidden;
}
#app-sidebar.collapsed .sidebar-label {
    opacity: 0;
    width: 0;
    transition: opacity 0.1s ease, width 0s ease 0.1s;
}

/* Nav links & toggle: center icons when collapsed */
#app-sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Logo header: center icon when collapsed */
#app-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
#app-sidebar.collapsed .sidebar-header a {
    justify-content: center;
}

/* User block: center avatar when collapsed */
#app-sidebar.collapsed .sidebar-user-block {
    justify-content: center;
    padding: 0.5rem;
}

/* Collapse icon rotates 180deg */
#app-sidebar .sidebar-collapse-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-sidebar.collapsed .sidebar-collapse-icon {
    transform: rotate(180deg);
}

/* ---- Sidebar accordion groups ---- */
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    color: #6b7280;
    transition: color 0.15s;
    cursor: pointer;
    border: none;
    background: none;
}
.sidebar-group-toggle:hover { color: #d1d5db; }

.sidebar-chevron { transition: transform 0.2s ease; }
.sidebar-group.closed .sidebar-chevron { transform: rotate(-90deg); }

.sidebar-group-items {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}
.sidebar-group.closed .sidebar-group-items {
    max-height: 0;
    opacity: 0;
}

/* Group badge: visible only when group is closed */
.sidebar-group-badge {
    display: none;
    flex-shrink: 0;
}
.sidebar-group.closed .sidebar-group-badge {
    display: inline-flex;
}

/* Collapsed sidebar: hide toggles, show items directly */
#app-sidebar.collapsed .sidebar-group-toggle { display: none; }
#app-sidebar.collapsed .sidebar-group-items {
    max-height: none !important;
    opacity: 1 !important;
}
#app-sidebar.collapsed .sidebar-group.closed .sidebar-group-items {
    max-height: none !important;
    opacity: 1 !important;
}

/* ---- Tooltips (only visible in collapsed state on hover) ---- */
.sidebar-tooltip {
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem 0.75rem;
    background: #1e293b;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 0.375rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 60;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: opacity 0.15s ease;
}
.sidebar-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1e293b;
}
/* Show only when collapsed */
#app-sidebar.collapsed .sidebar-link:hover .sidebar-tooltip {
    opacity: 1;
}

/* Neon glow effect for jungle cards */
.neon-glow {
    box-shadow: 0 0 10px rgba(37, 244, 54, 0.1);
}
.neon-border:hover {
    box-shadow: 0 0 15px rgba(37, 244, 54, 0.15), 0 8px 25px -5px rgba(0,0,0,0.08);
    border-color: #25f436;
}

/* =========================================================================
   Jungle - Urgency & Animation System
   ========================================================================= */

/* Pulsing dot (live indicator, urgent) */
.jungle-pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: relative;
}
.jungle-pulse-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.4;
    animation: junglePulse 2s ease-in-out infinite;
}

@keyframes junglePulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(2.2); opacity: 0; }
}

/* Critical card shimmer */
.jungle-card-critical {
    animation: jungleCriticalGlow 3s ease-in-out infinite;
}

@keyframes jungleCriticalGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px 0 rgba(239, 68, 68, 0.08); }
}

/* Urgency stripe animation */
.jungle-urgency-stripe {
    background-size: 200% 100%;
    animation: jungleStripeMove 2s linear infinite;
}

@keyframes jungleStripeMove {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Urgency banner */
.jungle-urgency-banner {
    animation: jungleBannerFadeIn 0.5s ease-out;
}

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

/* Icon glow */
.jungle-icon-glow {
    box-shadow: 0 0 20px rgba(37, 244, 54, 0.15);
}

/* CTA button hover */
.jungle-cta-btn {
    position: relative;
    overflow: hidden;
}
.jungle-cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.jungle-cta-btn:hover::before {
    transform: translateX(100%);
}

/* Live badge */
.jungle-live-badge {
    animation: jungleBadgePop 0.4s ease-out;
}

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

/* Card stagger entrance */
.jungle-card {
    animation: jungleCardIn 0.4s ease-out both;
}
.jungle-card:nth-child(1)  { animation-delay: 0ms; }
.jungle-card:nth-child(2)  { animation-delay: 50ms; }
.jungle-card:nth-child(3)  { animation-delay: 100ms; }
.jungle-card:nth-child(4)  { animation-delay: 150ms; }
.jungle-card:nth-child(5)  { animation-delay: 200ms; }
.jungle-card:nth-child(6)  { animation-delay: 250ms; }
.jungle-card:nth-child(7)  { animation-delay: 300ms; }
.jungle-card:nth-child(8)  { animation-delay: 350ms; }
.jungle-card:nth-child(9)  { animation-delay: 400ms; }
.jungle-card:nth-child(10) { animation-delay: 450ms; }
.jungle-card:nth-child(11) { animation-delay: 500ms; }
.jungle-card:nth-child(12) { animation-delay: 550ms; }
.jungle-card:nth-child(13) { animation-delay: 600ms; }
.jungle-card:nth-child(14) { animation-delay: 650ms; }
.jungle-card:nth-child(15) { animation-delay: 700ms; }

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

/* External link button (shows on card hover) */
.jungle-ext-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(37,244,54,0.1);
    color: #25f436;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.15s ease;
    flex-shrink: 0;
}
.jungle-task-card:hover .jungle-ext-link-btn {
    opacity: 1;
}
.jungle-ext-link-btn:hover {
    background: rgba(37,244,54,0.25);
}

/* Priority badge */
.jungle-priority-badge.high {
    color: #f87171;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.25);
}

/* Claim success glow animation */
@keyframes jungleClaimSuccess {
    0% { box-shadow: 0 0 0 0 rgba(37,244,54,0.4); }
    50% { box-shadow: 0 0 30px 5px rgba(37,244,54,0.25); }
    100% { box-shadow: 0 0 25px rgba(37,244,54,0.2), 0 0 50px rgba(37,244,54,0.08); }
}

/* Toast slide-in */
@keyframes jungleToastIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes jungleToastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(30px); }
}

/* Card shrink removal */
@keyframes jungleCardRemove {
    0% { opacity: 1; transform: scale(1); }
    60% { opacity: 0.5; transform: scale(0.92); }
    100% { opacity: 0; transform: scale(0.85); max-height: 0; padding: 0; margin: 0; border-width: 0; overflow: hidden; }
}

/* 2xl compact card padding */
@media (min-width: 1536px) {
    .jungle-task-card {
        padding: 14px;
    }
}

/* Toggle Switch */
.toggle-checkbox:checked {
    right: 0;
    border-color: #25f436;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #25f436;
}

/* Login page patterns */
.ninja-pattern {
    background-color: #081609;
    background-image: radial-gradient(#1a321c 1px, transparent 1px);
    background-size: 30px 30px;
}
.mask-overlay {
    background: linear-gradient(135deg, rgba(37, 244, 54, 0.05) 0%, transparent 100%);
}

/* Status badge colors */
.badge-pending     { background-color: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.badge-inprogress  { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; }
.badge-reviewing   { background-color: #fffbeb; color: #b45309; border: 1px solid #fef3c7; }
.badge-completed   { background-color: #f0fdf4; color: #15803d; border: 1px solid #dcfce7; }

/* Soft shadow utility */
.shadow-soft {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}
.shadow-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
}

/* Flash message animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}