/* ═══════════════════════════════
       CSS ВАРИЈАБЛИ — Тил тема
    ═══════════════════════════════ */
    :root {
        --teal:       #1aa8a8;
        --teal-l:     #2ec4c4;
        --teal-pale:  #e8f9f9;
        --teal-soft:  #d0f2f2;
        --teal-mid:   #a0dede;
        --bg:         #f0fafa;
        --white:      #ffffff;
        --border:     rgba(26,168,168,0.15);
        --border-h:   rgba(26,168,168,0.35);
        --text:       #133a3a;
        --text-mid:   #2e7070;
        --text-dim:   #7ab8b8;
        --shadow:     0 2px 14px rgba(26,168,168,0.10);
        --shadow-h:   0 6px 28px rgba(26,168,168,0.18);
        --radius:     14px;
        --nav-h:      64px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'DM Sans', sans-serif;
        background: var(--bg);
        color: var(--text);
        padding-top: calc(var(--nav-h) + 16px);
        min-height: 100vh;
    }

    /* ═══════════════════════════════
       NAVBAR
    ═══════════════════════════════ */
    .nm-navbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: var(--nav-h);
        background: var(--white);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        z-index: 1000;
        display: flex;
        align-items: center;
        padding: 0 20px;
        gap: 6px;
    }

    /* Лого */
    .nm-logo {
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 1.2rem;
        color: var(--teal);
        text-decoration: none;
        margin-right: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    .nm-logo img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
    }
    .nm-logo:hover { color: var(--teal-l); text-decoration: none; }

    /* Навигациски линкови */
    .nm-nav-links {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    .nm-nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-dim);
        text-decoration: none;
        transition: all 0.2s;
        white-space: nowrap;
        position: relative;
    }
    .nm-nav-link:hover {
        color: var(--teal);
        background: var(--teal-pale);
        text-decoration: none;
    }
    .nm-nav-link.active {
        color: var(--teal);
        background: var(--teal-pale);
        font-weight: 600;
    }
    .nm-nav-link i { font-size: 0.95rem; }

    /* Значка за непрочитани */
    .nm-badge {
        position: absolute;
        top: 4px; right: 6px;
        background: #ef4444;
        color: white;
        font-size: 0.6rem;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid var(--white);
    }

    /* Десна страна — нотификации + аватар */
    .nm-right {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: 8px;
    }

    /* ═══════════════════════════════
       ЅВОНЧЕ ЗА НОТИФИКАЦИИ
    ═══════════════════════════════ */
    .nm-icon-btn {
        width: 38px; height: 38px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        color: var(--text-dim);
        text-decoration: none;
        transition: all 0.2s;
        position: relative;
        font-size: 1rem;
    }
    .nm-icon-btn:hover,
    .nm-icon-btn.active {
        background: var(--teal-pale);
        color: var(--teal);
        text-decoration: none;
    }

    /* Аватар */
    .nm-avatar {
        width: 38px; height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--teal), var(--teal-l));
        display: flex; align-items: center; justify-content: center;
        font-size: 0.78rem; font-weight: 700;
        color: white;
        cursor: pointer;
        text-decoration: none;
        border: 2px solid var(--teal-pale);
        transition: border-color 0.2s;
        overflow: hidden;
        flex-shrink: 0;
    }
    .nm-avatar img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
    .nm-avatar:hover { border-color: var(--teal); text-decoration: none; }

    /* Dropdown мени */
    .nm-dropdown {
        position: relative;
    }
    .nm-dropdown-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-h);
        min-width: 190px;
        padding: 6px;
        display: none;
        z-index: 2000;
    }
    .nm-dropdown:hover .nm-dropdown-menu,
    .nm-dropdown.open .nm-dropdown-menu {
        display: block;
    }
    .nm-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 9px;
        font-size: 0.84rem;
        color: var(--text-mid);
        text-decoration: none;
        transition: all 0.2s;
    }
    .nm-dropdown-item:hover {
        background: var(--teal-pale);
        color: var(--teal);
        text-decoration: none;
    }
    .nm-dropdown-item i { width: 16px; text-align: center; font-size: 0.85rem; }
    .nm-dropdown-divider {
        border: none;
        border-top: 1px solid var(--teal-pale);
        margin: 4px 0;
    }
    .nm-dropdown-item.logout { color: #ef4444; }
    .nm-dropdown-item.logout:hover { background: #fef2f2; color: #dc2626; }

    /* Корисничко ime во dropdown */
    .nm-dropdown-user {
        padding: 10px 12px 8px;
        border-bottom: 1px solid var(--teal-pale);
        margin-bottom: 4px;
    }
    .nm-dropdown-user .uname {
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--text);
    }
    .nm-dropdown-user .urole {
        font-size: 0.72rem;
        color: var(--text-dim);
        margin-top: 1px;
    }

    /* ═══════════════════════════════
       МОБИЛНА НАВИГАЦИЈА (bottom bar)
    ═══════════════════════════════ */
    .nm-mobile-bar {
        display: none;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 58px;
        background: var(--white);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 14px rgba(26,168,168,0.10);
        z-index: 1000;
        padding: 0 10px;
        justify-content: space-around;
        align-items: center;
    }
    .nm-mobile-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 10px;
        border-radius: 10px;
        color: var(--text-dim);
        text-decoration: none;
        font-size: 0.62rem;
        font-weight: 500;
        transition: all 0.2s;
        position: relative;
    }
    .nm-mobile-link i { font-size: 1.1rem; }
    .nm-mobile-link.active, .nm-mobile-link:hover {
        color: var(--teal);
        text-decoration: none;
    }
    .nm-mobile-link .nm-badge {
        top: 2px; right: 6px;
    }

    /* ═══════════════════════════════
       RESPONSIVE
    ═══════════════════════════════ */
    @media (max-width: 768px) {
        .nm-nav-links { display: none; }
        .nm-mobile-bar { display: flex; }
        body { padding-bottom: 68px; }
        .nm-navbar { padding: 0 14px; }
        .nm-logo span { display: none; }
    }

    @media (max-width: 480px) {
        .nm-right .nm-icon-btn { display: none; }
    }

    /* ═══════════════════════════════
       ГЛОБАЛНИ СТИЛОВИ
    ═══════════════════════════════ */
    .nm-container {
        max-width: 980px;
        margin: 0 auto;
        padding: 0 16px;
    }

    .nm-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .nm-card:hover {
        border-color: var(--border-h);
        box-shadow: var(--shadow-h);
    }

    .nm-btn {
        background: linear-gradient(135deg, var(--teal), var(--teal-l));
        border: none;
        border-radius: 30px;
        padding: 9px 22px;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        color: white;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(26,168,168,0.25);
        transition: opacity 0.2s, box-shadow 0.2s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .nm-btn:hover {
        opacity: 0.88;
        box-shadow: 0 5px 16px rgba(26,168,168,0.35);
        color: white;
        text-decoration: none;
    }

    .nm-tag {
        display: inline-block;
        background: var(--teal-pale);
        border: 1px solid var(--border);
        color: var(--teal);
        font-size: 0.72rem;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-decoration: none;
        transition: background 0.2s;
    }
    .nm-tag:hover {
        background: var(--teal-soft);
        color: var(--teal);
        text-decoration: none;
    }