/* TriSpark Sales CRM — application shell and page layouts */

/* ---------- Offline bar ---------- */
.ts-offline-bar { position: sticky; top: 0; z-index: 1500; background: #7C2D12; color: #fff; font-size: .82rem; font-weight: 600; text-align: center; padding: calc(6px + var(--safe-top)) 12px 6px; display: flex; gap: 8px; justify-content: center; align-items: center; }
.ts-offline-bar[hidden] { display: none; }

/* ---------- Shell ---------- */
.ts-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.ts-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--ts-navy); color: #CBD5E1; display: flex; flex-direction: column; z-index: 1100; transition: width .18s ease, transform .22s ease; padding-top: var(--safe-top); padding-left: var(--safe-left); overflow: hidden; }
.ts-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; height: var(--topbar-h); }
.ts-sidebar__logo { border-radius: 10px; flex: none; }
.ts-sidebar__brandtext { display: flex; flex-direction: column; line-height: 1.1; color: #fff; min-width: 0; }
.ts-sidebar__brandtext strong { font-size: 1.02rem; letter-spacing: -.01em; }
.ts-sidebar__brandtext span { font-size: .72rem; color: var(--ts-yellow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ts-sidebar__close { display: none; margin-left: auto; color: #fff; }
.ts-sidebar__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ts-nav { flex: 1; overflow-y: auto; padding: 8px 10px; display: grid; gap: 2px; align-content: start; }
.ts-nav__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #CBD5E1; text-decoration: none; font-weight: 600; font-size: .875rem; transition: background-color .12s, color .12s; border: 0; background: transparent; width: 100%; text-align: left; min-height: 42px; white-space: nowrap; cursor: pointer; }
.ts-nav__item > i { font-size: 1.1rem; width: 22px; text-align: center; flex: none; }
.ts-nav__item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ts-nav__item.is-active { background: rgba(255, 255, 255, .12); color: #fff; }
.ts-nav__item.is-active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ts-yellow); }
.ts-nav__item.is-active > i { color: var(--ts-yellow); }
.ts-nav__badge { margin-left: auto; background: var(--ts-yellow); color: var(--ts-navy); font-size: .68rem; font-weight: 800; border-radius: 99px; padding: 1px 7px; }
.ts-sidebar__foot { padding: 8px 10px calc(10px + var(--safe-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 2px; }

.ts-main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); transition: margin-left .18s ease; display: flex; flex-direction: column; }
html.ts-collapsed .ts-sidebar { width: var(--sidebar-w-collapsed); }
html.ts-collapsed .ts-main { margin-left: var(--sidebar-w-collapsed); }
html.ts-collapsed .ts-nav__label, html.ts-collapsed .ts-sidebar__brandtext, html.ts-collapsed .ts-nav__badge { display: none; }
html.ts-collapsed .ts-nav__item { justify-content: center; padding: 10px 0; }
html.ts-collapsed .ts-sidebar__brand { justify-content: center; padding-inline: 0; }
html.ts-collapsed .ts-nav__item.is-active::before { left: -10px; }
html.ts-collapsed #sidebarToggle i { transform: scaleX(-1); }

.ts-backdrop { position: fixed; inset: 0; background: rgba(10, 37, 64, .55); z-index: 1090; }
.ts-backdrop[hidden] { display: none; }

/* ---------- Topbar ---------- */
.ts-topbar { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: var(--sp-3); height: calc(var(--topbar-h) + var(--safe-top)); padding: var(--safe-top) calc(var(--sp-6) + var(--safe-right)) 0 calc(var(--sp-6) + var(--safe-left)); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--ts-border); }
.ts-topbar__menu { display: none; margin-left: -8px; }
.ts-topbar__title { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.ts-topbar__h1 { font-size: 1.15rem; font-weight: 800; margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-topbar__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.ts-conn { display: inline-flex; gap: 6px; align-items: center; background: #FEE2E2; color: #991B1B; padding: 3px 10px; border-radius: 99px; font-size: .75rem; font-weight: 700; }
.ts-conn[hidden] { display: none; }

.ts-search { position: relative; width: clamp(200px, 26vw, 380px); flex: none; }
.ts-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ts-muted); pointer-events: none; }
.ts-search__input { width: 100%; min-height: 38px; border: 1px solid var(--ts-border); background: #F1F5F9; border-radius: 99px; padding: 6px 14px 6px 36px; font-size: .85rem; transition: background-color .12s, border-color .12s; }
.ts-search__input:focus { background: #fff; }
.ts-search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--ts-border); border-radius: var(--r-md); box-shadow: var(--shadow-3); z-index: 1200; max-height: 60vh; overflow-y: auto; padding: 6px; min-width: 300px; }
.ts-search__results[hidden] { display: none; }
.ts-search__item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ts-text); }
.ts-search__item:hover, .ts-search__item[aria-selected="true"] { background: var(--ts-hover); color: var(--ts-text); }
.ts-search__none { padding: 14px; font-size: .84rem; color: var(--ts-muted); text-align: center; }
.ts-mobile-search { padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--ts-border); position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 990; }
.ts-mobile-search[hidden] { display: none; }

