/* SharpLine Billing admin — pages2.css
   Styles for the Attention, Declines, Disputes & Refunds, Webhooks, Settings and
   Team & Audit pages. Uses the tokens from style.css; every class is prefixed p2-. */

/* ---- shared ---- */
.p2-spacer { flex: 1; }
.p2-note { margin: 0 0 12px; font-size: 0.8125rem; line-height: 1.5; max-width: 760px; }
.p2-note-pad { padding: 12px 16px 0; }
.p2-foot { margin: 0; padding: 10px 16px 12px; font-size: 0.75rem; line-height: 1.45; }
.p2-err { color: var(--bad); font-size: 0.75rem; }
.p2-json { font: 0.71875rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mut); white-space: normal; word-break: break-all; }
.p2-actions { white-space: nowrap; }
.p2-actions button, .p2-actions select { margin-left: 4px; vertical-align: middle; }
.p2-actions select.small { padding: 3px 8px; font-size: 0.75rem; }
.p2-filter-body { padding-bottom: 4px; }
.p2-filters { margin-bottom: 12px; }
.p2-filters input[type="date"] { min-width: 150px; }
.p2-callout { border-color: var(--warn); }
.p2-callout .body { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--mut); font-size: 0.8125rem; line-height: 1.5; }
.p2-callout .body b { color: var(--ink); }
.p2-pre {
  margin: 0; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  font: 0.71875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
  overflow-x: auto; white-space: pre; max-height: 420px; overflow-y: auto;
}
.tile.is-hot b { color: var(--bad); }
a.p2-tile-link { text-decoration: none; display: block; transition: border-color .12s; }
a.p2-tile-link:hover { border-color: var(--faint); }
a.p2-tile-link b { color: inherit; }
a.p2-tile-link.is-hot b { color: var(--bad); }

/* forms: grid of labelled fields, stacking on narrow screens */
.p2-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 24px; }
.p2-form label, .p2-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.75rem; color: var(--ink); font-weight: 500; min-width: 0; }
.p2-form input, .p2-form select, .p2-form textarea, .p2-field input, .p2-field select, .p2-field textarea { width: 100%; }
.p2-form textarea, .p2-field textarea, .p2-dialog-form textarea {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font: inherit; resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.p2-form .hint, .p2-field .hint, .p2-toggle .hint { color: var(--faint); font-size: 0.71875rem; line-height: 1.4; font-weight: 400; }
.p2-form .req, .p2-field .req { color: var(--bad); }
.p2-span2 { grid-column: 1 / -1; }
/* Coupon form: a fixed 12-column grid — row 1 = Code, Name, Discount, Percent/Amount off (4 × 3);
   row 2 = Lasts for, Redemption limit, Stops working on (3 × 4). When "Invoices covered" is
   shown (repeating discounts) row 2 has four fields, so they drop to 3 columns each. */
.p2-coupon-form { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.p2-coupon-form .p2-r1 { grid-column: span 3; }
.p2-coupon-form .p2-r2 { grid-column: span 4; }
.p2-coupon-form .p2-r3 { grid-column: span 6; }
.p2-coupon-form:has([data-when="repeating"]:not([hidden])) .p2-r2 { grid-column: span 3; }
@media (max-width: 1100px) { .p2-coupon-form .p2-r1, .p2-coupon-form .p2-r2 { grid-column: span 6; } }
.p2-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding-top: 4px; }
.p2-inline { display: flex; gap: 6px; align-items: center; }
.p2-inline input { flex: 1; }
.p2-modal { width: min(520px, calc(100vw - 32px)); }
.p2-dialog-form { display: flex; flex-direction: column; gap: 12px; }
.p2-dialog-form .p2-field { position: relative; }
.p2-dialog-form .p2-field button.small { align-self: flex-start; }

/* ---- coupons ---- */
.p2-frozen-note { color: var(--warn); }
.p2-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 2px 0; }
.p2-check { display: flex; gap: 7px; align-items: baseline; font-size: 0.8125rem; color: var(--ink); cursor: pointer; }
.p2-check input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.p2-check input:disabled + span { opacity: .6; }
.p2-check-row { gap: 0; }
.p2-form label.p2-check { flex-direction: row; }
/* a coupon's plan pills wrap instead of stretching the column */
td .pill + .pill { margin-left: 3px; }

