/* v2.0 Mobile Task Form System - Clean Outlined Cards */
html[data-surface="staff"] .admin-time-fields { display:none; }
html[data-surface="admin"] #task-time-range { display:none; }
.admin-time-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.schedule-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

html[data-surface="staff"] .schedule-page { background:#f4f6f4; }
html[data-surface="staff"] .schedule-page .dialog-head { background:#17382e; color:white; padding:8px 16px; border:0; }
.schedule-page .dialog-head h2 { text-align:center; font-size:17px; font-weight:600; color:#fff; }
html[data-surface="staff"] .schedule-page .dialog-head button { background:transparent; color:white; width:40px; height:40px; border-radius:50%; padding:8px; }

.schedule-page .page-fields { padding:14px 16px 20px; display:flex; flex-direction:column; gap:14px; }

/* Group Container */
.schedule-page .schedule-group { padding:14px; margin:0; border:0; border-radius:18px; background:#fff; box-shadow:0 1px 4px rgba(15,56,46,0.04); display:flex; flex-direction:column; gap:10px; }
.schedule-group-title { font-size:13px; font-weight:700; color:#285d45; margin:2px 0 2px 2px; letter-spacing:0.2px; }

/* Unified Outlined Field Cards */
.schedule-field-card { position:relative; border:1px solid #dfe6df; border-radius:14px; background:#fff; padding:0 14px; transition:border-color .15s, box-shadow .15s, background-color .15s; }
.schedule-field-card:focus-within { border-color:#285d45; box-shadow:0 0 0 2px rgba(40,93,69,0.12); }

/* Standard Single-Row Field */
.schedule-field-card-row { min-height:52px; display:flex; align-items:center; gap:10px; }

/* Left Field Label: Inline-flex with icon and text in one unbroken row */
.schedule-field-label { display:inline-flex; align-items:center; gap:8px; width:auto; min-width:92px; flex-shrink:0; white-space:nowrap !important; }
.schedule-field-icon { display:inline-grid; place-items:center; width:18px; height:18px; color:#285d45; flex-shrink:0; }
.schedule-field-icon .ui-icon { width:18px; height:18px; color:#285d45; }
.schedule-field-label-text { font-size:14px; font-weight:600; color:#17382e; white-space:nowrap !important; }
.schedule-field-optional { font-size:12px; color:#8a9c8f; font-weight:400; white-space:nowrap !important; margin-left:2px; }

/* Right Field Control Area */
.schedule-field-control { flex:1; min-width:0; display:flex; align-items:center; position:relative; }

/* Flat Inputs (Overriding any global input styles) */
.schedule-page .schedule-input-flat {
  width:100% !important;
  min-height:48px !important;
  height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  font-size:15px !important;
  color:#17382e !important;
  box-shadow:none !important;
  outline:none !important;
}
.schedule-page .schedule-input-flat::placeholder { color:#9aaa9b; }

/* Select & Date Controls */
.schedule-select-control, .schedule-date-control { position:relative; width:100%; }
.schedule-page .schedule-field-control select,
.schedule-page .schedule-field-control input[type="date"] {
  width:100% !important;
  min-height:48px !important;
  height:48px !important;
  margin:0 !important;
  padding:0 24px 0 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  font-size:15px !important;
  font-weight:500 !important;
  color:#17382e !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  cursor:pointer;
}

.schedule-control-arrow { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; display:grid; place-items:center; width:16px; height:16px; color:#8a9c8f; }
.schedule-control-arrow .ui-icon { width:16px; height:16px; }

/* Multiline Textarea Card */
.schedule-field-card-area { padding:10px 14px 12px; display:flex; flex-direction:column; gap:6px; min-height:100px; }
.schedule-field-header-row { display:flex; align-items:center; width:100%; }

.schedule-page .schedule-textarea-flat {
  width:100% !important;
  min-height:64px !important;
  height:auto !important;
  margin:0 !important;
  padding:4px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:#17382e !important;
  resize:none !important;
  box-shadow:none !important;
  outline:none !important;
}
.schedule-page .schedule-textarea-flat::placeholder { color:#9aaa9b; }

/* Time Range Button Card */
.schedule-page .schedule-time-btn {
  justify-content:space-between;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.schedule-time-value-wrap { display:flex; align-items:center; gap:8px; margin-left:auto; padding-right:22px; }
.schedule-page #task-time-value {
  font-size:15px;
  font-weight:600;
  color:#17382e;
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:center;
  gap:6px;
}
.schedule-page #task-time-value span { font-size:13px; font-weight:400; color:#8a9c8f; }

/* Toggle Cards */
.schedule-toggle-card { justify-content:space-between; }
:is(#task-repeat-enabled,#task-flow-enabled) {
  appearance:none;
  flex-shrink:0;
  width:44px;
  height:26px;
  min-height:26px;
  border:0;
  border-radius:999px;
  margin:0;
  background:#e2e8e3;
  cursor:pointer;
  position:relative;
  transition:background-color .2s;
}
:is(#task-repeat-enabled,#task-flow-enabled)::before { display:none; }
:is(#task-repeat-enabled,#task-flow-enabled)::after {
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  top:2px;
  left:2px;
  background:white;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(15,56,46,0.18);
  transition:transform .2s;
}
:is(#task-repeat-enabled,#task-flow-enabled):checked { background:#285d45; }
:is(#task-repeat-enabled,#task-flow-enabled):checked::after { transform:translateX(18px); }

#repeat-options[hidden],#repeat-fields[hidden],.weekday-checks[hidden],#task-flow-options[hidden] { display:none; }

.form-page .weekday-checks { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:10px 0; }
.form-page .weekday-checks label { position:relative; display:block; margin:0; text-align:center; }
.form-page .weekday-checks input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.weekday-checks span { display:grid; place-items:center; min-height:36px; border-radius:8px; background:#f0f4f1; font-size:13px; font-weight:500; color:#4a5f53; }
.weekday-checks input:checked + span { background:#285d45; color:white; font-weight:600; }

.schedule-hint { color:#718477; font-size:11px; line-height:1.6; margin:8px 0 2px; }
.schedule-page #repeat-fields { padding:0; margin:0; border:0; background:transparent; }
.schedule-page #repeat-options, .schedule-page #task-flow-options { display:flex; flex-direction:column; gap:10px; margin-top:8px; padding-top:8px; border-top:1px dashed #e4eae4; }

.schedule-scope-label, .schedule-until-label { font-size:13px; color:#5c7063; display:flex; flex-direction:column; gap:6px; margin-top:6px; }

.schedule-page .dialog-actions { background:#fff; border-top:1px solid #edf2ee; padding:12px 20px max(14px,env(safe-area-inset-bottom)); }
.schedule-page .dialog-actions .primary { min-height:46px; border-radius:12px; font-size:15px; font-weight:600; background:#285d45; color:#fff; border:0; box-shadow:0 2px 8px rgba(40,93,69,0.2); }