/* ============================================
   CHANGELOG PAGE - Modern Classic Design
   ============================================ */

/* Page Background */
.changelog-page-bg {
    background: var(--bg-dark);
    min-height: 100vh;
    padding: 0 0 30px 0;
    position: relative;
}

/* ============================================
   FANCY TITLE
   ============================================ */
.changelog-title {
    text-align: center;
    margin-bottom: 35px;
    padding: 20px 0;
}

.changelog-title .title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: var(--accent-grad);
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 8px 26px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.changelog-title .title-icon i {
    font-size: 1.8rem;
    color: #fff;
}

.changelog-title h1 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

/* --text-faint daje 3.62:1 - premalo za tekst koji se cita. Ovo je podnaslov
   stranice, ne ukras, pa ide na --text-muted (5.43:1). */
.changelog-title .subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ============================================
   CONTAINER
   ============================================ */
.changelog-container {
    max-width: 950px;
    margin: 0 auto;
}

/* ============================================
   LOADING INDICATORS
   ============================================ */
.changelog-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 1rem;
}

.changelog-loading i {
    margin-right: 8px;
    color: var(--red-accent);
}

.load-more-container {
    max-width: 950px;
    margin: 20px auto;
    text-align: center;
    padding: 20px;
}

.load-more-spinner {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.load-more-spinner i {
    margin-right: 8px;
    color: var(--red-accent);
}

.load-more-end {
    color: var(--good);
    font-size: 0.9rem;
}

.load-more-end i {
    margin-right: 8px;
}

/* Version box spacing for lazy load */
.changelog-version-box {
    margin-bottom: 25px;
}

/* ============================================
   VERSION BOX
   ============================================ */
.changelog-version-box {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Version Header */
.version-header {
    background: linear-gradient(180deg, var(--accent-soft), transparent);
    padding: 15px 25px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-brand);
}

.version-header .version-date {
    display: inline-block;
    background: var(--bg-inset-hi);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 3px 10px;
    border-radius: var(--r-xs);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: 10px;
}

/* ============================================
   LEGEND - Simple text items (top of version)
   ============================================ */
.changelog-legend {
    padding: 12px 25px;
    background: transparent;
    border-bottom: 1px solid var(--bg-primary);
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 0;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 400;
    background: none;
    border: none;
    padding: 0;
}

.legend-item .legend-symbol {
    font-weight: 600;
}

/* Dodato - Green */
.legend-item.add {
    color: var(--good);
}

/* Izmenjeno - Orange */
.legend-item.edit {
    color: var(--gold);
}

/* Izbačeno - Red */
.legend-item.fix {
    color: var(--bad);
}

/* ============================================
   TYPE SECTIONS (WITH LEFT BORDER)
   ============================================ */
.changelog-type-section {
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 3px solid transparent;
}

.changelog-type-section:last-child {
    margin-bottom: 0;
}

/* Left border colors */
.changelog-type-section.add {
    border-left-color: var(--good);
}

.changelog-type-section.edit {
    border-left-color: var(--gold);
}

.changelog-type-section.fix {
    border-left-color: var(--bad);
}

.type-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
    padding-left: 0;
}

.type-section-header .type-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Add section - Green */
.type-section-header.add {
    color: var(--good);
}

.type-section-header.add .type-symbol {
    background: rgba(78, 207, 138, 0.25);
    color: var(--good);
}

/* Edit section - Orange */
.type-section-header.edit {
    color: var(--gold);
}

.type-section-header.edit .type-symbol {
    background: rgba(228, 180, 41, 0.25);
    color: var(--gold);
}

/* Fix section - Red */
.type-section-header.fix {
    color: var(--bad);
}

.type-section-header.fix .type-symbol {
    background: rgba(var(--bad-rgb), 0.25);
    color: var(--bad);
}

/* Entry list - bullet points */
.type-section-entries {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.type-section-entries li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 4px;
}

.type-section-entries li:last-child {
    margin-bottom: 0;
}

.type-section-entries li a {
    color: var(--red-accent);
    text-decoration: none;
}

.type-section-entries li a:hover {
    text-decoration: underline;
}

/* ============================================
   CONTENT
   ============================================ */
.changelog-content {
    padding: 25px;
}

/* Date Group - Boxed Design */
.changelog-date-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bg-primary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.changelog-date-group:last-child {
    margin-bottom: 0;
}

