/* ================== MEMBERS (class.members.php) ==================
   mb_ classes: the employer page (employers?a=members), its drawers (add, member, payment,
   settings, plan), the staff side (todo item, the Memberships tile, the membership drawer) and
   the public dues page (members.php). the tones: one colour per member status, used by the
   pill, the row icon, the count tile and the avatar */

:root
{
  --mb_invited_bg: #eef0f2;  --mb_invited_fg: #4b5b62;
  --mb_active_bg: #e3f4ea;   --mb_active_fg: #1f7a45;
  --mb_past_due_bg: #fff4de; --mb_past_due_fg: #9a6400;
  --mb_lapsed_bg: #fdeaea;   --mb_lapsed_fg: #b91c1c;
  --mb_former_bg: #eef0f2;   --mb_former_fg: #6b7280;
  --mb_waived_bg: #ece9fb;   --mb_waived_fg: #5b3fb8;
}

/* the pill after a name */
.mb_pill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.mb_pill_invited { background: var(--mb_invited_bg); color: var(--mb_invited_fg); }
.mb_pill_active { background: var(--mb_active_bg); color: var(--mb_active_fg); }
.mb_pill_past_due { background: var(--mb_past_due_bg); color: var(--mb_past_due_fg); }
.mb_pill_lapsed { background: var(--mb_lapsed_bg); color: var(--mb_lapsed_fg); }
.mb_pill_former { background: var(--mb_former_bg); color: var(--mb_former_fg); }
.mb_pill_waived { background: var(--mb_waived_bg); color: var(--mb_waived_fg); }

/* the row icon / avatar in the status tone */
.settings_row_icon.mb_icon_invited, .mb_person_avatar.mb_icon_invited { background: var(--mb_invited_bg); color: var(--mb_invited_fg); }
.settings_row_icon.mb_icon_active, .mb_person_avatar.mb_icon_active { background: var(--mb_active_bg); color: var(--mb_active_fg); }
.settings_row_icon.mb_icon_past_due, .mb_person_avatar.mb_icon_past_due { background: var(--mb_past_due_bg); color: var(--mb_past_due_fg); }
.settings_row_icon.mb_icon_lapsed, .mb_person_avatar.mb_icon_lapsed { background: var(--mb_lapsed_bg); color: var(--mb_lapsed_fg); }
.settings_row_icon.mb_icon_former, .mb_person_avatar.mb_icon_former { background: var(--mb_former_bg); color: var(--mb_former_fg); }
.settings_row_icon.mb_icon_waived, .mb_person_avatar.mb_icon_waived { background: var(--mb_waived_bg); color: var(--mb_waived_fg); }

