/* =====================================================
   FÓRUM
===================================================== */

body.page-forum {
    visibility: hidden;
}

body.page-forum.ready {
    visibility: visible;
}

.page-forum .menu-list {
    padding-bottom: 120px;
}

/* =====================================================
   📚 CARDS DE CATEGORIA E TÓPICO
===================================================== */

.forum-card {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: 10px !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 10px 12px !important;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease;
}

.forum-card:hover {
    border-color: #3f3f46 !important;
}

.forum-card:active {
    transform: scale(.99);
}

/* =====================================================
   📄 INFORMAÇÕES DOS CARDS
===================================================== */

.forum-info-block {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    flex: 1;
}

.forum-main-text {
    display: flex;
    flex-direction: column;

    gap: 2px;
    min-width: 0;
}

.forum-title-text {
    font-size: 14px;
    font-weight: 700;

    color: #f4f4f5;

    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-subtitle-text {
    font-size: 11px;

    color: #71717a;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================
   📊 ESTATÍSTICAS
===================================================== */

.forum-stats-block,
.forum-topic-stats {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 11px;
    font-weight: 700;

    color: #a1a1aa;
}

.forum-reply-count {
    color: #facc15;
    white-space: nowrap;
}

/* =====================================================
   🏷️ BADGES
===================================================== */

.forum-status-badge {
    display: inline-flex;
    align-items: center;

    font-size: 9px;
    font-weight: 800;

    padding: 2px 6px;

    border-radius: 4px;

    letter-spacing: .5px;
}

.badge-staff {
    background: rgba(239, 68, 68, .10);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .20);
}

.badge-public {
    background: rgba(34, 197, 94, .10);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, .20);
}

/* =====================================================
   ⬅️ BOTÕES DE NAVEGAÇÃO
===================================================== */

.forum-back-button {
    min-height: 0 !important;
    padding: 8px 12px !important;
}

.forum-back-button .menu-info {
    font-size: 13px;
}

.forum-back-button .menu-icon {
    color: #facc15 !important;
}

/* =====================================================
   📝 BOTÃO CRIAR TÓPICO
===================================================== */

.forum-create-button {
    min-height: 0 !important;
    padding: 8px 12px !important;
}

.forum-create-button .menu-info {
    font-size: 13px;
}

/* =====================================================
   📄 CABEÇALHO DO TÓPICO
===================================================== */

.forum-topic-header-block {
    background: #111113;

    border: 1px solid #27272a;
    border-radius: 10px;

    padding: 14px;

    margin-bottom: 8px;
}

.forum-topic-header-main {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.forum-topic-title {
    margin: 0;

    font-size: 18px;
    line-height: 1.3;

    color: #f4f4f5;

    overflow-wrap: anywhere;
}

.forum-topic-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 6px 12px;

    font-size: 11px;
    color: #a1a1aa;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* =====================================================
   ⚙️ AÇÕES DO TÓPICO
===================================================== */

.forum-topic-owner-actions,
.forum-staff-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin: 8px 0;
}

.forum-action-button {
    width: auto;
    min-height: 0;

    padding: 6px 10px;

    border: 1px solid #3f3f46;
    border-radius: 6px;

    background: #18181b;
    color: #e4e4e7;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .12s ease,
        border-color .12s ease,
        transform .12s ease;
}

.forum-action-button:hover {
    background: #27272a;
    border-color: #52525b;
}

.forum-action-button:active {
    transform: scale(.97);
}

/* =====================================================
   📜 LISTA DE POSTS
===================================================== */

.forum-posts-list {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 14px;
}

/* =====================================================
   📝 POST
===================================================== */

.forum-post-box {
    display: flex;
    flex-direction: column;

    gap: 0;

    padding: 0;

    border: 1px solid #27272a;
    border-radius: 10px;

    overflow: hidden;

    background: #111113;

    transition:
        border-color .12s ease,
        background .12s ease;
}

.forum-post-box:hover {
    border-color: #3f3f46;
}

/* =====================================================
   📜 POST INICIAL
===================================================== */

.forum-original-post {
    border-color: rgba(250, 204, 21, .30);
}

.forum-original-post .forum-post-type-label {
    color: #facc15;

    background:
        rgba(250, 204, 21, .06);

    border-bottom:
        1px solid rgba(250, 204, 21, .15);
}

/* =====================================================
   💬 RESPOSTAS
===================================================== */

.forum-reply-post {
    border-color: #27272a;
}

.forum-reply-post .forum-post-type-label {
    color: #38bdf8;

    background:
        rgba(56, 189, 248, .04);

    border-bottom:
        1px solid rgba(56, 189, 248, .10);
}

/* =====================================================
   🏷️ TIPO DO POST
===================================================== */

.forum-post-type-label {
    padding: 6px 10px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .3px;
}

/* =====================================================
   👤 USUÁRIO DO POST
===================================================== */

.forum-post-user-info {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px 12px;

    background: rgba(255, 255, 255, .015);

    border-bottom: 1px solid #1f1f22;
}

.forum-post-avatar-placeholder {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid #3f3f46;
    border-radius: 50%;

    background: #18181b;

    font-size: 15px;
}

.forum-post-user-details {
    display: flex;
    flex-direction: column;

    gap: 1px;

    min-width: 0;
}

