/* Reports (employers?a=reports), the report builder: the hub of dataset cards and saved
   reports, and the builder - the filter panel on the left, the preview (title block, numbers,
   table, take-away buttons) on the right. markup from class.report_builder.php, swaps from
   report_builder.js. everything sits under .rpb_root so bootstrap and global.css stay out of
   it; the tokens are the events page's (css/events_page.css) so the two read as one product */
.rpb_root { --rpb-line: #e3e8ee; --rpb-line-soft: #eef1f5; --rpb-ink: #1b2430; --rpb-ink2: #4b5563; --rpb-ink3: #8a94a6;
  --rpb-teal: #16a892; --rpb-teal-ink: #0f7f6e; --rpb-teal-soft: #e6f6f3; --rpb-warn: #d97706; --rpb-danger: #dc2626;
  --rpb-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  color: var(--rpb-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; max-width: 1240px; }
.rpb_root *, .rpb_root *::before, .rpb_root *::after { box-sizing: border-box; }
.rpb_root .hide_me { display: none !important; }
.rpb_root h1, .rpb_root h2, .rpb_root h3 { margin: 0; font-family: inherit; line-height: 1.2; }
.rpb_root button { font: inherit; color: inherit; cursor: pointer; }
.rpb_root a { color: inherit; text-decoration: none; }
.rpb_root label { font-weight: inherit; margin: 0; }
.rpb_sub { display: block; font-size: 12.5px; color: var(--rpb-ink3); font-weight: 400; margin-top: 2px; }
.rpb_root.is_busy .rpb_preview { opacity: .55; pointer-events: none; }

/* ---------- header ---------- */
.rpb_head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 14px; margin: 0 0 6px; }
.rpb_head_title { margin-right: auto; min-width: 0; }
.rpb_head h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.rpb_actions { display: flex; align-items: center; gap: 8px; }
.rpb_btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--rpb-line); background: white; color: var(--rpb-ink); font-weight: 500; font-size: 13.5px; box-shadow: var(--rpb-shadow); white-space: nowrap; line-height: 1; text-decoration: none; }
.rpb_btn:hover, .rpb_btn:focus { border-color: #cfd6df; background: #fbfcfd; color: var(--rpb-ink); text-decoration: none; outline: 0; }
.rpb_btn .bi { font-size: 14px; }
.rpb_btn.rpb_primary { background: var(--rpb-teal); border-color: var(--rpb-teal); color: white; }
.rpb_btn.rpb_primary:hover, .rpb_btn.rpb_primary:focus { background: var(--rpb-teal-ink); border-color: var(--rpb-teal-ink); color: white; }
.rpb_icon_btn { width: 36px; padding: 0; justify-content: center; }
.rpb_panel_toggle { display: none; }
.rpb_mini_btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--rpb-line); background: white; color: var(--rpb-ink2); font-size: 13px; }
.rpb_mini_btn:hover { border-color: #cfd6df; background: #fbfcfd; }
.rpb_mini_btn.rpb_saved_remove:hover { color: var(--rpb-danger); }

/* ---------- the hub: groups of cards ---------- */
.rpb_group { margin-top: 22px; }
.rpb_group_title { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rpb-ink3); margin-bottom: 10px; }
.rpb_cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rpb_card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: white; border: 1px solid var(--rpb-line); border-radius: 10px; box-shadow: var(--rpb-shadow); min-width: 0; position: relative; transition: border-color .12s, box-shadow .12s; }
.rpb_card:not(.is_note):hover { border-color: #b9e6dd; box-shadow: 0 4px 14px rgba(16,24,40,.08); }
.rpb_card.is_note { background: #fafbfc; }
.rpb_card_ic { width: 38px; height: 38px; border-radius: 9px; background: var(--rpb-teal-soft); color: var(--rpb-teal-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.rpb_card_body { min-width: 0; flex: 1; display: block; }
.rpb_card_body b { display: block; font-size: 14px; font-weight: 600; }
.rpb_card_body > span { display: block; font-size: 12.5px; color: var(--rpb-ink3); margin-top: 2px; }
.rpb_card_go { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--rpb-teal-ink); white-space: nowrap; margin-top: 9px; }
.rpb_card_go .bi { font-size: 17px; margin-left: -1px; }

/* saved reports */
.rpb_saved_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rpb_saved { display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--rpb-line); border-left: 3px solid var(--rpb-teal); border-radius: 10px; box-shadow: var(--rpb-shadow); padding: 12px 12px 12px 14px; min-width: 0; }
.rpb_saved_main { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; }
.rpb_saved_meta { font-size: 11.5px !important; color: #aab3c0 !important; margin-top: 4px !important; }
.rpb_saved_tools { display: flex; gap: 6px; flex: none; }
.rpb_saved.is_gone { display: none; }

/* ---------- the builder ---------- */
.rpb_grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.rpb_panel { background: white; border: 1px solid var(--rpb-line); border-radius: 10px; box-shadow: var(--rpb-shadow); padding: 4px 16px 16px; position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; overflow-x: hidden; min-width: 0; }
.rpb_section { padding: 14px 0 0; }
.rpb_section + .rpb_section { border-top: 1px solid var(--rpb-line-soft); margin-top: 14px; }
.rpb_section_title { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rpb-ink3); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.rpb_section_links { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rpb_section_links a { color: var(--rpb-teal-ink); }
.rpb_field { margin-top: 10px; }
.rpb_field > label { display: block; font-size: 12px; color: var(--rpb-ink2); font-weight: 500; margin-bottom: 4px; }
.rpb_root .rpb_select, .rpb_root .rpb_input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--rpb-line); border-radius: 8px; background: white; font: inherit; font-size: 13.5px; color: var(--rpb-ink); box-shadow: none; margin: 0; }
.rpb_root .rpb_select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234b5563' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.rpb_root .rpb_select:focus, .rpb_root .rpb_input:focus { outline: 0; border-color: var(--rpb-teal); box-shadow: 0 0 0 3px rgba(22,168,146,.15); }
.rpb_dates { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rpb_dates span { font-size: 12px; color: var(--rpb-ink3); flex: none; }
.rpb_dates .rpb_input { flex: 1 1 0; width: 0; min-width: 0; padding: 0 8px; font-size: 13px; }
.rpb_root .rpb_dates input[type = date]::-webkit-date-and-time-value { text-align: left; }

/* the row-grouping segmented control wraps */
.rpb_seg { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--rpb-line); border-radius: 8px; background: white; padding: 4px; }
.rpb_seg_btn { border: 0; background: transparent; height: 28px; padding: 0 11px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--rpb-ink2); }
.rpb_seg_btn.is_on { background: #eef2f6; color: var(--rpb-ink); font-weight: 600; }

/* the column checklist */
.rpb_checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.rpb_check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--rpb-ink); cursor: pointer; padding: 3px 0; }
.rpb_root .rpb_check input, .rpb_root .rpb_pick_item input { margin: 0; width: 15px; height: 15px; accent-color: var(--rpb-teal); flex: none; }
.rpb_panel_foot { margin-top: 16px; }
.rpb_panel_foot .rpb_btn { width: 100%; justify-content: center; height: 38px; }