/* ---------- the page ---------- */
.mb_page, .mb_page * { min-width: 0; }
.mb_page .settings_row_label { overflow-wrap: anywhere; }
.mb_hero .svy_intro_art { max-width: 520px; }
.svy_intro_button_ghost { background: white; color: darkcyan; }
.svy_intro_button_ghost:hover, .svy_intro_button_ghost:focus { background: #eef7f7; color: #007a7a; }
.mb_top_buttons { display: flex; gap: 8px; align-items: center; flex: none; }
.mb_settings_button { padding: 9px 12px; }
.mb_settings_button i { font-size: 15px; }
.mb_note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #5b6b70; background: #fff8e8; border: 1px solid #f1dfae; border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; line-height: 1.45; }
.mb_note i { color: #9a6400; margin-top: 2px; }
.mb_note a { color: #0f7777; font-weight: 700; }
.mb_row_former, .mb_row_lapsed { opacity: .75; }
.mb_empty { background: #fff; border-radius: 12px; }

/* the count tiles: one per status, the lit one is the filter */
.mb_tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.mb_tile { font: inherit; background: #fff; border: 1.5px solid #dfe8ea; border-radius: 12px; padding: 10px 6px 8px; cursor: pointer; outline: none; text-align: center; -webkit-tap-highlight-color: transparent; transition: border-color .12s, box-shadow .12s; }
.mb_tile_n { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; color: #16211f; }
.mb_tile_l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7a80; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb_tile_on { border-color: darkcyan; box-shadow: 0 0 0 1px darkcyan inset; background: #f3fafa; }
.mb_tile_active .mb_tile_n { color: var(--mb_active_fg); }
.mb_tile_past_due .mb_tile_n { color: var(--mb_past_due_fg); }
.mb_tile_lapsed .mb_tile_n { color: var(--mb_lapsed_fg); }
.mb_tile_waived .mb_tile_n { color: var(--mb_waived_fg); }
.mb_tile_former .mb_tile_n { color: var(--mb_former_fg); }
@media (max-width: 900px) { .mb_tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mb_tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .mb_tile_n { font-size: 18px; } .mb_tile_l { font-size: 9.5px; } }

/* the People page's Members tab */
.mb_tab_top { margin: 0 0 10px; }
.mb_tab_link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0f7777; text-decoration: none; }
.mb_tab_link:hover { color: #0b5f5f; text-decoration: none; }
.mb_tab_list { margin-bottom: 20px; }

/* ---------- the drawers ---------- */
.mb_foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; flex: none; background: #eef3f3; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #dfe8ea; }
.mb_btn_primary { background: darkcyan; border: 1px solid darkcyan; color: white !important; border-radius: 4px; font-weight: 700; padding: 11px 16px; box-shadow: none; }
.mb_btn_primary:hover, .mb_btn_primary:focus { background: #007a7a; border-color: #007a7a; color: white; }
.mb_foot .btn.mb_btn_primary[disabled], .mb_btn_primary:disabled { background: darkcyan; border-color: darkcyan; color: white !important; opacity: .45; cursor: not-allowed; }
.mb_btn_ghost { background: white; border: 1px solid #c9d6d8; color: #4b5b62; border-radius: 4px; font-weight: 700; padding: 11px 16px; box-shadow: none; margin-top: 8px; }
.mb_btn_ghost:hover, .mb_btn_ghost:focus { background: #f3f7f7; color: #16211f; }
.mb_foot .btn-block + .btn-block { margin-top: 8px; }
.mb_errors { width: 100%; }
.process_drawer .pd_form .form-control { width: 100%; min-width: 0; box-sizing: border-box; }
.process_drawer .pd_form textarea.form-control { height: auto; resize: vertical; }
.mb_group_title { display: flex; align-items: center; justify-content: space-between; }
.mb_group_title a { font-size: 12.5px; font-weight: 700; color: #0f7777; text-transform: none; letter-spacing: 0; }
.mb_group_title a i { vertical-align: -1px; }
.mb_fact_light { color: #6b7a80; font-weight: 400; }
.mb_facts .settings_row, .mb_ledger .settings_row { cursor: default; }
.mb_facts a.settings_row { cursor: pointer; }
.mb_facts .settings_row:hover, .mb_ledger .settings_row:hover { background: transparent; }
.mb_facts a.settings_row:hover { background: #eaf4f4; }
.mb_ledger .settings_row_value { font-size: 12.5px; flex: none; padding-left: 8px; }
.mb_action_danger .settings_row_icon { background: var(--mb_lapsed_bg); color: var(--mb_lapsed_fg); }
.mb_note_hint { margin-top: 6px; }
.mb_note_hint.mb_saved { color: #1f7a45; }

/* the person at the top of a member drawer */
.mb_person { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--pd_line, #dbe4e6); border-radius: var(--pd_radius, 10px); padding: 14px; }
.mb_person_avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.mb_person_text { flex: 1 1 auto; min-width: 0; }
.mb_person_name { font-size: 17px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.mb_person_sub { font-size: 13px; color: #6b7a80; margin-top: 2px; }
.mb_person .mb_pill { flex: none; margin-left: 0; }
.mb_standing_blurb { margin: 8px 2px 0; }

/* add members: the send tick in the footer, the count on the button */
.mb_add_cards .pd_card { min-height: 52px; }
.mb_add_cards .pd_card_icon { width: 34px; height: 34px; font-size: 16px; }
.mb_send_row { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 100%; margin: 0 0 10px; }
.mb_send_row .mb_send_box { flex: none; margin: 0; width: 30px; height: 30px; padding: 4px; background: white; border: 2px solid #9aa5a5; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.mb_send_row .mb_send_box.checkbox_active { border-color: #0f7777; }
.mb_send_row .mb_send_box .custom_checkbox_checker { top: 0; line-height: 1; color: #0f7777; font-size: 13px; }
.mb_send_row .mb_send_box .custom_checkbox_checker.hide_me { display: none; }
.mb_send_text { font-size: 12.5px; line-height: 1.45; color: #16211f; cursor: pointer; padding-top: 3px; }

/* the plan drawer: two equal buttons for monthly / yearly */
.mb_interval_btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mb_renewal.hide_me { display: none; }
.mb_fee_chips { margin-bottom: 4px; }
.mb_fee_hint { margin: 6px 2px 0; }
.mb_plan_archived { opacity: .65; }

/* ---------- the staff side ---------- */
.todo_window_icon_member { background: #e7f5f6; color: #007A85; }
.mb_tile_mark { width: 84px; height: 84px; border-radius: 50%; margin-top: 12px; background: #0f7777; color: white; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.mb_tile_mark.due { background: #9a6400; }
.mb_tile_sub { font-size: 12.5px; color: #6b7a80; padding-bottom: 10px; }
.mb_lead { font-size: 15px; line-height: 1.5; color: #16211f; margin: 14px 2px 0; }
.mb_blurb { font-size: 13.5px; line-height: 1.5; color: #435b64; background: #f7fbfb; border: 1px solid #dfe8ea; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.mb_plan_card { background: #fff; border: 1.5px solid var(--pd_line, #dbe4e6); border-radius: var(--pd_radius, 10px); padding: 16px; margin-top: 12px; }
.mb_plan_name { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0f7777; }
.mb_plan_price { font-size: 30px; font-weight: 800; line-height: 1.1; margin-top: 4px; color: #16211f; }
.mb_plan_price span { font-size: 14px; font-weight: 500; color: #6b7a80; margin-left: 6px; }
.mb_plan_desc { font-size: 13.5px; color: #435b64; margin-top: 6px; line-height: 1.5; }
.mb_plan_detail { font-size: 12.5px; color: #6b7a80; margin-top: 8px; line-height: 1.5; }
.mb_staff_drawer .mb_facts, .mb_public .mb_facts { margin-top: 12px; }
.mb_fine { font-size: 12px; color: #6b7a80; line-height: 1.5; margin: 14px 2px 0; }
.mb_wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5b6b70; background: #eef7f7; border: 1px solid #cfe5e6; border-radius: 8px; padding: 8px 12px; margin: 12px 0 0; }
.mb_wait i { color: #0f7777; }
.mb_wait a { color: #0f7777; font-weight: 700; }
.mb_wait.hide_me { display: none; }

/* ---------- the public page (members.php, on the appointments look with no global.css) ---------- */
.mb_public_page .mb_public { padding: 22px 22px 24px; }
.mb_public_notice { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #435b64; background: #eef7f7; border: 1px solid #cfe5e6; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.45; }
.mb_public_notice i { color: #0f7777; margin-top: 2px; }
.mb_public_ok { background: #e3f4ea; border-color: #bfe3cc; color: #1f5a37; }
.mb_public_ok i { color: #1f7a45; }
.mb_public_bad { background: #fdeaea; border-color: #f1c1c1; color: #7a1a1a; }
.mb_public_bad i { color: #b91c1c; }
.mb_public_form { margin-top: 18px; }
.mb_public_pay { width: 100%; font-size: 16px; }
.mb_public_page .settings_group { background: white; border: 1px solid #d3e2e3; border-radius: 12px; overflow: hidden; }
.mb_public_page .settings_row { display: flex; align-items: center; padding: 13px 14px; border-bottom: 1px solid #e4eeee; color: #1f2a2b; font-size: 15px; text-decoration: none; }
.mb_public_page .settings_group > .settings_row:last-child { border-bottom: 0; }
.mb_public_page .settings_row_icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; background: #e2efef; color: #0f5e63; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.mb_public_page .settings_row_label { flex: 1 1 auto; min-width: 0; padding-left: 12px; font-weight: 500; line-height: 1.3; }
.mb_public_page .settings_row_sub { font-size: 12.5px; font-weight: 400; color: #6b7a80; margin-top: 2px; }
.mb_public_page .settings_row_chevron { flex: none; color: #9aa5a5; padding-left: 8px; }
.mb_public_page .pd_label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7a80; margin: 16px 2px 6px; }
.mb_public_page .mb_person { border-color: #dbe4e6; }
.mb_public_page .mb_person_me .mb_person_name { font-size: 19px; }