:root { color-scheme: light dark; --color-canvas: #f3f0e8; --color-surface: #fcfaf5; --color-surface-muted: #eae6dc; --color-ink: #181a18; --color-ink-muted: #5b625d; --color-line: #cec9bd; --color-brand: #782f3b; --color-operational: #21463b; --color-warning: #8a5900; --color-danger: #a33a32; --color-success: #276348; --color-focus: #f2c94c; --color-on-brand: #fffaf5; --color-on-operational: #fffaf5; --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-document: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --radius-control: .25rem; --radius-mobile: .5rem; --sidebar-width: 15.5rem; --sidebar-width-collapsed: 4rem; /* Aliasy utrzymują spójność ze starszymi klasami w małych fragmentach UI. */ --tlo: var(--color-canvas); --panel: var(--color-surface); --tekst: var(--color-ink); --slaby: var(--color-ink-muted); --linia: var(--color-line); --akcent: var(--color-brand); --ok: var(--color-success); } @media (prefers-color-scheme: dark) { :root { --color-canvas: #111512; --color-surface: #19201c; --color-surface-muted: #222b26; --color-ink: #f1f3ef; --color-ink-muted: #aab4ad; --color-line: #48564e; --color-brand: #e49aa5; --color-operational: #9acbb8; --color-warning: #f0c36a; --color-danger: #f09a91; --color-success: #8dd0ad; --color-on-brand: #201214; --color-on-operational: #102019; } } *, *::before, *::after { box-sizing: border-box; } html { min-width: 20rem; background: var(--color-canvas); scroll-behavior: smooth; } body { min-height: 100vh; margin: 0; background: var(--color-canvas); color: var(--color-ink); font: 400 1rem/1.55 var(--font-ui); text-rendering: optimizeLegibility; } button, input, select, textarea { font: inherit; } button, a, input, select, textarea, summary { touch-action: manipulation; } a { color: var(--color-brand); text-underline-offset: .18em; text-decoration-thickness: .08em; } a:hover { text-decoration-thickness: .13em; } :focus-visible { outline: .2rem solid var(--color-focus); outline-offset: .18rem; } h1, h2, h3, p { overflow-wrap: anywhere; } h1 { margin: 0; font: 600 clamp(1.75rem, 3vw, 2.55rem)/1.08 var(--font-document); letter-spacing: -.025em; } h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; } h3 { margin: 0; font-size: 1rem; line-height: 1.3; } p { margin: 0 0 var(--space-4); } code, .technical-value, time, .number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .skip-link { position: fixed; z-index: 100; top: var(--space-2); left: var(--space-2); padding: var(--space-3) var(--space-4); translate: 0 -160%; border: .125rem solid var(--color-ink); background: var(--color-focus); color: #181a18; font-weight: 700; } .skip-link:focus { translate: 0; } .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; } /* Zwinięty pasek nadpisuje zmienną globalnie: kolumny kanbana już dziś liczą swoją szerokość przez calc() z --sidebar-width, więc same się poszerzają — bez dodatkowej logiki układu. Klasa siedzi na , ustawiana wcześnie przez static/crm/app.js, żeby uniknąć mignięcia rozwiniętym paskiem. */ html.sidebar-collapsed { --sidebar-width: var(--sidebar-width-collapsed); } .sidebar-collapsed .nav-label { display: none; } .app-sidebar { position: sticky; z-index: 20; top: 0; display: flex; height: 100vh; min-height: 32rem; flex-direction: column; /* Niski ekran (albo 200% zoomu) nie może schować wylogowania poza krawędź. */ overflow-y: auto; border-right: 1px solid var(--color-line); background: var(--color-surface); } .brand { display: flex; min-height: 5.25rem; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-line); color: var(--color-ink); text-decoration: none; } .brand-mark { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--color-brand); color: var(--color-brand); font-family: var(--font-mono); font-size: .68rem; font-weight: 700; line-height: 1.05; text-align: center; } .brand-name { display: block; font: 600 1.08rem/1.1 var(--font-document); } .brand-context { display: block; margin-top: .15rem; color: var(--color-ink-muted); font-size: .75rem; } .sidebar-collapsed .brand { justify-content: center; padding-inline: var(--space-2); } .sidebar-toggle { display: flex; width: calc(100% - var(--space-4)); min-height: 2.25rem; margin: var(--space-2) var(--space-2) 0; justify-content: flex-start; gap: var(--space-2); font-size: .85rem; } .sidebar-toggle__icon { font-family: var(--font-mono); font-size: .95rem; } .sidebar-collapsed .sidebar-toggle { width: calc(100% - var(--space-2)); margin-inline: var(--space-1); justify-content: center; } .primary-navigation { padding: var(--space-6) var(--space-3); } .primary-navigation-label { margin: 0 var(--space-3) var(--space-2); color: var(--color-ink-muted); font-size: .72rem; font-weight: 600; letter-spacing: .06em; } .primary-navigation ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .primary-navigation a { display: flex; min-height: 2.75rem; align-items: center; gap: var(--space-3); padding: .62rem var(--space-3); border-left: .2rem solid transparent; color: var(--color-ink-muted); font-size: .94rem; font-weight: 500; text-decoration: none; } .sidebar-collapsed .primary-navigation a { justify-content: center; padding-inline: 0; } .primary-navigation a:hover { background: var(--color-surface-muted); color: var(--color-ink); } .primary-navigation a[aria-current="page"] { border-left-color: var(--color-brand); background: var(--color-surface-muted); color: var(--color-ink); font-weight: 650; } .nav-index { color: var(--color-ink-muted); font: 500 .72rem/1 var(--font-mono); } .account-panel { display: grid; gap: var(--space-3); margin-top: auto; padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--color-line); } .sidebar-collapsed .account-panel { padding-inline: var(--space-2); justify-items: center; } .account-name, .account-role { display: block; } .account-name { font-weight: 600; } .account-role { color: var(--color-ink-muted); font-size: .8rem; } .app-content { min-width: 0; } .app-main { width: min(100%, 76rem); margin-inline: auto; padding: var(--space-8) var(--space-8) 4rem; } .app-main--wide { width: min(100%, 94rem); } /* Kanban: żadnego capu w rem — kolumny mają wypełniać dokładnie tyle, ile zostawia zwinięty albo rozwinięty sidebar, nie sztywną szerokość. */ .app-main--full { width: 100%; } .app-main--reading { width: min(100%, 68rem); } /* Powłoka zalogowanego widoku układa się w `.app-shell`; klasa na zostaje jawnym znacznikiem trybu i utrzymuje kanwę na pełnej wysokości okna. */ .app-layout { display: flow-root; min-height: 100vh; } .auth-layout { display: grid; min-height: 100vh; place-items: center; padding: var(--space-6); background: linear-gradient(var(--color-line), var(--color-line)) 0 0 / 100% 1px no-repeat, var(--color-canvas); } .auth-main { width: min(100%, 31rem); } .auth-card { padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--color-line); border-top: .3rem solid var(--color-brand); background: var(--color-surface); } .auth-kicker, .page-kicker { margin-bottom: var(--space-2); color: var(--color-brand); font-size: .76rem; font-weight: 650; letter-spacing: .07em; } .auth-intro { margin: var(--space-3) 0 var(--space-6); color: var(--color-ink-muted); } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-line); } .page-header__context { max-width: 48rem; margin: var(--space-2) 0 0; color: var(--color-ink-muted); } .page-header__meta, .page-header__actions, .inline-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .back-link { display: inline-flex; min-height: 2.75rem; align-items: center; margin-bottom: var(--space-4); color: var(--color-ink-muted); font-size: .88rem; } .muted, .slaby { color: var(--color-ink-muted); font-size: .86rem; } .eyebrow { color: var(--color-ink-muted); font-size: .75rem; font-weight: 600; letter-spacing: .055em; } .badge, .znacznik, .status { display: inline-flex; min-height: 1.65rem; align-items: center; padding: .18rem .5rem; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink-muted); font-size: .76rem; font-weight: 600; line-height: 1.2; } .badge--brand { border-color: var(--color-brand); color: var(--color-brand); } .badge--warning { border-color: var(--color-warning); color: var(--color-warning); } .badge--success { border-color: var(--color-success); color: var(--color-success); } button, .button, .przycisk { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .58rem .9rem; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); cursor: pointer; font-size: .9rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; } button:hover, .button:hover, .przycisk:hover { border-color: var(--color-ink-muted); background: var(--color-surface-muted); } button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; } .button--primary, button.glowny { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-on-brand); } .button--primary:hover, button.glowny:hover { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-surface); } .button--secondary { border-color: var(--color-brand); color: var(--color-brand); } .button--quiet { border-color: transparent; background: transparent; color: var(--color-ink-muted); } .button--danger { border-color: var(--color-danger); background: transparent; color: var(--color-danger); } label, legend, .field-label, .etykieta { font-weight: 600; } fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } input, select, textarea { min-height: 2.75rem; padding: .58rem .68rem; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); } input:hover, select:hover, textarea:hover { border-color: var(--color-ink-muted); } input[type="checkbox"], input[type="radio"] { width: 1.15rem; min-height: 1.15rem; margin: 0 .3rem 0 0; padding: 0; accent-color: var(--color-brand); } textarea { min-height: 10rem; resize: vertical; } .form-stack { display: grid; gap: var(--space-4); } .form-field { display: grid; gap: var(--space-2); } .form-field input, .form-field select, .form-field textarea { width: 100%; } .field-help { color: var(--color-ink-muted); font-size: .83rem; } .form-row, form.rzad { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); } .form-row > input, .form-row > select, form.rzad > input, form.rzad > select { flex: 1 1 11rem; } .banner, .blad { margin: 0 0 var(--space-6); padding: var(--space-4); border: 1px solid var(--color-line); border-left: .25rem solid var(--color-danger); background: var(--color-surface); } .banner > :last-child, .blad > :last-child { margin-bottom: 0; } .banner--info { border-left-color: var(--color-operational); } .banner--warning { border-left-color: var(--color-warning); } .banner--success, .password-banner { border-left-color: var(--color-success); } .banner--error { border-left-color: var(--color-danger); } .password-value { display: block; margin: var(--space-3) 0; padding: var(--space-3); border: 1px dashed var(--color-success); background: var(--color-surface-muted); color: var(--color-ink); font-size: clamp(1rem, 3vw, 1.3rem); letter-spacing: .05em; overflow-wrap: anywhere; user-select: all; } .table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--color-line); background: var(--color-surface); } table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: .9rem; } th, td { padding: .72rem .8rem; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; } th { color: var(--color-ink-muted); font-size: .74rem; font-weight: 650; letter-spacing: .045em; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--color-surface-muted); } .table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; } .table-actions form { margin: 0; } .summary-list { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.4fr); gap: .42rem var(--space-4); margin: 0; } .summary-list dt { color: var(--color-ink-muted); } .summary-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .panel { padding: var(--space-4); border-top: 1px solid var(--color-line); background: transparent; } .panel h2 { margin-bottom: var(--space-4); } .empty-state, .pusta { margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); color: var(--color-ink-muted); font-size: .88rem; } details > summary { min-height: 2.75rem; padding: .62rem 0; cursor: pointer; font-weight: 600; } /* Moja praca */ .work-register { border-top: .2rem solid var(--color-brand); } .work-section { border-bottom: 1px solid var(--color-line); } .work-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0 var(--space-3); } .work-section__title { display: flex; align-items: center; gap: var(--space-3); font-size: .94rem; } .work-count { display: inline-grid; min-width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--color-line); border-radius: 999px; font: 600 .78rem/1 var(--font-mono); } .work-section__description, .soczewka { margin: -.25rem 0 var(--space-3); color: var(--color-ink-muted); font-size: .8rem; } .work-row, .pozycja { display: grid; /* Kolumny skrajne mają szerokość stałą, nie `auto`: każdy wiersz jest osobnym gridem, więc przy `auto` szerokość powodu ("bez terminu" vs pełna data) przesuwała start kolumny z treścią i rejestr przestawał się skanować pionowo. */ grid-template-columns: 7.5rem minmax(10rem, 1.1fr) minmax(14rem, 2fr) 13rem; gap: var(--space-3); align-items: center; min-height: 3.65rem; padding: var(--space-3) var(--space-2); border-top: 1px solid var(--color-line); background: transparent; } .work-row:hover, .pozycja:hover { background: var(--color-surface); } .work-row--urgent, .pozycja.pilne { box-shadow: inset .2rem 0 0 var(--color-warning); } .work-row__company, .pozycja .firma { color: var(--color-ink); font-weight: 650; } .work-row__task, .pozycja .tresc { min-width: 0; } .work-row__reason, .pozycja .powod { color: var(--color-ink-muted); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; } .work-row--urgent .work-row__reason, .pozycja.pilne .powod { color: var(--color-warning); font-weight: 600; } /* Kanban */ .pipeline-tabs, .zakladki { display: flex; gap: 0; margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-line); } .pipeline-tabs a, .zakladki a { min-height: 2.75rem; padding: .65rem var(--space-4); border-bottom: .2rem solid transparent; color: var(--color-ink-muted); font-size: .88rem; font-weight: 600; text-decoration: none; } .pipeline-tabs a[aria-current="page"], .zakladki a[aria-current="page"] { border-bottom-color: var(--color-brand); color: var(--color-ink); } .kanban-scroll { width: 100%; overflow-x: auto; padding-bottom: var(--space-4); } .kanban { display: grid; grid-auto-columns: minmax(15.5rem, 1fr); grid-auto-flow: column; gap: 1px; min-width: max-content; overflow: visible; border: 1px solid var(--color-line); background: var(--color-line); } .kanban-column, .kolumna { width: min(19rem, calc((100vw - var(--sidebar-width) - 4rem) / 3)); min-width: 15.5rem; min-height: 13rem; padding: var(--space-3); border: 0; border-radius: 0; background: var(--color-surface-muted); } .kanban-column__heading, .kolumna h2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-ink-muted); font-size: .76rem; font-weight: 650; letter-spacing: .035em; } .kanban-count, .liczba { float: none; color: var(--color-ink-muted); font-family: var(--font-mono); } .deal-card, .karta { margin-bottom: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: .125rem; background: var(--color-surface); box-shadow: none; } .deal-card:last-child, .karta:last-child { margin-bottom: 0; } .deal-card__title, .karta > a { color: var(--color-ink); font-weight: 650; } .deal-card p, .karta p { margin: var(--space-1) 0 0; } .deal-card__missing-action { color: var(--color-danger); font-weight: 600; } .closed-deals, .zamkniete { margin-top: var(--space-8); border-top: 1px solid var(--color-line); } /* Karta deala */ .deal-header { align-items: flex-start; } .deal-status-line { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); } .next-action { min-width: min(100%, 18rem); padding-left: var(--space-4); border-left: .2rem solid var(--color-operational); } .next-action strong, .next-action span { display: block; } .next-action span { color: var(--color-ink-muted); font-size: .76rem; } .deal-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(25rem, 1fr) minmax(17rem, 21rem); gap: var(--space-8); align-items: start; } .deal-sidebar, .deal-actions, .deal-main { min-width: 0; } .deal-sidebar { grid-column: 1; grid-row: 1; } .deal-main { grid-column: 2; grid-row: 1; } .deal-actions { grid-column: 3; grid-row: 1; } .deal-sidebar .panel { padding-inline: 0; } .deal-main > section + section { margin-top: var(--space-8); } .section-heading { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); } .deal-actions { position: sticky; top: var(--space-6); } .deal-actions > h2 { margin-bottom: var(--space-3); } .transition-panel { border-top: 1px solid var(--color-line); } .transition-panel[open] { padding-bottom: var(--space-4); } .transition-panel summary { color: var(--color-ink); } .transition-panel--primary summary { color: var(--color-brand); } .transition-panel--terminal summary { color: var(--color-ink-muted); } .transition-panel form, .no-show-form { display: grid; gap: var(--space-2); } .transition-panel input, .transition-panel select, .no-show-form input { width: 100%; } .transition-panel label, .no-show-form label { margin-top: var(--space-2); color: var(--color-ink-muted); font-size: .84rem; } .timeline { margin: 0; padding: 0; list-style: none; } .timeline-item { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0 var(--space-4) var(--space-4); border-left: 1px solid var(--color-line); } .timeline-item::before { position: absolute; top: 1.15rem; left: -.3rem; width: .55rem; height: .55rem; border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-surface); content: ""; } .timeline-item__meta { color: var(--color-ink-muted); font-size: .78rem; } .timeline-item__content p:last-child { margin-bottom: 0; } /* Audyt */ .audit-header { align-items: flex-start; } .save-status, .zapis { position: sticky; z-index: 10; top: var(--space-4); min-width: 10rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-success); background: var(--color-surface); color: var(--color-success); font-weight: 650; text-align: center; } .save-status.blad-zapisu, .zapis.blad-zapisu { border-color: var(--color-danger); color: var(--color-danger); } .audit-workspace { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--space-8); align-items: start; } .audit-progress { position: sticky; top: var(--space-6); border-top: .2rem solid var(--color-brand); } .audit-progress h2 { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); font-size: .84rem; } .audit-progress ol { margin: 0; padding: 0; list-style: none; counter-reset: audit-nav; } .audit-progress a { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: var(--space-2); min-height: 2.75rem; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink-muted); font-size: .82rem; text-decoration: none; counter-increment: audit-nav; } .audit-progress a::before { content: counter(audit-nav, decimal-leading-zero); color: var(--color-brand); font-family: var(--font-mono); font-size: .7rem; } .agenda { display: grid; gap: var(--space-8); margin: 0; counter-reset: audit-section; } .audit-section, .sekcja-audytu { scroll-margin-top: var(--space-8); padding: var(--space-6) 0 0; border: 0; border-top: 1px solid var(--color-line); background: transparent; counter-increment: audit-section; } .audit-section:first-child, .sekcja-audytu:first-child { border-top: .2rem solid var(--color-brand); } .audit-section > h2, .sekcja-audytu > h2 { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-6); font: 600 1.35rem/1.2 var(--font-document); } .audit-section > h2::before, .sekcja-audytu > h2::before { content: counter(audit-section, decimal-leading-zero); color: var(--color-brand); font: 600 .78rem/1 var(--font-mono); } .pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); } .pole { min-width: 0; } .pole > label:first-child, .etykieta { display: block; margin-bottom: var(--space-2); } .opcje { display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); } .opcje label { display: inline-flex; min-height: 2.75rem; align-items: center; white-space: normal; } .pelna { grid-column: 1 / -1; } .akcje { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); } .narzedzie { padding: var(--space-6) 0; border-top: 1px solid var(--color-line); } .narzedzie:first-of-type { padding-top: 0; border-top: 0; } .narzedzie h3 { margin-bottom: var(--space-4); } .luka { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr); gap: var(--space-3); margin: var(--space-2) 0; } .luka select, .luka input, .audit-section textarea, .audit-section input[type="datetime-local"], .audit-section input[type="number"], .sekcja-audytu textarea, .sekcja-audytu input[type="datetime-local"], .sekcja-audytu input[type="number"] { width: 100%; } .inline-warning, .ostrzezenie { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-3); border-left: .2rem solid var(--color-warning); } /* Odczyt zatwierdzonego audytu: kolejne narzędzia AI muszą się od siebie odklejać, inaczej trzy listy `dl` czyta się jak jedną. */ .read-only-audit .tool-heading { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-line); } .read-only-audit .tool-heading:first-of-type { margin-top: var(--space-3); padding-top: 0; border-top: 0; } .audit-checklist, .braki { margin-top: var(--space-8); padding: var(--space-6); border: 1px solid var(--color-line); border-left: .25rem solid var(--color-operational); background: var(--color-surface); } .audit-checklist h2, .braki h2 { margin-bottom: var(--space-3); } .read-only-audit .summary-list, .odczyt dl { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: .35rem var(--space-4); } .odczyt dt { color: var(--color-ink-muted); } .odczyt dd { margin: 0; white-space: pre-wrap; } @media (max-width: 74rem) { .deal-layout { grid-template-columns: minmax(13rem, 17rem) minmax(24rem, 1fr); } .deal-actions { position: static; grid-column: 1 / -1; grid-row: 2; border-top: .2rem solid var(--color-brand); padding-top: var(--space-4); } } @media (max-width: 52rem) { .app-shell { display: block; } .app-sidebar { position: sticky; height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--color-line); } /* Pasek już jest poziomy i zwarty — ręczne zwijanie nie ma tu zastosowania. Stan z localStorage zostaje nietknięty, więc po powrocie na szeroki ekran wraca dokładnie tam, gdzie użytkownik go zostawił. */ .sidebar-toggle { display: none; } .brand { min-height: 3.75rem; padding: var(--space-2) var(--space-4); } .brand-mark { width: 2.25rem; height: 2.25rem; } .brand-context, .primary-navigation-label { display: none; } .primary-navigation { order: 3; overflow-x: auto; padding: 0 var(--space-2); } .primary-navigation ul { display: flex; width: max-content; } .primary-navigation a { border-bottom: .2rem solid transparent; border-left: 0; white-space: nowrap; } .primary-navigation a[aria-current="page"] { border-bottom-color: var(--color-brand); border-left: 0; } .account-panel { position: absolute; top: 0; right: 0; display: flex; min-height: 3.75rem; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-4); border: 0; } .account-name { font-size: .84rem; } .account-role { font-size: .72rem; } .account-panel button { min-height: 2.75rem; padding-inline: var(--space-2); } .app-main { padding: var(--space-6) var(--space-4) 4rem; } .work-row, .pozycja { grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); } .work-row__task, .pozycja .tresc, .work-row__reason, .pozycja .powod { grid-column: 2; text-align: left; } .deal-layout { grid-template-columns: 1fr; } .deal-sidebar, .deal-main, .deal-actions { grid-column: auto; grid-row: auto; } .audit-workspace { grid-template-columns: 1fr; } .audit-progress { position: sticky; z-index: 8; top: 6.5rem; overflow-x: auto; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: var(--color-surface); } .audit-progress h2 { display: none; } .audit-progress ol { display: flex; width: max-content; } .audit-progress a { min-width: 8rem; padding-inline: var(--space-3); border-right: 1px solid var(--color-line); border-bottom: 0; } } @media (max-width: 39rem) { .auth-layout { padding: 0; } .auth-main, .auth-card { width: 100%; min-height: 100vh; } .page-header { align-items: stretch; flex-direction: column; margin-bottom: var(--space-6); } .account-identity { display: none; } .summary-list, .read-only-audit .summary-list, .odczyt dl, .pola, .luka { grid-template-columns: 1fr; } .pelna { grid-column: auto; } .summary-list dd, .odczyt dd { margin-bottom: var(--space-3); } .timeline-item { grid-template-columns: 1fr; gap: var(--space-1); } .kanban-column, .kolumna { width: 82vw; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } @media print { .app-sidebar, .skip-link, .page-header__actions, .deal-actions { display: none !important; } .app-shell { display: block; } .app-main { width: 100%; max-width: none; padding: 0; } }