/* Diocese of La Crosse portals (team 49870) — page chrome layered on participant-portal.css.
   Brand colors come from /api/team-brand/49870.css (--color-primary #213B28, --color-secondary #4C7B59). */
.pp-loading{padding:3rem 1rem; text-align:center; color:#6C757D}
.pp-page{max-width:900px; margin:0 auto}
.pp-page-title{font-family:var(--font-headings, gotham, sans-serif); color:var(--color-primary,#213B28); margin:.25rem 0 .1rem}
.pp-page-sub{color:#6C757D; margin:0 0 1.25rem; font-size:.95rem}
.pp-message-card{background:#FFF; border:1px solid #DEE2E6; border-left:4px solid var(--color-secondary,#4C7B59); border-radius:.5rem; padding:1rem 1.25rem; margin-bottom:1.5rem; box-shadow:0 2px 12px rgba(40,40,40,.06)}
.pp-message-head{font-weight:700; color:var(--color-primary,#213B28); margin-bottom:.4rem}
.pp-message-body{color:#333; line-height:1.55}
.pp-stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem}
.pp-stat-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; background:#FFF; border:1px solid #DEE2E6; border-radius:.5rem; padding:1.4rem 1rem; text-decoration:none; color:inherit; box-shadow:0 2px 12px rgba(40,40,40,.06); transition:box-shadow .2s ease, transform .15s ease}
a.pp-stat-card:hover{box-shadow:0 4px 18px rgba(40,40,40,.12); transform:translateY(-2px)}
.pp-stat-num{font-size:2.2rem; font-weight:800; color:var(--color-primary,#213B28); line-height:1}
.pp-stat-label{font-size:.85rem; color:#6C757D; text-transform:uppercase; letter-spacing:.04em}
.pp-stat-badge{font-weight:700; padding:.35rem 1rem; border-radius:999px; font-size:.95rem}
.pp-status-complete{background:var(--color-secondary,#4C7B59); color:#FFF}
.pp-status-expired{background:#FF4A11; color:#FFF}
.pp-status-incomplete{background:#F1F1F1; color:#6C757D}
.pp-quick-links{display:flex; flex-wrap:wrap; gap:.75rem}
/* list pages */
.dp-list-toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem}
.dp-list-count{color:#6C757D; font-size:.9rem}
.grid-search-wrap{position:relative; min-width:min(320px,100%)}
.grid-search-wrap .form-control{padding-left:2.1rem; padding-right:2.1rem}
.grid-search-icon{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:#9AA0A6; pointer-events:none}
.grid-search-clear{position:absolute; right:.7rem; top:50%; transform:translateY(-50%); color:#9AA0A6; cursor:pointer}
.dp-empty{padding:2.5rem 1rem; text-align:center; color:#6C757D; background:#FFF; border:1px dashed #DEE2E6; border-radius:.5rem}
.dp-table thead th{font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:#6C757D; border-bottom:2px solid var(--color-primary,#213B28)}
.dp-doc-title{font-weight:600; color:var(--color-primary,#213B28)}
.dp-doc-desc{color:#333; font-size:.9rem}
.dp-event-when{color:var(--color-primary,#213B28); font-weight:600}
.dp-event-meta{color:var(--color-primary,#213B28); font-size:.92rem}
.dp-event-meta span{color:#27282A}
.dp-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; justify-content:center}
/* forms hub buttons */
.dp-form-buttons{display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; margin-top:1rem}
.dp-form-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; min-width:20rem; padding:2.2rem 1.75rem; text-align:center; text-decoration:none; background:var(--color-secondary,#4C7B59); border:solid 12px var(--color-secondary,#4C7B59); border-radius:.75em; color:#FFF; transition:background-color .2s ease, border-color .2s ease}
.dp-form-btn:hover{background:#6A9776; border-color:#6A9776; color:#FFF}
.dp-form-btn-title{font-family:var(--font-headings,gotham,sans-serif); font-size:1.4rem; font-weight:700}
.dp-form-btn-sub{font-size:.9rem; opacity:.95}
/* med form + generic form sections */
.dp-form-section{background:#FFF; border:1px solid #DEE2E6; border-radius:.5rem; padding:1.25rem 1.5rem; margin-bottom:1.25rem; box-shadow:0 2px 12px rgba(40,40,40,.05)}
.dp-form-section h2{font-family:var(--font-headings,gotham,sans-serif); color:var(--color-primary,#213B28); font-size:1.2rem; margin:0 0 1rem}
.dp-req{color:var(--color-rfv,#213B28); margin-right:.25rem; font-size:.6rem; vertical-align:super}
.dp-field-error{color:#DC3545; font-size:.85rem; margin-top:.15rem}
.dp-form-field{margin-bottom:1rem; font-weight:600; color:var(--color-primary,#213B28); font-size:.92rem}
.dp-form-field .form-control, .dp-form-field .form-select, .dp-form-field textarea{font-weight:400}
.dp-medform h1{font-size:1.4rem}
.dp-medform.dp-busy{opacity:.6; pointer-events:none}
.dps-switch{display:inline-flex; gap:.3rem; padding:.3rem; background:#F1F1F1; border:1px solid #DEE2E6; border-radius:999px}
.dps-switch input[type="radio"]{display:none}
.dps-switch label{display:inline-flex; align-items:center; justify-content:center; min-width:4.5rem; padding:.4rem 1rem; margin:0; border-radius:999px; cursor:pointer; font-weight:600; color:#464646; background:transparent; font-size:.9rem}
.dps-switch label.checked{background:var(--color-buttons,#213B28); color:#FFF}
.dp-check-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.5rem .75rem}
.dp-check{display:flex; align-items:center; gap:.5rem; font-weight:500; color:#27282A}
.dp-check input[type="checkbox"]{width:1.1rem; height:1.1rem; accent-color:var(--color-secondary,#4C7B59)}
.dp-med-row{border:1px solid #DEE2E6; border-radius:.5rem; padding:1rem; margin-bottom:1rem; background:#FAFBFB}
.dp-sig-note{font-size:.8rem; color:#6C757D}
.dp-sig .form-control{max-width:32rem}
.dp-profile-photo{max-width:120px; border-radius:.5rem}
.dp-photo-input{max-width:20rem}
.dp-radio-list{display:flex; flex-direction:column; gap:.5rem}
.dp-radio{display:block; padding:.6rem 1rem; border:1px solid #DEE2E6; border-radius:.5rem; cursor:pointer; font-weight:600; color:#464646; background:#FFF}
.dp-radio input[type="radio"]{margin-right:.6rem; accent-color:var(--color-secondary,#4C7B59)}
.dp-radio.checked{border-color:var(--color-buttons,#213B28); background:#F4F8F5}
/* hub cards (forms + reports) */
.dp-hub{display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; margin-top:1rem}
.dp-hub-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; min-width:20rem; padding:2.2rem 1.75rem; text-align:center; text-decoration:none; background:var(--color-secondary,#4C7B59); border:solid 12px var(--color-secondary,#4C7B59); border-radius:.75em; color:#FFF; transition:background-color .2s ease, border-color .2s ease}
.dp-hub-card:hover{background:#6A9776; border-color:#6A9776; color:#FFF}
.dp-hub-title{font-family:var(--font-headings,gotham,sans-serif); font-size:1.4rem; font-weight:700}
.dp-hub-sub{font-size:.9rem; opacity:.95}
/* registration detail rows */
.dp-detail-grid{background:#FFF; border:1px solid #DEE2E6; border-radius:.5rem; padding:1.25rem 1.5rem; box-shadow:0 2px 12px rgba(40,40,40,.05)}
.dp-detail-row{display:flex; flex-wrap:wrap; gap:1rem; padding:.6rem 0; border-bottom:1px solid #F1F1F1}
.dp-detail-row:last-child{border-bottom:0}
.dp-detail-label{flex:0 0 12rem; font-weight:700; color:var(--color-primary,#213B28)}
/* break-the-glass */
.dp-glass-head{text-align:center; margin:1.5rem 0}
.dp-glass-icon{color:#DC3545; font-size:3.5rem; display:block; margin-bottom:.75rem}
.dp-glass-head h1{color:#27282A; font-size:1.6rem; font-weight:800}
.dp-glass-body{max-width:640px; margin:0 auto; text-align:center}
.dp-glass-sub{font-size:.9rem}
.dp-glass-form{max-width:520px; margin:1rem auto}
.dp-glass-note{font-size:.85rem; color:#6C757D; margin:1.5rem 0; text-align:center}
/* read-only release view */
.dp-release-view .form-control:disabled{background:#F8F9FA; color:#27282A}
.grid-label{font-weight:600; color:#27282A}
/* list pager */
.dp-pager{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem; color:#6C757D; font-size:.9rem}
/* sortable grid headers (parity with RadGrid AllowSorting) */
.dp-sortable{cursor:pointer; user-select:none}
.dp-sortable:hover{color:var(--color-primary,#213B28)}
/* ticket review panel (parity with pnlNoPayment) */
.dp-review-cell{border:1px solid #6C757D; background:#FFF; padding:.25rem .5rem}
/* error/feedback page (parity with _error.aspx) */
.dp-err-h1{font-size:1.6rem; color:#27282A}
.dp-err-warn{color:#DC3545; font-size:1.1rem}
/* med form headings (parity with the WebForms h2 subhead + font-120 banner) */
.dp-med-subhead{font-size:1.3rem}
.dp-med-banner{font-size:120%}
/* dashboard metric boxes (parity with the WebForms metric-box layout) */
.dp-dash-title{font-size:1.5rem; margin:.5rem 0 1.5rem}
.dp-metric-box{background:#FFF; border:1px solid #DEE2E6; border-radius:.5rem; padding:1rem 1.25rem; margin-bottom:1rem; box-shadow:0 2px 12px rgba(40,40,40,.05); min-height:9rem}
.dp-metric-head{font-size:120%; font-weight:700; margin-bottom:.5rem; border-bottom:2px solid var(--color-secondary,#4C7B59)}
/* ── Mobile (<=640px): stack the list tables into labeled cards so nothing runs off the
   side of a phone. Desktop layout is unchanged. Each row becomes a bordered card; buttons
   go full-width; every data cell shows its column name above the value via data-label. ── */
@media (max-width:640px){
.dp-table thead{display:none}
.dp-table, .dp-table tbody{display:block; width:100%}
.dp-table tr{display:block; border:1px solid #DEE2E6; border-radius:.5rem; margin-bottom:.75rem; padding:.65rem .9rem; background:#FFF; box-shadow:0 1px 6px rgba(40,40,40,.05)}
.dp-table td{display:block; width:100%; border:0 !important; padding:.28rem 0 !important; text-align:left !important}
.dp-table td:empty{display:none}
.dp-table td .btn{display:block; width:100%; margin-bottom:.2rem}
.dp-table td[data-label]::before{content:attr(data-label); display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700; color:#6C757D; margin-bottom:.05rem}
/* big hub/forms buttons + registration-detail rows go full width on phones */
.dp-form-btn, .dp-hub-card{min-width:100%; border-width:8px}
.dp-detail-label{flex:0 0 100%}
.dp-review-cell{flex:0 0 100%; max-width:100%}
}