/* ==========================================================================
   People + Invitations (dashboard redesign Phase 2)  css/oc-page-people.css
   Screen only (linked with media="screen" after css/oc-ui.css). Markup: ocp_list_row(), ocp_list_head(),
   buildJPListTable(), the add-emails / view-invitations view blocks, #ocpAddPersonModal, #ocpCsvModal and
   #previewCSVImport in dashboard.php. Every class here is prefixed .ocp-.

   Layout model
   - Desktop: the list is a table with a sticky header row; row actions are 40px icon buttons with labels
     (aria-label + tooltip).
   - When the list card is narrower than 820px (tablets with the sidebar, phones) the same rows become row
     cards (container query on .ocp-list), and the actions move into a "more" menu. No table ever scrolls
     sideways.
   - Phone (<768px): the list card loses its chrome so the toolbar sits on the page and each row is its own
     white card; the bulk actions bar floats above the tab bar.

   Overrides of shared components (css/oc-ui.css), all scoped to .ocp-*:
   - .btn.oc-action inside .ocp-menu becomes a full-width labelled menu item in card mode.
   - .oc-content .form-control width:100% (phone) is undone for the rows-per-page select.
   - .oc-content table.table display:block (<1200px) is undone for the campaign stats table on Invitations,
     which becomes stat tiles instead of a sideways-scrolling table.
   ========================================================================== */

.ocp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ocp-muted{color:var(--oc-text-muted)}

/* ---- page header ------------------------------------------------------------ */
.ocp-page{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.ocp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-4) var(--sp-6)}
.ocp-head-t{flex:1 1 380px;min-width:0}
.ocp-h{font-family:var(--oc-font)!important;font-size:var(--fs-xl)!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--oc-navy)!important;margin:0!important}
.ocp-lead{margin:var(--sp-2) 0 0!important;font-size:var(--fs-base)!important;line-height:1.5;color:var(--oc-text-muted)!important;max-width:64ch}
.ocp-lead strong{color:var(--oc-navy)}
.ocp-head-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.ocp-page .btn,.ocp-list .btn{display:inline-flex;height:auto}
.ocp-page .btn .oc-i,.ocp-modal .btn .oc-i,.ocp-list .btn .oc-i{width:18px;height:18px}

