/* Phone attendance presentation only. The original five-column owner keeps
 * all button heights, gaps, hit targets, statuses, reasons and handlers.
 * Load in the new first important layer alongside the soft-blue theme. */
@layer peV2SoftBlue20261018n {
  @media (max-width:768px) {
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status] {
      display:grid!important;grid-template-columns:minmax(0,1fr)!important;
      justify-items:center!important;align-items:center!important;
      align-content:center!important;text-align:center!important;
      background-color:#fff!important;background-image:none!important;
      color:var(--v2-neutral-ink,#333)!important;box-shadow:none!important;
      --v2-attendance-icon:#7a858e;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status]:is(.active,[aria-pressed="true"]) {
      background-color:#fff!important;color:var(--v2-neutral-ink,#333)!important;
      border-color:#888!important;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status].pending {
      border-style:dashed!important;
    }
    /* A text-style icon wrapper normally reserves a five-pixel right margin.
     * Here the icon is ABOVE the label: both boxes need the same centerline. */
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status]>span[aria-hidden="true"] {
      display:flex!important;align-items:center!important;justify-content:center!important;
      justify-self:center!important;align-self:center!important;
      margin:0!important;padding:0!important;line-height:1!important;
      color:var(--v2-attendance-icon)!important;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status] :is([data-v2-line-icon],.peV2LineIcon) {
      margin:0!important;justify-content:center!important;align-items:center!important;
      color:var(--v2-attendance-icon)!important;filter:none!important;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status="present"] {
      --v2-attendance-icon:#658f80;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status="absent"] {
      --v2-attendance-icon:#b38080;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status="late"] {
      --v2-attendance-icon:#ad986b;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status="early_leave"] {
      --v2-attendance-icon:#7d91b0;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status="excluded"] {
      --v2-attendance-icon:#9086a8;
    }
    html.peV2PhoneRenderGuard .classroomFlow .classroomStatusButtons>button[data-student-status]:is(:disabled,[aria-disabled="true"]) {
      --v2-attendance-icon:#929292;
      background-color:#fff!important;color:var(--v2-neutral-muted,#828282)!important;
      border-color:#dedede!important;
    }
  }
}