/* Compliance manager on /map (js/features/portfolio-map.js): the tenement card
   row and the My Layers overlay legend. */

.pfm-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-md);
  background: rgba(var(--nm-blue-rgb), 0.06);
  font-size: 12px;
  color: var(--nm-text);
}

.pfm-row > .ti { color: var(--nm-accent); font-size: 16px; margin-top: 1px; }
.pfm-body { flex: 1; min-width: 0; }
.pfm-title { font-weight: var(--nm-weight-med); margin-bottom: 4px; }
.pfm-muted { color: var(--nm-text-dim); }
.pfm-link { color: var(--nm-blue-light); }
.pfm-list { display: flex; flex-wrap: wrap; gap: 5px; }

.pfm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--nm-radius-pill);
  border: 1px solid var(--nm-border);
  background: rgba(var(--nm-blue-rgb), 0.1);
  color: var(--nm-text);
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
}

button.pfm-tag.add { cursor: pointer; color: var(--nm-text-muted); }
button.pfm-tag.add:hover { color: #fff; border-color: var(--nm-border-strong); }
.pfm-tag.in { background: rgba(var(--nm-success-rgb), 0.16); border-color: rgba(var(--nm-success-rgb), 0.45); }
.pfm-tag a, .pfm-tag button { color: var(--nm-text-muted); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; }
.pfm-tag a:hover, .pfm-tag button:hover { color: #fff; }

.pfm-swatch { cursor: default; }
.pfm-swatch:hover { transform: none; }

.pfm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--nm-text-dim);
}

.pfm-legend i {
  display: inline-block;
  width: 10px;
  height: 8px;
  margin-right: 4px;
  border: 2px solid;
  border-radius: 2px;
  vertical-align: -1px;
}

/* Compliance row at the foot of the map's Alerts dropdown: alerts watch the
   market around you, Compliance the deadlines on your own titles. */
.alerts-compliance-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(var(--nm-blue-rgb), 0.05);
  color: var(--nm-text);
  text-decoration: none;
  font-size: 13px;
}
.alerts-compliance-link:hover { background: rgba(var(--nm-blue-rgb), 0.12); }
.alerts-compliance-link > .ti { color: var(--nm-accent); font-size: 18px; flex-shrink: 0; }
.alerts-compliance-link > .ti-arrow-right { margin-left: auto; font-size: 16px; color: var(--nm-text-dim); }
.acl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acl-text span { font-size: 12px; color: var(--nm-text-dim); }