/* =========================================================================
   Koyne — transactions.css
   The /app/transactions surface.
   4-column grid: Description / Category / Account / Amount.
   ========================================================================= */

:root {
  --tx-grid: 110px minmax(0, 1fr) 170px 160px minmax(0, 1fr) 110px 110px 44px;
}

/* ---- Filter bar -------------------------------------------------------- */
.k-tx-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.k-tx-filter-bar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-left: auto;
}

/* Search box */
.k-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 320px;
  flex: 1;
}
.k-search svg { color: var(--fg-3); flex-shrink: 0; }
.k-search input {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: var(--fs-body-sm);
  font-family: var(--font-sans);
  color: var(--fg);
}
.k-search input::placeholder { color: var(--fg-3); }

/* Filter pills (account / month) */
.k-tx-filter-pill {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  font-size: var(--fs-body-sm);
  cursor: pointer;
}
.k-tx-filter-pill svg { color: var(--fg-3); flex-shrink: 0; }
.k-tx-filter-pill__select,
.k-tx-filter-pill__input {
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
  max-width: 140px;
}

/* ---- Transaction list -------------------------------------------------- */
.k-tx-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

/* Header row */
.k-tx-list__head {
  display: grid;
  grid-template-columns: var(--tx-grid);
  align-items: center;
  padding: 10px var(--space-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.k-tx-list__head--right  { text-align: right; }
.k-tx-list__head--centre { text-align: center; }

/* Data rows */
.k-tx-row {
  display: grid;
  grid-template-columns: var(--tx-grid);
  align-items: center;
  border-top: 1px solid var(--divider);
  min-height: 56px;
  cursor: pointer;
}
.k-tx-row:first-of-type { border-top: 0; }
.k-tx-row:hover { background: var(--surface-2); }

/* Cells */
.k-tx-cell {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  min-width: 0;
}
.k-tx-cell--date    { color: var(--fg-3); font-size: 12px; }
.k-tx-cell--payee   { gap: var(--space-2); color: var(--fg); font-weight: var(--fw-semibold); }
.k-tx-cell--memo    { color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-tx-cell--amount  { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.k-tx-cell--inflow  { color: var(--funded); }
.k-tx-cell--cleared { justify-content: center; padding-left: 0; padding-right: var(--space-2); }

/* ---- Avatar ------------------------------------------------------------ */
.k-tx-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.k-tx-avatar--income {
  background: #DCFCE7;
  color: #16A34A;
}
[data-theme="dark"] .k-tx-avatar--income {
  background: rgba(22, 163, 74, 0.15);
  color: #4ADE80;
}
.k-tx-avatar--logo {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px;
}
.k-tx-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius-sm) - 2px);
}

/* ---- Payee name ------------------------------------------------------- */
.k-tx-payee {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- "Ready to Assign" income label in category cell ------------------ */
.k-tx-rta-label {
  font-size: 12px;
  color: var(--fg-3);
}

/* ---- Category chip and "Categorise…" pill ------------------------------ */
.k-tx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.k-tx-pill--uncategorised {
  background: transparent;
  border: 1.5px dashed var(--accent);
  cursor: pointer;
  color: var(--accent);
}
.k-tx-pill--uncategorised:hover {
  background: var(--accent-soft);
}

/* ---- Amount ------------------------------------------------------------ */
.k-tx-amount {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}
.k-tx-amount--income {
  color: var(--funded);
}


/* ---- Pagination -------------------------------------------------------- */
.k-tx-paginate {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--fg-3);
  font-size: var(--fs-body-sm);
}

/* ---- Inline editor (edit-in-place row replacement) -------------------- */
.k-tx-editor {
  padding: var(--space-4) var(--space-5);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--divider);
  background: var(--surface-2);
}

/* 7 labelled field columns + cleared toggle */
.k-tx-editor__fields {
  display: grid;
  grid-template-columns: 130px 1fr 170px 160px 1fr 110px 110px 44px;
  gap: var(--space-3);
  align-items: end;
}

