/* Dankon Watch v65: paired editor rows and unified trailing controls. */

.editor {
  --editor-control-height: 45px;
  --editor-trailing-size: 44px;
}

.editor form > .title-field,
.editor form > .format-field,
.editor form > .status-field,
.editor form > .type-field,
.editor form > .timer-manual-field,
.editor form > .estimated-time-field {
  grid-column: span 3;
}

.editor form > .progress-field {
  grid-column: 1 / -1;
}

.editor-select .custom-select-trigger,
.field input,
.date-picker-trigger,
.time-picker-control > input,
.timer-manual-inputs label {
  min-height: var(--editor-control-height);
}

.field-trailing-actions,
.field-trailing-toggle,
.time-picker-toggle,
.number-stepper-controls {
  width: var(--editor-trailing-size);
}

.field-trailing-button,
.customer-editor-add,
.customer-editor-remove,
.date-picker-calendar-button {
  width: var(--editor-trailing-size);
  min-width: var(--editor-trailing-size);
  flex-basis: var(--editor-trailing-size);
}

.customer-editor-row:not(:has(.customer-editor-remove)) > input,
.customer-editor-row:not(:has(.customer-editor-add)) > input,
.estimated-time-control > input,
.time-picker-control input:placeholder-shown,
.number-stepper input {
  padding-right: calc(var(--editor-trailing-size) + 12px);
}

.customer-editor-row:has(.customer-editor-remove):has(.customer-editor-add) > input {
  padding-right: calc(var(--editor-trailing-size) * 2 + 6px);
}

.field-trailing-actions,
.field-trailing-toggle,
.number-stepper-controls,
.time-picker-toggle {
  top: 1px;
  right: 1px;
  bottom: 1px;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 8px 8px 0;
  background: #1b1d24;
}

.date-picker-calendar-button,
.field-trailing-button,
.field-trailing-toggle,
.number-stepper-controls,
.time-picker-toggle {
  border-left: 1px solid var(--line);
}

.field-trailing-toggle {
  display: grid;
  place-items: center;
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  color: #858994;
  font: inherit;
}

.field-trailing-toggle.selected {
  color: #fff;
  background: rgba(232, 59, 63, 0.22);
}

.field-trailing-toggle.selected svg {
  filter: drop-shadow(0 0 5px rgba(232, 59, 63, 0.42));
}

.field-trailing-toggle:focus-visible,
.field-trailing-toggle:hover {
  color: #fff;
  background: rgba(232, 59, 63, 0.16);
  outline: 0;
}

.number-stepper-controls button {
  width: 100%;
}

.time-picker-clear {
  right: calc(var(--editor-trailing-size) + 3px);
}

html[data-theme="light"] .field-trailing-toggle.selected {
  color: #b4252a;
  background: rgba(232, 59, 63, 0.14);
}

@media (max-width: 760px) {
  .editor form > .title-field,
  .editor form > .format-field,
  .editor form > .status-field,
  .editor form > .type-field,
  .editor form > .timer-manual-field,
  .editor form > .estimated-time-field,
  .editor form > .progress-field {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  .number-stepper-controls {
    display: grid;
  }

  .number-stepper input {
    padding-right: calc(var(--editor-trailing-size) + 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-trailing-toggle {
    transition: none;
  }
}