.ocp-tip{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--oc-surface);border:1px solid var(--oc-border);border-left:4px solid var(--oc-orange);border-radius:var(--r-md)}
.ocp-tip .oc-i{color:var(--oc-navy)}
.ocp-tip p{margin:0!important;font-size:var(--fs-sm)!important;font-weight:600;color:var(--oc-navy)!important}
.ocp-tip a{font-weight:700;text-decoration:underline;display:inline-block;padding:10px 0;margin:-10px 0}
.ocp-tools{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ocp-tools form{margin:0}

/* "how invitations work" card (Invitations) */
.ocp-how{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-6);padding:var(--sp-5) var(--sp-6);background:var(--oc-surface);border:1px solid var(--oc-border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.ocp-how-t{flex:1 1 420px;min-width:0}
.ocp-how-h{font-family:var(--oc-font)!important;font-size:var(--fs-md)!important;font-weight:700!important;color:var(--oc-navy)!important;text-transform:none!important;letter-spacing:0!important;margin:0 0 var(--sp-1)!important;line-height:1.3}
.ocp-how p{margin:0!important;font-size:var(--fs-sm)!important;line-height:1.55;color:var(--oc-text-muted)!important}
.ocp-how p strong,.ocp-how p a{color:var(--oc-navy)}
.ocp-how p a{font-weight:700;text-decoration:underline}
.ocp-how-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
.ocp-how-cta .btn-link{text-decoration:none;gap:var(--sp-2);padding:0 var(--sp-3)!important}
.ocp-how-cta .btn-link:hover{text-decoration:underline}

/* campaign stats (getActiveCampaignStats() table) as stat tiles: label above value, never a sideways scroll */
.ocp-stats .campaign-details-table{background:var(--oc-surface);border:1px solid var(--oc-border);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:visible;margin:0}
.oc-content .ocp-stats table.table,.ocp-stats table.table{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--sp-4);overflow:visible!important;margin:0;padding:var(--sp-4) var(--sp-5);background:transparent;width:100%;border:0!important}
.ocp-stats table.table>tbody,.ocp-stats table.table>tbody>tr,.ocp-stats table.table>tr{display:contents}
.ocp-stats .campaign-details-table th,.ocp-stats .campaign-details-table td{display:block;border:0!important;background:transparent!important;padding:0!important;min-width:0!important;white-space:normal!important;text-align:left}
.ocp-stats .campaign-details-table th{font-size:var(--fs-xs)!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--oc-text-muted)!important;padding-bottom:6px!important}
.ocp-stats .campaign-details-table td,.ocp-stats .campaign-details-table td p,.ocp-stats .campaign-details-table .td1{font-size:var(--fs-md)!important;font-weight:700!important;color:var(--oc-navy)!important;margin:0!important;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.ocp-stats .campaign-details-table-footer{display:none}
.ocp-stats tr:first-child>th:nth-child(1){grid-area:1/1}.ocp-stats tr:first-child>th:nth-child(2){grid-area:1/2}.ocp-stats tr:first-child>th:nth-child(3){grid-area:1/3}
.ocp-stats tr:first-child>th:nth-child(4){grid-area:1/4}.ocp-stats tr:first-child>th:nth-child(5){grid-area:1/5}.ocp-stats tr:first-child>th:nth-child(6){grid-area:1/6}
.ocp-stats tr+tr>td:nth-child(1){grid-area:2/1}.ocp-stats tr+tr>td:nth-child(2){grid-area:2/2}.ocp-stats tr+tr>td:nth-child(3){grid-area:2/3}
.ocp-stats tr+tr>td:nth-child(4){grid-area:2/4}.ocp-stats tr+tr>td:nth-child(5){grid-area:2/5}.ocp-stats tr+tr>td:nth-child(6){grid-area:2/6}

/* ---- list card ------------------------------------------------------------------ */
/* no overflow:hidden here: it would stop the sticky header row and clip the row menus */
.ocp-list{container:ocplist/inline-size;background:var(--oc-surface);border:1px solid var(--oc-border);border-radius:var(--r-lg);box-shadow:var(--sh-1);min-width:0}
.ocp-list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-3)}
.ocp-list-title{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--oc-font)!important;font-size:var(--fs-md)!important;font-weight:700!important;color:var(--oc-navy)!important;text-transform:none!important;letter-spacing:0!important;margin:0!important;line-height:1.3}
.ocp-list-total{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:var(--r-pill);background:var(--oc-navy-10);font-size:var(--fs-xs);font-weight:700;color:var(--oc-navy);font-variant-numeric:tabular-nums}
.ocp-list-total:empty{display:none}

.ocp-search{position:relative;flex:0 1 340px;min-width:0}
.ocp-search .oc-i{position:absolute;left:14px;top:50%;margin-top:-10px;color:var(--oc-text-muted);pointer-events:none}
.ocp-q{width:100%;min-height:44px;padding:0 14px 0 44px;font-family:var(--oc-font)!important;font-size:var(--fs-base);color:var(--oc-navy);background:var(--oc-surface);border:1.5px solid var(--oc-navy-20);border-radius:var(--r-md);outline:0;-webkit-appearance:none;appearance:none}
.ocp-q::placeholder{color:var(--oc-text-muted);opacity:1}
.ocp-q:focus{border-color:var(--oc-blue);box-shadow:0 0 0 3px rgba(13,123,180,.25)}
.ocp-q::-webkit-search-cancel-button{cursor:pointer}

