/* V4.0.0-4067 — attendance + leave mobile clarity */
@media (max-width:760px){
  /* The bottom dock entries are true separate workflows. Only the requested attendance panel is visible. */
  #attendanceView[data-mobile-mode="punch"] #attendanceLeavePanel,
  #attendanceView[data-mobile-mode="punch"] #attendanceMissedPanel,
  #attendanceView[data-mobile-mode="punch"] #attendanceHistoryPanel,
  #attendanceView[data-mobile-mode="punch"] #attendanceManagerPanel,
  #attendanceView[data-mobile-mode="punch"] #attendanceLocationAdminPanel{display:none!important}
  #attendanceView[data-mobile-mode="leave"] #attendancePunchPanel,
  #attendanceView[data-mobile-mode="leave"] #attendanceMissedPanel,
  #attendanceView[data-mobile-mode="leave"] #attendanceHistoryPanel,
  #attendanceView[data-mobile-mode="leave"] #attendanceLocationAdminPanel{display:none!important}
  #attendanceView[data-mobile-mode="history"] #attendancePunchPanel,
  #attendanceView[data-mobile-mode="history"] #attendanceLeavePanel,
  #attendanceView[data-mobile-mode="history"] #attendanceMissedPanel,
  #attendanceView[data-mobile-mode="history"] #attendanceManagerPanel,
  #attendanceView[data-mobile-mode="history"] #attendanceLocationAdminPanel{display:none!important}
  #attendanceView .attendance-grid{display:block!important;margin:0!important}

  /* Leave: compact, app-like sections instead of a desktop form squeezed onto a phone. */
  #attendanceLeavePanel{padding:14px!important;border-radius:18px!important}
  #attendanceLeavePanel .panel-head{margin-bottom:10px!important}
  #attendanceLeavePanel .panel-head h3{font-size:20px!important}
  #attendanceLeavePanel .panel-head p{font-size:12px!important;margin-top:3px!important}
  #leaveBalanceSummary{display:flex!important;gap:6px!important;overflow-x:auto!important;padding:2px 0 10px!important;scrollbar-width:none}
  #leaveBalanceSummary>*{flex:0 0 auto!important}
  #leaveRequestForm{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
  #leaveRequestForm label{padding:9px!important;border:1px solid #e4ebe7!important;border-radius:13px!important;background:#fbfcfb!important;gap:5px!important;font-size:12px!important;font-weight:700!important}
  #leaveRequestForm label:first-child,#leaveRequestForm .span-2,#leaveCustomTime,#leaveRequestForm button[type="submit"]{grid-column:1/-1!important}
  #leaveRequestForm input,#leaveRequestForm select,#leaveRequestForm textarea{width:100%!important;min-height:42px!important;border:0!important;background:transparent!important;padding:4px 0!important;font-size:16px!important;box-shadow:none!important}
  #leaveRequestForm textarea{min-height:62px!important;resize:none!important}
  #leaveRequestForm button[type="submit"]{min-height:50px!important;border-radius:14px!important;font-size:16px!important;font-weight:800!important;margin-top:2px!important}
  #leaveCustomTime{grid-template-columns:1fr 1fr!important;gap:9px!important}
  #attendanceLeavePanel>.muted-text{font-size:10px!important;line-height:1.5!important;margin-top:10px!important}
  #attendanceManagerPanel{margin-top:12px!important}

  /* History: date-grouped timeline. No sideways scroll and no repeated date on every line. */
  #attendanceHistoryPanel{padding:12px!important;border-radius:18px!important}
  #attendanceHistoryPanel .panel-head p{font-size:12px!important}
  #attendanceMyHistory .attendance-timeline-list{gap:12px!important}
  .attendance-day-group{border:1px solid #e2e9e5;border-radius:15px;background:#fff;overflow:hidden}
  .attendance-day-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f4f8f6;border-bottom:1px solid #e8eeeb}
  .attendance-day-head strong{font-size:15px;color:#1e4e3e}.attendance-day-head span{font-size:11px;color:#718079;font-weight:700}
  .attendance-day-events{display:grid!important}
  #attendanceMyHistory .attendance-row{border:0!important;border-radius:0!important;border-bottom:1px solid #eef2f0!important;padding:10px 12px!important;background:#fff!important;grid-template-columns:minmax(0,1fr) auto!important;gap:3px 8px!important}
  #attendanceMyHistory .attendance-row:last-child{border-bottom:0!important}
  #attendanceMyHistory .attendance-row strong{font-size:13px!important;color:#233d34}
  #attendanceMyHistory .attendance-row span:not(.badge),#attendanceMyHistory .attendance-row small{font-size:11px!important;color:#6f7d77!important}
  #attendanceMyHistory .attendance-row .badge{align-self:start!important;justify-self:end!important;font-size:10px!important}
}