/* Styles for Transaction Metadata Editing Feature */

/* Header Edit Button */
.transaction-edit-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--brokerly-text-secondary);
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: auto;
}

.transaction-edit-trigger:hover {
  background: var(--brokerly-primary-light);
  color: var(--brokerly-primary);
  transform: scale(1.05);
}

.transaction-edit-trigger svg {
  width: 16px;
  height: 16px;
}

/* Edit Mode Badge */
.edited-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(26, 127, 230, 0.12);
  color: var(--brokerly-primary);
  border: 1px solid rgba(26, 127, 230, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold, 600);
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1;
}

/* Inline Edit Controls */
.edit-field-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.edit-field-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.edit-input,
.edit-select {
  flex: 1;
  background: var(--brokerly-input-background);
  color: var(--brokerly-text-primary);
  border: 1px solid var(--brokerly-border);
  border-radius: var(--border-radius-sm, 6px);
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.edit-input:focus,
.edit-select:focus {
  border-color: var(--brokerly-primary);
  box-shadow: 0 0 0 2px var(--brokerly-primary-light);
}

/* Category select custom styling */
.edit-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23666666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 30px;
}

:root[data-theme="dark"] .edit-select,
.dark-mode .edit-select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23cccccc' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}

/* Original Value display */
.original-value-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--brokerly-text-tertiary);
  font-style: italic;
  margin-top: 4px;
}

/* Revert Button */
.field-revert-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--brokerly-text-secondary);
  padding: 4px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.field-revert-btn:hover {
  background: var(--brokerly-tertiary-background);
  color: var(--brokerly-warm-red);
  transform: scale(1.1);
}

.field-revert-btn svg {
  width: 14px;
  height: 14px;
}

/* Save / Cancel Drawer/Sheet Actions Footer */
.transaction-edit-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--brokerly-border-subtle);
}

.transaction-edit-actions button {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--border-radius-md, 8px);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-save-edit {
  background: var(--brokerly-warm-green);
  color: #FFFFFF;
  border: none;
}

.btn-save-edit:hover {
  background: #158f46;
  box-shadow: 0 4px 12px rgba(26, 179, 89, 0.25);
}

.btn-cancel-edit {
  background: transparent;
  color: var(--brokerly-text-primary);
  border: 1px solid var(--brokerly-border);
}

.btn-cancel-edit:hover {
  background: var(--brokerly-tertiary-background);
}

/* ============================================================
   TRANSACTIONS LEDGER SPREADSHEET CARD / MODAL OVERLAYS
   ============================================================ */

.ledger-toolbar {
  box-sizing: border-box;
}

.ledger-table-container {
  box-sizing: border-box;
}

.ledger-spreadsheet-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.ledger-spreadsheet-table tbody tr.row-selected {
  background: rgba(6, 182, 212, 0.06) !important;
}

.ledger-spreadsheet-table tbody tr.row-selected:hover {
  background: rgba(6, 182, 212, 0.09) !important;
}

/* Spreadsheet Cell Inputs */
.spreadsheet-input,
.spreadsheet-input-amount,
.spreadsheet-select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--brokerly-text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  transition: all 0.15s;
  box-sizing: border-box;
}

.spreadsheet-input:hover,
.spreadsheet-input-amount:hover,
.spreadsheet-select:hover {
  background: var(--brokerly-primary-lighter, rgba(26, 127, 230, 0.04)) !important;
  border-color: var(--brokerly-border, rgba(0, 0, 0, 0.15)) !important;
}

.spreadsheet-input:focus,
.spreadsheet-input-amount:focus,
.spreadsheet-select:focus {
  background: var(--brokerly-input-background, #ffffff) !important;
  border-color: var(--brokerly-primary) !important;
  color: var(--brokerly-text-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--brokerly-primary-light) !important;
}

.spreadsheet-select {
  cursor: pointer;
}

.ledger-amount-positive {
  color: var(--brokerly-warm-green, #10b981);
  font-weight: 600;
}

.ledger-amount-negative {
  color: var(--brokerly-text-primary);
  font-weight: 600;
}