/* css/duration-editor.css
 * Owner's schedule editor in the duration panel (profile page).
 * Markup comes from js/booking/toggle-edit-lock/togglestarttime.js (.dur-editor).
 * Load AFTER panel-refresh.css. Uses the --ft-* tokens from panel-refresh.css
 * with fallbacks, so it still looks right if those aren't loaded.
 */

/* The row's <p> becomes a full-width block while editing (it is a flex row of
   chips normally), and the +/- button is hidden so a schedule can't be added
   or removed halfway through an edit. */
#product-profile .duration-header > p:has(.dur-editor),
.schedule-card.owner-schedule .duration-header > p:has(.dur-editor),
.duration-header > p:has(.dur-editor) {
  display: block;
  flex: 1 1 100%;
  font-size: 0.9rem;
  font-weight: 400;
}
#product-profile .duration-header:has(.dur-editor) > .add-icon,
.duration-header:has(.dur-editor) > .add-icon { display: none; }

.dur-editor {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  background: var(--ft-soft, #f7f9fc);
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 14px;
  color: var(--ft-ink, #1f2937);
  font-weight: 400;
}
.dur-editor.is-saving { opacity: 0.85; }

.dur-ed-section {
  padding: 14px 0;
  border-top: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
}
.dur-ed-section:first-child { padding-top: 0; border-top: 0; }

.dur-ed-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ft-muted, #6b7280);
}

.dur-ed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.dur-ed-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dur-ed-field > label,
.dur-ed-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ft-muted, #6b7280);
  /* undo the uppercase/tiny styling panel-refresh.css gives labels in this row */
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.dur-editor input[type="time"],
.dur-editor input[type="number"],
.dur-editor select {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ft-ink, #1f2937);
  background: #fff;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 10px;
  outline: none;
}
.dur-editor input:focus,
.dur-editor select:focus {
  border-color: var(--ft-coral, #ff5a5f);
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.14);
}
.dur-editor [aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.dur-editor input::placeholder { color: var(--ft-faint, #9ca3af); }

/* Fixed / Flexible switch */
.dur-ed-seg {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 9999px;
}
.dur-ed-seg label {
  position: relative;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ft-muted, #6b7280);
  border-radius: 9999px;
  cursor: pointer;
}
.dur-ed-seg input { position: absolute; opacity: 0; pointer-events: none; }
.dur-ed-seg label:has(input:checked) {
  background: var(--ft-coral-soft, #fff1f1);
  color: var(--ft-coral-dark, #e14e50);
}
.dur-ed-seg label:has(input:focus-visible) { outline: 2px solid var(--ft-coral, #ff5a5f); outline-offset: 1px; }

/* Show/hide what applies. !important on purpose: these are state switches,
   and older row styles (e.g. "display:flex" on every <p> in the row) must
   never be able to un-hide a field that doesn't apply. */
.dur-editor.is-flexible .dur-ed-fixed-only { display: none !important; }
.dur-editor:not(.is-flexible) .dur-ed-flex-only { display: none !important; }
.dur-editor:not(.is-deposit) .dur-ed-deposit-only { display: none !important; }

/* .dur-editor prefix needed: duration.css sets `.duration-container p { font-size: 16px }` */
.dur-editor .dur-ed-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--ft-muted, #6b7280);
}
.dur-editor .dur-ed-hint.is-warn { color: #92400e; }
.dur-editor .dur-ed-hint:empty { display: none; }

/* Payment method toggles */
.dur-ed-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dur-ed-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
  border-radius: 9999px;
  cursor: pointer;
}
.dur-ed-check:has(input:checked) {
  background: #eef3ff;
  border-color: rgba(47, 77, 138, 0.35);
  color: #2f4d8a;
}

/* Group discounts */
.dur-ed-tiers {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
  border-radius: 10px;
}
.dur-ed-tiers > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ft-ink, #1f2937);
}
.dur-ed-tiers[open] > summary { margin-bottom: 10px; }
.dur-ed-tier-head,
.dur-ed-tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 8px;
  align-items: center;
}
.dur-ed-tier-head { font-size: 0.75rem; color: var(--ft-muted, #6b7280); margin-bottom: 4px; }
.dur-ed-tier-row { margin-bottom: 6px; }
.dur-ed-x {
  width: 32px; height: 32px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--ft-muted, #6b7280);
  font-size: 1.1rem;
  cursor: pointer;
}
.dur-ed-x:hover { background: #fef2f2; color: #b91c1c; }
.dur-ed-link {
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ft-coral-dark, #e14e50);
  cursor: pointer;
}
.dur-ed-net {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ft-border-2, rgba(15, 23, 42, 0.12));
  font-size: 0.85rem;
}
.dur-ed-net label { font-size: 0.85rem; color: var(--ft-muted, #6b7280); }
.dur-editor .dur-ed-net input { width: 72px; height: 32px; }
.dur-editor .dur-ed-net .dur-ed-hint { margin: 0; }

/* Messages */
.dur-ed-messages:empty { display: none; }
.dur-ed-messages { display: grid; gap: 6px; padding-top: 4px; }
.dur-editor .dur-ed-error,
.dur-editor .dur-ed-warn {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.82rem;
  border-radius: 10px;
}
.dur-editor .dur-ed-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.dur-editor .dur-ed-warn  { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Actions */
.dur-ed-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ft-border, rgba(15, 23, 42, 0.08));
}
.dur-ed-actions button {
  min-width: 96px;
  padding: 9px 18px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 9999px;
  cursor: pointer;
}
.dur-ed-cancel {
  color: var(--ft-ink, #1f2937);
  background: #fff;
  border: 1px solid var(--ft-border-2, rgba(15, 23, 42, 0.12));
}
.dur-ed-cancel:hover { background: #f3f4f6; }
.dur-ed-save {
  color: #fff;
  background: var(--ft-coral, #ff5a5f);   /* full-strength coral: the old faded pink read as disabled */
  border: 1px solid transparent;
}
.dur-ed-save:hover { background: var(--ft-coral-dark, #e14e50); }
.dur-ed-actions button:disabled { cursor: progress; opacity: 0.7; }

@media (max-width: 520px) {
  .dur-editor { padding: 14px; }
  .dur-ed-grid { grid-template-columns: 1fr 1fr; }
  .dur-ed-actions button { flex: 1; }
}

/* panel-refresh.css styles every <strong> in this row as a tiny uppercase
   label ("SCHEDULE:"); the net-total figure inside the editor is a value. */
#product-profile .duration-container .dur-editor strong,
.dur-editor strong {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ft-ink, #1f2937);
}