/* =============================================================================
   Right panel layout v4 — travel hugs content; QA taller, buttons inside frame.
   Must load LAST. Deployed 2026-07-25.
   ============================================================================= */

#rightPanel.right-panel {
  --rp-gap: clamp(4px, 0.7vh, 8px);
  --rp-pad-y: 4px;
  --rp-pad-x: 8px;
  --rp-row-h: clamp(20px, 2.2vh, 26px);
  --rp-row-gap: 2px;
  --rp-qa-pad-t: 6px;
  --rp-qa-pad-x: 8px;
  --rp-qa-pad-b: 10px; /* keep buttons clear of green border */
  --rp-qa-gap: clamp(5px, 0.55vh, 8px);
  --rp-qa-icon: clamp(15px, 2vh, 22px);
  --rp-qa-font: clamp(9px, 1.05vh, 12px);
}

#rightPanel > .profile-middle {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--rp-gap) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#rightPanel > .profile-middle > .profile-nav {
  display: contents !important;
}

#rightPanel > .profile-middle > .profile-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--rp-gap) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* SOCIAL + TRAVEL: fit-content, almost no bottom dead air */
#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  height: fit-content !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: var(--rp-pad-y) var(--rp-pad-x) 2px !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title {
  flex: 0 0 auto !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 0 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-row-gap) !important;
  row-gap: var(--rp-row-gap) !important;
  overflow: visible !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  flex: 0 0 var(--rp-row-h) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: var(--rp-row-h) !important;
  min-height: var(--rp-row-h) !important;
  max-height: var(--rp-row-h) !important;
  margin: 0 !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}

/* QUICK ACTIONS — grow; buttons never cross the card border */
#rightPanel #quickActions.profile-block,
#rightPanel #quickActions {
  flex: 3.8 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--rp-qa-pad-t) var(--rp-qa-pad-x) var(--rp-qa-pad-b) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#rightPanel #quickActions .profile-caption {
  flex: 0 0 auto !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

#rightPanel #quickActions .quick-actions-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--rp-qa-gap) !important;
  row-gap: var(--rp-qa-gap) !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#rightPanel #quickActions .quick-action-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  gap: 7px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

#rightPanel #quickActions .quick-action-btn i {
  flex: 0 0 auto !important;
  width: var(--rp-qa-icon) !important;
  min-width: var(--rp-qa-icon) !important;
  font-size: var(--rp-qa-icon) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#rightPanel #quickActions .quick-action-btn span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: var(--rp-qa-font) !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#rightPanel .travel-stats-block {
  flex: 0.5 1 0 !important;
  min-height: 0 !important;
  padding: var(--rp-pad-y) var(--rp-pad-x) !important;
  overflow: hidden !important;
}

#rightPanel .travel-stats-block .profile-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  gap: 1px !important;
  overflow: hidden !important;
}

#rightPanel .travel-stats-block .profile-list li {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1px 6px !important;
}

#rightPanel > .profile-nav-section--system {
  flex: 0 0 auto !important;
  padding: var(--rp-pad-y) var(--rp-pad-x) !important;
}

@media (max-height: 899px) {
  #rightPanel.right-panel {
    --rp-gap: 4px;
    --rp-pad-y: 3px;
    --rp-row-h: 18px;
    --rp-row-gap: 1px;
    --rp-qa-pad-t: 5px;
    --rp-qa-pad-b: 8px;
    --rp-qa-gap: 3px;
    --rp-qa-icon: 14px;
    --rp-qa-font: 9px;
  }
  #rightPanel > .profile-header {
    padding-bottom: 4px !important;
  }
}

@media (max-height: 768px) {
  #rightPanel.right-panel {
    --rp-gap: 3px;
    --rp-pad-y: 2px;
    --rp-row-h: 16px;
    --rp-qa-pad-t: 4px;
    --rp-qa-pad-b: 7px;
    --rp-qa-gap: 2px;
    --rp-qa-icon: 13px;
    --rp-qa-font: 8.5px;
  }
}

@media (max-height: 680px) {
  #rightPanel.right-panel {
    --rp-gap: 2px;
    --rp-pad-y: 2px;
    --rp-row-h: 14px;
    --rp-qa-pad-t: 3px;
    --rp-qa-pad-b: 6px;
    --rp-qa-gap: 2px;
    --rp-qa-icon: 12px;
    --rp-qa-font: 8px;
  }
}