/* ---- attention ---- */
.p2-tick { display: flex; flex-direction: column; gap: 10px; }
.p2-tick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px; }
.p2-tick-grid > div { display: flex; flex-direction: column; gap: 2px; }
.p2-tick-grid > div > .sub2 { font-size: 0.75rem; color: var(--ink); font-weight: 500; }
.p2-tick-grid b { font-weight: 600; font-variant-numeric: tabular-nums; }
.p2-alert-group > h2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.p2-alert-group.is-critical { border-color: var(--bad); }
.p2-alert-group > h2 button { text-transform: none; letter-spacing: 0; }
td.p2-msg { min-width: 260px; max-width: 480px; }
.p2-sev-critical td:first-child { border-left: 3px solid var(--bad); }
.p2-sev-warn td:first-child { border-left: 3px solid var(--warn); }
.p2-sev-info td:first-child { border-left: 3px solid var(--line); }
.p2-cap { padding: 8px 0; }
.p2-cap + .p2-cap { border-top: 1px solid var(--line); }
.p2-cap-head { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8125rem; margin-bottom: 6px; flex-wrap: wrap; }
.p2-cap-head b { font-variant-numeric: tabular-nums; }
.p2-bar { background: var(--surface-2); border-radius: 4px; height: 10px; overflow: hidden; }
.p2-bar-fill { background: var(--accent); height: 100%; border-radius: 4px; min-width: 2px; transition: width .2s; }
.p2-cap.is-warn .p2-bar-fill { background: var(--warn); }
.p2-cap.is-over .p2-bar-fill { background: var(--bad); }
.p2-cap.is-over .p2-cap-head b { color: var(--bad); }

/* ---- declines ---- */
.p2-range { gap: 12px; align-items: flex-end; }
/* Chips, the note and the CSV button sit in a control-height box on the same
   baseline as the date inputs, so nothing floats above or below the row. */
