/* profile.css — kompakts profila header, chips, NBO, kebab, tabs-bar. */
/* ── Profila header ─────────────────────────────────────────────────────────
   Mērķis: viens skats "kas, ar ko sazvanīties, segments + atvērti jautājumi,
   ko darīt tālāk", bez ritināšanas. Marketinga dziļā analītika — "Profils".

   Struktūra (8pt grid):
     ┌─────────┬──────────────────────────────────────┬─────────┐
     │ avatar  │ NAME · lang · segment · pendQs · live│  ⋯      │  ← ph-top
     │         │ meta: kanāls · jid · reg · email     │         │
     └─────────┴──────────────────────────────────────┴─────────┘
     ─ separator ─
     facts: budžets │ pēd. pirkums │ LTV │ intereses           ← ph-facts
     NBO mini josla (ja ir)                                    ← profile-nbo */

.profile-card-header { padding: 1.25rem 1.5rem; }

/* Grid: avatar | identity (saliek visu pieejamo telpu) | actions (kebab).
   Identitātes kolonna ir minmax(0, 1fr), lai garām e-pasta adresēm un JID
   būtu kur saīsināties (nevis pārplūst grid trakts). */
.ph-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: start;
}

.profile-avatar {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: 0.75rem;
  background: var(--c-accent-soft); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.125rem;
  user-select: none;
  border: 1px solid #e0e7ff;
}

.ph-identity {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 0.4375rem;
  padding-top: 0.125rem;
}

/* Name rindas izkārtojums izmanto VISU platumu: vārds + valoda pa kreisi,
   statusu badges (segments / pendQs / live) nobīdīti pa labi ar margin-left:
   auto. Tas novērš lielo tukšumu, kas iepriekš palika starp segmentu un
   kartes labo malu. Šaurā ekrānā wrap pārtulko grupas vertikāli. */
.ph-name-line {
  display: flex; align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap; min-width: 0;
}

