/* Colours, type and spacing come from app.css tokens so the rebrand flows through. Only layout sizes are local. */
:root {
  --fx-gap: var(--sp-3);
  --fx-gap-sm: var(--sp-2);
  --fx-gap-lg: var(--sp-5);
  --fx-radius: var(--r);
  --fx-radius-sm: var(--r-sm);
  --fx-surface: var(--surface);
  --fx-text: var(--text);
  --fx-border: var(--border);
  --fx-subtle: var(--surface-2);
  --fx-hover: var(--surface-3);
  --fx-muted: var(--text-2);
  --fx-error: var(--danger);
  --fx-warn: var(--warn);
  --fx-ok: var(--ok);
  --fx-accent: var(--accent);
  --fx-accent-soft: var(--accent-soft);
  --fx-on-accent: var(--accent-text);
  --fx-shadow: var(--shadow-lg);
  --fx-font-small: var(--fs-sm);
  --fx-font-big: var(--fs-xl);
  --fx-mono: var(--font-mono);
  --fx-scroll-h: 52vh;
  --fx-scroll-tall-h: 46vh;
  --fx-pdf-h: 62vh;
  --fx-ac-h: 280px;
  --fx-body-pad: var(--sp-4);
}

.fx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fx-gap); align-items: start; }
.fx-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--fx-gap-sm) var(--fx-gap); }
.fx-grow { flex: 1 1 auto; min-width: 0; }
.fx-auto { width: auto; }
.fx-wrap { flex-wrap: wrap; }
.fx-tight { gap: var(--fx-gap-sm); }
.fx-small { font-size: var(--fx-font-small); }
.fx-big { font-size: var(--fx-font-big); font-weight: 700; }
.fx-mono { font-family: var(--fx-mono); letter-spacing: 0.02em; }
.fx-pre { white-space: pre-line; }
.fx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-h3 { margin: 0; font-size: 1.05em; }
.fx-hint { margin: 0; }
.fx-label { display: block; font-weight: 600; margin-bottom: var(--fx-gap-sm); }
.fx-sep { display: inline-block; width: 1px; height: 1em; margin: 0 var(--fx-gap-sm); background: var(--fx-border); vertical-align: middle; }

.fx-error, .fx-error-text { color: var(--fx-error); }
.fx-error:empty, .fx-gstin-msg:empty { display: none; }
.fx-error { font-size: var(--fx-font-small); }
.fx-gstin-msg { font-size: var(--fx-font-small); margin-top: 4px; }
.fx-gstin-msg.fx-error { color: var(--fx-error); }
.fx-gstin-msg.fx-warn { color: var(--fx-warn); }

.fx-state-row { display: flex; gap: var(--fx-gap-sm); align-items: flex-end; }
.fx-code { width: 72px; flex: 0 0 72px; }
.fx-code .input { text-align: center; background: var(--fx-subtle); }

.fx-check { display: inline-flex; align-items: center; gap: var(--fx-gap-sm); cursor: pointer; }
.fx-check input { margin: 0; }

.fx-foot {
  position: sticky; z-index: 2;
  padding-top: var(--fx-gap); margin-top: var(--fx-gap-sm);
  background: var(--fx-surface); border-top: 1px solid var(--fx-border);
  bottom: calc(-1 * var(--fx-body-pad)); padding-bottom: var(--fx-body-pad); margin-bottom: calc(-1 * var(--fx-body-pad));
}
.fx-foot[hidden] { display: none; }

.fx-scroll { max-height: var(--fx-scroll-h); overflow: auto; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-sm); }
.fx-scroll.fx-tall { max-height: var(--fx-scroll-tall-h); }
.fx-scroll thead th { position: sticky; top: 0; background: var(--fx-surface); z-index: 1; }
.fx-scroll-x { overflow-x: auto; }
.fx-actions { white-space: nowrap; text-align: right; }
.fx-row-off td { opacity: 0.55; }
.fx-row-off td:first-child, .fx-row-off td:nth-child(2) { opacity: 1; }

/* company */
.fx-logo-box { display: flex; flex-direction: column; gap: var(--fx-gap-sm); }
.fx-logo-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; padding: var(--fx-gap-sm);
  border: 1px dashed var(--fx-border); border-radius: var(--fx-radius-sm); background: var(--fx-subtle);
}
.fx-logo-preview img { max-width: 200px; max-height: 80px; object-fit: contain; }

