/* Admin surface/ledger refinement, 2026-10-19.
   Presentation only. Keep native hidden, selected, disabled and disclosure
   states authoritative. No rider, print, export or calculation selectors. */
@media screen {
  /* One workspace surface, with quieter tools instead of a box inside a box. */
  #admin :is(.payment-workspace-picker, .held-dashboard-tools,
    .period-directory-tools, .rider-directory-tools, .settlement-type-tools,
    .inquiry-admin-tools, .referral-progress-tools),
  #admin #riders-pane .rider-directory-tools {
    padding: 16px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ebf1 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #admin :is(.payment-work-summary, .held-dashboard-summary,
    .settlement-type-summary, .referral-progress-summary) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 12px !important;
  }
  #admin :is(.payment-work-summary, .held-dashboard-summary) > article {
    border-color: #e3e9f0 !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  /* Keep input borders; remove only the redundant field-surrounding panels. */
  #admin #riders-pane > .form-grid.three {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 16px !important;
  }
  #admin #riders-pane > .form-grid.three > label,
  #admin :is(.mission-rule-context-form, .mission-rule-form,
    .mission-payout-form, .referral-rule-form, .referral-link-form) > label {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Tables, source approvals, notes and warnings keep their own boundaries. */
  #admin #period-list,
  #admin #held-dashboard-list,
  #admin #template-list,
  #admin #branches-pane .branch-list {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #admin :is(#period-list, #held-dashboard-list, #template-list) { padding: 0 !important; }
  #admin #rider-list,
  #admin #settlement-types-pane .settlement-type-list {
    background: #fff !important;
    box-shadow: none !important;
  }
  #admin .mission-payout-editor {
    padding: 4px 0 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #admin :is(.referral-rule-workspace, .referral-link-workspace,
    .referral-progress-workspace) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #admin .admin-permission-editor .admin-permission-group {
    border: 0 !important;
    border-top: 1px solid #e3e9f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #admin :is(#raw-settlement-automation, #settlement-fees-workspace-host) .raw-automation-panel {
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  #admin :is(#raw-settlement-automation, #settlement-fees-workspace-host) .raw-automation-settings {
    border-color: #e1e8ef !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Desktop lists read as a ledger. Mobile/tablet cards retain their layout. */
@media screen and (min-width: 1101px) {
  #admin #period-list,
  #admin #held-dashboard-list {
    gap: 0 !important;
    border-top: 1px solid #dce5ee !important;
    border-bottom: 1px solid #dce5ee !important;
    border-radius: 0 !important;
  }
  #admin :is(.period-row, .held-dashboard-row, .held-payment-row,
    .paid-payment-row, .rider-row, .settlement-type-row) {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #admin :is(.period-row, .held-dashboard-row) {
    margin: 0 !important;
    padding: 20px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ebf1 !important;
    background: #fff !important;
  }
  #admin :is(.period-row, .held-dashboard-row):hover {
    background: #f8fafc !important;
    box-shadow: none !important;
  }
  #admin :is(.period-row, .held-dashboard-row)::before { content: none !important; }
  #admin :is(.period-row, .held-dashboard-row):last-child { border-bottom: 0 !important; }

  /* Do not set display on hidden rows (pagination and permissions own that). */
  #admin .period-row:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 276px !important;
    align-items: center !important;
    gap: 16px !important;
  }
  #admin .period-row-info { min-width: 0; gap: 8px !important; }
  #admin .period-row-info > b {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    line-height: 1.6 !important;
  }
  #admin .period-row-actions:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px !important;
  }
  #admin .period-row-actions > .rider-action { min-height: 38px; margin: 0 !important; }

  #admin :is(.held-dashboard-row, .held-payment-row, .paid-payment-row):not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr) !important;
    align-items: center !important;
    gap: 14px 24px !important;
  }
  #admin .held-dashboard-main,
  #admin :is(.held-payment-row, .paid-payment-row) > .held-payment-identity { min-width: 0; }
  #admin .held-dashboard-main > b,
  #admin .held-payment-identity > b {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    line-height: 1.6;
  }
  #admin .held-dashboard-main > small,
  #admin .held-payment-identity > span { line-height: 1.7 !important; }
  #admin .held-dashboard-side { width: 100%; align-items: end !important; gap: 10px !important; }
  #admin .held-dashboard-side > strong,
  #admin .held-payment-amount {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 16px !important;
    letter-spacing: -.02em;
  }
  #admin .held-dashboard-side > div {
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  #admin :is(.held-payment-row, .paid-payment-row) > .held-payment-actions:not([hidden]) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0;
    width: 100%;
  }
  #admin .held-payment-actions > .held-payment-amount {
    flex: 1 0 100%;
    margin-bottom: 2px;
  }
  #admin :is(.held-dashboard-side, .held-payment-actions) .rider-action {
    min-height: 36px;
    margin: 0 !important;
  }
  #admin :is(.held-dashboard-row, .held-payment-row, .paid-payment-row) > .payment-rider-note-summary {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }
}

/* Wide rider directory: identical columns even when bank details are absent. */
@media screen and (min-width: 1440px) {
  #admin #riders-pane .rider-row:not([hidden]) {
    grid-template-columns: minmax(140px, .7fr) minmax(140px, .65fr) minmax(180px, 1fr) minmax(240px, 1.2fr) !important;
    grid-template-areas: "identity payout account actions" !important;
    gap: 14px !important;
    padding-bottom: 42px !important;
  }
  #admin #riders-pane .rider-row:not([hidden]):not(:has(.rider-account-summary)) {
    grid-template-areas: "identity payout . actions" !important;
  }
  #admin #riders-pane .rider-row > .rider-account-summary {
    grid-area: account !important;
    grid-column: 3 !important;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap !important;
    padding: 4px 10px;
  }
  #admin #riders-pane .rider-account-summary > b {
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.6;
  }
  #admin #riders-pane .rider-account-summary-meta {
    max-width: 100%;
    flex-wrap: wrap !important;
    gap: 5px 10px !important;
  }
  #admin #riders-pane .rider-account-summary-meta > span,
  #admin #riders-pane .rider-account-summary-meta > small {
    max-width: 100%;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #admin #riders-pane .rider-row > .rider-row-actions,
  #admin #riders-pane .rider-row:not(:has(.rider-account-summary)) > .rider-row-actions {
    grid-area: actions !important;
    grid-column: 4 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
}