/* Final overrides for the Keyboard step editor. Loaded after app.css. */
.keyboard-action-row {
  display: grid !important;
  grid-template-columns: minmax(118px, 148px) minmax(0, 1fr) auto auto 24px !important;
  grid-template-areas:
    "action . interval human remove"
    "fields fields fields fields fields" !important;
  column-gap: 8px !important;
  row-gap: 10px !important;
  align-items: start !important;
  padding: 10px 12px !important;
}

.keyboard-action-row__action {
  grid-area: action !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 4px 34px 4px 10px !important;
  background-color: var(--bg-elevated) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
    linear-gradient(135deg, var(--text-soft) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

.keyboard-action-row__action option {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
}

.keyboard-action-row__interval {
  grid-area: interval !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.8rem !important;
  color: var(--text-soft) !important;
  white-space: nowrap !important;
  align-self: center !important;
}

.keyboard-action-row__interval input[data-sequence-interval] {
  width: 55px !important;
  text-align: center !important;
  background: var(--color-input, #1a1a2e) !important;
  border: 1px solid var(--color-border, #333) !important;
  border-radius: 4px !important;
  color: inherit !important;
  padding: 1px 4px !important;
  font-size: 0.8rem !important;
}

.keyboard-action-row__human-typing {
  grid-area: human !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.75rem !important;
  color: var(--text-soft) !important;
  white-space: nowrap !important;
  align-self: center !important;
  cursor: pointer !important;
}

.keyboard-action-row__human-typing input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--color-primary, #3b82f6) !important;
}

.keyboard-action-row__human-typing[hidden] {
  display: none !important;
}

.keyboard-action-row__remove {
  grid-area: remove !important;
  position: static !important;
  justify-self: end !important;
  align-self: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ef4444 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
  margin-left: -2px !important;
}

.keyboard-action-row__remove:hover {
  background: transparent !important;
  color: #dc2626 !important;
  opacity: 1 !important;
}

.keyboard-action-row__fields {
  grid-area: fields !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  justify-self: stretch !important;
  justify-items: stretch !important;
}

.keyboard-sequence-row__field[hidden],
.keyboard-action-row__value[hidden],
.keyboard-action-row__recorder[hidden],
.keyboard-action-row [data-sequence-secret-wrapper][hidden] {
  display: none !important;
}

.keyboard-action-row__value,
.keyboard-action-row__recorder,
.keyboard-action-row [data-sequence-secret-wrapper] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-area: fields !important;
  justify-self: stretch !important;
}

.keyboard-action-row[data-keyboard-action="write"],
.keyboard-action-row[data-keyboard-action="secret"] {
  grid-template-columns: minmax(118px, 148px) minmax(0, 1fr) auto auto 24px !important;
  grid-template-areas:
    "action . interval human remove"
    "fields fields fields fields fields" !important;
}

.keyboard-action-row[data-keyboard-action="write"] .keyboard-action-row__value,
.keyboard-action-row[data-keyboard-action="secret"] [data-sequence-secret-wrapper]:not([hidden]) {
  display: block !important;
  grid-area: fields !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
}

.keyboard-action-row [data-sequence-text],
.keyboard-action-row [data-sequence-secret-wrapper] input {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.keyboard-action-row [data-sequence-secret-wrapper]:not([hidden]) {
  display: flex !important;
  align-items: stretch !important;
}

.keyboard-action-row [data-sequence-secret-wrapper] input {
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  line-height: 1.35 !important;
}

.keyboard-action-row [data-sequence-text] {
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  line-height: 1.35 !important;
}

.keyboard-action-row__recorder .key-recorder {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "display"
    "controls" !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.keyboard-action-row__recorder .key-recorder__display {
  grid-area: display !important;
  min-height: 36px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: rgba(15, 23, 42, 0.12) !important;
}

.keyboard-action-row__recorder .key-recorder__controls {
  grid-area: controls !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px !important;
  grid-template-areas: "capture clear" !important;
  gap: 8px !important;
  width: 100% !important;
}

.keyboard-action-row__recorder .key-recorder__capture-btn {
  grid-area: capture !important;
}

.keyboard-action-row__recorder [data-clear-keys] {
  grid-area: clear !important;
}

.keyboard-action-row__recorder .key-recorder__capture-btn,
.keyboard-action-row__recorder [data-clear-keys] {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.keyboard-editor__actions {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

[data-keyboard-sequence-rows] .keyboard-action-row {
  margin-bottom: 8px !important;
}

[data-keyboard-sequence-rows] .keyboard-action-row:last-child {
  margin-bottom: 0 !important;
}

.modal__close-button,
.modal__header > .ghost-button[data-close-settings-modal],
.modal__header > .ghost-button[data-close-ai-script-modal],
#browser-close {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #ef4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
}

.modal__close-button:hover,
.modal__header > .ghost-button[data-close-settings-modal]:hover,
.modal__header > .ghost-button[data-close-ai-script-modal]:hover,
#browser-close:hover {
  color: #dc2626 !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .keyboard-action-row {
    grid-template-columns: minmax(0, 1fr) auto auto 26px !important;
    grid-template-areas:
      "action interval human remove"
      "fields fields fields fields" !important;
  }

  .keyboard-action-row[data-keyboard-action="write"],
  .keyboard-action-row[data-keyboard-action="secret"] {
    grid-template-areas:
      "action interval human remove"
      "fields fields fields fields" !important;
  }
}