/* pandabu V2.0.4 RC16.204 – Task schedule: exact row alignment + compact gaps
   Scope intentionally limited to the task create/edit schedule row. */

/* Keep the three labels and controls on one exact baseline. */
#task-form .task-schedule-grid{
  display:grid;
  grid-template-columns:210px 145px 260px;
  gap:16px;
  justify-content:start;
  align-items:start;
}
#task-form .task-schedule-grid .field{
  min-width:0;
  margin:12px 0 0 !important;
  display:grid !important;
  grid-template-rows:18px 52px;
  row-gap:7px;
  align-content:start;
}
#task-form .task-schedule-grid .field label{
  display:flex;
  align-items:flex-end;
  min-height:18px;
  height:18px;
  line-height:18px;
  margin:0 0 0 2px !important;
  padding:0 !important;
}
#task-form .task-schedule-grid .field input[type="date"],
#task-form .task-schedule-grid .field input[type="time"],
#task-form .task-schedule-grid .field select,
#task-form .task-time-control{
  width:100% !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* Reminder does not need a wide empty native-select area. */
#task-form .task-schedule-grid select[name="reminder_rule"]{
  padding-left:12px !important;
  padding-right:28px !important;
}

/* Mobile: deliberately do NOT fill the whole row. The free width becomes real
   visual breathing room instead of empty space inside the reminder select. */
@media(max-width:720px){
  #task-form .task-schedule-grid{
    grid-template-columns:28% 18% 36%;
    column-gap:16px;
    row-gap:0;
    justify-content:start;
  }
  #task-form .task-schedule-grid .field{
    grid-template-rows:17px 50px;
    row-gap:7px;
  }
  #task-form .task-schedule-grid .field label{
    min-height:17px;
    height:17px;
    line-height:17px;
    margin-left:2px !important;
  }
  #task-form .task-schedule-grid .field input[type="date"],
  #task-form .task-schedule-grid .field input[type="time"],
  #task-form .task-schedule-grid .field select,
  #task-form .task-time-control{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }
  #task-form .task-schedule-grid .field input[type="date"]{
    padding-left:5px !important;
    padding-right:5px !important;
  }
  #task-form .task-schedule-grid .field input[type="time"]{
    padding-left:4px !important;
    padding-right:4px !important;
  }
  #task-form .task-schedule-grid select[name="reminder_rule"]{
    padding-left:9px !important;
    padding-right:24px !important;
  }
}

@media(max-width:390px){
  #task-form .task-schedule-grid{
    grid-template-columns:29% 18% 38%;
    column-gap:9px;
  }
  #task-form .task-schedule-grid .field input[type="date"],
  #task-form .task-schedule-grid .field input[type="time"]{
    font-size:12.5px !important;
  }
  #task-form .task-schedule-grid select[name="reminder_rule"]{
    font-size:12.5px !important;
    padding-left:7px !important;
    padding-right:20px !important;
  }
}

/* RC16.205 – final mobile alignment: left edge / centred time / right edge. */
@media(max-width:720px){
  #task-form .task-schedule-grid{
    width:100%;
    grid-template-columns:30% 20% 38%;
    column-gap:0;
    justify-content:space-between;
    align-items:start;
  }
  #task-form .task-schedule-grid .field{
    align-self:start;
  }
  #task-form .task-time-empty-icon{
    inset:auto !important;
    left:50% !important;
    top:50% !important;
    width:auto !important;
    height:auto !important;
    display:block !important;
    transform:translate(-50%,-50%) !important;
    text-align:center !important;
    line-height:1 !important;
  }
}
@media(max-width:390px){
  #task-form .task-schedule-grid{
    grid-template-columns:30% 19% 39%;
    column-gap:0;
    justify-content:space-between;
  }
}

/* RC16.206 – optical + geometric clock centering.
   Use the full time-control box as the centering reference and draw the clock
   ourselves so emoji glyph bearings cannot make it appear shifted. */
#task-form .task-time-empty-icon{
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  font-size:0 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}
#task-form .task-time-empty-icon::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  box-sizing:border-box;
  border:2px solid currentColor;
  border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) center 4px / 2px 7px no-repeat,
    linear-gradient(currentColor,currentColor) calc(50% + 3px) 50% / 6px 2px no-repeat;
  opacity:.78;
}

/* RC16.207 – optical clock centering on iOS.
   The geometric field centre is correct, but the rendered clock appeared ~1 glyph-bearing step left.
   A tiny +4px CSS optical correction centres the visible clock circle in the time field. */
#task-form .task-time-empty-icon::before{
  position:absolute !important;
  left:calc(50% + 4px) !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
}