/* Dark themed styles inspired by Quantum Gaming forum */
/*
 * Apply border-box sizing globally so that width and height include
 * padding and border. This helps ensure elements never exceed their
 * allocated space and reduces the likelihood of horizontal scroll.
 */
* {
    box-sizing: border-box;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    /* Use CSS variables defined in the template for the page colours.
       Fallback values correspond to the default dark theme. */
    background-color: var(--body-bg, #0e1626);
    color: var(--body-color, #e5e5e5);
    /* When the navbar is fixed, the body needs top padding so that
       the page content does not slide underneath the fixed header. Adjust
       this value if you change the navbar’s height. */
    padding-top: 3.5rem;

    /* Prevent horizontal scrolling caused by wide elements. Any extra
       width will be clipped rather than creating a horizontal scroll bar. */
    overflow-x: hidden;
}

.navbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    /* Apply theme colours via CSS variables with sensible defaults. */
    background-color: var(--navbar-bg, #071f3d);
    color: var(--navbar-color, #ffffff);

    /* Keep the top navigation bar fixed in place while scrolling. A fixed
       position removes the bar from the normal document flow, so the body
       includes top padding (see body rule) to offset the bar’s height. The
       z-index ensures it appears above other content. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

.navbar .brand {
    font-weight: bold;
    font-size: 1.4rem;
    margin-right: 2rem;
    color: var(--navbar-color, #ffffff);
    text-decoration: none;
    /* Provide a padded area and rounded corners so that hover
       backgrounds look intentional. */
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar nav a {
    color: var(--navbar-color, #ffffff);
    margin-right: 1rem;
    text-decoration: none;
    font-size: 0.95rem;
}

/* When hovering over the brand (text or logo), apply the hover background
   colour defined in the theme. This creates a subtle fade-in effect. */
.navbar .brand:hover {
    background-color: var(--brand-hover-bg, var(--navbar-bg, #071f3d));
    color: var(--navbar-color, #ffffff);
}

.navbar nav a:hover {
    text-decoration: underline;
}

.navbar .nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.navbar .nav-right input[type="search"] {
    /*
     * The search bar inherits its colours from the theme. When a theme
     * defines --navbar-bg and --navbar-color, those values will be
     * used. Fallback colours are provided for the default dark theme.
     */
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--navbar-bg, #071f3d);
    background-color: var(--navbar-bg, #16325c);
    color: var(--navbar-color, #e5e5e5);
    margin-right: 0.5rem;
}

.navbar .nav-right a {
    color: var(--navbar-color, #ffffff);
    margin-left: 0.5rem;
    text-decoration: none;
}

.subnav {
    display: flex;
    padding: 0.4rem 1rem;
    background-color: #0b2544;
    color: #c4c4c4;
    font-size: 0.85rem;
}

.subnav a {
    color: #c4c4c4;
    margin-right: 1rem;
    text-decoration: none;
}

.subnav a:hover {
    color: #ffffff;
}

/*
 * The main wrapper for the page content and sidebar. Set a maximum width
 * while also ensuring it never exceeds the viewport. The padding on
 * either side prevents content from touching the edges of the window.
 */
.container {
    display: flex;
    max-width: 1200px;
    width: 100%;
    margin: 1rem auto;
    gap: 1rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Prevent flex children from growing beyond the available space. Without
   this rule, long category names or other wide content can cause
   horizontal overflow. */
.content,
.sidebar {
    min-width: 0;
}

.content {
    flex: 3;
}

/* Sidebar container. Use the panel variables so the sidebar matches the
   selected theme. */
.sidebar {
    flex: 1;
    background-color: var(--panel-bg, #0b2544);
    padding: 1rem;
    border-radius: 4px;
    color: var(--panel-color, #c4c4c4);
    font-size: 0.9rem;

    /* Prevent long text from forcing horizontal scroll. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.sidebar h3 {
    margin-top: 0;
    color: var(--panel-color, #ffffff);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.sidebar ul {
    padding-left: 0;
    list-style: none;
}

.sidebar li {
    margin-bottom: 0.5rem;
}

/* Links inside the sidebar inherit the panel colour by default. */
.sidebar li a {
    color: var(--panel-color, #8dbfe7);
    text-decoration: none;
}

.sidebar li a:hover {
    text-decoration: underline;
}

/* Avatar wrapper used to display user avatars with an optional admin overlay.
   The wrapper is positioned relative so the overlay can be absolutely positioned
   in the bottom-left corner. The avatar image fills the wrapper and is
   circular. The overlay scales proportionally to the avatar (40% of its
   dimensions) to work for both desktop (44px avatar) and mobile (36px avatar). */
.avatar-wrapper {
    position: relative;
    display: inline-block;
}
.avatar-wrapper .avatar {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.15);
}
.avatar-wrapper .admin-overlay {
    /* Position the admin badge overlay in the bottom‑left corner of the avatar wrapper.
       The overlay scales relative to the wrapper’s size to work on both desktop and
       mobile. Explicit width/height percentages ensure the SVG doesn’t render at
       its intrinsic dimensions (which can be very large). */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40%;
    height: 40%;
    /* Scale the SVG within its container rather than using its
       intrinsic dimensions. Without object‑fit, some browsers
       will display the full-size icon, causing it to overflow
       the avatar. */
    object-fit: contain;
    /* Prevent the overlay from intercepting clicks on the avatar. */
    pointer-events: none;
}

/* Category wrapper uses the panel colour so it matches the sidebar and
   navbar theme. */
.category {
    background-color: var(--panel-bg, #0b2544);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    color: var(--panel-color, #c4c4c4);

    /* Prevent long words from overflowing the category card. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.category .header {
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.category .header a {
    color: var(--panel-color, #8dbfe7);
    text-decoration: none;
    font-size: 1.2rem;
}

.category .header a:hover {
    text-decoration: underline;
}

.category-list .category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    /* Use the panel background for list items so they match the theme. */
    background-color: var(--panel-bg, #112e4d);
    margin-bottom: 0.4rem;
    border-radius: 4px;
    color: var(--panel-color, #c4c4c4);
    font-size: 0.9rem;

    /* Allow category list items to wrap instead of expanding horizontally. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.category-list .counts {
    text-align: right;
    font-size: 0.8rem;
    color: var(--panel-color, #868f98);
}

.thread-list .thread-item {
    background-color: var(--panel-bg, #112e4d);
    margin-bottom: 0.4rem;
    padding: 0.6rem;
    border-radius: 4px;
    color: var(--panel-color, #c4c4c4);
    font-size: 0.95rem;

    /* Prevent long thread titles or metadata from overflowing. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.thread-list .thread-item a {
    color: var(--panel-color, #8dbfe7);
    text-decoration: none;
    font-size: 1rem;
}

.thread-list .meta {
    font-size: 0.8rem;
    color: var(--panel-color, #868f98);
    margin-top: 0.2rem;
}

.post {
    background-color: var(--panel-bg, #112e4d);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    color: var(--panel-color, #c4c4c4);

    /* Break long lines within posts so that text wraps instead of
       overflowing the container. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

button, .btn {
    display: inline-block;
    background-color: #1065bf;
    color: #ffffff;
    padding: 0.4rem 0.7rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    margin-top: 0.5rem;
}

button:hover, .btn:hover {
    background-color: #0e5ca9;
}

.form-group {
    margin-bottom: 1rem;
}

/* Style generic form controls to honour the configured input colours. This
   targets all text-like inputs (text, password, email, number) as well
   as textarea and select elements. We deliberately exclude submit,
   button and reset types so button styling remains separate. */
textarea,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
    /*
     * Generic form controls adopt the body colours defined by the
     * active theme. The border uses the navbar background so the
     * fields harmonise with other UI elements. Fallback values
     * correspond to the default dark theme.
     */
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--navbar-bg, #2c4768);
    /* Form controls adopt dedicated input colours if defined. If no
       input colours are set via the theme, they fall back to the
       body colours to maintain contrast. */
    background-color: var(--input-bg, var(--body-bg, #0e2a52));
    color: var(--input-color, var(--body-color, #e5e5e5));
    font-size: 0.95rem;
}

/* Apply a focused border colour to all generic form controls. When focused,
   the border adopts the navbar text colour so it stands out. */
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus {
    outline: none;
    border-color: var(--navbar-color, #4b8bd9);
}

/* Styles for the user menu dropdown */
.user-menu {
    position: relative;
    cursor: pointer;
    display: inline-block;
    color: #ffffff;
}

.user-menu .user-name {
    font-weight: bold;
    padding: 0.2rem 0.5rem;
}

.user-menu .menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    /*
     * The dropdown inherits panel colours so it matches the sidebar and
     * cards. When no theme is active, the default dark shade is used.
     */
    background-color: var(--panel-bg, #112e4d);
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 100;
    min-width: 8rem;
}

/*
 * The logout dropdown is now controlled via JavaScript rather than CSS
 * hover. The menu will be toggled when the user clicks on their
 * username. Removing the hover rule prevents the menu from
 * displaying unintentionally when the cursor passes over the user
 * name.
 */

.user-menu .menu a {
    display: block;
    /* Links in the user menu use the panel colour which adapts to
       the active theme. */
    color: var(--panel-color, #8dbfe7);
    text-decoration: none;
    padding: 0.2rem 0;
}

.user-menu .menu a:hover {
    text-decoration: underline;
}

/* User profile page styles */
.profile-page {
    max-width: 980px;
    margin: 0 auto;
}
.profile-banner-wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px;
}
.profile-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-banner.placeholder {
    background: #ddd;
}
.profile-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    /* Place the header entirely below the banner. A positive margin separates it from the banner */
    margin-top: 16px;
    align-items: center;
}
.avatar-wrapper.lg {
    width: 96px;
    height: 96px;
    position: relative;
}
.avatar-wrapper.lg .avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(0, 0, 0, 0.1);
    display: block;
}
.avatar-wrapper.lg .admin-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 38%;
    height: 38%;
    object-fit: contain;
    pointer-events: none;
}

/* Online/offline status dots */
.status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.status-dot.online {
    background-color: #00c853; /* green */
}
.status-dot.offline {
    background-color: #757575; /* grey */
}

/* Status text on profile pages */
.profile-meta .status-text {
    margin-top: 4px;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Dashboard styles */
.dashboard-section {
    margin-bottom: 2rem;
}
.dashboard-section h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.dashboard-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.dashboard-user {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.dashboard-user .avatar-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
}
.dashboard-user .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.profile-meta {
    padding-bottom: 6px;
}
.profile-meta .display-name {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}
.profile-meta .username {
    opacity: 0.8;
    margin-top: 2px;
}
.profile-meta .joined {
    opacity: 0.7;
    margin-top: 6px;
}
.profile-meta .followers {
    margin-top: 6px;
    font-weight: 600;
}

/* Verified badge next to nickname */
.profile-meta .verified-icon {
    width: 20px;
    height: 20px;
    margin-left: 6px;
    vertical-align: middle;
    object-fit: contain;
    display: inline-block;
}
.profile-actions .btn.follow {
    padding: 10px 16px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    background: var(--navbar-bg, #f7c843);
    color: #000;
}
.profile-actions .btn.follow:hover {
    filter: brightness(0.95);
}

@media (max-width: 768px) {
    .profile-banner-wrap {
        height: 140px;
        border-radius: 0;
    }
    .profile-header {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'avatar meta'
            'actions actions';
        gap: 12px;
        /* On mobile, position the header below the banner with a small margin */
        margin-top: 12px;
    }
    .profile-actions {
        grid-area: actions;
    }
    .avatar-wrapper.lg {
        width: 84px;
        height: 84px;
    }
    .avatar-wrapper.lg .avatar {
        width: 84px;
        height: 84px;
    }
}

/*
 * Reaction button icons should not display at their intrinsic dimensions.
 * Without constraints, the SVG icons render at full pixel size (often
 * several hundred pixels), which leads to comically large buttons. The
 * following rules set a fixed width and height (relative to the current
 * font size) and add a small right margin so the count is separated
 * from the icon.
 */
.reaction-btn img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/*
 * Attachment preview images. When threads or replies include an image
 * attachment, display a scaled-down preview directly in the page. The
 * ``attachment-image`` class constrains the image to the width of its
 * container while preserving aspect ratio. A top margin ensures the
 * preview is visually separated from the attachment link above.
 */
.attachment-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 0.5rem;
}