/* =========================================================================
   Koyne — forms_and_lists.css
   Form fields + page heads + account list/detail rules. Used across
   /app/accounts/new, /app/accounts/<id>/edit, /app/accounts,
   /app/accounts/<id>. Tokens come from colors_and_type.css; dark mode is
   handled by that file's [data-theme="dark"] rebind — no per-rule dark
   overrides needed.
   ========================================================================= */

/* ---- Page head (above form / list) ---------------------------------- */
.k-page-head {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-2);
}
.k-page-head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.k-page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
/* Without this, the h1 inside .k-page-head inherits browser-default
   font-size: 2em and renders at ~56px (way too large). Lock it to the
   wrapper's 28px and apply Koyne's display weight + tight tracking. */
.k-page-head h1 {
  font-size: 1em;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--fg);
}
.k-page-sub {
  font-size: var(--fs-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
  max-width: 56ch;
}

/* ---- Form scaffolding ---------------------------------------------- */
.k-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 560px;
}

.k-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.k-field__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.k-field__hint {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.k-input,
.k-field input[type="text"],
.k-field input[type="number"],
.k-field input[type="date"],
.k-field input[type="month"],
.k-field input[type="email"],
.k-field select,
.k-field textarea {
  font: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.k-input:focus,
.k-field input:focus,
.k-field select:focus,
.k-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.k-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---- Icon picker (radio group with sprite icons) ------------------- */
.k-icon-picker {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.k-icon-picker > legend {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 0;
  margin-bottom: var(--space-2);
}

.k-icon-picker > div,
.k-icon-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.k-icon-picker__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.k-icon-picker__item:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.k-icon-picker__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.k-icon-picker__item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---- Section title (above lists / archived block) ------------------- */
.k-section-title {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: var(--space-8) 0 var(--space-3);
}

/* ---- Account-detail header ---------------------------------------- */
.k-account-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--divider);
}

.k-account-balance {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
}

/* Action row above account list (Add account, etc.) */
.k-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Archived section wrapper — visually separated, slightly faded */
.k-archived-section {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--border);
  opacity: 0.85;
}

/* ---- Row right-side actions (kebab, edit, archive buttons) -------- */
.k-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.k-row__title-link {
  color: var(--fg);
  text-decoration: none;
}
.k-row__title-link:hover {
  color: var(--accent);
}

/* ---- Empty states ------------------------------------------------- */
.k-empty {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  background: var(--surface);
}
.k-empty p { margin: 0 0 var(--space-3); }
.k-empty p:last-child { margin-bottom: 0; }

.k-empty--inline {
  padding: var(--space-5) var(--space-4);
  font-size: var(--fs-body-sm);
}

/* ---- Chip variants ----------------------------------------------- */
.k-chip--muted {
  background: var(--surface-2);
  color: var(--fg-3);
  border: 1px solid var(--border);
}

/* ---- Small button variant --------------------------------------- */
.k-btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body-sm);
  border-radius: var(--radius-xs);
}

/* ---- Dialog action row (e.g. move-money confirm) ------------------ */
.k-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ---- Dialog colour palette (radio-grid for new-category + recolour) ---- */
.k-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.k-color-palette__item {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.k-color-palette__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.k-color-palette__item .k-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  display: inline-block;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.k-color-palette__item:hover .k-color-swatch { transform: scale(1.1); }
.k-color-palette__item input:checked ~ .k-color-swatch {
  border-color: var(--fg);
  box-shadow: var(--focus-ring);
}

/* Standalone swatch button (used by Edit-category dialog's recolour swatches) */
.k-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  cursor: pointer;
  padding: 0;
  background-color: currentColor;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.k-color-swatch:hover { transform: scale(1.1); }

/* ---- Soft button variant (used by move-money trigger in Edit-cat) ----- */
.k-btn--soft {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.k-btn--soft:hover { background: var(--accent); color: var(--accent-fg); }

/* ---- Account type panels (Option B grouped layout) -------------------- */
.k-acct-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.k-acct-panel__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.k-acct-panel__summary::-webkit-details-marker { display: none; }
.k-acct-panel__kind {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--fg);
  flex: 1;
}
.k-acct-panel__count {
  font-size: 12px;
  color: var(--fg-3);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 999px;
}
.k-acct-panel__total {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--fg);
  min-width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.k-acct-panel__total--negative { color: var(--underfunded); }
.k-acct-panel__chevron {
  color: var(--fg-3);
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.k-acct-panel[open] .k-acct-panel__chevron { transform: rotate(90deg); }
.k-acct-panel__rows {
  border-top: 1px solid var(--divider);
}
.k-acct-panel .k-row {
  padding: 11px var(--space-4);
}
.k-acct-panel .k-row:first-child { border-top: none; }
[data-theme="dark"] .k-acct-panel {
  background: var(--koyne-dark-bg);
  border-color: var(--koyne-dark-border);
}
[data-theme="dark"] .k-acct-panel__rows { border-top-color: var(--koyne-dark-border); }