.forum-post-username {
    font-size: 13px;
    font-weight: 700;

    color: #38bdf8;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-post-user-role {
    font-size: 10px;
    color: #71717a;
}

/* =====================================================
   💬 CONTEÚDO DO POST
===================================================== */

.forum-post-main-content {
    padding: 12px;
}

.forum-post-text {
    min-height: 20px;

    font-size: 13px;
    line-height: 1.55;

    color: #e4e4e7;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.forum-post-timestamp {
    margin-top: 12px;

    padding-top: 8px;

    border-top: 1px solid #1f1f22;

    font-size: 9px;
    color: #71717a;
}

/* =====================================================
   ⚙️ AÇÕES DO POST
===================================================== */

.forum-post-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}

.forum-post-actions button {
    width: auto;
    min-height: 0;

    padding: 5px 8px;

    border: 1px solid #3f3f46;
    border-radius: 5px;

    background: #18181b;
    color: #d4d4d8;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.forum-post-actions button:hover {
    background: #27272a;
}

/* =====================================================
   💬 ÁREA DE RESPOSTA
===================================================== */

.forum-reply-area {
    display: flex;
    justify-content: center;

    margin-top: 14px;
}

.forum-reply-main-button {
    width: auto;

    min-height: 0;

    padding: 8px 14px;

    border: 1px solid rgba(56, 189, 248, .35);
    border-radius: 7px;

    background: rgba(56, 189, 248, .08);
    color: #38bdf8;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.forum-reply-main-button:hover {
    background: rgba(56, 189, 248, .14);
}

/* =====================================================
   🔒 TÓPICO BLOQUEADO
===================================================== */

.forum-topic-locked-message {
    margin-top: 14px;

    padding: 10px 12px;

    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 7px;

    background: rgba(239, 68, 68, .06);

    color: #ef4444;

    font-size: 11px;
    text-align: center;
}

/* =====================================================
   📭 ESTADOS
===================================================== */

.forum-message-loading .forum-title-text,
.forum-message-loading .menu-icon {
    color: #facc15;
}

.forum-message-error {
    border-color:
        rgba(239, 68, 68, .4) !important;
}

.forum-message-error .forum-title-text,
.forum-message-error .menu-icon {
    color: #ef4444;
}

.forum-message-empty .forum-title-text,
.forum-message-empty .menu-icon {
    color: #71717a;
}

.forum-disabled {
    pointer-events: none;
}

/* =====================================================
   🪟 MODAL
===================================================== */

.forum-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;

    background: rgba(0, 0, 0, .78);
}

.forum-modal {
    width: 100%;
    max-width: 650px;

    max-height: calc(100vh - 32px);
    overflow-y: auto;

    box-sizing: border-box;

    padding: 16px;

    border: 1px solid #8b6b2d;
    border-radius: 10px;

    background: #1b1b1b;

    box-shadow:
        0 0 25px rgba(0, 0, 0, .6);
}

.forum-modal h2 {
    margin: 0 0 14px;

    font-size: 17px;
    text-align: center;
}

.forum-modal input,
.forum-modal textarea {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 12px;
    padding: 10px;

    border: 1px solid #555;
    border-radius: 7px;

    background: #2a2a2a;
    color: #fff;

    font-size: 14px;
}

.forum-modal textarea {
    min-height: 170px;
    resize: vertical;
}

.forum-modal-buttons {
    display: flex;
    justify-content: flex-end;

    gap: 8px;
}

.forum-modal-buttons button {
    width: auto;

    padding: 7px 12px;

    border: 1px solid #52525b;
    border-radius: 6px;

    background: #27272a;
    color: #f4f4f5;

    font-size: 12px;

    cursor: pointer;
}

.forum-modal-buttons button:disabled {
    opacity: .5;
    cursor: default;
}

/* =====================================================
   ⚠️ ERRO
===================================================== */

.forum-error-card {
    padding: 20px;

    border: 1px solid
        rgba(239, 68, 68, .3);

    border-radius: 10px;

    background:
        rgba(239, 68, 68, .05);

    text-align: center;
}

.forum-error-icon {
    font-size: 28px;
}

.forum-error-title {
    margin-top: 8px;

    font-size: 16px;
    font-weight: 800;

    color: #ef4444;
}

.forum-error-text {
    margin-top: 6px;

    font-size: 12px;
    color: #a1a1aa;
}

.forum-retry-button,
.forum-error-back {
    display: inline-block;

    width: auto;

    margin: 12px 4px 0;
    padding: 7px 11px;

    border: 1px solid #3f3f46;
    border-radius: 6px;

    background: #18181b;
    color: #e4e4e7;

    font-size: 11px;

    cursor: pointer;
}

/* =====================================================
   📱 MOBILE
===================================================== */

@media (max-width: 600px) {

    .forum-topic-title {
        font-size: 16px;
    }

    .forum-topic-meta {
        font-size: 10px;
    }

    .forum-post-text {
        font-size: 12px;
    }

    .forum-post-main-content {
        padding: 10px;
    }

    .forum-topic-owner-actions,
    .forum-staff-actions {
        gap: 5px;
    }

    .forum-action-button {
        padding: 6px 8px;
        font-size: 10px;
    }

    .forum-modal textarea {
        min-height: 150px;
    }
}