/* HTMX-driven inline editing styles for plan and transactions pages.
   Uses brand tokens from colors_and_type.css. */

.k-inline-edit-input {
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 4px 8px;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.k-inline-edit-input:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

/* HTMX swap-in animation: gentle fade. Honour brand 220ms easing. */
.htmx-added {
  opacity: 0;
}
.htmx-settling .htmx-added {
  opacity: 1;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cleared icon — subdued grey by default; filled green when on. */
.k-cleared-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-3);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease-out;
}
.k-cleared-icon[data-cleared="true"] {
  background: var(--funded);
  border-color: var(--funded);
  color: var(--accent-fg);
}

/* Kebab menu trigger (used on category rows for "Move to..." submenu). */
.k-kebab {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg-3);
}
.k-kebab:hover { background: var(--surface-2); color: var(--fg); }

/* <dialog> reset for the Move popover. */
dialog.k-dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 20px 50px rgba(30, 27, 75, 0.18);
  max-width: 420px;
  width: 90%;
}
[data-theme="dark"] dialog.k-dialog {
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border), 0 24px 60px rgba(0, 0, 0, 0.55);
}
/* Defensive: any dialog NOT currently a modal (closed, or somehow opened
   via .show() instead of .showModal()) must be hidden. Without this, a
   <dialog> sitting inside a `display: contents` parent or surviving an
   HTMX outerHTML swap can render its content inline with the [open]
   attribute set but no top-layer placement and no backdrop. */
dialog.k-dialog:not(:modal) {
  display: none;
}
dialog.k-dialog::backdrop {
  background: rgba(30, 27, 75, 0.32);
}
dialog.k-dialog .k-dialog__body { padding: 24px; }
dialog.k-dialog header {
  padding: 20px 24px 0;
  font-weight: 600;
  font-size: 16px;
}