/* SOURCE194 W15: manual finance workspace in the order detail. Every rule is scoped under .fin-ws.
   Tokens come from design.css. design.css has no amber, red or green token, so the few hex values
   are copies, never new colours: amber #c78a21, #edd9ae, #fff8e9 and #925b08 mirror the warning
   colours of machine-calendar.css and calendar-read-view.css; red #b34a46, #ffeeec and #f0d9d9
   mirror design.css .badge-red and .btn-danger; green #226a4f and #e9f6ef mirror design.css
   .badge-green. One column on a phone, form or confirmation next to the overview on a wide screen.
   No selector list inside parentheses, so a plain comma split of selectors stays exact. */
.fin-ws{container:fin-ws/inline-size;display:grid;gap:var(--space-3);min-width:0;padding:var(--space-card);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);overflow-wrap:anywhere}
.fin-ws .fin-ws-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);min-width:0}
.fin-ws .fin-ws-head>h2{margin:0;font-size:var(--text-lg);font-weight:650;line-height:1.35}
.fin-ws .fin-ws-sub{margin:0;font-size:var(--text-md);font-weight:650}
.fin-ws .fin-ws-status{margin:0;padding:8px 12px;border-left:3px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--ink-2);font-size:var(--text-sm);line-height:1.5}
.fin-ws[data-status=unknown] .fin-ws-status,.fin-ws[data-status=conflict] .fin-ws-status{border-left-color:#c78a21;background:#fff8e9;color:#925b08}
.fin-ws[data-status=rejected] .fin-ws-status,.fin-ws[data-status=unavailable] .fin-ws-status{border-left-color:#b34a46;background:#ffeeec;color:#b34a46}
.fin-ws[data-status=saved] .fin-ws-status{border-left-color:#226a4f;background:#e9f6ef;color:#226a4f}
.fin-ws .fin-ws-alert{margin:0;padding:9px 12px;border:1px solid #f0d9d9;border-radius:var(--radius-control);background:#ffeeec;color:#b34a46;font-size:var(--text-sm);line-height:1.5}
.fin-ws .fin-ws-note,.fin-ws .fin-ws-muted,.fin-ws .fin-ws-meta{margin:0;color:var(--muted);font-size:var(--text-xs);line-height:1.5}
.fin-ws .fin-ws-notice{margin:0;padding:8px 12px;border:1px solid #edd9ae;border-radius:var(--radius-sm);background:#fff8e9;color:#925b08;font-size:var(--text-sm)}

/* Form, confirmation and recovery: one column; actions wrap. */
.fin-ws .fin-ws-form,.fin-ws .fin-ws-confirm,.fin-ws .fin-ws-recovery{display:grid;gap:var(--space-3);min-width:0;max-width:44rem;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.fin-ws .fin-ws-recovery{border-style:dashed;border-color:#edd9ae;background:#fff8e9}
.fin-ws .fin-ws-field{margin:0;min-width:0}
.fin-ws .fin-ws-field>.input{max-width:100%}
.fin-ws .fin-ws-field>.input[aria-invalid=true]{border-color:#b34a46}
.fin-ws .fin-ws-field-error{display:flex;align-items:flex-start;gap:6px;margin:0;color:#b34a46;font-size:var(--text-xs);line-height:1.4}
.fin-ws .fin-ws-field-error>.icon{flex:none;width:14px;height:14px;margin-top:1px}
.fin-ws .fin-ws-actions,.fin-ws .fin-ws-row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
.fin-ws .fin-ws-actions>.btn,.fin-ws .fin-ws-row-actions>.btn{white-space:normal}
.fin-ws .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fin-ws .input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fin-ws .fin-ws-head>h2:focus-visible,.fin-ws .fin-ws-sub:focus-visible,.fin-ws .fin-ws-status:focus-visible,.fin-ws .fin-ws-alert:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Read back of the exact command and the server summary: term and value per row. */
.fin-ws .fin-ws-preview,.fin-ws .fin-ws-summary,.fin-ws .fin-ws-target{display:grid;gap:4px;margin:0;font-size:var(--text-sm);line-height:1.45}
.fin-ws .fin-ws-preview>div,.fin-ws .fin-ws-summary>div,.fin-ws .fin-ws-target>div{display:grid;grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);gap:var(--space-2);align-items:baseline}
.fin-ws dt{color:var(--muted);font-size:var(--text-xs);font-weight:600}
.fin-ws dd{min-width:0;margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Overview from the server: one card per document, payment records below an invoice. */
.fin-ws .fin-ws-overview{display:grid;gap:var(--space-2);min-width:0}
.fin-ws .fin-ws-docs,.fin-ws .fin-ws-entries{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.fin-ws .fin-ws-doc{display:grid;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm)}
.fin-ws .fin-ws-doc-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);color:var(--ink)}
.fin-ws .fin-ws-amount{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-ws .fin-ws-entry{display:grid;gap:2px;padding:6px 0 6px var(--space-2);border-left:3px solid var(--line)}
.fin-ws .fin-ws-entry.is-reversal{border-left-color:#c78a21}
.fin-ws .fin-ws-entry>small{color:var(--muted);font-size:var(--text-xs)}
.fin-ws .fin-ws-entry>.btn{justify-self:start}

@container fin-ws (min-width:60rem){
 .fin-ws .fin-ws-docs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container fin-ws (max-width:30rem){
 .fin-ws .fin-ws-preview>div,.fin-ws .fin-ws-summary>div,.fin-ws .fin-ws-target>div{grid-template-columns:minmax(0,1fr);gap:0}
}
/* Phone 375 and 390: one column, 44 px touch targets, long texts wrap, no sideways page scroll. */
@media (max-width:699px){
 .fin-ws{padding:var(--space-3)}
 .fin-ws .btn{min-height:44px;white-space:normal}
 .fin-ws .input{min-height:44px}
 .fin-ws .fin-ws-actions>.btn{flex:1 1 10rem}
 .fin-ws .fin-ws-head>.btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
 .fin-ws .btn{transition:none}
}

/* A7 redizajnu V6.2: stránka Doklady a platby (web/finance-grid-view.js, web/finance-overview-view.js, snimky/v62-13). Koreň .fin-v62.
   Dlaždice, prepínač záložiek a panely kreslí kit R5 (components-v62.css); tu je rozloženie: od 1100 px tabuľka a pravý stĺpec
   300 px vedľa seba, užšie pod sebou. lists.css a data-grid.css sa nemenia. */
.fin-v62{display:grid;gap:var(--space-3);min-width:0}
.fin-v62 .fin-v62-metrics,.fin-v62 .fin-v62-side{display:grid;gap:var(--space-3);min-width:0}
.fin-v62 .fin-v62-metrics{gap:6px}
.fin-v62 .fin-v62-cols{display:grid;gap:var(--space-4);align-items:start;min-width:0}
.fin-v62 .fin-v62-side>.panel{min-width:0;margin:0}
.fin-v62 .fin-v62-tabs{margin:var(--space-4) var(--space-5) 0}
.fin-v62 .fin-v62-kind{display:block;margin-top:2px;color:var(--muted);font-size:var(--text-xs);font-weight:400;line-height:1.35}
/* Tabuľka vedľa pravého stĺpca: užšie bunky ako data-grid.css (6px 10px), aby sa pri 1440 px zmestila bez posunu. */
.fin-v62 .dg-table .dg-th,.fin-v62 .dg-table .dg-cell{padding:6px 8px}
.fin-v62 .fin-v62-note{margin:0;color:var(--muted);font-size:var(--text-xs);line-height:1.5}
.fin-v62 .fin-v62-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.fin-v62 .fin-v62-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.fin-v62 .fin-v62-item-text{display:grid;flex:1 1 9rem;gap:2px;min-width:0}
.fin-v62 .fin-v62-item-text>a{font-weight:650;font-variant-numeric:tabular-nums}
.fin-v62 .fin-v62-item-text>span{color:var(--muted);font-size:var(--text-xs);line-height:1.4;overflow-wrap:anywhere}
.fin-v62 .fin-v62-review-loaded{margin:0;font-size:var(--text-sm);line-height:1.45;overflow-wrap:anywhere}
.fin-v62 .fin-v62-side .panel-body{display:grid;gap:var(--space-2)}
.fin-v62 .fin-v62-side .panel-body>.btn{justify-self:start}
.fin-v62 .fin-v62-side .v62-steps li{font-size:var(--text-xs)}
.fin-v62 .fin-v62-side .v62-steps{gap:6px 14px}
.fin-v62 .fin-v62-side .v62-steps li+li::before{display:none}
/* Účtovné posúdenie (accounting-review-view.js) pripája views.js celou šírkou pod stránku. */
.fin-v62~[data-screen-id="accounting.review"]{margin-top:var(--space-4)}
@media (min-width:1100px){
 .fin-v62 .fin-v62-cols{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:699px){
 .fin-v62 .fin-v62-tabs{margin:var(--space-3) var(--space-3) 0}
 .fin-v62 .fin-v62-item>.btn{flex:1 1 100%}
 .fin-v62 .fin-v62-side .btn{min-height:44px}
}