/* CENTRAL operations: readable tables and compact monthly workspaces.
   Screen-only; collection, recruiting and organization data/printing are unchanged. */
@media screen {
  :is(#collectionView, #recruitView, #orgView) {
    --ops-ink: #273547;
    --ops-muted: #627083;
    --ops-line: #e3e7ec;
    --ops-gold: #80612b;
    min-width: 0;
  }

  #collectionView .collection-heading,
  #recruitView .recruit-heading,
  #orgView .org-heading {
    gap: 12px 20px;
    margin: 4px 0 16px;
  }
  #collectionView .collection-eyebrow,
  #recruitView .recruit-heading > div > span,
  #orgView .org-heading > div > span {
    color: #d1b47b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
  }
  #collectionView .collection-heading h2,
  #recruitView .recruit-heading h2,
  #orgView .org-heading h2 {
    color: #fffaf1;
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -.7px;
    margin: 3px 0;
  }
  #collectionView .collection-heading p,
  #orgView .org-heading p,
  #recruitView .recruit-caption,
  #collectionView .collection-footnote,
  #orgView .org-help,
  #orgView .org-private-note {
    color: #c3b9a8;
    font-size: 12px;
    line-height: 1.65;
  }
  #collectionView .collection-month,
  #recruitView .recruit-heading > label,
  #orgView .org-heading-actions label {
    color: #d7c9ae;
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
  }
  #collectionView .collection-month input,
  #recruitView .recruit-heading input,
  #orgView .org-heading-actions input {
    min-height: 38px;
    margin-top: 0;
    border: 1px solid #d8ccb6;
    border-radius: 8px;
    background: #fff;
    color: var(--ops-ink);
    font-size: 13px;
    padding: 7px 10px;
  }

  /* Monthly summaries stay short; long amounts can wrap without clipping. */
  #collectionView .collection-overview,
  #orgView .org-stats { gap: 10px; margin-bottom: 12px; }
  #collectionView .collection-overview > div,
  #orgView .org-stats > div {
    min-width: 0;
    min-height: 66px;
    padding: 11px 15px;
    gap: 4px 12px;
    flex-wrap: wrap;
    border: 1px solid var(--ops-line);
    border-radius: 11px;
    background: #fff;
  }
  #collectionView .collection-overview span,
  #orgView .org-stats span {
    font-size: 12px;
    color: var(--ops-muted);
    font-weight: 600;
  }
  #collectionView .collection-overview strong,
  #orgView .org-stats strong {
    color: var(--ops-ink);
    font-size: 23px;
    line-height: 1.3;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  #collectionView .collection-overview small,
  #orgView .org-stats small {
    color: var(--ops-muted);
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
  }
  #orgView .org-stats > div:last-child { border-color: #cbb586; }
  #orgView .org-stats > div:last-child strong { color: var(--ops-gold); }

  #collectionView .collection-companies,
  #collectionView .collection-group,
  #recruitView .recruit-panel,
  #orgView .org-group {
    border: 1px solid var(--ops-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 14px #00000008;
  }
  #collectionView .collection-companies { padding: 16px; margin-bottom: 16px; }
  #collectionView .collection-group,
  #recruitView .recruit-panel { margin-bottom: 16px; }
  #collectionView .collection-group .collection-panel-head,
  #recruitView .recruit-panel-head {
    min-height: 57px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ops-line);
    background: #fff;
  }
  #collectionView .collection-panel-head h3,
  #recruitView .recruit-panel-head h3,
  #orgView .org-group-head h3 {
    color: var(--ops-ink);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: -.3px;
  }
  #collectionView .collection-panel-head span,
  #recruitView .recruit-panel-head span {
    color: var(--ops-muted);
    font-size: 12px;
  }
  #collectionView .collection-panel-head button,
  #recruitView .recruit-panel-head button,
  #orgView .org-group-add {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #d8c59d;
    border-radius: 7px;
    background: #faf5e9;
    color: #765721;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
  }
  #collectionView .collection-panel-head button:hover,
  #recruitView .recruit-panel-head button:hover,
  #orgView .org-group-add:hover { background: #f2e8d4; border-color: #baa06b; }

  /* Collection company checklist, filters and payments. */
  #collectionView .collection-caption {
    margin: 8px 0 12px;
    font-size: 12px;
    color: var(--ops-muted);
    line-height: 1.6;
  }
  #collectionView .collection-company-grid { gap: 8px; }
  #collectionView .collection-company {
    min-height: 45px;
    padding: 4px 6px 4px 11px;
    background: #fff;
    border-color: var(--ops-line);
  }
  #collectionView .collection-company.checked { background: #fcf8ef; border-color: #cbb586; }
  #collectionView .collection-company label {
    min-height: 34px;
    margin: 0;
    gap: 9px;
    color: #425066;
    font-size: 13px;
    line-height: 1.5;
  }
  #collectionView .collection-company input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #98763b;
  }
  #collectionView .collection-company button {
    flex: 0 0 30px;
    width: 30px;
    min-height: 32px;
    margin-left: 3px;
    padding: 0;
    border-radius: 6px;
    font-size: 20px;
    color: #6b7582;
  }
  #collectionView .collection-company button:hover { background: #fff0ec; color: #a54235; }
  #collectionView .collection-list-heading { margin: 18px 0 12px; gap: 10px 16px; }
  #collectionView .collection-ap { font-size: 17px; color: #ead5a7; }
  #collectionView #collectionSetAP {
    min-height: 34px;
    padding: 6px 10px;
    border-color: #d5c7ad;
    color: #765d32;
    font-size: 12px;
  }
  #collectionView .collection-filter { gap: 8px; }
  #collectionView .collection-filter input,
  #collectionView .collection-filter select {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid #ddd9cf;
    border-radius: 8px;
    color: var(--ops-ink);
    font-size: 13px;
  }
  #collectionView .collection-filter input::placeholder { color: #6b7582; }
  #collectionView .collection-panel-head .collection-group-number {
    width: 29px;
    height: 29px;
    color: #785a26;
    background: #f5eddd;
    font-size: 12px;
  }
  #collectionView .collection-group-2 .collection-group-number { color: #99533d; background: #fbeee7; }
  #collectionView .collection-table th,
  #recruitView .recruit-table th {
    padding: 10px 14px;
    background: #f6f7f9;
    border-color: var(--ops-line);
    color: #566477;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
  }
  #collectionView .collection-table td,
  #recruitView .recruit-table td {
    padding: 11px 14px;
    border-color: #edf0f3;
    font-size: 13px;
    color: #4e5d70;
    line-height: 1.6;
  }
  #collectionView .collection-table td b,
  #recruitView .recruit-table td b { color: #28394e; font-size: 14px; font-weight: 750; }
  #collectionView .collection-table tbody tr:hover,
  #recruitView .recruit-table tbody tr:hover { background: #fcfaf6; }
  #collectionView .collection-table tbody tr:last-child td,
  #recruitView .recruit-table tbody tr:last-child td { border-bottom: 0; }
  #collectionView .collection-money { font-size: 14px; }
  #collectionView .collection-money small { font-size: 11px; color: #627083; }
  #collectionView .collection-status {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 650;
    color: #89621c;
    background: #fbf1d9;
  }
  #collectionView .collection-status.contacted { color: #3f6394; background: #edf3fb; }
  #collectionView .collection-status.paid { color: #30734f; background: #eaf5ee; }
  #collectionView .collection-row-actions button,
  #recruitView .recruit-row-actions button {
    min-height: 31px;
    padding: 5px 8px;
    border: 1px solid #d9e0e7;
    border-radius: 6px;
    background: #fff;
    color: #526176;
    font-size: 11px;
    line-height: 1.4;
  }
  #collectionView .collection-row-actions button[data-collection-paid] {
    color: #306b4b;
    background: #edf7f0;
    border-color: #c9dfd1;
  }
  #collectionView .collection-row-actions .collection-delete,
  #recruitView .recruit-row-actions button[data-recruit-delete] {
    color: #a34e40;
    border-color: #e9d7d2;
    background: #fffaf8;
  }

  /* Five-week overview remains a single strip on desktop. */
  #recruitView .recruit-week-grid { padding: 14px 6px; }
  #recruitView .recruit-week-grid > div { padding: 0 18px; border-color: #e8e9eb; min-width: 0; }
  #recruitView .recruit-week-grid > div > span { font-size: 12px; color: #806532; font-weight: 700; }
  #recruitView .recruit-week-grid p { gap: 7px; font-size: 12px; color: #637185; margin: 5px 0; }
  #recruitView .recruit-week-grid b { font-size: 23px; line-height: 1.3; color: #2d3d52; }
  #recruitView .recruit-week-grid small { font-size: 11px; color: #627083; margin-left: 0; }
  #recruitView .recruit-total {
    padding: 10px 17px;
    background: #faf8f3;
    border-color: #eae4d8;
    gap: 12px;
    flex-wrap: wrap;
  }
  #recruitView .recruit-total > span { font-size: 12px; color: #756a54; }
  #recruitView .recruit-total > b { font-size: 13px; color: #705522; font-variant-numeric: tabular-nums; }
  #recruitView .recruit-total i { color: #a79a7c; }
  #recruitView .recruit-caption { margin: -5px 1px 15px; }
  #recruitView .recruit-row-actions .recruit-move {
    color: #795b23;
    background: #faf4e7;
    border-color: #dcc89f;
    font-weight: 700;
  }
  #recruitView .recruit-row-actions button[data-recruit-edit] { color: #526176; }
  #collectionView .collection-empty,
  #recruitView .recruit-empty,
  #orgView .org-empty { font-size: 13px; color: #647286; line-height: 1.7; }
  #collectionView .collection-empty,
  #recruitView .recruit-empty { padding: 26px 18px; background: #fff; }

  /* Organization stays in horizontal member strips at every screen size. */
  #orgView .org-heading-actions { flex-wrap: wrap; gap: 8px; }
  #orgView .org-heading-actions button {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 8px;
    color: #526176;
    border-color: #d9e0e7;
    background: #fff;
  }
  #orgView .org-heading-actions button.primary {
    color: #fff;
    border-color: #927039;
    background: #927039;
  }
  #orgView .org-help { margin: 10px 2px 14px; }
  #orgView .org-board { gap: 13px; }
  #orgView .org-group-head { padding: 10px 14px; gap: 10px; }
  #orgView .org-group-head > div { gap: 8px; }
  #orgView .org-group-head span { font-size: 12px; color: #7b602d; padding: 2px 7px; }
  #orgView .org-group-head small { font-size: 12px; color: #627083; margin-left: 0; }
  #orgView .org-strip-tools { gap: 5px; }
  #orgView .org-strip-tools button {
    width: 32px;
    height: 32px;
    min-height: 32px;
    border: 1px solid #d9e0e7;
    border-radius: 7px;
    color: #735a2f;
    background: #fff;
    font-size: 21px;
  }
  #orgView .org-members {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 9px;
    padding: 11px 12px 12px;
    background: #fff;
    scrollbar-color: #c3b390 #f4f1ea;
  }
  #orgView .org-person {
    flex: 0 0 230px;
    width: 230px;
    align-self: stretch;
    padding: 11px 12px;
    border: 1px solid #e1e6ec;
    border-radius: 9px;
    background: #fff;
  }
  #orgView .org-person-head > b { font-size: 15px; color: #28394e; line-height: 1.5; }
  #orgView .org-person-head button {
    min-height: 30px;
    padding: 4px 8px;
    border-color: #d9e0e7;
    font-size: 11px;
    color: #526176;
  }
  #orgView .org-person > p {
    font-size: 13px;
    line-height: 1.55;
    color: #617085;
    margin: 6px 0 10px;
    min-height: 21px;
    max-height: 41px;
  }
  #orgView .org-flags {
    gap: 12px;
    margin-top: auto;
    padding-top: 7px;
    min-height: 35px;
    border-color: #e8ecf0;
  }
  #orgView .org-flags label { gap: 5px; font-size: 12px; color: #58677a; }
  #orgView .org-flags input { width: 16px; height: 16px; accent-color: #98763b; }
  #orgView .org-flags label.active { color: #347254; }
  #orgView .org-flags label.active input { accent-color: #3d8060; }
  #orgView .org-flags button { min-height: 30px; padding: 4px; font-size: 11px; color: #a34e40; }
  #orgView .org-person.not-enrolled { background: #fafbfc; }
  #orgView .org-person.not-enrolled .org-person-head > b { color: #687588; }
  #orgView .org-group-add { margin: 0 12px 11px; }
  #orgView .org-empty { padding: 18px 6px; }
  #orgView .org-private-note { margin: 12px 2px; }
  #collectionView .collection-warning,
  #recruitView .recruit-warning,
  #orgView .org-warning,
  #orgView .org-upload {
    padding: 11px 14px;
    border: 1px solid #e4c99c;
    border-radius: 9px;
    background: #fff7e9;
    color: #855c23;
    font-size: 13px;
    line-height: 1.6;
  }

  /* Forms live outside their view roots, so scope them by dialog ID. */
  :is(#collectionDialog, #recruitDialog, #orgDialog) {
    padding: 23px;
    border: 1px solid #d6c7aa;
    border-radius: 16px;
    color: #273547;
    background: #fff;
    box-shadow: 0 24px 80px #00000030;
  }
  :is(#collectionDialog, #recruitDialog, #orgDialog)::backdrop {
    background: #141a24aa;
    backdrop-filter: blur(3px);
  }
  #collectionDialog .collection-modal-head,
  #recruitDialog .recruit-modal-head,
  #orgDialog .org-modal-head { margin-bottom: 17px; gap: 12px; }
  #collectionDialog .collection-modal-head h2,
  #recruitDialog .recruit-modal-head h2,
  #orgDialog .org-modal-head h2 { color: #273547; font-size: 21px; line-height: 1.5; letter-spacing: -.5px; }
  #collectionDialog .collection-modal-head button,
  #recruitDialog .recruit-modal-head button,
  #orgDialog .org-modal-head button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #5e6a7a;
    background: #f3f5f7;
    font-size: 24px;
  }
  :is(#collectionDialog, #recruitDialog, #orgDialog) label {
    font-size: 13px;
    color: #4b5b70;
    line-height: 1.5;
    gap: 6px;
    margin: 12px 0;
  }
  :is(#collectionDialog, #recruitDialog, #orgDialog) :is(input:not([type=checkbox]), select, textarea) {
    min-height: 42px;
    padding: 10px 11px;
    margin-top: 0;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    background: #fff;
    color: #273547;
    font-size: 14px;
    line-height: 1.5;
  }
  :is(#collectionDialog, #recruitDialog, #orgDialog) :is(input, textarea)::placeholder { color: #748095; }
  #collectionDialog .collection-caption { color: #627083; font-size: 12px; line-height: 1.6; }
  #recruitDialog .recruit-input-head,
  #recruitDialog .recruit-input-row { grid-template-columns: 54px 1fr 1fr; gap: 10px; font-size: 13px; }
  #recruitDialog .recruit-input-head,
  #recruitDialog .recruit-input-row > span { color: #5c6b7f; }
  #recruitDialog .recruit-input-head b { font-weight: 650; }
  #recruitDialog .recruit-input-row input { text-align: center; font-variant-numeric: tabular-nums; }
  #orgDialog .org-form-flags input { width: 18px; height: 18px; margin: 0; padding: 0; }
  #collectionDialog .collection-modal-actions,
  #recruitDialog .recruit-modal-actions,
  #orgDialog .org-modal-actions { margin-top: 18px; padding-top: 15px; border-top: 1px solid #e7ebef; gap: 8px; }
  #collectionDialog .collection-modal-actions button,
  #recruitDialog .recruit-modal-actions button,
  #orgDialog .org-modal-actions button {
    min-height: 40px;
    padding: 9px 22px;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    background: #fff;
    color: #526176;
    font-size: 13px;
  }
  #collectionDialog .collection-modal-actions button.primary,
  #recruitDialog .recruit-modal-actions button.primary,
  #orgDialog .org-modal-actions button.primary {
    color: #fff;
    border-color: #927039;
    background: #927039;
  }
  #orgView .org-heading-actions button.primary:hover,
  #collectionDialog .collection-modal-actions button.primary:hover,
  #recruitDialog .recruit-modal-actions button.primary:hover,
  #orgDialog .org-modal-actions button.primary:hover { background: #7d5f2e; border-color: #7d5f2e; }
  #collectionDialog #collectionFormError,
  #recruitDialog #recruitFormError,
  #orgDialog #orgFormError { color: #a54435; font-size: 13px; line-height: 1.6; }
  :is(#collectionView, #recruitView, #orgView, #collectionDialog, #recruitDialog, #orgDialog) :is(button, input, select, textarea):focus-visible {
    outline: 3px solid #bf9c58;
    outline-offset: 2px;
  }
}

