/* family-profile.css — shared profile-panel + tier-coloured person icon.
 * Standard extracted from the planning tool (2026-06-02). Loaded by marketing +
 * dropshipper so the person-icon / slide-down company panel matches planning.
 * Relies on family-tokens.css (--brand, --brand-ink) + family-menu.css (.fam-menu
 * panel chrome + open/close). Keep in sync with planning's inline copy.
 */

/* ---- Tier-coloured person icon (admin launcher) ---- */
.header .adm-launcher {
  background: rgba(0,0,0,0.30);
  color: var(--brand-ink, #fff);
  border: 0;
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-hover, 140ms) var(--ease-standard, ease);
}
.header .adm-launcher:hover { background: rgba(0,0,0,0.18); }
.header .adm-launcher:focus-visible { outline: 2px solid var(--brand-ink, #fff); outline-offset: 2px; }
.header .adm-launcher.tier-bronze   { color:#cd7f32; }
.header .adm-launcher.tier-silver   { color:#cfd6dd; }
.header .adm-launcher.tier-gold     { color:#ffd23f; }
.header .adm-launcher.tier-platinum { color:#9fe0ff; }
.header .adm-launcher .adm-badge {
  display:none; position:absolute; right:-2px; bottom:-2px;
  width:15px; height:15px; border-radius:50%;
  background:#ffffff; color:#005373;
  font-size:10px; line-height:15px; text-align:center; font-weight:700;
  box-shadow:0 0 0 1.5px var(--brand,#005373);
  pointer-events:none;
}
.header .adm-launcher.is-admin .adm-badge { display:block; }
@media (max-width: 768px) {
  .header .adm-launcher { width: 44px; height: 44px; }
}

/* ---- Slide-down profile panel ---- */
.header .badges { position: relative; }
#prof-panel.prof-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  width: min(640px, 92vw);
  max-width: min(640px, 92vw);
  max-height: min(72vh, 640px);
  flex-direction: column;
  padding: 0; overflow: hidden;
  display: none;            /* hidden until .open (chrome comes from .fam-menu) */
}
#prof-panel.prof-panel.open { display: flex; }
.prof-panel-body { flex: 1 1 auto; overflow: auto; padding: 8px 12px; -webkit-overflow-scrolling: touch; }
.prof-panel-footer { flex: 0 0 auto; border-top: 1px solid #e2e0da; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }

/* ---- Company list rendered as cards inside the panel ---- */
#prof-panel .adm-table { display: block; font-size: 13px; }
#prof-panel .adm-table thead { display: none; }
#prof-panel .adm-table tbody, #prof-panel .adm-table tr { display: block; width: 100%; }
#prof-panel .adm-table tr { border: 1px solid #ececec; padding: 12px 14px; margin-bottom: 8px; border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 4px; }
#prof-panel .adm-table tr:last-child { margin-bottom: 0; }
#prof-panel .adm-table td { display: block; padding: 2px 0; border: none; }
#prof-panel .adm-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: #666; }
#prof-panel .adm-table td:first-child[data-label]::before { content: none; }
#prof-panel .adm-table td:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#prof-panel .adm-acting-pill { margin-left: auto; }
#prof-panel .adm-row-actions { padding-top: 10px; }
#prof-panel .adm-row-actions .adm-btn {
  display: block; width: 100%;
  background: var(--brand, #005373); color: #fff;
  border: 1px solid var(--brand, #005373);
  padding: 9px 12px; font-size: 13px; font-weight: 600;
  border-radius: 8px; text-align: center;
}
#prof-panel .adm-row-actions .adm-btn:hover { filter: brightness(1.08); }
#prof-panel .adm-header { display: none; }
#prof-panel .adm-table td,
#prof-panel .adm-table strong { color: #1a1a1a; }
#prof-panel .adm-section { border: none; padding: 0; background: transparent; border-radius: 0; margin-bottom: 0; }
/* Card grid: Name (title) / Users + Last activity / Status + Tier / Products / actions */
#prof-panel .adm-table td[data-label="Name"] { grid-column: 1 / -1; grid-row: 1; }
#prof-panel .adm-table td[data-label="Users"] { grid-column: 1; grid-row: 2; }
#prof-panel .adm-table td[data-label="Last activity"] { grid-column: 2; grid-row: 2; text-align: right; }
#prof-panel .adm-table td[data-label="Status"] { grid-column: 1; grid-row: 3; }
#prof-panel .adm-table td[data-label="Tier"] { grid-column: 2; grid-row: 3; text-align: right; }
#prof-panel .adm-table td[data-label="Tier"]::before { content: none; }
#prof-panel .adm-table td[data-label="Products"] { grid-column: 1 / -1; grid-row: 4; }
#prof-panel .adm-row-actions { grid-column: 1 / -1; grid-row: 5; }
/* Platinum tier pill colour (gold/silver/bronze colours live in each app's admin.js) */
.adm-tier-platinum { background:#e7edf3; color:#33506b; border-color:#bcccdb; }
@media (max-width: 768px) {
  #prof-panel .adm-row-actions .adm-btn { min-height: 44px; padding: 12px; }
}