/* E3-07 „Rozliczenie” and „Wydano” (D183 ModD183, D193, D194): K/T two columns (1.6 : 1), M one;
   radio cards 64 px, the forms 2 × 2 56 px, the bottom bar with the sum. */
.fjn-rozl { gap: 16px; }
.fjn-rozl { box-sizing: border-box; min-height: calc(100vh - var(--fjn-topbar-h, 64px)); }
@media (max-width: 767px) { .fjn-rozl { min-height: calc(100vh - var(--fjn-topbar-h-m, 56px) - var(--fjn-bottomnav-h, 64px)); } }
.fjn-rozl > :not(.fjn-form-footer):not(dialog) { width: 100%; max-width: 1120px; }
.fjn-rozl__head h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; font-size: 28px; }
.fjn-rozl__head p { margin: 4px 0 0; font-size: 15px; color: #454D57; }
.fjn-rozl__kind { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: #EDEFF1; color: #454D57; font: 700 13px var(--fjn-font); }
.fjn-rozl__kind--done { background: #E2F2E8; color: #1B6B41; }
.fjn-rozl__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fjn-rozl__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fjn-rozl__card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff; border: 1px solid #D8DCE1; border-radius: 10px; min-width: 0; }
.fjn-rozl__cardhead { display: flex; flex-direction: column; gap: 4px; }
.fjn-rozl__cardhead--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.fjn-rozl__cardhead h2, .fjn-rozl__lines h2 { margin: 0; font-size: 18px; }
.fjn-rozl__cardhead > span { font-size: 13px; color: #454D57; }
.fjn-rozl__opts { display: grid; gap: 8px; }
.fjn-rozl__opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fjn-rozl__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fjn-rozl__opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; box-sizing: border-box; border: 1px solid #D8DCE1; border-radius: 8px; background: #fff; cursor: pointer; }
.fjn-rozl__opt input, .fjn-rozl__form input { position: absolute; opacity: 0; pointer-events: none; }
.fjn-rozl__opt > i { flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid #8A929C; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fjn-rozl__opt > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fjn-rozl__opt small { font-size: 13px; color: #454D57; }
.fjn-rozl__opt.is-on, .fjn-rozl__opt:has(input:checked) { border: 2px solid var(--fjn-brand-600); padding: 9px 11px; background: #EAF1F9; }
.fjn-rozl__opt.is-on > i, .fjn-rozl__opt:has(input:checked) > i { border-color: var(--fjn-brand-600); }
.fjn-rozl__opt.is-on > i::after, .fjn-rozl__opt:has(input:checked) > i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fjn-brand-600); }
.fjn-rozl__opt:has(input:focus-visible), .fjn-rozl__form:has(input:focus-visible) { box-shadow: var(--fjn-focus-btn); }
.fjn-rozl__lock { flex: none; opacity: .7; }
.fjn-rozl__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fjn-rozl__label { font-size: 15px; font-weight: 700; color: var(--fjn-text); }
.fjn-rozl__muted { font-weight: 400; color: #454D57; }
.fjn-rozl__forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fjn-rozl__form { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 8px; box-sizing: border-box; border: 1px solid #D8DCE1; border-radius: 8px; background: #fff; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fjn-rozl__form:has(input:checked) {  /* 4.34.1: only the checked form (the server mark stayed on the default) */ border: 2px solid var(--fjn-brand-600); background: #EAF1F9; color: var(--fjn-brand-600); }
.fjn-rozl__amountrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fjn-rozl__amountrow > span:last-child { flex: 1; min-width: 180px; font-size: 13px; color: #454D57; }
.fjn-rozl__amount { display: inline-flex; align-items: center; gap: 6px; width: 200px; height: 56px; box-sizing: border-box; padding: 0 12px; border: 1px solid #D8DCE1; border-radius: 8px; font: 700 18px var(--fjn-font-mono); }
.fjn-rozl__amount input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; text-align: right; font: inherit; }
.fjn-rozl__amount input:focus { outline: none; box-shadow: none; }
.fjn-rozl__amount:focus-within { border: 2px solid var(--fjn-brand-600); padding: 0 11px; }
.fjn-rozl__amount.is-error { border: 2px solid #B3261E; padding: 0 11px; }
.fjn-rozl__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fjn-rozl__input { height: 56px; }
.fjn-rozl__input--hint { border: 2px solid #C77700; }
.fjn-rozl__ro { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; box-sizing: border-box; border-radius: 8px; background: #F4F5F6; font-size: 16px; }
.fjn-rozl__ro svg { flex: none; opacity: .6; }
.fjn-rozl__note { margin: 0; font-size: 13px; color: #454D57; }
.fjn-rozl__note--icon { display: flex; gap: 6px; align-items: flex-start; }
.fjn-rozl__note--icon svg { flex: none; margin-top: 2px; }
.fjn-rozl__info, .fjn-rozl__ok, .fjn-rozl__locked { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.fjn-rozl__info svg, .fjn-rozl__ok svg, .fjn-rozl__locked svg { flex: none; margin-top: 1px; }
.fjn-rozl__info { background: #E3ECF7; color: #173F6F; }
.fjn-rozl__ok { align-items: center; background: #E2F2E8; color: #1B6B41; }
.fjn-rozl__locked { padding: 12px 14px; background: #FDF1DC; color: #6B4000; font-size: 15px; }
.fjn-rozl__miss { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: #FDF1DC; color: #8A5300; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fjn-rozl__phone { border: 2px solid #C77700; }
.fjn-rozl__lines { gap: 10px; }
.fjn-rozl__line { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid #EDEFF1; }
.fjn-rozl__line > div { display: flex; gap: 10px; }
.fjn-rozl__line > div > span { flex: 1; min-width: 0; }
.fjn-rozl__line b { font-weight: 400; white-space: nowrap; }
.fjn-rozl__tag { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; background: #E3ECF7; color: #173F6F; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fjn-rozl__total { display: flex; gap: 10px; font-size: 15px; color: #454D57; }
.fjn-rozl__total > span:first-child { flex: 1; }
.fjn-rozl__total--statement { color: #173F6F; }
.fjn-rozl__rab { font-size: 13px; color: #1B6B41; } /* D193: „rabat partnera −10% (−16,00 zł)” */
.fjn-rozl__total--paid { color: #1B6B41; } /* D195: earlier payments */
.fjn-rozl__total--due { padding-top: 10px; border-top: 1px solid #D8DCE1; color: #15181C; font-size: 16px; font-weight: 700; }
.fjn-rozl__paidbefore { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: 8px; background: #E2F2E8; color: #1B6B41; font-size: 15px; }
.fjn-rozl__paidbefore .fjn-icon { flex: none; margin-top: 2px; }
.fjn-rozl__paidbefore > span { display: flex; flex-direction: column; gap: 4px; }
.fjn-rozl__paidbefore small { font-size: 14px; }
.fjn-rozl__bar { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.fjn-rozl__sum { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fjn-rozl__sum span { font-size: 13px; color: #454D57; }
.fjn-rozl__sum b { font-size: 22px; }
.fjn-rozl__bar .fjn-btn { min-height: 56px; }
.fjn-rozl__go:disabled { background: #C9CED4; border-color: #C9CED4; color: #5A626C; }
.fjn-rozl__bar--done { justify-content: flex-end; }
.fjn-rozl__donecard { gap: 16px; }
.fjn-rozl__donehead { display: flex; gap: 14px; align-items: center; }
.fjn-rozl__donehead > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.fjn-rozl__donehead b { font-size: 22px; }
.fjn-rozl__donehead small { font-size: 15px; color: #454D57; }
.fjn-rozl__check { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #E2F2E8; display: flex; align-items: center; justify-content: center; color: #1B6B41; }
.fjn-rozl__donelist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.fjn-rozl__donelist li { display: flex; gap: 8px; align-items: flex-start; }
.fjn-rozl__donelist svg { flex: none; margin-top: 2px; }
.fjn-rozl__todo { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #EDEFF1; }
.fjn-rozl__todo h2 { margin: 0; font: 700 13px var(--fjn-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #454D57; }
.fjn-rozl__todorow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 8px; background: #FDF1DC; color: #6B4000; }
.fjn-rozl__todorow > svg { flex: none; }
.fjn-rozl__todorow > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.fjn-rozl__todorow b { font-size: 16px; }
.fjn-rozl__todorow small { font-size: 14px; }
.fjn-rozl__todorow .fjn-btn { min-height: 56px; }
.fjn-rozl__dialog { width: min(560px, calc(100vw - 32px)); padding: 0; }
.fjn-rozl__dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px; border-bottom: 1px solid #EDEFF1; }
.fjn-rozl__dhead h2 { margin: 0; font-size: 19px; }
.fjn-rozl__dclose { flex: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; }
.fjn-rozl__dbody { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.fjn-rozl__dbody p { margin: 0; }
.fjn-rozl__vehicle { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid #D8DCE1; border-radius: 8px; }
.fjn-rozl__vehicle > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fjn-rozl__vehicle small { font-size: 13px; color: #454D57; }
.fjn-rozl__plate { flex: none; padding: 2px 8px; border: 2px solid var(--fjn-text); border-radius: 4px; font-weight: 700; }
.fjn-rozl__dfoot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #EDEFF1; }
.fjn-rozl__dfoot .fjn-btn { min-height: 56px; }
.fjn-rozl__dfoot .fjn-btn--primary { flex: 1; }
@media (max-width: 1279px) {
  .fjn-rozl > :not(.fjn-form-footer):not(dialog) { max-width: 960px; }
}
@media (max-width: 767px) {
  .fjn-rozl__head h1 { font-size: 22px; }
  .fjn-rozl__grid, .fjn-rozl__opts--3, .fjn-rozl__opts--2, .fjn-rozl__pair { grid-template-columns: minmax(0, 1fr); }
  .fjn-rozl__card { padding: 16px; }
  .fjn-rozl__bar .fjn-rozl__go { flex: 1; }
  .fjn-rozl__todorow .fjn-btn { flex: 1 1 100%; }
  .fjn-rozl__dialog { width: 100%; }
}
/* E3-03 (D183 (7), (8)): the step bar, the banner after the control, the „Płatność” chip */
.fjn-tvis__steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.fjn-tvis__steps li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13px; font-weight: 700; }
.fjn-tvis__steps .is-done { background: #E2F2E8; color: #1B6B41; }
.fjn-tvis__steps .is-now { background: var(--fjn-brand-600); color: #fff; }
.fjn-tvis__next { display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px 14px; border-radius: 8px; background: #E2F2E8; color: #1B6B41; font-size: 15px; }
.fjn-tvis__next svg { flex: none; }
.fjn-tvis__pay { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 700; }
.fjn-tvis__pay--success { background: #E2F2E8; color: #1B6B41; }
.fjn-tvis__pay--warning { background: #FDF1DC; color: #8A5300; }
.fjn-tvis__pay--danger { background: #FBE3E1; color: #8C1D18; }
/* E3-03: the centred card (980 px) — its bar fixed at the bottom from the side menu (D183 (7)) */
.fjn-tvis > .fjn-rozl__bar { position: fixed; left: var(--fjn-sidebar-w); right: 0; bottom: 0; margin: 0; z-index: 20; }
.fjn-tvis:has(> .fjn-rozl__bar) { padding-bottom: 104px; }
@media (max-width: 1279px) { .fjn-tvis > .fjn-rozl__bar { left: var(--fjn-rail-w); } }
@media (max-width: 767px) { .fjn-tvis > .fjn-rozl__bar { left: 0; bottom: var(--fjn-bottomnav-h); } }
/* D198: „⋯” on the card of a ready order — a menu with „Drukuj kartę pracy” */
.fjn-ocard__more { position: relative; }
.fjn-ocard__more > summary { list-style: none; cursor: pointer; width: 48px; height: 48px; padding: 0; justify-content: center; }
.fjn-ocard__more > summary::-webkit-details-marker { display: none; }
.fjn-ocard__more[open] > summary { border-color: var(--fjn-brand-600); background: var(--fjn-brand-50); }
.fjn-ocard__more-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 240px; padding: 6px; background: #fff; border: 1px solid var(--fjn-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(21, 24, 28, .12); }
.fjn-ocard__more-panel .fjn-menu-item { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 700; }
@media (max-width: 767px) {
  .fjn-ocard__ready:has(.fjn-ocard__more) { grid-template-columns: minmax(0, 1fr) auto; }
  .fjn-ocard__more > summary { width: 56px; height: 48px; }
}