:root { color-scheme: light; --bg: #eef1f6; --card: #ffffff; --text: #16202e; --muted: #5b6675; --accent: #2563eb; --accent-soft: #eff4ff; --accent-border: #cdddf7; --border: #e3e7ee; --border-strong: #d3d9e3; --ok: #067647; --ok-bg: #e7f7ee; --ok-border: #bfe6c9; --warn: #b54708; --warn-bg: #fef4e2; --warn-border: #f3d9a8; --err: #b42318; --err-bg: #fdECEA; --err-border: #f3c9c4; --row-alt: #f7f9fc; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --shadow-lg: 0 4px 12px rgba(16,24,40,.08); /* Elementy wcześniej zakodowane na sztywno — w jasnym motywie wartości bez zmian */ --nav-bg: #0d1524; --nav-fg: #b8c2d1; --nav-fg-hover: #ffffff; --nav-fg-strong: #ffffff; --nav-divider: #33415e; --thead-bg: #f4f6fa; --thead-fg: #55606f; --thead-hover-bg: #eef2f9; --thead-nested-bg: #e6ebf3; --total-bg: #0d1524; --total-fg: #ffffff; --row-group-bg: #e9edf4; --row-nested-bg: #eef2f8; --input-bg: #ffffff; --btn-fg: #ffffff; --track-bg: #dfe6f1; --ring: rgba(0,0,0,.15); --badge-neutral-bg: #eef0f3; --badge-cat-bg: #edf1f7; --badge-cat-fg: #3a4657; --badge-cat-border: #e0e6ee; } /* ===== Ciemny motyw ===== Aktywny gdy resolver ustawi . Kolory akcentów są rozjaśnione dla kontrastu na ciemnym tle; --btn-fg jest CIEMNY, bo tekst leży na jasnym akcencie (kontrast WCAG). */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0f141b; --card: #171d27; --text: #e7ebf2; --muted: #9aa5b4; --accent: #5b93ff; --accent-soft: #17233b; --accent-border: #26436b; --border: #262e3a; --border-strong: #38424f; --ok: #45d17f; --ok-bg: #10261a; --ok-border: #1c4a2e; --warn: #f0a94a; --warn-bg: #2a1f0e; --warn-border: #4a3718; --err: #ff6b5e; --err-bg: #2a1512; --err-border: #4d241f; --row-alt: #1b222d; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 4px 14px rgba(0,0,0,.55); --nav-bg: #0b0f16; --nav-fg: #b8c2d1; --nav-fg-hover: #ffffff; --nav-fg-strong: #ffffff; --nav-divider: #2a3547; --thead-bg: #1e2530; --thead-fg: #9aa5b4; --thead-hover-bg: #232b38; --thead-nested-bg: #202834; --total-bg: #223047; --total-fg: #eef2f8; --row-group-bg: #1c2431; --row-nested-bg: #1a212c; --input-bg: #12181f; --btn-fg: #0f141b; --track-bg: #2a3340; --ring: rgba(255,255,255,.15); --badge-neutral-bg: #232b38; --badge-cat-bg: #202a38; --badge-cat-fg: #b7c3d4; --badge-cat-border: #313c4c; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } /* Skrót klawiaturowy jest niewidoczny w zwykłej obsłudze i pojawia się po Tab. */ .skip-link { position: fixed; top: .6rem; left: .6rem; z-index: 100; padding: .6rem .9rem; border-radius: 8px; background: var(--accent); color: var(--btn-fg); font-weight: 700; transform: translateY(calc(-100% - 1rem)); transition: transform .12s; } .skip-link:focus { transform: translateY(0); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ===== Nawigacja ===== */ nav { display: flex; align-items: center; gap: .45rem; background: var(--nav-bg); padding: .7rem 1.1rem; flex-wrap: wrap; box-shadow: var(--shadow); } nav a { color: var(--nav-fg); text-decoration: none; font-weight: 500; font-size: .9rem; transition: color .12s; } nav a:hover { color: var(--nav-fg-hover); } nav a.nav-active { color: var(--nav-fg-strong); background: rgba(91,147,255,.16); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 6px; padding: .32rem .5rem; margin: -.32rem -.5rem; } nav .brand { display: flex; align-items: center; gap: .55rem; margin-right: .4rem; } nav .brand img { height: 30px; width: auto; display: block; } nav .brand .brand-app { color: var(--nav-fg-strong); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; border-left: 1px solid var(--nav-divider); padding-left: .55rem; } nav .spacer { flex: 1; } /* Na desktopie wrapper jest „przezroczysty" — linki zachowują się jak dotąd (brand, linki i spacer to nadal bezpośrednie elementy flex nawigacji). */ nav .nav-links { display: contents; } /* Hamburger — widoczny dopiero na wąskich ekranach (patrz media query). */ nav .nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--nav-divider); border-radius: 8px; color: var(--nav-fg); padding: .34rem .5rem; cursor: pointer; line-height: 0; transition: color .12s, border-color .12s, background .12s; } nav .nav-toggle svg { width: 22px; height: 22px; display: block; } nav .nav-toggle:hover { color: var(--nav-fg-hover); border-color: var(--nav-fg); background: rgba(255,255,255,.06); } nav .nav-toggle[aria-expanded="true"] { color: var(--nav-fg-strong); border-color: var(--accent); background: rgba(91,147,255,.18); } nav .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-backdrop { position: fixed; inset: 0; z-index: 29; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(3,8,15,.58); cursor: default; } /* Rzadziej używane narzędzia nie rozciągają stale głównego paska. */ nav .nav-more { position: relative; color: var(--nav-fg); font-size: .9rem; } nav .nav-more summary { display: flex; align-items: center; gap: .3rem; list-style: none; color: inherit; cursor: pointer; font-weight: 500; white-space: nowrap; } nav .nav-more summary::-webkit-details-marker { display: none; } nav .nav-more summary::after { content: "▾"; font-size: .7rem; transition: transform .12s; } nav .nav-more[open] summary::after { transform: rotate(180deg); } nav .nav-more summary:hover, nav .nav-more-active summary { color: var(--nav-fg-hover); } nav .nav-more-active summary { background: rgba(91,147,255,.16); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 6px; padding: .32rem .5rem; margin: -.32rem -.5rem; } nav .nav-more-menu { position: absolute; top: calc(100% + .65rem); right: 0; z-index: 40; display: grid; min-width: 11rem; padding: .4rem; background: var(--nav-bg); border: 1px solid var(--nav-divider); border-radius: 9px; box-shadow: var(--shadow-lg); } nav .nav-more:not([open]) .nav-more-menu { display: none; } nav .nav-more-menu a { display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; border-radius: 6px; white-space: nowrap; } nav .nav-more-icon { width: 1rem; height: 1rem; flex: 0 0 auto; } nav .nav-more-summary-icon { width: 1rem; height: 1rem; flex: 0 0 auto; } nav .nav-more-menu a:hover { background: rgba(255,255,255,.06); text-decoration: none; } nav a.nav-upload-link { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .55rem; border: 1px solid var(--nav-divider); border-radius: 7px; background: rgba(91,147,255,.08); white-space: nowrap; } nav a.nav-upload-link:hover { border-color: var(--accent); background: rgba(91,147,255,.16); } nav a.nav-upload-link.nav-active { margin: 0; padding: .32rem .55rem; border-color: var(--accent); } nav .nav-upload-icon { width: 1rem; height: 1rem; flex: 0 0 auto; } nav .nav-settings-link { display: inline-flex; align-items: center; gap: .4rem; } nav .nav-settings-icon { width: 1rem; height: 1rem; flex: 0 0 auto; } /* ===== Przełącznik motywu ===== */ button.theme-toggle { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--nav-divider); border-radius: 8px; color: var(--nav-fg); font-size: .86rem; font-weight: 500; font-family: inherit; padding: .32rem .62rem; cursor: pointer; line-height: 1; transition: color .12s, border-color .12s, background .12s; } button.theme-toggle:hover { color: var(--nav-fg-hover); border-color: var(--nav-fg); background: rgba(255,255,255,.06); } button.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button.theme-toggle svg { width: 16px; height: 16px; display: block; } /* pokazuj tylko ikonę pasującą do bieżącego wyboru */ button.theme-toggle .ti { display: none; } :root[data-theme-mode="system"] button.theme-toggle .ti-system, :root[data-theme-mode="light"] button.theme-toggle .ti-light, :root[data-theme-mode="dark"] button.theme-toggle .ti-dark { display: block; } main { max-width: 1720px; margin: 1.6rem auto; padding: 0 1.4rem; } h1 { font-size: 1.5rem; margin: 0 0 1.2rem; letter-spacing: -.02em; } h2 { font-size: 1.02rem; margin: 0 0 .9rem; letter-spacing: -.01em; } /* ===== Karty ===== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.4rem; margin-bottom: 1.3rem; box-shadow: var(--shadow); } /* ===== Kafelki statystyk ===== */ .grid { display: grid; gap: 1rem; } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .dashboard-section + .dashboard-section { margin-top: 1.15rem; } .dashboard-section-title { margin: 0 0 .55rem; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .dashboard-finance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-service-status { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; margin: .85rem 0 0; padding: .65rem .8rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); } .dashboard-service-name { font-size: .85rem; font-weight: 700; } .dashboard-service-check { color: var(--muted); font-size: .8rem; } .dashboard-service-meta { margin-left: auto; color: var(--muted); font-size: .82rem; } .dashboard-service-details { margin-left: auto; color: var(--muted); font-size: .82rem; } .dashboard-service-details > summary { display: inline-flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer; color: var(--accent); font-weight: 650; } .dashboard-service-details > summary::-webkit-details-marker { display: none; } .dashboard-service-details > summary::before { content: ""; width: .42rem; height: .42rem; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .14s ease; } .dashboard-service-details[open] > summary::before { transform: rotate(45deg); } .dashboard-service-details[open] { flex: 1 1 100%; margin-left: 0; } .dashboard-service-details .dashboard-service-meta { display: block; margin: .35rem 0 0; } .dashboard-service-error { flex: 1 1 100%; color: var(--err); font-size: .82rem; } .dashboard-queue-heading { margin-bottom: .85rem; } .dashboard-queue-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; } .dashboard-queue-title h2 { margin: 0; } .dashboard-queue-count { min-width: 1.7rem; padding-inline: .45rem; text-align: center; color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); } .dashboard-queue-heading p { margin: 0; font-size: .85rem; } .dashboard-queue-table-wrap { overflow-x: hidden; overflow-y: auto; } .dashboard-queue-table { width: 100%; table-layout: fixed; } .dashboard-queue-col-date { width: 8%; } .dashboard-queue-col-number { width: 12%; } .dashboard-queue-col-supplier { width: 13%; } .dashboard-queue-col-description { width: 14%; } .dashboard-queue-col-net { width: 9%; } .dashboard-queue-col-gross { width: 9%; } .dashboard-queue-col-category { width: 11%; } .dashboard-queue-col-project { width: 24%; } .dashboard-queue-table > thead > tr > th, .dashboard-queue-table > tbody > tr > td { min-width: 0; padding-inline: .5rem; } .dashboard-queue-table > tbody > tr > td { font-size: .8rem; } .dashboard-queue-table .dashboard-queue-number, .dashboard-queue-table .badge { overflow-wrap: anywhere; } .dashboard-queue-table .badge { max-width: 100%; white-space: normal; } .dashboard-queue-table .invoice-assignment-form { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; width: 100%; gap: .3rem; } .dashboard-queue-table select.assign { width: 100%; min-width: 0; max-width: none; } .dashboard-queue-table .invoice-assignment-submit { padding-inline: .45rem; } .dashboard-empty-state { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 10px; } .dashboard-empty-state p { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; } .dashboard-empty-icon { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; color: var(--card); background: var(--ok); border-radius: 50%; font-size: 1.1rem; font-weight: 800; } .dashboard-recent-heading { margin-bottom: .9rem; } .dashboard-recent-heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; } .dashboard-recent-title { display: flex; align-items: center; gap: .5rem; } .dashboard-recent-title h2 { margin: 0; } .dashboard-recent-count { min-width: 1.7rem; padding-inline: .45rem; text-align: center; color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); } .dashboard-recent-description { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; } .dashboard-recent-all { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-size: .84rem; font-weight: 700; white-space: nowrap; } .dashboard-recent-table { width: 100%; table-layout: fixed; } .dashboard-recent-col-date { width: 10%; } .dashboard-recent-col-document { width: 27%; } .dashboard-recent-col-state { width: 29%; } .dashboard-recent-col-amounts { width: 20%; } .dashboard-recent-col-category { width: 14%; } .dashboard-recent-table td { min-width: 0; } .dashboard-recent-document > a { font-weight: 700; } .dashboard-recent-secondary, .dashboard-recent-project { display: block; margin-top: .28rem; overflow: hidden; color: var(--muted); font-size: .8rem; line-height: 1.35; text-overflow: ellipsis; } .dashboard-recent-project a { font-weight: 650; } .dashboard-recent-amounts { white-space: nowrap; } .dashboard-recent-amounts > span { display: flex; align-items: baseline; justify-content: space-between; gap: .55rem; } .dashboard-recent-amounts > span + span { margin-top: .2rem; } .dashboard-recent-amounts small { color: var(--muted); font-size: .72rem; } .dashboard-recent-amounts strong { font-size: .82rem; font-variant-numeric: tabular-nums; } .payments-table-wrap { overflow-x: hidden; overflow-y: auto; } .payments-table { width: 100%; table-layout: fixed; } .payments-table .payments-col-due { width: 9%; } .payments-table .payments-col-issued { width: 7%; } .payments-table .payments-col-number { width: 11%; } .payments-table .payments-col-supplier { width: 14%; } .payments-table .payments-col-description { width: 15%; } .payments-table .payments-col-net, .payments-table .payments-col-vat { width: 8%; } .payments-table .payments-col-gross { width: 10%; } .payments-table .payments-col-actions { width: 18%; } .payments-table-paid .payments-col-actions { width: 10%; } .payments-table-paid .payments-col-paid { width: 8%; } .payments-table > thead > tr > th, .payments-table > tbody > tr > td { min-width: 0; padding-inline: .45rem; font-size: .82rem; } .payments-table > tbody > tr > td:nth-child(3) { overflow-wrap: anywhere; } .payments-table .actions-cell { white-space: normal !important; } .payments-table .actions-cell form { display: inline-block; margin: .12rem 0; } .payments-table .actions-cell button { padding: .42rem .48rem; font-size: .75rem; } .payments-table .actions-cell input[type="date"] { max-width: 100%; } .payments-table .payments-actions-sticky { min-width: 0; box-shadow: none; } .payments-table th.payments-actions-sticky { z-index: 4; background: var(--thead-bg); } .payments-table td.payments-actions-sticky { z-index: 1; background: var(--card); } .payments-table tbody tr:nth-child(even) td.payments-actions-sticky { background: var(--row-alt); } .payments-table tbody tr:hover td.payments-actions-sticky { background: var(--accent-soft); } .invoice-table-hint { display: none; align-items: center; gap: .35rem; margin: 0 0 .35rem; color: var(--muted); font-size: .8rem; } .invoice-table-hint span { color: var(--accent); font-size: 1rem; font-weight: 700; } .income-table-hint { display: none; align-items: center; gap: .35rem; margin: 0 0 .35rem; color: var(--muted); font-size: .8rem; } .income-table-hint span { color: var(--accent); font-size: 1rem; font-weight: 700; } .income-table-wrap, .income-corrections-table-wrap { overflow-x: hidden; overflow-y: auto; } .income-table, .income-corrections-table { width: 100%; table-layout: fixed; } .income-table .income-col-due { width: 10%; } .income-table .income-col-issued { width: 8%; } .income-table .income-col-number { width: 12%; } .income-table .income-col-buyer { width: 13%; } .income-table .income-col-description { width: 14%; } .income-table .income-col-net { width: 8%; } .income-table .income-col-vat { width: 7%; } .income-table .income-col-gross { width: 10%; } .income-table .income-col-actions { width: 18%; } .income-table-paid .income-col-paid { width: 8%; } .income-table-paid .income-col-buyer { width: 11%; } .income-table-paid .income-col-description { width: 11%; } .income-table-paid .income-col-actions { width: 15%; } .income-corrections-table .income-correction-col-issued { width: 8%; } .income-corrections-table .income-correction-col-number { width: 14%; } .income-corrections-table .income-correction-col-supplier { width: 12%; } .income-corrections-table .income-correction-col-description { width: 17%; } .income-corrections-table .income-correction-col-net { width: 9%; } .income-corrections-table .income-correction-col-gross { width: 11%; } .income-corrections-table .income-correction-col-project { width: 11%; } .income-corrections-table .income-correction-col-actions { width: 18%; } .income-table > thead > tr > th, .income-table > tbody > tr > td, .income-corrections-table > thead > tr > th, .income-corrections-table > tbody > tr > td { min-width: 0; padding-inline: .45rem; font-size: .8rem; } .income-table td:nth-child(3), .income-corrections-table td:nth-child(2) { overflow-wrap: anywhere; } .income-table > tbody > tr > td:first-child { white-space: normal; line-height: 1.35; } .income-table > tbody > tr > td:first-child > .muted { display: inline-block; font-size: .72rem; white-space: nowrap; } .income-actions-sticky { min-width: 0; box-shadow: none; } .income-table .income-actions-sticky { min-width: 0; } .income-corrections-table .income-actions-sticky { min-width: 0; } .income-table .actions-cell form { display: inline-flex; gap: .25rem; } .income-table .actions-cell button { padding: .42rem .48rem; font-size: .75rem; } .income-table-paid .actions-cell form { display: block; width: 100%; } .income-table-paid .actions-cell button { width: 100%; white-space: normal; } .income-corrections-table .actions-cell { white-space: normal !important; } .income-corrections-table .actions-cell form { display: block; margin: .18rem 0; } .income-corrections-table .actions-cell button { width: 100%; padding: .42rem .35rem; font-size: .72rem; white-space: normal; } .income-correction-date-row { display: grid; gap: .25rem; margin-bottom: .28rem; } .income-correction-date-row input, .income-correction-date-row button { width: 100%; min-width: 0; } .income-correction-date-toggle { font-size: .76rem; } th.income-actions-sticky { z-index: 4; background: var(--thead-bg); } td.income-actions-sticky { z-index: 1; background: var(--card); } tbody tr:nth-child(even) td.income-actions-sticky { background: var(--row-alt); } tbody tr:hover td.income-actions-sticky { background: var(--accent-soft); } .income-corrections-table-hint { display: none; align-items: center; gap: .35rem; margin: 1rem 0 -.65rem; color: var(--muted); font-size: .8rem; } .income-corrections-table-hint span { color: var(--accent); font-size: 1rem; font-weight: 700; } .income-correction-confirm-note { margin: .65rem 0 .4rem; font-size: .82rem; } .income-corrections-settled { margin-top: .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); padding: .7rem .85rem; } .income-corrections-settled > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .income-corrections-settled > p { margin: .45rem 0 .65rem; } .income-corrections-settled-table { width: 100%; } .income-corrections-settled-table .actions-cell { white-space: nowrap; } .analytics-table-hint { display: none; align-items: center; gap: .35rem; margin: 0 0 .35rem; color: var(--muted); font-size: .8rem; } .analytics-table-hint span { color: var(--accent); font-size: 1rem; font-weight: 700; } .analytics-overview-table-wrap { overflow-x: hidden; overflow-y: auto; } .analytics-overview-table { width: 100%; table-layout: fixed; } .analytics-overview-table .analytics-col-material { width: 28%; } .analytics-overview-table .analytics-col-unit { width: 5%; } .analytics-overview-table .analytics-col-quantity { width: 8%; } .analytics-overview-table .analytics-col-net, .analytics-overview-table .analytics-col-gross { width: 10%; } .analytics-overview-table .analytics-col-min, .analytics-overview-table .analytics-col-avg, .analytics-overview-table .analytics-col-max { width: 9%; } .analytics-overview-table .analytics-col-spread { width: 7%; } .analytics-overview-table .analytics-col-counts { width: 5%; } .analytics-overview-table > thead > tr > th, .analytics-overview-table > tbody > tr > td { min-width: 0; padding-inline: .45rem; font-size: .8rem; } .analytics-overview-table .analytics-material-sticky { position: static; box-shadow: none; overflow-wrap: anywhere; } .analytics-overview-table > tbody > tr > td:last-child { white-space: normal; } .project-material-table-hint { display: none; align-items: center; gap: .35rem; margin: 0 0 .35rem; color: var(--muted); font-size: .8rem; } .project-material-table-hint span { color: var(--accent); font-size: 1rem; font-weight: 700; } .project-material-count-heading .sort-button { width: 4.75rem; white-space: normal; line-height: 1.2; } .project-material-cost-heading .sort-button { width: 4.25rem; white-space: normal; line-height: 1.2; } .project-material-quantity-heading .sort-button { width: 4.75rem; white-space: normal; line-height: 1.2; } .payments-whitelist { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .75rem; margin: 0 0 .9rem; } .payments-whitelist button { white-space: nowrap; } .payments-whitelist-info { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; min-width: 0; color: var(--muted); font-size: .85rem; line-height: 1.45; } .payments-whitelist-count { color: var(--text); white-space: nowrap; } .payments-whitelist-help > summary { cursor: pointer; color: var(--accent); } .payments-whitelist-help > summary::marker { color: var(--accent); } .payments-whitelist-help p { margin: .35rem 0 0; max-width: 52rem; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.3rem; box-shadow: var(--shadow); position: relative; overflow: hidden; } .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: .85; } .stat.ok::before { background: var(--ok); } .stat.warn::before { background: var(--warn); } .stat.err::before { background: var(--err); } /* Kwoty milionowe („1 716 486,40 zł") nie mieściły się w kafelku i były UCINANE: .stat ma overflow:hidden (zaokrąglone rogi + pasek z lewej), a separatorem tysięcy jest spacja nierozdzielająca, więc liczba to jeden nierozerwalny blok i nie miała jak się zawinąć. Bazowy rozmiar jest więc taki, żeby mieściła się zawsze; tam gdzie działają zapytania kontenerowe, cyfry skalują się do SZEROKOŚCI KAFELKA (a nie okna) i na szerokich kafelkach wracają do 1.75rem. */ .stat .num { font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } @supports (container-type: inline-size) { .stat { container-type: inline-size; } .stat .num { font-size: clamp(1.05rem, 7.4cqi, 1.75rem); } } .stat .label { color: var(--muted); font-size: .82rem; margin-top: .15rem; } .stat.wide { grid-column: span 2; } .stat-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; } .stat-link:hover { transform: translateY(-1px); border-color: var(--accent-border); box-shadow: var(--shadow-lg); } .stat-link .stat-action { display: inline-flex; align-items: center; align-self: flex-start; gap: .3rem; margin-top: auto; padding-top: .45rem; color: var(--accent); font-size: .78rem; font-weight: 700; } .stat-action-icon { width: .9rem; height: .9rem; flex: 0 0 auto; } .stat-empty { display: flex; flex-direction: column; } .stat-action-empty { margin-top: auto; padding-top: .45rem; color: var(--muted); font-size: .78rem; font-weight: 650; } .dashboard-money-title { display: flex; align-items: center; gap: .5rem; color: var(--text); font-size: .9rem; font-weight: 700; } .dashboard-money-count { display: inline-grid; place-items: center; min-width: 1.55rem; height: 1.55rem; padding: 0 .35rem; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: .78rem; } .dashboard-money-count-income { background: var(--ok-bg); color: var(--ok); } .dashboard-money-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .6rem; } .dashboard-money-values-single { grid-template-columns: minmax(0, 1fr); } .dashboard-money-value span { display: block; margin-bottom: .12rem; color: var(--muted); font-size: .75rem; } .dashboard-money-value strong { color: var(--text); font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* ===== Tabele ===== */ .table-wrap { overflow: auto; max-height: 76vh; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); } table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); } thead th { position: sticky; top: 0; z-index: 2; background: var(--thead-bg); color: var(--thead-fg); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; text-align: left; padding: .8rem .95rem; white-space: nowrap; border-bottom: 2px solid var(--border-strong); user-select: none; } /* Nagłówki mogą się łamać na dwie linie — bez tego kolumna była szeroka jak jej etykieta („Termin płatności", „Do zapłaty (brutto)"), choć treść pod spodem jest krótka. Kosztuje kilkadziesiąt pikseli wysokości NAGŁÓWKA (raz), a oszczędza ~120 px szerokości, dzięki czemu lista mieści się bez przewijania w poziomie. Celowo tylko dla wskazanych tabel, żeby nie zmieniać wyglądu pozostałych. */ table.head-wrap thead th { white-space: normal; } th.sortable:hover, th:has(.sort-link):hover { color: var(--accent); background: var(--thead-hover-bg); } .sort-button, .sort-link { display: inline-flex; align-items: center; gap: .3rem; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; white-space: inherit; cursor: pointer; box-shadow: none; } th.right .sort-button, th.right .sort-link { justify-content: flex-end; } .sort-button:hover, .sort-link:hover { color: var(--accent); background: transparent; filter: none; box-shadow: none; text-decoration: none; } .sort-button:focus-visible, .sort-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .sort-button::after, .sort-link::after { content: "↕"; color: var(--muted); font-size: .75rem; opacity: 0; transform: translateX(-.15rem); transition: opacity .12s, transform .12s; } .sort-button:hover::after, .sort-link:hover::after, .sort-button:focus-visible::after, .sort-link:focus-visible::after { opacity: .65; transform: translateX(0); } th.sort-asc .sort-button::after, th.sort-asc .sort-link::after { content: "▲"; color: var(--accent); opacity: 1; font-size: .62rem; } th.sort-desc .sort-button::after, th.sort-desc .sort-link::after { content: "▼"; color: var(--accent); opacity: 1; font-size: .62rem; } tbody td { padding: .78rem .95rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .95rem; line-height: 1.45; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) td { background: var(--row-alt); } tbody tr:hover td { background: var(--accent-soft); } .right { text-align: right; } .num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-feature-settings: "tnum"; font-weight: 570; color: var(--text); } td.date-cell { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; } td.clip { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .total-row td { background: var(--total-bg) !important; color: var(--total-fg); font-weight: 700; font-size: .95rem; border: 0; } tr.year-row td { background: var(--row-group-bg) !important; border-top: 2px solid var(--border-strong); } tr.mc-active td { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent); } .total-row td:first-child { border-radius: 0 0 0 10px; } .total-row td:last-child { border-radius: 0 0 10px 0; } /* Zagnieżdżona tabela pozycji faktury */ tr.items-row > td { background: var(--row-nested-bg) !important; padding: .45rem .7rem .8rem 2.4rem; } table.items { border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; box-shadow: none; margin: .2rem 0; } table.items thead th { background: var(--thead-nested-bg); font-size: .68rem; padding: .5rem .7rem; position: static; } table.items td { padding: .5rem .7rem; font-size: .86rem; } table.items tbody tr:hover td { background: var(--card); } /* ===== Pigułki / badge ===== */ .badge { display: inline-block; padding: .2rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 650; white-space: nowrap; line-height: 1.3; } .badge.s-DoOpracowania { background: var(--warn-bg); color: var(--warn); } .badge.s-PRZENIESIONO { background: var(--ok-bg); color: var(--ok); } .badge.s-PRZETWARZANIE { background: var(--accent-soft); color: var(--accent); } .badge.s-DUPLIKAT, .badge.s-BŁĄD { background: var(--err-bg); color: var(--err); } .badge.s-NIEREJESTRUJEMY { background: var(--badge-neutral-bg); color: var(--muted); } .badge.cat { background: var(--badge-cat-bg); color: var(--badge-cat-fg); border: 1px solid var(--badge-cat-border); } .badge.pay { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); } .badge.income { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); } /* ===== Pasek postępu / panel procesu doczytywania ===== */ .proc-panel { border-radius: 10px; padding: .7rem .85rem; margin: .6rem 0 .9rem; border: 1px solid; } .proc-run { background: var(--accent-soft); border-color: var(--accent-border); } .proc-err { background: var(--err-bg); border-color: var(--err-border); } .proc-done { background: var(--ok-bg); border-color: var(--ok-border); } .progress { height: 12px; border-radius: 99px; background: var(--track-bg); overflow: hidden; margin: .5rem 0 .3rem; } .progress > .bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s ease; } .progress > .bar.running { background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent); background-size: 1rem 1rem; animation: proc-stripes 1s linear infinite; } @keyframes proc-stripes { from { background-position: 0 0; } to { background-position: 1rem 0; } } /* ===== Przyciski / linki / formularze ===== */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } tbody td a { font-weight: 600; } button, .btn { background: var(--accent); color: var(--btn-fg); border: 0; border-radius: 9px; padding: .5rem 1.05rem; font-size: .9rem; font-weight: 650; cursor: pointer; text-decoration: none; display: inline-block; transition: filter .12s, box-shadow .12s; } button:hover, .btn:hover { filter: brightness(1.07); text-decoration: none; box-shadow: var(--shadow); } button.secondary, .btn.secondary { background: var(--card); color: var(--text); border: 1px solid var(--border-strong); } button.secondary:hover, .btn.secondary:hover { background: var(--row-alt); } button.danger { background: var(--err); } .invoice-operation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: .8rem; } .invoice-operation-action { min-width: 0; padding: .75rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .invoice-operation-action > span:first-child { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .75rem; font-weight: 650; } .invoice-operation-action form { display: flex; align-items: center; gap: .4rem; margin: 0; flex-wrap: wrap; } .invoice-operation-action input[type="date"] { width: 9.3rem; } .invoice-operation-action > .muted { display: block; margin-top: .35rem; font-size: .78rem; } .invoice-delete-action { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem; background: var(--err-bg); } .invoice-delete-action strong, .invoice-delete-action span { display: block; } .invoice-delete-action strong { color: var(--err); font-size: .85rem; } .invoice-delete-action span { margin-top: .15rem; color: var(--muted); font-size: .76rem; } .invoice-delete-action form { margin: 0; flex: 0 0 auto; } .invoice-delete-tools { margin: 0 0 .8rem; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .invoice-delete-tools > summary { padding: .7rem .75rem; cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 650; } .invoice-delete-tools[open] { border-color: var(--err-border); } .invoice-delete-tools[open] > summary { color: var(--err); border-bottom: 1px solid var(--err-border); } .invoice-advanced-operations { margin: 0 0 .8rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .invoice-advanced-operations > summary { padding: .7rem .75rem; cursor: pointer; font-size: .85rem; font-weight: 650; } .invoice-advanced-operations[open] > summary { border-bottom: 1px solid var(--border); } .invoice-advanced-operations-body { padding: .75rem; } .invoice-advanced-operations-body > .muted { margin: 0 0 .65rem; font-size: .8rem; } .invoice-advanced-operation-row + .invoice-advanced-operation-row { margin-top: .7rem; } .invoice-payment-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .65rem; } .invoice-payment-action { min-width: 0; padding: .75rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .invoice-payment-action h3 { margin: 0; font-size: .88rem; } .invoice-payment-action > p { margin: .2rem 0 .65rem; color: var(--muted); font-size: .76rem; } .invoice-payment-action form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .invoice-payment-action label { margin: 0; min-width: 0; } .invoice-payment-action label > span { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .72rem; font-weight: 650; } .invoice-payment-action input { width: 100%; min-width: 0; } .invoice-payment-action button { grid-column: 1 / -1; width: 100%; } .invoice-payment-full { grid-column: 1 / -1; } .invoice-payment-note { margin-top: .45rem; font-size: .78rem; } @media (max-width: 1400px) { .invoice-payment-action form { grid-template-columns: minmax(0, 1fr); } } .invoice-technical-info { margin-top: .75rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .invoice-technical-info > summary { padding: .65rem .75rem; cursor: pointer; font-size: .8rem; font-weight: 650; } .invoice-technical-info[open] > summary { border-bottom: 1px solid var(--border); } .invoice-technical-info-body { padding: .7rem .75rem; overflow-wrap: anywhere; font-size: .78rem; line-height: 1.55; } .invoice-flags { display: grid; gap: .45rem; margin: .8rem 0; padding: .7rem; border: 1px solid var(--border); border-radius: 10px; } .invoice-flags legend { padding: 0 .3rem; color: var(--muted); font-size: .76rem; font-weight: 650; } .invoice-flag-option { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .6rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; } .invoice-flag-option input { width: auto; margin: .12rem 0 0; flex: 0 0 auto; } .invoice-flag-option span, .invoice-flag-option strong, .invoice-flag-option small { display: block; } .invoice-flag-option strong { color: var(--text); font-size: .82rem; } .invoice-flag-option small { margin-top: .15rem; color: var(--muted); font-size: .74rem; line-height: 1.4; } .invoice-file-tools { margin-top: .8rem; } .invoice-file-tools > summary { cursor: pointer; color: var(--text); font-size: 1rem; font-weight: 650; } .invoice-file-tools[open] > summary { margin-bottom: .75rem; } .invoice-file-tools-body > .muted { margin: 0 0 .75rem; font-size: .82rem; } .invoice-file-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .invoice-file-source { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); } .invoice-file-source-heading { display: flex; align-items: center; gap: .55rem; margin-bottom: .15rem; } .invoice-file-source-heading > span:last-child { display: grid; gap: .08rem; min-width: 0; } .invoice-file-source-heading strong { font-size: .88rem; } .invoice-file-source-heading small { color: var(--muted); font-size: .72rem; line-height: 1.35; } .invoice-file-source-icon { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 1.05rem; font-weight: 800; } .invoice-file-source label { margin: .2rem 0 0; font-size: .76rem; } .invoice-file-source input { min-width: 0; margin: 0; } .invoice-file-source button { align-self: flex-start; margin-top: auto; } .invoice-version-message { margin: .8rem 0 0; } .invoice-version-review, .invoice-version-history { margin-top: .8rem; } .invoice-document-current { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; margin-bottom: .55rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); min-width: 0; } .invoice-document-current > span:nth-child(2) { display: grid; gap: .08rem; min-width: 0; } .invoice-document-current small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .invoice-document-current strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invoice-document-current-icon { display: grid; place-items: center; flex: 0 0 2.4rem; height: 2rem; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 800; } .invoice-document-current-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; white-space: nowrap; } .invoice-document-archive-link { padding: .32rem .55rem; font-size: .74rem; } .invoice-version-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .invoice-version-review-heading h3 { margin: .3rem 0 .2rem; font-size: 1rem; overflow-wrap: anywhere; } .invoice-version-comparison { margin-top: .8rem; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .invoice-version-comparison-head, .invoice-version-comparison-row { display: grid; grid-template-columns: minmax(6.5rem, .75fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .5rem .65rem; font-size: .76rem; } .invoice-version-comparison-head { background: var(--bg-soft); color: var(--muted); font-weight: 750; } .invoice-version-comparison-row + .invoice-version-comparison-row { border-top: 1px solid var(--border); } .invoice-version-comparison-row.changed { background: var(--warn-bg); } .invoice-version-comparison-row span { min-width: 0; overflow-wrap: anywhere; } .invoice-version-warning { margin-top: .75rem; border-left-color: var(--warn); background: var(--warn-bg); } .invoice-version-warning ul { margin: .35rem 0 0; padding-left: 1.1rem; } .invoice-version-actions { display: flex; align-items: flex-end; gap: .55rem; flex-wrap: wrap; margin-top: .8rem; } .invoice-version-actions form:first-child { flex: 1 1 20rem; } .invoice-version-confirm { display: flex; gap: .45rem; align-items: flex-start; margin-bottom: .55rem; font-size: .78rem; } .invoice-version-confirm input { width: auto; flex: 0 0 auto; margin-top: .12rem; } .invoice-version-history > summary { cursor: pointer; font-weight: 700; } .invoice-version-history-list { display: grid; gap: .55rem; margin-top: .75rem; } .invoice-version-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); } .invoice-version-history-item small { display: block; margin-top: .15rem; color: var(--muted); } .invoice-project-current { padding: .75rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .invoice-project-current > span, .invoice-project-change > label { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .74rem; font-weight: 650; } .invoice-project-current form { margin: .6rem 0 0; } .invoice-project-current button { padding: .35rem .6rem; font-size: .78rem; } .invoice-project-change { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .55rem; margin-top: .75rem; } .invoice-project-change > label { grid-column: 1 / -1; margin: 0; } .invoice-project-change select { width: 100%; min-width: 0; } .invoice-project-change button { white-space: nowrap; } .invoice-items-heading { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-bottom: .6rem; } .invoice-items-heading h2 { margin: 0; } .invoice-items-heading .badge { flex: 0 0 auto; } .invoice-items-guidance { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; padding: .55rem .65rem; background: var(--bg-soft); border-radius: 8px; color: var(--muted); font-size: .8rem; } .invoice-items-guidance strong { color: var(--text); } .invoice-data-group { margin: .8rem 0; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; } .invoice-data-group legend { padding: 0 .3rem; color: var(--muted); font-size: .76rem; font-weight: 650; } .invoice-data-group > label:first-of-type { margin-top: 0; } button:disabled { opacity: .5; cursor: not-allowed; } form.inline { display: inline; } /* ===== Powiadomienia: dzwonek w menu + dymki (toasty) ===== */ .bellbtn { position: relative; display: inline-flex; align-items: center; line-height: 1; } .bell-icon { width: 1.2rem; height: 1.2rem; display: block; } .bell-badge { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--err); color: #fff; border-radius: 9px; font-size: .7rem; font-weight: 700; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--nav-bg, #0d1524); } .notif-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: .5rem; max-width: 320px; } .notif-toast { background: var(--card); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 11px; padding: .65rem .85rem; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-size: .88rem; cursor: pointer; transition: opacity .5s, transform .5s; } .notif-toast.out { opacity: 0; transform: translateY(8px); } .notif-toast .nt-sub { color: var(--muted); font-size: .82rem; } @media (prefers-reduced-motion: reduce) { .notif-toast { transition: none; } } /* grupy i opcje w karcie ustawień (np. Powiadomienia) */ .grp { font-weight: 700; margin: 1rem 0 .4rem; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .92rem; } .grp:first-of-type { border-top: 0; padding-top: 0; margin-top: .2rem; } .opt { display: flex; align-items: center; gap: .55rem; margin: .35rem 0; font-weight: 500; } .opt input { width: auto; margin: 0; } /* przełącznik segmentowy (np. tryb importu), etykieta pola, notka, pasek postępu */ .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 11px; overflow: hidden; } .seg-btn { background: var(--card); color: var(--text); padding: .55rem 1.05rem; font-weight: 600; cursor: pointer; font-size: .9rem; margin: 0; display: inline-flex; align-items: center; gap: .4rem; } .seg-btn input { position: absolute; opacity: 0; width: 0; height: 0; } .seg-btn.active { background: var(--accent); color: var(--btn-fg); } .fl { display: block; font-weight: 600; font-size: .85rem; margin: 0 0 .3rem; color: var(--muted); } .note { margin: .3rem 0 1rem; padding: .6rem .9rem; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: .88rem; border-radius: 0 8px 8px 0; } .pbar { height: 12px; background: var(--track-bg); border-radius: 7px; overflow: hidden; } .pbar-fill { height: 100%; background: var(--accent); border-radius: 7px; transition: width .4s; } form.filters { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.1rem; align-items: center; } form.filters input, form.filters select { width: auto; } .vehicle-registry-edit-form { margin: 0; gap: .4rem; } .vehicle-registry-help > summary { cursor: pointer; color: var(--text); font-weight: 650; } .vehicle-registry-help > summary::marker { color: var(--accent); } .vehicle-registry-help > div { margin-top: .55rem; color: var(--muted); } .vehicle-registry-additional { flex: 1 1 100%; } .vehicle-registry-additional > summary { cursor: pointer; color: var(--accent); font-size: .85rem; font-weight: 650; } .vehicle-registry-additional > summary small { color: var(--muted); font-size: .78rem; font-weight: 500; } .vehicle-registry-additional-fields { display: flex; align-items: flex-end; gap: .55rem; flex-wrap: wrap; padding-top: .65rem; } .vehicle-registry-entry-actions { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; min-width: 9rem; } .vehicle-registry-entry-actions form { display: flex; margin: 0; } .vehicle-registry-merge-form { gap: .35rem; } .vehicle-registry-merge-button, .vehicle-registry-delete-button { padding: .35rem .65rem; white-space: nowrap; } .vehicle-registry-delete-button { color: var(--err); border-color: var(--err-border); } .vehicle-registry-delete-button:hover { background: var(--err-bg); } .vehicle-registry-entry-actions > form:last-child .vehicle-registry-delete-button { width: 100%; } .vehicle-detail-heading { margin-bottom: 1rem; } .vehicle-detail-heading h1 { margin-bottom: .2rem; } .vehicle-detail-plate { color: var(--muted); font-size: 1rem; font-weight: 650; letter-spacing: .02em; } .vehicle-detail-heading .muted { margin-top: .12rem; font-size: .88rem; } .vehicle-title-row, .fleet-card-heading, .vehicle-heading-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .vehicle-heading-actions { justify-content: flex-end; } .fleet-tabs { display: flex; gap: .35rem; overflow-x: auto; padding: .55rem; margin: 0 0 1.2rem; position: sticky; top: 0; z-index: 3; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: var(--shadow); } .fleet-tabs a { flex: 0 0 auto; padding: .42rem .65rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .84rem; font-weight: 600; } .fleet-tabs a:hover { color: var(--accent); background: var(--accent-soft); } .fleet-tabs a.is-active, .fleet-tabs a[aria-current="location"] { color: #fff; background: var(--accent); box-shadow: 0 2px 8px rgba(37, 99, 235, .24); } .fleet-section { scroll-margin-top: 4.5rem; margin-bottom: 1.8rem; } .fleet-section > h2 { margin-bottom: .7rem; } .fleet-section h3 { margin: 0 0 .75rem; } .fleet-empty-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; } .fleet-empty-actions .btn { padding: .5rem .75rem; } .fleet-empty-records p { margin: .3rem 0 0; } .rules-page-subtitle { margin: -.25rem 0 1rem; } .rules-empty-state p { margin: .3rem 0 .9rem; } .rules-first-action { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .rules-empty-example { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 9px; background: var(--page); } .rules-empty-example strong { width: 100%; font-size: .8rem; color: var(--muted); } .rules-empty-example span { padding: .28rem .5rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: .82rem; font-weight: 650; } .rules-empty-example .rules-empty-example-arrow { padding: 0; border: 0; background: none; color: var(--accent); } .rules-empty-example small { width: 100%; color: var(--muted); line-height: 1.35; } .rules-empty-example .rules-use-example { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: auto; margin-top: .1rem; padding: .38rem .6rem; font-size: .8rem; } .rules-table-help { margin-top: 1rem; max-width: 62rem; } .rules-form { margin-top: .5rem; } .rules-form-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.2rem; } .rules-form-group { min-width: 0; margin: 0; padding: 0; border: 0; } .rules-form-group legend { margin-bottom: .7rem; font-weight: 700; } .rules-form-condition, .rules-form-result { display: grid; gap: .7rem; } .rules-form-condition { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rules-form-result { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rules-form-group label:not(.opt) { display: grid; gap: .3rem; color: var(--muted); font-size: .8rem; } .rules-form-group select, .rules-form-group input[type="text"] { width: 100%; } .rules-paid-option { grid-column: 1 / -1; width: fit-content; } .rules-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .8rem; margin-top: 1rem; } .rules-submit { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .rules-live-summary { flex: 1 0 100%; display: flex; align-items: baseline; gap: .45rem; padding: .65rem .8rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); color: var(--fg); } .rules-live-summary[hidden] { display: none; } .rules-live-summary strong { flex: 0 0 auto; } .rules-live-summary span { overflow-wrap: anywhere; } .fleet-stat-link { color: inherit; text-decoration: none; } .fleet-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fleet-stat-link:hover { border-color: var(--accent); } .fleet-overdue { border-color: var(--err-border) !important; background: var(--err-bg) !important; } .fleet-soon { border-color: var(--warn-border) !important; background: var(--warn-bg) !important; } .fleet-status { display: inline-block; padding: .18rem .45rem; border-radius: 999px; border: 1px solid var(--border); font-size: .72rem; font-weight: 700; white-space: nowrap; } .fleet-status.overdue { color: var(--err); background: var(--err-bg); border-color: var(--err-border); } .fleet-status.soon { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); } .fleet-status.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); } .fleet-status.missing { color: var(--muted); background: var(--badge-neutral-bg); } .fleet-collapsible > summary { cursor: pointer; color: var(--text); } .fleet-collapsible > summary::marker { color: var(--accent); } .fleet-collapsible-hint { margin-left: .35rem; color: var(--muted); font-size: .78rem; font-weight: 400; } @media (max-width: 560px) { .fleet-collapsible-hint { display: block; margin: .25rem 0 0; } } .fleet-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .75rem; margin-top: 1rem; } .fleet-form-grid label, .fleet-inline-fields label { display: grid; gap: .25rem; min-width: 0; color: var(--muted); font-size: .76rem; font-weight: 650; } .fleet-form-grid input, .fleet-form-grid select, .fleet-inline-fields input, .fleet-inline-fields select { width: 100%; min-width: 0; } .fleet-field-wide { grid-column: span 2; } .fleet-form-grid .fleet-checkbox-label { display: flex; align-items: center; gap: .5rem; color: var(--text); font-size: .82rem; } .fleet-form-grid .fleet-checkbox-label input { width: auto; min-width: 1rem; } .fleet-form-grid > button { justify-self: start; } .fleet-inline-form { display: flex; align-items: center; gap: .35rem; margin: 0; } .fleet-inline-form select { min-width: 12rem; padding: .32rem .4rem; font-size: .78rem; } .fleet-inline-form button { padding: .35rem .55rem; font-size: .75rem; } .fleet-record { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 2fr) auto; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); } .fleet-record:last-child { border-bottom: 0; } .fleet-record-main { display: grid; gap: .2rem; } .fleet-complete summary { cursor: pointer; color: var(--accent); font-size: .82rem; } .fleet-inline-fields { display: grid; grid-template-columns: repeat(3, minmax(7rem, 1fr)); align-items: end; gap: .45rem; margin-top: .65rem; } .fleet-delete { padding: .28rem .5rem; color: var(--err); white-space: nowrap; } .fleet-contract-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .fleet-contract-actions form { margin: 0; } .fleet-contract-actions .btn { white-space: nowrap; } .fleet-contract-match { scroll-margin-top: 5rem; border-left: 4px solid var(--accent); } .fleet-contract-match-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .fleet-contract-match-heading h3 { margin-top: 0; } .fleet-contract-match-heading p { margin-bottom: .35rem; } .fleet-contract-match-table td:nth-child(5) { max-width: 28rem; overflow-wrap: anywhere; } .fleet-contract-match form > button { margin-top: .8rem; } .fleet-split-table select, .fleet-split-table input { width: 100%; min-width: 8rem; } .fleet-split-table td:first-child select { min-width: 13rem; } .fleet-split-table .project-split-item { min-width: 22rem; } .fleet-split-table input[readonly] { background: var(--badge-neutral-bg); font-weight: 700; cursor: not-allowed; } .project-split-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0; padding: .65rem .8rem; border-radius: 8px; background: var(--badge-neutral-bg); } .project-split-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; } .project-split-remove { margin-left: .35rem; padding: .2rem .4rem; color: var(--err); background: transparent; } .fleet-contract-progress td { background: var(--badge-neutral-bg); font-size: .82rem; } .fleet-contract-details > td { padding-top: .75rem; background: var(--bg-soft); } .fleet-contract-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; font-size: .82rem; } .fleet-contract-edit, .fleet-schedule-add, .fleet-schedule-rows { margin-top: .8rem; } .fleet-contract-edit > summary, .fleet-schedule-add > summary, .fleet-schedule-rows > summary { cursor: pointer; color: var(--accent); font-size: .82rem; font-weight: 700; } .fleet-schedule { margin-top: 1rem; padding: 1rem; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--card); scroll-margin-top: 5rem; } .fleet-schedule-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .fleet-schedule-heading h3 { margin: 0 0 .2rem; } .fleet-schedule-heading p { margin: 0; } .fleet-schedule-heading form { margin: 0; } .fleet-schedule-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: .9rem; } .fleet-schedule-summary .stat { min-width: 0; } .fleet-schedule-next { margin: .85rem 0 0; padding: .7rem .8rem; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-border); } .fleet-schedule-table { width: 100%; table-layout: fixed; } .fleet-schedule-table th:nth-child(1) { width: 12%; } .fleet-schedule-table th:nth-child(2) { width: 17%; } .fleet-schedule-table th:nth-child(3) { width: 19%; } .fleet-schedule-table th:nth-child(4) { width: 15%; } .fleet-schedule-table th:nth-child(5) { width: 37%; } .fleet-schedule-table td { vertical-align: top; overflow-wrap: anywhere; } .fleet-schedule-table td form { margin-top: .35rem; } .error-inline { color: var(--err); font-weight: 650; } .contractor-detail-heading { margin-bottom: 1rem; } .contractor-detail-heading h1 { margin-bottom: .25rem; } .contractor-detail-meta { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--muted); font-size: .88rem; } .project-detail-heading { margin-bottom: 1.2rem; } .project-detail-heading h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .35rem; } .project-detail-heading h1 .badge { font-size: .7rem; letter-spacing: 0; } .project-integration-settings { margin: .9rem 0; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .project-integration-settings > summary { padding: .7rem .8rem; cursor: pointer; font-size: .85rem; font-weight: 700; } .project-integration-settings > summary .badge { float: right; margin-left: .5rem; } .project-integration-settings[open] > summary { border-bottom: 1px solid var(--border); } .project-integration-settings-body { padding: 0 .8rem .8rem; } .project-maintenance-tools { margin: 0 0 .9rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } .project-maintenance-tools > summary { padding: .7rem .8rem; cursor: pointer; color: var(--muted); font-size: .82rem; font-weight: 700; } .project-maintenance-tools[open] > summary { border-bottom: 1px solid var(--border); } .project-maintenance-tools-body { padding: .75rem .8rem; } .project-maintenance-tools-body form { margin: 0; } .project-maintenance-tools-body .muted { display: block; margin-top: .45rem; font-size: .82rem; } .project-active-option { display: flex; align-items: flex-start; gap: .65rem; margin: .9rem 0; padding: .7rem .75rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .project-active-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } .project-active-option input { flex: 0 0 auto; width: auto; margin: .15rem 0 0; } .project-active-option strong { display: block; color: var(--text); font-size: .84rem; } .project-active-option small { display: block; margin-top: .12rem; color: var(--muted); font-size: .76rem; } .project-cost-summary-heading { margin-bottom: .9rem; } .project-cost-summary-heading h2 { margin-bottom: .25rem; } .project-cost-summary-heading p { margin: 0; font-size: .82rem; } .project-cash-heading { margin: 1.6rem 0 .6rem; } .project-cash-heading h3 { margin: 0 0 .25rem; } .project-cash-heading p { margin: 0; font-size: .85rem; } .project-cash-open-heading { margin: 1rem 0 .45rem; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .project-cash-open-grid { margin-top: 0; } .project-cash-help { margin: .65rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; } .project-cash-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .project-cash-help > summary::marker { color: var(--accent); } .project-cash-help p { margin: .4rem 0 0; } .project-margin-note { font-size: .82rem; margin: .6rem 0 0; } .project-margin-note.is-warning { padding: .7rem .85rem; border: 1px solid var(--warn-border); border-radius: 10px; background: var(--warn-bg); color: var(--warn); } .project-margin-note.is-warning a { color: inherit; font-weight: 700; } .invoice-detail-heading { margin-bottom: 1.2rem; } .invoice-detail-heading h1 { margin-bottom: .35rem; } .invoice-detail-summary { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; margin: .2rem 0 .45rem; } .invoice-detail-summary > span { display: grid; gap: .05rem; min-width: 8rem; } .invoice-detail-summary small { color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; } .invoice-detail-summary strong, .invoice-detail-summary a { color: var(--text); font-size: .9rem; font-weight: 700; } .invoice-detail-summary a { color: var(--accent); } .budget-preview-heading { margin-bottom: 1.2rem; } .budget-preview-heading h1 { margin-bottom: .2rem; } .budget-preview-project { margin-bottom: .25rem; font-size: 1.05rem; font-weight: 650; } .material-detail-heading { margin-bottom: 1.2rem; } .material-detail-heading h1 { max-width: 58rem; margin: .7rem 0 .25rem; overflow-wrap: anywhere; } .material-detail-heading .muted { font-size: .88rem; } .material-detail-heading strong { color: var(--text); font-weight: 650; } .invoice-filters { align-items: flex-end; padding: .7rem .85rem .85rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); } .invoices-page-heading h1 { margin-bottom: 0; } .invoices-page-count { margin: .2rem 0 1.2rem; } .invoice-filter-title { flex: 1 1 100%; margin: 0 0 .1rem; color: var(--text); font-size: .92rem; font-weight: 700; } .invoice-filter-field { display: flex; flex: 1 1 8.5rem; flex-direction: column; gap: .25rem; min-width: 8rem; margin: 0; color: var(--muted); font-size: .72rem; font-weight: 650; } .invoice-filter-field input, .invoice-filter-field select { width: 100%; } .invoice-filter-search { flex: 2 1 20rem; } .invoice-filter-vehicle { flex-basis: 13rem; } .invoice-filter-project { flex-basis: 12rem; } .invoice-filter-toggle { display: flex; align-items: center; gap: .35rem; min-height: 2.35rem; margin: 0; color: var(--muted); font-weight: 500; } .invoice-filter-toggle input { width: auto; } .invoice-bulk-panel { flex: 1 1 100%; min-width: 0; margin: 0; padding: .65rem .85rem .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--row-alt); } .invoice-bulk-panel.is-inactive { padding: .2rem .65rem .25rem; } .invoice-bulk-title { padding: 0 .35rem; color: var(--text); font-size: .9rem; font-weight: 700; } .invoice-bulk-count { color: var(--muted); font-size: .78rem; font-weight: 600; } .invoice-bulk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .invoice-bulk-panel.is-inactive .invoice-bulk-grid { display: none; } .invoice-bulk-panel.is-inactive .invoice-bulk-help { display: none; } .invoice-bulk-action { display: grid; grid-template-columns: minmax(8rem, 1fr) auto; gap: .45rem; align-items: end; min-width: 0; } .invoice-bulk-action label { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .76rem; font-weight: 650; } form.filters .invoice-bulk-action select { width: 100%; min-width: 0; } .invoice-bulk-help { margin: .55rem 0 0; color: var(--muted); font-size: .8rem; } input, select, textarea { border: 1px solid var(--border-strong); border-radius: 9px; padding: .5rem .7rem; font-size: .9rem; font-family: inherit; background: var(--input-bg); width: 100%; color: var(--text); transition: border-color .12s, box-shadow .12s; } /* Pola wyboru: domyślne ~13px gubiły się przy tekście 14.5px i trudno było w nie trafić — zwłaszcza w gęstych tabelach. Dostają własny, czytelny rozmiar i kolor akcentu. Muszą też wypaść z reguły wyżej (szerokość 100%, ramka, padding od pola tekstowego zniekształcały kwadracik). */ input[type="checkbox"], input[type="radio"] { appearance: auto; -webkit-appearance: auto; width: 1.15rem; height: 1.15rem; min-width: 1.15rem; padding: 0; margin: 0; border: 0; border-radius: 0; accent-color: var(--accent); cursor: pointer; vertical-align: middle; flex: 0 0 auto; } /* wygodniejszy cel kliknięcia w kolumnie zaznaczania */ tbody td > input[type="checkbox"] { margin: .15rem .25rem; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } label { display: block; font-size: .78rem; font-weight: 650; color: var(--muted); margin: .7rem 0 .25rem; } .muted { color: var(--muted); font-size: .85rem; } button.toggle { background: none; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--accent); font-size: .8rem; padding: .1rem .4rem; cursor: pointer; line-height: 1; } button.toggle:hover { background: var(--accent-soft); filter: none; box-shadow: none; } button.toggle.project-material-sources-toggle { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-left: .25rem; padding: 0; background: var(--accent-soft); font-size: .9rem; vertical-align: middle; } button.toggle.project-material-sources-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } .invoice-items-toggle { margin-right: .35rem; vertical-align: .1rem; } select.assign { min-width: 170px; max-width: 280px; } .invoice-assignment-form { display: inline-flex !important; align-items: center; gap: .35rem; } .invoice-assignment-submit { padding: .38rem .55rem; white-space: nowrap; } /* Lista faktur łączy kwoty oraz kategorię z opisem, żeby wszystkie najważniejsze dane mieściły się na szerokości strony niezależnie od aktywnych filtrów. */ .invoice-compact-table { width: 100%; table-layout: fixed; } .invoice-compact-table .invoice-col-check { width: 4%; } .invoice-compact-table .invoice-col-date { width: 8.5%; } .invoice-compact-table .invoice-col-number { width: 14.5%; } .invoice-compact-table .invoice-col-supplier { width: 15%; } .invoice-compact-table .invoice-col-description { width: 21%; } .invoice-compact-table .invoice-col-amounts { width: 10%; } .invoice-compact-table .invoice-col-status { width: 13%; } .invoice-compact-table .invoice-col-project { width: 14%; } .invoice-compact-table > thead > tr > th, .invoice-compact-table > tbody > tr:not(.items-row) > td { min-width: 0; padding-inline: .55rem; } .invoice-compact-table > tbody > tr:not(.items-row) > td.invoice-number-cell { overflow: hidden; overflow-wrap: anywhere; } .invoice-compact-table > tbody > tr:not(.items-row) > td .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } .invoice-compact-heading { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; } th.right .invoice-compact-heading { align-items: flex-end; } .invoice-compact-sort { width: auto; } .invoice-compact-sort-secondary { color: var(--muted); font-size: .66rem; } .invoice-compact-sort.sort-asc::after { content: "▲"; color: var(--accent); opacity: 1; font-size: .62rem; } .invoice-compact-sort.sort-desc::after { content: "▼"; color: var(--accent); opacity: 1; font-size: .62rem; } .invoice-compact-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .invoice-compact-match { font-size: .76rem; white-space: normal; line-height: 1.25; } .invoice-compact-tags { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem; } .invoice-compact-tags:empty { display: none; } .invoice-compact-amounts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .invoice-compact-amounts span { display: block; } .invoice-compact-amounts small { display: block; color: var(--muted); font-size: .68rem; line-height: 1.15; } .invoice-compact-amounts strong { font-weight: 700; } .invoice-compact-table .invoice-assignment-form { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: stretch; width: 100%; gap: .3rem; } .invoice-compact-table select.assign { width: 100%; min-width: 0; max-width: none; } .invoice-compact-table .invoice-assignment-submit { width: 100%; } /* Naprzemienne tła pozycji w listach rozwijanych inwestycji */ select.striped option:nth-child(odd) { background: var(--input-bg); } select.striped option:nth-child(even) { background: var(--row-group-bg); } select.striped option { padding: .3rem .5rem; } /* ===== Kolory inwestycji ===== */ .dot { display: inline-block; width: .72rem; height: .72rem; border-radius: 50%; vertical-align: baseline; margin-right: .35rem; box-shadow: inset 0 0 0 1px var(--ring); } .dot.lg { width: 1rem; height: 1rem; margin-right: .15rem; } input[type="color"] { width: 3.2rem; height: 2.2rem; padding: .15rem; cursor: pointer; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); } /* etykieta pola koloru bez domyślnego (asymetrycznego) marginesu label — inaczej w rzędzie form.filters swatch jest zepchnięty w dół i nie trzyma jednej linii */ .color-pick { margin: 0; } /* wymiary muszą przebić „form.filters input { width:auto }" (wyższa specyficzność), inaczej pole koloru w formularzu „Nowa inwestycja" zapada się do cienkiego paska */ .color-pick input[type="color"] { margin: 0; width: 3.2rem; height: 2.2rem; } .color-row { display: flex; align-items: center; gap: .7rem; } .swatches { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; } .swatch { width: 1.55rem; height: 1.55rem; border-radius: 6px; border: 1px solid var(--ring); cursor: pointer; padding: 0; } .swatch:hover { transform: scale(1.15); box-shadow: var(--shadow); filter: none; } .swatch.selected, .swatch[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; transform: scale(1.08); box-shadow: var(--shadow); } /* ===== Chipy filtrów kategorii ===== */ .chip { display: inline-block; padding: .3rem .85rem; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font-size: .84rem; font-weight: 600; text-decoration: none; } .chip:hover { background: var(--accent-soft); text-decoration: none; } .chip.active { background: var(--accent); border-color: var(--accent); color: var(--btn-fg); } /* ===== Paginacja ===== */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.1rem; flex-wrap: wrap; } .pagination-summary { margin: 0; color: var(--muted); font-size: .88rem; } .pagination-summary strong { color: var(--text); font-variant-numeric: tabular-nums; } .pagination { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .pagination a, .pagination span { padding: .35rem .75rem; border: 1px solid var(--border-strong); border-radius: 8px; text-decoration: none; background: var(--card); font-size: .88rem; font-weight: 600; } .pagination a:hover { background: var(--accent-soft); text-decoration: none; } .pagination .current { background: var(--accent); color: var(--btn-fg); border-color: var(--accent); } .pagination .pagination-step { white-space: nowrap; } .pagination .pagination-ellipsis { padding-inline: .25rem; border-color: transparent; background: transparent; color: var(--muted); } /* ===== Komunikaty ===== */ .error { background: var(--err-bg); color: var(--err); padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid var(--err-border); } .success { background: var(--ok-bg); color: var(--ok); padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid var(--ok-border); } .missing-gross-empty { display: flex; align-items: flex-start; gap: 1rem; max-width: 48rem; padding: 1.2rem; border-color: var(--ok-border); } .missing-gross-empty-icon { display: grid; place-items: center; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 999px; font-size: 1.15rem; font-weight: 750; } .missing-gross-empty h2 { margin: .05rem 0 .35rem; } .missing-gross-empty p { margin: 0 0 .9rem; } .notice { background: var(--warn-bg); color: var(--warn); padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid var(--warn-border); } .notice a { color: inherit; font-weight: 700; } .login-box { max-width: 420px; margin: 9vh auto; } .login-logo { display: block; height: 44px; margin-bottom: 1rem; } .login-box h1 { margin-bottom: .25rem; } .login-description { margin: 0 0 1.2rem; color: var(--muted); font-size: .88rem; } .login-error { display: grid; gap: .15rem; } .login-error strong { color: var(--err); } .login-error span { font-size: .85rem; } .login-form label { margin-top: 0; } .login-password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; } .login-password-field input { min-width: 0; } .login-password-toggle { white-space: nowrap; } .login-submit { width: 100%; margin-top: 1rem; } @media (max-width: 420px) { .login-password-field { grid-template-columns: minmax(0, 1fr); } .login-password-toggle { width: 100%; } } /* ===== Koszt bez dokumentu ===== Pola zachowują wygodne szerokości na komputerze, ale mogą się zwężać razem z ekranem telefonu. Dzięki temu żadne pole nie wypycha całej strony w bok. */ .manual-cost-card { max-width: 780px; } .manual-cost-help { margin: 0 0 1.1rem; color: var(--muted); font-size: .87rem; line-height: 1.5; } .manual-cost-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .manual-cost-help > summary::marker { color: var(--accent); } .manual-cost-help p { margin: .4rem 0 0; } .manual-cost-project { max-width: none; } .manual-cost-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .manual-cost-field { min-width: 0; width: auto; } .manual-cost-description { width: 100%; min-width: 0; } .manual-cost-gross input { font-weight: 700; } .manual-cost-amount-row { align-items: flex-end; } .manual-cost-vat-toggle { margin-bottom: .55rem; } .manual-cost-vat-box { display: none; margin-top: .7rem; } .manual-cost-actions { display: flex; gap: .55rem; flex-wrap: wrap; } .manual-cost-submit { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .button-inline-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .manual-cost-status { margin: 0 0 .55rem; font-size: .82rem; } .drive-match-heading h1 { margin-bottom: 0; } .drive-match-project { margin: .2rem 0 1rem; } .drive-match-summary { margin-bottom: 1rem; } .drive-match-summary > p { margin: 0; } .drive-match-help { margin-top: .3rem; color: var(--muted); font-size: .85rem; line-height: 1.5; } .drive-match-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .drive-match-help > summary::marker { color: var(--accent); } .drive-match-help p { margin: .4rem 0 0; max-width: 62rem; } /* ===== Import ===== */ .import-project-field { max-width: 26rem; } .import-folder-field { max-width: 100%; } .import-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 1rem; } .import-actions .muted { font-size: .82rem; } .import-drive-title { margin-bottom: .25rem; } .import-drive-intro { margin: 0 0 1rem; } .import-step-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: var(--text); font-size: .9rem; } .import-step-title span { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; } .import-step-spaced { margin-top: 1rem; } .import-step-title + .fl { margin-top: 0 !important; } .import-step-title + .import-actions { margin-top: 0; } .import-folder-map { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; font-size: .82rem; } .import-folder-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .45rem; border: 1px solid var(--border); border-radius: 999px; background: var(--row-alt); color: var(--muted); } .import-folder-tag b { color: var(--text); } .import-legacy-summary { cursor: pointer; color: var(--muted); font-weight: 600; } .import-legacy-title { color: var(--text); } .import-legacy-badge { display: inline-block; margin-left: .45rem; padding: .15rem .45rem; border: 1px solid var(--border); border-radius: 999px; background: var(--row-alt); color: var(--muted); font-size: .72rem; font-weight: 600; vertical-align: .08rem; } .import-after-note { margin-top: 1rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--row-alt); color: var(--muted); font-size: .82rem; } .import-after-note strong { color: var(--text); } .import-after-note ul { margin: .45rem 0 0; padding-left: 1.15rem; } .import-after-note li + li { margin-top: .25rem; } /* ===== Tworzenie inwestycji ===== */ .project-create-form { flex-wrap: wrap; gap: .6rem; align-items: flex-end; } .project-create-field { margin: 0; min-width: 0; } .project-create-field > span { display: block; } .project-create-field small { font-size: .72rem; font-weight: 500; } form.project-create-form .project-create-field input { width: 100%; margin-top: .25rem; } .project-create-code { flex: 1; min-width: 14rem; } .project-create-description { flex: 1; min-width: 12rem; } .project-create-color { flex: 0 0 4.4rem; } .project-create-color input[type="color"] { width: 3.2rem; } .project-create-break { flex-basis: 100%; height: 0; } .project-create-drive { flex: 1; min-width: 22rem; } .project-create-budget { flex: 1; min-width: 20rem; } .project-create-help { margin-top: .7rem; color: var(--muted); font-size: .85rem; line-height: 1.5; } .project-create-status { margin: .55rem 0 0; font-size: .82rem; } .project-create-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .project-create-help > summary::marker { color: var(--accent); } .project-create-help p { margin: .4rem 0 0; max-width: 62rem; } form.project-list-filters { max-width: 58rem; align-items: flex-end; } .projects-table-hint { display: none; align-items: center; gap: .35rem; margin: 0 0 .35rem; color: var(--muted); font-size: .8rem; } .projects-table-hint span { color: var(--accent); font-size: 1rem; font-weight: 700; } .projects-status-confirm-note { margin: .45rem 0 .2rem; font-size: .82rem; } .projects-list-table-wrap { overflow-x: hidden; overflow-y: auto; } .projects-list-table { width: 100%; table-layout: fixed; } .projects-list-table .projects-col-project { width: 22%; } .projects-list-table .projects-col-count { width: 6%; } .projects-list-table .projects-col-costs { width: 17%; } .projects-list-table .projects-col-income, .projects-list-table .projects-col-result, .projects-list-table .projects-col-due { width: 12%; } .projects-list-table .projects-col-status, .projects-list-table .projects-col-documents { width: 10%; } .projects-list-table > thead > tr > th, .projects-list-table > tbody > tr > td { min-width: 0; padding-inline: .38rem; font-size: .76rem; } .projects-list-table .projects-list-name { overflow-wrap: anywhere; } .projects-list-table .projects-list-name > .muted { display: block; margin: .25rem 0 0 1.15rem !important; white-space: normal !important; font-size: .72rem !important; line-height: 1.35; } .projects-list-table .projects-list-status form { display: block; margin: .3rem 0 0 !important; } .projects-list-table .projects-list-status button { width: 100%; padding: .28rem .3rem !important; font-size: .7rem !important; white-space: normal; } .projects-list-costs > span { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; } .projects-list-costs > span + span { margin-top: .2rem; } .projects-list-costs small, .projects-list-result small { color: var(--muted); font-size: .66rem; font-weight: 500; } .projects-list-costs strong { font-size: .75rem; white-space: nowrap; } .projects-list-costs em { display: block; color: var(--err); font-size: .65rem; font-style: normal; } .projects-list-result small { display: block; margin-top: .2rem; } .projects-list-table td.doc-flags { white-space: normal; text-align: center; } .projects-list-table td.doc-flags > span, .projects-list-table td.doc-flags > a { display: block; margin: .15rem 0; } .projects-list-export { display: block; margin-top: .35rem !important; overflow-wrap: anywhere; } .project-filter-sort { flex-basis: 14rem; } .project-invoice-filters { align-items: flex-end; margin-bottom: .7rem; } .project-invoice-filter-type { flex: 0 1 10rem; } .project-invoice-filter-search { flex: 2 1 18rem; } .project-material-filters { align-items: flex-end; } .project-material-filter-search { flex: 2 1 18rem; } .project-material-filter-category { flex: 1 1 12rem; } /* ===== Filtry analiz materiałów ===== */ .analytics-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.2rem; } .analytics-heading h1 { margin-bottom: 0; } .analytics-page-subtitle { margin: .2rem 0 0; } .analytics-help { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; line-height: 1.5; } .analytics-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .analytics-help > summary::marker { color: var(--accent); } .analytics-help p { margin: .45rem 0 0; max-width: 62rem; } .contractors-help { margin-top: .65rem; color: var(--muted); font-size: .85rem; line-height: 1.5; } .contractors-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .contractors-help > summary::marker { color: var(--accent); } .contractors-help p { margin: .4rem 0 0; max-width: 62rem; } form.analytics-filters { align-items: flex-end; } .analytics-filter-search { flex: 2 1 13rem; } .analytics-filter-project { flex: 2 1 14rem; } .analytics-filter-category { flex: 1 1 10rem; } .analytics-filter-date { flex: 0 1 9rem; } .analytics-filter-sort { flex: 1 1 9rem; } /* ===== Filtry kontrahentów ===== */ form.contractor-filters { max-width: 62rem; margin-top: 1.2rem; align-items: flex-end; } .contractor-filter-search { flex: 2 1 16rem; } .contractor-filter-type { flex: 1 1 12rem; } .contractor-filter-sort { flex: 1 1 11rem; } /* ===== Nagłówek pojazdów ===== */ .vehicles-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.2rem; } .vehicles-heading h1 { margin-bottom: 0; } form.vehicle-filters { max-width: 49rem; margin-top: 1.2rem; align-items: flex-end; } .vehicle-filter-search { flex: 2 1 16rem; } .vehicle-filter-sort { flex: 1 1 11rem; } .fleet-comparison-table { max-height: none; } .fleet-deadlines-empty { padding: 2rem; text-align: center; } .fleet-deadlines-empty h2 { margin-bottom: .4rem; } .fleet-deadlines-empty p { margin: 0 0 1rem; } /* ===== Pomoc na stronie reguł ===== */ .rules-help { max-width: 62rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--row-alt); color: var(--muted); } .rules-help > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; cursor: pointer; color: var(--text); font-weight: 700; } .rules-help > summary small { color: var(--muted); font-size: .75rem; font-weight: 600; } .rules-help[open] > summary { border-bottom: 1px solid var(--border); } .rules-help-body { padding: .55rem 1.15rem .75rem; } .rules-help ul { margin: 0; padding-left: 1.15rem; } .rules-help li { margin: .35rem 0; line-height: 1.45; } .rules-help b { color: var(--text); } /* ===== Nagłówek płatności ===== */ .payments-heading, .income-heading { margin-bottom: 1.2rem; } .payments-heading h1, .income-heading h1 { margin-bottom: .3rem; } .payments-heading p, .income-heading p { margin: 0; } .income-corrections-heading { margin-top: 2.2rem; } .income-corrections-heading h2 { margin: 0; } .income-corrections-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; } .income-corrections-help { margin: .45rem 0 .9rem; color: var(--muted); font-size: .88rem; line-height: 1.5; } .income-corrections-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .income-corrections-help > summary::marker { color: var(--accent); } .income-corrections-help p { max-width: 62rem; margin: .4rem 0 0; } .income-direction-help { margin-top: .65rem; color: var(--muted); font-size: .82rem; line-height: 1.5; } .income-direction-help > summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 650; } .income-direction-help > summary::marker { color: var(--accent); } .income-direction-help p { max-width: 62rem; margin: .4rem 0 0; } /* celowo białe tło — podgląd PDF faktur renderuje się na białym */ iframe.preview { width: 100%; height: 76vh; border: 1px solid var(--border); border-radius: 12px; background: #fff; } @media (min-width: 900px) { .invoice-document-column { position: sticky; top: 1rem; align-self: start; } } /* Zakładki wersji dokumentu (Oryginał / KSeF) nad podglądem */ .doc-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; } .doc-tabs .doc-tab { background: var(--card); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: .3rem .75rem; font-size: .82rem; font-weight: 600; cursor: pointer; } .doc-tabs .doc-tab:hover { background: var(--row-alt); filter: none; box-shadow: none; } .doc-tabs .doc-tab.active { background: var(--accent); color: var(--btn-fg); border-color: var(--accent); } /* ===== Strefa uploadu ===== */ .upload-card { overflow: hidden; } .dropzone { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 3rem 1rem; text-align: center; color: var(--muted); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; } .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); } .dropzone:hover { border-color: var(--accent); background: var(--accent-soft); } .dropzone:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; border-color: var(--accent); } .dropzone-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.8rem; font-weight: 700; line-height: 1; } .dropzone-icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .dropzone-title { margin: 0; color: var(--text); font-size: 1.05rem; font-weight: 700; } .dropzone-or { margin: .45rem 0; font-size: .85rem; } .dropzone-select { display: inline-block; padding: .55rem 1rem; border-radius: 9px; background: var(--accent); color: var(--btn-fg); font-weight: 700; } .dropzone-formats { margin: .7rem 0 0; font-size: .8rem; } .upload-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: .9rem .15rem 0; padding: 0; list-style: none; } .upload-process li { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; padding: .8rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--bg-soft); } .upload-process-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.65rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 800; } .upload-process strong, .upload-process small { display: block; } .upload-process strong { color: var(--text); font-size: .85rem; } .upload-process small { margin-top: .2rem; color: var(--muted); font-size: .76rem; line-height: 1.35; } .upload-format-note { margin: .8rem .15rem 0; color: var(--muted); font-size: .82rem; } .upload-file-status { min-height: 1.3rem; margin: .75rem .15rem .2rem; font-size: .85rem; font-weight: 700; } .upload-file-status-ok { color: var(--ok); } .upload-file-status-warning { color: var(--warn); } .upload-file-list { margin: .35rem 0 1rem; padding-left: 1.3rem; overflow-wrap: anywhere; } .upload-file-list li + li { margin-top: .3rem; } .upload-file-valid { color: var(--ok); } .upload-file-invalid { color: var(--err); font-weight: 650; } .upload-file-remove { margin-left: .55rem; padding: .22rem .48rem; min-height: 1.85rem; font-size: .74rem; vertical-align: middle; } .upload-error { margin-bottom: 1rem; } /* ===== Nawigacja zwijana (hamburger) ===== Pełny zestaw linków potrzebuje szerokiego okna. Poniżej 1180px pokazujemy zwijane menu, zamiast pozwalać nawigacji łamać się na przypadkowy drugi wiersz. */ /* Gdy pasek jest jeszcze desktopowy, ale robi się ciasny, rezygnujemy wyłącznie z elastycznej przerwy. Wszystkie linki pozostają w jednym wierszu. */ @media (max-width: 1360px) { nav .nav-links .spacer { display: none; } } @media (max-width: 1180px) { .rules-form-groups { grid-template-columns: 1fr; } body.nav-menu-open { overflow: hidden; } nav { position: relative; z-index: 30; flex-wrap: wrap; gap: .5rem .8rem; padding: .6rem 1rem; } nav .nav-toggle { display: inline-flex; } /* Lista linków chowa się i rozwija w pełnej szerokości pod paskiem marki. */ nav .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .1rem; max-height: calc(100vh - 4rem); padding-top: .3rem; overflow-y: auto; } nav .nav-links.open { display: flex; animation: nav-menu-in .14s ease-out; } nav .nav-links .spacer { display: none; } nav .nav-links a { padding: .72rem .5rem; font-size: 1rem; border-radius: 8px; border-bottom: 1px solid var(--nav-divider); } nav .nav-links a.nav-active { margin: 0; } nav .nav-links a:last-child { border-bottom: 0; } nav .nav-links a:hover { background: rgba(255,255,255,.06); } nav .nav-links .theme-toggle { align-self: flex-start; margin: .5rem 0 .2rem; } nav .nav-more { width: 100%; } nav .nav-more summary { padding: .72rem .5rem; border-bottom: 1px solid var(--nav-divider); font-size: 1rem; border-radius: 8px; } nav .nav-more-active summary { margin: 0; } nav .nav-more-menu { position: static; min-width: 0; padding: .2rem 0 .2rem 1rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; } } @keyframes nav-menu-in { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1600px) { .project-material-table-hint { display: flex; } } @media (max-width: 900px) { .income-table-hint { display: flex; } .income-corrections-table-hint { display: flex; } .income-table-wrap, .income-corrections-table-wrap { overflow-x: auto; } .income-table { min-width: 72rem; } .income-corrections-table { min-width: 66rem; } .projects-table-hint { display: flex; } .projects-list-table-wrap { overflow-x: auto; } .projects-list-table { min-width: 80rem; } .analytics-table-hint { display: flex; } .analytics-overview-table-wrap { overflow-x: auto; } .analytics-overview-table { min-width: 70rem; } .analytics-overview-table .analytics-material-sticky { position: sticky; left: 0; box-shadow: 8px 0 12px -12px rgba(16,24,40,.55); } .income-actions-sticky { position: sticky; right: 0; box-shadow: -8px 0 12px -12px rgba(16,24,40,.55); } th.income-invoice-number-sticky, td.income-invoice-number-sticky { position: sticky; left: 0; box-shadow: 8px 0 12px -12px rgba(16,24,40,.55); } th.income-invoice-number-sticky { z-index: 4; background: var(--thead-bg); } td.income-invoice-number-sticky { z-index: 1; background: var(--card); } tbody tr:nth-child(even) td.income-invoice-number-sticky { background: var(--row-alt); } tbody tr:hover td.income-invoice-number-sticky { background: var(--accent-soft); } th.income-correction-number-sticky, td.income-correction-number-sticky { position: sticky; left: 0; box-shadow: 8px 0 12px -12px rgba(16,24,40,.55); } th.income-correction-number-sticky { z-index: 4; background: var(--thead-bg); } td.income-correction-number-sticky { z-index: 1; background: var(--card); } tbody tr:nth-child(even) td.income-correction-number-sticky { background: var(--row-alt); } tbody tr:hover td.income-correction-number-sticky { background: var(--accent-soft); } } @media (max-width: 1600px) { th.analytics-material-sticky, td.analytics-material-sticky { position: sticky; left: 0; box-shadow: 8px 0 12px -12px rgba(16,24,40,.55); } th.analytics-material-sticky { z-index: 4; background: var(--thead-bg); } td.analytics-material-sticky { z-index: 1; background: var(--card); } tbody tr:nth-child(even) td.analytics-material-sticky { background: var(--row-alt); } tbody tr:hover td.analytics-material-sticky { background: var(--accent-soft); } th.project-material-name-sticky, td.project-material-name-sticky { position: sticky; left: 0; box-shadow: 8px 0 12px -12px rgba(16,24,40,.55); } th.project-material-name-sticky { z-index: 4; background: var(--thead-bg); } td.project-material-name-sticky { z-index: 1; background: var(--card); } tbody tr:nth-child(even) td.project-material-name-sticky { background: var(--row-alt); } tbody tr:hover td.project-material-name-sticky { background: var(--accent-soft); } } @media (max-width: 1050px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fleet-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fleet-schedule-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 780px) { .invoice-table-hint { display: flex; } .invoice-compact-table { min-width: 68rem; } .invoice-items-toggle { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; margin: -.35rem .35rem -.35rem 0; padding: 0; font-size: 1rem; } .payments-whitelist { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .payments-whitelist button { width: 100%; } .rules-form-condition, .rules-form-result { grid-template-columns: minmax(0, 1fr); } .rules-paid-option { grid-column: auto; } .rules-form-actions { align-items: stretch; flex-direction: column; } .rules-form-actions button { width: 100%; } } .settings-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.25rem 0 1.2rem; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); position: sticky; top: .55rem; z-index: 5; } .settings-toc a { display: inline-flex; align-items: center; gap: .4rem; padding: .48rem .72rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--bg); font-size: .88rem; font-weight: 600; text-decoration: none; transition: color .14s, border-color .14s, background-color .14s, box-shadow .14s; } .settings-toc-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .settings-toc a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .settings-toc a.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .settings-section-anchor { scroll-margin-top: 5.5rem; } .settings-section-heading, .settings-heading-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; } .settings-heading-description { color: var(--muted); font-size: .85rem; font-weight: 400; line-height: 1.35; } .settings-heading-title { display: inline-flex; align-items: center; gap: .45rem; } .settings-heading-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .settings-model-heading { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; } .settings-model-active { flex: 0 0 auto; } .settings-inline-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .settings-model-save, .settings-icon-button, .settings-summary-title, .settings-model-effect { display: inline-flex; align-items: center; gap: .38rem; } .settings-model-effect { max-width: 62rem; margin: .5rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; } .settings-model-help { margin-top: .65rem; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); color: var(--muted); font-size: .82rem; line-height: 1.5; } .settings-model-help > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .75rem; cursor: pointer; color: var(--accent); font-weight: 700; } .settings-model-help > summary::marker { color: var(--accent); } .settings-model-help > summary small { color: var(--muted); font-size: .76rem; font-weight: 400; } .settings-model-help p { max-width: 62rem; margin: 0; padding: 0 .75rem .7rem; } .settings-model-advanced { margin-top: .75rem; border-top: 1px solid var(--border); } .settings-model-advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; cursor: pointer; font-size: .88rem; font-weight: 700; } .settings-model-advanced > summary small { color: var(--muted); font-size: .78rem; font-weight: 400; } .settings-model-advanced-body { padding: 0 0 .2rem; } .settings-model-fetched { margin-left: .5rem; font-size: .85rem; } .settings-model-technical { margin: .5rem 0 0; font-size: .85rem; } .settings-income-help { margin-top: .7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--muted); font-size: .84rem; line-height: 1.5; } .settings-income-help > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .62rem .75rem; cursor: pointer; color: var(--text); font-weight: 700; } .settings-income-help > summary small { color: var(--muted); font-size: .78rem; font-weight: 400; } .settings-income-help > p { max-width: 62rem; margin: 0; padding: 0 .75rem .7rem; } .settings-income-tools { margin-top: 1rem; border-top: 1px solid var(--border); } .settings-income-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; cursor: pointer; font-size: .88rem; font-weight: 700; } .settings-income-tools > summary small { color: var(--muted); font-size: .78rem; font-weight: 400; } .settings-income-tools-body { padding: 0 0 .2rem; } .settings-income-folder-save, .settings-income-state { display: inline-flex; align-items: center; gap: .38rem; } .settings-income-state .settings-inline-icon { color: var(--ok); } .settings-income-state-warning .settings-inline-icon { color: var(--warn); } .settings-notification-help { margin-top: .6rem; } .settings-notification-help > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .58rem .7rem; cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; font-size: .85rem; font-weight: 700; } .settings-notification-help > summary small { color: var(--muted); font-size: .78rem; font-weight: 400; } .settings-notification-help[open] > summary { border-radius: 9px 9px 0 0; } .settings-notification-help > p { margin: 0; padding: .65rem .7rem; max-width: 62rem; font-size: .82rem; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 9px 9px; } .settings-telegram-help { margin-top: .7rem; } .settings-telegram-help > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .75rem; cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; font-size: .85rem; font-weight: 700; } .settings-telegram-help > summary small { color: var(--muted); font-size: .78rem; font-weight: 400; } .settings-telegram-help[open] > summary { border-radius: 9px 9px 0 0; } .settings-telegram-help-body { max-width: 62rem; padding: .65rem .85rem; font-size: .85rem; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 9px 9px; } .settings-telegram-help-body ol { line-height: 1.8; margin: 0; padding-left: 1.2rem; } .settings-telegram-help-body p { margin: .55rem 0 0; } .settings-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .settings-card-title > span:first-child { min-width: 0; } .settings-card-status { flex: 0 0 auto; margin-top: .05rem; } .settings-company-help { max-width: 62rem; margin: .65rem 0 0; padding: .7rem .85rem; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: .84rem; line-height: 1.5; } .settings-company-save, .settings-company-help > strong { display: inline-flex; align-items: center; gap: .38rem; } .settings-company-help > strong { color: var(--accent); } .settings-company-help ul { margin: .4rem 0 0; padding-left: 1.2rem; } .settings-company-help li + li { margin-top: .18rem; } .settings-ksef-badges { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; } .settings-warning { max-width: 60rem; margin: 0 0 .8rem; padding: .7rem .85rem; border: 1px solid var(--warn-border); border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: .85rem; line-height: 1.5; } .settings-project-warning { display: flex; align-items: flex-start; gap: .45rem; } .settings-project-warning .settings-inline-icon { margin-top: .15rem; } .settings-project-label, .settings-project-template-save, .settings-project-state { display: inline-flex; align-items: center; gap: .38rem; } .settings-project-label { flex-wrap: wrap; margin-bottom: .18rem; } .settings-project-state { vertical-align: middle; } .settings-ksef-warning, .settings-ksef-next-step { display: flex; align-items: flex-start; gap: .45rem; } .settings-ksef-warning .settings-inline-icon, .settings-ksef-next-step .settings-inline-icon { margin-top: .15rem; } .settings-ksef-save { display: inline-flex; align-items: center; gap: .38rem; } .settings-mail-warning, .settings-mail-next-step { display: flex; align-items: flex-start; gap: .45rem; } .settings-mail-warning .settings-inline-icon, .settings-mail-next-step .settings-inline-icon { margin-top: .15rem; } .settings-mail-save, .settings-mail-off { display: inline-flex; align-items: center; gap: .38rem; } .settings-backup-label, .settings-backup-folder-save, .settings-backup-error, .settings-backup-warning { display: inline-flex; align-items: center; gap: .38rem; } .settings-backup-label { margin-bottom: .18rem; } .settings-notification-option { display: flex; align-items: center; gap: .3rem; } .settings-notification-option .settings-inline-icon { color: var(--accent); } .settings-next-step { max-width: 60rem; margin: .65rem 0 0; padding: .65rem .8rem; border: 1px solid var(--accent-border); border-radius: 9px; background: var(--accent-soft); color: var(--text); font-size: .84rem; line-height: 1.5; } .settings-next-step strong { color: var(--accent); } .settings-secret-field { display: flex; align-items: stretch; gap: .5rem; width: min(100%, 38rem); } .settings-secret-field input { flex: 1 1 auto; min-width: 0; } .settings-secret-toggle { flex: 0 0 auto; white-space: nowrap; } .settings-telegram-heading { display: flex; align-items: center; justify-content: space-between; gap: .65rem; } .settings-notification-group, .settings-digest-save, .settings-telegram-connection-save, .settings-telegram-alerts-save { display: inline-flex; align-items: center; gap: .38rem; } .settings-notification-group > .settings-inline-icon { color: var(--accent); } .settings-telegram-status { flex: 0 0 auto; } @media (max-width: 700px) { .invoice-file-source-grid { grid-template-columns: minmax(0, 1fr); } .invoice-file-source button { width: 100%; } .invoice-document-current { align-items: flex-start; flex-wrap: wrap; } .invoice-document-current > span:nth-child(2) { flex: 1; } .invoice-document-current-actions { width: 100%; margin-left: 3.1rem; flex-wrap: wrap; } .dashboard-recent-table thead { display: none; } .dashboard-recent-table, .dashboard-recent-table tbody { display: block; width: 100%; } .dashboard-recent-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; padding: .8rem 0; border-bottom: 1px solid var(--border); } .dashboard-recent-table tbody tr:last-child { border-bottom: 0; } .dashboard-recent-table tbody td { display: block; width: auto; padding: 0; border: 0; } .dashboard-recent-table .dashboard-recent-document, .dashboard-recent-table .dashboard-recent-state, .dashboard-recent-table .dashboard-recent-amounts { grid-column: 1 / -1; } .dashboard-recent-table .dashboard-recent-category { grid-column: 2; grid-row: 1; } .dashboard-recent-amounts { display: flex !important; flex-wrap: wrap; gap: .35rem 1rem; } .dashboard-recent-amounts > span { justify-content: flex-start; } .dashboard-recent-amounts > span + span { margin-top: 0; } .dashboard-recent-table td[colspan] { grid-column: 1 / -1; } .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: minmax(0, 1fr); } .fleet-summary-grid { grid-template-columns: minmax(0, 1fr); } .fleet-schedule-summary { grid-template-columns: minmax(0, 1fr); } .fleet-schedule-heading { align-items: stretch; flex-direction: column; } .fleet-schedule-heading button { width: 100%; } .fleet-schedule-table th:nth-child(3), .fleet-schedule-table td:nth-child(3) { display: none; } .fleet-schedule-table th:nth-child(1) { width: 18%; } .fleet-schedule-table th:nth-child(2) { width: 23%; } .fleet-schedule-table th:nth-child(4) { width: 20%; } .fleet-schedule-table th:nth-child(5) { width: 39%; } .fleet-empty-actions > * { flex: 1 1 100%; text-align: center; } .fleet-form-grid, .fleet-inline-fields { grid-template-columns: minmax(0, 1fr); } .fleet-field-wide { grid-column: auto; } .fleet-record { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .vehicle-title-row { align-items: stretch; flex-direction: column; } .vehicle-heading-actions { justify-content: flex-start; } .dashboard-finance-grid { grid-template-columns: minmax(0, 1fr); } .dashboard-service-meta, .dashboard-service-details { flex: 1 1 100%; margin-left: 0; } .settings-model-help > summary, .settings-income-help > summary, .settings-model-advanced > summary { align-items: flex-start; flex-direction: column; gap: .15rem; } .settings-model-fetched { display: block; margin: .45rem 0 0; } .settings-income-tools > summary { align-items: flex-start; flex-direction: column; gap: .15rem; } .settings-notification-help > summary { align-items: flex-start; flex-direction: column; gap: .15rem; } .settings-telegram-help > summary { align-items: flex-start; flex-direction: column; gap: .15rem; } .settings-ksef-title { flex-direction: column; } .settings-ksef-title .settings-ksef-badges { justify-content: flex-start; } .stat.wide { grid-column: span 1; } .invoice-operation-actions { grid-template-columns: minmax(0, 1fr); } .invoice-delete-action { align-items: stretch; flex-direction: column; } .invoice-delete-action button { width: 100%; } .invoice-payment-actions { grid-template-columns: minmax(0, 1fr); } .invoice-project-change { grid-template-columns: minmax(0, 1fr); } .invoice-project-change > label { grid-column: auto; } .invoice-project-change button { width: 100%; } .invoice-items-heading { align-items: flex-start; flex-direction: column; } thead th, tbody td { padding: .45rem .5rem; font-size: .82rem; } h1 { font-size: 1.25rem; } } @media (max-width: 560px) { /* Więcej miejsca na treść na wąskim telefonie */ main { margin: 1.1rem auto; padding: 0 .9rem; } .card { padding: 1.05rem 1rem; } .dropzone { padding: 1.6rem .9rem; } .upload-process { grid-template-columns: 1fr; } .upload-page #submit-btn { width: 100%; min-height: 2.75rem; } /* Pole wyszukiwania na własnym, pełnym wierszu — placeholder się nie ucina */ form.filters input[type="text"] { flex: 1 1 100%; } .invoice-filter-field { flex: 1 1 100%; min-width: 0; width: 100%; } .invoice-filter-toggle { width: 100%; } .analytics-filters > button, .analytics-filters-clear { width: 100%; text-align: center; } .analytics-heading { align-items: stretch; flex-direction: column; } .analytics-heading .btn { text-align: center; } .vehicles-heading { align-items: stretch; flex-direction: column; } .vehicles-heading .btn { text-align: center; } .vehicle-heading-actions { display: grid; grid-template-columns: minmax(0, 1fr); } .fleet-inline-form { align-items: stretch; flex-direction: column; } .fleet-inline-form select { min-width: 0; width: 100%; } .invoice-bulk-grid { grid-template-columns: minmax(0, 1fr); gap: .7rem; } .invoice-bulk-action { grid-template-columns: minmax(0, 1fr); } .invoice-bulk-action label { grid-column: auto; } .invoice-bulk-action button { width: 100%; } .manual-cost-project, .manual-cost-field { width: 100%; max-width: none; } .manual-cost-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; } .manual-cost-vat-toggle { margin: 0; min-height: 2.75rem; } .manual-cost-actions > * { flex: 1 1 100%; text-align: center; } /* Ustawienia zawierają wiele technicznych, szerokich pól. Na telefonie każde z nich mieści się w karcie, a grupy układają się w jedną kolumnę. */ .settings-page, .settings-page .card, .settings-page form { min-width: 0; max-width: 100%; } .settings-page form.filters, .settings-page form[style*="inline-flex"] { display: flex !important; width: 100%; align-items: stretch !important; } .settings-page form.filters > div { flex: 1 1 100% !important; width: 100%; min-width: 0 !important; } .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .settings-page select, .settings-page textarea { width: 100% !important; min-width: 0 !important; max-width: 100%; } .settings-page form.filters > button, .settings-page form[style*="inline-flex"] > button { flex: 1 1 100%; width: 100%; } .settings-page h2 .muted { display: block; margin-top: .2rem; } .settings-page code { overflow-wrap: anywhere; } .settings-page .opt { align-items: flex-start; } .settings-secret-field { flex-wrap: wrap; width: 100%; } .settings-secret-toggle { flex: 1 1 100%; width: 100%; } .settings-telegram-heading { align-items: flex-start; flex-wrap: wrap; } .settings-toc { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .45rem; padding: .6rem; scrollbar-width: thin; scroll-snap-type: x proximity; } .settings-toc a { flex: 0 0 auto; text-align: center; scroll-snap-align: start; } .import-page, .import-page .card, .import-page form { min-width: 0; max-width: 100%; } .import-page .seg { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .import-page .seg-btn { justify-content: center; width: 100%; } .import-page input:not([type="checkbox"]):not([type="radio"]), .import-page select { width: 100%; min-width: 0; max-width: 100%; } .import-actions { align-items: stretch; } .import-actions button { width: 100%; } .import-actions .muted { margin: 0; } form.project-create-form { align-items: stretch; } form.project-create-form > .project-create-field:not(.project-create-color) { flex: 1 1 100%; width: 100%; min-width: 0; } .project-create-color { flex-basis: 100%; } .project-create-break { display: none; } form.project-create-form > button { flex: 1 1 100%; width: 100%; } } @media (prefers-reduced-motion: reduce) { body { transition: none; } .dashboard-service-details > summary::before { transition: none; } } /* ===== Lista zmian (/lista-zmian) ===== */ .changelog-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .55rem; margin: 0 0 1.1rem; } .changelog-summary-item { min-width: 0; padding: .65rem .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); } .changelog-summary-item strong { display: block; color: var(--text); font-size: 1.2rem; line-height: 1.15; font-variant-numeric: tabular-nums; } .changelog-summary-item span { display: block; margin-top: .18rem; color: var(--muted); font-size: .76rem; line-height: 1.25; } .changelog-summary-note { margin: -.35rem 0 1rem; font-size: .85rem; } .changelog-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .65rem; align-items: end; margin: 0 0 1.15rem; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); } .changelog-search-field { min-width: 0; } .changelog-search-field label { display: block; margin-bottom: .3rem; color: var(--text); font-size: .76rem; font-weight: 650; } .changelog-search-field input { width: 100%; } .changelog-search-status { grid-column: 1 / -1; min-height: 1.1rem; margin: 0; font-size: .78rem; } .changelog-empty { margin: 0 0 1rem; text-align: center; color: var(--muted); } .chg-day[hidden], .chg-item[hidden] { display: none; } .chg-day { margin-bottom: .75rem; } .chg-day[open] { margin-bottom: 1.8rem; } .chg-date { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding-bottom: .45rem; margin-bottom: .5rem; border-bottom: 2px solid var(--border-strong); position: sticky; top: 0; background: var(--bg); z-index: 1; cursor: pointer; list-style: none; } .chg-date::-webkit-details-marker { display: none; } .chg-day:not([open]) > .chg-date { margin-bottom: 0; } .chg-date:hover .chg-date-big { color: var(--accent); } .chg-date-toggle { width: .55rem; height: .55rem; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .16s ease; } .chg-day[open] > .chg-date .chg-date-toggle { transform: rotate(225deg); } .chg-date-big { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } .chg-date .muted { font-size: .82rem; } .chg-list { display: flex; flex-direction: column; } .chg-item { display: grid; grid-template-columns: 6.2rem 1fr; gap: .9rem; align-items: start; padding: .7rem .2rem; border-bottom: 1px solid var(--border); } .chg-item:last-child { border-bottom: 0; } .chg-type { justify-self: start; margin-top: .1rem; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; padding: .18rem .5rem; border-radius: 999px; border: 1px solid transparent; } .chg-type.nowosc { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); } .chg-type.poprawka { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); } .chg-type.porzadki { color: var(--muted); background: var(--badge-neutral-bg); border-color: var(--border); } .chg-type.wycofano { color: var(--err); background: var(--err-bg); border-color: var(--err-border); } .chg-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; } .chg-title { font-weight: 650; color: var(--text); } .chg-area { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--badge-cat-fg); background: var(--badge-cat-bg); border: 1px solid var(--badge-cat-border); border-radius: 6px; padding: .05rem .4rem; } .chg-desc { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: .18rem; } @media (max-width: 560px) { .changelog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .changelog-search { grid-template-columns: minmax(0, 1fr); } .changelog-search > button { width: 100%; } .changelog-search-status { grid-column: 1; } .chg-item { grid-template-columns: 1fr; gap: .35rem; } .chg-type { margin-top: 0; } } /* ===== Edycja pozycji faktury ===== */ #pozycje-edit { table-layout: fixed; } #pozycje-edit thead th { padding: .45rem .25rem; white-space: normal; overflow-wrap: anywhere; font-size: .62rem; letter-spacing: .02em; line-height: 1.2; } #pozycje-edit .sort-button::after { display: none; } #pozycje-edit td { padding: .4rem .25rem; } #pozycje-edit th:nth-child(1) { width: 5%; } #pozycje-edit th:nth-child(2) { width: 27%; } #pozycje-edit th:nth-child(3), #pozycje-edit th:nth-child(4), #pozycje-edit th:nth-child(7) { width: 9%; } #pozycje-edit th:nth-child(5) { width: 13%; } #pozycje-edit th:nth-child(6), #pozycje-edit th:nth-child(8) { width: 11%; } #pozycje-edit th:nth-child(9) { width: 6%; } table.items input { width: 100%; min-width: 3.4rem; padding: .3rem .4rem; font-size: .82rem; border-radius: 6px; } table.items input[name="pos_name"] { min-width: 8rem; } table.items input.right { text-align: right; } table.items td.lp { color: var(--muted); font-size: .8rem; text-align: center; } #pozycje-edit input, #pozycje-edit input[name="pos_name"] { min-width: 0; padding: .3rem .25rem; font-size: .76rem; } #pozycje-edit button.del-row { padding: .15rem .3rem; } button.del-row { background: none; border: 1px solid var(--border-strong); color: var(--err); border-radius: 6px; padding: .15rem .45rem; cursor: pointer; line-height: 1; font-size: .82rem; } button.del-row:hover { background: var(--err-bg); filter: none; box-shadow: none; } /* Skróty na długiej karcie faktury — sekcja bez wielokrotnego przewijania. */ .invoice-section-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .85rem 0 1rem; } .invoice-section-nav a { display: inline-flex; align-items: center; gap: .28rem; min-height: 2.25rem; padding: .38rem .72rem; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; font-weight: 700; text-decoration: none; } .invoice-section-nav a:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); } .invoice-section-nav a[aria-current="location"] { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 2px 8px rgba(37, 99, 235, .28); } .invoice-section-nav .section-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .invoice-section-anchor { scroll-margin-top: 5rem; } @media (min-width: 769px) { .invoice-section-nav { position: sticky; top: .4rem; z-index: 8; border-radius: 10px; box-shadow: 0 8px 22px rgba(13, 21, 36, .2); } } @media (max-width: 560px) { .invoice-section-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; } .invoice-section-nav a { justify-content: center; padding-inline: .35rem; } .invoice-section-nav .section-icon { display: none; } .invoice-version-comparison-head { display: none; } .invoice-version-comparison-row { grid-template-columns: 1fr; gap: .2rem; } .invoice-version-comparison-row span::before { color: var(--muted); font-weight: 650; } .invoice-version-comparison-row span:nth-child(2)::before { content: "Obecnie: "; } .invoice-version-comparison-row span:nth-child(3)::before { content: "Nowy skan: "; } .invoice-version-history-item { grid-template-columns: 1fr 1fr; } .invoice-version-history-item > div { grid-column: 1 / -1; } } /* Kolumna „Dokumenty" na liście inwestycji */ td.doc-flags { white-space: nowrap; font-size: .82rem; font-variant-numeric: tabular-nums; } td.doc-flags > span, td.doc-flags > a { display: inline-block; margin-right: .55rem; } td.doc-flags > a { text-decoration: none; } td.doc-flags > a:hover { text-decoration: underline; } td.doc-flags .warn { color: var(--warn); } td.doc-flags .err { color: var(--err); } /* Zielony przycisk akcji (np. „Podepnij" przy pewnym dopasowaniu) */ button.ok { background: var(--ok); border: 1px solid var(--ok); color: #fff; } button.ok:hover { filter: brightness(1.06); box-shadow: none; } /* ===== Aktualna flota i archiwum pojazdów ===== */ .fleet-view-tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin: .35rem 0 1.15rem; border-bottom: 1px solid var(--border); } .fleet-view-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .8rem; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; } .fleet-view-tabs a:hover { color: var(--text); } .fleet-view-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; } .fleet-view-tabs a span { min-width: 1.45rem; padding: .04rem .38rem; text-align: center; font-size: .72rem; border-radius: 999px; background: var(--badge-neutral-bg); color: var(--muted); } .fleet-lifecycle { display: inline-flex; align-items: center; max-width: 16rem; padding: .14rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.25; border: 1px solid var(--border); } .fleet-lifecycle.active { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); } .fleet-lifecycle.archived { color: var(--muted); background: var(--badge-neutral-bg); border-color: var(--border-strong); } .fleet-close-card { border-left: 4px solid var(--warn); } .fleet-archive-card { border-left: 4px solid var(--muted); } .fleet-archive-summary { margin-top: 1rem; } .fleet-archive-summary > div { min-width: 0; padding: .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } @media (max-width: 560px) { .fleet-view-tabs { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 0; } .fleet-view-tabs a { justify-content: space-between; border: 1px solid var(--border); border-radius: 8px; } .fleet-view-tabs a.active { border-color: var(--accent); } }