.date-title {
    color: var(--text-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-title i {
    color: var(--red-accent);
    font-size: 1rem;
}

.date-changes {
    padding-left: 5px;
}

/* ============================================
   CHANGE ITEMS - Colored prefixes
   ============================================ */
.change-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.change-item:last-child {
    margin-bottom: 0;
}

/* Prefix badge */
.change-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Add - Green */
.change-item.add .change-prefix {
    background: rgba(78, 207, 138, 0.2);
    color: var(--good);
    border: 1px solid rgba(78, 207, 138, 0.4);
}

/* Edit - Yellow */
.change-item.edit .change-prefix {
    background: rgba(228, 180, 41, 0.2);
    color: var(--gold);
    border: 1px solid rgba(228, 180, 41, 0.4);
}

/* Fix/Remove - Red */
.change-item.fix .change-prefix {
    background: rgba(var(--bad-rgb), 0.2);
    color: var(--bad);
    border: 1px solid rgba(var(--bad-rgb), 0.4);
}

/* Info - Gray (continuation lines) */
.change-item.info .change-prefix {
    background: transparent;
    color: var(--border-light);
    border: none;
    font-size: 0.6rem;
}

.change-item.info {
    padding-left: 32px;
}

/* Section Headers */
.change-section {
    background: linear-gradient(135deg, rgba(var(--accent-dark-rgb), 0.2) 0%, rgba(var(--accent-dark-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--accent-dark-rgb), 0.3);
    border-radius: 6px;
    padding: 10px 15px;
    margin: 15px 0 10px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--red-accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.change-section i {
    font-size: 1rem;
    opacity: 0.9;
}

/* Forum theme section header */

.change-text {
    flex: 1;
}

.change-text a {
    color: var(--red-accent);
    text-decoration: none;
}

.change-text a:hover {
    text-decoration: underline;
}

/* ============================================
   IMAGE GALLERY
   ============================================ */
.changelog-images-gallery {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--bg-primary);
}

.gallery-title {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-title i {
    opacity: 0.8;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-dark);
}

.gallery-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
}

.gallery-item img:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.gallery-caption {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-sunken);
}

/* Forum theme gallery */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .changelog-page-bg {
        padding: 15px 0;
    }

    .changelog-content {
        padding: 15px;
    }

    .changelog-legend {
        padding: 12px 15px;
        gap: 10px;
    }

    .legend-item {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
}

/* ============================================
   FORUM (TEAL) THEME
   ============================================ */

/* ============================================
   IMAGE MODAL / LIGHTBOX
   ============================================ */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.image-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.image-modal-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.close-image-modal {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: var(--red-accent);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
}

.close-image-modal:hover {
    background: var(--bad);
    transform: scale(1.1);
}

/* Make gallery images clickable */
.gallery-item img {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Lightbox Navigation */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.lightbox-nav:hover {
    background: var(--red-accent);
    border-color: var(--border-hover);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: -70px;
}

.lightbox-next {
    right: -70px;
}

.lightbox-counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsive lightbox navigation */
@media (max-width: 768px) {
    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-nav {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.8);
    }

    .lightbox-counter {
        bottom: -35px;
        font-size: 0.8rem;
    }
}

/* ============================================
   INFO ENTRIES (INDENTED)
   ============================================ */
.info-entry {
    list-style: none !important;
    margin-left: 20px !important;
    padding-left: 15px !important;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.95em;
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.info-entry::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-faint);
}

/* Standalone info entry (rare) */
.info-entry-standalone {
    margin-left: 35px;
    padding-left: 15px;
    color: var(--text-secondary);
    font-style: italic;
    padding: 5px 0;
    position: relative;
}

.info-entry-standalone::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-faint);
}

/* ============================================
   ADMIN PANEL STYLES
   ============================================ */

/* Admin specific styles */
.admin-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px 15px 30px 15px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--red-accent);
}

/* Tabs */
.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--bg-secondary);
    padding-bottom: 15px;
}

