/* Schedule periods (recurring companies): the employer's Schedule section — period cards, the
   numbers, the coverage pattern grid, the shifts by template, publish. markup from
   class.schedules.php, swaps from schedules.js. Built on the geofence section's shapes */

.sched_admin { max-width: 960px; margin: 0 auto; color: #16211f; padding: 0 10px 40px; }
.sched_admin.is_busy { opacity: .6; pointer-events: none; }

/* ---- headings ---- */
.sch_head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 2px 12px; }
.sch_head_title { font-size: 1.3em; font-weight: 800; }
.sch_head_sub { font-size: .85em; color: #6b7a7e; margin-top: 3px; max-width: 560px; }
.sch_new_button { margin-left: auto; flex: none; border: 1px solid #0f7777; background: #0f7777; color: white; font-weight: 600; font-size: .85em; border-radius: 20px; padding: 7px 14px; white-space: nowrap; }
.sch_new_button:hover, .sch_new_button:focus { background: #0c6363; color: white; }
.sch_section { margin-top: 18px; }
.sch_section_title { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: .95em; margin: 0 0 6px; }
.sch_section_sub { font-weight: 500; font-size: .85em; color: #8a9a9f; }
.sch_label { display: block; font-size: .78em; font-weight: 700; color: #6b7a7e; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .02em; }
.sch_hint { font-size: .78em; color: #8a9a9f; margin: 6px 0 10px; line-height: 1.4; }
.sch_none { font-size: .85em; color: #8a9a9f; padding: 14px 4px; }
.sch_flash { background: #eaf6f2; color: #0f7777; border-radius: 8px; padding: 8px 12px; font-size: .85em; font-weight: 600; margin-bottom: 12px; }

/* ---- the period cards ---- */
.sch_list { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; }
.sch_card { flex: none; width: 220px; background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 12px; cursor: pointer; }
.sch_card:hover { border-color: #c3d1d4; }
.sch_card.is_selected { border-color: #0f7777; box-shadow: 0 0 0 1px #0f7777 inset; }
.sch_card_top { display: flex; align-items: center; gap: 6px; }
.sch_card_group { font-weight: 700; font-size: .95em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch_card_dates { font-size: .82em; color: #16211f; margin-top: 4px; }
.sch_card_meta { font-size: .76em; color: #6b7a7e; margin-top: 6px; }
.sch_empty { flex: 1; text-align: center; padding: 28px 10px; color: #6b7a7e; background: white; border: 1px dashed #d8dde0; border-radius: 12px; }
.sch_empty i { font-size: 1.6em; color: #b6c2c5; }
.sch_empty_title { font-weight: 700; margin-top: 6px; color: #16211f; }
.sch_empty_copy { font-size: .82em; max-width: 440px; margin: 4px auto 0; line-height: 1.4; }

/* ---- status ---- */
.sch_pill { flex: none; font-size: .68em; font-weight: 700; border-radius: 10px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .03em; }
.sch_pill_draft { background: #fff3d6; color: #8a5a00; }
.sch_pill_live { background: #e2f4ea; color: #1d6b3a; }
.sch_pill_import { background: #e8eef7; color: #33507a; }

/* ---- the panel ---- */
.sch_panel { background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 14px; }
.sch_panel_head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sch_panel_title { font-weight: 800; font-size: 1.05em; }
.sch_form_row { display: flex; gap: 14px; flex-wrap: wrap; }
.sch_form_row > div { flex: 1 1 180px; }
.sch_create { margin-top: 6px; background: #0f7777; border-color: #0f7777; font-weight: 600; }

/* ---- the numbers ---- */
.sch_numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.sch_tile { background: #f6f8f8; border-radius: 10px; padding: 10px 12px; }
.sch_tile_label { font-size: .72em; font-weight: 700; color: #6b7a7e; text-transform: uppercase; letter-spacing: .02em; }
.sch_tile_value { font-size: 1.6em; font-weight: 800; color: #0f7777; line-height: 1.2; margin-top: 2px; }
.sch_tile_of { font-size: .55em; color: #8a9a9f; font-weight: 600; }
.sch_tile_sub { font-size: .74em; color: #6b7a7e; margin-top: 2px; line-height: 1.35; }

/* ---- the pattern grid and the shifts table ---- */
.sch_grid_wrap { overflow-x: auto; }
.sch_grid, .sch_table { width: 100%; border-collapse: collapse; font-size: .85em; }
.sch_grid th, .sch_table th { font-size: .78em; font-weight: 700; color: #6b7a7e; text-align: center; padding: 6px 4px; border-bottom: 1px solid #e8eaed; }
.sch_grid td { padding: 3px 3px; text-align: center; border-bottom: 1px solid #f0f2f3; }
.sch_grid th.sch_template, .sch_grid td.sch_template { text-align: left; min-width: 170px; padding-left: 4px; }
.sch_template_name { font-weight: 600; }
.sch_template_sub { font-size: .76em; color: #8a9a9f; }
.sch_cell { width: 46px; text-align: center; border: 1px solid #dfe4e6; border-radius: 6px; padding: 4px 2px; font-size: 1em; background: white; -moz-appearance: textfield; }
.sch_cell::-webkit-outer-spin-button, .sch_cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sch_cell:focus { border-color: #0f7777; outline: none; }
.sch_cell::placeholder { color: #d0d7d9; }
.sch_day_total { font-weight: 700; color: #0f7777; padding: 6px 3px; }
.sch_day_total_label { font-size: .78em; font-weight: 700; color: #6b7a7e; }
.sch_build, .sch_publish { margin-top: 12px; font-weight: 600; }
.sch_build { background: #0f7777; border-color: #0f7777; }
.sch_table td { padding: 6px 4px; border-bottom: 1px solid #f0f2f3; }
.sch_table th.sch_num, .sch_table td.sch_num { text-align: right; }
.sch_open { color: #b25b00; font-weight: 700; }
.sch_publish_section { border-top: 1px solid #e8eaed; padding-top: 12px; }

@media (max-width: 600px)
{
  .sch_card { width: 180px; }
  .sch_tile_value { font-size: 1.3em; }
}

/* ---- list / calendar toggle ---- */
.sch_toggle { margin-left: auto; display: inline-flex; border: 1px solid #dfe4e6; border-radius: 20px; overflow: hidden; }
.sch_toggle_button { border: 0; background: white; color: #6b7a7e; font-size: .8em; font-weight: 600; padding: 5px 12px; cursor: pointer; }
.sch_toggle_button + .sch_toggle_button { border-left: 1px solid #dfe4e6; }
.sch_toggle_button.is_on { background: #0f7777; color: white; }
.sch_toggle_button i { margin-right: 3px; }

/* ---- the shifts list above the calendar: each shift and the weekdays it runs on, one line ---- */
.sch_shift_row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f2f3; }
.sch_shift_row:last-child { border-bottom: 0; }
.sch_shift_row .sch_template_name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch_dows { display: inline-flex; gap: 4px; flex: none; }
.sch_dow { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dfe4e6; background: white; color: #8a9a9f; font-size: .8em; font-weight: 700; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sch_dow:hover { border-color: #0f7777; color: #0f7777; }
.sch_dow.is_on { background: #0f7777; border-color: #0f7777; color: white; }
.sch_dow_n { position: absolute; top: -5px; right: -4px; min-width: 15px; height: 15px; line-height: 15px; border-radius: 8px; background: #e0a72c; color: white; font-size: .68em; font-weight: 700; padding: 0 3px; }
.sch_shifts_off_head { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 10px 0 4px; font-size: .82em; font-weight: 600; color: #6b7a7e; cursor: pointer; text-align: left; }
.sch_shifts_off_head i { font-size: .8em; transition: transform .15s; }
.sch_shifts_off_head.is_open i { transform: rotate(90deg); }
.sch_shifts_off_head:hover { color: #0f7777; }
.sch_shifts_off[hidden], .sch_shifts_off_head[hidden] { display: none; }
.sch_shifts_off .sch_shift_row .sch_template_name { color: #8a9a9f; }
@media (max-width: 600px)
{
  .sch_shift_row { gap: 6px; padding: 6px 0; }
  .sch_shift_row .sch_template_name { font-size: .88em; }
  .sch_dows { gap: 2px; }
  .sch_dow { width: 28px; height: 28px; font-size: .72em; }
}

/* ---- the calendar view: every shift stacked in its day ---- */
.sch_cal { border: 1px solid #e8eaed; border-radius: 10px; overflow: hidden; }
.sch_cal_head, .sch_cal_grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sch_cal_dow { font-size: .72em; font-weight: 700; color: #6b7a7e; text-align: center; padding: 6px 2px; background: #f6f8f8; border-bottom: 1px solid #e8eaed; }
.sch_cal_day { min-height: 90px; border-right: 1px solid #f0f2f3; border-bottom: 1px solid #f0f2f3; padding: 4px 3px 6px; background: white; }
.sch_cal_day:nth-child(7n) { border-right: 0; }
.sch_cal_out { background: #fafbfb; }
.sch_cal_date { display: flex; justify-content: space-between; align-items: baseline; font-size: .78em; font-weight: 700; color: #16211f; padding: 0 2px 3px; }
.sch_cal_out .sch_cal_date { color: #c3cbce; }
.sch_cal_n { font-weight: 600; color: #8a9a9f; font-size: .9em; }
.sch_cal_items { display: flex; flex-direction: column; gap: 2px; }
.sch_cal_shift { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: .68em; line-height: 1.25; padding: 2px 4px; border-radius: 4px; border-left: 3px solid #c3cbce; background: #f3f5f6; color: #16211f; white-space: nowrap; overflow: hidden; }
.sch_cal_name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sch_cal_count { flex: none; color: #6b7a7e; font-weight: 600; }
.sch_cal_draft { border-left-color: #e0a72c; background: #fff8e8; }
.sch_cal_live { border-left-color: #2e9e5b; background: #edf8f1; }
.sch_cal_open .sch_cal_count { color: #b25b00; }
.sch_cal_preview { border-left-style: dashed; border-left-color: #b6c2c5; background: #f7f9f9; color: #4a5a5e; }

@media (max-width: 700px)
{
  .sch_cal_shift { font-size: .6em; padding: 1px 3px; }
  .sch_cal_count { display: none; }
  .sch_cal_day { min-height: 60px; padding: 3px 2px 4px; }
}

/* ---- signing off ---- */
.sch_review_bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f6f8f8; border: 1px solid #e8eaed; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: .85em; }
.sch_review_all_label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; cursor: pointer; }
.sch_review_all { margin: 0; width: 16px; height: 16px; }
.sch_review_progress { color: #6b7a7e; }
.sch_review_progress b { color: #0f7777; }
.sch_review_next { margin-left: auto; font-weight: 600; }
.sch_review_clear { padding: 0; font-size: .95em; }
.sch_cal_shift .sch_review { flex: none; margin: 0; width: 12px; height: 12px; cursor: pointer; }
.sch_cal_shift .sch_cal_name { cursor: pointer; flex: 1; }
.sch_cal_shift .sch_cal_name:hover { text-decoration: underline; }
.sch_cal_shift.is_hl { box-shadow: 0 0 0 2px #0f7777 inset; background: #e6f3f2; }
.sch_cal_shift.is_hl.sch_cal_draft { background: #fdf1cf; }
.sch_cal_sum { font-size: .68em; color: #6b7a7e; font-weight: 600; border-top: 1px dashed #e3e7e9; margin-top: 4px; padding-top: 3px; text-align: right; }
.sch_cal_out .sch_cal_sum { display: none; }

/* ---- the new-period drawer (the + beside Today on the calendar) ---- */
.emp_cal_new { margin-left: 6px; padding-left: 10px; padding-right: 10px; font-size: 1.05em; line-height: 1; }
.emp_cal.is_recurring .emp_cal_new { order: 1; margin: 0 6px 0 0; font-size: 18px; padding: 3px 10px 4px; }
.sch_new_step { background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.sch_new_q { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95em; color: #16211f; margin-bottom: 12px; }
.sch_new_n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #0f7777; color: white; font-size: .75em; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sch_new_groups { display: flex; flex-direction: column; gap: 8px; }
.sch_new_group { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid #dfe4e6; border-radius: 10px; background: #f7fafa; padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .12s, background .12s; }
.sch_new_group:hover { border-color: #0f7777; }
.sch_new_group.is_on { border-color: #0f7777; background: #e6f3f2; box-shadow: inset 0 -2px 0 #0f7777; }
.sch_new_group_text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sch_new_group_name { font-weight: 700; font-size: .95em; color: #16211f; }
.sch_new_group_sub { font-size: .74em; color: #6b7a7e; }
.sch_new_group.is_on .sch_new_group_sub { color: #0f7777; }
.sch_new_group_check { flex: none; font-size: 1.2em; color: #0f7777; visibility: hidden; }
.sch_new_group.is_on .sch_new_group_check { visibility: visible; }
.sch_new_dots { display: flex; gap: 5px; flex: none; margin-left: 10px; }
.sch_new_dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.sch_new_dot.is_on { background: white; }
.sch_new_swiper { overflow: hidden; }
.sch_new_swiper .swiper-wrapper { align-items: flex-start; }
.sch_new_slide { box-sizing: border-box; height: auto; }
.sch_new_slide[hidden] { display: none; }
.sch_new_mode { display: flex; border: 1px solid #dfe4e6; border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.sch_new_mode_btn { flex: 1 1 50%; border: 0; background: white; color: #6b7a7e; font-size: .9em; font-weight: 700; padding: 10px 8px; cursor: pointer; }
.sch_new_mode_btn + .sch_new_mode_btn { border-left: 1px solid #dfe4e6; }
.sch_new_mode_btn.is_on { background: #0f7777; color: white; }
.sch_new_month { display: flex; align-items: center; justify-content: space-between; border: 1px solid #dfe4e6; border-radius: 4px; background: #f7fafa; padding: 10px 6px; }
.sch_new_month[hidden], .sch_new_custom[hidden] { display: none; }
.sch_new_month_label { font-weight: 800; font-size: 1.3em; color: #16211f; letter-spacing: -.01em; }
.sch_new_month_prev, .sch_new_month_next { border: 0; background: none; color: #0f7777; font-size: 34px; line-height: 1; padding: 0 16px 4px; cursor: pointer; }
.sch_new_shifts .sch_hint { margin-top: 0; }
.sch_new_custom { display: flex; gap: 10px; }
.sch_new_custom > div { flex: 1; min-width: 0; }
.sch_new_body .sch_hint { margin-bottom: 0; }
.sch_new_summary { font-size: .85em; font-weight: 700; color: #0f7777; margin-top: 10px; }
.sch_new_foot { flex: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid #e8eaed; }
.sch_new_next { background: #0f7777; border-color: #0f7777; color: white; font-weight: 700; border-radius: 4px; padding: 10px 18px; font-size: 1em; }
.sch_new_next:hover, .sch_new_next:focus { background: #0c6262; color: white; }
.sch_new_next[disabled] { opacity: .45; }