/* fin-invoices.css — Invoices page (Phase 2 demo): filter chips, invoice
   list, and the 3-step Create Invoice modal. All new classNames are
   prefixed fin-inv- to avoid collisions with fin-base.css / fin-kit.css. */

.fin-inv { display: flex; flex-direction: column; }

/* ── Filter chips ──────────────────────────────────────────────────── */
.fin-inv-filters { display: flex; flex-wrap: wrap; gap: var(--fin-s-2); margin-bottom: var(--fin-s-5); }
.fin-inv-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid var(--fin-border); border-radius: var(--fin-r-pill);
  background: var(--fin-surface-1); color: var(--fin-text-2); font: inherit;
  font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-medium); cursor: pointer;
  transition: background-color var(--fin-t-fast) var(--fin-ease), border-color var(--fin-t-fast) var(--fin-ease), color var(--fin-t-fast) var(--fin-ease);
}
.fin-inv-chip:hover { background: var(--fin-surface-hover); border-color: var(--fin-border-strong); }
.fin-inv-chip.is-active { background: var(--fin-accent); border-color: var(--fin-accent); color: var(--fin-text-on-accent); }
.fin-inv-chip-n {
  font-size: var(--fin-fs-micro); font-weight: var(--fin-fw-semi); line-height: 1;
  background: rgba(125, 134, 129, .18); color: inherit; padding: 2px 7px; border-radius: var(--fin-r-pill);
}
.fin-inv-chip.is-active .fin-inv-chip-n { background: rgba(10, 20, 5, .18); }

/* ── Invoice list ──────────────────────────────────────────────────── */
.fin-inv-list-panel { padding: var(--fin-s-2) var(--fin-card-pad); }
.fin-inv-list { display: flex; flex-direction: column; }

.fin-inv-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fin-s-4);
  padding: var(--fin-s-4) var(--fin-s-2); border-bottom: 1px solid var(--fin-border);
}
.fin-inv-row:last-child { border-bottom: 0; }
.fin-inv-row:hover { background: var(--fin-surface-hover); border-radius: var(--fin-r-sm); }

.fin-inv-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.fin-inv-row-client { font-size: var(--fin-fs-body); font-weight: var(--fin-fw-semi); color: var(--fin-text-1); }
.fin-inv-row-svc { font-size: var(--fin-fs-meta); color: var(--fin-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-inv-row-num { font-family: var(--fin-font-mono); font-size: var(--fin-fs-micro); color: var(--fin-text-3); }

.fin-inv-row-side { display: flex; align-items: center; gap: var(--fin-s-6); flex: none; }
.fin-inv-row-due { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.fin-inv-row-due-l { font-size: var(--fin-fs-micro); font-weight: var(--fin-fw-semi); letter-spacing: .03em; text-transform: uppercase; color: var(--fin-text-3); }
.fin-inv-row-due-v { font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-medium); color: var(--fin-text-1); }
.fin-inv-row-overdue-tag {
  align-self: flex-start; margin-top: 2px; font-size: var(--fin-fs-micro); font-weight: var(--fin-fw-semi);
  color: var(--fin-crit-ink); background: var(--fin-crit-soft); padding: 1px 8px; border-radius: var(--fin-r-pill);
}
.fin-inv-row-amt {
  font-family: var(--fin-font-display); font-size: var(--fin-fs-body); font-weight: var(--fin-fw-bold);
  color: var(--fin-text-1); text-align: right; font-variant-numeric: tabular-nums; min-width: 128px;
}
.fin-inv-row.is-overdue .fin-inv-row-amt { color: var(--fin-crit-ink); }

.fin-inv-empty { display: flex; flex-direction: column; align-items: center; gap: var(--fin-s-2); padding: var(--fin-s-8) 0; color: var(--fin-text-3); text-align: center; }
.fin-inv-empty p { margin: 0; font-size: var(--fin-fs-body); }

@media (max-width: 760px) {
  .fin-inv-row { flex-direction: column; align-items: flex-start; gap: var(--fin-s-3); }
  .fin-inv-row-side { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: var(--fin-s-3); }
  .fin-inv-row-amt { text-align: left; min-width: 0; }
}

/* ── Create Invoice modal ──────────────────────────────────────────── */
.fin-inv-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: var(--fin-s-4); background: var(--fin-scrim);
}
.fin-inv-modal {
  width: 100%; max-width: 580px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--fin-surface-1); border-radius: var(--fin-r-lg); overflow: hidden;
  box-shadow: 0 0 0 1px var(--fin-border), var(--fin-shadow-pop);
}
.fin-inv-modal-h {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: var(--fin-s-4) var(--fin-s-5); border-bottom: 1px solid var(--fin-border);
}
.fin-inv-steps { display: flex; gap: var(--fin-s-2); }
.fin-inv-step {
  font-size: var(--fin-fs-meta); font-weight: var(--fin-fw-medium); color: var(--fin-text-3);
  padding: 5px 12px; border-radius: var(--fin-r-pill); background: var(--fin-surface-2);
}
.fin-inv-step.is-on { color: var(--fin-text-on-accent); background: var(--fin-accent); font-weight: var(--fin-fw-semi); }
.fin-inv-modal-x {
  appearance: none; border: 0; background: var(--fin-surface-2); color: var(--fin-text-2);
  width: 32px; height: 32px; border-radius: var(--fin-r-sm); display: grid; place-items: center; cursor: pointer; flex: none;
}
.fin-inv-modal-x:hover { background: var(--fin-surface-hover); }