.admin-tab {
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-muted);
    padding: 12px 25px;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-tab:hover {
    background: var(--bg-secondary);
    color: #fff;
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.admin-tab.active {
    background: var(--red-light);
    border-color: var(--red-light);
    color: #000;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.admin-tab.active i {
    color: #000;
}

/* NEW: Floating Back Button */
.btn-back-home {
    position: absolute;
    top: 20px;
    right: 40px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 15px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
}

.btn-back-home:hover {
    background: var(--bg-secondary);
    color: #fff;
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* Form Container */
.admin-form-container {
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.admin-form-header {
    background: var(--bg-secondary);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--bg-tertiary);
}

.admin-form-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.admin-form-body {
    padding: 30px;
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.form-row-2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {

    .form-row,
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.form-group label i {
    margin-right: 5px;
}

.form-group label.add {
    color: var(--good);
}

.form-group label.edit {
    color: var(--gold);
}

.form-group label.fix {
    color: var(--bad);
}

.form-control,
.form-select {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 14px 18px;
    border-radius: 0;
    font-size: 1rem;
    transition: all 0.2s;
}

.form-control:focus,
.form-select:focus {
    background: #000;
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(228, 180, 41, 0.1);
    outline: none;
}

.form-control::placeholder {
    color: var(--border-light);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
    line-height: 1.6;
    font-family: inherit;
}

/* Type selector */
.type-selector {
    display: flex;
    gap: 10px;
}

.type-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid var(--bg-tertiary);
    border-radius: 0;
    background: var(--bg-primary);
    color: var(--text-faint);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.type-btn:hover {
    border-color: var(--border-light);
}

.type-btn.active.add {
    border-color: var(--good);
    background: rgba(78, 207, 138, 0.15);
    color: var(--good);
}

.type-btn.active.edit {
    border-color: var(--gold);
    background: rgba(228, 180, 41, 0.15);
    color: var(--gold);
}

.type-btn.active.fix {
    border-color: var(--bad);
    background: rgba(var(--bad-rgb), 0.15);
    color: var(--bad);
}

/* Images section */
.images-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bg-primary);
}

.images-section label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 10px;
    display: block;
}

.file-input-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.file-input-btn {
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-light);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.file-input-btn:hover {
    border-color: var(--border-hover);
    color: var(--red-accent);
}

.file-input-btn i {
    margin-right: 8px;
}

.image-preview-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.image-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 0;
    overflow: hidden;
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview-item .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(var(--bad-rgb), 0.9);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Submit button */
.submit-section {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.btn-submit {
    background: linear-gradient(135deg, var(--red-light) 0%, var(--red-dark) 100%);
    border: none;
    color: #000;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(var(--accent-rgb), 0.3);
}

.btn-submit i {
    margin-right: 8px;
}

.btn-secondary {
    background: var(--border-color);
    border: none;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0;
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--border-light);
}

.btn-danger {
    background: var(--bad-dim);
    border: none;
    color: #fff;
    padding: 8px 15px;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-danger:hover {
    background: var(--bad-dim);
}

/* Stats cards */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

/* Ranije je ovde stajalo `background: var(--bg-dark)` uz okvir u boji
   `--bg-primary` - a to je bas boja stranice ispod, pa se kartica nije videla
   ni u jednoj temi. Sada je za stepenik svetlija od podloge i ima svoj okvir. */
.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 20px;
    text-align: center;
}

/* Kutija sa objasnjenjem sintakse. Boje su ranije bile u `style` atributu
   (#1a1a1a, #aaa, #666), pa je ostajala siva i kad se tema promeni. */
.syntax-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    background: var(--bg-sunken);
    padding: 8px;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--border-hover);
}

.syntax-hint span {
    font-weight: bold;
}

.syntax-add  { color: var(--good); }
.syntax-mod  { color: var(--gold); }
.syntax-del  { color: var(--bad); }
.syntax-info { color: var(--blue); }

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--red-light);
    line-height: 1;
}

.stat-label {
    color: var(--text-faint);
    font-size: 0.85rem;
    margin-top: 5px;
}

/* Versions list */
.versions-list-card {
    background: var(--bg-dark);
    border: 1px solid var(--bg-primary);
    border-radius: 0;
    overflow: hidden;
}

.versions-list-header {
    background: var(--bg-secondary);
    padding: 15px 20px;
    border-bottom: 1px solid var(--bg-primary);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.versions-list-header i {
    margin-right: 10px;
    color: var(--red-light);
}

.versions-list-body {
    max-height: 500px;
    overflow-y: auto;
}

.version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--bg-primary);
    cursor: pointer;
    transition: background 0.2s;
}

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

.version-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.version-item.selected {
    background: rgba(var(--accent-rgb), 0.1);
    border-left: 3px solid var(--red-light);
}

.version-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.version-badge {
    background: linear-gradient(135deg, var(--red-light), var(--red-dark));
    color: #000;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
}

.version-date {
    color: var(--text-faint);
    font-size: 0.9rem;
}

.version-latest {
    color: var(--gold);
    font-size: 0.85rem;
}

.version-latest i {
    margin-right: 5px;
}

.version-actions {
    display: flex;
    gap: 8px;
}

.version-actions button {
    padding: 6px 12px;
    border-radius: 0;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.btn-edit {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.btn-edit:hover {
    background: var(--border-color);
    color: #fff;
}

.btn-add-img {
    background: rgba(91, 159, 212, 0.2);
    color: var(--blue);
}

.btn-add-img:hover {
    background: rgba(91, 159, 212, 0.3);
}

/* Entries list */
.entries-list {
    margin-top: 20px;
}

.entries-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.entries-list-header h5 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
}

.entry-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--bg-primary);
    border-radius: 0;
    margin-bottom: 8px;
}

