/* SmartSales shared navigation (ui-shell). Every class is prefixed ss- so module CSS can't collide. */
html:has(body.ss-on) { font-size: clamp(13px, 0.55vw + 6.5px, 19px); }
:root { --accent: #1d4ed8; }
body.ss-on { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; }

.ss-top { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: .25rem; height: 3.4rem; padding: 0 1rem; background: var(--accent); color: #fff; box-sizing: border-box; font-family: Inter, system-ui, sans-serif; }
.ss-top * { box-sizing: border-box; }
.ss-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; margin-right: 1rem; white-space: nowrap; }
.ss-logo { width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: #fff; color: var(--accent); display: grid; place-items: center; font-weight: 800; overflow: hidden; flex: none; }
.ss-logo img { width: 100%; height: 100%; object-fit: cover; }
.ss-nav, .ss-right { display: flex; align-items: center; gap: .2rem; }
.ss-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ss-nav::-webkit-scrollbar { display: none; }
.ss-item { position: relative; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .4rem .8rem; border-radius: .6rem; color: rgba(255, 255, 255, .85); text-decoration: none; font: 500 .85rem/1.2 Inter, system-ui, sans-serif; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.ss-item .ss-badge { position: static; margin: 0; }
.ss-item:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ss-item.ss-on { background: #fff; color: var(--accent); font-weight: 600; }
.ss-item:focus-visible, .ss-tab:focus-visible, .ss-avatar:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 1px; }
.ss-call { background: #10b981; color: #fff; font-weight: 600; }
.ss-call:hover { background: #059669; }
.ss-badge { position: absolute; top: .15rem; right: .3rem; min-width: 1.1rem; padding: 0 .3rem; border-radius: .6rem; background: #ef4444; color: #fff; font: 600 .7rem/1.1rem Inter, sans-serif; font-style: normal; text-align: center; }
.ss-user { position: relative; margin-left: .4rem; }
.ss-avatar { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--accent); font: 700 1rem Inter, sans-serif; cursor: pointer; }
.ss-menu { display: none; position: absolute; right: 0; top: calc(100% + .5rem); min-width: 14rem; background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: .8rem; box-shadow: 0 .8rem 2rem rgba(15, 30, 58, .18); padding: .35rem; }
.ss-user.ss-open .ss-menu { display: block; }
.ss-menu-head { padding: .55rem .7rem; font-weight: 600; border-bottom: 1px solid #e5e7eb; margin-bottom: .25rem; }
.ss-menu button { display: block; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; background: none; border-radius: .5rem; font: 400 .9rem Inter, sans-serif; color: #1f2937; cursor: pointer; }
.ss-menu button:hover { background: #f3f4f6; }

.ss-sub { position: sticky; top: var(--ss-bar, 3.4rem); z-index: 999; height: var(--ss-sub, 3rem); box-sizing: border-box; display: flex; gap: .2rem; padding: 0 1rem; background: #fff; border-bottom: 1px solid #e5e7eb; overflow-x: auto; font-family: Inter, system-ui, sans-serif; }
.ss-tab { position: relative; display: flex; align-items: center; gap: .1rem; padding: 0 .9rem; border: 0; border-bottom: 2.5px solid transparent; background: none; color: #4b5563; font: 500 .9rem Inter, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ss-tab:hover { color: #111827; }
.ss-tab.ss-on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ss-tab .ss-badge { position: static; margin-left: .3rem; }

@media (max-width: 1280px) { .ss-name { display: none; } .ss-item { padding: .4rem .55rem; } }
@media (max-width: 720px) {
  .ss-top { padding: 0 .4rem; }
  .ss-item { padding: .3rem .4rem; font-size: .65rem; }
}

/* Bar height for module layouts: calc(100vh - var(--ss-bar)). 0 when the page sits inside the shared frame. */
:root { --ss-bar: 3.4rem; --ss-sub: 3rem; } /* --ss-sub: height of the module tabs row */
body.ss-framed { --ss-bar: 0px; }

/* Shared frame (CRM "/"): the bar stays, modules swap below it, the dialer floats and never reloads */
body.ss-host { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: #f5f7fb; }
#ssView { flex: 1; width: 100%; border: 0; display: block; background: #fff; }
.ss-dialer { display: none; position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1100; width: 22rem; height: min(40rem, calc(100vh - 6rem)); flex-direction: column; background: #fff; border: 1px solid #d6dbe4; border-radius: 1rem; box-shadow: 0 1.2rem 3rem rgba(15, 30, 58, .28); overflow: hidden; font-family: Inter, system-ui, sans-serif; }
.ss-dialer.ss-open { display: flex; }
.ss-dialer-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; background: #10b981; color: #fff; font-size: 1rem; }
.ss-dialer-head button { border: 0; border-radius: .5rem; padding: .35rem .7rem; background: rgba(255, 255, 255, .2); color: #fff; font: 600 .85rem Inter, sans-serif; cursor: pointer; }
.ss-dialer-head button:hover { background: rgba(255, 255, 255, .32); }
.ss-dialer iframe { flex: 1; width: 100%; border: 0; }

/* 🔔 Việc cần làm */
.ss-notify { position: relative; }
.ss-npanel { display: none; position: absolute; right: 0; top: calc(100% + .5rem); min-width: 20rem; background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: .8rem; box-shadow: 0 .8rem 2rem rgba(15, 30, 58, .18); padding: .35rem; z-index: 1001; font-family: Inter, system-ui, sans-serif; }
.ss-notify.ss-open .ss-npanel { display: block; }
.ss-nrow { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .5rem; color: #1f2937; text-decoration: none; font-size: .92rem; }
.ss-nrow:hover { background: #eff6ff; }
.ss-nrow span { flex: 1; }
.ss-nrow i { font-style: normal; color: #9ca3af; }
.ss-nempty { padding: .8rem .7rem; color: #047857; font-size: .9rem; }