/* Geofencing (pilot, company_settings.geofencing). Two surfaces from one sheet: the employer's
   Geofencing section — place cards, the map form, who is tracked, what has come in — and the
   person's own Location Sharing cards on /settings. markup from class.geofence.php, swaps and the
   map from geofence.js */

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

/* ---- headings ---- */
.gf_head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 2px 12px; }
.gf_settings_head { padding: 16px 2px 12px; }
.gf_head_title { font-size: 1.3em; font-weight: 800; }
.gf_head_sub { font-size: .85em; color: #6b7a7e; margin-top: 3px; max-width: 560px; }
.gf_add_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; }
.gf_add_button:hover, .gf_add_button:focus { background: #0c6363; color: white; }
.gf_section_title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95em; margin: 0 0 8px; }
.gf_label { display: block; font-size: .78em; font-weight: 700; color: #6b7a7e; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .02em; }
.gf_hint { font-size: .78em; color: #8a9a9f; margin-top: 6px; line-height: 1.4; }
.gf_none { font-size: .85em; color: #8a9a9f; padding: 14px 4px; }

/* ---- the place cards ---- */
.gf_list { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; }
.gf_card { flex: none; width: 230px; background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 12px; cursor: pointer; }
.gf_card:hover { border-color: #c3d1d4; }
.gf_card.is_selected { border-color: #0f7777; box-shadow: 0 0 0 1px #0f7777 inset; }
.gf_card_name { font-weight: 700; font-size: .95em; }
.gf_card_address { font-size: .78em; color: #8a9a9f; margin-top: 2px; min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf_card_meta { display: flex; gap: 12px; font-size: .76em; color: #6b7a7e; margin-top: 8px; }

/* ---- the panel ---- */
.gf_panel { background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 14px; }
.gf_form_split, .gf_panel_split { display: flex; gap: 18px; flex-wrap: wrap; }
.gf_map_side { flex: 1 1 340px; min-width: 260px; }
.gf_fields_side { flex: 1 1 280px; min-width: 240px; }
.gf_map { height: 260px; border-radius: 10px; border: 1px solid #e8eaed; background: #eef3f3; }
.gf_map_hint { font-size: .76em; color: #8a9a9f; margin-top: 6px; }
.gf_radius { width: 100%; }
.gf_radius_value { color: #0f7777; font-weight: 800; }
.gf_check { display: block; font-size: .82em; font-weight: 500; color: #16211f; margin: 14px 0 0; }
.gf_save { margin-top: 14px; background: #0f7777; border-color: #0f7777; font-weight: 600; }
.gf_save:hover, .gf_save:focus { background: #0c6363; border-color: #0c6363; }
.gf_panel_split { margin-top: 20px; border-top: 1px solid #eef1f2; padding-top: 16px; }
.gf_people_side, .gf_activity_side { flex: 1 1 300px; min-width: 260px; }
.gf_refresh_activity { margin-left: auto; border: 1px solid #c3d1d4; background: #f7fafa; color: #0f7777; border-radius: 14px; padding: 2px 10px; font-size: .8em; }

/* ---- who is tracked ---- */
.gf_people { max-height: 340px; overflow-y: auto; }
.gf_person { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f2f4f4; }
.gf_person_name { flex: 1; font-size: .9em; font-weight: 600; }
.gf_person_state { font-weight: 400; margin-top: 2px; }
.gf_state { font-size: .74em; }
.gf_state_on { color: #0f7777; font-weight: 600; }
.gf_state_wait { color: #b8860b; }
.gf_state_off { color: #a3b0b3; }

/* the switch: a checkbox drawn as a track */
.gf_switch { flex: none; margin: 0; cursor: pointer; }
.gf_switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.gf_switch_track { display: block; width: 42px; height: 24px; border-radius: 12px; background: #d7dedf; position: relative; transition: background .15s; }
.gf_switch_track:after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9px; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.gf_switch input:checked + .gf_switch_track { background: #0f7777; }
.gf_switch input:checked + .gf_switch_track:after { left: 21px; }
.gf_switch input:disabled + .gf_switch_track { opacity: .4; }

/* ---- what has come in ---- */
.gf_activity { max-height: 340px; overflow-y: auto; }
.gf_activity_row { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f2f4f4; }
.gf_activity_icon { flex: none; width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.gf_activity_icon.gf_in { background: #e3f1f2; color: #0f7777; }
.gf_activity_icon.gf_out { background: #f4f0e6; color: #9a7b1f; }
.gf_activity_body { flex: 1; min-width: 0; }
.gf_activity_top { font-size: .88em; font-weight: 600; }
.gf_activity_word { color: #6b7a7e; font-weight: 500; }
.gf_activity_when { font-size: .78em; color: #8a9a9f; margin-top: 1px; }
.gf_activity_shift { font-size: .78em; color: #0f7777; margin-top: 1px; }

/* ---- pills, empties ---- */
.gf_pill { display: inline-block; font-size: .68em; font-weight: 700; border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.gf_pill_off { background: #f1f3f3; color: #8a9a9f; }
.gf_pill_soft { background: #f4f0e6; color: #9a7b1f; }
.gf_empty { text-align: center; color: #8a9a9f; background: white; border: 1px dashed #d7dedf; border-radius: 12px; padding: 28px 20px; }
.gf_empty i { font-size: 28px; color: #c3d1d4; }
.gf_empty_title { font-weight: 700; color: #16211f; margin-top: 8px; }
.gf_empty_copy { font-size: .84em; margin-top: 4px; max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.45; }

/* ---- the person's own cards ---- */
.gf_consent_card { background: white; border: 1px solid #e8eaed; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.gf_consent_top { display: flex; align-items: flex-start; gap: 10px; }
.gf_consent_place { font-weight: 700; font-size: 1em; }
.gf_consent_company { font-size: .8em; color: #8a9a9f; margin-top: 2px; }
.gf_consent_state { font-size: .82em; margin-top: 10px; font-weight: 600; }
.gf_consent_what { margin-top: 12px; border-top: 1px solid #f2f4f4; padding-top: 10px; }
.gf_consent_what_title { font-size: .74em; font-weight: 700; color: #6b7a7e; text-transform: uppercase; letter-spacing: .02em; margin-top: 8px; }
.gf_consent_what ul { margin: 4px 0 0; padding-left: 18px; }
.gf_consent_what li { font-size: .82em; color: #46575b; line-height: 1.45; }

@media only screen and (max-width: 767px)
{
  .gf_head { flex-direction: column; }
  .gf_add_button { margin-left: 0; }
  .gf_map { height: 220px; }
  .gf_people, .gf_activity { max-height: none; }
}