/* Class-lesson modal date geometry only. Keep the real native date input,
   existing text sizes, calendar picker, values and save handlers. The same
   scoped rules are delivered to production and the packaged app. */
@layer peClassPlan12289 {
  html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding-block: 0 !important;
    padding-inline: 25px !important;
    line-height: normal !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"]::-webkit-date-and-time-value {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 42px !important;
    text-align: center !important;
  }
  html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"]::-webkit-datetime-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    margin: 0;
    padding: 0;
    line-height: normal;
  }
  html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"]::-webkit-datetime-edit-fields-wrapper {
    margin: 0;
    padding: 0;
  }

  /* WebKit's native menulist can ignore the existing 44px min-height. Only
     the select immediately next to this date field is normalized with it. */
  @supports (-webkit-appearance: none) {
    html.pe-class-plan-enabled #peClassPlanDialog12289[data-plan-kind="class"] .pePlanTwoCols > .pePlanField:has(> input[type="date"][data-plan-draft="lessonDate"]) + .pePlanField > select[data-plan-draft="period"] {
      -webkit-appearance: none !important;
      appearance: none !important;
      box-sizing: border-box !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding-block: 0 !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23556b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 10px center !important;
      background-size: 9px 6px !important;
    }
  }
}

@layer peLocalTypography {
  html.pe-local-app #peLocalPlanDialog[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding-block: 0 !important;
    padding-inline: 25px !important;
    line-height: normal !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  html.pe-local-app #peLocalPlanDialog[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"]::-webkit-date-and-time-value {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 42px !important;
    text-align: center !important;
  }
  html.pe-local-app #peLocalPlanDialog[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"]::-webkit-datetime-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    margin: 0;
    padding: 0;
    line-height: normal;
  }
  html.pe-local-app #peLocalPlanDialog[data-plan-kind="class"] input[type="date"][data-plan-draft="lessonDate"]::-webkit-datetime-edit-fields-wrapper {
    margin: 0;
    padding: 0;
  }

  /* WebKit's native menulist can ignore the existing 44px min-height. Only
     the select immediately next to this date field is normalized with it. */
  @supports (-webkit-appearance: none) {
    html.pe-local-app #peLocalPlanDialog[data-plan-kind="class"] .pePlanTwoCols > .pePlanField:has(> input[type="date"][data-plan-draft="lessonDate"]) + .pePlanField > select[data-plan-draft="period"] {
      -webkit-appearance: none !important;
      appearance: none !important;
      box-sizing: border-box !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding-block: 0 !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23556b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 10px center !important;
      background-size: 9px 6px !important;
    }
  }
}