.ocp-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:0 var(--sp-5) var(--sp-4)}
.ocp-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--sp-4);border-radius:var(--r-pill);border:1.5px solid var(--oc-navy-20);background:var(--oc-surface);font-family:var(--oc-font);font-size:var(--fs-sm);font-weight:600;color:var(--oc-navy);cursor:pointer;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.ocp-chip:hover{border-color:var(--oc-navy-40);background:var(--oc-navy-5)}
.ocp-chip[aria-pressed="true"]{background:var(--oc-navy);border-color:var(--oc-navy);color:#fff}
.ocp-chip-n{font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums;color:var(--oc-text-muted)}
.ocp-chip[aria-pressed="true"] .ocp-chip-n{color:rgba(255,255,255,.8)}
.ocp-chip-n:empty{display:none}
.ocp-selrow{display:none}

/* ---- table (desktop) ----------------------------------------------------------- */
.ocp-table-wrap{border-top:1px solid var(--oc-navy-10)}
.ocp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);color:var(--oc-navy);background:transparent;margin:0}
.ocp-table th{position:sticky;top:var(--oc-topbar-h);z-index:3;background:var(--oc-surface);font-family:var(--oc-font)!important;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oc-text-muted);text-align:left;padding:var(--sp-2) var(--sp-4);border-bottom:2px solid var(--oc-navy-10);white-space:nowrap;vertical-align:middle}
.ocp-sort{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 6px;margin:0 -6px;border:0;border-radius:var(--r-sm);background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.ocp-sort:hover{background:var(--oc-navy-5);color:var(--oc-navy)}
.ocp-sort .oc-i{width:14px;height:14px;opacity:.55}
th[aria-sort="ascending"] .ocp-sort,th[aria-sort="descending"] .ocp-sort{color:var(--oc-navy)}
th[aria-sort="ascending"] .ocp-sort .oc-i,th[aria-sort="descending"] .ocp-sort .oc-i{opacity:1}
th[aria-sort="ascending"] .ocp-sort .oc-i path:last-child,th[aria-sort="descending"] .ocp-sort .oc-i path:first-child{opacity:.2}
.ocp-th-act{display:block;text-align:right;padding-right:6px}
.ocp-table td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--oc-navy-10);vertical-align:middle;font-family:var(--oc-font)!important;color:var(--oc-navy)}
.ocp-table tbody tr:first-child td{border-top:0}
.ocp-row{transition:background-color .12s ease}
.ocp-row:hover{background:var(--oc-navy-5)}
.ocp-row.is-selected{background:rgba(13,123,180,.07)}
.ocp-row[hidden]{display:none!important}
.ocp-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-lg)}
.ocp-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-lg)}
.ocp-c-chk{width:52px;padding-right:0!important}
.ocp-chk{display:inline-grid;place-items:center;width:40px;height:40px;margin:-8px -8px -8px -10px;border-radius:var(--r-sm);cursor:pointer}
.ocp-chk:hover{background:var(--oc-navy-10)}
.ocp-chk input{margin:0;cursor:pointer}
.ocp-c-name{min-width:0}
.ocp-nm{display:block;font-weight:700;font-size:var(--fs-base);line-height:1.3}
.ocp-em{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--oc-text-muted);overflow-wrap:anywhere;line-height:1.35}
.ocp-c-role{width:140px}
.ocp-c-st{width:150px}
.ocp-list--people th.ocp-c-st{width:250px}
.ocp-pills{display:inline-flex;flex-wrap:wrap;gap:6px}
.ocp-c-date{width:116px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ocp-c-act{width:1%;white-space:nowrap;text-align:right;padding-right:var(--sp-3)!important}
.ocp-row.is-inactive .ocp-nm,.ocp-row.is-inactive .ocp-c-role{color:var(--oc-text-muted)}

/* status pills: text + dot, AA on their tints */
.ocp-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;line-height:1.25;white-space:nowrap}
.ocp-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ocp-pill--ok{background:rgba(27,144,102,.12);color:var(--oc-success-text)}
.ocp-pill--off{background:var(--oc-navy-10);color:var(--oc-navy-80)}
.ocp-pill--info{background:rgba(13,123,180,.12);color:var(--oc-navy)}
.ocp-pill--info::before{background:var(--oc-blue)}
.ocp-pill--sent{background:var(--oc-navy-10);color:var(--oc-navy)}
.ocp-pill--done{background:rgba(27,144,102,.12);color:var(--oc-success-text)}
.ocp-pill--warn{background:rgba(255,201,0,.28);color:var(--oc-warning-text)}

