/* footer.css */

/* Safety net: footer.ejs renders the Who's Online popup on every
   authenticated page, but its full styling normally comes from social.css,
   which is only loaded on pages that opt into the 'social' component.
   footer.css itself is loaded everywhere footer.ejs is used, so keeping the
   "hidden by default" rule here guarantees the popup never renders
   unstyled/visible on a page that skipped social.css. */
.social-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.social-popup {
    background: var(--color-surface, #fff);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: min(92vw, 520px);
    max-height: 80vh;
    overflow: auto;
    padding: 16px 20px 20px 20px;
}

/* ==== Brutalist "Who's Online" popup ====
   Selector doubles up .social-popup so it wins over the plain .social-popup
   rule above regardless of stylesheet load order (social.css redeclares the
   same base selector on pages that opt into the 'social' component). */
.social-popup.social-popup--brutal {
    background: var(--as-white, #fff);
    border: 3px solid var(--as-black);
    border-radius: 0;
    box-shadow: 12px 12px 0 var(--as-cyan);
    padding: 32px;
    width: min(92vw, 500px);
}

.brutal-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.brutal-kicker {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    color: var(--as-grey);
}

.brutal-kicker--cyan { color: var(--as-cyan); }
.brutal-kicker--yellow { color: var(--as-yellow); }
.brutal-kicker--red { color: var(--as-red); }

.brutal-title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--as-black);
    margin: 0;
}

.brutal-close-btn {
    background: var(--as-black);
    color: #fff;
    padding: 6px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color .15s, color .15s;
}

.brutal-close-btn:hover {
    background: var(--as-yellow);
    color: var(--as-black);
}

.brutal-online-box {
    border: 2px solid var(--as-black);
    background: #f8f8f8;
    padding: 24px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brutal-online-box .friends-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

/* Fallback styling for the populated user list: friends-table's full look
   normally comes from social.css, which is only loaded on the
   Friends/Profile pages. footer.css is loaded everywhere this popup can
   appear, so — same reasoning as the "safety net" note above — the
   online-user rows get their own scoped baseline here. */
.brutal-online-box .friends-table th,
.brutal-online-box .friends-table td {
    text-align: left;
    padding: 10px 4px;
    border-bottom: 1px solid #ddd;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--as-black);
}

.brutal-online-box .friends-table thead th {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--as-grey);
    border-bottom: 2px solid var(--as-black);
}

.brutal-online-box .friends-table tbody tr:last-child td {
    border-bottom: 0;
}

.brutal-online-box .friend-profile-link {
    color: var(--as-black);
    font-weight: 700;
    text-decoration: none;
}

.brutal-online-box .friend-profile-link:hover {
    color: var(--as-cyan);
    text-decoration: underline;
}

.brutal-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.brutal-empty-icon {
    font-size: 32px;
    opacity: .3;
    filter: grayscale(1);
    margin-bottom: 10px;
}

.brutal-empty-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-grey);
    margin: 0;
}

.brutal-empty-sub {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    color: var(--as-grey);
    margin: 6px 0 0 0;
}

.brutal-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
}

.brutal-active-count {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-grey);
    margin: 0;
}

.brutal-active-count span {
    color: var(--as-black);
    font-family: monospace;
    font-size: 10px;
}

.brutal-refresh-btn {
    background: none;
    border: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--as-black);
    text-decoration: underline;
    text-decoration-color: var(--as-cyan);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.brutal-refresh-btn:hover { color: var(--as-cyan); }

/* ==== Shared ==== */

.footer-bar {
    display: flex;
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: var(--color-text-on-accent, #fff);
    border-top: 1px solid var(--as-black);
    z-index: 98;
    flex-direction: row;
    width: 100%;
    max-width: 100dvw;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
}

.footer-bar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.footer-bar-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.footer-brand,
.footer-bar .footer-link {
    font-family: 'Roboto', monospace;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--as-grey);
    text-decoration: none;
    white-space: nowrap;
}

.footer-bar .footer-link:hover {
    color: var(--as-cyan);
}

.footer-bar .copyright {
    font-family: 'Roboto', monospace;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--as-grey);
    text-align: right;
    white-space: nowrap;
}

/* ==== Mobile (max-width: 1000px) ==== */
@media (max-width: 1000px) {

.footer-container-social-media-buttons {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        align-items: center;
        margin-bottom: 5%;
    }

.footer-bar {
        height: var(--footer-height-mobile);
        padding: 0 3dvw;
        gap: 10px;
    }

.footer-brand,
    .footer-bar .footer-link,
    .footer-bar .copyright {
        font-size: 8px;
    }

.social-popup.social-popup--brutal {
        padding: 20px;
        box-shadow: 6px 6px 0 var(--as-cyan);
    }

.brutal-title {
        font-size: 22px;
    }

.brutal-modal-head {
        margin-bottom: 16px;
    }

}

/* ==== Desktop (min-width: 1001px) ==== */
@media (min-width: 1001px) {

.footer-container-social-media-buttons {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        align-items: center;
        margin-bottom: 2%;
    }

.footer-bar {
        height: var(--footer-height);
        padding: 0 2dvw;
        gap: 24px;
    }

.footer-bar-left, .footer-bar-right {
    gap: 24px;
}

.footer-brand,
    .footer-bar .footer-link,
    .footer-bar .copyright {
        font-size: 11px;
    }

}