/*
  What pays this line (class/class.pay_why.php): the drawer stacked over a pay line in Hours & pay
  review — the line, then one list to pick from (the rules, and a custom amount).
  pw_ classes; the mchat shell around it is inline like the other drawers.
  no rem units (bootstrap_old makes a rem 10px). px throughout.
*/

.pw_drawer { --pw_teal: #0f7777; --pw_teal_dark: #0f5e63; --pw_ink: #16211f; --pw_muted: #6b7a7e; --pw_line: #d3e2e3; --pw_ok: #1a7f37; --pw_bad: #b42318; --pw_bad_bg: #fdecec; --pw_gold: #9a6a00; --pw_gold_line: #e8c25a; --pw_gold_bg: #fffaed; color: var(--pw_ink); font-size: 14px; }
.pw_drawer * { box-sizing: border-box; }

.pw_title { font-size: 11px; font-weight: 800; color: var(--pw_teal_dark); letter-spacing: .06em; text-transform: uppercase; margin: 18px 4px 8px; }
.pw_card { background: #fff; border: 1px solid var(--pw_line); border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(11,61,64,.06); }
.pw_foot { font-size: 12px; color: var(--pw_muted); line-height: 1.55; margin: 16px 4px 0; }
.pw_link { color: var(--pw_teal_dark); font-weight: 700; text-decoration: underline; cursor: pointer; }
.pw_empty { padding: 16px 14px; color: var(--pw_muted); font-size: 13px; }

/* ---- the line ---- */
.pw_line_head { font-size: 17px; font-weight: 800; line-height: 1.2; }
.pw_line_head small { display: block; font-size: 12px; font-weight: 400; color: var(--pw_muted); margin-top: 2px; }
.pw_line_facts { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #3d4f52; }
.pw_line_facts div { display: flex; gap: 8px; align-items: baseline; }
.pw_line_facts i { color: var(--pw_muted); font-size: 12px; flex: none; width: 14px; }

/* ---- the list ---- */
.pw_block { background: #fff; border: 1px solid var(--pw_line); border-radius: 12px; box-shadow: 0 1px 2px rgba(11,61,64,.06); }
.pw_rows { border-radius: 12px; overflow: hidden; }
.pw_row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #eef4f4; padding: 12px; cursor: pointer; font: inherit; color: var(--pw_ink); }
.pw_row:last-child { border-bottom: 0; }
.pw_row:hover { background: #f6fbfb; }
.pw_row.pd_busy { opacity: .55; }
.pw_tick { flex: none; width: 24px; text-align: center; color: #c3d2d4; font-size: 15px; }
.pw_row_body { min-width: 0; flex: 1; }
.pw_row_body b { display: block; font-size: 14.5px; font-weight: 700; }
.pw_row_body span { display: block; font-size: 12px; color: var(--pw_muted); line-height: 1.4; margin-top: 2px; }
.pw_row_pay { text-align: right; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw_row_pay small { display: block; font-size: 11.5px; font-weight: 600; color: var(--pw_muted); margin-top: 1px; }
.pw_row_caret { color: #b6c6c8; font-size: 12px; flex: none; }
.pw_tick_on { color: var(--pw_teal_dark); }
.pw_new .pw_row_body b { color: var(--pw_teal_dark); }

/* the one in effect */
.pw_row.pw_on { background: var(--pw_gold_bg); box-shadow: inset 3px 0 0 var(--pw_gold_line); cursor: default; }
.pw_row.pw_on:hover { background: var(--pw_gold_bg); }
.pw_row.pw_on .pw_tick { color: #d8a520; }
.pw_row.pw_on .pw_row_body span { color: var(--pw_gold); font-weight: 600; }
.pw_row.pw_on .pw_row_pay { color: var(--pw_ok); }

/* one that does not match: still pickable, just not proposed */
.pw_row_no .pw_row_body b { color: var(--pw_muted); font-weight: 600; }
.pw_row_no .pw_row_body span { color: #a3777a; }
.pw_row_no .pw_row_pay { color: var(--pw_muted); }

/* ---- a custom amount ---- */
.pw_custom { flex-wrap: wrap; }
.pw_amt { display: inline-flex; align-items: center; border: 1px solid var(--pw_line); border-radius: 8px; background: #fff; padding: 0 10px; height: 36px; }
.pw_amt > span { color: var(--pw_muted); font-weight: 700; margin-right: 4px; }
.pw_amt_in { border: 0; outline: 0; width: 72px; font: inherit; font-size: 15px; font-weight: 700; background: transparent; }
.pw_btn { height: 36px; border: 1px solid var(--pw_teal); background: var(--pw_teal); color: #fff; border-radius: 8px; padding: 0 13px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pw_btn:hover { background: var(--pw_teal_dark); }
.pw_btn.pd_busy { opacity: .6; }

/* ---- back to the automatic rule ---- */
.pw_auto_block { margin-top: 10px; }
.pw_auto .pw_tick { color: var(--pw_teal_dark); }
.pw_auto .pw_row_body b { font-size: 14px; }

.pw_errors { margin: 0; border-top: 1px solid var(--pw_line); border-radius: 0 0 12px 12px; font-size: 13px; padding: 10px 12px; }