.fin-inv-modal-body { flex: 1 1 auto; overflow-y: auto; padding: var(--fin-s-5); display: flex; flex-direction: column; gap: var(--fin-s-4); }

.fin-inv-modal-f {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--fin-s-3);
  padding: var(--fin-s-4) var(--fin-s-5); border-top: 1px solid var(--fin-border);
}
.fin-inv-modal-f-left, .fin-inv-modal-f-right { display: flex; align-items: center; gap: var(--fin-s-2); }

/* Step 1 — client */
.fin-inv-step1 { display: flex; flex-direction: column; gap: var(--fin-s-3); }
.fin-inv-search-wrap { position: relative; }
.fin-inv-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fin-text-3); pointer-events: none; }
.fin-inv-search { padding-left: 36px; }
.fin-inv-client-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.fin-inv-client-row {
  appearance: none; display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--fin-s-3); border: 1px solid var(--fin-border); border-radius: var(--fin-r-sm);
  background: var(--fin-surface-1); color: var(--fin-text-1); font: inherit; font-size: var(--fin-fs-body);
  cursor: pointer; text-align: left; transition: background-color var(--fin-t-fast) var(--fin-ease), border-color var(--fin-t-fast) var(--fin-ease);
}
.fin-inv-client-row:hover { background: var(--fin-surface-hover); }
.fin-inv-client-row.is-selected { border-color: var(--fin-accent-line); background: var(--fin-accent-soft); color: var(--fin-accent-ink); }
.fin-inv-noclient { margin: 0; padding: var(--fin-s-3); font-size: var(--fin-fs-meta); color: var(--fin-text-3); }
.fin-inv-add-toggle {
  align-self: flex-start; appearance: none; border: 0; background: none; color: var(--fin-accent-ink);
  font-weight: var(--fin-fw-semi); font-size: var(--fin-fs-meta); cursor: pointer; padding: var(--fin-s-1) 2px;
}
.fin-inv-add-client { display: flex; gap: var(--fin-s-2); }
.fin-inv-add-client .fin-input { flex: 1 1 auto; }

/* Step 2 — details */
.fin-inv-step2 { display: flex; flex-direction: column; gap: var(--fin-s-4); }
.fin-inv-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fin-s-3); }
.fin-inv-form-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.fin-inv-optional { color: var(--fin-text-3); font-weight: var(--fin-fw-regular); font-size: var(--fin-fs-micro); text-transform: none; letter-spacing: 0; }
.fin-inv-textarea { height: auto; padding: var(--fin-s-3); resize: vertical; font: inherit; font-size: var(--fin-fs-body); }
@media (max-width: 560px) { .fin-inv-form-grid, .fin-inv-form-grid.is-2 { grid-template-columns: 1fr; } }

/* Step 3 — preview */
.fin-inv-preview-card {
  display: flex; flex-direction: column; gap: var(--fin-s-4); padding: var(--fin-s-5);
  border-radius: var(--fin-r-md); background: var(--fin-surface-2); box-shadow: 0 0 0 1px var(--fin-border);
}
.fin-inv-preview-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fin-s-3); }
.fin-inv-preview-brand { font-family: var(--fin-font-display); font-weight: var(--fin-fw-bold); font-size: var(--fin-fs-name); letter-spacing: .04em; color: var(--fin-text-1); }
.fin-inv-preview-num { font-family: var(--fin-font-mono); font-size: var(--fin-fs-meta); color: var(--fin-text-3); margin-top: 2px; }
.fin-inv-preview-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fin-s-3);
  padding: var(--fin-s-3) 0; border-top: 1px solid var(--fin-border); border-bottom: 1px solid var(--fin-border);
}
.fin-inv-preview-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fin-inv-preview-l { font-size: var(--fin-fs-micro); font-weight: var(--fin-fw-semi); letter-spacing: .03em; text-transform: uppercase; color: var(--fin-text-3); }
.fin-inv-preview-v { font-size: var(--fin-fs-body); font-weight: var(--fin-fw-medium); color: var(--fin-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-inv-preview-line { display: flex; justify-content: space-between; gap: var(--fin-s-3); font-size: var(--fin-fs-body); font-weight: var(--fin-fw-medium); color: var(--fin-text-1); }
.fin-inv-preview-totals { display: flex; flex-direction: column; gap: 7px; padding-top: var(--fin-s-2); }
.fin-inv-preview-trow { display: flex; justify-content: space-between; gap: var(--fin-s-3); font-size: var(--fin-fs-meta); color: var(--fin-text-2); }
.fin-inv-preview-total { padding-top: var(--fin-s-3); border-top: 1px solid var(--fin-border-strong); font-size: var(--fin-fs-card); font-weight: var(--fin-fw-bold); color: var(--fin-text-1); }
.fin-inv-preview-notes { margin: 0; font-size: var(--fin-fs-meta); color: var(--fin-text-2); font-style: italic; }
@media (max-width: 560px) { .fin-inv-preview-meta { grid-template-columns: 1fr; } }

/* Printing the preview (Download PDF -> window.print()): hide modal chrome
   and the backdrop, leave just the invoice card as a clean printable page. */
@media print {
  .fin-inv-overlay { position: static; background: #FFFFFF; padding: 0; }
  .fin-inv-modal { max-width: none; max-height: none; box-shadow: none; border-radius: 0; }
  .fin-inv-modal-h, .fin-inv-modal-f, .fin-inv-steps { display: none !important; }
  .fin-inv-modal-body { overflow: visible; padding: 0; }
  .fin-inv-preview-card { box-shadow: none; background: #FFFFFF; }
}