/* ── Form grids ──────────────────────────────────────────────────────────── */
.form-grid     { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid-3   { grid-template-columns: repeat(3, 1fr); }
.form-grid-4   { grid-template-columns: repeat(4, 1fr); }
.col-span-2    { grid-column: span 2; }
.col-span-3    { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .form-grid, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr 1fr; }
  .col-span-3, .col-span-full { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .form-grid, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
  .col-span-2, .col-span-3, .col-span-full { grid-column: auto; }
}

/* ── Form group ──────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label  { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.form-label .required { color: var(--accent); margin-left: 2px; }
.form-hint   { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.form-control {
  width: 100%; padding: 9px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-primary); font-size: 0.86rem;
  font-family: var(--font-ui); line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none; appearance: none; -webkit-appearance: none;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: #fff; }
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled { opacity: 0.45; cursor: not-allowed; background: var(--bg-elevated); }
.form-control.is-invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A6480'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  padding-right: 30px; cursor: pointer;
}
select.form-control option { background: #fff; color: var(--text-primary); }
textarea.form-control { resize: vertical; min-height: 84px; line-height: 1.55; }
.form-control.mono { font-family: var(--font-mono); font-size: 0.83rem; letter-spacing: 0.04em; }

/* ── Field error ──────────────────────────────────────────────────────────  */
.field-error { font-size: 0.71rem; color: var(--red); margin-top: 3px; display: none; }
.form-group.has-error .field-error { display: block; }
.form-group.has-error .form-label  { color: var(--red); }

/* ── Form section ────────────────────────────────────────────────────────── */
.form-section { margin-bottom: 28px; }
.form-section-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 16px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
}

/* ── Items table ──────────────────────────────────────────────────────────  */
.items-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.items-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; min-width: 660px; }
.items-table th { padding: 8px 9px; text-align: left; font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-elevated); }
.items-table td { padding: 5px 9px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.items-table td input { background: transparent; border: none; outline: none; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.79rem; width: 100%; min-width: 55px; padding: 3px 2px; border-radius: 4px; transition: background var(--transition); }
.items-table td input:focus { background: var(--bg-hover); padding: 3px 6px; }
.items-table .vTotal { font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.83rem; }
.add-item-row { padding: 10px; text-align: center; border-top: 1px solid var(--border); background: var(--bg-elevated); }

/* ── Totals ───────────────────────────────────────────────────────────────  */
.totals-box { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; margin-top: 14px; }
.totals-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 0.83rem; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.totals-row:last-child { border-bottom: none; }
.totals-row .label { color: var(--text-muted); }
.totals-row .value { font-family: var(--font-mono); font-weight: 500; }
.totals-row.total  { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); padding-top: 10px; margin-top: 6px; border-top: 2px solid var(--border); border-bottom: none; }
.totals-row.total .value { color: var(--accent); font-size: 1.05rem; }

/* ── Autocomplete ────────────────────────────────────────────────────────── */
.autocomplete-wrap { position: relative; }
.autocomplete-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 100; max-height: 210px; overflow-y: auto; }
.autocomplete-item { padding: 9px 13px; cursor: pointer; font-size: 0.83rem; transition: background var(--transition); border-bottom: 1px solid var(--border); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.selected { background: var(--bg-hover); color: var(--text-primary); }
.autocomplete-item .item-label { font-weight: 600; }
.autocomplete-item .item-sub   { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }

/* ── Mobile fixes ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .form-control, select.form-control, textarea.form-control { font-size: 16px; } /* previne zoom no iOS */
  .form-section { margin-bottom: 20px; }
}