/* ============================================
   KNUT - TEMA / STILIZACIJA
   ============================================
   Ovaj fajl sadrži SVU vizuelnu stilizaciju za Knut.
   Menjaj samo ovaj fajl da promeniš izgled sajta -
   nikad ne diraj Controllers/Models/Views logiku zbog stila.

   Sadržaj je organizovan u sekcije:
   1. Promenljive (boje, fontovi) - menjaj OVDE prvo
   2. Opšti izgled (body, navbar)
   3. Dugmad
   4. Kartice (za listu ljubimaca)
   5. Forme (Login/Register/Create/Edit)
   6. Vidžeti na feed-u (Novosti / Online korisnici)
   ============================================ */

/* ---------- 1. PROMENLJIVE - glavni "dial" za celokupan izgled ---------- */
:root {
    --knut-primary: #E8834A; /* topla narandžasta - glavna boja brenda */
    --knut-primary-dark: #C96A35;
    --knut-secondary: #4A7C6F; /* tamno zelena - kontrast, "priroda" osećaj */
    --knut-accent: #F4C95D; /* topla žuta - za akcente/isticanje */
    --knut-bg: #FDF8F3; /* topla, skoro bela pozadina (sadržaj u sredini) */
    --knut-side-bg: #EFE6F7; /* nežna lila - pozadina leve i desne kolone (vidžeti) */
    --knut-text: #3A3229; /* tamno braon umesto crne - mekši kontrast */
    --knut-card-shadow: rgba(58, 50, 41, 0.08);
    --knut-radius: 12px; /* zaobljenost uglova - menja "vibe" celog sajta */
    --knut-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --knut-online: #3FAE5B; /* zelena tačkica - korisnik je na chatu */
    --knut-offline: #C4443A; /* crvena tačkica - korisnik nije na chatu */
}

