/* Availability page, automatic availability on, redrawn (pilot, availability_page::PILOT_USER_IDS):
   the open months, the strip of numbers, the heat map with the need per role, the by-person
   grid, not answered and the weekday pattern, the notes. markup from class.availability_page.php,
   toggles from availability_page.js. everything sits under .avp_root so bootstrap and global.css
   stay out of it. no rem units: lib/bootstrap_old makes html 10px, so a rem is 10px here. the page
   it follows is claude/mockups/availability_page_mockup.html */
.avp_root { --avp-line: #e3e8ee; --avp-line-soft: #eef1f5; --avp-ink: #1b2430; --avp-ink2: #4b5563; --avp-ink3: #8a94a6;
  --avp-teal: #16a892; --avp-teal-ink: #0f7f6e; --avp-teal-soft: #e6f6f3; --avp-today: #1f6feb;
  --avp-warn: #d97706; --avp-warn-ink: #925e00; --avp-warn-soft: #fff4e0; --avp-danger: #dc2626; --avp-danger-soft: #fdecec;
  --avp-yes: #16a892; --avp-maybe: #f0b429; --avp-no: #dc2626; --avp-none: #d9dee5;
  --avp-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  color: var(--avp-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.avp_root *, .avp_root *::before, .avp_root *::after { box-sizing: border-box; }
.avp_root .hide_me { display: none !important; }
.avp_root h2, .avp_root h3 { margin: 0; font-family: inherit; line-height: 1.2; }
.avp_root button { font: inherit; color: inherit; cursor: pointer; }
.avp_root a { color: inherit; text-decoration: none; }
.avp_root ul { margin: 0; }
.avp_sub { font-size: 12px; color: var(--avp-ink3); font-weight: 400; margin-left: 6px; }
.avp_empty { font-size: 13px; color: var(--avp-ink3); padding: 14px 16px; list-style: none; }
.avp_up { color: var(--avp-teal-ink); font-weight: 600; }
.avp_link { font-size: 12.5px; color: var(--avp-teal-ink); font-weight: 600; white-space: nowrap; }
.avp_btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--avp-line); background: white; font-weight: 500; font-size: 12.5px; box-shadow: var(--avp-shadow); white-space: nowrap; line-height: 1; }
.avp_btn:hover { border-color: #cfd6df; background: #fbfcfd; }
.avp_pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.avp_pill.warn { background: var(--avp-warn-soft); color: var(--avp-warn-ink); }
.avp_pill.ok { background: var(--avp-teal-soft); color: var(--avp-teal-ink); }
.avp_pill.no { background: var(--avp-danger-soft); color: var(--avp-danger); }
.avp_av { width: 28px; height: 28px; border-radius: 999px; background: #eef2f6; color: var(--avp-ink2); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---------- the open months ---------- */
.avp_months { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; align-items: center; margin: 0 0 14px; padding-bottom: 2px; }
.avp_month_pill, .avp_month_arrow { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--avp-line); background: white; font-size: 13px; font-weight: 500; color: var(--avp-ink2); box-shadow: var(--avp-shadow); }
.avp_month_arrow { width: 34px; padding: 0; justify-content: center; color: var(--avp-ink3); }
.avp_month_pill:hover, .avp_month_arrow:hover { border-color: #cfd6df; }
.avp_month_pill.is_on { background: var(--avp-ink); border-color: var(--avp-ink); color: white; }
.avp_month_pill small { font-size: 11.5px; color: var(--avp-ink3); font-weight: 600; }
.avp_month_pill.is_on small { color: #b9c3d0; }
.avp_month_pill .avp_m { width: 40px; height: 4px; border-radius: 2px; background: var(--avp-line-soft); overflow: hidden; }
.avp_month_pill .avp_m i { display: block; height: 100%; background: var(--avp-teal); }
.avp_month_pill.is_on .avp_m { background: rgba(255,255,255,.2); }
.avp_root.is_busy { opacity: .55; pointer-events: none; }

/* ---------- the strip of numbers ---------- */
.avp_kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.avp_kpi { background: white; border: 1px solid var(--avp-line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--avp-shadow); min-width: 0; text-align: left; }
.avp_kpi:hover { border-color: #cfd6df; }
.avp_kpi_l { font-size: 12px; color: var(--avp-ink3); font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.avp_kpi_l .bi { font-size: 13px; }
.avp_kpi_v { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; line-height: 1.1; }
.avp_kpi_v small { font-size: 12.5px; font-weight: 500; color: var(--avp-ink3); margin-left: 4px; }
.avp_kpi_d { font-size: 12px; color: var(--avp-ink3); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avp_meter { height: 5px; border-radius: 3px; background: var(--avp-line-soft); margin-top: 9px; overflow: hidden; display: flex; }
.avp_meter i { display: block; height: 100%; background: var(--avp-teal); }
.avp_meter i.mb { background: var(--avp-maybe); } .avp_meter i.no { background: var(--avp-no); } .avp_meter i.dn { background: var(--avp-danger); }
.avp_kpi.is_danger { border-color: #f3c3c3; background: #fff8f8; }
.avp_kpi.is_danger .avp_kpi_v { color: var(--avp-danger); }
.avp_kpi.is_warn .avp_kpi_v { color: var(--avp-warn); }
.avp_door { margin-top: 7px; font-size: 12px; color: var(--avp-teal-ink); font-weight: 600; }

/* ---------- cards ---------- */
.avp_card { background: white; border: 1px solid var(--avp-line); border-radius: 10px; box-shadow: var(--avp-shadow); margin-top: 14px; }
.avp_card_head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--avp-line); flex-wrap: wrap; }
.avp_card_head h2 { font-size: 15px; font-weight: 700; }
.avp_head_left { display: flex; align-items: center; gap: 10px; }
.avp_seg { display: inline-flex; border: 1px solid var(--avp-line); border-radius: 8px; background: white; padding: 3px; }
.avp_seg button { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--avp-ink2); }
.avp_seg button.is_on { background: #eef2f6; color: var(--avp-ink); font-weight: 600; }
.avp_legend { display: flex; gap: 12px; font-size: 12px; color: var(--avp-ink3); align-items: center; flex-wrap: wrap; }
.avp_legend.hide_me { display: none; }
.avp_legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--avp-none); }
.avp_legend i.y { background: var(--avp-yes); } .avp_legend i.m { background: var(--avp-maybe); } .avp_legend i.n { background: var(--avp-no); } .avp_legend i.e { background: white; outline: 2px solid var(--avp-today); outline-offset: -2px; }
.avp_legend b { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 5px; vertical-align: 0; }
.avp_legend b.ok { background: var(--avp-teal); } .avp_legend b.tight { background: var(--avp-warn); } .avp_legend b.short { background: var(--avp-danger); }
.avp_foot { padding: 8px 14px 10px; display: flex; gap: 8px; justify-content: space-between; align-items: center; border-top: 1px solid var(--avp-line-soft); font-size: 12px; color: var(--avp-ink3); }
.avp_foot a { color: var(--avp-teal-ink); font-weight: 600; }

/* ---------- conflicts ---------- */
.avp_conf_row { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--avp-line-soft); font-size: 13px; }
.avp_conf_row:last-child { border-bottom: 0; }
.avp_conf_who { flex: 1; min-width: 0; }
.avp_conf_who small { color: var(--avp-ink3); display: block; font-size: 11.5px; }

/* ---------- the heat map ---------- */
.avp_gaps { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px 0; align-items: center; }
.avp_gaps_lbl { font-size: 12px; color: var(--avp-ink3); font-weight: 600; margin-right: 2px; }
.avp_gaps_lbl .bi { color: var(--avp-teal); }
.avp_gap { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid #f3c3c3; background: #fff8f8; color: #9f1d1d; }
.avp_gap b { font-weight: 700; }
.avp_gap.is_tight { border-color: #f5d9a8; background: var(--avp-warn-soft); color: var(--avp-warn-ink); }
.avp_gap:hover { filter: brightness(.97); }
.avp_dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px 10px 0; font-size: 11px; color: var(--avp-ink3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.avp_dow div { padding: 0 6px; }
.avp_heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 6px 10px 12px; }
.avp_day { min-height: 86px; border-radius: 8px; border: 1px solid var(--avp-line-soft); padding: 7px 8px 6px; position: relative; cursor: pointer; background: white; display: flex; flex-direction: column; min-width: 0; }
.avp_day:hover { box-shadow: 0 0 0 2px #cfd6df inset; }
.avp_day.is_sel { box-shadow: 0 0 0 2px var(--avp-ink) inset; }
.avp_day.is_pad { background: transparent; border-color: transparent; cursor: default; }
.avp_day.is_pad:hover { box-shadow: none; }
.avp_day_n { font-size: 12px; font-weight: 600; color: var(--avp-ink2); display: flex; justify-content: space-between; align-items: center; }
.avp_day.is_today .avp_day_n span:first-child { background: var(--avp-today); color: white; border-radius: 999px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin: -2px 0 0 -3px; }
.avp_day_c { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; line-height: 1; }
.avp_day_c small { font-size: 11px; font-weight: 500; color: var(--avp-ink3); margin-left: 3px; letter-spacing: 0; }
.avp_day_ev { margin-top: 5px; font-size: 11px; line-height: 1.25; color: var(--avp-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avp_day_cov { margin-top: auto; padding-top: 5px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.avp_day_cov span { overflow: hidden; text-overflow: ellipsis; }
.avp_day_cov b { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.avp_day_cov.ok { color: var(--avp-teal-ink); } .avp_day_cov.ok b { background: var(--avp-teal); }
.avp_day_cov.tight { color: var(--avp-warn-ink); } .avp_day_cov.tight b { background: var(--avp-warn); }
.avp_day_cov.short { color: var(--avp-danger); } .avp_day_cov.short b { background: var(--avp-danger); }
.avp_day.t1 { background: #f7fbfa; } .avp_day.t2 { background: #e6f6f3; } .avp_day.t3 { background: #c9ece5; } .avp_day.t4 { background: #a3ded2; } .avp_day.t5 { background: #77cdbc; }
.avp_day.t5 .avp_day_n, .avp_day.t5 .avp_day_ev { color: #0b4f45; }
.avp_day.short { border-color: #f3c3c3; }

/* the day that is open */
.avp_day_panel { border-top: 1px solid var(--avp-line); padding: 12px 14px 14px; }
.avp_day_panel_head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.avp_day_panel_head h3 { font-size: 14.5px; font-weight: 700; }
.avp_day_panel_head .avp_sub { margin-left: 0; font-size: 12.5px; }
.avp_day_panel_head .avp_pill { margin-left: auto; }
.avp_roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 22px; }
.avp_role { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--avp-line-soft); }
.avp_role b { font-weight: 600; white-space: nowrap; }
.avp_n { font-size: 12.5px; color: var(--avp-ink3); white-space: nowrap; }
.avp_n strong { color: var(--avp-ink); font-weight: 700; }
.avp_m2 { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--avp-line-soft); overflow: hidden; display: flex; position: relative; }
.avp_m2 i { display: block; height: 100%; }
.avp_m2 i.asg { background: var(--avp-ink); } .avp_m2 i.free { background: var(--avp-teal); } .avp_m2 i.mb { background: var(--avp-maybe); }
.avp_m2 u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--avp-danger); }
.avp_role.short .avp_n strong, .avp_role.short b { color: var(--avp-danger); }
.avp_role.tight .avp_n strong { color: var(--avp-warn); }
.avp_why { grid-column: 1 / -1; font-size: 11.5px; color: var(--avp-ink3); }
.avp_why em { font-style: normal; color: var(--avp-danger); font-weight: 600; }
.avp_why em.w { color: var(--avp-warn-ink); }
.avp_hint { font-size: 12px; color: var(--avp-ink3); padding-top: 10px; }

/* ---------- by person ---------- */
.avp_table_wrap { overflow-x: auto; }
.avp_ptable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; margin: 0; }
.avp_ptable th, .avp_ptable td { padding: 0; height: 30px; border-bottom: 1px solid var(--avp-line-soft); }
.avp_ptable th { font-size: 10.5px; color: var(--avp-ink3); font-weight: 600; text-align: center; height: 26px; }
.avp_ptable th.we { color: var(--avp-ink2); background: #f6f8fa; }
.avp_ptable .avp_name { position: sticky; left: 0; background: white; z-index: 1; padding: 0 10px 0 14px; text-align: left; white-space: nowrap; min-width: 150px; border-right: 1px solid var(--avp-line); }
.avp_ptable tr:hover td { background: #fbfcfd; }
.avp_ptable .avp_name small { color: var(--avp-ink3); margin-left: 6px; font-size: 11px; }
.avp_ptable td.d { width: 20px; min-width: 20px; text-align: center; }
.avp_ptable td.d i { display: block; width: 15px; height: 18px; border-radius: 4px; margin: 0 auto; background: var(--avp-none); opacity: .5; }
.avp_ptable td.d i.y { background: var(--avp-yes); opacity: .75; } .avp_ptable td.d i.m { background: var(--avp-maybe); opacity: .8; } .avp_ptable td.d i.n { background: var(--avp-no); opacity: .6; }
.avp_ptable td.d i.ev { outline: 2px solid var(--avp-today); outline-offset: -2px; }
.avp_ptable tr.is_pending td.d i { opacity: .25; }
.avp_ptable tr.is_pending .avp_name { color: var(--avp-ink3); }
.avp_strips { display: none; }
.avp_strip { padding: 10px 14px; border-bottom: 1px solid var(--avp-line-soft); }
.avp_strip_top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.avp_strip_top b { font-weight: 600; }
.avp_strip_row { display: flex; gap: 2px; margin-top: 6px; }
.avp_strip_row i { flex: 1; height: 14px; border-radius: 2px; background: var(--avp-none); opacity: .5; }
.avp_strip_row i.y { background: var(--avp-yes); opacity: .75; } .avp_strip_row i.m { background: var(--avp-maybe); opacity: .8; } .avp_strip_row i.n { background: var(--avp-no); opacity: .6; }

/* ---------- not answered beside the weekday pattern ---------- */
.avp_two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.avp_pending { list-style: none; margin: 0; padding: 4px 6px; }
.avp_pending li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 13px; }
.avp_pending li.hide_me { display: none; }
.avp_pending li:hover { background: #f6f8fa; }
.avp_who { flex: 1; min-width: 0; }
.avp_who small { display: block; font-size: 11.5px; color: var(--avp-ink3); }
.avp_who .bi-phone { color: var(--avp-teal-ink); font-size: 12px; }
.avp_pattern { padding: 12px 14px 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; height: 120px; }
.avp_pattern div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--avp-ink3); font-weight: 600; height: 100%; justify-content: flex-end; }
.avp_pattern div i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--avp-teal); opacity: .7; }
.avp_pattern div i.hi { opacity: 1; }
.avp_pattern div small { font-size: 10.5px; font-weight: 600; color: var(--avp-ink2); }
.avp_pattern_note { font-size: 12.5px; color: var(--avp-ink2); padding: 4px 14px 14px; }

/* ---------- notes, plain ---------- */
.avp_note { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--avp-line-soft); }
.avp_note.hide_me { display: none; }
.avp_note:last-child { border-bottom: 0; }
.avp_note_body { flex: 1; min-width: 0; }
.avp_note_top { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.avp_note_top b { font-weight: 600; }
.avp_note_top small { color: var(--avp-ink3); font-size: 11.5px; }
.avp_note_top span { color: var(--avp-ink3); font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.avp_note_txt { font-size: 13.5px; color: var(--avp-ink); margin-top: 3px; }

@media (max-width: 1150px) { .avp_kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .avp_two { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .avp_kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .avp_kpi { padding: 11px 12px; } .avp_kpi_v { font-size: 20px; }
  .avp_heat { gap: 3px; padding: 4px 6px 8px; }
  .avp_day { min-height: 60px; padding: 5px 5px 4px; border-radius: 6px; }
  .avp_day_c { font-size: 15px; } .avp_day_c small { display: none; }
  .avp_day_ev { display: none; }
  .avp_day_cov span { display: none; } .avp_day_cov { padding-top: 3px; }
  .avp_dow { padding: 6px 6px 0; }
  .avp_table_wrap { display: none; } .avp_strips { display: block; }
  .avp_roles { grid-template-columns: 1fr; gap: 2px; }
  .avp_n { white-space: normal; }
  .avp_day_panel_head .avp_sub { display: block; width: 100%; }
  .avp_legend_day span:first-child { display: none; }
}