/* ========================================================================== Receivables Tabulator grid — brand theme + advanced filter UI. Uses the app's design tokens (--color-*). Scoped to the grid / filter UI so it has no effect on other pages. ========================================================================== */ /* ---- výběr sloupců (tlačítko v hlavičce + panel) ----------------------- */ /* Tlačítko sedí na pravém kraji řádku hlavičky, přes poslední sloupec — stejně jako v seznamu v Odoo. Panel visí na (fixed), aby ho neořízlo overflow hlavičky ani tabulky. */ #finance-grid .tabulator-header, #zberna-grid .tabulator-header { position: relative; } .pdcz-hdr-tools { position: absolute; top: 0; right: 0; z-index: 12; height: 100%; display: flex; align-items: stretch; background: var(--color-surface-alt); } .pdcz-hdr-tools button { width: 30px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--color-on-surface-muted); font-size: 16px; cursor: pointer; } .pdcz-hdr-tools button:hover { color: var(--color-primary); } /* O viditelnosti přepínače karty/sloupce rozhoduje pdczViewToggle() v app.js: nabídne karty jen když tabulka přetéká do stran, zpáteční cestu ukazuje vždy. */ .pdcz-colpick { position: fixed; z-index: 60; display: none; min-width: 200px; max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-outline); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / 12%); } .pdcz-colpick.is-open { display: block; } .pdcz-colpick label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-family: var(--font-paragraph); font-size: 13px; color: var(--color-on-surface); white-space: nowrap; cursor: pointer; } .pdcz-colpick label:hover { background: var(--color-surface-alt); } .pdcz-colpick input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; } .pdcz-colpick label:has(input:disabled) { opacity: .5; cursor: not-allowed; } /* Nabídka polí platí v obou zobrazeních: ve sloupcích řídí sloupce, v kartách řádky pod jménem (cardLines() ve finance_grid.js). */ /* Klon sloupce, který se zrovna táhne. Tabulator mu dává rámeček dokola, jenže pravidlo pro .tabulator-col v hlavičce výš (border-right: none) je specifičtější, takže mu pravý okraj zase sebere a zbydou tři ze čtyř. Tady se vrací celý — a s ním stín, aby bylo poznat, že je sloupec zvednutý. */ #finance-grid .tabulator-header .tabulator-col.tabulator-moving, #zberna-grid .tabulator-header .tabulator-col.tabulator-moving { border: 1px solid var(--color-primary); border-radius: 6px; background: var(--color-surface); box-shadow: 0 6px 16px rgb(0 0 0 / 14%); } /* Mezera po zvednutém sloupci: bez toho je to prázdné místo a není vidět, kam spadne. */ #finance-grid .tabulator-header .tabulator-col.tabulator-col-placeholder, #zberna-grid .tabulator-header .tabulator-col.tabulator-col-placeholder { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--color-primary); opacity: .35; } /* Na dotyk širší cíl; na výšku ho drží řádek hlavičky, ta je nízká z principu. */ @media (pointer: coarse) { .pdcz-hdr-tools button { width: 44px; } .pdcz-colpick label { padding: 10px 8px; } } /* ---- Tabulator brand overrides --------------------------------------- */ /* NB: Tabulator turns the #finance-grid div itself into the .tabulator root, so root-level rules must use #finance-grid.tabulator (no space). */ #finance-grid.tabulator { background: transparent; border: none; font-family: var(--font-paragraph); font-size: 14px; } #finance-grid.tabulator:focus, #finance-grid.tabulator:focus-visible { outline: none; } #finance-grid.tabulator .tabulator-tableholder { border: none; outline: none; } #finance-grid.tabulator .tabulator-tableholder:focus { outline: none; } #finance-grid .tabulator-header { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-outline); } #finance-grid .tabulator-header .tabulator-col { background: var(--color-surface-alt); border-right: none; } #finance-grid .tabulator-header .tabulator-col-title { color: var(--color-on-surface-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } #finance-grid .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background: #f1ece4; } #finance-grid .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-title, #finance-grid .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-title { color: var(--color-primary); } #finance-grid .tabulator-row { border-bottom: 1px solid var(--color-outline); } #finance-grid .tabulator-row.tabulator-row-even { background: var(--color-surface); } #finance-grid .tabulator-row:hover { background: var(--color-surface-alt) !important; cursor: pointer; } #finance-grid .tabulator-row .tabulator-cell { border-right: none; padding: 10px 14px; color: var(--color-on-surface); } /* mono / numeric cell helpers used by the formatters */ #finance-grid .rec-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; } #finance-grid .rec-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-on-surface-strong); font-weight: 500; } #finance-grid .rec-attach { margin-left: 6px; color: var(--color-on-surface-muted); } /* ---- stacked secondary line (mobile only) --------------------------- */ #finance-grid .tab-sub, #zberna-grid .tab-sub { display: none; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--color-on-surface-muted); white-space: nowrap; } #finance-grid.compact .tab-sub, #zberna-grid.compact .tab-sub { display: block; } /* Zberňa má v podřádcích delší texty (jméno, poznámka), ať se zalomí místo uříznutí. Finanční mřížka si drží nowrap, tam jsou to krátké údaje a zalomení by je rozhodilo. */ #zberna-grid.compact .tab-sub { white-space: normal; } #finance-grid.compact .tabulator-row .tabulator-cell, #zberna-grid.compact .tabulator-row .tabulator-cell { white-space: normal; height: auto !important; } /* ---- Zberňa grid — same brand theme as pohledávky/závazky ------------ */ #zberna-grid.tabulator { background: transparent; border: none; font-family: var(--font-paragraph); font-size: 14px; } #zberna-grid.tabulator:focus, #zberna-grid.tabulator:focus-visible { outline: none; } #zberna-grid.tabulator .tabulator-tableholder { border: none; outline: none; } #zberna-grid.tabulator .tabulator-tableholder:focus { outline: none; } #zberna-grid .tabulator-header { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-outline); } #zberna-grid .tabulator-header .tabulator-col { background: var(--color-surface-alt); border-right: none; } #zberna-grid .tabulator-header .tabulator-col-title { color: var(--color-on-surface-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } #zberna-grid .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background: #f1ece4; } #zberna-grid .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-title, #zberna-grid .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-title { color: var(--color-primary); } #zberna-grid .tabulator-row { border-bottom: 1px solid var(--color-outline); } #zberna-grid .tabulator-row.tabulator-row-even { background: var(--color-surface); } #zberna-grid .tabulator-row:hover { background: var(--color-surface-alt) !important; } #zberna-grid .tabulator-row .tabulator-cell { border-right: none; padding: 10px 14px; color: var(--color-on-surface); } /* ========================================================================== Advanced filter UI (built by JS into #finance-grid-toolbar + #finance-grid-panel) ========================================================================== */ #finance-grid-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* global search field (search icon baked into the background) */ .pdcz-global { flex: 1 1 240px; min-width: 200px; height: 38px; padding: 0 12px 0 38px; background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 13px center; background-size: 16px; border: 1px solid var(--color-outline); border-radius: 10px; font-family: var(--font-paragraph); font-size: 14px; color: var(--color-on-surface-strong); outline: none; transition: border-color .15s, box-shadow .15s; } .pdcz-global::placeholder { color: var(--color-on-surface-muted); } .pdcz-global:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 78, 135, .15); } .pdcz-filter-toggle { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--color-outline); border-radius: 10px; background: var(--color-surface); color: var(--color-on-surface-strong); font-family: var(--font-paragraph); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; } .pdcz-filter-toggle:hover { background: var(--color-surface-alt); } .pdcz-filter-toggle.is-open { background: var(--color-surface-alt); } .pdcz-filter-toggle.is-active { border-color: var(--color-primary); color: var(--color-primary); } .pdcz-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .pdcz-filter-clear { height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--color-error); font-family: var(--font-paragraph); font-size: 13px; font-weight: 600; cursor: pointer; } .pdcz-filter-clear:hover { background: var(--color-error-soft-bg); } /* Našeptávač se nenačetl — psaním se filtrovat dá dál, jen to musí být vidět. */ .pdcz-fnote { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--color-warning-light-bg); border: 1px solid var(--color-warning-light-border); color: var(--color-warning-soft-text); font-size: 13px; line-height: 1.4; } .pdcz-fgrid { background: var(--color-surface-alt); border: 1px solid var(--color-outline); border-radius: 16px; padding: 16px; display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .pdcz-fcol { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pdcz-fcol > label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-on-surface-muted); } .pdcz-fcol input, .pdcz-fcol select { height: 34px; padding: 0 10px; border: 1px solid var(--color-outline); border-radius: 8px; background: var(--color-surface); font-family: var(--font-paragraph); font-size: 13px; color: var(--color-on-surface-strong); outline: none; min-width: 0; width: 100%; } .pdcz-fcol input:focus, .pdcz-fcol select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47, 78, 135, .12); } .pdcz-fcol--wide { grid-column: 1 / -1; } /* branded autocomplete combobox (company / type filters) */ .pdcz-combo { position: relative; } .pdcz-fcol .pdcz-combo-input { padding-right: 30px; background-color: var(--color-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808690' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; } .pdcz-combo-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 244px; overflow-y: auto; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-outline); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); } .pdcz-combo-menu[hidden] { display: none; } .pdcz-combo-opt { padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--color-on-surface); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdcz-combo-opt:hover, .pdcz-combo-opt.is-active { background: var(--color-surface-alt); } .pdcz-combo-opt mark { background: transparent; color: var(--color-primary); font-weight: 600; } .pdcz-combo-empty { padding: 8px 10px; font-size: 12px; color: var(--color-on-surface-muted); } /* combobox as used inside the zberna post-upload modal (matches its inputs) */ .zb-combo .pdcz-combo-input { width: 100%; padding: 8px 30px 8px 12px; border: 1px solid var(--color-outline); border-radius: 12px; background-color: var(--color-surface-alt); font-family: var(--font-paragraph); font-size: 14px; color: var(--color-on-surface); outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808690' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; } .zb-combo .pdcz-combo-input:focus { border-color: var(--color-primary); } .zb-combo .pdcz-combo-input::placeholder { color: var(--color-on-surface-muted); } .pdcz-toggles { display: flex; flex-wrap: wrap; gap: 6px; } .pdcz-toggle { padding: 6px 12px; border: 1px solid var(--color-outline); border-radius: 999px; background: var(--color-surface); color: var(--color-on-surface); font-family: var(--font-paragraph); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .pdcz-toggle:hover { background: var(--color-surface-alt); } .pdcz-toggle.is-on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* "Všechny" = žádný filtr: v aktivním stavu jen ztiší, ať nevypadá jako zapnutý filtr. */ .pdcz-toggle--all.is-on { background: var(--color-surface-alt); color: var(--color-on-surface-strong); border-color: var(--color-on-surface-muted); font-weight: 600; } .pdcz-frow { display: flex; align-items: center; gap: 6px; } .pdcz-frow select { flex: 0 0 auto; width: auto; } .pdcz-frow input { flex: 1 1 0; } .pdcz-dsep { color: var(--color-on-surface-muted); flex: 0 0 auto; } @media (max-width: 640px) { .pdcz-global { flex: 1 1 100%; min-width: 0; } .pdcz-filter-toggle { flex: 1 1 auto; } .pdcz-fgrid { grid-template-columns: 1fr; } } /* ---- klikací karty → filtr stavu v tabulce --------------------------- Řádky karty stárnutí a KPI dlaždice (data-filter-status) jsou tlačítka; .is-on jim nastavuje refreshChrome() ve finance_grid.js podle stavu filtru. */ .aging-band { border: none; background: transparent; font: inherit; color: inherit; padding: 5px 8px; margin: -5px -8px; border-radius: 10px; cursor: pointer; transition: background-color .12s; } .aging-band:hover { background: var(--color-surface-alt); } .aging-band:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .aging-band.is-on { background: var(--color-primary-soft-bg); box-shadow: inset 0 0 0 1px var(--color-primary); } /* Reset tlačítka žije v @layer base: rámečky (vč. responzivních variant z input.css) tak dál řídí vrstvené .kpi-cell z components — nevrstvený reset by je přebil a na mobilu by zmizely oddělovače buněk. */ @layer base { .kpi-cell--filter { border: 0 solid var(--color-outline); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; } } .kpi-cell--filter:hover { background-color: var(--color-surface-alt); } .kpi-cell--filter:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* Podtržení místo rámečku: buňka je hranatá uvnitř zaobleného pásu (overflow hidden), takže rámeček se s rohy pásu míjel — linka dole nemá co minout. */ .kpi-cell--filter.is-on { background: var(--color-primary-soft-bg); box-shadow: inset 0 -3px 0 var(--color-primary); } .kpi-cell--filter:hover .kpi-cell-arrow, .kpi-cell--filter.is-on .kpi-cell-arrow { color: var(--color-primary); opacity: 1; } /* ---- sort indicators: dim inactive, navy active ---------------------- */ #finance-grid .tabulator-col .tabulator-col-sorter .tabulator-arrow { opacity: .3; } #finance-grid .tabulator-col[aria-sort="ascending"] .tabulator-arrow, #finance-grid .tabulator-col[aria-sort="descending"] .tabulator-arrow { opacity: 1; border-bottom-color: var(--color-primary) !important; border-top-color: var(--color-primary) !important; } /* ---- loading state --------------------------------------------------- Progress is signalled by the app-wide top bar (.loading-progress), never by a grid-local spinner — that would be a second indicator racing the bar, and Tabulator's own alert box is disabled (dataLoader: false). The grid area shows skeleton rows in the real column rhythm instead, delayed 260ms so a warm load (~10ms) goes straight to rows with no flash of grey. It overlays the grid rather than living inside it: Tabulator replaces its own element's contents on build, which happens before the first page of rows has arrived — a skeleton inside would blink out and leave an empty table. */ /* Holds the grid area open before Tabulator exists. Until it builds, #finance-grid is an empty div and the absolutely-positioned skeleton would size against a 0-height box — invisible for exactly the cold load it is there to cover, then a 0 -> 70vh jump. Self-disabling: Tabulator adds .tabulator and the inline height in the same statement. */ #finance-grid:not(.tabulator) { display: block; min-height: 70vh; } #finance-grid-skeleton { position: absolute; inset: 0; z-index: 1; background: var(--color-surface); overflow: hidden; animation: rec-skel-in .2s ease .26s both; } /* An animation, not a transition: a transition set in the same style change that cancels the running animation never starts, so the skeleton would snap out. */ #finance-grid-skeleton.is-gone { animation: rec-skel-out .25s ease both; pointer-events: none; } @keyframes rec-skel-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rec-skel-out { to { opacity: 0; } } .rec-skel-head, .rec-skel-row { display: grid; grid-template-columns: 1.2fr 2.4fr 2fr 1fr 1.2fr 1.2fr 1fr 130px; gap: 14px; align-items: center; padding: 15px 14px; border-bottom: 1px solid var(--color-outline); } /* stands in for the column-title row, so its arrival does not shift the rows */ .rec-skel-head { background: var(--color-surface-alt); padding: 12px 14px; } .rec-skel-head .rec-skel { height: 8px; width: 60%; background: var(--color-outline); animation: none; /* headers don't shimmer */ } .rec-skel { height: 11px; border-radius: 999px; background: linear-gradient(90deg, var(--color-surface-alt) 25%, color-mix(in srgb, var(--color-outline) 70%, var(--color-surface-alt)) 37%, var(--color-surface-alt) 63%); background-size: 400% 100%; animation: rec-shimmer 1.4s ease-in-out infinite; } /* each row a beat behind the one above, so the shimmer reads as a wave */ .rec-skel-row:nth-child(2n) .rec-skel { animation-delay: .12s; } .rec-skel-row:nth-child(3n) .rec-skel { animation-delay: .24s; } /* the wider columns get a shorter bar, so it doesn't read as a solid block */ .rec-skel-row .rec-skel:nth-child(2) { width: 78%; } .rec-skel-row .rec-skel:nth-child(3) { width: 64%; } .rec-skel-row .rec-skel:nth-child(6) { width: 70%; justify-self: end; } @keyframes rec-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } } /* The real rows fade in over the skeleton they replace. */ #finance-grid.is-ready { animation: rec-rows-in .28s ease both; } @keyframes rec-rows-in { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { /* mirrors the compact grid: only Odběratel + Částka survive */ .rec-skel-head, .rec-skel-row { grid-template-columns: 2.4fr 1.2fr; } .rec-skel-head .rec-skel:nth-child(n+3), .rec-skel-row .rec-skel:nth-child(n+3) { display: none; } } @media (prefers-reduced-motion: reduce) { .rec-skel { animation: none; } #finance-grid.is-ready { animation: none; } } /* Only the error alert survives, restyled off Tabulator's white-box default. */ #finance-grid .tabulator-alert { background: color-mix(in srgb, var(--color-surface) 70%, transparent); } #finance-grid .tabulator-alert-msg { display: inline-flex; align-items: center; border: 1px solid var(--color-error); border-radius: 9999px; background: var(--color-surface); color: var(--color-error); font-size: 14px; font-weight: 500; padding: 10px 20px; box-shadow: 0 4px 24px rgb(0 0 0 / .08); } /* ---- compact (mobile) spacing --------------------------------------- */ #finance-grid.compact .tabulator-row .tabulator-cell, #zberna-grid.compact .tabulator-row .tabulator-cell { padding: 12px 14px; } #finance-grid.compact .tab-sub, #zberna-grid.compact .tab-sub { margin-top: 4px; line-height: 1.5; }