/* ===========================================================
   ReliefMap
   Navbar Stylesheet (Premium Role-Based Navbar)
   Author : Vigneshan S
   Year : 2026

   Modern, professional, Apple UI / Microsoft Fluent inspired
   top navigation bar. 75px height, sticky, white glassmorphism,
   soft shadow, border-bottom. Role-aware accents.
=========================================================== */

/* ===========================================================
   TOPBAR CONTAINER
=========================================================== */

.topbar {
    position: fixed;
    top: 0;
    left: 270px;
    right: 0;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 24px;
    background: #ffffff;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode overrides for the light navbar surface */
body.dark .topbar {
    background: rgba(14, 42, 53, .88);
    border-bottom: 1px solid var(--border);
}

/* ===========================================================
   LEFT SIDE — HAMBURGER + DASHBOARD TITLE + WELCOME
=========================================================== */

.nb-left,
.nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    flex-shrink: 0;
}

/* Hamburger menu button (toggles sidebar on mobile) */
.nb-menu-btn,
.nav-left .nb-menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(127, 127, 127, .06);
    color: var(--text);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

.nb-menu-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

/* Title block: icon + (title + welcome) */
.nb-title-block,
.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nb-title-icon,
.nav-logo {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
    /* Brand accent: ReliefMap green */
    background: linear-gradient(135deg, #1ABFAC, #0ea99c);
    object-fit: cover;
}

.nb-title-text,
.nav-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.nb-page-title,
.nav-main {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: #0b1e2b;
    white-space: nowrap;
}

.nb-welcome,
.nav-welcome {
    font-size: .82rem;
    color: #334155;
    white-space: nowrap;
}

.nb-welcome-name,
.nav-welcome strong,
.nav-welcome .nb-welcome-name {
    font-weight: 700;
    color: #0d9488;
    font-size: .82rem;
}

/* ===========================================================
   ROLE ACCENT COLORS (title icon + title text)
=========================================================== */

/* Citizen — Blue */
.role-citizen .nb-title-icon { background: linear-gradient(135deg, #2563eb, #60a5fa); }
/* NGO — Green */
.role-ngo .nb-title-icon { background: linear-gradient(135deg, #16a34a, #4ade80); }
/* Volunteer — Orange */
.role-volunteer .nb-title-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
/* Administrator — Purple */
.role-admin .nb-title-icon { background: linear-gradient(135deg, #7c3aed, #a78bfa); }

.role-citizen .nb-welcome-name { color: #2563eb; }
.role-ngo .nb-welcome-name { color: #16a34a; }
.role-volunteer .nb-welcome-name { color: #f59e0b; }
.role-admin .nb-welcome-name { color: #7c3aed; }

/* ===========================================================
   CENTER — SEARCH BAR
=========================================================== */

.nb-search-wrap,
.nav-search {
    flex: 1;
    max-width: 480px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .06), rgba(56, 189, 248, .06));
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 0 18px;
    transition: all .25s ease;
    margin: 0 auto;
}

.nb-search-wrap:hover,
.nav-search:hover {
    border-color: var(--border);
    background: rgba(127, 127, 127, .1);
}

.nb-search-wrap:focus-within,
.nav-search:focus-within {
    background: var(--card);
    border-color: var(--primary);
    /* use brand color for focus ring */
    box-shadow: 0 0 0 4px rgba(26, 191, 172, .14);
}

.nb-search-icon,
.nav-search i {
    color: var(--text-light);
    font-size: .95rem;
    flex-shrink: 0;
}

.nb-search-input,
.nav-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: .9rem;
    color: var(--text);
}

.nav-search input::placeholder {
    color: var(--text-light);
    opacity: .75;
}

.nav-search {
    position: relative;
}

.nav-search .search-icon {
    color: var(--text-light);
    font-size: 1rem;
    flex-shrink: 0;
}

.search-list {
    position: absolute;
    z-index: 1100;
    left: 0;
    right: 0;
    margin-top: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    list-style: none;
    padding: 8px 0;
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.search-list.open {
    display: block;
}

.search-option,
.search-empty {
    padding: 12px 18px;
    cursor: pointer;
    transition: background .2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-option:hover,
.search-option.active {
    background: rgba(26, 191, 172, .08);
}

.suggestion-label {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
}

.suggestion-meta,
.search-empty {
    font-size: .78rem;
    color: var(--text-light);
}

.search-list {
    position: absolute;
    z-index: 1100;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
    list-style: none;
    padding: 8px 0;
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.search-list.open {
    display: block;
}

.search-option,
.search-empty {
    padding: 10px 18px;
    cursor: pointer;
    transition: background .2s ease;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.search-option:hover,
.search-option.active {
    background: rgba(26, 191, 172, .08);
}

.suggestion-label {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
}

.suggestion-meta,
.search-empty {
    font-size: .78rem;
    color: var(--text-light);
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.nav-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--text);
    font-size: .85rem;
}

.nav-status-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.nav-status-sep {
    color: var(--border);
}

.nav-widget {
    min-width: 180px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 23, 42, .04);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    transition: all .25s ease;
}

.nav-widget:hover {
    background: rgba(15, 23, 42, .08);
}

.nav-widget i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 191, 172, .14);
    color: #0d9488;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.widget-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-subtitle {
    font-size: .78rem;
    color: var(--text-light);
}

/* ===========================================================
   RIGHT SIDE
=========================================================== */

.nb-right,
.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* ===========================================================
   RIGHT SIDE
=========================================================== */

.nb-notif-wrap {
    position: relative;
    display: flex;
}

.nb-notif-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--text);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, .08);
    cursor: pointer;
    transition: all .25s ease;
}

.nb-notif-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

.nb-notif-btn i {
    font-size: 1.1rem;
}

.nb-notif-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.nb-notif-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transition: all .28s ease;
    z-index: 1200;
    overflow: hidden;
}

.nb-notif-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nb-nf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.nb-nf-unread {
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(13, 148, 136, .12);
    padding: 3px 10px;
    border-radius: 20px;
}

.nb-nf-body {
    max-height: 320px;
    overflow-y: auto;
}

.nb-nf-item {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: background .2s;
    border-left: 3px solid transparent;
    align-items: flex-start;
}

.nb-nf-item:hover {
    background: rgba(15, 23, 42, .05);
}

.nb-nf-item.unread {
    background: rgba(37, 99, 235, .05);
    border-left-color: var(--primary);
}

.nb-nf-item > i {
    margin-top: 3px;
    font-size: 1rem;
    min-width: 20px;
    color: var(--primary);
}

.nb-nf-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nb-nf-item strong {
    font-size: .85rem;
    color: var(--text);
}

.nb-nf-item div span {
    font-size: .76rem;
    color: var(--text-light);
    line-height: 1.35;
}

.nb-nf-actions {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.nb-nf-actions button {
    flex: 1;
    padding: 10px 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: .82rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s ease;
}

.nb-nf-actions button:hover {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

.nb-online {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    background: rgba(34, 197, 94, .1);
    padding: 8px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

.nb-online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
    flex-shrink: 0;
}

.nb-online-dot.on {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: nbPulse 2s infinite;
}

.nb-online-dot.off {
    background: #ef4444;
}

.nb-online.off {
    background: rgba(239, 68, 68, .12);
}

@keyframes nbPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.nb-online-label {
    letter-spacing: .02em;
    text-transform: uppercase;
}

.nb-profile-area {
    position: relative;
    display: flex;
}

.nb-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(15, 23, 42, .04);
    border: 1px solid rgba(15, 23, 42, .08);
    cursor: pointer;
    transition: all .2s ease;
}

.nb-profile:hover {
    background: rgba(15, 23, 42, .08);
}

.nb-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(26, 191, 172, .25);
    flex-shrink: 0;
}

.nb-profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.nb-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.nb-role-badge {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.badge-citizen { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.badge-ngo { background: rgba(26, 191, 172, .14); color: #0ea99c; }
.badge-volunteer { background: rgba(245, 158, 11, .16); color: #d97706; }
.badge-admin { background: rgba(124, 58, 237, .14); color: #7c3aed; }

.nb-caret {
    font-size: .8rem;
    color: var(--text-light);
    transition: transform .25s;
}

.nb-profile:hover .nb-caret {
    transform: rotate(180deg);
}

.nb-profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 250px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transition: all .28s ease;
    z-index: 1200;
    overflow: hidden;
}

.nb-profile-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nb-pd-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--gradient);
    color: #fff;
}

.nb-pd-head img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .6);
}

.nb-pd-head strong {
    font-size: .95rem;
    display: block;
}

.nb-pd-head .nb-role-badge {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.nb-profile-dropdown ul {
    padding: 8px;
    list-style: none;
    margin: 0;
}

.nb-profile-dropdown li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 11px;
    cursor: pointer;
    font-weight: 500;
    font-size: .88rem;
    color: var(--text);
    transition: all .2s;
}

.nb-profile-dropdown li:hover {
    background: rgba(13, 148, 136, .1);
    color: var(--primary);
    transform: translateX(3px);
}

.nb-profile-dropdown li i {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.nb-profile-dropdown li.nb-danger {
    color: var(--danger);
}

.nb-profile-dropdown li.nb-danger i {
    color: var(--danger);
}

.nb-profile-dropdown li.nb-danger:hover {
    background: rgba(239, 68, 68, .1);
}

.nb-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 10px;
    padding: 0;
    cursor: default;
}

/* ===========================================================
   ONLINE / OFFLINE INDICATOR
=========================================================== */

.nb-online {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(34, 197, 94, .1);
    padding: 7px 13px;
    border-radius: 20px;
    white-space: nowrap;
}

.nb-online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
}

.nb-online-dot.on {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: nbPulse 2s infinite;
}

.nb-online-dot.off {
    background: #ef4444;
}

.nb-online.off {
    background: rgba(239, 68, 68, .12);
}

@keyframes nbPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.nb-online-label {
    font-variant-numeric: tabular-nums;
}

/* ===========================================================
   NOTIFICATION BUTTON
=========================================================== */

.nb-notif-wrap {
    position: relative;
    display: flex;
}

.nb-notif-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(127, 127, 127, .08);
    color: var(--text);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .25s ease;
}

.nb-notif-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

.nb-notif-btn i {
    font-size: 1.1rem;
    animation: nbBell 4s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes nbBell {
    0%, 88%, 100% { transform: rotate(0); }
    90% { transform: rotate(12deg); }
    92% { transform: rotate(-11deg); }
    94% { transform: rotate(7deg); }
    96% { transform: rotate(-5deg); }
    98% { transform: rotate(2deg); }
}

.nb-notif-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
}

/* ===========================================================
   NOTIFICATION DROPDOWN
=========================================================== */

.nb-notif-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transition: all .28s ease;
    z-index: 1200;
    overflow: hidden;
}

.nb-notif-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nb-nf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.nb-nf-unread {
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(13, 148, 136, .12);
    padding: 3px 10px;
    border-radius: 20px;
}

.nb-nf-body {
    max-height: 300px;
    overflow-y: auto;
}

.nb-nf-item {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: background .2s;
    border-left: 3px solid transparent;
    align-items: flex-start;
}

.nb-nf-item:hover {
    background: rgba(127, 127, 127, .06);
}

.nb-nf-item.unread {
    background: rgba(37, 99, 235, .05);
    border-left-color: var(--primary);
}

.nb-nf-item > i {
    margin-top: 3px;
    font-size: 1rem;
    flex-shrink: 0;
}

.nb-nf-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nb-nf-item strong {
    font-size: .85rem;
    color: var(--text);
}

.nb-nf-item div span {
    font-size: .76rem;
    color: var(--text-light);
    line-height: 1.35;
}

.nb-nf-actions {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.nb-nf-actions button {
    flex: 1;
    padding: 9px 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: .8rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s ease;
}

.nb-nf-actions button:hover {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

/* ===========================================================
   PROFILE CHIP + DROPDOWN
=========================================================== */

.nb-profile-area {
    position: relative;
    display: flex;
}

.nb-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 14px;
    cursor: pointer;
    transition: background .2s;
}

.nb-profile:hover {
    background: rgba(127, 127, 127, .08);
}

.nb-avatar.nb-avatar-icon,
.nb-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(13, 148, 136, .4);
    flex-shrink: 0;
}

.nb-avatar.nb-avatar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient);
    color: #fff;
    font-size: 1.05rem;
    overflow: hidden;
}