/* row actions: inline 40px icon buttons on desktop (labels are aria-label + tooltip) */
.ocp-actions{position:relative;display:inline-flex;justify-content:flex-end}
.ocp-more{display:none}
.ocp-menu{display:inline-flex;align-items:center;gap:2px}
.ocp-menu .btn.oc-action{margin:0}
.ocp-act-t{display:none} /* the link's aria-label + title name it on desktop */
.ocp-menu .btn.oc-action[disabled]{opacity:.4}

/* no results, pagination */
.ocp-noresults{padding:var(--sp-8) var(--sp-5);text-align:center;border-top:1px solid var(--oc-navy-10)}
.ocp-noresults p{margin:0 0 var(--sp-3)!important;font-size:var(--fs-base)!important;font-weight:600;color:var(--oc-navy)!important}
.ocp-noresults[hidden],.ocp-pager[hidden],.ocp-table-wrap[hidden],.ocp-bulk[hidden]{display:none!important}
.ocp-pager{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--oc-navy-10)}
.ocp-pager-info{margin:0 auto 0 0!important;font-size:var(--fs-sm)!important;font-weight:600;color:var(--oc-text-muted)!important;font-variant-numeric:tabular-nums}
.ocp-per-l{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--oc-navy);white-space:nowrap}
.oc-content .ocp-per,.ocp-per{width:auto!important;display:inline-block!important;min-height:40px;padding:6px 32px 6px 12px!important;font-size:var(--fs-sm)!important}
.ocp-pager-nav{display:inline-flex;align-items:center;gap:var(--sp-2)}
.ocp-pg-t{min-width:92px;text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--oc-navy);font-variant-numeric:tabular-nums}
.ocp-pg{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid var(--oc-navy-20);border-radius:var(--r-md);background:var(--oc-surface);color:var(--oc-navy);cursor:pointer}
.ocp-pg:hover:not(:disabled){background:var(--oc-navy-5);border-color:var(--oc-navy-40)}
.ocp-pg:disabled{opacity:.4;cursor:not-allowed}

/* empty state */
.ocp-empty{text-align:center;padding:var(--sp-10) var(--sp-6)}
.ocp-empty-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--oc-navy-5);color:var(--oc-navy);margin-bottom:var(--sp-3)}
.ocp-empty-ic .oc-i{width:30px;height:30px;stroke-width:1.75}
.ocp-empty-h{font-family:var(--oc-font)!important;font-size:var(--fs-lg)!important;font-weight:800!important;color:var(--oc-navy)!important;text-transform:none!important;letter-spacing:0!important;margin:0 0 var(--sp-2)!important}
.ocp-empty-p{max-width:46ch;margin:0 auto var(--sp-5)!important;font-size:var(--fs-base)!important;color:var(--oc-text-muted)!important}
.ocp-empty-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}

