/* Monthly Summary grid responsiveness */ #profileModal[data-profile-type="placement"] .temp-summary-card .summary-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } @media (max-width: 800px) { #profileModal[data-profile-type="placement"] .temp-summary-card .summary-grid { grid-template-columns: 1fr; } } /* Notes maximize: true fullscreen overlay — card is moved to by JS */ /* When the card is on , these styles ensure it fills the viewport */ #profileNotesCard.notes-expanded { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; max-width: none !important; width: 100vw !important; height: 100vh !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; /* Frosted glass — NOT dark */ background: rgba(240, 245, 255, 0.88) !important; backdrop-filter: blur(32px) saturate(1.4) !important; -webkit-backdrop-filter: blur(32px) saturate(1.4) !important; box-shadow: none !important; border: none !important; display: flex !important; flex-direction: column !important; } #profileNotesCard.notes-expanded .profile-section-heading { flex-shrink: 0 !important; background: rgba(255,255,255,0.55) !important; color: #0f172a !important; border-bottom: 1px solid rgba(148,163,184,0.25) !important; padding: 14px 20px 14px 28px !important; } #profileNotesCard.notes-expanded .profile-card-content { flex: 1 1 auto !important; max-height: none !important; overflow: hidden !important; padding: 16px 16px 0 16px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; background: transparent !important; } #profileNotesCard.notes-expanded #profileNotesList { max-height: none !important; flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; } #profileNotesCard.notes-expanded .note-add, #profileNotesCard.notes-expanded #profileNotesInputRow, #profileNotesCard.notes-expanded .note-add-external { flex: 0 0 auto !important; width: 100% !important; max-width: none !important; display: block !important; visibility: visible !important; box-sizing: border-box !important; padding: 10px 0 14px 0 !important; border-top: 1px solid rgba(148,163,184,0.25) !important; background: transparent !important; } #profileNotesCard.notes-expanded .note-add textarea, #profileNotesCard.notes-expanded #newCommentInput, #profileNotesCard.notes-expanded .note-add-external textarea { width: 100% !important; min-width: 100% !important; /* 1 line tall */ height: 44px !important; min-height: 44px !important; max-height: 44px !important; line-height: 1.5 !important; padding: 10px 14px !important; display: block !important; box-sizing: border-box !important; resize: none !important; color: #0f172a !important; background: rgba(255,255,255,0.75) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(148,163,184,0.4) !important; border-radius: 8px !important; } /* Prevent ALL scrolling while notes are fullscreen */ body.notes-overlay-open { overflow: hidden !important; } body.notes-overlay-open #profileModal { overflow: hidden !important; overflow-y: hidden !important; } /* Notes expanded: readable on frosted glass */ #profileNotesCard.notes-expanded .note-item { background: rgba(255,255,255,0.60) !important; border: 1px solid rgba(148,163,184,0.22) !important; color: #0f172a !important; } #profileNotesCard.notes-expanded .note-item .note-content, #profileNotesCard.notes-expanded .note-item .note-meta { color: #1e293b !important; } #profileNotesCard.notes-expanded .note-meta { color: #475569 !important; } /* Fireproof rule: no negative margins between notes list and input; rely on grid gap only */ #profileModal[data-profile-type="placement"] #profileNotesInputRow { margin-top: 0; } /* Placement profile isolated styles (modern) */ /* ── Minimised placement-details-header: glass card + stacked layout ── */ #profileModal[data-profile-type="placement"] .placement-details-header { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 16px !important; background: rgba(248,250,252,0.45) !important; backdrop-filter: blur(12px) saturate(1.3) !important; -webkit-backdrop-filter: blur(12px) saturate(1.3) !important; padding: 12px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.40) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35) !important; } #profileModal[data-profile-type="placement"] .placement-details-header .candidate-info { display: flex !important; flex-direction: column !important; gap: 4px !important; } #profileModal[data-profile-type="placement"] .placement-details-header .candidate-info > div:first-child { font-size: 0.68rem !important; font-weight: 700 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; } #profileModal[data-profile-type="placement"] .placement-details-header .candidate-info > div:last-child { font-size: 1rem !important; font-weight: 700 !important; color: #1e293b !important; } #profileModal[data-profile-type="placement"] .placement-details-header .month-navigation { display: flex !important; flex-direction: column !important; gap: 4px !important; } #profileModal[data-profile-type="placement"] .placement-details-header .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; } #profileModal[data-profile-type="placement"] .placement-details-header .month-navigation > div:last-child { display: flex !important; align-items: center !important; gap: 8px !important; } /* Month navigation buttons for placement details — dark style matching group placement */ #profileModal[data-profile-type="placement"] .month-nav-btn { padding: 6px 10px !important; min-width: 32px !important; border-radius: 8px !important; background: #374151 !important; border: 1px solid #4b5563 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; transition: all 0.2s ease !important; } #profileModal[data-profile-type="placement"] .month-nav-btn:hover { background: #1f2937 !important; border-color: #374151 !important; } #profileModal[data-profile-type="placement"] .month-nav-btn svg { stroke: white !important; } /* Data lists styling for placement details — no scroll, expand to fit all data */ #profileModal[data-profile-type="placement"] .days-list > div:last-child, #profileModal[data-profile-type="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="placement"] .days-list > div:last-child { grid-template-columns: minmax(100px, 1fr) auto; } #profileModal[data-profile-type="placement"] .expenses-list > div:last-child { grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) auto; } #profileModal[data-profile-type="placement"] .days-list div[style*="display: contents"] > div:first-child, #profileModal[data-profile-type="placement"] .expenses-list div[style*="display: contents"] > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 100px; } /* Container and header */ /* .profile-container — glass/fullscreen styles handle background; no white box */ #profileModal[data-profile-type="placement"] .profile-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; position:relative; width:100%; box-sizing:border-box; flex-wrap:nowrap; gap:8px; } #profileModal[data-profile-type="placement"] .profile-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } #profileModal[data-profile-type="placement"] .profile-header h2 { color:var(--primary-dark); font-size:2rem; font-weight:700; display:flex; align-items:center; gap:12px; margin:0; flex:1; } /* Ensure our rendered wrapper is constrained within the modal */ #profileModal[data-profile-type="placement"] .placement-profile { max-width: 980px; width: 100%; margin: 0 auto; padding: 0 12px 0; box-sizing: border-box; } /* Layout */ #profileModal[data-profile-type="placement"] .profile-body { display:block; padding:0 12px 40px; position:relative; max-width:980px; width:100%; margin:0 auto; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; } /* Unified grid canvas */ #profileModal[data-profile-type="placement"] .grid-canvas { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 20px; align-items: stretch; box-sizing: border-box; overflow: visible; } /* Height utility classes */ #profileModal[data-profile-type="placement"] .grid-canvas .cell { height: var(--cell); max-height: var(--cell); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-1 { height: var(--cell); max-height: var(--cell); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-2 { height: calc(var(--cell) * 2); max-height: calc(var(--cell) * 2); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-3 { height: calc(var(--cell) * 3); max-height: calc(var(--cell) * 3); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-4 { height: calc(var(--cell) * 4); max-height: calc(var(--cell) * 4); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-5 { height: calc(var(--cell) * 5); max-height: calc(var(--cell) * 5); } /* Let wrapper columns dissolve so their children become grid items */ #profileModal[data-profile-type="placement"] .grid-canvas > .profile-content-area, #profileModal[data-profile-type="placement"] .grid-canvas > .profile-sidebar-area { display: contents; } /* Utility classes for height and span */ #profileModal[data-profile-type="placement"] .grid-canvas .cell { height: var(--cell); max-height: var(--cell); min-height: 0; } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-0_25 { height: calc(var(--cell) * 0.25); max-height: calc(var(--cell) * 0.25); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-0_5 { height: calc(var(--cell) * 0.5); max-height: calc(var(--cell) * 0.5); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-0_75 { height: calc(var(--cell) * 0.75); max-height: calc(var(--cell) * 0.75); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-1 { height: var(--cell); max-height: var(--cell); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-2 { height: calc(var(--cell) * 2); max-height: calc(var(--cell) * 2); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-4 { height: calc(var(--cell) * 4); max-height: calc(var(--cell) * 4); } #profileModal[data-profile-type="placement"] .grid-canvas .hcell-5 { height: calc(var(--cell) * 5); max-height: calc(var(--cell) * 5); } #profileModal[data-profile-type="placement"] .grid-canvas .span-2 { grid-column: span 2; } /* Uniform gaps: cards rely on the container gap; remove stray margins */ #profileModal[data-profile-type="placement"] .profile-content-area > .profile-card, #profileModal[data-profile-type="placement"] .profile-sidebar-area > .profile-card { margin:0; } /* Card sizing */ #profileModal[data-profile-type="placement"] .contact-card { display:flex; flex-direction:column; } #profileModal[data-profile-type="placement"] .address-card { display:flex; flex-direction:column; } #profileModal[data-profile-type="placement"] .contact-card .profile-card-content, #profileModal[data-profile-type="placement"] .address-card .profile-card-content { flex:1; min-height:0; overflow:auto; } /* Paired row */ /* Legacy paired row not used now; keep neutral if present */ #profileModal[data-profile-type="placement"] .profile-paired-row { display:block; padding:0; margin:0; } /* Cards */ /* .profile-card & .profile-section-heading — glass/fullscreen.css handles these */ #profileModal[data-profile-type="placement"] .profile-card { max-width:100%; margin:0; display:flex; flex-direction:column; min-height:0; overflow: hidden; } #profileModal[data-profile-type="placement"] .profile-card .profile-section-heading { padding:16px 20px 12px; margin:0; font-size:1.1rem; font-weight:600; display:flex; align-items:center; gap:8px; flex:0 0 auto; } #profileModal[data-profile-type="placement"] .profile-card .profile-card-content { padding:20px; flex:1 1 auto; overflow:auto; min-height:0; } /* Meta + Contact stack in one cell (two equal halves) */ #profileModal[data-profile-type="placement"] #metaContactStack { display:grid; grid-template-rows: 1fr 1fr; gap:20px; min-height: var(--cell); } #profileModal[data-profile-type="placement"] #metaContactStack .profile-card.mini { display:flex; flex-direction:column; min-height:0; } #profileModal[data-profile-type="placement"] #metaContactStack .profile-card.mini .profile-card-content { flex:1; overflow:auto; } /* Avatar block */ #profileModal[data-profile-type="placement"] .avatar-block { display:flex; flex-direction:column; align-items:center; gap:8px; } #profileModal[data-profile-type="placement"] .avatar-wrapper { width:96px; height:96px; border-radius:50%; background:#f1f5f9; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.06); } #profileModal[data-profile-type="placement"] .avatar-img { width:100%; height:100%; object-fit:cover; display:block; } #profileModal[data-profile-type="placement"] .avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#334155; font-weight:700; font-size:28px; } /* Overview grid */ #profileModal[data-profile-type="placement"] .profile-overview-grid { display:grid; grid-template-columns: 120px 1fr; gap:16px; align-items:flex-start; } #profileModal[data-profile-type="placement"] .overview-fields { display:flex; flex-direction:column; gap:6px; } #profileModal[data-profile-type="placement"] .overview-fields > div { display:flex; align-items:baseline; gap:10px; } #profileModal[data-profile-type="placement"] .overview-fields > div > strong { width:110px; flex:0 0 110px; text-align:left; padding-right:4px; } /* Meta card */ #profileModal[data-profile-type="placement"] .meta-fields { display:flex; flex-direction:column; gap:6px; } #profileModal[data-profile-type="placement"] .meta-fields > div { display:flex; align-items:baseline; gap:10px; } #profileModal[data-profile-type="placement"] .meta-fields > div > strong { width:110px; flex:0 0 110px; text-align:left; padding-right:4px; } /* Simple two-column grid */ #profileModal[data-profile-type="placement"] .grid-two { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:12px; } /* Notes list & card (match candidate) */ #profileModal[data-profile-type="placement"] #profileNotesList { max-height: none; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:6px; } #profileModal[data-profile-type="placement"] .note-item { padding:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; } #profileModal[data-profile-type="placement"] .note-meta { font-size:12px; color:#64748b; margin-bottom:4px; } #profileModal[data-profile-type="placement"] .note-content { white-space:pre-wrap; word-break:break-word; color:#0f172a; } #profileModal[data-profile-type="placement"] .note-add textarea { width:100%; min-height:70px; } #profileModal[data-profile-type="placement"] .notes-card { margin: 0; height: auto; display:flex; flex-direction:column; } #profileModal[data-profile-type="placement"] .notes-card .profile-card-content { padding-bottom: 12px; flex: 1 1 auto; display:flex; flex-direction:column; min-height:0; } #profileModal[data-profile-type="placement"] .notes-card #profileNotesList { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height:0; } #profileModal[data-profile-type="placement"] .notes-card .note-add { flex: 0 0 auto; } /* Input styles */ #profileModal[data-profile-type="placement"] .note-add, #profileModal[data-profile-type="placement"] .note-add-external { width:100%; } #profileModal[data-profile-type="placement"] .note-add textarea { border:1px solid #e2e8f0; border-radius:8px; padding:12px 14px; background:#f8fafc; outline:none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; width:100% !important; min-height:120px !important; box-sizing:border-box; display:block; } #profileModal[data-profile-type="placement"] .note-add textarea:focus { border-color:#94a3b8; background:#ffffff; box-shadow:0 0 0 3px rgba(148,163,184,0.25), inset 0 1px 2px rgba(0,0,0,0.05); } #profileModal[data-profile-type="placement"] .note-add textarea::placeholder { color:#94a3b8; } #profileModal[data-profile-type="placement"] .note-add > div { margin-top:10px !important; } /* Enforce full-width sleek textarea identical to candidate (internal and external) */ #profileModal[data-profile-type="placement"] #profileNotesCard .note-add textarea, #profileModal[data-profile-type="placement"] .note-add-external textarea { width: 100% !important; display: block; box-sizing: border-box; appearance: none; -webkit-appearance: none; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 12px 14px !important; background: #f8fafc !important; outline: none !important; resize: vertical; } /* Make sure the input block has breathing room and is not collapsed */ #profileModal[data-profile-type="placement"] #profileNotesCard .note-add, #profileModal[data-profile-type="placement"] .note-add-external { padding-top: 8px; } /* External input row as a clear, separate card */ #profileModal[data-profile-type="placement"] .notes-input-card.profile-card { display:flex; flex-direction:column; } #profileModal[data-profile-type="placement"] .notes-input-card .profile-card-content { padding: 12px 16px; } /* Activity */ #profileModal[data-profile-type="placement"] .activity-timeline { display:flex; flex-direction:column; gap:8px; } #profileModal[data-profile-type="placement"] .activity-item { padding:10px; border:1px solid #e2e8f0; border-radius:6px; background:#fff; } #profileModal[data-profile-type="placement"] .activity-meta { font-size:12px; color:#64748b; margin-bottom:4px; } #profileModal[data-profile-type="placement"] .activity-desc { white-space:pre-wrap; } /* Recent Activity: single scroll for the entire log, fixed card height provided by grid (e.g., hcell-2) */ #profileModal[data-profile-type="placement"] #recentActivityCard .profile-card-content { overflow-y: auto; overflow-x: hidden; height: 100%; max-height: 100%; } #profileModal[data-profile-type="placement"] .activity-item { max-height: none; overflow: visible; } /* Header title block */ #profileModal[data-profile-type="placement"] .profile-title-block { display:flex; flex-direction:column; align-items:flex-start; gap:4px; } #profileModal[data-profile-type="placement"] .profile-title-block .title-text { line-height:1.1; } #profileModal[data-profile-type="placement"] .profile-subtitle { font-size:14px; color:#64748b; line-height:1.1; } /* ======================================================================= GLASS LAYOUT OVERRIDES — loaded AFTER profile-fullscreen.css These rules fix layout and apply glass styling matching group-placement. ======================================================================= */ /* ── Grid: 3fr/2fr matching group-placement ── */ #profileModal[data-profile-type="placement"] .profile-layout-modern.grid-canvas { display: grid !important; grid-template-columns: 3fr 2fr !important; grid-template-rows: auto auto auto auto !important; grid-template-areas: none !important; gap: 16px !important; align-items: stretch !important; width: 100% !important; box-sizing: border-box !important; } /* Dissolve wrapper divs so all cards are direct grid items */ #profileModal[data-profile-type="placement"] #placementGridCanvas > .profile-content-area, #profileModal[data-profile-type="placement"] #placementGridCanvas > .profile-sidebar-area { display: contents !important; } #profileModal[data-profile-type="placement"] #placementGridCanvas > .profile-card { margin: 0 !important; padding: 0 !important; } #profileModal[data-profile-type="placement"] #placementGridCanvas > .profile-card + .profile-card { margin-top: 0 !important; } /* ── Explicit grid placement ── */ #profileModal[data-profile-type="placement"] #overviewCard { grid-column: 1 !important; grid-row: 1 !important; align-self: stretch !important; } #profileModal[data-profile-type="placement"] #metaCard { grid-column: 2 !important; grid-row: 1 !important; align-self: stretch !important; } #profileModal[data-profile-type="placement"] #placementDetailsCard { grid-column: 1 !important; grid-row: 2 !important; align-self: stretch !important; } #profileModal[data-profile-type="placement"] #recentActivityCard { grid-column: 2 !important; grid-row: 2 !important; align-self: stretch !important; } #profileModal[data-profile-type="placement"] .free-text-card { grid-column: 1 / -1 !important; grid-row: 3 !important; height: auto !important; max-height: none !important; min-height: 0 !important; } #profileModal[data-profile-type="placement"] #profileNotesCard { grid-column: 1 / -1 !important; grid-row: 3 !important; align-self: start !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: hidden !important; } /* ── Card sizing (beats fullscreen.css height governance) ── */ #profileModal[data-profile-type="placement"] #overviewCard, #profileModal[data-profile-type="placement"] #metaCard { height: auto !important; max-height: none !important; min-height: 0 !important; } #profileModal[data-profile-type="placement"] #placementDetailsCard { height: auto !important; max-height: none !important; min-height: 120px !important; overflow: visible !important; } #profileModal[data-profile-type="placement"] #recentActivityCard { height: 42vh !important; max-height: 42vh !important; min-height: 120px !important; overflow: hidden !important; } /* ── All cards: flex column ── */ #profileModal[data-profile-type="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="placement"] #placementDetailsCard { overflow: visible !important; } /* ── Card content: row-1 visible, row-2 scroll ── */ #profileModal[data-profile-type="placement"] #overviewCard .profile-card-content, #profileModal[data-profile-type="placement"] #metaCard .profile-card-content { padding: 20px !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: visible !important; overflow-x: hidden !important; } #profileModal[data-profile-type="placement"] #placementDetailsCard .profile-card-content { padding: 20px !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: visible !important; overflow-x: hidden !important; } #profileModal[data-profile-type="placement"] #recentActivityCard .profile-card-content { padding: 20px !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } /* ── Section headings: glass ── */ #profileModal[data-profile-type="placement"] .profile-card .profile-section-heading { background: var(--pf-heading-bg, rgba(255,255,255,0.32)) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-bottom: 1px solid var(--pf-heading-border, rgba(255,255,255,0.42)) !important; color: var(--primary-dark, #1e2749) !important; border-radius: var(--glass-radius, 16px) var(--glass-radius, 16px) 0 0 !important; flex-shrink: 0 !important; padding: 16px 20px 12px !important; margin: 0 !important; font-size: 1.1rem !important; font-weight: 600 !important; } /* ── Note items: glass ── */ #profileModal[data-profile-type="placement"]:not(.notes-overlay-open) .note-item { background: rgba(248,250,252,0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.42) !important; border-radius: 8px !important; } /* ── Activity items: glass ── */ #profileModal[data-profile-type="placement"] #recentActivityCard .activity-item { background: rgba(255,255,255,0.35) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.40) !important; border-radius: 8px !important; } /* ── Notes card: compact layout ── */ #profileModal[data-profile-type="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="placement"] .notes-card .note-add, #profileModal[data-profile-type="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; } /* ── Wrapper: full bleed ── */ #profileModal[data-profile-type="placement"] .placement-profile { max-width: none !important; width: 100% !important; padding: 24px 28px 40px !important; box-sizing: border-box !important; margin: 0 !important; } #profileModal[data-profile-type="placement"] .profile-body, #profileModal[data-profile-type="placement"] .profile-details { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* ── Month nav buttons inside the expanded card — dark style matching group placement ── */ #placementDetailsCard.card-expanded .month-nav-btn { padding: 8px 12px !important; min-width: 36px !important; border-radius: 8px !important; background: #374151 !important; border: 1px solid #4b5563 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; transition: all 0.2s ease !important; } #placementDetailsCard.card-expanded .month-nav-btn:hover { background: #1f2937 !important; border-color: #374151 !important; } #placementDetailsCard.card-expanded .month-nav-btn svg { stroke: white !important; } /* Empty states in the expanded lists */ #placementDetailsCard.card-expanded .days-list > div:last-child > div[style*="grid-column"], #placementDetailsCard.card-expanded .expenses-list > div:last-child > div[style*="grid-column"] { padding: 32px !important; text-align: center !important; color: #94a3b8 !important; font-style: italic !important; font-size: 0.95rem !important; grid-column: 1 / -1 !important; } /* Override JS inline padding — we control layout here */ #placementDetailsCard.card-expanded .profile-card-content { display: grid !important; grid-template-columns: 1fr 280px !important; grid-template-rows: auto auto auto !important; gap: 0 !important; padding: 0 !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; background: transparent !important; } /* Hide the redundant start-date row */ #placementDetailsCard.card-expanded .grid-two { display: none !important; } /* ── ROW 1 LEFT: Candidate name + Month navigation ── */ #placementDetailsCard.card-expanded .placement-details-header { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 40px !important; padding: 32px 40px 28px !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; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; margin: 0 !important; } #placementDetailsCard.card-expanded .candidate-info { display: flex !important; flex-direction: column !important; gap: 4px !important; } #placementDetailsCard.card-expanded .candidate-info > 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 .candidate-info > div:last-child { font-size: 2rem !important; font-weight: 800 !important; color: #1e293b !important; line-height: 1.1 !important; } #placementDetailsCard.card-expanded .month-navigation { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !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 #monthLabel { font-size: 1.5rem !important; font-weight: 700 !important; color: #1e293b !important; min-width: 150px !important; text-align: center !important; } /* ── ROW 1 RIGHT: Payment Status ── */ #placementDetailsCard.card-expanded .payment-status { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 24px !important; border-left: 1px solid rgba(180,210,255,0.28) !important; border-bottom: 1px solid rgba(180,210,255,0.28) !important; background: rgba(255,255,255,0.30) !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-align: center !important; } /* Simplify payment status inner layout */ #placementDetailsCard.card-expanded .payment-status > div { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 100% !important; } #placementDetailsCard.card-expanded .payment-status span[style*="font-weight: 500"] { font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #64748b !important; } #placementDetailsCard.card-expanded #monthPaidBtn { width: 100% !important; text-align: center !important; font-size: 0.85rem !important; padding: 10px 16px !important; } /* ── ROW 2 LEFT: Summary Stats ── */ #placementDetailsCard.card-expanded .summary-grid { grid-column: 1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; background: rgba(255,255,255,0.20) !important; border-bottom: 1px solid rgba(180,210,255,0.22) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #placementDetailsCard.card-expanded .summary-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 32px 16px !important; text-align: center !important; gap: 10px !important; border-right: 1px solid rgba(180,210,255,0.18) !important; } #placementDetailsCard.card-expanded .summary-item:last-child { border-right: none !important; background: rgba(59,130,246,0.07) !important; } #placementDetailsCard.card-expanded .summary-item > div:first-child { font-size: 0.62rem !important; font-weight: 700 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; } #placementDetailsCard.card-expanded .summary-item > div:last-child { font-size: 2.4rem !important; font-weight: 800 !important; color: #1e293b !important; line-height: 1 !important; letter-spacing: -0.03em !important; } #placementDetailsCard.card-expanded .summary-item:last-child > div:last-child { color: #1e40af !important; } /* ── ROW 2 RIGHT: Invoice Status ── */ #placementDetailsCard.card-expanded .invoice-status { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 24px !important; border-left: 1px solid rgba(180,210,255,0.28) !important; border-bottom: 1px solid rgba(180,210,255,0.22) !important; background: rgba(255,255,255,0.20) !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; cursor: pointer !important; text-align: center !important; } #placementDetailsCard.card-expanded .invoice-status > div { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; pointer-events: none !important; } #placementDetailsCard.card-expanded .invoice-status span[style*="font-weight: 500"] { font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; } /* ── ROW 3: Days Worked + Expenses ── */ #placementDetailsCard.card-expanded .data-lists { grid-column: 1 / -1 !important; grid-row: 3 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; min-height: 0 !important; overflow: visible !important; background: rgba(255,255,255,0.15) !important; } #placementDetailsCard.card-expanded .days-list, #placementDetailsCard.card-expanded .expenses-list { display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow: visible !important; border-radius: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-right: 1px solid rgba(180,210,255,0.20) !important; } #placementDetailsCard.card-expanded .expenses-list { border-right: none !important; } /* List heading */ #placementDetailsCard.card-expanded .days-list > div:first-child, #placementDetailsCard.card-expanded .expenses-list > div:first-child { flex-shrink: 0 !important; padding: 16px 28px !important; font-size: 0.68rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; color: #475569 !important; border-bottom: 1px solid rgba(180,210,255,0.22) !important; background: rgba(255,255,255,0.30) !important; border-radius: 0 !important; } /* Scrollable rows */ #placementDetailsCard.card-expanded .days-list > div:last-child, #placementDetailsCard.card-expanded .expenses-list > div:last-child { flex: 1 1 auto !important; overflow-y: visible !important; max-height: none !important; padding: 8px 0 !important; display: grid !important; align-content: start !important; } /* Individual date/amount cells */ #placementDetailsCard.card-expanded .days-list > div:last-child > div > div, #placementDetailsCard.card-expanded .expenses-list > div:last-child > div > div { padding: 11px 28px !important; font-size: 0.92rem !important; color: #1e293b !important; border-bottom: 1px solid rgba(180,210,255,0.10) !important; } #placementDetailsCard.card-expanded .days-list > div:last-child > div > div:last-child, #placementDetailsCard.card-expanded .expenses-list > div:last-child > div > div:last-child { font-weight: 600 !important; font-family: 'SF Mono', 'Fira Code', monospace !important; text-align: right !important; } /* Empty states */ #placementDetailsCard.card-expanded .days-list > div:last-child > div[style*="grid-column"], #placementDetailsCard.card-expanded .expenses-list > div:last-child > div[style*="grid-column"] { padding: 24px !important; text-align: center !important; color: #94a3b8 !important; font-style: italic !important; font-size: 0.9rem !important; }