/* =====================================================
   Top bar (same layout for customer, agent and admin)
   Only the accent colour changes with the role.
   ===================================================== */
.topbar { --tb-accent: #4f46e5; --tb-accent-2: #7c3aed; --tb-soft: #eef2ff;
    position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.topbar.tb-agent { --tb-accent: #047857; --tb-accent-2: #10b981; --tb-soft: #d1fae5; }
.topbar.tb-admin { --tb-accent: #1e293b; --tb-accent-2: #475569; --tb-soft: #e2e8f0; }

.tb-inner { max-width: 1320px; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 18px; }

/* logo */
.tb-brand { display: flex; align-items: center; gap: 11px; color: var(--text); flex-shrink: 0; }
.tb-logo { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--tb-accent), var(--tb-accent-2)); box-shadow: 0 4px 12px rgba(15, 23, 42, .18); }
.tb-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.tb-brand-text b { font-size: 1.03rem; letter-spacing: -.01em; }
.tb-brand-text small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tb-accent); }

/* menu */
.tb-nav { display: flex; gap: 4px; flex: 1; margin-left: 10px; min-width: 0; }
.tb-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; color: var(--muted);
    font-weight: 600; font-size: .92rem; white-space: nowrap; transition: background .15s, color .15s; }
.tb-link:hover { background: var(--bg); color: var(--text); }
.tb-link.on { background: var(--tb-soft); color: var(--tb-accent); }

/* right side */
.tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tb-nav:empty + .tb-actions { margin-left: auto; }
.tb-cta { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: #fff;
    background: linear-gradient(135deg, var(--tb-accent), var(--tb-accent-2)); box-shadow: 0 4px 12px rgba(79, 70, 229, .28); transition: transform .15s, box-shadow .15s; }
.tb-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79, 70, 229, .36); }

.topbar .bell { color: var(--muted); }
.topbar .bell:hover, .topbar .bell[aria-expanded="true"] { background: var(--tb-soft); color: var(--tb-accent); }

/* user menu */
.usermenu { position: relative; margin-left: 4px; }
.um-btn { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: #fff;
    font: inherit; cursor: pointer; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.um-btn:hover, .um-btn[aria-expanded="true"] { border-color: var(--tb-accent); box-shadow: 0 0 0 3px var(--tb-soft); }
.um-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, var(--tb-accent), var(--tb-accent-2)); color: #fff; font-weight: 700; font-size: .9rem; }
.um-avatar.lg { width: 44px; height: 44px; font-size: 1.1rem; }
.um-name { display: flex; flex-direction: column; text-align: left; line-height: 1.15; max-width: 150px; }
.um-name b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-name small { font-size: .72rem; color: var(--muted); }
.um-chev { color: var(--muted); display: inline-flex; transition: transform .15s; }
.um-btn[aria-expanded="true"] .um-chev { transform: rotate(180deg); }

.um-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18); padding: 8px; z-index: 60; }
.um-panel[hidden] { display: none; }
.um-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px; }
.um-head div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.um-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-head small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-role { display: inline-block; margin: 0 10px 8px; padding: 2px 10px; border-radius: 999px; background: var(--tb-soft); color: var(--tb-accent); font-size: .72rem; font-weight: 700; }
.um-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; color: var(--text); font-weight: 600; font-size: .9rem; }
.um-item svg { color: var(--muted); }
.um-item:hover { background: var(--bg); }
.um-item.danger { border-top: 1px solid var(--border); margin-top: 6px; border-radius: 0 0 9px 9px; padding-top: 12px; color: #b91c1c; }
.um-item.danger svg { color: #b91c1c; }
.um-item.danger:hover { background: #fef2f2; }

/* fit-to-screen pages: the bar does not stick, it is simply the first row */
body.fitpage .topbar { position: relative; flex-shrink: 0; }
body.customer .brand, .topbar .brand { color: inherit; }

/* ---------- tablets & phones ---------- */
@media (max-width: 900px) {
    .um-name, .um-chev { display: none; }
    .um-btn { padding: 3px; border-radius: 50%; }
    .tb-link span { display: none; }                 /* icons only */
    .tb-link { padding: 9px 11px; }
}
@media (max-width: 700px) {
    .tb-inner { height: auto; padding: 10px 14px; gap: 8px 10px; flex-wrap: wrap; }
    .tb-brand-text small { display: none; }
    .tb-brand { flex: 1; }
    .tb-actions { gap: 4px; margin-left: 0; }
    .tb-cta { padding: 8px 12px; }
    .tb-cta span { display: none; }                  /* + icon only */
    .tb-nav { order: 3; width: 100%; flex: none; margin: 0; overflow-x: auto; padding-bottom: 2px; }
    .tb-nav:not(.many) { display: none; }            /* a single link: the logo already goes there */
    .tb-nav.many .tb-link { flex: 1; justify-content: center; }
    .tb-nav.many .tb-link span { display: inline; font-size: .86rem; }
    .um-panel { position: fixed; left: 10px; right: 10px; top: 60px; width: auto; }
}