/* Lightning component: territory data on the CRM account page */

.bbi-lw-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- CRM chrome (kept generic and quiet) ---------- */

.bbi-lw-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  flex: none;
  padding: 0 18px;
  border-bottom: 1px solid var(--bbi-line);
  background: linear-gradient(180deg, #fff, #fcfcff);
}

.bbi-lw-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  margin-left: 12px;
  padding: 0 12px 0 5px;
  border-radius: 999px;
  background: var(--bbi-surface-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
}

.bbi-lw-crumb i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3fb5f0, #0b8bd8);
  color: #fff;
}

.bbi-lw-crumb i svg { width: 11px; height: 11px; }
.bbi-lw-crumb span { color: var(--bbi-faint); }
.bbi-lw-crumb b { font-weight: 800; color: var(--bbi-ink); }

.bbi-lw-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 13px 22px 0;
}

.bbi-lw-head .bbi-tile { width: 44px; height: 44px; border-radius: 12px; }
.bbi-lw-head .bbi-tile svg { width: 22px; height: 22px; }

.bbi-lw-head__main em,
.bbi-lw-field em,
.bbi-lw-comp em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bbi-muted);
}

.bbi-lw-head__main b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--bbi-ink);
}

.bbi-lw-head__btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.bbi-lw-head__btns span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid #dfe3f1;
  font-size: 13px;
  font-weight: 800;
  color: var(--bbi-ink);
}

.bbi-lw-tabs {
  display: flex;
  gap: 24px;
  flex: none;
  margin: 10px 22px 0;
  border-bottom: 1px solid var(--bbi-line);
}

.bbi-lw-tabs span {
  padding: 0 2px 10px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bbi-muted);
}

.bbi-lw-tabs span.is-on { border-color: #11a7c4; color: var(--bbi-ink); }

.bbi-lw-body {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 20px;
  flex: 1;
  min-height: 0;
  padding: 14px 20px 16px 22px;
}

.bbi-lw-details { display: grid; align-content: start; gap: 4px; }

.bbi-lw-field {
  padding: 8px 0 9px;
  border-bottom: 1px solid var(--bbi-line);
}

.bbi-lw-field:last-child { border-bottom: 0; }

.bbi-lw-field > span {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #4a5573;
  white-space: nowrap;
}

.bbi-lw-field .bbi-avatar { width: 22px; height: 22px; box-shadow: 0 0 0 2px #fff; }

/* ---------- BoogieBoard Lightning component ---------- */

.bbi-lw-comp {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(94, 114, 228, 0.18);
  border-top: 4px solid var(--bbi-indigo);
  background: #fff;
  box-shadow: 0 10px 24px -14px rgba(50, 50, 93, 0.35);
  overflow: hidden;
}

.bbi-lw-comp__head {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--bbi-line);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--bbi-ink);
}

.bbi-lw-comp__head small {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
}

.bbi-lw-comp__body { padding: 10px 16px 0; transition: opacity 0.3s ease; }
.bbi-lw-comp.is-loading .bbi-lw-comp__body { opacity: 0; }

.bbi-lw-sec + .bbi-lw-sec {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bbi-line);
}

/* Territory */
.bbi-lw-terr__top { display: flex; align-items: center; justify-content: space-between; }

.bbi-lw-crumbs {
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
}

.bbi-lw-terr > b {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bbi-ink);
}

.bbi-lw-terr > b i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--bbi-indigo);
}

.bbi-lw-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin-top: 8px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1.5px solid #ffd28a;
  background: #fff7e8;
  font-size: 12.5px;
  font-weight: 800;
  color: #c2620a;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bbi-lw-lock svg { width: 13px; height: 13px; }

.bbi-lw-lock.is-hover {
  border-color: #fb8c00;
  background: #ffefd2;
  box-shadow: 0 0 0 4px rgba(251, 140, 0, 0.14);
}

/* People */
.bbi-lw-people { display: flex; gap: 18px; }
.bbi-lw-people em { margin-bottom: 7px; }
.bbi-lw-team { padding-left: 18px; border-left: 1px solid var(--bbi-line); }
.bbi-lw-team > div { display: flex; gap: 14px; }

.bbi-lw-mate {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.bbi-lw-mate .bbi-avatar { width: 32px; height: 32px; box-shadow: 0 0 0 2px #fff, var(--bbi-shadow-sm); }
.bbi-lw-mate b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.2; color: var(--bbi-ink); }
.bbi-lw-mate small { display: block; font-size: 11.5px; font-weight: 700; color: var(--bbi-muted); }

.bbi-lw-team .bbi-lw-mate small {
  display: inline-block;
  margin-top: 1px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(94, 114, 228, 0.1);
  font-size: 11px;
  font-weight: 800;
  color: var(--bbi-indigo);
}

/* History */
.bbi-lw-hist em { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bbi-lw-hist em svg { width: 12px; height: 12px; }

.bbi-lw-hist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px 0 6px;
  border-radius: 10px;
}

.bbi-lw-hist__row + .bbi-lw-hist__row { margin-top: 2px; }
.bbi-lw-hist__row.is-hot { background: var(--bbi-surface-2); }

.bbi-lw-hist__row i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  background: var(--bbi-line);
  color: var(--bbi-muted);
}

.bbi-lw-hist__row.is-hot i { background: var(--bbi-grad-brand); color: #fff; }
.bbi-lw-hist__row i svg { width: 13px; height: 13px; }
.bbi-lw-hist__row b { font-size: 13.5px; font-weight: 800; color: var(--bbi-ink); white-space: nowrap; }
.bbi-lw-hist__row:not(.is-hot) b { color: #4a5573; }

.bbi-lw-hist__row small {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
  white-space: nowrap;
}

/* Skeleton while the component loads */
.bbi-lw-skel {
  position: absolute;
  top: 58px;
  left: 16px;
  right: 16px;
  display: grid;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bbi-lw-comp.is-loading .bbi-lw-skel { opacity: 1; }

.bbi-lw-skel i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #edf0f7 0%, #f8f9fd 45%, #edf0f7 90%);
  background-size: 220% 100%;
  animation: bbi-lw-shimmer 1.1s linear infinite;
}

.bbi-lw-skel i.is-lg { height: 22px; border-radius: 8px; }
.bbi-lw-skel i.is-dot { width: 32px; height: 32px; flex: none; border-radius: 50%; }

.bbi-lw-skel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}

@keyframes bbi-lw-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* Lock tooltip */
.bbi-lw-tip {
  z-index: 10;
  padding: 14px 16px;
  border-color: #ffd28a;
  box-shadow: var(--bbi-shadow-lg);
}

.bbi-lw-tip::after {
  content: '';
  position: absolute;
  top: 54px;
  right: -8px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #ffd28a;
  border-right: 1px solid #ffd28a;
  background: #fff;
  transform: rotate(45deg);
}

.bbi-lw-tip__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #b45309;
}

.bbi-lw-tip__title svg { width: 15px; height: 15px; }

.bbi-lw-tip p {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--bbi-ink);
}

.bbi-lw-tip p b { font-weight: 800; }

.bbi-lw-tip small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bbi-muted);
}

.bbi-lw-tip--in { animation: bbi-lw-tip-in 0.45s var(--bbi-spring) both; }

@keyframes bbi-lw-tip-in {
  from { opacity: 0; transform: translateX(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}