/* =======================================================================
   GROUP PLACEMENT PROFILE — single authoritative stylesheet
   Loaded AFTER profile-fullscreen.css so these rules win all conflicts.
   ======================================================================= */

/* ── 1. Wrapper: padding lives here, nowhere else ── */
#profileModal[data-profile-type="group-placement"] .group-placement-profile {
  max-width: none !important;
  width: 100% !important;
  padding: 24px 28px 40px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* ── 2. profile-body / profile-details: no padding (wrapper above owns it) ── */
#profileModal[data-profile-type="group-placement"] .profile-body,
#profileModal[data-profile-type="group-placement"] .profile-details {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ── 3. Grid canvas: 3fr/2fr, uniform 16px gap, rows auto-sized by content ── */
#profileModal[data-profile-type="group-placement"] .profile-layout-modern.grid-canvas {
  display: grid !important;
  grid-template-columns: 3fr 2fr !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 16px !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* If column wrappers are present, dissolve them so cards share the same grid rows */
#profileModal[data-profile-type="group-placement"] #groupPlacementGridCanvas > .profile-content-area,
#profileModal[data-profile-type="group-placement"] #groupPlacementGridCanvas > .profile-sidebar-area {
  display: contents !important;
}

/* Every direct card child must sit flush: no rogue margins/padding offsets */
#profileModal[data-profile-type="group-placement"] #groupPlacementGridCanvas > .profile-card {
  margin: 0 !important;
  padding: 0 !important;
}

/* Neutralize any global adjacent-card spacing (e.g. .profile-card + .profile-card) */
#profileModal[data-profile-type="group-placement"] #groupPlacementGridCanvas > .profile-card + .profile-card {
  margin-top: 0 !important;
}

/* ── 4. Explicit card placement ── */
#profileModal[data-profile-type="group-placement"] #overviewCard         { grid-column: 1 !important; grid-row: 1 !important; align-self: stretch !important; }
#profileModal[data-profile-type="group-placement"] #metaCard             { grid-column: 2 !important; grid-row: 1 !important; align-self: stretch !important; }
#profileModal[data-profile-type="group-placement"] #placementDetailsCard { grid-column: 1 !important; grid-row: 2 !important; align-self: stretch !important; height: auto !important; max-height: none !important; min-height: 120px !important; overflow: visible !important; }
#profileModal[data-profile-type="group-placement"] #recentActivityCard   { grid-column: 2 !important; grid-row: 2 !important; align-self: stretch !important; height: 42vh !important; max-height: 42vh !important; min-height: 120px !important; overflow: hidden !important; }
#profileModal[data-profile-type="group-placement"] .free-text-card       { grid-column: 1 / -1 !important; grid-row: 3 !important; }
#profileModal[data-profile-type="group-placement"] #profileNotesCard     { grid-column: 1 / -1 !important; grid-row: 4 !important; align-self: start !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: hidden !important; }

/* Explicitly lock top-row cards to the same row baseline */
#profileModal[data-profile-type="group-placement"] #overviewCard,
#profileModal[data-profile-type="group-placement"] #metaCard {
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* ── 5. All cards: flex column, let the grid row set the height ── */
#profileModal[data-profile-type="group-placement"] .profile-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* Placement details card: allow content to stretch, no inner scrolls */
#profileModal[data-profile-type="group-placement"] #placementDetailsCard {
  overflow: visible !important;
}

/* ── 6. Card content: overview/meta use visible overflow so the auto row
        sizes to their full content height and both cards end up equal. ──  */
#profileModal[data-profile-type="group-placement"] .profile-card .profile-card-content {
  padding: 20px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: visible !important;   /* overrides fullscreen's overflow-y:auto so row-1 auto-sizes */
  overflow-x: hidden !important;
}

/* Row-2 cards: placementDetails flows visible (no inner scroll), activity scrolls */
#profileModal[data-profile-type="group-placement"] #placementDetailsCard .profile-card-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}
#profileModal[data-profile-type="group-placement"] #recentActivityCard .profile-card-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Notes card: compact mode (latest note + composer) */
#profileModal[data-profile-type="group-placement"] .notes-card .profile-card-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding-bottom: 12px !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
#profileModal[data-profile-type="group-placement"] .notes-card #profileNotesList {
  flex: 0 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 12px !important;
}
#profileModal[data-profile-type="group-placement"] .notes-card .note-add,
#profileModal[data-profile-type="group-placement"] .notes-card .note-add-external {
  flex: 0 0 auto !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.35) !important;
}

/* ── 7. Section headings ── */
#profileModal[data-profile-type="group-placement"] .profile-card .profile-section-heading {
  flex-shrink: 0 !important;
  padding: 16px 20px 12px !important;
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* Placement Details month navigation buttons */
/* (unchanged below) */
#profileModal[data-profile-type="group-placement"] .month-nav-btn {
  padding: 6px 8px !important;
  min-width: 32px;
  border-radius: 6px;
  background: #374151 !important;
  border: 1px solid #4b5563 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important;
  transition: all 0.2s ease;
}

#profileModal[data-profile-type="group-placement"] .month-nav-btn:hover {
  background: #1f2937 !important;
  border-color: #374151 !important;
}

#profileModal[data-profile-type="group-placement"] .month-nav-btn svg {
  stroke: white;
}

