/* ═══════════════════════════════════════════════════════════════════
   PROFILE FULLSCREEN — CION CRM
   Transforms all non-invoice profile modals into a full-screen
   view occupying the entire content area (right of sidebar).

   Key principles:
   ─ No dark overlay: transparent modal background → body wallpaper shows
   ─ Search results hidden behind panel (not visible through glass)
   ─ Glass style matches saved-search-cards, NOT the old pale-turquoise
   ─ Single scroll: .profile-container is the ONE scroll container
   ─ All fixed card heights removed — cards grow with their content
   ─ Fully fluid — stretches to any viewport shape/size
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   VARIABLES (fall back to base.css values if not a theme)
   ───────────────────────────────────────────────────────────────── */
:root {
  --pf-glass-bg:        linear-gradient(145deg, rgba(255,255,255,0.46) 0%, rgba(230,240,255,0.38) 100%);
  --pf-glass-border:    rgba(255,255,255,0.55);
  --pf-glass-shadow:    0 8px 40px rgba(0,0,0,0.09), inset 0 1px 1px rgba(255,255,255,0.65);
  --pf-glass-blur:      18px;
  --pf-heading-bg:      rgba(255,255,255,0.32);
  --pf-heading-border:  rgba(255,255,255,0.42);
  --pf-card-hover:      0 12px 48px rgba(0,0,0,0.13), inset 0 2px 2px rgba(255,255,255,0.70);
}

/* ═══════════════════════════════════════════════════════════════════
   1.  MODAL OVERLAY — covers content area, no dark dim
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) {
  /* Cover content area to the right of the sidebar */
  position: fixed !important;
  top: 0 !important;
  left: var(--effective-sidebar-width, var(--sidebar-width, 260px)) !important;
  width: calc(100% - var(--effective-sidebar-width, var(--sidebar-width, 260px))) !important;
  height: 100vh !important;

  /* Transparent — body wallpaper/background shows through glass */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Single scroll lives in .profile-container, not here */
  overflow: hidden !important;

  /* Layout of the container child */
  display: none;          /* default hidden — JS sets style.display="flex" */
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  z-index: 1000 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2.  PROFILE CONTAINER — single glass panel, single scroll
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .profile-container {
  /* Fill parent (the modal overlay) */
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;

  /* THE single scroll container */
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* Layout — column, gap between header/body/notes/freetext */
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;

  /* Glass — matches saved-search-card style, NOT pale turquoise */
  background: var(--pf-glass-bg) !important;
  backdrop-filter: blur(var(--pf-glass-blur)) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(var(--pf-glass-blur)) saturate(1.55) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* Remove legacy sizing */
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3.  PROFILE HEADER — sticky, glass bar at top
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .profile-header {
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;

  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 18px 28px !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--pf-glass-border) !important;

  /* Elevated glass header */
  background: rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

/* Close button: fixed top-right of the content area */
#profileModal:not([data-profile-type="invoice"]) .close-modal {
  position: fixed !important;
  top: 12px !important;
  right: 20px !important;
  z-index: 9999 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: rgba(30,39,73,0.70) !important;
  cursor: pointer !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.48) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
#profileModal:not([data-profile-type="invoice"]) .close-modal:hover {
  background: rgba(255,255,255,0.75) !important;
  transform: scale(1.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4.  INNER PROFILE WRAPPERS — remove max-width caps, full bleed
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .candidate-profile,
#profileModal:not([data-profile-type="invoice"]) .client-profile,
#profileModal:not([data-profile-type="invoice"]) .company-profile,
#profileModal:not([data-profile-type="invoice"]) .placement-profile,
#profileModal:not([data-profile-type="invoice"]) .profile-body,
#profileModal:not([data-profile-type="invoice"]) .profile-details {
  max-width: none !important;
  width: 100% !important;
  padding: 24px 28px 40px !important;  /* 40px bottom = scrollable breathing room below last card */
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Compliance panel: also full width */
#profileModal:not([data-profile-type="invoice"]) #compliancePanel.profile-card {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Notes + free-text sections at bottom */
#profileModal:not([data-profile-type="invoice"]) #profileNotesSection,
#profileModal:not([data-profile-type="invoice"]) #profileFreeTextSection {
  padding: 0 28px !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 20px !important;
}
/* Collapse these sections when empty — candidate/client render notes inside #profileDetails */
#profileModal:not([data-profile-type="invoice"]) #profileNotesSection:empty,
#profileModal:not([data-profile-type="invoice"]) #profileFreeTextSection:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5.  PROFILE CARDS — glass matching saved-search-card
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .profile-card {
  background: linear-gradient(135deg,
    var(--glass-tint, rgba(230,240,255,0.22)),
    var(--glass-bg,   rgba(255,255,255,0.44))) !important;
  backdrop-filter: blur(var(--pf-glass-blur)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--pf-glass-blur)) saturate(1.5) !important;
  border: 1px solid var(--pf-glass-border) !important;
  border-radius: var(--glass-radius, 16px) !important;
  box-shadow: var(--pf-glass-shadow) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
