/* Events page, redrawn (pilot, events_page::PILOT_USER_IDS): the header, the strip of numbers,
   the month of coloured bars, the list, the rail and the event drawer. markup from
   class.events_page.php, swaps from events_page.js. everything sits under .evp_root or
   .evp_event_drawer so bootstrap and global.css stay out of it; the page it follows is
   claude/mockups/events_page_mockup.html */
.evp_root { --evp-line: #e3e8ee; --evp-line-soft: #eef1f5; --evp-ink: #1b2430; --evp-ink2: #4b5563; --evp-ink3: #8a94a6;
  --evp-teal: #16a892; --evp-teal-ink: #0f7f6e; --evp-teal-soft: #e6f6f3; --evp-today: #1f6feb;
  --evp-warn: #d97706; --evp-warn-soft: #fff4e0; --evp-danger: #dc2626; --evp-danger-soft: #fdecec;
  --evp-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  color: var(--evp-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.evp_root *, .evp_root *::before, .evp_root *::after { box-sizing: border-box; }
.evp_root .hide_me { display: none !important; }
.evp_root h1, .evp_root h2, .evp_root h3 { margin: 0; font-family: inherit; line-height: 1.2; }
.evp_root button { font: inherit; color: inherit; cursor: pointer; }
.evp_root a { color: inherit; text-decoration: none; }
.evp_sub { display: block; font-size: 12px; color: var(--evp-ink3); font-weight: 400; margin-top: 1px; }
.evp_empty { font-size: 13px; color: var(--evp-ink3); padding: 14px 16px; }
.evp_nowrap { white-space: nowrap; }
.evp_root .is_warn, .evp_drawer .is_warn { color: var(--evp-warn, #d97706) !important; }
.evp_root .is_teal, .evp_drawer .is_teal { color: var(--evp-teal-ink, #0f7f6e) !important; }
.evp_root .is_up { color: var(--evp-teal-ink); }

/* ---------- header: one line — the title, the search, the buttons. under 900px the search
   is an icon button and its field is a row of its own beneath the line, open on the icon ---------- */
.evp_head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 12px !important; margin: 0 0 6px; }
.evp_head_title { order: 1; margin-right: auto; }
.evp_head h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.evp_search { order: 2; }
.evp_actions { order: 3; display: flex; align-items: center; gap: 8px; }
.evp_btn.evp_search_btn { display: none; }
.evp_icon_btn { width: 36px; padding: 0; justify-content: center; }
.evp_search_btn.is_on { background: #1b2430; border-color: #1b2430; color: white; }
.evp_btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--evp-line); background: white; font-weight: 500; font-size: 13.5px; box-shadow: var(--evp-shadow); white-space: nowrap; line-height: 1; }
.evp_btn:hover { border-color: #cfd6df; background: #fbfcfd; }
.evp_btn .bi { font-size: 14px; }
.evp_btn.evp_primary { background: var(--evp-teal); border-color: var(--evp-teal); color: white; }
.evp_btn.evp_primary:hover { background: var(--evp-teal-ink); border-color: var(--evp-teal-ink); }
.evp_search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--evp-line); border-radius: 8px; background: white; color: var(--evp-ink3); min-width: 220px; box-shadow: var(--evp-shadow); margin: 0; font-weight: 400; }
.evp_search_input { border: 0 !important; min-width: 0; outline: 0; background: transparent; font: inherit; width: 100%; color: var(--evp-ink); padding: 0; box-shadow: none !important; height: auto; }
.evp_search_input:focus { outline: 0; }
.evp_search_clear { border: 0; background: transparent; color: var(--evp-ink3); padding: 0 2px; font-size: 12px; }
.evp_seg { display: inline-flex; border: 1px solid var(--evp-line); border-radius: 8px; background: white; padding: 3px; box-shadow: var(--evp-shadow); }
.evp_seg button { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--evp-ink2); }
.evp_seg button.is_on { background: #eef2f6; color: var(--evp-ink); font-weight: 600; }
.evp_split_wrap { position: relative; }
.evp_split { display: inline-flex; box-shadow: var(--evp-shadow); border-radius: 8px; }
.evp_split .evp_btn { box-shadow: none; border-radius: 8px 0 0 8px; }
.evp_split .evp_btn + .evp_btn { border-radius: 0 8px 8px 0; border-left: 1px solid rgba(255,255,255,.28); width: 32px; padding: 0; justify-content: center; }
.evp_menu { position: absolute; right: 0; top: 42px; width: 320px; background: white; border: 1px solid var(--evp-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.14); padding: 6px; z-index: 30; display: none; }
.evp_split_wrap.is_open .evp_menu { display: block; }
.evp_menu_item { display: flex; gap: 12px; padding: 10px; border-radius: 8px; }
.evp_menu_item:hover { background: #f6f8fa; }
.evp_menu_ic { width: 34px; height: 34px; border-radius: 8px; background: var(--evp-teal-soft); color: var(--evp-teal-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.evp_menu_item b { display: block; font-size: 13.5px; font-weight: 600; }
.evp_menu_item span:not(.evp_menu_ic) { font-size: 12.5px; color: var(--evp-ink3); }

/* ---------- the strip of numbers, under the month ---------- */
.evp_kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.evp_kpi { background: white; border: 1px solid var(--evp-line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--evp-shadow); min-width: 0; }
.evp_kpi_l { font-size: 12px; color: var(--evp-ink3); font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.evp_kpi_v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.evp_kpi_d { font-size: 12px; color: var(--evp-ink3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evp_bar_meter { height: 5px; border-radius: 3px; background: var(--evp-line-soft); margin-top: 10px; overflow: hidden; }
.evp_bar_meter i { display: block; height: 100%; background: var(--evp-teal); border-radius: 3px; }
.evp_bar_meter i.is_warn { background: var(--evp-warn); }
.evp_bar_meter.is_mini { width: 64px; height: 4px; margin: 5px 0 0 auto; }

/* ---------- layout ---------- */
.evp_grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.evp_main { min-width: 0; }
.evp_card { background: white; border: 1px solid var(--evp-line); border-radius: 10px; box-shadow: var(--evp-shadow); }
.evp_root.is_busy .evp_month { opacity: .55; pointer-events: none; }

/* ---------- the month ---------- */
.evp_calhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--evp-line); flex-wrap: nowrap; }
.evp_monthnav { display: flex; align-items: center; gap: 6px; }
.evp_monthnav h2 { font-size: 17px; font-weight: 700; margin: 0 8px; min-width: 150px; text-align: center; letter-spacing: -.01em; }
.evp_nav { height: 30px; width: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--evp-line); background: white; font-size: 12.5px; font-weight: 500; }
.evp_nav:hover { border-color: #cfd6df; background: #fbfcfd; }
.evp_nav.evp_today { width: auto; padding: 0 10px; }
/* the filter button: the funnel with the choice's name, the menu under it */
.evp_filter_wrap { position: relative; flex: none; }
.evp_filter_btn { height: 30px; padding: 0 10px; font-size: 12.5px; box-shadow: none; }
.evp_filter_caret { font-size: 10px !important; margin-left: -2px; }
.evp_filter_wrap.is_active .evp_filter_btn { background: #1b2430; border-color: #1b2430; color: white; }
.evp_filter_menu { position: absolute; right: 0; top: 36px; min-width: 180px; background: white; border: 1px solid var(--evp-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.14); padding: 6px; z-index: 30; display: none; }
.evp_filter_wrap.is_open .evp_filter_menu { display: block; }
.evp_filter_item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--evp-ink); white-space: nowrap; }
.evp_filter_item:hover { background: #f6f8fa; }
.evp_filter_item .bi { width: 14px; visibility: hidden; color: var(--evp-teal-ink); }
.evp_filter_item.is_on .bi { visibility: visible; }

.evp_dows { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--evp-line); background: #fafbfc; }
.evp_dows div { padding: 8px 0 8px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--evp-ink3); }
.evp_dows div:nth-child(1), .evp_dows div:nth-child(7) { color: #aab3c0; }

.evp_week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--evp-line-soft); }
.evp_week:last-child { border-bottom: 0; }
.evp_day { padding: 8px 10px; border-right: 1px solid var(--evp-line-soft); position: relative; min-width: 0; }
.evp_day:last-child { border-right: 0; }
.evp_day.is_other { background: #fafbfc; }
.evp_day.is_weekend { background: #fcfcfd; }
.evp_day:hover { background: #f8fafc; }
.evp_day_num { font-size: 13px; font-weight: 600; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.evp_day.is_other .evp_day_num { font-weight: 500; color: #b3bac6; }
.evp_day.is_today .evp_day_num { background: var(--evp-today); color: white; }
.evp_day_open { position: absolute; right: 8px; top: 12px; font-size: 11px; color: var(--evp-warn); font-weight: 500; white-space: nowrap; }

/* the bars: absolute over the week row, one lane per event, 26px a lane. a bar cut by the week
   edge loses its rounding on that side (cont_l / cont_r); an unpublished one is hatched */
.evp_lanes { position: absolute; left: 0; right: 0; top: 40px; pointer-events: none; }
.evp_bar { position: absolute; height: 22px; line-height: 22px; border-radius: 2px; color: white; font-size: 12px; font-weight: 600; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.08); transition: filter .12s; }
.evp_bar:hover { filter: brightness(.92); z-index: 2; }
.evp_bar.cont_l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.evp_bar.cont_r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.evp_bar.is_draft { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.evp_bar.is_filtered { display: none; }
.evp_bar.is_selected { outline: 2px solid var(--evp-ink); outline-offset: 1px; z-index: 3; }
.evp_st { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: white; margin-right: 6px; vertical-align: 1px; }
.evp_st.is_half { background: linear-gradient(90deg, white 50%, transparent 50%); border: 1.5px solid white; width: 9px; height: 9px; vertical-align: 0; }
.evp_st.is_msg { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.evp_bar_tail { float: right; font-weight: 500; opacity: .9; font-size: 11px; margin-left: 8px; }

.evp_legend { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--evp-line); font-size: 12px; color: var(--evp-ink3); align-items: center; flex-wrap: wrap; }
.evp_legend .evp_sw { width: 22px; height: 10px; border-radius: 3px; background: #546e7a; vertical-align: -1px; margin-right: 6px; }
.evp_legend .evp_sw.is_draft { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 4px, transparent 4px 8px); }
.evp_legend_hint { margin-left: auto; }
.evp_sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* the two views: Month by default, List when the toggle says so */
.evp_list_card { display: none; }
.evp_root.is_list .evp_cal_card { display: none; }
.evp_root.is_list .evp_list_card { display: block; }

/* ---------- the list ---------- */
.evp_table_wrap { overflow-x: auto; }
.evp_list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.evp_list th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--evp-ink3); font-weight: 600; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--evp-line); background: #fafbfc; }
.evp_list td { padding: 12px 16px; border-bottom: 1px solid var(--evp-line-soft); vertical-align: middle; }
.evp_list_row { cursor: pointer; }
.evp_list_row:hover td { background: #f8fafc; }
.evp_list_name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.evp_list_go { text-align: right; color: var(--evp-ink3); }
.evp_pill { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.evp_pill.is_pub { background: var(--evp-teal-soft); color: var(--evp-teal-ink); }
.evp_pill.is_draft { background: #eef1f5; color: var(--evp-ink2); }
.evp_pill.is_open { background: var(--evp-warn-soft); color: var(--evp-warn); }
.evp_fillcell { display: flex; align-items: center; gap: 10px; }
.evp_fillcell .evp_bar_meter { width: 90px; margin: 0; }

/* ---------- the rail ---------- */
.evp_rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.evp_rail_card { padding: 14px 16px; }
.evp_rail h3 { font-size: 13px; font-weight: 700; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; }
.evp_badge { background: var(--evp-danger-soft); color: var(--evp-danger); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.evp_att { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--evp-line-soft); font-size: 12.5px; align-items: center; }
.evp_att:first-of-type { border-top: 0; }
.evp_att_ic { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.evp_att_ic.is_warn { background: var(--evp-warn-soft); color: var(--evp-warn) !important; }
.evp_att_ic.is_danger { background: var(--evp-danger-soft); color: var(--evp-danger); }
.evp_att_ic.is_teal { background: var(--evp-teal-soft); color: var(--evp-teal-ink) !important; }
.evp_item { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--evp-line-soft); align-items: flex-start; cursor: pointer; }
.evp_item:first-of-type { border-top: 0; }
.evp_item:hover .evp_item_main b { color: var(--evp-teal-ink); }
.evp_item_sw { width: 4px; border-radius: 2px; flex: none; align-self: stretch; }
.evp_item_main { min-width: 0; }
.evp_item_main b { font-size: 13px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evp_item_r { margin-left: auto; text-align: right; font-size: 12px; color: var(--evp-ink2); white-space: nowrap; flex: none; }
.evp_item_r b { font-size: 13px; }
.evp_kv { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--evp-ink2); padding: 4px 0; }

/* ---------- search results: in place of the numbers, the month and the rail while a search is on ---------- */
.evp_search_results { display: none; }
.evp_root.is_searching .evp_body { display: none; }
.evp_root.is_searching .evp_search_results { display: block; }
.evp_search_summary { padding: 12px 16px; font-size: 13px; color: var(--evp-ink3); border-bottom: 1px solid var(--evp-line); }
.evp_search_band { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--evp-teal-soft); color: var(--evp-teal-ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-top: 1px solid var(--evp-line-soft); border-bottom: 1px solid var(--evp-line-soft); }
.evp_search_band_n { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--evp-teal-ink); opacity: .8; }
.evp_result { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--evp-line-soft); cursor: pointer; }
.evp_search_rows .evp_result:first-child { border-top: 0; }
.evp_result:hover { background: #f8fafc; }
.evp_result .evp_item_sw { align-self: stretch; min-height: 30px; }
.evp_result_main { min-width: 0; flex: 1; }
.evp_result_main b { font-size: 13.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evp_result_r { display: flex; align-items: center; gap: 12px; flex: none; color: var(--evp-ink3); }
.evp_result_fill { font-size: 12.5px; font-weight: 600; color: var(--evp-ink2); }
.evp_pill.is_past { background: #eef1f5; color: var(--evp-ink3); }

/* ---------- the event drawer (in the meetups shell) ---------- */
.evp_event_drawer .meetup_drawer_body { background: white !important; }
.evp_event_drawer .mchat_container { background: white !important; }
.evp_drawer { color: #1b2430; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }
.evp_drawer *, .evp_drawer *::before, .evp_drawer *::after { box-sizing: border-box; }
.evp_drawer_top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.evp_drawer_sub { font-size: 13px; color: #8a94a6; }
.evp_stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.evp_stat3 div { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 8px; padding: 10px; }
.evp_stat3 b { display: block; font-size: 18px; font-weight: 700; }
.evp_stat3 span { font-size: 11.5px; color: #8a94a6; }
.evp_drawer .evp_bar_meter { margin: 0 0 4px; height: 5px; border-radius: 3px; background: #eef1f5; overflow: hidden; }
.evp_drawer .evp_bar_meter i { display: block; height: 100%; background: #16a892; border-radius: 3px; }
.evp_drawer .evp_bar_meter i.is_warn { background: #d97706; }
.evp_drawer .evp_sub { display: block; font-size: 12px; color: #8a94a6; }
.evp_h4 { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #8a94a6; margin: 18px 0 6px; font-weight: 600; }
.evp_h4 .evp_sub { display: inline; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.evp_shift { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid #eef1f5; font-size: 13px; }
.evp_shift:first-of-type { border-top: 0; }
.evp_shift_d { width: 46px; flex: none; font-weight: 600; color: #4b5563; font-size: 12px; padding-top: 1px; }
.evp_shift_role { min-width: 0; flex: 1; }
.evp_shift_role b { display: block; font-weight: 600; }
.evp_shift_role span { font-size: 12px; color: #8a94a6; }
.evp_shift_people { font-size: 12px; color: #4b5563; margin-top: 2px; }
.evp_shift_cnt { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #e6f6f3; color: #0f7f6e; }
.evp_shift_cnt.is_open { background: #fff4e0; color: #d97706; }
.evp_drawer_footer { display: flex; gap: 8px; padding: 12px 16px; background: white; border-top: 1px solid #e3e8ee; }
.evp_drawer_footer .evp_btn { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid #e3e8ee; background: white; font-weight: 500; font-size: 13.5px; white-space: nowrap; cursor: pointer; color: #1b2430; }
.evp_drawer_footer .evp_btn.evp_primary { background: #16a892; border-color: #16a892; color: white; }
.evp_event_drawer .meetup_drawer_footer { padding: 0 !important; background: white !important; }

/* ---------- narrower ---------- */
@media (max-width: 1250px) {
  .evp_kpis { grid-template-columns: repeat(2, 1fr); }
  .evp_grid { grid-template-columns: minmax(0, 1fr); }
  .evp_rail { display: grid; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .evp_btn.evp_search_btn { display: inline-flex; }
  .evp_search { display: none; order: 4; flex-basis: 100%; min-width: 0; }
  .evp_root.is_search_open .evp_search { display: flex; }
  .evp_root.is_search_open .evp_search_btn { background: #1b2430; border-color: #1b2430; color: white; }
}
@media (max-width: 767px) {
  /* closer under the phone header: the content cell gives 20px above, the header takes half back
     (sync_staff_fixed_header sticks it where it rests and paints the gap above white) */
  .evp_head { margin-top: -10px; padding-bottom: 8px !important; }
  .evp_result_fill { display: none; }
  .evp_kpis { grid-template-columns: repeat(2, 1fr); }
  .evp_rail { grid-template-columns: 1fr; }
  .evp_split .evp_btn.add_event_button span { display: none; }
  .evp_split .evp_btn.add_event_button { padding: 0 11px; }
  .evp_monthnav h2 { min-width: 0; font-size: 15px; margin: 0 4px; white-space: nowrap; }
  .evp_monthnav { gap: 4px; }
  .evp_calhead { padding: 10px; gap: 6px; }
  .evp_filter_label, .evp_filter_caret { display: none; }
  .evp_filter_btn { width: 30px; padding: 0; justify-content: center; }
  .evp_filter_wrap.is_active .evp_filter_btn::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--evp-warn); }
  .evp_filter_btn { position: relative; }
  .evp_day { padding: 6px 4px; }
  .evp_day_open { display: none; }
  .evp_bar { font-size: 11px; padding: 0 5px; }
  .evp_bar_tail { display: none; }
  .evp_legend_hint { display: none; }
}