/* ---------- 2. OPŠTI IZGLED ---------- */
body {
    background-color: var(--knut-bg);
    color: var(--knut-text);
    font-family: var(--knut-font);
    /* Podnožje uvek na dnu: stranica je "kolona" visine ekrana, sadržaj se rasteže,
       a podnožje ostaje ispod svega (ne preko kolona sa šapicama). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    body > .container-fluid {
        flex: 1 0 auto;
    }

    body > .footer {
        flex-shrink: 0;
    }

.navbar {
    background-color: white !important;
    border-bottom: 2px solid var(--knut-primary);
    box-shadow: 0 2px 8px var(--knut-card-shadow);
}

.navbar-brand {
    color: var(--knut-primary) !important;
    font-weight: 700;
    font-size: 1.4rem;
}

.nav-link {
    color: var(--knut-text) !important;
    font-weight: 500;
}

    .nav-link:hover {
        color: var(--knut-primary) !important;
    }

/* Padajući meni za jezik u navigaciji - izgleda kao obični link
   ("Registracija"/"Prijava"), bez "kvadrata"/okvira oko teksta.
   NAPOMENA: ovo VIŠE NIJE pravi <select> element. Pravi <select> brauzer
   (Chrome/Edge na Windows-u) ume da iscrta sa sopstvenim "poljem"/okvirom
   koji se u nekim slučajevima ne može potpuno ukloniti ni sa
   appearance:none + border:none (poznato ograničenje brauzera). Zato je
   ovo sada obično dugme (<a>) koje otvara Bootstrap padajući meni
   (<ul class="dropdown-menu">) - potpuno pod našom kontrolom, pa je
   garantovano bez ikakvog "kvadrata" oko teksta. */
.knut-lang-dropdown {
    position: relative;
}

    .knut-lang-dropdown .dropdown-toggle::after {
        vertical-align: 0.15em;
        margin-left: 0.4rem;
    }

    .knut-lang-dropdown .dropdown-menu {
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
        padding: 0.35rem;
        min-width: 8rem;
    }

    .knut-lang-dropdown .dropdown-item {
        border-radius: 8px;
        padding: 0.4rem 0.75rem;
        font-size: 0.95rem;
        color: var(--knut-text);
        background-color: transparent;
        border: none;
    }

        .knut-lang-dropdown .dropdown-item:hover,
        .knut-lang-dropdown .dropdown-item:focus {
            background-color: var(--knut-bg);
            color: var(--knut-primary);
        }

        .knut-lang-dropdown .dropdown-item.active {
            background-color: var(--knut-primary);
            color: #fff;
        }

/* Dugme "Odjavi se" - isti pristup, izgleda kao obični link bez okvira. */
.knut-navbar-plain-btn {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--knut-text);
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin: 0;
}

    .knut-navbar-plain-btn:hover,
    .knut-navbar-plain-btn:focus,
    .knut-navbar-plain-btn:active,
    .knut-navbar-plain-btn:focus-visible {
        color: var(--knut-primary) !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

h1, h2, h3 {
    color: var(--knut-secondary);
    font-weight: 700;
}

a {
    color: var(--knut-primary);
}

    a:hover {
        color: var(--knut-primary-dark);
    }

/* ---------- 3. DUGMAD ---------- */
.btn-primary {
    background-color: var(--knut-primary);
    border-color: var(--knut-primary);
    border-radius: var(--knut-radius);
    font-weight: 600;
}

    .btn-primary:hover {
        background-color: var(--knut-primary-dark);
        border-color: var(--knut-primary-dark);
    }

.btn-secondary {
    background-color: var(--knut-secondary);
    border-color: var(--knut-secondary);
    border-radius: var(--knut-radius);
}

.btn-outline-secondary,
.btn-outline-primary {
    border-radius: var(--knut-radius);
    border-color: var(--knut-secondary);
    color: var(--knut-secondary);
}

    .btn-outline-secondary:hover,
    .btn-outline-primary:hover {
        background-color: var(--knut-secondary);
        border-color: var(--knut-secondary);
    }

.btn-danger {
    border-radius: var(--knut-radius);
}

/* ---------- 4. KARTICE (lista ljubimaca) ---------- */
.card {
    border: none;
    border-radius: var(--knut-radius);
    box-shadow: 0 4px 12px var(--knut-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px var(--knut-card-shadow);
    }

.card-img-top {
    height: 220px;
    object-fit: cover;
}

.card-title {
    color: var(--knut-secondary);
    font-weight: 700;
}

/* ---------- 5. FORME (Login/Register/Create/Edit) ---------- */
.form-control {
    border-radius: var(--knut-radius);
    border: 1px solid #ddd;
    padding: 0.6rem 0.9rem;
}

    .form-control:focus {
        border-color: var(--knut-primary);
        box-shadow: 0 0 0 0.2rem rgba(232, 131, 74, 0.2);
    }

.form-label {
    font-weight: 600;
    color: var(--knut-secondary);
}

form {
    background-color: white;
    padding: 2rem;
    border-radius: var(--knut-radius);
    box-shadow: 0 4px 12px var(--knut-card-shadow);
    max-width: 600px;
}

/* PRAVI UZROK "bele kutije" oko jezika i "Odjavi se": pravilo "form" iznad
   se odnosi na BAŠ SVAKI <form> na sajtu (nema svoju klasu), pa je
   slučajno pravilo malim formularima u navigaciji (izbor jezika, odjava)
   da izgledaju kao velika bela kartica. Ovde to poništavamo SAMO za
   formulare u navbar-u, tako da ostanu providni, bez ivice/senke/kartice,
   dok ostale forme (Login, Registracija, Dodaj objavu...) i dalje
   izgledaju kao bela kartica kao i do sada. */
.knut-lang-dropdown,
.knut-navbar-plain-form,
.knut-plain-form {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
}

/* ---------- 6. VIDŽETI NA FEED-U (Novosti / Online korisnici) ---------- */

/* Kartica-omotač oko svakog vidžeta u levoj/desnoj koloni.
   Vidžet se sada proteže po celoj visini kolone (koliko je visoka
   sredina sa ljubimcima), a prazan prostor ispod sadržaja je ukrašen
   veoma blagom "šapicom" u pozadini - vizuelni pečat brenda. */
.knut-widget {
    background-color: var(--knut-side-bg); /* nežna lila - leva i desna kolona */
    border-radius: var(--knut-radius);
    box-shadow: 0 4px 12px var(--knut-card-shadow);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    /* Blaga šara od šapica u pozadini vidžeta - čisto ukras */
    .knut-widget::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='68' rx='22' ry='17' fill='%233A3229'/%3E%3Ccircle cx='18' cy='46' r='10' fill='%233A3229'/%3E%3Ccircle cx='37' cy='25' r='11' fill='%233A3229'/%3E%3Ccircle cx='63' cy='25' r='11' fill='%233A3229'/%3E%3Ccircle cx='82' cy='46' r='10' fill='%233A3229'/%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 72px 72px;
        opacity: 0.05;
        pointer-events: none;
        z-index: 0;
    }

    /* Sav pravi sadržaj vidžeta mora biti iznad šare iz ::after */
    .knut-widget > * {
        position: relative;
        z-index: 1;
    }

.knut-widget-title {
    color: var(--knut-secondary);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ---- Logo / brend - mala šapica pored imena "Knut" ---- */
.knut-paw-icon {
    width: 1em;
    height: 1em;
    fill: var(--knut-primary);
    vertical-align: -0.12em;
    margin-right: 0.3rem;
}

.navbar-brand .knut-paw-icon {
    width: 1.2em;
    height: 1.2em;
}

.knut-brand-heading {
    display: flex;
    align-items: center;
}

/* ---- Levo: Predstojeći važni datumi ---- */
.knut-event-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

    .knut-event-list li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.35rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f0e9e2;
        font-size: 0.92rem;
    }

        .knut-event-list li:last-child {
            border-bottom: none;
        }

.knut-event-title {
    color: var(--knut-text);
}

.knut-event-date {
    margin-left: auto;
    background-color: var(--knut-accent);
    color: var(--knut-text);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- Levo: brze akcije (dodaj sliku/objavu/datum/sećanje/ljubimac dana i meseca) ---- */
.knut-quick-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .knut-quick-actions-list .btn {
        width: 100%;
        text-align: left;
        white-space: normal;
        line-height: 1.3;
    }

.knut-memory-btn {
    border-color: #6b6b6b;
    color: #4a4a4a;
}

    .knut-memory-btn:hover {
        background-color: #3A3229;
        border-color: #3A3229;
        color: white;
    }

/* ---- Sredina: Objave u feed-u ---- */
.knut-feed-post {
    background-color: white;
    border-radius: var(--knut-radius);
    box-shadow: 0 4px 12px var(--knut-card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.knut-feed-post-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.knut-feed-post-date {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 400;
    color: #9a8f83;
}

.knut-feed-post-content {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.knut-feed-post-media {
    margin-top: 0.6rem;
}

.knut-feed-post-media img,
.knut-feed-post-media video {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--knut-radius);
    display: block;
}

.knut-feed-post-memory {
    background-color: #F5F3F1;
    border-left: 4px solid #3A3229;
}

.knut-memory-badge {
    background-color: #3A3229;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.knut-deceased-badge {
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

/* ---- Desno: Lista korisnika sa online statusom ---- */
.knut-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .knut-user-list li {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }

/* Ceo red korisnika (slika + ime) je klikljiv - otvara chat sa tim korisnikom. */
.knut-user-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.25rem;
    margin: -0.25rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

    .knut-user-link:hover {
        background-color: var(--knut-bg);
        color: inherit;
    }

    .knut-user-link:hover .knut-user-name {
        color: var(--knut-primary);
    }

/* Kada korisnik nije ulogovan, red se prikazuje isto ali bez linka/hover efekta. */
.knut-user-link-disabled {
    cursor: default;
}

.knut-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
}

.knut-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--knut-card-shadow);
}

.knut-avatar-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--knut-bg);
    border: 2px solid #f0e9e2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Narandžasta šapica u praznom krugu umesto slike - centrirana, bez dodatnog razmaka */
.knut-avatar-placeholder .knut-paw-icon {
    width: 55%;
    height: 55%;
    margin: 0;
    vertical-align: 0;
}

.online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

    .online-dot.is-online {
        background-color: var(--knut-online);
    }

    .online-dot.is-offline {
        background-color: var(--knut-offline);
    }

.knut-user-name {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Na manjim ekranima (mobilni) kolone se ređaju jedna ispod druge, pa
   vidžet prirodno prati visinu svog sadržaja - nema potrebe za posebnim
   pravilima ovde. */

/* ---------- 7. IZBOR LJUBIMCA / LJUBIMAC DANA / LJUBIMAC MESECA ---------- */

/* Kartice na "Izaberi ljubimca" međukoraku */
.knut-choosepet-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.knut-choosepet-noimg {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background-color: var(--knut-bg);
}

/* "Ljubimac dana" - istaknuta velika kartica */
.knut-spotlight-card {
    background-color: white;
    border-radius: var(--knut-radius);
    box-shadow: 0 4px 12px var(--knut-card-shadow);
    overflow: hidden;
    max-width: 500px;
}

.knut-spotlight-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.knut-spotlight-body {
    padding: 1.25rem;
}

/* "Ljubimac meseca" - kartice sa glasovima */
.knut-vote-card {
    position: relative;
    border: none;
}

.knut-vote-leader-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background-color: var(--knut-accent);
    color: var(--knut-text);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    z-index: 1;
}

.knut-vote-count {
    font-weight: 600;
    color: var(--knut-secondary);
}