/* Duration Field Component Styles */
.duration-field-wrapper {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
}

.duration-field-wrapper.duration-field-wrapper--full {
  display: flex;
  width: 100%;
}

.duration-field-wrapper > input {
  min-width: 0;
}

.duration-field-wrapper .duration-field,
.duration-field-wrapper .number-field-spinner-target {
  padding-right: 1.75rem; /* Make room for buttons */
}

.duration-field-buttons {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  display: flex;
  flex-direction: column;
  width: 1.5rem;
  border-left: 1px solid var(--c-border, #d1d5db);
  border-radius: 0 0.375rem 0.375rem 0;
  overflow: hidden;
}

.duration-field-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0;
  margin: 0;
  border: none;
  background: var(--c-surface-hover, #f9fafb);
  color: var(--c-text-muted, #6b7280);
  cursor: pointer;
  line-height: 1;
  transition:
    background-color 0.1s,
    color 0.1s;
}

.duration-field-btn:hover {
  background: var(--c-surface-alt, #e5e7eb);
  color: var(--c-text-body, #374151);
}

.duration-field-btn:active {
  background: var(--c-border, #d1d5db);
}

.duration-field-btn-up {
  border-bottom: 1px solid var(--c-border-light, #e5e7eb);
}

.duration-field-btn svg {
  width: 10px;
  height: 6px;
  pointer-events: none;
}

/* Hide native browser number spinner controls (replaced by custom arrows) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Explicit dark mode compatibility */
[data-theme="workover-dark"] .duration-field-buttons {
  border-left-color: var(--c-border, #334155);
}

[data-theme="workover-dark"] .duration-field-btn {
  background: var(--c-surface-alt, #1e293b);
  color: var(--c-text-muted, #94a3b8);
}

[data-theme="workover-dark"] .duration-field-btn:hover {
  background: var(--c-surface-hover, #334155);
  color: var(--c-text-body, #cbd5e1);
}

[data-theme="workover-dark"] .duration-field-btn:active {
  background: var(--c-border, #475569);
}

[data-theme="workover-dark"] .duration-field-btn-up {
  border-bottom-color: var(--c-border-light, #334155);
}