@media screen and (max-width: 900px) {
  #recruitView .recruit-week-grid > div { padding: 0 11px; }
  #recruitView .recruit-week-grid p { gap: 4px; }
  #recruitView .recruit-week-grid b { font-size: 21px; }
  #orgView .org-heading { flex-wrap: wrap; }
  #orgView .org-heading-actions { width: 100%; }
}

@media screen and (max-width: 620px) {
  #collectionView .collection-heading,
  #recruitView .recruit-heading { align-items: flex-end; gap: 10px; margin-bottom: 13px; }
  #collectionView .collection-heading > div,
  #recruitView .recruit-heading > div { min-width: 0; }
  #collectionView .collection-heading h2,
  #recruitView .recruit-heading h2,
  #orgView .org-heading h2 { font-size: 22px; }
  #collectionView .collection-heading p { font-size: 12px; }
  #collectionView .collection-month,
  #recruitView .recruit-heading > label { flex-shrink: 0; gap: 4px; font-size: 11px; }
  #collectionView .collection-month input,
  #recruitView .recruit-heading input {
    width: 138px;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
  }
  #collectionView .collection-overview,
  #orgView .org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #collectionView .collection-overview > div,
  #orgView .org-stats > div { min-height: 66px; padding: 10px 12px; gap: 4px 8px; }
  #collectionView .collection-overview strong,
  #orgView .org-stats strong { font-size: 21px; }
  #collectionView .collection-companies { padding: 13px 12px; }
  #collectionView .collection-panel-head,
  #recruitView .recruit-panel-head { gap: 8px; }
  #collectionView .collection-panel-head > div,
  #recruitView .recruit-panel-head > div { gap: 5px 8px; min-width: 0; }
  #collectionView .collection-panel-head h3,
  #recruitView .recruit-panel-head h3 { font-size: 14px; }
  #collectionView .collection-panel-head button,
  #recruitView .recruit-panel-head button { min-height: 38px; padding: 7px 9px; font-size: 12px; }
  #collectionView .collection-company-grid { gap: 7px; }
  #collectionView .collection-company { padding: 5px 4px 5px 9px; }
  #collectionView .collection-company label { font-size: 12px; gap: 7px; }
  #collectionView .collection-company button { flex-basis: 28px; width: 28px; min-height: 34px; }
  #collectionView .collection-list-heading { flex-wrap: wrap; margin-top: 15px; }
  #collectionView .collection-filter { width: 100%; }
  #collectionView .collection-filter input,
  #collectionView .collection-filter select { min-height: 42px; font-size: 14px; }
  #collectionView .collection-filter input { flex: 1; width: auto; }
  #collectionView .collection-filter select { width: 119px; }
  #collectionView .collection-group .collection-panel-head,
  #recruitView .recruit-panel-head { padding: 11px 12px; }
  #collectionView .collection-table tr,
  #recruitView .recruit-table tr {
    gap: 7px 13px;
    margin: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 9px;
  }
  #collectionView .collection-table td,
  #recruitView .recruit-table td { padding: 2px 0; font-size: 13px; }
  #collectionView .collection-table td::before,
  #recruitView .recruit-table td::before { font-size: 11px; color: #657287; margin-bottom: 3px; }
  #collectionView .collection-table td:first-child b,
  #recruitView .recruit-table td b { font-size: 16px; }
  #collectionView .collection-table td:nth-child(3) { font-size: 15px; }
  #collectionView .collection-table .collection-row-actions,
  #recruitView .recruit-table .recruit-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid #e7ebef;
    padding-top: 9px;
    margin-top: 4px;
  }
  #collectionView .collection-row-actions button,
  #recruitView .recruit-row-actions button {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
    margin: 0;
  }
  #recruitView .recruit-row-actions .recruit-move { margin-right: 0; }
  #collectionView .collection-entry.settled { background: #f8fcf9; }
  #recruitView .recruit-week-grid { grid-template-columns: 1fr; padding: 5px 12px; }
  #recruitView .recruit-week-grid > div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px 3px;
    border-right: 0;
    border-bottom: 1px solid #edf0f3;
  }
  #recruitView .recruit-week-grid > div:last-child { border-bottom: 0; }
  #recruitView .recruit-week-grid > div > span { font-size: 12px; }
  #recruitView .recruit-week-grid p { font-size: 12px; margin: 0; gap: 5px; flex-wrap: wrap; }
  #recruitView .recruit-week-grid b { font-size: 18px; }
  #recruitView .recruit-week-grid small { font-size: 11px; }
  #recruitView .recruit-total { padding: 10px 13px; gap: 5px 10px; justify-content: space-between; }
  #recruitView .recruit-total > b { font-size: 13px; }
  #recruitView .recruit-total i { margin: 0 4px; }
  #orgView .org-heading-actions { gap: 7px; }
  #orgView .org-heading-actions input { min-height: 40px; font-size: 14px; }
  #orgView .org-heading-actions button { min-height: 40px; padding: 8px 10px; }
  #orgView .org-group-head { padding: 9px 12px; flex-wrap: wrap; }
  #orgView .org-group-head h3 { font-size: 14px; }
  #orgView .org-strip-tools { margin-left: auto; }
  #orgView .org-group-head small { font-size: 11px; }
  #orgView .org-strip-tools button { width: 34px; height: 34px; }
  #orgView .org-members { gap: 8px; padding: 10px 11px 11px; }
  #orgView .org-person { flex-basis: 218px; width: 218px; padding: 10px 11px; }
  #orgView .org-person-head button,
  #orgView .org-flags button { min-height: 34px; }
  #orgView .org-flags { gap: 10px; }
  #orgView .org-flags label { min-height: 32px; }
  #orgView .org-group-add { min-height: 38px; margin: 0 11px 11px; }
  :is(#collectionDialog, #recruitDialog, #orgDialog) { padding: 19px; }
  :is(#collectionDialog, #recruitDialog, #orgDialog) :is(input:not([type=checkbox]), select, textarea) { font-size: 16px; min-height: 44px; }
  #collectionDialog .collection-modal-actions button,
  #recruitDialog .recruit-modal-actions button,
  #orgDialog .org-modal-actions button { min-height: 44px; }
}