/* bulk actions bar: floats over the content column while rows are selected */
.ocp-bulk{position:fixed;z-index:1020;bottom:var(--sp-6);left:calc(var(--oc-sidebar-w) + var(--oc-gutter));right:var(--oc-gutter);width:-moz-fit-content;width:fit-content;max-width:calc(100vw - var(--oc-sidebar-w) - 2 * var(--oc-gutter));margin:0 auto;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);background:var(--oc-navy);color:#fff;border-radius:var(--r-pill);box-shadow:0 10px 30px rgba(11,62,96,.28)}
.ocp-bulk-n{font-size:var(--fs-sm);font-weight:700;white-space:nowrap;margin-right:var(--sp-2);font-variant-numeric:tabular-nums}
.ocp-bulk-b{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);background:#fff;color:var(--oc-navy);font-family:var(--oc-font);font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap}
.ocp-bulk-b:hover{background:var(--oc-navy-10)}
.ocp-bulk-b[data-bulk="bulk-remove"]{color:var(--oc-danger-text)}
.ocp-bulk-b .oc-i{width:18px;height:18px}
.ocp-bulk-x{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.ocp-bulk-x:hover{background:rgba(255,255,255,.12)}
.ocp-bulk :focus-visible{outline-color:#fff!important}
body.ocp-bulk-on .main-content.oc-content{padding-bottom:104px!important}
/* the cookie card (js/oc-consent.js) is bottom-fixed too: while it is open, lift the bar above it */
html.oc-consent-open .ocp-bulk{bottom:calc(var(--sp-6) + var(--oc-consent-space,0px))}

/* ---- row cards: list card narrower than 820px ----------------------------------- */
@container ocplist (max-width: 819px){
  .ocp-selrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:0 var(--sp-4) var(--sp-3)}
  .ocp-sortsel-l{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0 0 0 auto;font-size:var(--fs-sm);font-weight:600;color:var(--oc-text-muted)}
  .oc-content .ocp-sortsel,.ocp-sortsel{width:auto!important;display:inline-block!important;min-height:40px;padding:6px 32px 6px 12px!important;font-size:var(--fs-sm)!important}
  .ocp-selrow-l{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;margin:0;padding:0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--oc-navy);cursor:pointer;border-radius:var(--r-sm)}
  .ocp-table,.ocp-table>tbody{display:block}
  .ocp-table>thead{display:none}
  .ocp-row{display:grid;grid-template-columns:[chk] 32px [a] auto [b] minmax(0,1fr) [act] 44px;column-gap:var(--sp-3);row-gap:6px;align-items:center;padding:var(--sp-4);border-top:1px solid var(--oc-navy-10)}
  .ocp-table tbody tr.ocp-row:first-child{border-top:0}
  .ocp-row>td{display:block;padding:0!important;border:0!important;width:auto;min-width:0;white-space:normal;border-radius:0!important}
  .ocp-row>.ocp-c-chk{grid-column:chk;grid-row:1/span 2;align-self:start}
  .ocp-chk{margin:-6px 0 0 -6px}
  .ocp-row>.ocp-c-name{grid-column:a/act;grid-row:1}
  .ocp-row>.ocp-c-role{grid-column:a;grid-row:2;font-size:var(--fs-sm);color:var(--oc-text-muted)}
  .ocp-row>.ocp-c-st{grid-column:b/-1;grid-row:2;justify-self:start}
  .ocp-row>.ocp-c-act{grid-column:act;grid-row:1;align-self:start;justify-self:end;margin:-6px -6px 0 0}
  .ocp-list--invites .ocp-row{grid-template-columns:[a] minmax(0,1fr) [b] minmax(0,1fr) [act] 44px}
  .ocp-list--invites .ocp-row>.ocp-c-role{justify-self:start}
  .ocp-row>.ocp-c-sent{grid-column:a;grid-row:3;margin-top:6px}
  .ocp-row>.ocp-c-ans{grid-column:b;grid-row:3;margin-top:6px}
  .ocp-c-date{font-size:var(--fs-sm);white-space:normal}
  .ocp-c-date::before{content:attr(data-label);display:block;font-size:var(--fs-xs);font-weight:600;color:var(--oc-text-muted);margin-bottom:2px}
  /* actions collapse into a menu */
  .ocp-more{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--oc-navy);cursor:pointer}
  .ocp-more:hover,.ocp-actions.is-open .ocp-more{background:var(--oc-navy-10)}
  .ocp-menu{display:none;position:absolute;z-index:40;top:calc(100% + 4px);right:0;min-width:232px;padding:6px;background:var(--oc-surface);border:1px solid var(--oc-border);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(11,62,96,.18)}
  .ocp-actions.is-open .ocp-menu{display:block}
  .ocp-actions.is-up .ocp-menu{top:auto;bottom:calc(100% + 4px)}
  .ocp-menu .btn.oc-action{display:flex!important;width:100%!important;height:auto!important;min-height:44px!important;justify-content:flex-start!important;gap:var(--sp-3);padding:0 var(--sp-3)!important;border-radius:var(--r-sm)!important;font-size:var(--fs-sm)!important;font-weight:600!important;text-align:left;white-space:nowrap}
  .ocp-menu .btn.oc-action .oc-i{width:20px;height:20px}
  .ocp-act-t{display:inline}
  .ocp-pager{padding:var(--sp-3) var(--sp-4)}
  .ocp-pager-info{flex:1 1 100%}
  .ocp-pager-nav{margin-left:auto}
}

