/* it-27.10 — phone indicator (loaded globally: appears on the contact detail, the edit form,
   AND the contacts table). TWO separate concerns rendered as design-system `.tip` icons:
     1. Line type (what the number IS): mobile / voip / landline / unknown — conveyed by icon
        SHAPE, kept a single quiet neutral color (informational). Carrier in the tooltip.
     2. Textability / state (whether we can text it): conveyed by COLOR — green when textable,
        red when blocked. Reason in the tooltip.
   So color always means deliverability, shape always means line type. The optional text action
   marks/clears the tenant-scoped manual undeliverable flag. */

/* Value + indicator share one baseline row. The .field cell is a flex column, so without this
   wrapper the indicator would drop onto its own line under the number. */
.field__valuerow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.phone-intel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  vertical-align: middle;
}
/* In the contacts table the value is bare inline text (no flex row), so space the line-type
   icon off the number here. The .field__valuerow contexts already space via the row's flex
   `gap`. (The manual-toggle state block is contact-page only — never in the table.) */
td .phone-intel--type { margin-right: 0.35rem; }
.phone-intel .tip { color: inherit; }
.phone-intel .tip__icon { font-size: 18px; }

/* Line type — neutral by default (shape carries the type; color carries textability). */
.phone-intel__type .tip__icon { color: var(--md-sys-color-on-surface-variant, #49454f); }
/* Not sms/mms-capable → amber handset (source-ordered after the neutral rule to win). */
.phone-intel__type--nosms .tip__icon { color: #b26a00; }

/* Let the tooltip escape the phone table cell (.col-sized clips for ellipsis) and float above
   the sibling rows instead of being clipped by them. */
.col-sized:has(.phone-intel) { overflow: visible; }
.phone-intel .tip__bubble { z-index: 1000; }

.phone-intel__toggle { display: inline-flex; margin: 0; }
.phone-intel__action {
  padding: 1px 4px;
  border: none;
  background: transparent;
  color: var(--md-sys-color-primary, #6750a4);
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
  cursor: pointer;
}
.phone-intel__action:hover {
  background: var(--md-sys-color-surface-variant, rgb(231 224 236));
  text-decoration: underline;
}