.entry-type-badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.entry-type-badge.add {
    background: rgba(78, 207, 138, 0.2);
    color: var(--good);
}

.entry-type-badge.edit {
    background: rgba(228, 180, 41, 0.2);
    color: var(--gold);
}

.entry-type-badge.fix {
    background: rgba(var(--bad-rgb), 0.2);
    color: var(--bad);
}

.entry-content {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.entry-actions {
    display: flex;
    gap: 8px;
}

.entry-actions button {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 0.2s;
}

.entry-actions button:hover {
    color: #fff;
}

/* Alert - dole desno, isto kao #nbNotifications na social club-u.

   column-reverse: prvi element u DOM-u ide na dno, pa novija poruka izlazi
   iznad starije i red raste nagore od donjeg ugla.

   Razmak drzi `gap`, zato je margin-bottom skinut sa samih poruka - inace bi
   ispod poslednje ostajao visak od 10px iznad donje ivice.

   z-index je podignut sa 1000 na 9999 jer .modal-overlay ima takodje 1000 i
   stoji kasnije u dokumentu, pa je poruka koja iskoci dok je modal otvoren
   zavrsavala ispod njega. Ostaje ispod pregleda slike preko celog ekrana,
   koji je na 10000.

   `bottom` nije 20px nego 100px zato sto u istom uglu stoji .btn-online-players
   (base.css): bottom 30px i visina 60px, dakle vrh mu je na 90px od dna. Sa
   100px poruka staje tacno iznad njega, sa 10px razmaka.

   Bez preloma za mobilni: dugme ima manju varijantu u @media (max-width: 768px)
   u base.css, ali ona nikad ne stupa na snagu jer nepokriveno pravilo dolazi
   POSLE tog media upita, sa istom specificnoscu. Dugme je zato 60px na 30px od
   dna na svakoj sirini, pa je i ovde jedna vrednost tacna svuda. Ako se onaj
   redosled u base.css ikad ispravi, ovde treba dodati bottom: 80px za <=768px. */
.alert-container {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: min(92vw, 380px);
}

.alert-success {
    background: rgba(78, 207, 138, 0.95);
    border: 1px solid rgba(78, 207, 138, 0.5);
    color: #fff;
    padding: 15px 20px;
    border-radius: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.alert-error {
    background: rgba(var(--bad-rgb), 0.95);
    border: 1px solid rgba(var(--bad-rgb), 0.5);
    color: #fff;
    padding: 15px 20px;
    border-radius: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: var(--bg-dark);
    border: 1px solid var(--bg-tertiary);
    border-radius: 0;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--bg-primary);
}

.modal-header h4 {
    margin: 0;
    color: #fff;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--bg-primary);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Forum theme adjustments */

/* Version List Items */
.version-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--bg-primary);
    cursor: pointer;
    transition: background 0.2s;
}

.version-list-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.version-list-item.latest {
    background: rgba(78, 207, 138, 0.1);
    border-left: 3px solid var(--good);
}

.version-number {
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
}

.latest-badge {
    background: var(--good);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 10px;
}

.version-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon.edit {
    background: rgba(228, 180, 41, 0.2);
    color: var(--gold);
}

.btn-icon.edit:hover {
    background: var(--gold);
    color: #000;
}

.btn-icon.add-img {
    background: rgba(91, 159, 212, 0.2);
    color: var(--blue);
}

.btn-icon.add-img:hover {
    background: var(--blue);
    color: #fff;
}

.btn-icon.delete {
    background: rgba(var(--bad-rgb), 0.2);
    color: var(--bad);
}

.btn-icon.delete:hover {
    background: var(--bad);
    color: #fff;
}

/* Edit Modal Styles */
.entries-edit-list {
    max-height: 300px;
    overflow-y: auto;
}

.entry-edit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 6px;
    margin-bottom: 8px;
    border-left: 3px solid var(--text-faint);
}

.entry-edit-item.add {
    border-left-color: var(--good);
}

.entry-edit-item.edit {
    border-left-color: var(--gold);
}

.entry-edit-item.fix {
    border-left-color: var(--bad);
}

.entry-type-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.entry-content-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
}

.entry-content-input:focus {
    border-color: var(--red-light);
    outline: none;
}

.images-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.image-edit-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.image-edit-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.image-edit-item .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background: rgba(var(--bad-rgb), 0.9);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.entry-date {
    color: var(--text-faint);
    font-size: 0.8rem;
    white-space: nowrap;
}