.ph-name-left {
  display: inline-flex; align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.profile-name {
  font-size: 1.25rem; font-weight: 600; color: var(--c-text);
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ph-name-badges {
  display: inline-flex; align-items: center;
  gap: 0.4375rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Meta rinda — viens plūdrais teksta līmenis ar mazām punktu atdalāmām
   sekcijām, lai izskatās kā profesionāli sub-titles, nevis daudzās čipu
   rindas. Padding-top atdala vizuāli no vārda rindas. */
.ph-meta-line {
  display: flex; align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--c-muted);
  min-width: 0;
  line-height: 1.25;
}

.ph-meta-line .sep {
  width: 3px; height: 3px;
  border-radius: 9999px;
  background: #cbd5e1;
  flex-shrink: 0;
}

.ph-actions {
  display: flex; align-items: flex-start;
  gap: 0.25rem;
}

/* Live indikators — kompakts punkts ar mīkstu halo, tāda pati 1.5rem
   ārējā kaste kā čipiem, lai iekļaujas badge rindas baseline bez vizuāla
   "dažāda izmēra" sajūtas. Bez animācijas — statuss skaidri redzams,
   uzmanība nepiesaista, ja klients ir aktīvs ilgāku laiku. */
.ph-live {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  flex-shrink: 0;
}
.ph-live::before {
  content: '';
  width: 0.5rem; height: 0.5rem;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* Valodas badge — minimāls neitrāls kods, lai netraucē galveno virsrakstu */
.ph-lang {
  display: inline-flex; align-items: center;
  height: 1.125rem;
  padding: 0 0.375rem;
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  background: #f1f5f9;
  border-radius: 0.25rem;
  text-transform: uppercase;
}

.profile-contact-phone {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.125rem 0.375rem;
  margin: -0.125rem -0.375rem;
  border-radius: 0.375rem;
  font-size: 0.75rem; font-weight: 600;
  color: var(--c-text);
  background: transparent; border: 0; cursor: pointer;
  transition: color .12s, background-color .12s;
}
.profile-contact-phone:hover { background: #f1f5f9; color: var(--c-accent); }
.profile-contact-phone svg { color: var(--c-soft); width: 0.8125rem; height: 0.8125rem; }

/* Vienots `.profile-chip` (pildīts mazs apaļš čips). Sufiksi krāso pēc
   nozīmes — nav vairāku krāsu vienai kategorijai. Fiksēts min-height +
   box-sizing, lai pilnīgi visi varianti (pildītie, ar borderu, k:v
   struktūru, mono) būtu vienādā vertikālā mērogā un baseline. */
.profile-chip {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  box-sizing: border-box;
  padding: 0 0.5625rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #f1f5f9; color: #334155;
  font-size: 0.6875rem; font-weight: 500;
  line-height: 1.5rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.profile-chip-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  background: #f8fafc;
  color: var(--c-muted);
  border-color: #e2e8f0;
  max-width: 16rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 1.5rem;
  padding: 0 0.625rem;
}

/* Kontakta pāris — testa/kanāla čips + identifikatora čips izskatās kā
   viena loģiska grupa (mazāks gap, vienāds baseline). */
.ph-contact {
  display: inline-flex; align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.ph-contact .profile-chip,
.ph-contact .profile-chip-mono { vertical-align: middle; }

/* Hover tooltip — rāda fixed slāni (#cp-tip-layer), nevis ::after (neklippē). */
.cp-has-tip { position: relative; cursor: help; display: inline-block; vertical-align: middle; }

.cp-tip-layer {
  position: fixed;
  z-index: 200;
  min-width: 11rem;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-line;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  pointer-events: none;
}

.profile-chip-test {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
  font-weight: 600;
  text-transform: none;
  font-size: 0.6875rem;
  letter-spacing: 0;
  gap: 0.4375rem;
  padding: 0 0.625rem 0 0.5rem;
}
.profile-chip-test::before {
  content: '';
  width: 6px; height: 6px; border-radius: 9999px;
  background: #f59e0b;
  flex-shrink: 0;
}
.profile-chip-accent { background: var(--c-accent-soft); color: var(--c-accent); border-color: #e0e7ff; }
.profile-chip-ok     { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.profile-chip-warn   { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.profile-chip-danger { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }

/* Segments — vienots ar pārējiem čipiem (min-height, padding), tikai
   ar iekšēju k:v struktūru. Border ar zemāku intensitāti, lai
   nedominē pār citiem čipiem rindā. */
.profile-chip-segment {
  padding: 0 0.5rem 0 0.4375rem;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  gap: 0.375rem;
}
.profile-chip-segment-k {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
}
.profile-chip-segment-v { font-size: 0.6875rem; font-weight: 700; }
.profile-chip-segment-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
}
.profile-chip-segment-ok      { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.profile-chip-segment-info    { background: #f0f9ff; color: #075985; border-color: #bae6fd; }
.profile-chip-segment-accent  { background: var(--c-accent-soft); color: var(--c-accent); border-color: #c7d2fe; }
.profile-chip-segment-warn    { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.profile-chip-segment-danger  { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.profile-chip-segment-neutral { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

/* Fakti — atdalīti ar plānu līniju no augšējās identitātes zonas. K:v pāri
   ar vertikālu separator starp grupām, lai būtu skaidri kur viena grupa
   beidzas un sākas nākamā. */
.ph-facts {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid #f1f5f9;
  display: flex; flex-wrap: wrap;
  row-gap: 0.5rem; column-gap: 0;
  font-size: 0.75rem; color: var(--c-text);
}
.ph-facts > span {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0 0.875rem;
  border-right: 1px solid #e2e8f0;
  min-height: 1.25rem;
}
.ph-facts > span:first-child { padding-left: 0; }
.ph-facts > span:last-child { border-right: 0; padding-right: 0; }
.profile-facts-k {
  font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c-soft); font-weight: 700;
}
.profile-facts-v { font-weight: 600; color: var(--c-text); font-size: 0.75rem; }
.profile-facts-interests { gap: 0.375rem !important; flex-wrap: wrap; }
.profile-facts-interests .profile-chip {
  padding: 0 0.4375rem; font-size: 0.625rem; min-height: 1.25rem;
}

/* NBO mini josla zem header'a — viens vissvarīgākais "ko darīt tālāk" */
.profile-nbo {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 0.875rem; padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  background: var(--c-accent-soft);
  border: 1px solid #e0e7ff;
}
.profile-nbo-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.profile-nbo-body {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem;
  flex: 1; min-width: 0;
}
.profile-nbo-tag {
  font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--c-accent); font-weight: 700;
}
.profile-nbo-title { font-size: 0.8125rem; font-weight: 600; color: var(--c-text); }
.profile-nbo-sub   { font-size: 0.6875rem; color: var(--c-muted); }

/* Aizpildītības mērītāji — pavisam mazi, zem visa header'a satura */
.profile-fill-row {
  display: flex; flex-wrap: wrap; gap: 0.375rem 1rem;
  margin-top: 0.625rem; padding-top: 0.625rem;
  border-top: 1px solid var(--c-border);
}

/* Kebab izvēlne header'a labajā augšējā stūrī (Kopēt CRM, JID, Dzēst) */
.profile-kebab { position: relative; }
.profile-kebab-btn {
  width: 1.75rem; height: 1.75rem;
  border-radius: 0.375rem; border: 1px solid transparent;
  background: transparent; color: var(--c-soft);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.profile-kebab-btn:hover {
  background: #f1f5f9; color: var(--c-text); border-color: var(--c-border);
}
.profile-kebab-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 13rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  padding: 0.25rem;
  z-index: 20;
  display: none;
}
.profile-kebab-menu.is-open { display: block; }
.profile-kebab-menu button {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 0.625rem; border-radius: 0.375rem;
  font-size: 0.75rem; color: var(--c-text);
  background: transparent; border: 0; cursor: pointer;
}
.profile-kebab-menu button:hover { background: #f1f5f9; }
.profile-kebab-menu button.is-danger { color: var(--c-danger); }
.profile-kebab-menu button.is-danger:hover { background: #fff1f2; }

/* ── Cilnes ar overflow "Vairāk" dropdown ───────────────────────────────── */
.tabs-bar {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--c-border);
  background: #f8fafc;
  position: relative;
}
.tabs-bar-list { display: flex; flex: 1; min-width: 0; overflow-x: auto; }
.tab-item {
  position: relative;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.375rem;
  cursor: pointer;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  transition: color .12s, border-color .12s, background-color .12s;
}
.tab-item:hover { color: var(--c-text); background: #ffffff; }
.tab-item.is-active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  background: #ffffff;
}
.tab-item:focus-visible {
  outline: 2px solid #818cf8; outline-offset: -4px;
}
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.125rem; padding: 0 0.375rem; height: 1rem;
  border-radius: 9999px;
  background: #f1f5f9; color: var(--c-muted);
  font-size: 0.6875rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tab-item.is-active .tab-badge { background: var(--c-accent-soft); color: var(--c-accent); }
.tab-badge-warn { background: #fef3c7; color: #92400e; }
.tab-badge-ok   { background: #d1fae5; color: #065f46; }

.tabs-more {
  position: relative;
  border-left: 1px solid var(--c-border);
  display: flex; align-items: stretch;
}
.tabs-more-btn {
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem; color: var(--c-muted);
  background: transparent; border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.tabs-more-btn:hover { color: var(--c-text); }
.tabs-more-menu {
  position: absolute; right: 0; top: 100%;
  min-width: 12rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  padding: 0.25rem;
  z-index: 30;
  display: none;
}
.tabs-more-menu.is-open { display: block; }
.tabs-more-menu .tab-item {
  border-bottom: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  width: 100%;
  justify-content: space-between;
}
.tabs-more-menu .tab-item.is-active {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

/* ── "Uzkrātā informācija" mini bāris header'ā ──────────────────────────── */
.profile-fillbar {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem; color: var(--c-muted);
}
.profile-fillbar-track {
  width: 5rem; height: 4px; border-radius: 9999px;
  background: #e2e8f0; overflow: hidden;
}
.profile-fillbar-fill { height: 100%; background: var(--c-accent); border-radius: 9999px; }

/* ── Profila definīciju saraksts (Pamati / Preferences) ─────────────────────
   Garie LV virsraksti (Komunikācija, Rokas apkārtmērs) nedrīkst pārklāties
   ar vērtībām — elastīga label kolonna + items-start. */

.cp-profile-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.75rem;
  min-width: 0;
}

@media (min-width: 1024px) {
  .cp-profile-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cp-profile-section {
  min-width: 0;
}

.cp-profile-section > dl {
  min-width: 0;
}

.cp-dl-row {
  display: grid;
  grid-template-columns: minmax(6.75rem, 44%) minmax(0, 1fr);
  column-gap: 0.875rem;
  row-gap: 0.125rem;
  align-items: start;
  padding: 0.3125rem 0;
  min-width: 0;
}

@media (min-width: 640px) {
  .cp-dl-row {
    grid-template-columns: minmax(8.5rem, 40%) minmax(0, 1fr);
    column-gap: 1rem;
  }
}

.cp-dl-row dt {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: #64748b;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.cp-dl-row dd {
  margin: 0;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Profila rediģēšanas modālis (dlg-edit-client / dlg-edit-recipient) ─── */

/* Shared field chrome — matches dlg-wa-client (py-2.5 px-3.5 text-sm rounded-xl). */
.cp-edit-input,
input.cp-edit-input,
select.cp-edit-input,
textarea.cp-edit-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 2.625rem; /* 42px */
  padding: 0.625rem 0.875rem; /* py-2.5 px-3.5 */
  font-family: inherit;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: #0f172a;
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 0.75rem; /* rounded-xl */
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cp-edit-input:focus,
input.cp-edit-input:focus,
select.cp-edit-input:focus,
textarea.cp-edit-input:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgb(99 102 241 / 0.3);
}

select.cp-edit-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1.25rem 1.25rem;
  cursor: pointer;
}

input[type="number"].cp-edit-input {
  -moz-appearance: textfield;
}

input[type="number"].cp-edit-input::-webkit-inner-spin-button,
input[type="number"].cp-edit-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea.cp-edit-input {
  min-height: auto;
  resize: vertical;
}

.cp-edit-input-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem; /* 13px */
}

.cp-edit-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.65625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.cp-edit-section-title::before {
  content: "";
  width: 0.25rem;
  height: 0.75rem;
  border-radius: 0.125rem;
  background: #818cf8;
  flex-shrink: 0;
}

.cp-edit-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cp-edit-details summary::-webkit-details-marker {
  display: none;
}

.cp-edit-details .cp-edit-chevron {
  font-size: 0.625rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.cp-edit-details[open] .cp-edit-chevron {
  transform: rotate(180deg);
}

.cp-edit-checkbox-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border-color: #cbd5e1;
  color: #4f46e5;
}

/* Kategoriju redaktors (client category_notes + recipient wants_categories) */
.cp-edit-category-list {
  min-height: 0.25rem;
}

.cp-edit-category-empty {
  font-size: 0.6875rem;
  font-style: italic;
  color: #94a3b8;
}

.cp-edit-category-row {
  padding: 0.625rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #f8fafc;
}

.cp-edit-category-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}

.cp-edit-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.75rem;
  font-weight: 500;
}

.cp-edit-category-chip--readonly {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
}

.cp-edit-category-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e293b;
}

.cp-edit-category-chip .cp-edit-category-name {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.cp-edit-category-en {
  font-size: 0.6875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #64748b;
}

.cp-edit-category-chip .cp-edit-category-en {
  font-size: 0.625rem;
  opacity: 0.75;
}

.cp-edit-category-signal {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.cp-edit-category-remove {
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cp-edit-category-remove:hover {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}