/* =================================
   FORUM HOME CLEAN LAYOUT STYLES
   ================================= */

/* Import official site variables */
@import url('/assets/styles/core/variables.css');

/* Force remove any orange borders and styles */
.forum-directory * {
    border-color: var(--clr-base-500) !important;
}

/* Remove all orange/warning colors completely */
.forum-directory .border-warning,
.forum-directory .border-orange,
.forum-directory .text-warning,
.forum-directory .bg-warning,
.forum-directory [class*="warning"],
.forum-directory [class*="orange"] {
    border-color: var(--clr-base-500) !important;
    background-color: var(--clr-base-600) !important;
    color: var(--clr-base-200) !important;
}

/* Override all icon colors */
.forum-directory i,
.forum-directory .fas,
.forum-directory .far,
.forum-directory .fab,
.forum-directory .fa {
    color: var(--clr-base-400) !important;
}

/* Specific overrides for category elements */
.forum-directory .category-section,
.forum-directory .subcategory-item,
.forum-directory .subcategory-icon {
    border: 1px solid var(--clr-base-500) !important;
    background-color: var(--clr-base-600) !important;
}

/* Global Forum Home Styling */
.forum-directory {
    background: var(--clr-base-700);
    color: var(--clr-base-100);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Forum Header */
.forum-header {
    background: var(--clr-base-600);
    border: 1px solid var(--clr-base-500);
    border-radius: 1px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.welcome-banner {
    text-align: center;
}

.forum-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--clr-base-50);
    margin-bottom: 0.5rem;
}

.forum-subtitle {
    color: var(--clr-base-300);
    font-size: 1rem;
    margin: 0;
}

/* Category Section */
.category-section {
    background: var(--clr-base-600);
    border: 1px solid var(--clr-base-500);
    border-radius: 1px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.category-header {
    background: var(--clr-base-700);
    padding: 1rem;
    border-bottom: 1px solid var(--clr-base-500);
}

.category-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-base-50);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
}

.category-name i {
    color: var(--clr-base-400);
}

.category-desc {
    color: var(--clr-base-300);
    font-size: 0.85rem;
    margin: 0;
}

/* Subcategory List */
.subcategory-list {
    background: var(--clr-base-600);
}

.subcategory-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-base-500);
    transition: background-color 0.2s ease;
    gap: 1rem;
}

.subcategory-item:last-child {
    border-bottom: none;
}

.subcategory-item:hover {
    background: var(--clr-base-500--20);
}

@media (max-width: 768px) {
    .subcategory-item {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        text-align: center;
    }
}

/* Subcategory Info */
.subcategory-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.subcategory-icon {
    width: 35px;
    height: 35px;
    background: var(--clr-base-700) !important;
    border: 1px solid var(--clr-base-500) !important;
    border-radius: 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-base-400) !important;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Override any orange/warning colors on category icons */
.subcategory-icon i,
.subcategory-icon .fas,
.subcategory-icon .far,
.subcategory-icon .fab {
    color: var(--clr-base-400) !important;
}

/* Override Bootstrap warning colors */
.forum-directory .bg-warning,
.forum-directory .badge-warning,
.forum-directory .btn-warning,
.forum-directory .alert-warning {
    background-color: var(--clr-base-700) !important;
    border-color: var(--clr-base-500) !important;
    color: var(--clr-base-400) !important;
}

.subcategory-details h5 {
    margin: 0 0 0.2rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.subcategory-title a {
    color: var(--clr-base-100);
    text-decoration: none;
    transition: color 0.2s ease;
}

.subcategory-title a:hover {
    color: var(--clr-base-50);
}

.subcategory-description {
    color: var(--clr-base-300);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.3;
}

/* Subcategory Stats */
.subcategory-stats {
    display: flex;
    gap: 1.2rem;
    text-align: center;
    padding: 0 0.5rem;
}

@media (max-width: 768px) {
    .subcategory-stats {
        justify-content: center;
        gap: 1.5rem;
    }
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}

.stat strong {
    color: var(--clr-base-100);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}

.stat span {
    color: var(--clr-base-400);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Latest Post */
.subcategory-latest {
    text-align: right;
    min-width: 140px;
    padding: 0 0.5rem;
}

@media (max-width: 768px) {
    .subcategory-latest {
        text-align: center;
        min-width: auto;
    }
}

.latest-post {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.latest-title {
    color: #d4d4d4;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
}

.latest-title a {
    color: #d4d4d4;
    text-decoration: none;
}

.latest-title a:hover {
    color: #ffffff;
}

.latest-meta {
    color: #858585;
    font-size: 0.7rem;
    line-height: 1.2;
}

/* Forum Stats Sidebar */
.stats-section {
    background: var(--clr-base-600);
    border: 1px solid var(--clr-base-500);
    border-radius: 1px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.stats-header {
    background: var(--clr-base-700);
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-base-500);
}

.stats-title {
    color: var(--clr-base-100);
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.stats-content {
    padding: 0.8rem;
    background: var(--clr-base-600);
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.stats-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-label {
    color: var(--clr-base-300);
    font-size: 0.8rem;
}

.stats-value {
    color: var(--clr-base-100);
    font-weight: 500;
    font-size: 0.8rem;
}

/* Recent Activity */
.activity-section {
    background: var(--clr-base-600);
    border: 1px solid var(--clr-base-500);
    border-radius: 1px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.activity-header {
    background: var(--clr-base-700);
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-base-500);
}

.activity-title {
    color: var(--clr-base-100);
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.activity-content {
    padding: 0.8rem;
    background: var(--clr-base-600);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #3e3e42;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-avatar {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #3e3e42;
}

.activity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-details {
    flex: 1;
}

.activity-text {
    color: var(--clr-base-100);
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

.activity-time {
    color: var(--clr-base-400);
    font-size: 0.7rem;
}

.activity-text a {
    color: var(--clr-base-100);
    text-decoration: none;
}

.activity-text a:hover {
    color: var(--clr-base-50);
}

/* Online Users */
.online-users-section {
    background: #222;
    border: 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
}

.online-users-header {
    background: #1a1a1a;
    padding: 0.8rem;
    border-bottom: 1px solid #333;
}

.online-users-title {
    color: #ffffff;
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.online-users-content {
    padding: 0.8rem;
}

.online-users-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.online-user {
    background: #333;
    color: #ddd;
    padding: 0.3rem 0.6rem;
    border-radius: 2px;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.online-user:hover {
    background: #444;
    color: #fff;
}

.online-summary {
    color: #888;
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #777;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #555;
}

.empty-state h4 {
    color: #999;
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .forum-header {
        padding: 1rem;
    }
    
    .category-header {
        padding: 0.8rem;
    }
    
    .subcategory-item {
        padding: 0.8rem;
    }
    
    .forum-title {
        font-size: 1.5rem;
    }
    
    .subcategory-info {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .subcategory-stats {
        gap: 1rem;
    }
}