/* ========================================
   Forum Index – Antigravity Gold Obsidian
   ======================================== */

@import url("https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap");

/* --- Container --- */
.forums {
    margin: 10px 0;
    overflow: visible;
    width: 100%;
    font-family: 'Arimo', Arimo, sans-serif;
    border: none;
}

.forums table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* --- Header Row --- */
.forums tr:nth-child(1) {
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.forums tr:nth-child(1) td {
    border: none !important;
    background: transparent !important;
    padding: 6px 15px;
    font-weight: 500;
}

/* --- Topic Rows = Cards --- */
.forums td {
    padding: 14px 15px;
    border: none;
    background: var(--bg-glass);
    vertical-align: middle;
    transition: all 0.2s ease;
    backdrop-filter: blur(var(--blur-glass));
}

/* Card shape — rounded ends */
.forums tr td:first-child {
    border-radius: 0 0px 0px 0;
    border-right: 3px solid transparent;
}

.forums tr td:last-child {
    border-radius: 0px 0 0 0px;
}

/* Top/bottom subtle border on each card */
.forums .forum td {
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
}

.forums .forum td:first-child {
    border-right: 3px solid var(--accent-primary);
}

/* --- Row Animation --- */
.forum {
    cursor: pointer;
    animation: forumCardIn 0.35s ease both;
}

.forum:nth-child(2) {
    animation-delay: 0.03s;
}

.forum:nth-child(3) {
    animation-delay: 0.06s;
}

.forum:nth-child(4) {
    animation-delay: 0.09s;
}

.forum:nth-child(5) {
    animation-delay: 0.12s;
}

.forum:nth-child(6) {
    animation-delay: 0.15s;
}

.forum:nth-child(7) {
    animation-delay: 0.18s;
}

.forum:nth-child(8) {
    animation-delay: 0.21s;
}

.forum:nth-child(9) {
    animation-delay: 0.24s;
}

.forum:nth-child(10) {
    animation-delay: 0.27s;
}

.forum:nth-child(n+11) {
    animation-delay: 0.30s;
}

@keyframes forumCardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Hover --- */
.forum:hover td {
    background: rgba(212, 168, 83, 0.08);
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.1);
    border-color: var(--accent-primary);
}

.forum:hover {
    transform: translateY(-2px);
}

/* --- Column Styles --- */

/* Creator — avatar + name */
.forum-nickname {
    white-space: nowrap;
    min-width: 100px;
}

.forum-nickname a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--accent-primary) !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.forum-nickname .profileImg {
    width: 36px;
    height: 36px;
    border-radius: 4px; /* Slight rounding for a premium feel */
    object-fit: cover;
    border: 1.5px solid var(--accent-primary);
    box-shadow: 0 0 10px rgba(212, 168, 83, 0.2);
    margin-left: 12px !important; /* Explicit RTL spacing */
}

/* Universal Author Info Wrapper Utility */
.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Topic name */
.forum-name {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.forum-name a {
    color: #f1f5f9 !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

.forum-name a:hover {
    color: var(--accent-primary) !important;
}

/* Category — pill badge */
.forum-category {
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
    white-space: nowrap;
}

/* Comments / Views */
.forum-comments {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    min-width: 60px;
}

/* Date */
.forum-updated {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: center;
    direction: ltr;
}

/* --- Pinned / Attached Threads --- */
.forum.attached td {
    background: linear-gradient(135deg, var(--bg-glass), #1a2744);
}

.forum.attached td:first-child {
    border-right-color: var(--accent-secondary) !important;
}

.forum.attached .forum-name::before {
    content: '📌 ';
    font-size: 0.85rem;
}

.forum.attached:hover td {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.6), rgba(20, 20, 20, 0.8));
}

/* --- Search --- */
.search {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important; /* Managed by the parent gap */
}

.search input {
    height: 42px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    background: var(--bg-glass);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    border-radius: 0px !important;
    font-family: 'Arimo', Arimo, sans-serif;
    transition: all 0.25s ease;
    backdrop-filter: blur(var(--blur-glass));
    box-sizing: border-box !important;
}

.search input::placeholder {
    color: #555e70;
}

.search input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(212, 168, 83, 0.15);
}

.search .sbtn {
    height: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0px !important;
    background: var(--accent-primary) !important;
    color: var(--bg-dark) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none !important;
}

.search .sbtn:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 12px rgba(212, 168, 83, 0.4) !important;
}

/* --- Category Filter --- */
.select-type {
    height: 42px !important;
    width: 200px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: var(--bg-glass) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 0px !important;
    font-family: 'Arimo', Arimo, sans-serif;
    box-sizing: border-box !important;
}

.select-type:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 8px rgba(212, 168, 83, 0.1) !important;
    outline: none;
}

.select-type option {
    background: var(--bg-glass);
    color: var(--text-secondary);
}

/* --- New Thread Button --- */
.forum-new {
    height: 42px !important;
    width: auto !important;
    padding: 0 22px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-family: 'Arimo', Arimo, sans-serif !important;
    background: rgba(212, 168, 83, 0.1) !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    border-radius: 0px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.forum-new::before {
    content: '＋' !important;
    font-size: 14px !important;
    color: var(--accent-primary) !important;
}

.forum-new:hover {
    background: rgba(212, 168, 83, 0.2) !important;
    box-shadow: 0 0 12px rgba(212, 168, 83, 0.3) !important;
}

/* --- Search Results (comments) --- */
.comment {
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
    padding: 16px;
    margin: 8px 0;
    border-radius: 0px;
    transition: all 0.2s ease;
}

.comment:hover {
    border-color: rgba(212, 168, 83, 0.12);
    background: rgba(212, 168, 83, 0.04);
}

.comment-bottom div {
    display: inline-block;
}

.comment-bottom a {
    float: left;
    color: var(--accent-primary);
}

.comment-body {
    margin: 16px 0;
    color: var(--text-primary);
}

.comment-writer a {
    color: var(--accent-primary) !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-writer .profileImg {
    margin-left: 12px !important; /* Explicit RTL spacing */
}

.forum-index-typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 4px;
    color: var(--text-secondary);
    min-height: 24px;
}

.forum-index-online-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 4px;
    color: var(--accent-primary);
    min-height: 24px;
    font-weight: 600;
}

.forum-index-online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #45d483;
    box-shadow: 0 0 12px rgba(69, 212, 131, 0.45);
    flex: 0 0 10px;
}

.forum-index-online-text {
    font-size: 0.9rem;
}

.forum-index-typing-text {
    font-size: 0.88rem;
}

.forum-index-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.forum-index-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: forumTypingPulse 1.2s infinite ease-in-out;
}

.forum-index-typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.forum-index-typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes forumTypingPulse {
    0%, 80%, 100% {
        opacity: 0.25;
        transform: scale(0.82);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Top bar layout --- */
.top {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 15px 0 !important;
}

hr {
    border-color: var(--border-glass);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .top {
        gap: 10px !important;
    }

    .top > * {
        min-width: 0;
    }

    .top .search {
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0;
    }

    .top .search input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .forum-new,
    .select-type {
        flex: 1 1 100%;
        width: 100% !important;
    }

    .forums {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .forums table {
        width: max-content;
        min-width: 100%;
    }
}