.p2-range .chips, .p2-range .sub2 { display: flex; align-items: center; height: var(--ctl-h); }
.p2-range-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.p2-range-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.6875rem; color: var(--ink); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.p2-range-form input { padding: 0 10px; }
.p2-chart-wrap canvas { width: 100%; display: block; cursor: crosshair; }
.sw.p2-sw-soft { background: var(--warn); }
.sw.p2-sw-hard { background: var(--bad); }
.p2-lb { display: flex; flex-direction: column; gap: 2px; }
.p2-lb-row {
  display: grid; grid-template-columns: 64px minmax(80px, 1fr) auto; gap: 2px 10px; align-items: center;
  padding: 5px 6px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.78125rem;
}
.p2-lb-row:hover { background: var(--surface-2); }
.p2-lb-code { color: var(--ink); font-weight: 600; }
.p2-lb-desc { grid-column: 2 / -1; font-size: 0.71875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-lb .hbar-fill.is-hard { background: var(--bad); }
.p2-lb .hbar-fill.is-soft { background: var(--warn); }
.p2-rate { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.p2-rate-bar { width: 56px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; display: inline-block; }
.p2-rate-bar b { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
table.p2-heat th:first-child { white-space: nowrap; }
table.p2-heat th { text-align: center; }
table.p2-heat th:first-child, table.p2-heat tr > th:first-child { text-align: left; }
table.p2-heat td { text-align: center; padding: 0; }
.p2-heat-cell a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 10px; text-decoration: none; color: var(--ink); min-width: 92px; }
.p2-heat-cell a:hover { text-decoration: underline; }
.p2-heat-cell b { font-weight: 650; font-variant-numeric: tabular-nums; }
.p2-heat-empty { color: var(--faint); padding: 8px 10px !important; }
.p2-heat-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: middle; }
.p2-heat-swatch:first-child { margin-left: 0; }

/* ---- webhooks ---- */
.p2-secret-panel { border-color: var(--accent); }
.p2-secret-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.p2-secret { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; word-break: break-all; font-size: 0.8125rem; user-select: all; }
.p2-payload-row td { background: var(--surface-2); white-space: normal; padding: 10px 14px 14px; }
.p2-payload-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.pill[href] { text-decoration: none; }

/* ---- settings ---- */
.p2-settings-body { display: flex; flex-direction: column; gap: 22px; }
.p2-explain { max-width: 760px; }
.p2-explain p, p.p2-explain { margin: 0; }
.p2-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; align-items: start; }
/* Hosted checkout: six fields as a fixed 3 × 2 grid across the full panel (2 × 3 on medium screens, one column on phones). */
.p2-settings-grid.p2-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
@media (max-width: 1100px) { .p2-settings-grid.p2-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p2-toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; cursor: pointer; }
.p2-toggle input { margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; }
.p2-toggle > span { display: flex; flex-direction: column; gap: 2px; }
.p2-toggle b { font-weight: 600; }
.p2-toggle input:disabled + span { opacity: .6; }
.p2-ladder { border-top: 1px solid var(--line); padding-top: 18px; }
.p2-ladder-row { display: grid; grid-template-columns: repeat(var(--ladder-cols, 10), minmax(0, 1fr)); gap: 8px 14px; align-items: stretch; margin-bottom: 8px; width: 100%; }
.p2-ladder-row:last-of-type { margin-bottom: 12px; }
.p2-ladder-step {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; white-space: nowrap;
  padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
  font-size: 0.78125rem; font-weight: 600; font-variant-numeric: tabular-nums; position: relative;
}
.p2-ladder-step .sub2 { font-weight: 400; font-size: 0.6875rem; color: var(--faint); white-space: normal; text-align: center; line-height: 1.2; }
.p2-ladder-step + .p2-ladder-step::before { content: '→'; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 0.75rem; }
@media (max-width: 760px) {
  .p2-ladder-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 10px; margin-bottom: 6px; }
  .p2-ladder-row .p2-ladder-step:nth-child(5n + 1)::before { content: none; }
  .p2-ladder-step { padding: 5px 2px; font-size: 0.71875rem; }
  .p2-ladder-step .sub2 { font-size: 0.625rem; }
  .p2-ladder-step + .p2-ladder-step::before { left: -10px; font-size: 0.6875rem; }
}
.p2-save-bar { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--line); margin-top: -6px; z-index: 2; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .p2-form, .p2-settings-grid, .p2-settings-grid.p2-grid-3, .p2-tick-grid { grid-template-columns: 1fr; }
  .p2-coupon-form .p2-r1, .p2-coupon-form .p2-r2, .p2-coupon-form .p2-r3 { grid-column: 1 / -1; }
  .p2-alert-group > h2 { flex-direction: column; align-items: flex-start; }
  .p2-range-form { width: 100%; }
  .p2-filters input, .p2-filters select { flex: 1 1 140px; }
  .p2-lb-row { grid-template-columns: 56px 1fr; }
  .p2-lb-row .hbar-val { grid-column: 1 / -1; }
  .p2-actions { white-space: normal; }
  .p2-actions button, .p2-actions select { margin: 2px 4px 2px 0; }
}

/* declines: gateway errors sit under the decline leaderboard, visibly apart */
.p2-errs { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.p2-errs .hbar-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p2-errs-table { font-size: 0.78125rem; }
.p2-dialog-form .modal-err:empty { display: none; }

/* Settings → hosted checkout links */
.p2-colink { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.p2-colink:last-child { border-bottom: 0; }
.p2-colink .mono { color: var(--ink); }

/* Declines breakdowns: every "label + Attempts/Approved/Declined/Approval" table shares one
   column grid, so the numbers line up from panel to panel however long the labels are. */
table.p2-aligned { table-layout: fixed; }
table.p2-aligned th:first-child { width: 44%; }
table.p2-aligned th:not(:first-child) { width: 14%; }
table.p2-aligned td:first-child { overflow: hidden; text-overflow: ellipsis; }
table.p2-aligned th.right, table.p2-aligned td.right { text-align: left; }
table.p2-aligned .p2-rate { justify-content: flex-start; }