.nb-avatar.nb-avatar-icon i {
    font-size: 1.1rem;
}

/* Profile dropdown header icon */
.nb-pd-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    overflow: hidden;
}

.nb-pd-avatar i {
    font-size: 1.3rem;
}

/* Also handle the .nb-pd-head img fallback (keep alignment) */
.nb-pd-head img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .6);
}

.nb-profile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.nb-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nb-caret {
    font-size: .7rem;
    color: var(--text-light);
    transition: transform .25s;
}

.nb-profile:hover .nb-caret {
    transform: rotate(180deg);
}

/* Role badges */
.nb-role-badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.badge-citizen { background: rgba(37, 99, 235, .14); color: #1d4ed8; }
.badge-ngo { background: rgba(22, 163, 74, .14); color: #15803d; }
.badge-volunteer { background: rgba(245, 158, 11, .16); color: #d97706; }
.badge-admin { background: rgba(124, 58, 237, .14); color: #6d28d9; }

/* Profile dropdown */
.nb-profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 250px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transition: all .28s ease;
    z-index: 1200;
    overflow: hidden;
}

.nb-profile-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nb-pd-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--gradient);
    color: #fff;
}

.nb-pd-head img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .6);
}

.nb-pd-head strong {
    font-size: .95rem;
    display: block;
}

