/**
 * discourse-sidebar-styles.css
 * Discourse Sidebar Styles
 * Clean, organized structure for left sidebar navigation
 */

/**
 * Discourse Sidebar Styles
 * Clean, organized structure for left sidebar navigation
 */
/* ===================================
   SIDEBAR CONTAINER
   =================================== */
.discourse-left-sidebar {
    display: flex;
    flex-direction: column;
    width: 275px;
    height: calc(100vh - 110px);
    position: fixed;
    top: var(--sidebar-top, 110px);
    left: calc(50% - 640px);
    padding: 21px 21px 15px 12px;
    /* border-right: 1px solid #e1e8ed;  <-- REMOVE THIS LINE */
    overflow-y: auto;
    z-index: 100;
}

body.dark-mode .discourse-left-sidebar {
    /* border-right-color: #444;  <-- REMOVE THIS LINE TOO */
}
/* ===================================
   NAVIGATION CONTAINER
   =================================== */
.discourse-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    /* REMOVED flex: 1 - this was making nav expand and shift items */
}
/* ===================================
   NAV ITEMS - DEFAULT STATE
   =================================== */
.discourse-nav-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    margin-bottom: 0;
    color: #555555 !important;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    transition: background 0.2s, color 0.2s;
    border-radius: 0;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.dark-mode .discourse-nav-item {
    color: #aaaaaa !important;
}
/* ===================================
   NAV ITEMS - ICONS
   =================================== */
.discourse-nav-item svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    flex-shrink: 0;
    transition: fill 0.2s;
}
/* ===================================
   NAV ITEMS - HOVER STATE
   =================================== */
.discourse-nav-item:hover {
    background: rgba(255, 152, 1, 0.1);
    color: #ff9801 !important;
}
.discourse-nav-item:hover svg {
    fill: #ff9801;
}
/* ===================================
   NAV ITEMS - ACTIVE STATE
   =================================== */
.discourse-nav-item.active {
    color: #ff9801 !important;
    font-weight: 700;
}
body.dark-mode .discourse-nav-item.active {
    color: #ff9801 !important;
}
.discourse-nav-item.active svg {
    fill: #ff9801;
}
/* ===================================
   POST/DISCOURSE BUTTON
   =================================== */
.discourse-nav-post-btn {
    width: 100%;
    background: #ff9801;
    color: white;
    border: none;
    border-radius: 0;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: none;
    margin-top: auto;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discourse-nav-post-btn span {
    color: white;
    pointer-events: none;
}
/* Diagonal rotation animation on hover - no color change */
.discourse-nav-post-btn:hover {
    animation: diagonalShake 1s ease-in-out;
    background: #ff9801;
}
@keyframes diagonalShake {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-2deg); }
    20% { transform: rotate(2deg); }
    30% { transform: rotate(-2deg); }
    40% { transform: rotate(2deg); }
    50% { transform: rotate(-1deg); }
    60% { transform: rotate(1deg); }
    70% { transform: rotate(-1deg); }
    80% { transform: rotate(1deg); }
    90% { transform: rotate(0deg); }
}
/* Ensure white text in light mode */
body:not(.dark-mode) .discourse-nav-post-btn {
    color: white;
}
body:not(.dark-mode) .discourse-nav-post-btn span {
    color: white;
}
/* ===================================
   RESPONSIVE DESIGN
   =================================== */
/* Mobile (under 768px) */
@media (max-width: 768px) {
    .discourse-left-sidebar {
        width: 80px;
        padding: 20px 8px;
    }
    
    .discourse-nav-item span {
        display: none;
    }
    
    .discourse-nav-item {
        justify-content: center;
        padding: 12px;
        gap: 0;
    }
    
    .discourse-nav-post-btn span {
        display: block;
    }
}
/* Tablet (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .discourse-left-sidebar {
        width: 200px;
    }
    
    .discourse-nav-item {
        font-size: 18px;
    }
    
    .discourse-nav-item span {
        font-size: 18px;
    }
}