/* invoice */
.fx-inv-no { font-family: var(--fx-mono); font-weight: 700; font-size: 1.1em; }
.fx-ac { position: relative; }
.fx-ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  max-height: var(--fx-ac-h); overflow: auto;
  background: var(--fx-surface); color: var(--fx-text);
  border: 1px solid var(--fx-border); border-radius: var(--fx-radius-sm); box-shadow: var(--fx-shadow);
}
.fx-ac-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.fx-ac-item:hover, .fx-ac-item.is-active { background: var(--fx-hover); }
.fx-ac-empty { padding: 10px; }
.fx-client-card { display: flex; gap: var(--fx-gap); align-items: flex-start; flex-wrap: wrap; }
.fx-pos { min-width: 220px; }

.fx-items { min-width: 820px; }
.fx-items td { vertical-align: top; padding: 4px; }
.fx-items .input, .fx-items .select, .fx-items .textarea { width: 100%; min-width: 0; }
.fx-items .fx-idx { padding-top: 10px; color: var(--fx-muted); }
.fx-items td:nth-child(2) { min-width: 220px; }
.fx-desc { resize: vertical; min-height: 36px; overflow: hidden; }
.fx-hsn { width: 84px; }
.fx-qty { width: 72px; }
.fx-unit { width: 72px; }
.fx-rate { width: 100px; }
.fx-gst { width: 76px; }
.fx-line { padding-top: 10px !important; font-weight: 600; min-width: 90px; }

.fx-inv-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: var(--fx-gap-lg); align-items: start; }
.fx-totals { display: flex; flex-direction: column; gap: 4px; }
.fx-inv > .fx-totals { margin-left: auto; min-width: 260px; }
.fx-trow { display: flex; justify-content: space-between; gap: var(--fx-gap); font-variant-numeric: tabular-nums; }
.fx-grand { font-weight: 700; font-size: 1.1em; border-top: 1px solid var(--fx-border); padding-top: 6px; margin-top: 2px; }

.fx-pdf { width: 100%; height: var(--fx-pdf-h); border: 1px solid var(--fx-border); border-radius: var(--fx-radius-sm); background: var(--fx-subtle); }

/* import */
.fx-steps { display: flex; gap: var(--fx-gap-sm); margin: 0; padding: 0; list-style: none; counter-reset: fx-step; flex-wrap: wrap; }
.fx-steps li {
  counter-increment: fx-step; display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: var(--fx-font-small); color: var(--fx-muted); background: var(--fx-subtle);
}
.fx-steps li::before { content: counter(fx-step); font-weight: 700; }
.fx-steps li.is-on { color: var(--fx-on-accent); background: var(--fx-accent); }
.fx-steps li.is-done { color: var(--fx-ok); }
.fx-toolbar { align-items: center; }
.fx-import-table td { vertical-align: middle; }
.fx-path { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-date { width: 150px; padding-top: 2px; padding-bottom: 2px; }
.fx-summary { font-size: var(--fx-font-small); }
.fx-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--fx-gap); text-align: center; }
.fx-result > div { display: flex; flex-direction: column; gap: 2px; }

/* export */
.fx-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--fx-gap-sm); }
.fx-period {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--fx-gap-sm); align-items: center;
  padding: 8px 10px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-sm); cursor: pointer;
}
.fx-period > .muted { grid-column: 2; }
.fx-period:has(input:checked) { border-color: var(--fx-accent); background: var(--fx-accent-soft); }

@media (max-width: 640px) {
  .fx-inv-bottom { grid-template-columns: 1fr; }
  .fx-inv > .fx-totals { margin-left: 0; min-width: 0; }
  .fx-path { max-width: 180px; }
  .fx-import-table .fx-path { min-width: 140px; white-space: normal; overflow-wrap: anywhere; }
  .fx-toolbar .spacer { display: none; }
  .fx-items { min-width: 0; }
  .fx-items thead { display: none; }
  .fx-items, .fx-items tbody { display: block; }
  .fx-items tr {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fx-gap-sm);
    padding: var(--fx-gap-sm) 0; border-bottom: 1px solid var(--fx-border);
  }
  .fx-items td { display: block; padding: 0; border: 0; min-width: 0; }
  .fx-items td:nth-child(2) { grid-column: 2 / -1; min-width: 0; }
  .fx-items td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fx-font-small); color: var(--fx-muted); }
  .fx-items td:nth-child(2)::before { display: none; }
  .fx-items .fx-idx { padding-top: var(--fx-gap-sm); }
  .fx-items .fx-line { grid-column: span 2; padding-top: 0 !important; align-self: end; }
  .fx-items .fx-rm { align-self: end; text-align: right; }
}