#profileModal:not([data-profile-type="invoice"]) .profile-card:hover {
  box-shadow: var(--pf-card-hover) !important;
  transform: translateY(-1px) !important;
}

/* Card section headings: lighter glass, not opaque grey */
#profileModal:not([data-profile-type="invoice"]) .profile-card .profile-section-heading {
  background: var(--pf-heading-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--pf-heading-border) !important;
  color: var(--primary-dark, #1e2749) !important;
  border-radius: var(--glass-radius, 16px) var(--glass-radius, 16px) 0 0 !important;
}

/* All cards are flex columns so content + heading stack cleanly.
   Exclude #compliancePanel — it must respect its own display:none/flex state. */
#profileModal:not([data-profile-type="invoice"]) .profile-card:not(#compliancePanel) {
  display: flex !important;
  flex-direction: column !important;
}
/* Compliance panel: hidden by default; shown via .pf-open class set by JS */
#profileModal:not([data-profile-type="invoice"]) #compliancePanel {
  display: none !important;
}
#profileModal:not([data-profile-type="invoice"]) #compliancePanel.pf-open {
  display: flex !important;
  flex-direction: column !important;
}

/* Card content areas: transparent glass bg + universal internal scroll */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .profile-card .profile-card-content {
  background: transparent !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Sidebar detail box */
#profileModal:not([data-profile-type="invoice"]) .profile-details-sidebar {
  background: rgba(255,255,255,0.30) !important;
  border: 1px solid rgba(255,255,255,0.48) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6.  CARD HEIGHT GOVERNANCE — prevent endless growth on all profiles
   ═══════════════════════════════════════════════════════════════════ */
/* All non-notes cards are capped and scroll internally to prevent overgrowth. */
#profileModal:not([data-profile-type="invoice"]) .profile-card:not(.notes-card):not(#compliancePanel) {
  max-height: 42vh !important;
  min-height: 120px !important;
  height: 42vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Non-notes card content is the single scroll area. */
#profileModal:not([data-profile-type="invoice"]) .profile-card:not(.notes-card):not(#compliancePanel) .profile-card-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Notes card height is controlled by compact-notes logic (JS) in normal mode. */
#profileModal:not([data-profile-type="invoice"]) .notes-card {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Placement grid-canvas rows are auto so named-area cards size from content,
   but the 42vh cap above still applies to each card individually */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .grid-canvas {
  grid-auto-rows: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7.  SCROLL STRATEGY — card-content scrolls, inner lists don't nest-scroll
   ═══════════════════════════════════════════════════════════════════ */
/* Inner lists/timelines don't scroll themselves — the card-content above them does */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) #profileNotesList,
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .employee-list,
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .placement-history-list,
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .recent-activity-card .activity-timeline {
  max-height: none !important;
  overflow: visible !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* ── NOTES CARD: list scrolls, add-note pinned at bottom ──────────── */
/* Override the "overflow:visible" set above on #profileNotesList —
   inside the notes card the list must scroll independently so it never
   bleeds over the textarea below it. card-content is a rigid flex column. */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .notes-card .profile-card-content {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;   /* list scrolls; card-content does NOT */
  padding-bottom: 12px !important;
}
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .notes-card #profileNotesList {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Compact notes mode (minimized): show exactly one latest note row across all profiles. */
#profileModal .notes-card.notes-compact #profileNotesList {
  flex: 0 0 auto !important;
  height: var(--notes-compact-height, 96px) !important;
  min-height: var(--notes-compact-height, 96px) !important;
  max-height: var(--notes-compact-height, 96px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Expanded notes should never be compact-capped. */
#profileModal .notes-card.notes-expanded #profileNotesList {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .notes-card .note-add,
#profileModal:not([data-profile-type="invoice"]):not([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;
}

/* Free text textarea: fills available space but never pushes card taller */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="group-placement"]) .free-text-card textarea {
  min-height: 80px !important;
  max-height: none !important;
  resize: none !important;
  flex: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8.  60/40 CONSISTENT LAYOUT — top & bottom rows always aligned
   ═══════════════════════════════════════════════════════════════════ */

/* Top section: 60/40 two-column grid with TWO shared rows so that
   Overview height ≡ Meta height  (row 1)
   Contact height  ≡ Address height (row 2)
   CSS Subgrid makes both column wrappers participate in the same row tracks. */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-layout-modern {
  display: grid !important;
  grid-template-columns: 60fr 40fr !important;
  grid-template-rows: 42vh 42vh !important;   /* Fixed viewport rows — never stretches */
  gap: 16px !important;
  width: 100% !important;
}

/* Left column spans both rows; subgrid rows inherit parent row track sizes */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-content-area {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  grid-template-rows: subgrid !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* Right column (sidebar) — same: spans both rows, subgrid row sizing */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-sidebar-area {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  grid-template-rows: subgrid !important;
  align-items: stretch !important;
  width: auto !important;
  flex-shrink: unset !important;
  min-width: 0 !important;
}

/* Cards inside each column fill their shared row height */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-content-area > .profile-card,
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-sidebar-area > .profile-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Bottom row: Free Text (60%) + Recent Activity (40%); fixed height, stretch to fill */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-paired-row {
  max-width: none !important;
  width: 100% !important;
  height: 42vh !important;        /* Fixed — matches subgrid rows above */
  grid-template-columns: 60fr 40fr !important;
  align-items: stretch !important;
}

/* Paired-row sides: flex column so card fills the row height */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-paired-row .paired-left,
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-paired-row .paired-right {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Card inside each side stretches to row height = free-text ≡ recent-activity */
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-paired-row .paired-left > .profile-card,
#profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-paired-row .paired-right > .profile-card {
  flex: 1 !important;
  min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   9.  INPUTS, TEXTAREAS, SELECTS — glass tinted
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .profile-card input:not([type="checkbox"]):not([type="radio"]),
#profileModal:not([data-profile-type="invoice"]) .profile-card textarea,
#profileModal:not([data-profile-type="invoice"]) .profile-card select {
  background: rgba(255,255,255,0.58) !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 8px !important;
  color: #0f172a !important;
}
#profileModal:not([data-profile-type="invoice"]) .profile-card input:focus,
#profileModal:not([data-profile-type="invoice"]) .profile-card textarea:focus,
#profileModal:not([data-profile-type="invoice"]) .profile-card select:focus {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(99,153,255,0.55) !important;
  box-shadow: 0 0 0 3px rgba(99,153,255,0.15) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   10.  NOTES / ACTIVITY ITEMS — glass chips
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .note-item,
#profileModal:not([data-profile-type="invoice"]) .activity-item {
  background: rgba(255,255,255,0.40) !important;
  border: 1px solid rgba(255,255,255,0.52) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   11.  COMPANY — keep its 7-col grid, just expand it to full width
        in fullscreen mode (do NOT override display:grid to flex)
   ═══════════════════════════════════════════════════════════════════ */
#profileModal[data-profile-type="company"] .company-profile {
  max-width: none !important;
  width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  /* PRESERVE display:grid from profile-company.css — do not override */
  height: auto !important;
  min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   12.  PROFILE FIELDS TEXT — readable on glass
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .profile-field label {
  color: rgba(71,85,105,0.9) !important;
}
#profileModal:not([data-profile-type="invoice"]) .profile-field span {
  color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════════════
   13.  AVATAR — glass ring
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .avatar-wrapper {
  border: 2px solid rgba(255,255,255,0.75) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   14.  RESPONSIVE — collapse to single column on narrow viewports
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #profileModal:not([data-profile-type="invoice"]) {
    left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  #profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-layout-modern {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  /* Placement + group-placement: collapse to single column on narrow screens */
  #profileModal[data-profile-type="placement"] .profile-layout-modern.grid-canvas,
  #profileModal[data-profile-type="group-placement"] .profile-layout-modern.grid-canvas {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  /* Reset explicit column/row placements so cards stack naturally in single column */
  #profileModal[data-profile-type="group-placement"] #overviewCard,
  #profileModal[data-profile-type="group-placement"] #metaCard,
  #profileModal[data-profile-type="group-placement"] #placementDetailsCard,
  #profileModal[data-profile-type="group-placement"] #recentActivityCard,
  #profileModal[data-profile-type="group-placement"] .free-text-card,
  #profileModal[data-profile-type="group-placement"] #profileNotesCard {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Reset subgrid spans so each column wrapper stacks naturally */
  #profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-content-area,
  #profileModal:not([data-profile-type="invoice"]):not([data-profile-type="placement"]):not([data-profile-type="group-placement"]):not([data-profile-type="company"]) .profile-sidebar-area {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-rows: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  #profileModal:not([data-profile-type="invoice"]) .profile-content-area > .profile-card,
  #profileModal:not([data-profile-type="invoice"]) .profile-sidebar-area > .profile-card {
    height: auto !important;
    max-height: none !important;  /* On mobile cards grow with content */
  }
  /* Also reset paired-row and other capped cards on mobile */
  #profileModal:not([data-profile-type="invoice"]) .profile-paired-row {
    height: auto !important;
    max-height: none !important;
    max-height: none !important;
  }
  #profileModal:not([data-profile-type="invoice"]) .free-text-card,
  #profileModal:not([data-profile-type="invoice"]) .recent-activity-card,
  #profileModal:not([data-profile-type="invoice"]) .notes-card,
  #profileModal:not([data-profile-type="invoice"]) .profile-two-col-pair .col > .profile-card {
    max-height: none !important;
    height: auto !important;
  }
  #profileModal:not([data-profile-type="invoice"]) .profile-two-col-pair {
    grid-template-columns: 1fr !important;
  }
  #profileModal:not([data-profile-type="invoice"]) .profile-paired-row {
    grid-template-columns: 1fr !important;
  }
  #profileModal:not([data-profile-type="invoice"]) .company-profile {
    grid-template-columns: 1fr !important;
  }
  #profileModal:not([data-profile-type="invoice"]) .company-profile .overview-card,
  #profileModal:not([data-profile-type="invoice"]) .company-profile .meta-card,
  #profileModal:not([data-profile-type="invoice"]) .company-profile .address-card,
  #profileModal:not([data-profile-type="invoice"]) .company-profile .contact-card,
  #profileModal:not([data-profile-type="invoice"]) .company-profile .free-text-card,
  #profileModal:not([data-profile-type="invoice"]) .company-profile .recent-activity-card,
  #profileModal:not([data-profile-type="invoice"]) .company-profile .notes-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NUCLEAR OVERRIDE — kill any injected max-width / margin:auto that
   causes side gaps when DevTools or a narrow viewport is active.
   Targets all non-invoice profiles regardless of which module
   injected legacy container styles.
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .profile-container,
#profileModal:not([data-profile-type="invoice"]) .profile-header,
#profileModal:not([data-profile-type="invoice"]) .profile-body,
#profileModal:not([data-profile-type="invoice"]) .profile-details,
#profileModal:not([data-profile-type="invoice"]) .candidate-profile,
#profileModal:not([data-profile-type="invoice"]) .client-profile,
#profileModal:not([data-profile-type="invoice"]) .company-profile,
#profileModal:not([data-profile-type="invoice"]) .placement-profile {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════
   16.  PLACEMENT & GROUP-PLACEMENT — 60/40 columns + 16px uniform gap
        These profiles use named grid-areas (overview/meta, details/activity,
        notes). Rows are already shared so adjacent cards are equal height.
        We only override column proportions and gap for consistency.
   ═══════════════════════════════════════════════════════════════════ */
#profileModal[data-profile-type="placement"] .profile-layout-modern.grid-canvas {
  grid-template-columns: 60fr 40fr !important;
  gap: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   15.  SCROLLBAR STYLING — subtle glass scrollbar
   ═══════════════════════════════════════════════════════════════════ */
#profileModal:not([data-profile-type="invoice"]) .profile-container::-webkit-scrollbar {
  width: 6px;
}
#profileModal:not([data-profile-type="invoice"]) .profile-container::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.15);
}
#profileModal:not([data-profile-type="invoice"]) .profile-container::-webkit-scrollbar-thumb {
  background: rgba(100,130,200,0.35);
  border-radius: 6px;
}
#profileModal:not([data-profile-type="invoice"]) .profile-container::-webkit-scrollbar-thumb:hover {
  background: rgba(100,130,200,0.55);
}