.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}

.table th, .table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.table tbody tr:last-child td { border-bottom: none; }
.table th {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container);
  text-transform: uppercase;
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent);
}

.table__actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
  align-items: center;
}

/* Lens cell: inline list of attached lens badges + names. Items wrap
   like normal inline content but the parent .col-sized clips overflow
   so a contact w/ many lenses doesn't push the row out. */
.lens-cell {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}
.lens-cell__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--md-sys-typescale-label-medium-size);
}
.lens-cell__name {
  color: var(--md-sys-color-on-surface);
}

/* Column views: cells set --col-width inline; .col-sized reads it.
   Width tokens defined in md3-tokens.css. Whitespace-nowrap +
   text-overflow keeps cells from blowing the layout when content
   exceeds the chosen size. */
.col-sized {
  width: var(--col-width, var(--col-width-md));
  max-width: var(--col-width, var(--col-width-md));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MD3 secondary tab strip (segmented). */
.tabs {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px;
  margin-bottom: 1.25rem;
  gap: 4px;
}
.tabs__item {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.tabs__item:hover { color: var(--md-sys-color-on-surface); text-decoration: none; }
.tabs__item--active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.toolbar h1 { margin: 0; }

/* MD3 chip (text-only, used as inline status badges). */
.badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.75rem;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  letter-spacing: 0.1px;
}
.badge--success {
  background: rgb(222 241 230);
  color: rgb(47 125 79);
  border-color: transparent;
}
.badge--warning {
  background: rgb(246 236 214);
  color: rgb(154 101 22);
  border-color: transparent;
}
.badge--danger  {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-color: transparent;
}
.badge--info    {
  background: rgb(221 231 244);
  color: rgb(46 98 168);
  border-color: transparent;
}

/* Class applied to <md-filled-button> to make it a destructive action. */
md-filled-button.danger {
  --md-filled-button-container-color: var(--md-sys-color-error);
  --md-filled-button-label-text-color: var(--md-sys-color-on-error);
  --md-filled-button-hover-container-color: var(--md-sys-color-error);
  --md-filled-button-hover-label-text-color: var(--md-sys-color-on-error);
  --md-filled-button-focus-container-color: var(--md-sys-color-error);
  --md-filled-button-focus-label-text-color: var(--md-sys-color-on-error);
  --md-filled-button-pressed-container-color: var(--md-sys-color-error);
  --md-filled-button-pressed-label-text-color: var(--md-sys-color-on-error);
}

/* Contact-list "Team" column tooltip. The visible cell holds a hidden source
   span; team-tooltip.js copies it into #team-tip (on <body>, position:fixed)
   so it escapes the table's overflow:hidden. */
.assignee-cell__tipsrc { display: none; }

#team-tip {
  display: none;
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  max-width: 340px;
  padding: 0.5rem 0.75rem;
  background: var(--md-sys-color-surface-container-high, var(--md-sys-color-surface));
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
}
#team-tip .team-tip__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0;
}
#team-tip .team-tip__roles { color: var(--md-sys-color-on-surface-variant); }