/**
 * Sidebar Auto-Collapse Functionality
 * Handles sidebar responsive behavior and animations
 */

/* Trial Widget Styles */
.trial-widget {
    margin-bottom: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.trial-widget .bg-gradient-to-r {
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.trial-widget:hover .bg-gradient-to-r {
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
    transform: translateY(-1px);
}

/* Progress bar animations */
.trial-widget .h-2 > div {
    transition: width 0.6s ease-in-out;
}

/* Urgent state for low trial days */
.trial-widget[data-days="3"] .bg-gradient-to-r,
.trial-widget[data-days="2"] .bg-gradient-to-r,
.trial-widget[data-days="1"] .bg-gradient-to-r,
.trial-widget[data-days="0"] .bg-gradient-to-r {
    background: linear-gradient(to right, #dc2626, #ef4444) !important;
    animation: urgent-pulse 2s infinite;
}

@keyframes urgent-pulse {
    0%, 100% { 
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    }
    50% { 
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
    }
}

/* Sidebar Container Transitions */
#sidebar {
    transition: width 0.3s ease-in-out, background-color 0.3s ease;
}

#main-container {
    transition: margin-left 0.3s ease-in-out;
}

/* Auto-Collapsed State Margin Adjustment */
.sidebar-collapsed-margin {
    margin-left: 4rem !important; /* w-16 equivalent */
}

/* Auto-Collapsed State Base Styles */
.sidebar-auto-collapsed {
    width: 4rem !important; /* w-16 */
    overflow: visible !important;
    position: relative;
}

/* Organization Header in Collapsed State */
.sidebar-auto-collapsed .p-6 {
    padding: 1rem 0.5rem !important;
    transition: padding 0.3s ease-in-out;
}

.sidebar-auto-collapsed .p-6 > div {
    justify-content: center !important;
    transition: justify-content 0.3s ease-in-out;
}

.sidebar-auto-collapsed #org-name {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.sidebar-auto-collapsed .w-8 {
    margin-right: 0 !important;
    transition: margin 0.3s ease-in-out;
}

/* Center menu items when collapsed */
.sidebar-auto-collapsed nav a,
.sidebar-auto-collapsed nav .group {
    justify-content: center !important;
    align-items: center !important;
    padding: 0.75rem 0.5rem !important;
    position: relative;
    margin: 0.125rem 0.25rem !important;
    display: flex !important;
    min-height: 2.5rem !important;
}

.sidebar-auto-collapsed nav a .w-5 {
    margin: 0 !important;
    flex-shrink: 0;
    width: 1.25rem !important;
    height: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-auto-collapsed nav a .w-5 i {
    font-size: 1rem !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide text and chevron arrows when collapsed */
.sidebar-auto-collapsed nav a .sidebar-text,
.sidebar-auto-collapsed nav a .ml-auto,
.sidebar-auto-collapsed nav .group .ml-auto {
    display: none !important;
}

/* Center footer content when collapsed */
.sidebar-auto-collapsed .p-4 {
    padding: 1rem 0.5rem !important;
}

/* Timer widget gradient styles */
#active-timer-widget .bg-gradient-to-r {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

#active-timer-widget:hover .bg-gradient-to-r {
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
    transform: translateY(-1px);
}

/* Timer widget styling for collapsed state */
.sidebar-auto-collapsed #active-timer-widget .timer-widget-container {
    justify-content: center !important;
    align-items: center !important;
}

.sidebar-auto-collapsed #active-timer-widget .timer-expanded-content {
    display: none !important;
}

.sidebar-auto-collapsed #active-timer-widget .timer-collapsed-view {
    display: none !important;
}

/* Keep ONLY the pulse visible in collapsed state */
.sidebar-auto-collapsed #active-timer-widget .timer-pulse {
    display: block !important;
    margin: 0 auto !important;
}

/* Trial widget styling for collapsed state - simple purple box */
.sidebar-auto-collapsed #trial-widget .flex {
    justify-content: center !important;
    align-items: center !important;
    min-height: 2rem !important;
    padding: 0.5rem !important;
}

.sidebar-auto-collapsed #trial-widget .sidebar-text {
    display: none !important;
}

.sidebar-auto-collapsed #trial-widget .w-2 {
    display: none !important;
}