/* Data lists styling */
#profileModal[data-profile-type="group-placement"] .days-list > div:last-child,
#profileModal[data-profile-type="group-placement"] .expenses-list > div:last-child {
  padding: 8px 0;
  display: grid;
  gap: 8px;
  max-height: none !important;
  overflow-y: visible !important;
}

#profileModal[data-profile-type="group-placement"] .days-list > div:last-child {
  grid-template-columns: minmax(100px, 1fr) auto;
}

#profileModal[data-profile-type="group-placement"] .expenses-list > div:last-child {
  grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) auto;
}

#profileModal[data-profile-type="group-placement"] .days-list div[style*="display: contents"] > div:first-child,
#profileModal[data-profile-type="group-placement"] .expenses-list div[style*="display: contents"] > div:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 100px;
}

/* Container and header — fullscreen.css handles the container; only override what's specific to this profile */
#profileModal[data-profile-type="group-placement"] .profile-header { display:flex; justify-content:space-between; align-items:center; margin:0 auto; padding:12px 16px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--card-shadow); position:relative; max-width:980px; width:100%; box-sizing:border-box; flex-wrap:nowrap; gap:8px; }
#profileModal[data-profile-type="group-placement"] .profile-header-actions { display:flex; gap:10px; align-items:center; }
#profileModal[data-profile-type="group-placement"] .profile-header h2 { display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0; flex:1; font-size:inherit; font-weight:inherit; }
#profileModal[data-profile-type="group-placement"] .title-text { font-size:14px !important; font-weight:600 !important; color:var(--primary-dark, #1e2749) !important; line-height:1.2; }
#profileModal[data-profile-type="group-placement"] .profile-subtitle { font-size:12px !important; color:#64748b !important; line-height:1.2; }

/* ── 8. Overview internals ── */
#profileModal[data-profile-type="group-placement"] .avatar-wrapper { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
#profileModal[data-profile-type="group-placement"] .avatar-img { width:100%; height:100%; object-fit:cover; display:block; }
#profileModal[data-profile-type="group-placement"] .avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px; }
#profileModal[data-profile-type="group-placement"] .profile-overview-grid { display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:flex-start; }
#profileModal[data-profile-type="group-placement"] .overview-fields { display:flex; flex-direction:column; gap:12px; }
#profileModal[data-profile-type="group-placement"] .overview-fields > div { display:flex; align-items:baseline; gap:10px; }
#profileModal[data-profile-type="group-placement"] .overview-fields > div > strong { width:80px; flex:0 0 80px; }

/* ── 9. Meta internals ── */
#profileModal[data-profile-type="group-placement"] .meta-fields { display:flex; flex-direction:column; gap:12px; }
#profileModal[data-profile-type="group-placement"] .meta-fields > div { display:flex; align-items:baseline; gap:10px; }
#profileModal[data-profile-type="group-placement"] .meta-fields > div > strong { width:80px; flex:0 0 80px; }

/* ── 10. Notes internals ── */
#profileModal[data-profile-type="group-placement"] .note-item { padding:10px; border-radius:6px; }
#profileModal[data-profile-type="group-placement"] .note-meta { font-size:12px; margin-bottom:4px; }
#profileModal[data-profile-type="group-placement"] .note-content { white-space:pre-wrap; word-break:break-word; }
#profileModal[data-profile-type="group-placement"] .note-add textarea { width:100%; min-height:70px; border-radius:8px; padding:12px 14px; outline:none; box-sizing:border-box; }

/* ── 11. Activity internals ── */
#profileModal[data-profile-type="group-placement"] .activity-timeline { display:flex; flex-direction:column; gap:8px; }
#profileModal[data-profile-type="group-placement"] .activity-item { padding:10px; border-radius:6px; max-height:none; overflow:visible; }
#profileModal[data-profile-type="group-placement"] .activity-meta { font-size:12px; margin-bottom:4px; }
#profileModal[data-profile-type="group-placement"] .activity-desc { white-space:pre-wrap; }

/* ── 12. Misc component helpers ── */
#profileModal[data-profile-type="group-placement"] .grid-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
#profileModal[data-profile-type="group-placement"] .profile-title-block .title-text { line-height:1.1; }
#profileModal[data-profile-type="group-placement"] .profile-subtitle { font-size:14px; color:#64748b; line-height:1.1; }

/* ── 13. Maximised (card-expanded) placement-details-header ── */
/* Maximised: card fills screen, single scroll on card-content, no inner box scrolls */
#profileModal[data-profile-type="group-placement"] #placementDetailsCard.card-expanded {
  overflow: hidden !important;
}
#profileModal[data-profile-type="group-placement"] #placementDetailsCard.card-expanded .profile-card-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#placementDetailsCard.card-expanded .placement-details-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  padding: 28px 36px 24px !important;
  background: rgba(255,255,255,0.35) !important;
  border-bottom: 1px solid rgba(180,210,255,0.28) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#placementDetailsCard.card-expanded .month-navigation {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 280px !important;
  flex: 1 1 280px !important;
}
#placementDetailsCard.card-expanded .month-navigation > div:first-child {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
#placementDetailsCard.card-expanded #gpMonthTimelineHost {
  width: 100% !important;
  display: flex !important;
}