/* ---- modals: add person, upload CSV, CSV preview -------------------------------- */
@media (min-width:768px){
  .ocp-modal .modal-dialog{width:560px}
  .ocp-csvprev .modal-dialog{width:820px}
}
.ocp-modal .modal-dialog{margin-top:64px}
.ocp-modal .modal-title{text-transform:none!important;letter-spacing:0!important}
.ocp-modal-lead{margin:0 0 var(--sp-5)!important;font-size:var(--fs-sm)!important;line-height:1.55;color:var(--oc-text-muted)!important}
.ocp-modal-lead a{font-weight:700;text-decoration:underline;display:inline-block;padding:10px 0;margin:-10px 0}
.ocp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
.ocp-modal .form-group{margin-bottom:var(--sp-4)}
.ocp-modal .form-group:last-child{margin-bottom:0}
.ocp-modal label{display:block;margin:0 0 6px;font-family:var(--oc-font)!important}
.ocp-modal .form-control{width:100%}
.ocp-modal .modal-footer form{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);margin:0;width:100%}

/* styled file picker: the real input covers the box, so click, keyboard and drag-and-drop all work */
.ocp-file{position:relative;border:2px dashed var(--oc-navy-20);border-radius:var(--r-lg);background:var(--oc-navy-5);transition:border-color .15s ease,background-color .15s ease}
.ocp-file:hover{border-color:var(--oc-blue)}
.ocp-file:focus-within{outline:3px solid var(--oc-blue);outline-offset:2px}
.ocp-file.has-file{border-style:solid;border-color:var(--oc-green);background:rgba(27,144,102,.06)}
.ocp-file-in{position:absolute;inset:0;z-index:2;width:100%!important;max-width:none!important;height:100%;opacity:0;cursor:pointer}
.ocp-file-box{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5)}
.ocp-file-ic{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:var(--r-md);background:var(--oc-surface);border:1px solid var(--oc-border);color:var(--oc-navy)}
.ocp-file-ic .oc-i{width:24px;height:24px}
.ocp-file.has-file .ocp-file-ic{color:var(--oc-success-text)}
.ocp-file-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-base);color:var(--oc-navy)}
.ocp-file-name{font-size:var(--fs-sm);color:var(--oc-text-muted);overflow-wrap:anywhere}
.ocp-file.has-file .ocp-file-name{color:var(--oc-navy);font-weight:600}
.ocp-file-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);border:2px solid var(--oc-navy);border-radius:var(--r-pill);background:var(--oc-surface);font-size:var(--fs-sm);font-weight:700;color:var(--oc-navy);flex:none}
.ocp-hint{display:flex;align-items:flex-start;gap:var(--sp-2);margin:var(--sp-4) 0 0!important;font-size:var(--fs-sm)!important;line-height:1.5;color:var(--oc-text-muted)!important}
.ocp-hint .oc-i{width:18px;height:18px;margin-top:1px}
#upload-csv-button:disabled{opacity:.5;cursor:not-allowed}

