/* =====================================================================================================================
   forms.css — Wave 3 (owner §5 field layout, §6 transfers): the operation screens' field rows and hints.
   Loaded AFTER app.css (App.razor). Only the treasury operation screens use these classes (cashbox transfer, cheque, voucher,
   mixed collection); everything else keeps app.css as it is. No inline styles on help / warning texts: one .hint block.
   ===================================================================================================================== */

/* the operation fields in ONE horizontal row on desktop where the space allows; the grid wraps by itself when it does not */
.doc-head.op-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2) var(--s3);align-items:end}
.doc-head.op-row > label{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
.doc-head.op-row > label > .inp,.doc-head.op-row > label > .lk,.doc-head.op-row > label > select.inp{margin-top:0;width:100%;min-width:0;max-width:100%}
.doc-head.op-row > label > small{min-height:0}
.doc-head.op-row > label > .pin,.doc-head.op-row > label > .method-pin{align-self:flex-start}
/* the one wide field of a row (notes / description) takes the whole row */
.doc-head.op-row > label.wide{grid-column:1 / -1}

/* help / warning texts under the field group — one block, no inline styles */
.doc > div.hint,.doc > .hint.block{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:12px;color:var(--muted);margin:-4px 2px var(--s2)}
.doc > div.hint b,.doc > .hint.block b{color:var(--ink)}
.doc > div.hint .warn,.hint .warn{color:var(--danger);font-weight:600}
.doc > div.hint .field-err{flex:1 1 100%}
.doc > div.hint .btn.sm{margin-inline-start:4px}

/* the reason a disabled action button cannot be used right now — next to the button, same line */
.doc-actions [data-reason]{font-size:11.5px;align-self:center;white-space:normal;max-width:100%}
.doc-actions [data-action-error]{align-self:center;flex:1 1 100%;font-size:12px}
.action-panel [data-reason]{font-size:11.5px;align-self:center}
.action-panel label.grow{flex:1 1 280px}
.action-panel .pad,.alert .pad{margin-inline:4px}

/* phones: one column, nothing scrolls sideways, the same tab order */
@media (max-width:560px){
  .doc-head.op-row{grid-template-columns:1fr}
  .doc-head.op-row > label.wide{grid-column:auto}
  .doc > div.hint,.doc > .hint.block{flex-direction:column;align-items:stretch;gap:4px}
  .doc-actions [data-reason],.doc-actions [data-action-error]{flex:1 1 100%}
}

/* post-waves (E, 2026-10-25): the advisory overdraft warning of the transfer / payment screens — visible as a warning strip with the
   figures (amount vs balance, shortfall). Advisory only: the server refuses the posting (cashbox.overdraft) unless the company allows it. */
.hint .warn[data-overdraft-warn]{flex:1 1 100%;display:block;padding:6px 10px;border-radius:var(--r-sm,6px);background:var(--warn-bg,#fff6d6);
  border:1px solid var(--warn-bd,#f0d890);border-inline-start:4px solid var(--danger,#b42318);color:var(--ink,#1d2a35);font-weight:500;line-height:1.6}
.hint .warn[data-overdraft-warn] b{color:var(--danger,#b42318);font-weight:700}
/* the reasons row of a toolbar never pushes the buttons: it wraps under them, one line per cause */
.doc-actions .hints[data-action-reasons]:empty{display:none}