/* 1. VARIJABLE */
:root {
    --bg-dark: #121212;
    --sidebar-bg: #1e1e1e;
    --card-bg: #252525;
    --accent: #00adb5;
    --accent-hover: #008f95;
    --text-main: #eeeeee;
    --text-muted: #888888;
    --border: #333333;
    --danger: #ff4d4d;
    --success: #46d160;
    --group-gold: #ffde7d;
}

/* 2. OSNOVNI LAYOUT (Dashboard standard) */
body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    height: 100vh;
    display: flex; 
    flex-direction: row; /* DASHBOARD: Sidebar levo, Main desno */
    overflow: hidden;
}

/* 3. DASHBOARD SIDEBAR */
.sidebar {
    width: 300px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header { padding: 20px; background: var(--accent); color: white; font-weight: bold; }
.user-section { padding: 15px 20px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.1); }
.scroll-area { flex: 1; overflow-y: auto; padding: 15px; }

/* 4. DASHBOARD TABLA (Vesti) */
.main-chat {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    box-sizing: border-box;
}

.news-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #3d3d3d;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* --- OKVIR ZA NOVU OBJAVU (ADMIN BOX) --- */
.admin-post-box {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 15px;
    border: 2px solid var(--accent); /* Tirkizni ram koji si tražio */
    margin-bottom: 35px;
    box-shadow: 0 8px 25px rgba(0, 173, 181, 0.15); /* Blagi tirkizni sjaj */
    transition: transform 0.3s ease;
}

.admin-post-box:hover {
    transform: translateY(-2px); /* Lagani efekat lebdenja na hover */
    box-shadow: 0 10px 30px rgba(0, 173, 181, 0.25);
}

.admin-post-box h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 14px;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Poseban stil za polja unutar admin boxa */
.admin-post-box .modern-input {
    background: rgba(0, 0, 0, 0.3); /* Malo tamnija polja */
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.admin-post-box .modern-input:focus {
    border-color: var(--accent);
    outline: none;
}

/* Dugme "Objavi na zid" */
.admin-post-box .btn-send {
    width: 100%; /* Da dugme u admin boxu bude preko cele širine */
    margin-top: 5px;
    background: var(--accent);
    letter-spacing: 1px;
}


/* 5. FORME I INPUTI */
.modern-input {
    width: 100%;
    padding: 12px;
    background: #111;
    border: 1px solid var(--border);
    color: white;
    border-radius: 6px;
    margin-bottom: 12px;
    box-sizing: border-box;
    font-family: inherit;
}

.btn-send {
    min-width: 140px;
    height: 48px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

/* 6. GROUP CHAT SPECIJALNI LAYOUT (Ovo ne utiče na Dashboard) */
.group-container {
    position: fixed; /* Pokriva ceo ekran */
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column; /* GRUPA: Header gore, ostalo dole */
    background: var(--bg-dark);
    z-index: 100;
}

.chat-header {
    height: 65px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    flex-shrink: 0;
}

.content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 7. LEVI SIDEBAR ČLANOVA (GURANJE) */
/* 7. LEVI SIDEBAR ČLANOVA (GURANJE) */
.members-sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: margin-left 0.3s ease-in-out, transform 0.3s ease-in-out;
    flex-shrink: 0;
    z-index: 1000;
}

/* Skriveno stanje */
.members-sidebar.collapsed {
    margin-left: -280px;
}

/* --- MOBILNA OPTIMIZACIJA ZA GRUPNI SIDEBAR --- */
@media screen and (max-width: 800px) {
    .members-sidebar {
        position: absolute; /* Na telefonu klizi PREKO poruka */
        left: 0;
        top: 65px; /* Počinje ispod headera da ne prekrije dugme */
        height: calc(100% - 65px);
        width: 280px;
        box-shadow: 10px 0 30px rgba(0,0,0,0.8);
        margin-left: 0 !important; /* Resetujemo marginu */
        transform: translateX(-100%); /* Sakrij ga levo van ekrana */
    }

    /* Kada na mobilnom skloniš .collapsed, on uleti na ekran */
    .members-sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    /* Obrisano ono što je blokiralo ekran i zatamnjivalo sliku */
    .group-container .chat-area {
        filter: none !important;
        pointer-events: auto !important;
    }
}

/* 8. ČET PROSTOR U GRUPI */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    min-width: 0;
}

#chat-box { flex: 1; padding: 20px; overflow-y: auto; }

.input-container {
    padding: 20px;
    background: var(--sidebar-bg);
    border-top: 1px solid var(--border);
}