.nb-pd-head .nb-role-badge {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.nb-profile-dropdown ul {
    padding: 8px;
    list-style: none;
    margin: 0;
}

.nb-profile-dropdown li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 11px;
    cursor: pointer;
    font-weight: 500;
    font-size: .88rem;
    color: var(--text);
    transition: all .2s;
}

.nb-profile-dropdown li:hover {
    background: rgba(13, 148, 136, .1);
    color: var(--primary);
    transform: translateX(3px);
}

.nb-profile-dropdown li i {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.nb-profile-dropdown li.nb-danger {
    color: var(--danger);
}

.nb-profile-dropdown li.nb-danger i {
    color: var(--danger);
}

.nb-profile-dropdown li.nb-danger:hover {
    background: rgba(239, 68, 68, .1);
}

.nb-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 10px;
    padding: 0;
    cursor: default;
}

/* Login button (signed out) */
.nb-login-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 22px;
    background: var(--gradient);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(13, 148, 136, .25);
    transition: all .25s ease;
}

.nb-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(13, 148, 136, .35);
}

/* ===========================================================
   REPORT EMERGENCY CTA (relief-themed)
=========================================================== */

.nb-emergency-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(220, 38, 38, .3);
    transition: all .25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.nb-emergency-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(220, 38, 38, .42);
}