.sidebar-auto-collapsed #trial-widget .trial-collapsed-view {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Center activity link when collapsed */
.sidebar-auto-collapsed .group:has(a[data-page="activity"]) {
    justify-content: center !important;
}

.sidebar-auto-collapsed a[data-page="activity"] {
    justify-content: center !important;
    padding: 0.75rem 0.5rem !important;
}

.sidebar-auto-collapsed a[data-page="activity"] .w-5 {
    margin: 0 !important;
}

.sidebar-auto-collapsed #user-menu-button {
    justify-content: center !important;
    padding: 0.75rem !important;
}

.sidebar-auto-collapsed #user-menu-button .w-5 {
    margin: 0 !important;
}

.sidebar-auto-collapsed #user-menu-button .ml-3,
.sidebar-auto-collapsed #user-menu-button .ml-2 {
    display: none !important;
}

/* Center organization menu button when collapsed */
.sidebar-auto-collapsed #org-menu-button {
    justify-content: center !important;
    padding: 0.75rem !important;
}

.sidebar-auto-collapsed #org-menu-button .w-5 {
    margin: 0 !important;
}

.sidebar-auto-collapsed #org-menu-button i {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar-auto-collapsed #org-menu-button .ml-3,
.sidebar-auto-collapsed #org-menu-button .ml-2 {
    display: none !important;
}

/* Add hover hint */
.sidebar-auto-collapsed::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -2px;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    background: rgba(245, 158, 11, 0.3);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-auto-collapsed:hover::before {
    opacity: 1;
}

/* Hide text with proper transition */
.sidebar-auto-collapsed .sidebar-text {
    display: none !important;
}

/* Restore proper alignment when hovering */
.sidebar-auto-collapsed:hover .p-6 {
    padding: 1.5rem !important;
    transition: padding 0.3s ease-in-out;
}

.sidebar-auto-collapsed:hover .p-6 > div {
    justify-content: flex-start !important;
}

/* Show text when hovering over collapsed sidebar */
.sidebar-auto-collapsed:hover .sidebar-text {
    display: block !important;
}

.sidebar-auto-collapsed:hover #org-name {
    display: block !important;
}

.sidebar-auto-collapsed:hover .w-8 {
    margin-right: 0.75rem !important;
    transition: margin 0.3s ease-in-out;
}

.sidebar-auto-collapsed:hover nav a {
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0.75rem !important;
    margin: 0.125rem 0 !important;
    display: flex !important;
    transition: all 0.3s ease-in-out;
}

.sidebar-auto-collapsed:hover nav a .w-5 {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
    flex-shrink: 0;
    transition: margin 0.3s ease-in-out;
}

.sidebar-auto-collapsed:hover nav a .sidebar-text,
.sidebar-auto-collapsed:hover nav a .ml-auto {
    display: block !important;
}

/* Restore footer alignment when hovering */
.sidebar-auto-collapsed:hover .p-4 {
    padding: 1rem !important;
    transition: padding 0.3s ease-in-out;
}

.sidebar-auto-collapsed:hover #user-menu-button {
    justify-content: flex-start !important;
    padding: 0.5rem 0.75rem !important;
}

.sidebar-auto-collapsed:hover #user-menu-button .w-5 {
    margin-right: 0 !important;
}

.sidebar-auto-collapsed:hover #user-menu-button .ml-3,
.sidebar-auto-collapsed:hover #user-menu-button .ml-2 {
    display: block !important;
}

/* Restore organization menu alignment when hovering */
.sidebar-auto-collapsed:hover #org-menu-button {
    justify-content: flex-start !important;
    padding: 0.5rem 0.75rem !important;
}

.sidebar-auto-collapsed:hover #org-menu-button .w-5 {
    margin-right: 0 !important;
}

.sidebar-auto-collapsed:hover #org-menu-button .ml-3,
.sidebar-auto-collapsed:hover #org-menu-button .ml-2 {
    display: block !important;
}

/* Text fade-in with staggered delays for smooth animation */
.sidebar-auto-collapsed:hover #org-name {
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out 0.2s;
}

/* Breadcrumb Link Styles */
nav[aria-label="Breadcrumb"] a,
.breadcrumb a,
ol.breadcrumb a {
    color: #2563eb !important; /* text-blue-600 */
}

nav[aria-label="Breadcrumb"] a:hover,
.breadcrumb a:hover,
ol.breadcrumb a:hover {
    color: #3b82f6 !important; /* text-blue-500 */
}