/* TriSpark Sales CRM — reusable components */

/* Cards */
.ts-card { background: var(--ts-card); border: 1px solid var(--ts-border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); min-width: 0; }
.ts-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.ts-card__head h2 { font-size: .95rem; font-weight: 700; margin: 0; }
.ts-card__body { padding: var(--sp-2) var(--sp-5) var(--sp-5); }
.ts-card__foot { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--ts-border); flex-wrap: wrap; }
.ts-card__meta { font-size: .78rem; color: var(--ts-muted); }
.ts-card__link { font-size: .8125rem; font-weight: 600; color: var(--ts-navy); text-decoration: none; white-space: nowrap; }
.ts-card__link:hover { text-decoration: underline; }
.ts-card--attention { border-color: #FECACA; background: linear-gradient(#fff, #fff) padding-box; }
.ts-card--attention .ts-card__head { border-bottom: 1px solid #FEE2E2; background: #FFFBFB; border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* Badges */
.ts-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; background: #F1F5F9; color: #475569; }
.ts-badge--new { background: #DBEAFE; color: #1E40AF; }
.ts-badge--contact_attempted { background: #FEF3C7; color: #92400E; }
.ts-badge--connected { background: #E0F2FE; color: #075985; }
.ts-badge--qualified { background: #EDE9FE; color: #5B21B6; }
.ts-badge--meeting_demo { background: #FCE7F3; color: #9D174D; }
.ts-badge--proposal_sent { background: #FFEDD5; color: #9A3412; }
.ts-badge--negotiation { background: #CCFBF1; color: #115E59; }
.ts-badge--won { background: #DCFCE7; color: #166534; }
.ts-badge--lost { background: #FEE2E2; color: #991B1B; }
.ts-badge--nurture { background: #F1F5F9; color: #475569; }
.ts-badge--success { background: var(--ts-success-bg); color: var(--ts-success-fg); }
.ts-badge--warning { background: var(--ts-warning-bg); color: var(--ts-warning-fg); }
.ts-badge--danger { background: var(--ts-error-bg); color: var(--ts-error-fg); }
.ts-badge--info { background: var(--ts-info-bg); color: var(--ts-info-fg); }
.ts-badge--muted { background: #F1F5F9; color: #475569; }

.ts-prio { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.ts-prio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; }
.ts-prio--medium::before { background: var(--ts-info); }
.ts-prio--high::before { background: var(--ts-warning); }
.ts-prio--urgent::before { background: var(--ts-error); box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
.ts-prio--urgent { color: var(--ts-error-fg); }

/* Avatars */
.ts-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ts-navy); color: var(--ts-yellow); font-weight: 700; font-size: .78rem; flex: none; letter-spacing: .02em; }
.ts-avatar--sm { width: 24px; height: 24px; font-size: .62rem; }
.ts-avatar--lg { width: 52px; height: 52px; font-size: 1.05rem; }
.ts-avatar--tone1 { background: #1D4ED8; color: #fff; } .ts-avatar--tone2 { background: #0F766E; color: #fff; } .ts-avatar--tone3 { background: #9333EA; color: #fff; }
.ts-avatar--tone4 { background: #C2410C; color: #fff; } .ts-avatar--tone5 { background: #BE185D; color: #fff; } .ts-avatar--tone0 { background: var(--ts-navy); color: var(--ts-yellow); }
.ts-owner { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; }

/* KPI cards */
.ts-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ts-kpi { position: relative; background: #fff; border: 1px solid var(--ts-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-4) var(--sp-3); box-shadow: var(--shadow-1); display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s, transform .15s; min-height: 108px; }
a.ts-kpi:hover { box-shadow: var(--shadow-2); border-color: var(--ts-border-strong); color: inherit; transform: translateY(-1px); }
.ts-kpi__label { font-size: .78rem; font-weight: 600; color: var(--ts-muted); display: block; padding-right: 36px; }
.ts-kpi__value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; color: var(--ts-navy); font-variant-numeric: tabular-nums; }
.ts-kpi__icon { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #F1F5F9; color: var(--ts-navy); font-size: 1rem; }
.ts-kpi--alert .ts-kpi__icon { background: var(--ts-error-bg); color: var(--ts-error); }
.ts-kpi--alert .ts-kpi__value { color: var(--ts-error-fg); }
.ts-kpi--good .ts-kpi__icon { background: var(--ts-success-bg); color: var(--ts-success-fg); }
.ts-kpi__foot { font-size: .75rem; color: var(--ts-muted); margin-top: 2px; min-height: 18px; }
.ts-delta { font-weight: 700; }
.ts-delta--up { color: var(--ts-success-fg); } .ts-delta--down { color: var(--ts-error-fg); } .ts-delta--flat { color: var(--ts-muted); }

/* Tables */
.ts-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ts-table { --bs-table-bg: transparent; font-size: .8125rem; margin: 0; }
.ts-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ts-muted); font-weight: 700; background: #F8FAFC; border-bottom: 1px solid var(--ts-border); white-space: nowrap; padding: 10px 12px; user-select: none; }
.ts-table td { padding: 10px 12px; border-color: var(--ts-border); vertical-align: middle; }
.ts-table tbody tr { transition: background-color .1s; }
.ts-table tbody tr:hover { background: #F8FAFC; }
.ts-table tbody tr.is-selected { background: #FFFBEB; }
.ts-table th[data-sort] { cursor: pointer; }
.ts-table th[data-sort]:hover { color: var(--ts-navy); }
.ts-table th[data-sort]::after { content: "\F127"; font-family: bootstrap-icons; opacity: .0; margin-left: 4px; font-size: .7rem; }
.ts-table th[data-sort]:hover::after { opacity: .5; }
.ts-table th.is-sorted { color: var(--ts-navy); }
.ts-table th.is-sorted::after { opacity: 1; content: "\F148"; }
.ts-table th.is-sorted.is-desc::after { content: "\F128"; }
.ts-table .ts-th-check { width: 40px; }
.ts-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ts-cell-main { font-weight: 600; color: var(--ts-text); text-decoration: none; display: block; line-height: 1.3; }
.ts-cell-main:hover { color: var(--ts-navy); text-decoration: underline; }
.ts-cell-sub { font-size: .73rem; color: var(--ts-muted); display: block; }
.ts-due { font-size: .8rem; white-space: nowrap; }
.ts-due--over { color: var(--ts-error-fg); font-weight: 700; }
.ts-due--today { color: var(--ts-warning-fg); font-weight: 700; }
.ts-muted { color: var(--ts-muted); }
.ts-table .is-loading-row td { opacity: .5; }

/* Pager */
.ts-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--ts-border); font-size: .8125rem; color: var(--ts-muted); flex-wrap: wrap; }
.ts-pager:empty { display: none; }
.ts-pager .pagination { margin: 0; --bs-pagination-padding-x: .65rem; --bs-pagination-padding-y: .3rem; --bs-pagination-font-size: .8125rem; --bs-pagination-active-bg: var(--ts-navy); --bs-pagination-active-border-color: var(--ts-navy); --bs-pagination-color: var(--ts-text); --bs-pagination-border-radius: 8px; gap: 4px; }
.ts-pager .page-link { border-radius: 8px !important; border-color: var(--ts-border); min-width: 34px; text-align: center; }

/* Filters */
.ts-filters { padding: var(--sp-3) var(--sp-4); }
.ts-filters__row { display: flex; gap: var(--sp-2); align-items: center; }
.ts-filters__panel { margin-top: var(--sp-3); }
.ts-filters__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.ts-filters__grid--tight { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ts-searchbox { position: relative; flex: 1; min-width: 0; }
.ts-searchbox i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ts-muted); pointer-events: none; }
.ts-searchbox .form-control { padding-left: 36px; }
.ts-searchbox--sm { flex: none; width: 200px; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 99px; background: #EEF2F7; border: 1px solid var(--ts-border); font-size: .75rem; font-weight: 600; }
.ts-chip button { border: 0; background: transparent; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--ts-muted); padding: 0; cursor: pointer; }
.ts-chip button:hover { background: #CBD5E1; color: var(--ts-text); }

/* Bulk bar */
.ts-bulkbar { position: sticky; top: calc(var(--topbar-h) + var(--safe-top) + 8px); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--ts-navy); color: #fff; border-radius: var(--r-md); padding: 10px 16px; margin-top: 12px; box-shadow: var(--shadow-2); }

/* Tabs */
.ts-tabs-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--ts-border); }
.ts-tabs-scroll::-webkit-scrollbar { display: none; }
.ts-tabs { flex-wrap: nowrap; gap: 4px; padding: 0 var(--sp-3); border: 0; }
.ts-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ts-muted); font-weight: 600; font-size: .85rem; padding: 12px 12px; white-space: nowrap; background: transparent; display: inline-flex; align-items: center; gap: 6px; }
.ts-tabs .nav-link:hover { color: var(--ts-text); }
.ts-tabs .nav-link.active { color: var(--ts-navy); border-bottom-color: var(--ts-yellow); background: transparent; }
.ts-tabs .count { background: #E2E8F0; color: #334155; border-radius: 99px; font-size: .7rem; padding: 0 7px; font-weight: 700; }
.ts-tabs .count--danger { background: var(--ts-error-bg); color: var(--ts-error-fg); }
.ts-tabs-scroll.mt-3 { background: #fff; border: 1px solid var(--ts-border); border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* Empty / error / skeleton */
.ts-empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--ts-muted); }
.ts-empty > i { font-size: 2.4rem; color: #94A3B8; display: block; margin-bottom: 8px; }
.ts-empty h2, .ts-empty h3 { font-size: 1.05rem; color: var(--ts-text); margin-bottom: 4px; font-weight: 700; }
.ts-empty p { max-width: 380px; margin: 0 auto 14px; font-size: .875rem; }
.ts-empty--sm { padding: var(--sp-6) var(--sp-4); }
.ts-empty--sm > i { font-size: 1.7rem; }
.ts-error-state { display: flex; gap: 12px; align-items: flex-start; background: #FEF2F2; border: 1px solid #FECACA; color: #7F1D1D; border-radius: var(--r-md); padding: 14px 16px; margin: 12px 0; }
.ts-error-state > i { font-size: 1.2rem; margin-top: 2px; }
.ts-error-state .btn { margin-top: 8px; }
.ts-skel { background: linear-gradient(90deg, #EEF2F6 25%, #F8FAFC 37%, #EEF2F6 63%); background-size: 400% 100%; animation: ts-shimmer 1.3s ease infinite; border-radius: 6px; }
.ts-skel--line { height: 12px; } .ts-skel--title { height: 22px; width: 40%; } .ts-skel--block { height: 100px; border-radius: var(--r-md); }
.ts-skel--kpi { height: 108px; border-radius: var(--r-lg); }
@keyframes ts-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ts-skel-rows { padding: var(--sp-4); display: grid; gap: 14px; }

/* List rows (queue, activity feed, notifications) */
.ts-row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px var(--sp-5); border-top: 1px solid var(--ts-border); min-width: 0; }
.ts-row:first-child { border-top: 0; }
.ts-row__main { flex: 1; min-width: 0; }
.ts-row__title { font-weight: 600; font-size: .875rem; display: block; color: var(--ts-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ts-row__title:hover { text-decoration: underline; }
.ts-row__sub { font-size: .76rem; color: var(--ts-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-row__end { display: flex; align-items: center; gap: 6px; flex: none; }

/* Timeline */
.ts-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ts-timeline::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--ts-border); }
.ts-tl { position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.ts-tl__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; border: 2px solid var(--ts-border); color: var(--ts-navy); z-index: 1; font-size: .95rem; }
.ts-tl--call .ts-tl__icon { border-color: #BFDBFE; background: #EFF6FF; color: var(--ts-info); }
.ts-tl--note .ts-tl__icon { border-color: #FDE68A; background: #FFFBEB; color: #B45309; }
.ts-tl--status_change .ts-tl__icon { border-color: #DDD6FE; background: #F5F3FF; color: #6D28D9; }
.ts-tl--assignment .ts-tl__icon { border-color: #A7F3D0; background: #ECFDF5; color: #047857; }
.ts-tl--followup .ts-tl__icon, .ts-tl--meeting .ts-tl__icon { border-color: #FBCFE8; background: #FDF2F8; color: #BE185D; }
.ts-tl__body { flex: 1; min-width: 0; background: #F8FAFC; border: 1px solid var(--ts-border); border-radius: var(--r-md); padding: 10px 14px; }
.ts-tl__head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ts-tl__type { font-weight: 700; font-size: .84rem; }
.ts-tl__time { font-size: .74rem; color: var(--ts-muted); }
.ts-tl__text { font-size: .86rem; margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ts-tl__meta { font-size: .75rem; color: var(--ts-muted); margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Task cards / rows */
.ts-task { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 14px var(--sp-5); border-top: 1px solid var(--ts-border); align-items: center; }
.ts-task:first-child { border-top: 0; }
.ts-task__title { font-weight: 700; font-size: .9rem; color: var(--ts-text); text-decoration: none; }
a.ts-task__title:hover { text-decoration: underline; }
.ts-task__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--ts-muted); margin-top: 2px; }
.ts-task__meta a { color: var(--ts-navy); text-decoration: none; font-weight: 600; }
.ts-task__prev { font-size: .76rem; color: var(--ts-muted); margin-top: 4px; }
.ts-task__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ts-task.is-done .ts-task__title { text-decoration: line-through; color: var(--ts-muted); }
.ts-secthead { display: flex; align-items: center; gap: 8px; padding: 12px var(--sp-5); background: #F8FAFC; border-top: 1px solid var(--ts-border); font-weight: 700; font-size: .8rem; }

/* Kanban */
.ts-kanban { gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-3); align-items: flex-start; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; max-width: 100%; }
.ts-col { flex: 0 0 286px; background: #EDF1F6; border-radius: var(--r-lg); border: 1px solid var(--ts-border); display: flex; flex-direction: column; max-height: calc(100vh - 230px); scroll-snap-align: start; }
.ts-col__head { padding: 12px 14px 8px; position: sticky; top: 0; }
.ts-col__title { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: .82rem; gap: 8px; }
.ts-col__count { background: #fff; border-radius: 99px; padding: 0 8px; font-size: .72rem; border: 1px solid var(--ts-border); }
.ts-col__value { font-size: .75rem; color: var(--ts-muted); margin-top: 2px; }
.ts-col__bar { height: 3px; border-radius: 3px; margin-top: 8px; background: #CBD5E1; }
.ts-col--won .ts-col__bar { background: var(--ts-success); } .ts-col--lost .ts-col__bar { background: var(--ts-error); }
.ts-col--qualified .ts-col__bar, .ts-col--meeting_demo .ts-col__bar { background: var(--ts-yellow); }
.ts-col__list { padding: 4px 10px 10px; overflow-y: auto; display: grid; gap: 8px; align-content: start; min-height: 80px; flex: 1; }
.ts-col.is-over { outline: 2px dashed var(--ts-navy); outline-offset: -4px; background: #E3EAF3; }
.ts-col__more { margin: 0 10px 10px; }
.ts-kcard { background: #fff; border: 1px solid var(--ts-border); border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--shadow-1); cursor: grab; transition: box-shadow .12s; position: relative; }
.ts-kcard:hover { box-shadow: var(--shadow-2); }
.ts-kcard.is-dragging { opacity: .45; cursor: grabbing; }
.ts-kcard.is-saving { opacity: .6; pointer-events: none; }
.ts-kcard__name { font-weight: 700; font-size: .84rem; color: var(--ts-text); text-decoration: none; display: block; }
.ts-kcard__name:hover { text-decoration: underline; }
.ts-kcard__co { font-size: .75rem; color: var(--ts-muted); }
.ts-kcard__row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; font-size: .75rem; }
.ts-kcard__val { font-weight: 800; color: var(--ts-navy); }
.ts-kcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ts-border); font-size: .72rem; color: var(--ts-muted); gap: 6px; }
.ts-stagefilter { gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.ts-stagepill { border: 1px solid var(--ts-border-strong); background: #fff; border-radius: 99px; padding: 3px 12px; font-size: .75rem; font-weight: 600; cursor: pointer; color: var(--ts-text); }
.ts-stagepill[aria-pressed="true"] { background: var(--ts-navy); color: #fff; border-color: var(--ts-navy); }
.ts-stage-summary { background: #fff; border: 1px solid var(--ts-border); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px; font-size: .84rem; display: flex; justify-content: space-between; }
.ts-hint { font-size: .78rem; color: var(--ts-muted); }

/* Card list (mobile) */
.ts-cardlist { display: grid; gap: 10px; padding: 12px; }
.ts-lcard { background: #fff; border: 1px solid var(--ts-border); border-radius: var(--r-md); padding: 12px 14px; position: relative; }
.ts-lcard__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ts-lcard__name { font-weight: 700; font-size: .95rem; color: var(--ts-text); text-decoration: none; display: block; line-height: 1.25; }
.ts-lcard__code { font-size: .72rem; color: var(--ts-muted); font-family: var(--mono); }
.ts-lcard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; font-size: .78rem; color: var(--ts-muted); }
.ts-lcard__meta b { color: var(--ts-text); font-weight: 600; }
.ts-lcard__actions { display: flex; gap: 8px; }
.ts-lcard__actions .btn { flex: 1; min-height: 42px; }
.ts-lcard__actions .btn.ts-more { flex: none; width: 46px; }

/* Description list */
.ts-dl { margin: 0; padding: 0 var(--sp-5) var(--sp-4); display: grid; gap: 0; }
.ts-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ts-border); font-size: .85rem; align-items: flex-start; }
.ts-dl > div:first-child { border-top: 0; }
.ts-dl dt { color: var(--ts-muted); font-weight: 600; font-size: .78rem; flex: none; }
.ts-dl dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ts-dl a { color: var(--ts-navy); }

/* Charts */
.ts-chart { width: 100%; position: relative; }
.ts-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ts-chart text { fill: var(--ts-muted); font-size: 11px; font-family: var(--font); }
.ts-chart .grid { stroke: var(--ts-border); stroke-width: 1; }
.ts-chart .axis { stroke: var(--ts-border-strong); }
.ts-chart .bar { transition: opacity .12s; cursor: default; }
.ts-chart .bar:hover { opacity: .8; }
.ts-chart .hit { fill: transparent; }
.ts-tip { position: absolute; pointer-events: none; background: var(--ts-navy); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: .75rem; z-index: 5; white-space: nowrap; transform: translate(-50%, -110%); box-shadow: var(--shadow-2); }
.ts-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .75rem; color: var(--ts-muted); margin-top: 8px; }
.ts-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ts-pipebar { display: grid; grid-template-columns: 120px 1fr 36px; gap: 8px; align-items: center; font-size: .78rem; padding: 5px 0; text-decoration: none; color: var(--ts-text); border-radius: 6px; }
a.ts-pipebar:hover { background: var(--ts-hover); }
.ts-pipebar__track { background: #EEF2F6; height: 10px; border-radius: 99px; overflow: hidden; }
.ts-pipebar__fill { height: 100%; border-radius: 99px; background: var(--ts-navy); min-width: 2px; }
.ts-pipebar b { text-align: right; font-variant-numeric: tabular-nums; }
.ts-meter { height: 8px; background: #EEF2F6; border-radius: 99px; overflow: hidden; }
.ts-meter > span { display: block; height: 100%; background: var(--ts-navy); border-radius: 99px; }
.ts-meter.is-done > span { background: var(--ts-success); }
.ts-definition { font-size: .8rem; color: var(--ts-muted); background: #F8FAFC; border: 1px solid var(--ts-border); border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 14px; }

/* Toasts */
.ts-toasts { position: fixed; top: calc(var(--topbar-h) + var(--safe-top) + 10px); right: 16px; z-index: 2000; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ts-toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--ts-border); border-left: 4px solid var(--ts-info); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-3); font-size: .875rem; animation: ts-toast-in .18s ease-out; }
.ts-toast--success { border-left-color: var(--ts-success); } .ts-toast--success > i { color: var(--ts-success); }
.ts-toast--error { border-left-color: var(--ts-error); } .ts-toast--error > i { color: var(--ts-error); }
.ts-toast--warning { border-left-color: var(--ts-warning); } .ts-toast--warning > i { color: var(--ts-warning); }
.ts-toast > i { margin-top: 2px; color: var(--ts-info); }
.ts-toast__body { flex: 1; min-width: 0; }
.ts-toast__close { border: 0; background: transparent; color: var(--ts-muted); padding: 0 2px; cursor: pointer; }
@keyframes ts-toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Modals / bottom sheets */
.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.modal-header { border-bottom: 1px solid var(--ts-border); padding: 16px 20px; }
.modal-title { font-size: 1.05rem; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--ts-border); padding: 12px 20px; gap: 8px; }
.modal-backdrop { --bs-backdrop-bg: #0A2540; --bs-backdrop-opacity: .5; }

/* Steps (import wizard) */
.ts-steps { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; gap: 8px; overflow-x: auto; counter-reset: s; }
.ts-steps li { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--ts-muted); white-space: nowrap; flex: 1; min-width: max-content; padding: 8px 12px; background: #fff; border: 1px solid var(--ts-border); border-radius: var(--r-md); }
.ts-steps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #E2E8F0; color: #475569; font-size: .72rem; }
.ts-steps li.is-current { color: var(--ts-navy); border-color: var(--ts-navy); }
.ts-steps li.is-current span { background: var(--ts-navy); color: var(--ts-yellow); }
.ts-steps li.is-done span { background: var(--ts-success); color: #fff; }
.ts-drop { border: 2px dashed var(--ts-border-strong); border-radius: var(--r-lg); padding: 40px 20px; text-align: center; cursor: pointer; background: #FBFCFE; transition: border-color .12s, background-color .12s; }
.ts-drop:hover, .ts-drop.is-over { border-color: var(--ts-navy); background: #F2F6FB; }
.ts-drop > i { font-size: 2.6rem; color: var(--ts-navy); }
.ts-drop h2 { font-size: 1.05rem; margin: 6px 0 2px; }
.ts-drop p { margin: 0 0 6px; color: var(--ts-muted); }
.ts-drop small { color: var(--ts-muted); }
.ts-drop__browse { color: var(--ts-navy); font-weight: 700; text-decoration: underline; }
.ts-fileinfo { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--ts-border); border-radius: var(--r-md); background: #F8FAFC; }
.ts-maprows { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ts-maprow label { margin-bottom: 4px; }
.ts-sample { overflow-x: auto; border: 1px solid var(--ts-border); border-radius: var(--r-md); }
.ts-sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ts-sum { border: 1px solid var(--ts-border); border-radius: var(--r-md); padding: 12px 14px; background: #fff; }
.ts-sum b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ts-sum span { font-size: .75rem; color: var(--ts-muted); font-weight: 600; }
.ts-sum--ok b { color: var(--ts-success-fg); } .ts-sum--warn b { color: var(--ts-warning-fg); } .ts-sum--bad b { color: var(--ts-error-fg); }

/* Action bar on lead detail */
.ts-actionbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ts-actionbar .btn { gap: 6px; }

/* Notification item */
.ts-notif { display: flex; gap: 12px; padding: 14px var(--sp-5); border-top: 1px solid var(--ts-border); align-items: flex-start; text-decoration: none; color: inherit; }
.ts-notif:first-child { border-top: 0; }
.ts-notif:hover { background: #F8FAFC; color: inherit; }
.ts-notif.is-unread { background: #FFFDF3; }
.ts-notif__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F7; color: var(--ts-navy); flex: none; }
.ts-notif.is-unread .ts-notif__icon { background: var(--ts-yellow); }
.ts-notif__title { font-weight: 700; font-size: .875rem; }
.ts-notif__body { font-size: .82rem; color: var(--ts-muted); }
.ts-notif__time { font-size: .72rem; color: var(--ts-muted); margin-top: 2px; }
.ts-dot { width: 8px; height: 8px; background: var(--ts-info); border-radius: 50%; flex: none; margin-top: 8px; }

.ts-range-custom { display: flex; }