.k-tx-editor__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.k-tx-editor__cell--cleared {
  align-items: center;
}

.k-tx-editor__label {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.k-tx-editor input,
.k-tx-editor select {
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px var(--space-2);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.k-tx-editor input:focus,
.k-tx-editor select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.k-tx-editor__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider);
}

/* ---- Add-transaction dialog form layout -------------------------------- */
.k-form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.k-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.k-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
}
.k-label__opt {
  font-weight: var(--fw-normal);
  color: var(--fg-3);
}
.k-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
  margin-top: var(--space-5);
}

/* =========================================================================
   Select mode
   ========================================================================= */

/* Checkbox cell — hidden by default, shown in select mode */
.k-tx-cell--check {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-2);
}
.k-tx-cell--check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Prepend 40px checkbox column to the 8-column grid in select mode */
body.k-tx-select-mode {
  --tx-grid: 40px 110px minmax(0, 1fr) 170px 160px minmax(0, 1fr) 110px 110px 44px;
}

/* Show checkbox cells and suppress the HTMX click cursor in select mode */
body.k-tx-select-mode .k-tx-cell--check { display: flex; }
body.k-tx-select-mode .k-tx-row { cursor: pointer; }

/* Highlight checked rows */
body.k-tx-select-mode .k-tx-row:has(.k-tx-check:checked) {
  background: var(--accent-soft);
}

/* Action bar — fixed dark strip at the bottom of the viewport */
.k-tx-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--koyne-dark-bg, #0B0B1F);
  border-top: 1px solid rgba(139, 92, 246, 0.3);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.k-tx-action-bar[hidden] { display: none; }

.k-tx-action-bar__count {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--koyne-lavender-300, #C4B5FD);
  white-space: nowrap;
}

.k-tx-action-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.k-tx-action-bar__assign-select {
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.1);
  color: var(--koyne-lavender-300, #C4B5FD);
  font: inherit;
  font-size: var(--fs-body-sm);
  cursor: pointer;
  max-width: 220px;
}
.k-tx-action-bar__assign-select:disabled { opacity: 0.4; cursor: not-allowed; }
.k-tx-action-bar__assign-select option,
.k-tx-action-bar__assign-select optgroup { background: #1a1a3e; color: #fff; }

/* ── CSV import badge ──────────────────────────────────────────── */
.k-tx-csv-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.625rem;           /* 10px */
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  background: var(--koyne-lavender-100, #ede9fe);
  color: var(--koyne-lavender-700, #6d28d9);
  vertical-align: middle;
  white-space: nowrap;
}

[data-theme="dark"] .k-tx-csv-badge {
  background: rgba(139, 92, 246, 0.18);
  color: var(--koyne-lavender-300, #c4b5fd);
}

/* ── Import batch banner ───────────────────────────────────────── */
.k-import-batch-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-md, 10px);
  background: var(--accent-soft, #f5f3ff);
  border: 1px solid var(--koyne-lavender-200, #ddd6fe);
  font-size: var(--fs-body-sm, 0.875rem);
  color: var(--fg-2, #64748b);
}

[data-theme="dark"] .k-import-batch-banner {
  background: rgba(109, 40, 217, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
  color: var(--koyne-lavender-200, #ddd6fe);
}

.k-import-batch-banner__label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.k-import-batch-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Category select — auto-suggested state (lavender tint, clears on manual change) */
.k-tx-cat-suggested {
  border-color: var(--koyne-lavender-200) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: var(--fw-semibold);
}

[data-theme="dark"] .k-tx-cat-suggested {
  background: rgba(139, 92, 246, 0.18) !important;
  color: var(--koyne-lavender-300) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

/* "All months" link — far-right of the filter controls */
.k-tx-filter-all {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  text-decoration: none;
  padding: 4px 8px;
  margin-left: auto;
  transition: color var(--dur-fast) var(--ease-out);
}
.k-tx-filter-all:hover { color: var(--fg-2); }