.ts-bell__dot { position: absolute; top: 4px; right: 3px; background: var(--ts-error); color: #fff; font-size: .62rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 99px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; }
.ts-bell__dot[hidden], .ts-nav__badge[hidden] { display: none; }
.ts-user { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px 6px; border-radius: 99px; cursor: pointer; text-align: left; }
.ts-user:hover { background: var(--ts-hover); }
.ts-user__meta { display: flex; flex-direction: column; line-height: 1.15; }
.ts-user__meta strong { font-size: .8rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-user__meta small { font-size: .68rem; color: var(--ts-muted); }
.ts-menu { min-width: 220px; }

/* ---------- Content ---------- */
.ts-content { padding: var(--sp-6) calc(var(--sp-6) + var(--safe-right)) var(--sp-10) calc(var(--sp-6) + var(--safe-left)); width: 100%; max-width: 1680px; margin: 0 auto; flex: 1; min-width: 0; }
.ts-content:focus { outline: none; }
.ts-page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ts-page-head__sub { color: var(--ts-muted); font-size: .875rem; }
.ts-page-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.ts-page-head__actions .form-select, .ts-page-head__actions .form-control { width: auto; }

/* ---------- Bottom nav (mobile) ---------- */
.ts-bottomnav { display: none; }

/* ---------- Login ---------- */
.ts-login-body { background: #fff; }
.ts-login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.ts-login__brand { background: linear-gradient(160deg, #0A2540 0%, #0D2F52 60%, #123A66 100%); color: #fff; display: flex; align-items: center; padding: 48px; position: relative; overflow: hidden; }
.ts-login__brandinner { max-width: 480px; margin: 0 auto; position: relative; z-index: 1; }
.ts-login__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.ts-login__logo img { border-radius: 12px; }
.ts-login__logo div { display: flex; flex-direction: column; line-height: 1.1; }
.ts-login__logo strong { font-size: 1.4rem; }
.ts-login__logo span { color: var(--ts-yellow); font-weight: 700; letter-spacing: .12em; font-size: .75rem; text-transform: uppercase; }
.ts-login__brand h2 { color: #fff; font-size: 2.3rem; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.ts-login__brand p { color: #B6C4D6; font-size: 1rem; line-height: 1.6; }
.ts-login__points { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 12px; color: #E2E8F0; font-weight: 500; }
.ts-login__points i { color: var(--ts-yellow); margin-right: 8px; }
.ts-login__art { width: 100%; max-width: 360px; margin-top: 12px; opacity: .95; }
.ts-login__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; background: #fff; }
.ts-login__card { width: 100%; max-width: 400px; }
.ts-login__card h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 4px; }
.ts-login__mobilebrand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; align-self: flex-start; }
.ts-login__mobilebrand img { border-radius: 10px; }
.ts-login__mobilebrand div { display: flex; flex-direction: column; line-height: 1.15; }
.ts-login__mobilebrand span { font-size: .75rem; color: var(--ts-muted); }
.ts-pw .form-control { border-right: 0; }
.ts-pw .btn { border-color: var(--ts-border-strong); border-left: 0; background: #fff; }
.ts-pw .form-control:focus + .btn { border-color: var(--ts-navy); }

/* ---------- Lead detail ---------- */
.ts-leadhead { padding: var(--sp-4) var(--sp-5); }
.ts-leadhead__top { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ts-leadhead__id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 280px; }
.ts-leadhead__name { font-size: 1.3rem; font-weight: 800; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.ts-leadhead__sub { color: var(--ts-muted); font-size: .84rem; display: flex; gap: 12px; flex-wrap: wrap; }
.ts-leadhead__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ts-leadhead__btns { display: flex; gap: 8px; margin-left: auto; }

/* ---------- Forms ---------- */
.ts-form { max-width: 920px; }
.ts-formsec .ts-card__body { padding-top: var(--sp-2); }
.ts-formbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.ts-dup { border: 1px solid #FDE68A; background: #FFFBEB; border-radius: var(--r-md); padding: 14px 16px; margin-bottom: var(--sp-3); }
.ts-dup h3 { font-size: .9rem; font-weight: 700; color: #92400E; margin: 0 0 8px; }
.ts-dup__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #FDE68A; font-size: .84rem; flex-wrap: wrap; }
.ts-dup__item:first-of-type { border-top: 0; }

/* ---------- Team ---------- */
.ts-drawer-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* ---------- Misc ---------- */
.ts-callout { background: #F0F9FF; border: 1px solid #BAE6FD; color: #075985; border-radius: var(--r-md); padding: 12px 16px; font-size: .85rem; }
.ts-install-steps { margin: 0; padding-left: 1.2rem; color: var(--ts-text); font-size: .88rem; display: grid; gap: 6px; }
.offcanvas { --bs-offcanvas-width: min(480px, 100vw); }

.ts-mobile-search .ts-search { display: block; width: 100%; }
.ts-mobile-search .ts-search__results { min-width: 0; }