/* CSV preview table */
.ocp-csv-msg{margin-bottom:var(--sp-4)!important}
.ocp-csv-scroll{max-height:min(52vh,440px);overflow-y:auto;overflow-x:hidden;border:1px solid var(--oc-border);border-radius:var(--r-md)}
.ocp-csv-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm);margin:0}
.ocp-csv-table th{position:sticky;top:0;z-index:1;background:var(--oc-navy-5);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oc-text-muted);text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--oc-border)}
.ocp-csv-table th:nth-child(1){width:42%}.ocp-csv-table th:nth-child(4){width:14%}
.ocp-csv-table td{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--oc-navy-10);color:var(--oc-navy);overflow-wrap:anywhere;vertical-align:top;font-family:var(--oc-font)!important}
.ocp-csv-table tbody tr:first-child td{border-top:0}
.ocp-csv-table tr.is-invalid td{background:rgba(240,78,35,.07)}
.ocp-csv-table tr.is-invalid td:first-child{box-shadow:inset 3px 0 0 var(--oc-orange-burnt)}
.ocp-csv-flag{display:inline-flex;margin-left:var(--sp-2);padding:2px 8px;border-radius:var(--r-pill);background:rgba(240,78,35,.14);color:var(--oc-danger-text);font-size:11px;font-weight:700;white-space:nowrap;vertical-align:1px}

/* ==========================================================================
   Phone (<768px): its own layout
   ========================================================================== */
