/* Employer Calendar (pilot): a fixed-height month grid with a day panel under it. one skeleton,
   two looks — .is_events draws each event as a thin coloured bar across its days (three lanes a
   week); .is_recurring puts a shift count in the cell and a red dot when a shift is open.
   markup from class.employer_calendar.php, swaps from employer_calendar.js */
.emp_cal { max-width: 900px; margin: 0 auto; color: #16211f; }
.emp_cal_month_wrap { background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 10px 8px 8px; }

/* header: chevrons either side of the month, Today on the right */
.emp_cal_head { display: flex; align-items: center; gap: 4px; padding: 0 2px 8px; }
.emp_cal_title { font-weight: 700; font-size: 1.05em; padding: 0 4px; }
.emp_cal_prev, .emp_cal_next { width: 32px; height: 32px; border-radius: 16px; border: 1px solid #c3d1d4; background: #f7fafa; color: #0f7777; font-size: 22px; line-height: 1; padding: 0 0 3px; cursor: pointer; }
.emp_cal_prev:hover, .emp_cal_next:hover { border-color: #0f7777; }
.emp_cal_today { margin-left: auto; border: 1px solid #c3d1d4; background: #f7fafa; color: #0f7777; font-weight: 600; font-size: .8em; border-radius: 14px; padding: 5px 12px; cursor: pointer; }
.emp_cal_today:hover { border-color: #0f7777; }

/* weekday row */
.emp_cal_dows { display: grid; grid-template-columns: repeat(7, 1fr); }
.emp_cal_dow { text-align: center; font-size: .68em; font-weight: 700; color: #8a9a9f; padding-bottom: 4px; }

/* six week rows, each a 7-column grid: the number row, three bar lanes, the "+n" row. the
   height is fixed so the calendar never grows with what is on it */
.emp_cal_weeks { display: flex; flex-direction: column; gap: 2px; }
.emp_cal_week { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 22px 7px 7px 7px 12px; row-gap: 2px; column-gap: 0; position: relative; }
.emp_cal.is_recurring .emp_cal_week { grid-template-rows: 22px 22px 6px; }

/* the day: spans every row of its column so the whole cell taps; drawn transparent so the bars
   show through. selected = a teal ring, today = a teal number disc */
.emp_cal_day { grid-row: 1 / -1; position: relative; z-index: 2; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding-top: 1px; border: 2px solid transparent; }
.emp_cal_day:hover { background: rgba(15, 119, 119, .06); }
.emp_cal_day.is_selected { border-color: #0f7777; background: rgba(15, 119, 119, .08); }
.emp_cal_num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 10px; font-size: .82em; font-weight: 600; line-height: 1; }
.emp_cal_day.is_other .emp_cal_num { color: #c3cdd0; }
.emp_cal_day.is_past:not(.is_other) .emp_cal_num { color: #8a9a9f; }
.emp_cal_day.is_today .emp_cal_num { background: #0f7777; color: white; }

/* events mode: the bars. a segment continues past the week edge when the event does (square
   ends), rounded where it starts or ends. names only on wide screens */
.emp_cal_bar { z-index: 1; height: 7px; border-radius: 0; margin: 0 1px; overflow: hidden; pointer-events: none; color: white; font-size: 11px; line-height: 7px; white-space: nowrap; }
.emp_cal_bar.is_start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-left: 3px; }
.emp_cal_bar.is_end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-right: 3px; }
.emp_cal_bar_name { display: none; }
.emp_cal_more { z-index: 1; pointer-events: none; text-align: center; font-size: 10px; font-weight: 700; color: #8a9a9f; line-height: 12px; }

/* recurring mode: the count under the number; a red dot on the count when a shift is open */
.emp_cal_count { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e3f1f2; color: #0f7777; font-size: .72em; font-weight: 700; line-height: 1; margin-top: 2px; }
.emp_cal_day.has_open .emp_cal_count { background: #f9dddb; color: #b8433a; }
.emp_cal_day.has_open .emp_cal_count::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 4px; background: #e53935; border: 1px solid white; }

/* the day panel: a heading, then a body that scrolls on its own on a phone */
.emp_cal_panel { margin-top: 12px; background: white; border: 1px solid #e8eaed; border-radius: 12px; overflow: hidden; }
.emp_cal_panel_head { padding: 12px 14px 10px; border-bottom: 1px solid #eef1f2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.emp_cal_panel_title { font-weight: 700; font-size: 1em; }
.emp_cal_panel_sub { font-size: .8em; color: #8a9a9f; margin-left: auto; white-space: nowrap; }
.emp_cal_panel_body { padding: 6px 0; }
.emp_cal_empty { padding: 26px 14px 30px; text-align: center; color: #8a9a9f; font-size: .92em; }

/* a row per shift (recurring) or per event (events); the whole row goes to the event */
.emp_cal_row { padding: 10px 14px; border-bottom: 1px solid #f1f3f4; cursor: pointer; }
.emp_cal_row:last-child { border-bottom: 0; }
.emp_cal_row:hover { background: #f7fafa; }
.emp_cal_row_top { display: flex; align-items: center; gap: 8px; }
.emp_cal_time { font-weight: 700; font-size: .92em; white-space: nowrap; }
.emp_cal_name { font-weight: 700; font-size: .95em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp_cal_swatch { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 3px; }
.emp_cal_filled { margin-left: auto; font-size: .78em; color: #8a9a9f; white-space: nowrap; }
.emp_cal_pill { font-size: .72em; font-weight: 700; border-radius: 10px; padding: 2px 8px; white-space: nowrap; line-height: 1.4; }
.emp_cal_pill.is_open { background: #f9dddb; color: #b8433a; }
.emp_cal_pill.is_pending { background: #fdf0d5; color: #9a6400; }
.emp_cal_pill.is_full { background: #cdeedd; color: #1f6a48; }
.emp_cal_what { font-size: .84em; color: #4d5c60; margin-top: 3px; }
.emp_cal_summary { font-size: .8em; color: #8a9a9f; margin-top: 3px; }
.emp_cal_people { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.emp_cal_person { font-size: .76em; font-weight: 600; border-radius: 4px; padding: 3px 7px; background: #cdeedd; color: #1f6a48; }
.emp_cal_person.is_pending { background: #fdf0d5; color: #9a6400; }
.emp_cal_person.is_declined { background: #f9dddb; color: #b8433a; text-decoration: line-through; }
.emp_cal_nobody { font-size: .78em; color: #b8433a; font-weight: 600; }

/* events mode: the event's shifts that day, under its name */
.emp_cal_shift { display: flex; align-items: center; gap: 8px; padding: 6px 0 0 18px; }
.emp_cal_shift .emp_cal_what { margin-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp_cal_shift .emp_cal_filled { display: none; }

/* phone: the section fills what is left between the fixed teal header (55px + the page's 20px)
   and the lower nav (80px with its safe-area padding); the calendar keeps its height and the
   day panel takes the rest and scrolls on its own. an ancestor clips overflow, so sticky is out */
@media (max-width: 767px)
{
  .emp_cal { display: flex; flex-direction: column; height: calc(100vh - 165px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - 165px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .emp_cal_month_wrap { flex: 0 0 auto; }
  .emp_cal_panel { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; }
  .emp_cal_panel_head { flex: 0 0 auto; }
  .emp_cal_panel_body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* short phones: tighter rows so the day panel keeps some room */
@media (max-width: 767px) and (max-height: 720px)
{
  .emp_cal_month_wrap { padding: 6px 6px 4px; }
  .emp_cal_head { padding-bottom: 4px; }
  .emp_cal_week { grid-template-rows: 20px 6px 6px 6px 10px; row-gap: 1px; }
  .emp_cal.is_recurring .emp_cal_week { grid-template-rows: 20px 18px 3px; }
  .emp_cal_bar { height: 6px; }
  .emp_cal_count { height: 16px; min-width: 20px; }
  .emp_cal_more { line-height: 10px; }
}

/* wide: taller lanes carrying the event name on its first segment; the day panel simply lists */
@media (min-width: 768px)
{
  .emp_cal_week { grid-template-rows: 24px 14px 14px 14px 12px; row-gap: 2px; }
  .emp_cal.is_recurring .emp_cal_week { grid-template-rows: 26px 24px 8px; }
  .emp_cal_num { width: 24px; height: 24px; border-radius: 12px; font-size: .9em; }
  .emp_cal_bar { height: 14px; line-height: 14px; font-size: 10.5px; padding: 0 6px; border-radius: 0; }
  .emp_cal_bar.is_start .emp_cal_bar_name { display: inline; }
  .emp_cal_more { font-size: 11px; line-height: 12px; }
  .emp_cal_count { font-size: .78em; height: 20px; }
}