.nb-emergency-btn i {
    font-size: 1rem;
}

/* Emergency pulse ring on the icon */
.nb-emergency-btn i {
    position: relative;
}

/* ===========================================================
   RESPONSIVE (emergency CTA)
=========================================================== */

@media (max-width: 992px) {
    .nb-emergency-btn {
        padding: 10px 14px;
        font-size: .8rem;
    }
    .nb-emergency-btn span {
        display: none;
    }
    .nb-emergency-btn {
        width: 42px;
        height: 42px;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
    }
}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media (max-width: 1400px) {
    .nav-left {
        min-width: auto;
    }
    .nav-search {
        width: 300px;
    }
}

@media (max-width: 1200px) {
    .topbar {
        left: 0;
        right: 0;
        padding: 0 18px;
    }
    .nav-left {
        min-width: auto;
        flex: 1 1 100%;
    }
    .nav-search {
        width: 100%;
    }
    .nav-center {
        display: none;
    }
}

@media (max-width: 992px) {
    .nav-search {
        width: 100%;
        min-width: 0;
    }
    .nav-right {
        gap: 10px;
    }
    .nb-profile-info {
        display: none;
    }
    .nb-notif-dropdown {
        position: fixed;
        top: 76px;
        right: 12px;
        width: 320px;
    }
}

@media (max-width: 768px) {
    .topbar {
        padding: 12px 14px;
        align-items: flex-start;
        gap: 12px;
    }
    .nav-right {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .nb-profile {
        width: 100%;
        justify-content: space-between;
    }
    .nb-profile-dropdown {
        right: 8px;
        width: calc(100vw - 16px);
    }
}

@media (max-width: 576px) {
    .topbar {
        padding: 12px 12px;
        gap: 10px;
    }
    .nb-notif-dropdown,
    .nb-profile-dropdown {
        width: calc(100vw - 16px);
        right: 8px;
    }
}