.input-container form { display: flex; width: 100%; gap: 15px; }
.input-container input { flex: 1; padding: 14px 20px; background: #111; border: 1px solid var(--border); color: white; border-radius: 25px; outline: none; }

/* 9. ZLATNO DUGME */
.toggle-sidebar-btn {
    background: transparent;
    color: var(--group-gold);
    border: 2px solid var(--group-gold);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.toggle-sidebar-btn:hover {
    background: var(--group-gold);
    color: black;
    box-shadow: 0 0 10px rgba(255, 222, 125, 0.3);
}

/* 10. OSTALO */
.section-title { font-size: 11px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; margin: 20px 0 10px; letter-spacing: 1px; }
.item-row { padding: 10px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--text-main); margin-bottom: 2px; }
.item-row:hover { background: rgba(255,255,255,0.05); }
.badge { background: var(--accent); color: white; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.btn-logout { padding: 20px; color: var(--danger); text-decoration: none; text-align: center; border-top: 1px solid var(--border); font-weight: bold; }

.message-wrapper { display: flex; width: 100%; margin-bottom: 10px; }
.message { padding: 10px 16px; border-radius: 18px; max-width: 65%; font-size: 14px; word-wrap: break-word; }
.my-msg { justify-content: flex-end; }
.my-msg .message { background: var(--accent); color: white; border-bottom-right-radius: 4px; }
.friend-msg { justify-content: flex-start; }
.friend-msg .message { background: var(--card-bg); color: var(--text-main); border-bottom-left-radius: 4px; border: 1px solid var(--border); }

/* Hitna objava - Crveni ram */
.news-card.urgent {
    border: 2px solid var(--danger) !important;
    box-shadow: 0 5px 20px rgba(255, 77, 77, 0.2);
}

/* Dugmad za Edit/Delete unutar kartice */
.news-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
}

.btn-mini {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-edit { background: #555; color: white; }
.btn-delete { background: var(--danger); color: white; }

/* Lajkovi i Komentari Sekcija */
.news-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.interaction-bar { display: flex; gap: 20px; align-items: center; }

.btn-like {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; transition: 0.2s; display: flex; align-items: center; gap: 5px;
}
.btn-like.active { color: var(--accent); font-weight: bold; }

.comments-section {
    background: rgba(0,0,0,0.2); padding: 15px; border-radius: 10px;
}

.comment-item {
    font-size: 13px; margin-bottom: 10px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.comment-user { color: var(--accent); font-weight: bold; margin-right: 8px; }
.comment-text { color: #ccc; }

.comment-input-group { display: flex; gap: 10px; margin-top: 10px; }
.comment-input-group input { 
    flex: 1; background: #111; border: 1px solid var(--border); 
    color: white; padding: 8px 15px; border-radius: 20px; font-size: 12px;
}

.btn-discard {
    background: #444;
    color: white;
    padding: 0 20px;
    height: 48px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: 0.2s;
    min-width: 100px;
}

.btn-discard:hover {
    background: #555;
    transform: scale(1.02);
}

/* --- POPRAVKA ZA INSTAGRAM I MOBILNE --- */
@media (max-width: 800px) {
    body {
        flex-direction: column !important; /* Slaj delemente vertikalno */
        overflow-y: auto !important; /* Dozvoli skrolovanje cele strane */
    }

    .sidebar {
        width: 100% !important; /* Sidebar zauzima punu širinu telefona */
        height: auto !important;
        max-height: 450px; /* Da ne zauzme ceo ekran odmah */
        border-right: none !important;
        border-bottom: 1px solid var(--border);
    }

    .main-chat {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        overflow-y: visible !important;
    }
    
    .admin-post-box {
        padding: 15px !important;
    }
}
.sidebar-footer-actions {
    padding: 10px 0;
    display: flex;
    flex-direction: column; /* Dugme ispod dugmeta za bolju preglednost na uskom sidebaru */
    gap: 8px;
}

/* Ako ipak želiš jedno pored drugog, promeni column u row i dodaj flex: 1 na gumbe */
.btn-action-group {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.2s;
    display: block;
}

.btn-leave { border-color: #ff9f43; color: #ff9f43; }
.btn-leave:hover { background: #ff9f43; color: white; }

.btn-delete-group { border-color: var(--danger); color: var(--danger); }
.btn-delete-group:hover { background: var(--danger); color: white; }


.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.2s;
}

.btn-danger-outline:hover {
    background: var(--danger);
    color: white;
}

/* --- MOBILNA OPTIMIZACIJA ZA PRIVATNI ČET --- */
/* --- FINALNA MOBILNA OPTIMIZACIJA ZA GRUPNI ČET --- */
@media screen and (max-width: 800px) {
    /* Glavni kontejner dozvoljava elementima da budu jedan preko drugog */
    .group-container {
        position: relative;
    }

    /* Sidebar postaje "fioka" koja uleće sa leve strane */
    .members-sidebar {
        position: fixed; /* Fiksirano za ekran telefona */
        left: 0;
        top: 65px; /* Ispod headera */
        bottom: 0;
        width: 280px;
        z-index: 999; /* Iznad poruka, ali ispod headera ako zatreba */
        background: var(--sidebar-bg);
        box-shadow: 15px 0 30px rgba(0,0,0,0.7);
        margin-left: 0 !important; /* Resetujemo desktop marginu */
        transform: translateX(-105%); /* Početno skroz izbačen levo */
        transition: transform 0.3s ease-in-out;
        opacity: 1 !important; /* Osiguravamo vidljivost */
    }

    /* Kada se SKLONI klasa .collapsed, meni uleće na ekran */
    .members-sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    /* Čet prostor na mobilnom uvek zauzima 100% (ne gura se) */
    .chat-area {
        margin-left: 0 !important;
        width: 100vw !important;
        pointer-events: auto !important; /* OVO REŠAVA BLOKIRANO PISANJE */
        filter: none !important; /* Brišemo mrak */
    }

    /* Popravka za input na dnu da ga ništa ne prekriva */
    .input-container {
        z-index: 1001; /* Iznad sidebara da bi uvek mogao da klikneš na njega */
        position: relative;
    }
}