/* ============================================================
   Profile page — entity-detail layout used by traveller / payer
   /supplier-style cards that present everything in one scroll.

   Outer: 2-column grid (main + sidebar).
   Inner: auto-fit grids so narrow blocks pack side by side on
   wide screens and stack on narrow.
   Each block is a <details class="collapsible-card"> so the
   user can fold long sections away.
   ============================================================ */

/* ---- Compact entity header (traveller/payer single-row variant) ---- */

.entity-header.compact {
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  margin-block-end: 0;
  border-block-end: 1px solid var(--color-border);
}

/* Wraps `.entity-header.compact` + `.tabs-wrapper` into one sticky strip
   so both stay pinned together while scrolling — the entity title (who
   you're editing) AND the tab navigation.
   `top: var(--header-height)` parks it directly under the app-bar
   (.header is itself sticky at top:0, occupying that height). The inner
   .tabs-wrapper has its own `position: sticky` from layouts.css; we
   neutralise it inside our wrapper so the OUTER sticky owns the
   pinning — otherwise tabs were sticking on their own at top:64px and
   the entity-header above them was hiding under the app-bar. */
.page-header-sticky {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
  /* Opaque page background — `--color-bg-page` was a typo, we have
     `--color-bg`. Transparent fallback let the Profile block scrolling
     underneath bleed through the sticky strip. */
  background: var(--color-bg);
  margin-block-end: var(--space-3);
}
.page-header-sticky .entity-header.compact {
  margin-block-end: 0;
  /* Bump the entity name a tier so the sticky strip reads cleanly when
     the user scrolls long content past it. */
  padding-block: var(--space-3);
}
.page-header-sticky .entity-header-line .entity-name {
  font-size: var(--text-lg);
}
.page-header-sticky .tabs-wrapper {
  position: relative;   /* override layouts.css sticky */
  top: auto;
  z-index: auto;
  margin-block-end: 0;
  background: var(--color-bg);
}
.entity-header.compact .entity-avatar {
  width: 40px;
  height: 40px;
  font-size: var(--text-sm);
}
.entity-header-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
}
.entity-header-line .entity-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-inline: var(--space-1);
}
.entity-header-line .entity-fact {
  font-variant-numeric: tabular-nums;
}
.entity-header-line .entity-fact-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-variant-numeric: tabular-nums;
}

/* Passport-expiry chip: green ok, yellow <12mo, red <6mo, strike if expired. */
.expiry-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--color-success-light);
  color: var(--color-success);
}
.expiry-chip.warn    { background: var(--color-warning-light); color: var(--color-warning); }
.expiry-chip.danger  { background: var(--color-danger-light);  color: var(--color-danger); }
.expiry-chip.expired { background: var(--color-danger-light);  color: var(--color-danger); text-decoration: line-through; }

/* ---- Profile grid: main + sidebar ---- */

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 980px) {
  .profile-grid { grid-template-columns: 1fr; }
}

/* Main column uses flex-wrap so items distribute evenly per row and a
   lone trailing item grows to fill its row instead of leaving an
   empty grid cell next to it. flex-basis 360px is the target width;
   flex-grow 1 lets items grow to fill the row evenly (3 items in a
   wide row → ~33% each; 2 items → ~50% each; 1 item alone → 100%).
   Items in the same row stretch to equal height via the default
   `align-items: stretch`. card-full-width items take 100% basis to
   force a row of their own. */
.profile-main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}
.profile-main > .collapsible-card {
  flex: 1 1 360px;
  min-width: 0;   /* allow shrinking content past intrinsic width */
}
.profile-main > .collapsible-card.card-full-width {
  flex-basis: 100%;
}

.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: var(--space-3);
  align-self: start;
}
@media (max-width: 980px) {
  .profile-sidebar { position: static; }
}

/* ---- Collapsible card (extends .card) ---- */

.collapsible-card {
  padding: 0;
  overflow: hidden;
}
.collapsible-card > .card-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  user-select: none;
}
.collapsible-card > .card-summary::-webkit-details-marker {
  display: none;
}
.collapsible-card > .card-summary:hover {
  background: var(--color-bg-subtle);
}
.collapsible-card .card-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform .15s;
}
.collapsible-card[open] .card-chevron {
  transform: rotate(90deg);
}
.collapsible-card .card-summary-title {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  min-width: 0;
}
.collapsible-card .card-summary-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
/* prevent action buttons from inheriting the summary's pointer cursor */
.collapsible-card .card-summary-actions .btn-icon,
.collapsible-card .card-summary-actions .btn {
  cursor: pointer;
}

.collapsible-card .card-body {
  padding: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}
.collapsible-card .card-body > :first-child { margin-block-start: 0; }
.collapsible-card .card-body > :last-child  { margin-block-end: 0; }

/* card-full-width handling lives next to .profile-main rules above
   (flex-basis: 100%). This selector is no-op now but the class is
   retained for any other layouts that might use it. */

/* Sidebar cards are always single column — no need for full-width override. */
.profile-sidebar .collapsible-card {
  width: 100%;
}

/* ---- Soft empty-state inside a collapsed-when-empty body ---- */

.profile-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding-block: var(--space-2);
}

/* ---- Inline-edit cells (click a row to edit one field) ---- */

/* The cell sits inside .detail-grid; whole row is the click target. */
.detail-row.inline-edit {
  cursor: pointer;
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  transition: background-color .12s;
  outline: none;
}

/* The detail-row uses justify-content:space-between, which would distribute
   three children (label, value, pencil) equally and leave the value floating
   in the middle. Pin the value to the right (auto margin overrides the
   space-between distribution) so it sits next to the pencil — the layout
   then matches the readonly two-child rows above/below. */
.detail-row.inline-edit .detail-value {
  margin-inline-start: auto;
}
.detail-row.inline-edit:hover,
.detail-row.inline-edit:focus-visible {
  background: var(--color-bg-subtle);
}
.detail-row.inline-edit:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.detail-row.inline-edit .inline-edit-icon {
  width: 12px;
  height: 12px;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity .12s;
  flex-shrink: 0;
  align-self: center;
}
.detail-row.inline-edit:hover .inline-edit-icon,
.detail-row.inline-edit:focus-visible .inline-edit-icon {
  opacity: 1;
}

.detail-row.inline-edit.editing {
  cursor: default;
  background: transparent;
}
.detail-row.inline-edit.editing .inline-edit-icon { display: none; }
.detail-row.inline-edit.saving { opacity: .55; pointer-events: none; }

.inline-edit-empty { color: var(--color-text-muted); }

.inline-edit-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: inherit;
  padding: 4px 6px;
  margin-block: -4px;
  border-radius: var(--radius-sm);
  text-align: end;
}
.inline-edit-input:is(textarea) {
  text-align: start;
  min-height: 60px;
  resize: vertical;
}
.inline-edit-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}