/* the pickers: a button wearing the choice, a popover with a search and a checkbox list */
.rpb_pick { position: relative; }
.rpb_pick_btn { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--rpb-line); border-radius: 8px; background: white; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; text-align: left; }
.rpb_pick_btn .rpb_pick_wear { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rpb-ink3); }
.rpb_pick_btn.is_set .rpb_pick_wear { color: var(--rpb-ink); font-weight: 500; }
.rpb_pick_btn .bi { font-size: 11px; color: var(--rpb-ink3); flex: none; }
.rpb_pick.is_open .rpb_pick_btn { border-color: var(--rpb-teal); box-shadow: 0 0 0 3px rgba(22,168,146,.15); }
.rpb_pick_menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: white; border: 1px solid var(--rpb-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.14); padding: 8px; z-index: 40; }
.rpb_pick.is_open .rpb_pick_menu { display: block; }
.rpb_root .rpb_pick_search { height: 30px; font-size: 13px; margin-bottom: 6px; }
.rpb_pick_list { max-height: 220px; overflow-y: auto; }
.rpb_pick_item { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.rpb_pick_item:hover { background: #f6f8fa; }
.rpb_pick_item.is_hidden { display: none; }
.rpb_pick_item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpb_pick_empty { font-size: 12.5px; color: var(--rpb-ink3); padding: 8px 6px; }
.rpb_pick_foot { display: flex; justify-content: space-between; border-top: 1px solid var(--rpb-line-soft); margin-top: 6px; padding-top: 8px; font-size: 12.5px; font-weight: 500; }
.rpb_pick_foot a { color: var(--rpb-teal-ink); padding: 0 6px; }
.rpb_pick_foot a.rpb_pick_clear { color: var(--rpb-ink3); }

/* ---------- the preview ---------- */
.rpb_report { background: white; border: 1px solid var(--rpb-line); border-radius: 10px; box-shadow: var(--rpb-shadow); min-width: 0; overflow: hidden; }
.rpb_report_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 18px 14px; border-bottom: 3px solid var(--rpb-teal-ink); }
.rpb_report_titles { min-width: 0; }
.rpb_report_company { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rpb-teal-ink); }
.rpb_report_head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 3px; }
.rpb_report_sub { font-size: 12.5px; color: var(--rpb-ink2); margin-top: 3px; }
.rpb_report_tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpb_report_tools .rpb_btn { height: 34px; padding: 0 12px; font-size: 13px; }
.rpb_save_row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; background: var(--rpb-teal-soft); border-bottom: 1px solid var(--rpb-line); }
.rpb_save_row .rpb_input { flex: 1; min-width: 200px; }
.rpb_save_row .rpb_btn { height: 34px; }
.rpb_save_msg { font-size: 12.5px; color: var(--rpb-teal-ink); font-weight: 500; }
.rpb_save_msg.is_error { color: var(--rpb-danger); }
.rpb_kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 14px 18px 4px; }
.rpb_kpi { border: 1px solid var(--rpb-line); border-radius: 9px; padding: 10px 12px; background: #fbfcfd; min-width: 0; }
.rpb_kpi_v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.rpb_kpi_l { font-size: 11px; color: var(--rpb-ink3); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpb_table_wrap { overflow-x: auto; padding: 12px 0 0; max-height: 70vh; overflow-y: auto; }
.rpb_root .rpb_table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.rpb_root .rpb_table th { position: sticky; top: 0; background: #f4f6f8; color: var(--rpb-ink2); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid var(--rpb-line); white-space: nowrap; z-index: 1; }
.rpb_root .rpb_table td { padding: 8px 12px; border-bottom: 1px solid var(--rpb-line-soft); vertical-align: top; }
.rpb_root .rpb_table tr:nth-child(even) td { background: #fafbfc; }
.rpb_root .rpb_table th.is_right, .rpb_root .rpb_table td.is_right { text-align: right; font-variant-numeric: tabular-nums; }
.rpb_root .rpb_table td.is_nowrap { white-space: nowrap; }
.rpb_root .rpb_table th:first-child, .rpb_root .rpb_table td:first-child { padding-left: 18px; }
.rpb_root .rpb_table th:last-child, .rpb_root .rpb_table td:last-child { padding-right: 18px; }
.rpb_root .rpb_table td.rpb_empty { text-align: center; color: var(--rpb-ink3); padding: 28px 18px; }
.rpb_report_foot { padding: 10px 18px 12px; font-size: 12px; color: var(--rpb-ink3); border-top: 1px solid var(--rpb-line-soft); }

/* ---------- narrow: the panel becomes a sheet the Filters button opens ---------- */
@media (max-width: 900px)
{
  .rpb_grid { grid-template-columns: minmax(0, 1fr); }
  .rpb_panel { position: static; max-height: none; display: none; }
  .rpb_root.is_panel_open .rpb_panel { display: block; }
  .rpb_panel_toggle { display: inline-flex; }
  .rpb_root.is_panel_open .rpb_panel_toggle { background: var(--rpb-ink); border-color: var(--rpb-ink); color: white; }
  .rpb_report_head { padding: 14px 14px 12px; }
  .rpb_kpis { padding: 12px 14px 2px; }
  .rpb_root .rpb_table th:first-child, .rpb_root .rpb_table td:first-child { padding-left: 14px; }
  .rpb_report_foot { padding: 10px 14px; }
  .rpb_cards, .rpb_saved_list { grid-template-columns: minmax(0, 1fr); }
}