@media (max-width:767px){
  .ocp-page{gap:var(--sp-4)}
  .ocp-h{font-size:var(--fs-lg)!important}
  .ocp-lead{font-size:var(--fs-sm)!important}
  .ocp-head{gap:var(--sp-3)}
  .ocp-head-t{flex-basis:100%}
  .ocp-head-cta{width:100%}
  .ocp-head-cta .btn{flex:1 1 auto;white-space:nowrap;padding:0 var(--sp-4)!important}
  .ocp-how{padding:var(--sp-4)}
  .ocp-how-t{flex-basis:100%}
  .ocp-how-cta{flex-direction:row;flex-wrap:wrap;gap:0 var(--sp-2);margin-left:calc(-1 * var(--sp-3))}
  .ocp-tip{align-items:flex-start}

  /* the list sits on the page; each row is its own card */
  .ocp-list{background:transparent;border:0;box-shadow:none;border-radius:0}
  .ocp-list-head{padding:0 0 var(--sp-3)}
  .ocp-search{flex:1 1 100%}
  .ocp-filters{padding:0 0 var(--sp-3)}
  .ocp-chip{padding:0 var(--sp-3)}
  .ocp-selrow{padding:0 0 var(--sp-2)!important}
  .ocp-selrow-l{padding:0 var(--sp-2) 0 6px!important}
  .ocp-table-wrap{border-top:0}
  .ocp-table>tbody{display:flex!important;flex-direction:column;gap:10px}
  .ocp-row{background:var(--oc-surface);border:1px solid var(--oc-border)!important;border-radius:14px;box-shadow:var(--sh-1);padding:14px var(--sp-4)!important}
  .ocp-row:hover{background:var(--oc-surface)}
  .ocp-row.is-selected{background:#F3F8FB;border-color:var(--oc-blue)!important}
  .ocp-noresults{background:var(--oc-surface);border:1px solid var(--oc-border);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-4)}
  .ocp-pager{padding:var(--sp-4) 0 0!important;border-top:0}
  .ocp-empty,.ocp-list .ocp-empty{background:var(--oc-surface);border:1px solid var(--oc-border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--sp-8) var(--sp-5)}
  .ocp-empty-cta .btn{flex:1 1 100%}

  .ocp-bulk{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--oc-tabbar-h) + env(safe-area-inset-bottom,0px) + 12px);width:auto;max-width:none;border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);gap:6px}
  .ocp-bulk-n{flex:1;margin-right:0}
  html.oc-consent-open .ocp-bulk{bottom:calc(var(--oc-tabbar-h) + env(safe-area-inset-bottom,0px) + 12px + var(--oc-consent-space,0px))}
  .ocp-bulk-b{padding:0 var(--sp-3)}
  body.ocp-bulk-on .oc-shell:not(.oc-shell--bare) .main-content.oc-content{padding-bottom:calc(var(--oc-tabbar-h) + env(safe-area-inset-bottom,0px) + 96px)!important}

  /* stats: 2 columns x 3 rows of label/value */
  .oc-content .ocp-stats table.table,.ocp-stats table.table{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0;padding:var(--sp-4)}
  .ocp-stats tr:first-child>th:nth-child(1){grid-area:1/1}.ocp-stats tr+tr>td:nth-child(1){grid-area:2/1}
  .ocp-stats tr:first-child>th:nth-child(2){grid-area:1/2}.ocp-stats tr+tr>td:nth-child(2){grid-area:2/2}
  .ocp-stats tr:first-child>th:nth-child(3){grid-area:3/1}.ocp-stats tr+tr>td:nth-child(3){grid-area:4/1}
  .ocp-stats tr:first-child>th:nth-child(4){grid-area:3/2}.ocp-stats tr+tr>td:nth-child(4){grid-area:4/2}
  .ocp-stats tr:first-child>th:nth-child(5){grid-area:5/1}.ocp-stats tr+tr>td:nth-child(5){grid-area:6/1}
  .ocp-stats tr:first-child>th:nth-child(6){grid-area:5/2}.ocp-stats tr+tr>td:nth-child(6){grid-area:6/2}
  .ocp-stats .campaign-details-table th:nth-child(n+3){padding-top:var(--sp-4)!important}
  .ocp-stats .campaign-details-table td{font-size:var(--fs-base)!important}

  /* modals: one column, primary action on top and full width */
  .ocp-modal .modal-dialog{margin-top:16px!important}
  .ocp-fields{grid-template-columns:1fr}
  .ocp-modal .modal-body{padding:var(--sp-5) var(--sp-4)!important}
  .ocp-modal .modal-header{padding:var(--sp-3) var(--sp-4)!important}
  .ocp-modal .modal-footer{padding:var(--sp-3) var(--sp-4)!important;flex-direction:column-reverse;align-items:stretch}
  .ocp-modal .modal-footer form{flex-direction:column-reverse;align-items:stretch}
  .ocp-modal .modal-footer .btn{width:100%;margin:0!important}
  .ocp-file-box{flex-wrap:wrap;padding:var(--sp-4)}
  .ocp-file-btn{display:none}
  /* CSV preview rows become labelled cards; the area scrolls vertically only */
  /* no inner scroll on phones (it would cut cards in half); the modal itself scrolls. Rows that need fixing come first. */
  .ocp-csv-scroll{border:0;border-radius:0;max-height:none;overflow:visible}
  .ocp-csv-table{display:block}
  .ocp-csv-table tbody{display:flex;flex-direction:column}
  .ocp-csv-table tr.is-invalid{order:-1}
  .ocp-csv-table thead{display:none}
  .ocp-csv-table tr{display:block;padding:var(--sp-3);border:1px solid var(--oc-border);border-radius:var(--r-md);margin-bottom:var(--sp-2);background:var(--oc-surface)}
  .ocp-csv-table tr.is-invalid{border-color:rgba(240,78,35,.5);background:rgba(240,78,35,.05)}
  .ocp-csv-table td,.ocp-csv-table tr.is-invalid td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--sp-2);padding:3px 0;border:0;background:transparent;box-shadow:none!important}
  .ocp-csv-table td::before{content:attr(data-label);font-size:var(--fs-xs);font-weight:600;color:var(--oc-text-muted);padding-top:1px}
  .ocp-csv-flag{grid-column:2;justify-self:start;margin:4px 0 0}
}

/* Merge guard (org7 rebrand: .main-content .campaign-details-table th/.th1 pale background) */
.main-content .ocp-stats .campaign-details-table th,.main-content .ocp-stats .campaign-details-table .th1{background:transparent!important}