/* ========================================================================== TractionOS — design system Tokeny → baza → layout → komponenty → widoki. Motyw jasny/ciemny przez [data-theme] na (ustawiany przez theme_controller, domyślnie system). ========================================================================== */ :root { --brand: #4f46e5; --brand-hover: color-mix(in oklab, var(--brand) 88%, black); --brand-soft: color-mix(in oklab, var(--brand) 12%, transparent); --brand-contrast: #fff; --bg: #f6f6f8; --surface: #ffffff; --surface-2: #fafafb; --surface-hover: #f3f3f6; --border: #e6e6eb; --border-strong: #d4d4dc; --text: #18181b; --text-2: #3f3f46; --muted: #71717a; --faint: #a1a1aa; --sidebar-bg: #fbfbfc; --sidebar-border: var(--border); --sidebar-text: #52525b; --sidebar-active: var(--text); --sidebar-active-bg: #ededf1; --success: #059669; --success-soft: #ecfdf5; --success-text: #047857; --warning: #d97706; --warning-soft: #fffbeb; --warning-text: #b45309; --danger: #dc2626; --danger-soft: #fef2f2; --danger-text: #b91c1c; --info: #0284c7; --info-soft: #f0f9ff; --info-text: #0369a1; --neutral-soft: #f4f4f5; --neutral-text: #52525b; --primary-soft: var(--brand-soft); --primary-text: var(--brand); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-xs: 0 1px 2px rgb(16 16 24 / .04); --shadow-sm: 0 1px 2px rgb(16 16 24 / .05), 0 1px 3px rgb(16 16 24 / .04); --shadow-md: 0 4px 12px -2px rgb(16 16 24 / .08), 0 2px 4px -2px rgb(16 16 24 / .05); --shadow-lg: 0 16px 40px -8px rgb(16 16 24 / .18); --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent); --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --chart: color-mix(in oklab, var(--brand) 72%, transparent); --sidebar-w: 256px; --topbar-h: 60px; color-scheme: light; } :root[data-theme="dark"] { --brand-hover: color-mix(in oklab, var(--brand) 85%, white); --brand-soft: color-mix(in oklab, var(--brand) 20%, transparent); --bg: #0c0c10; --surface: #131318; --surface-2: #17171d; --surface-hover: #1c1c23; --border: #25252d; --border-strong: #34343e; --text: #ededf0; --text-2: #c9c9d1; --muted: #8e8e99; --faint: #60606b; --sidebar-bg: #101014; --sidebar-text: #a1a1aa; --sidebar-active: #fafafa; --sidebar-active-bg: #1f1f26; --success-soft: rgb(16 185 129 / .12); --success-text: #34d399; --warning-soft: rgb(245 158 11 / .12); --warning-text: #fbbf24; --danger-soft: rgb(239 68 68 / .12); --danger-text: #f87171; --info-soft: rgb(14 165 233 / .12); --info-text: #38bdf8; --neutral-soft: rgb(161 161 170 / .12); --neutral-text: #a1a1aa; --primary-text: color-mix(in oklab, var(--brand) 60%, white); --chart: color-mix(in oklab, var(--brand) 70%, white); --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 6px 16px -4px rgb(0 0 0 / .5); --shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .7); color-scheme: dark; } /* ---------- Baza ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a.link, .prose a { color: var(--primary-text); } a.link:hover, .prose a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 22px; letter-spacing: -.02em; } h2 { font-size: 16px; } h3 { font-size: 14px; } p { margin: 0; } svg { flex-shrink: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; } code, .mono { font-family: var(--mono); font-size: .92em; } .muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 12.5px; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .num { font-variant-numeric: tabular-nums; } .text-right { text-align: right; } .text-danger { color: var(--danger-text); } .text-success { color: var(--success-text); } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); } ::selection { background: color-mix(in oklab, var(--brand) 25%, transparent); } .stack { display: flex; flex-direction: column; gap: var(--gap, 16px); } .row { display: flex; align-items: center; gap: var(--gap, 8px); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wrap { flex-wrap: wrap; } .grow { flex: 1 1 auto; min-width: 0; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } @media (max-width: 1100px) { .grid-main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } } .stack > * { min-width: 0; } /* ---------- Layout aplikacji ---------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); padding: 12px 10px; overflow-y: auto; z-index: 40; } .main { min-width: 0; display: flex; flex-direction: column; } .content { padding: 28px 32px 48px; max-width: 1440px; width: 100%; margin: 0 auto; } @media (max-width: 700px) { .content { padding: 20px 16px 40px; } } .workspace-switch { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 8px; border-radius: var(--radius); transition: background .15s; } .workspace-switch:hover { background: var(--sidebar-active-bg); } .workspace-logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 60%, #ec4899)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); } .workspace-name { font-weight: 600; font-size: 14px; line-height: 1.2; } .workspace-meta { font-size: 12px; color: var(--muted); } .nav { display: flex; flex-direction: column; gap: 1px; } .nav-section { margin-top: 18px; margin-bottom: 4px; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .nav-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--sidebar-text); font-weight: 500; transition: background .12s, color .12s; } .nav-link svg { width: 17px; height: 17px; opacity: .85; } .nav-link > span:not(.soon) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-link:hover { background: var(--sidebar-active-bg); color: var(--sidebar-active); } .nav-link.is-active { background: var(--sidebar-active-bg); color: var(--sidebar-active); font-weight: 600; } .nav-link.is-active svg { color: var(--brand); opacity: 1; } .nav-link.is-disabled { opacity: .5; pointer-events: none; } .nav-link .soon, .tabs .soon { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--faint); border: 1px solid var(--border); border-radius: 99px; padding: 0 6px; } .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sidebar-border); } .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 32px; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } @media (max-width: 700px) { .topbar { padding: 0 12px; } } .topbar .search { flex: 1; max-width: 420px; } @media (max-width: 560px) { .topbar .search { display: none; } .list-item { flex-wrap: wrap; padding: 12px 16px; } .list-item > .grow { flex-basis: calc(100% - 24px); } .page-header .btn-group { width: 100%; } } .btn.menu-toggle { display: none; } .sidebar-backdrop { display: none; } @media (max-width: 960px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } .app.sidebar-open .sidebar { transform: none; } .app.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 35; } .btn.menu-toggle { display: inline-flex; } } .admin-banner { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 6px 12px; font-size: 12.5px; font-weight: 500; background: var(--warning-soft); color: var(--warning-text); border-bottom: 1px solid color-mix(in oklab, var(--warning) 25%, transparent); } /* ---------- Nagłówek strony ---------- */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page-header .subtitle { color: var(--muted); margin-top: 4px; } .breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } .breadcrumbs a:hover { color: var(--text); } .breadcrumbs svg { width: 12px; height: 12px; opacity: .6; } /* ---------- Karty ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .card-header h2 { font-size: 14.5px; } .card-body { padding: 20px; } .card-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .card-flush { overflow: hidden; } /* Karta obok wykresu: wysokość wyznacza sąsiad w siatce, lista przewija się w środku. */ .card-scroll { display: flex; flex-direction: column; } .card-scroll > .card-scroll-body { flex: 1 1 0; min-height: 200px; overflow-y: auto; contain: size; } @media (max-width: 800px) { .card-scroll > .card-scroll-body { contain: none; max-height: 420px; } } /* KPI */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; } .kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .kpi-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; } .kpi-label svg { width: 15px; height: 15px; } .kpi-value { font-size: 28px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi-hint { font-size: 12px; color: var(--faint); } .kpi.is-alert .kpi-value { color: var(--danger-text); } a.kpi { transition: border-color .15s, transform .15s; } a.kpi:hover { border-color: var(--border-strong); } /* ---------- Przyciski ---------- */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--border-strong); display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; font: inherit; font-weight: 550; font-size: 13.5px; white-space: nowrap; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 9px; box-shadow: var(--shadow-xs); cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; } .btn svg { width: 16px; height: 16px; } .btn:hover { background: var(--surface-hover); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { --btn-bg: var(--brand); --btn-fg: var(--brand-contrast); --btn-border: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / .1), inset 0 1px 0 rgb(255 255 255 / .12); } .btn-primary:hover { background: var(--brand-hover); } .btn-ghost { --btn-bg: transparent; --btn-border: transparent; box-shadow: none; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-hover); color: var(--text); } .btn-danger { --btn-fg: var(--danger-text); } .btn-danger:hover { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 30%, transparent); } .btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; } .btn-sm svg { width: 14px; height: 14px; } .btn-lg { height: 42px; padding: 0 18px; font-size: 14.5px; } .btn-icon { width: 36px; padding: 0; } .btn-icon.btn-sm { width: 30px; } .btn-block { width: 100%; } .btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; } /* Segmented control / zakładki-filtry */ .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 10px; } .segmented a, .segmented button { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; font-weight: 500; font-size: 13px; color: var(--muted); border: 0; background: none; cursor: pointer; font-family: inherit; } .segmented a:hover { color: var(--text); } .segmented .is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .segmented .count { font-size: 11px; color: var(--faint); } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; } .tabs a { padding: 10px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; } .tabs a svg { width: 15px; height: 15px; } .tabs a:hover { color: var(--text); } .tabs a.is-active { color: var(--text); border-color: var(--brand); } /* ---------- Formularze ---------- */ .input, .select, .textarea, .form input[type=text], .form input[type=email], .form input[type=password], .form input[type=tel], .form input[type=url], .form input[type=number], .form input[type=date], .form input[type=time], .form input[type=search], .form select, .form textarea { width: 100%; height: 38px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: var(--shadow-xs); transition: border-color .12s, box-shadow .12s; } .textarea, .form textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; } .select, .form select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .form input[type=color] { width: 56px; height: 38px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); cursor: pointer; } .input:focus, .select:focus, .textarea:focus, .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .input::placeholder, .form input::placeholder, .form textarea::placeholder { color: var(--faint); } .input-sm, .select-sm { height: 34px; font-size: 13.5px; } .input-icon { position: relative; } .input-icon > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; } .input-icon > .input, .form .input-icon > .input { padding-left: 34px; } .form { display: flex; flex-direction: column; gap: 18px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .form-grid .span-2 { grid-column: 1 / -1; } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } } .form-section { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--border); } .form-section:first-child { border-top: 0; padding-top: 0; } .form-section-title h3 { font-size: 14px; } .form-section-title p { color: var(--muted); font-size: 13px; margin-top: 4px; } @media (max-width: 900px) { .form-section { grid-template-columns: 1fr; gap: 12px; } } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-label { font-size: 13px; font-weight: 550; color: var(--text-2); } .field-label .req { color: var(--danger); margin-left: 2px; } .field-help { font-size: 12.5px; color: var(--muted); } .field-errors { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--danger-text); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); } .check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; } .check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand); flex-shrink: 0; } .choices { display: flex; flex-wrap: wrap; gap: 8px 18px; } .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 8px; } .input-affix { display: flex; align-items: stretch; } /* Pole z przyciskiem w środku po prawej (np. NIP → „Pobierz z GUS”). */ .input-action { position: relative; } .input-action.has-action > input, .form .input-action.has-action > input { padding-right: 150px; } .input-action-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } .input-action-btn[aria-busy=true] { opacity: .7; cursor: progress; } .input-action-btn[aria-busy=true] svg { animation: gus-pulse 1s ease-in-out infinite; } @keyframes gus-pulse { 50% { opacity: .3; } } .gus-status { margin: 6px 0 0; } .gus-status.is-error { color: var(--danger-text); } .gus-status.is-success { color: var(--success-text); } .input-affix .input { border-radius: 9px 0 0 9px; } .input-affix .affix { display: inline-flex; align-items: center; padding: 0 12px; background: var(--surface-hover); border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 9px 9px 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; } /* Ludzie → Struktura */ .icon-link { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); } .icon-link:hover { background: var(--surface-hover); color: var(--text); } .icon-link svg { width: 15px; height: 15px; } .topic-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 12px 20px; border-bottom: 1px solid var(--border); } .topic-row:last-child { border-bottom: 0; } .topic-label { padding-top: 4px; font-weight: 600; overflow-wrap: anywhere; } .topic-people { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .topic-person { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; } .org-tree, .org-children { list-style: none; margin: 0; padding: 0; } .org-tree > .org-node + .org-node { margin-top: 20px; } .org-children { margin-left: 18px; padding-left: 22px; border-left: 1px solid var(--border-strong); } .org-node { position: relative; } .org-children > .org-node { padding-top: 10px; } .org-children > .org-node::before { content: ''; position: absolute; left: -22px; top: 34px; width: 18px; border-top: 1px solid var(--border-strong); } .org-children > .org-node:last-child::after { content: ''; position: absolute; left: -23px; top: 35px; bottom: 0; border-left: 3px solid var(--surface); } .org-card { display: flex; align-items: flex-start; gap: 12px; max-width: 560px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: opacity .12s, border-color .12s, box-shadow .12s; } .org-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .org-name { font-weight: 600; color: var(--text); } a.org-name:hover { color: var(--primary-text); } .org-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .org-id > * { display: block; } .org-position { font-size: 13px; color: var(--text-2); } .org-position.faint { color: var(--faint); } .org-topics { display: flex; flex-wrap: wrap; gap: 4px; } .org-card.is-match { border-color: var(--brand); box-shadow: var(--ring); } .org-card.is-dim { opacity: .45; } .org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .org-grid .org-card { max-width: none; } .org-card[draggable=true] { cursor: grab; } .org-card[draggable=true]:active { cursor: grabbing; } .org-card.is-dragging { opacity: .4; } .org-card.is-saving { opacity: .55; pointer-events: none; } .is-org-dragging .org-card.is-drop-blocked { opacity: .35; } .is-org-dragging .org-card:not(.is-drop-blocked):not(.is-dragging) { border-style: dashed; } .is-org-dragging .org-card.is-drop-target:not(.is-drop-blocked) { border-color: var(--brand); border-style: solid; background: var(--brand-soft); box-shadow: var(--ring); } .org-dropzone { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 24px; border: 2px dashed var(--border-strong); border-radius: 16px; background: var(--surface); color: var(--muted); text-align: center; box-shadow: 0 12px 32px rgb(0 0 0 / .16); transition: border-color .12s, background .12s, color .12s, transform .12s; } .org-dropzone[hidden] { display: none; } .org-dropzone svg { width: 28px; height: 28px; } .org-dropzone strong { font-size: 15px; color: var(--text); } .org-dropzone.is-drop-target { border-color: var(--danger); border-style: solid; color: var(--danger-text); background: var(--danger-soft); transform: translateX(-50%) scale(1.02); } .org-dropzone.is-drop-target strong { color: var(--danger-text); } .org-dropzone * { pointer-events: none; } @media (max-width: 640px) { .topic-row { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; } .org-children { margin-left: 8px; padding-left: 14px; } .org-children > .org-node::before { left: -14px; width: 10px; } .org-children > .org-node:last-child::after { left: -15px; } } /* Pole z podpowiedziami i badge'ami (code-picker) */ .link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--primary-text); cursor: pointer; } .link-button:hover { text-decoration: underline; } .token-field { position: relative; } .token-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 5px 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: var(--shadow-xs); cursor: text; transition: border-color .12s, box-shadow .12s; } .token-input:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .field.has-error .token-input { border-color: var(--danger); } .token { height: 26px; padding: 0 4px 0 9px; gap: 6px; max-width: 100%; } .token b { font-weight: 650; } .token-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .token-remove { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 99px; background: transparent; color: inherit; opacity: .6; cursor: pointer; } .token-remove:hover { opacity: 1; background: color-mix(in oklab, currentColor 14%, transparent); } .form .token-input .token-search, .token-search { flex: 1 1 140px; min-width: 120px; width: auto; height: 26px; padding: 0 4px; border: 0; box-shadow: none; background: transparent; font-size: 14px; } .form .token-input .token-search:focus { box-shadow: none; } .token-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; max-height: 264px; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); } .token-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-2); } .token-option.is-active { background: var(--surface-hover); color: var(--text); } .token-option-code { min-width: 44px; color: var(--muted); } .token-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); cursor: default; user-select: none; } .token-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px; } .token-empty { padding: 10px; font-size: 13px; color: var(--muted); } .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } /* Lista wyboru z wpisywaniem (ui.select_search) */ .select-search { position: relative; min-width: 220px; } .select-search > select { display: none; } .select-search-input { padding-right: 32px; text-overflow: ellipsis; cursor: pointer; } .select-search-input:focus { cursor: text; } .select-search-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--faint); pointer-events: none; } .select-search .token-menu { right: auto; min-width: 100%; width: max-content; max-width: min(460px, 90vw); max-height: 320px; } .token-option.is-selected { color: var(--text); font-weight: 600; } .token-option.is-placeholder { color: var(--muted); } .filters .select-search { flex: 0 1 300px; } .tab-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .tab-toolbar .filters { flex: 1 1 480px; margin-bottom: 0; } .tab-toolbar > .subtitle { color: var(--muted); } .filters .input-icon { flex: 1 1 260px; max-width: 360px; } .filters .select { width: auto; min-width: 160px; } /* ---------- Tabele ---------- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table th { position: sticky; top: 0; text-align: left; font-weight: 550; font-size: 12px; color: var(--muted); padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background .1s; } .table tbody tr:hover { background: var(--surface-hover); } .table .row-link { font-weight: 550; } .table .row-link:hover { color: var(--primary-text); } .table td.actions { text-align: right; white-space: nowrap; width: 1%; } .table .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; } tr.is-muted td { color: var(--muted); } .list { list-style: none; margin: 0; padding: 0; } .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .list-item:last-child { border-bottom: 0; } a.list-item:hover { background: var(--surface-hover); } .dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; margin: 0; } .dl dt { color: var(--muted); font-size: 13px; } .dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* ---------- Badge, avatar, postęp ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; font-size: 12px; font-weight: 550; white-space: nowrap; border-radius: 99px; background: var(--neutral-soft); color: var(--neutral-text); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; } .badge.no-dot::before { display: none; } .badge svg { width: 12px; height: 12px; flex-shrink: 0; } .badge-sm { height: 18px; padding: 0 7px; font-size: 11px; } .badge-sm::before { display: none; } /* Nawigacja po miesiącach (projekty cykliczne) */ .month-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .month-nav-label { font-size: 15px; font-weight: 600; min-width: 150px; text-align: center; } .month-nav-label::first-letter { text-transform: uppercase; } .badge-success { background: var(--success-soft); color: var(--success-text); } .badge-warning { background: var(--warning-soft); color: var(--warning-text); } .badge-danger { background: var(--danger-soft); color: var(--danger-text); } .badge-info { background: var(--info-soft); color: var(--info-text); } .badge-primary { background: var(--primary-soft); color: var(--primary-text); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 99px; font-size: 12px; color: var(--text-2); background: var(--surface); } .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; } .avatar { --size: 30px; width: var(--size); height: var(--size); border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; font-size: calc(var(--size) * .38); font-weight: 650; letter-spacing: .01em; color: var(--primary-text); background: var(--primary-soft); } .avatar-sm { --size: 24px; } .avatar-lg { --size: 44px; } .avatar-square { border-radius: 10px; } .avatar[data-tone="1"] { color: var(--success-text); background: var(--success-soft); } .avatar[data-tone="2"] { color: var(--warning-text); background: var(--warning-soft); } .avatar[data-tone="3"] { color: var(--info-text); background: var(--info-soft); } .avatar[data-tone="4"] { color: var(--danger-text); background: var(--danger-soft); } .person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .avatar-xl { --size: 96px; } .avatar-photo { object-fit: cover; background: var(--surface-2); } /* Zdjęcie użytkownika: wybór i kadrowanie (avatar_crop_controller.js) */ .avatar-editor { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; } .avatar-editor-side { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .avatar-editor-side .field { margin: 0; } .avatar-crop { display: flex; flex-direction: column; gap: 10px; width: 240px; max-width: 100%; } .avatar-crop[hidden], .avatar-editor-current[hidden] { display: none; } .avatar-crop-stage { position: relative; width: 240px; max-width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); cursor: grab; touch-action: none; user-select: none; } .avatar-crop-stage.is-dragging { cursor: grabbing; } .avatar-crop-stage:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .avatar-crop-stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; } /* Okrąg pokazuje, jak zdjęcie wygląda w awatarze; zapisujemy cały kwadrat. */ .avatar-crop-stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 999px color-mix(in oklab, #000 38%, transparent); outline: 1px solid color-mix(in oklab, #fff 70%, transparent); } .avatar-crop-zoom { display: flex; align-items: center; gap: 8px; } .avatar-crop-zoom input { flex: 1; accent-color: var(--brand); } .progress { height: 6px; border-radius: 99px; background: var(--surface-hover); overflow: hidden; min-width: 60px; } .progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); } .progress.is-done > span { background: var(--success); } /* ---------- Komunikaty, puste stany ---------- */ .flashes { position: fixed; right: 20px; top: 72px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 40px)); } .flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: flash-in .25s ease; } .flash svg { width: 18px; height: 18px; margin-top: 1px; } .flash-success svg { color: var(--success); } .flash-danger svg, .flash-error svg { color: var(--danger); } .flash-warning svg { color: var(--warning); } .flash-info svg { color: var(--info); } .flash button { margin-left: auto; background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0; } .flash.is-leaving { opacity: 0; transform: translateY(6px); transition: all .2s; } @keyframes flash-in { from { opacity: 0; transform: translateY(8px); } } .alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: 13.5px; border: 1px solid transparent; } .alert svg { width: 18px; height: 18px; margin-top: 1px; } .alert-danger { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in oklab, var(--danger) 20%, transparent); } .alert-info { background: var(--info-soft); color: var(--info-text); border-color: color-mix(in oklab, var(--info) 20%, transparent); } .alert-warning { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in oklab, var(--warning) 20%, transparent); } .alert-success { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in oklab, var(--success) 20%, transparent); } .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; } .empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary-text); margin-bottom: 4px; } .empty-icon svg { width: 22px; height: 22px; } .empty h3 { font-size: 15px; } .empty p { color: var(--muted); max-width: 380px; } .secret { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px dashed var(--border-strong); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; } /* ---------- Dropdown (details) ---------- */ .dropdown { position: relative; } .dropdown > summary { list-style: none; cursor: pointer; } .dropdown > summary::-webkit-details-marker { display: none; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); } .dropdown-menu.align-left { left: 0; right: auto; } .dropdown-menu.drop-up { top: auto; bottom: calc(100% + 6px); } .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font: inherit; font-size: 13.5px; background: none; border: 0; cursor: pointer; text-align: left; } .dropdown-item svg { width: 16px; height: 16px; color: var(--muted); } .dropdown-item:hover { background: var(--surface-hover); color: var(--text); } .dropdown-item.is-danger { color: var(--danger-text); } .dropdown-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .dropdown-sep { height: 1px; background: var(--border); margin: 6px 0; } /* ---------- Paginacja ---------- */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); } /* ---------- Kanban ---------- */ .board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; } .board-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 200px; } .board-col-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; } .board-col-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; } .board-col-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 12px; max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; } .collapse > summary { list-style: none; cursor: pointer; } .collapse > summary::-webkit-details-marker { display: none; } .collapse > summary .chev { transition: transform .15s; } .collapse[open] > summary .chev { transform: rotate(90deg); } .task-card { display: block; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-xs); transition: border-color .12s, box-shadow .12s, transform .12s; } .task-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .task-card-title { font-weight: 550; line-height: 1.35; } .task-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); } .task-card .project-tag { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; display: block; } .task-card .project-tag b { font-weight: 600; color: var(--text-2); } .due { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .due svg { width: 13px; height: 13px; } .due.is-overdue { color: var(--danger-text); font-weight: 550; } .due.is-today { color: var(--warning-text); font-weight: 550; } .task-card .next-status { opacity: 0; transition: opacity .12s; } .task-card:hover .next-status, .task-card:focus-within .next-status { opacity: 1; } @media (hover: none) { .task-card .next-status { opacity: 1; } } .prio { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .prio-low { background: var(--faint); } .prio-normal { background: var(--info); } .prio-high { background: var(--warning); } .prio-urgent { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } /* ---------- Wykres aktywności ---------- */ .bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 8px; } .bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .bars .bar span { width: 100%; max-width: 26px; min-height: 3px; border-radius: 6px 6px 3px 3px; background: var(--chart); transition: background .15s; } .bars .bar:hover span { background: var(--primary-text); } .bars .bar small { font-size: 10.5px; color: var(--faint); } /* ---------- Ekrany logowania ---------- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(900px 500px at 10% -10%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%), radial-gradient(700px 400px at 110% 110%, color-mix(in oklab, #ec4899 10%, transparent), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 420px; padding: 32px; } .auth-card.wide { max-width: 560px; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #ec4899); box-shadow: 0 6px 16px -6px rgb(79 70 229 / .6); } .brand-mark svg { width: 18px; height: 18px; } .auth h1 { font-size: 22px; } .auth .lead { color: var(--muted); margin: 6px 0 24px; } .auth-footer { margin-top: 20px; text-align: center; color: var(--muted); font-size: 13.5px; } .ws-list { display: flex; flex-direction: column; gap: 8px; } .ws-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .12s, box-shadow .12s; } .ws-item:hover { border-color: var(--brand); box-shadow: var(--ring); } .ws-item .workspace-logo { width: 40px; height: 40px; border-radius: 11px; font-size: 14px; } /* Wgrany sygnet zastępuje inicjały — bez tła i obwódki, żeby logo nie siedziało w kolorowym kafelku. */ .workspace-logo.has-image { background: none; box-shadow: none; } .workspace-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; } /* Podgląd logo w ustawieniach: pole o stałej wysokości, obraz wpisany bez przycinania. */ .logo-preview { display: grid; place-items: center; min-height: 84px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .logo-preview img { max-width: 100%; max-height: 64px; object-fit: contain; } .logo-preview-mark img { max-height: 56px; } /* ---------- Admin ---------- */ .theme-admin { --brand: #0f766e; } .admin-mark { background: linear-gradient(135deg, #0f766e, #0891b2); } /* ---------- Drobne ---------- */ .kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-size: 11px; font-family: var(--mono); color: var(--muted); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); } .section-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; } .section-title h2 { font-size: 15px; } .welcome { display: flex; align-items: center; gap: 16px; padding: 20px 24px; margin-bottom: 24px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(120deg, var(--brand), color-mix(in oklab, var(--brand) 55%, #ec4899)); box-shadow: var(--shadow-md); } .welcome p { opacity: .9; } .welcome .btn { --btn-bg: rgb(255 255 255 / .16); --btn-fg: #fff; --btn-border: rgb(255 255 255 / .25); } .color-swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); } turbo-progress-bar, .turbo-progress-bar { height: 2px; background: var(--brand); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- Wynagrodzenia ---------- */ .table th.text-right { text-align: right; } .table tfoot td { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); font-weight: 600; font-variant-numeric: tabular-nums; } .form input:disabled, .form select:disabled, .form textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; } /* ---------- Kadry: przegląd (wykresy SVG) ---------- */ .chart { display: block; width: 100%; height: auto; overflow: visible; } .chart text { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; } .chart .chart-grid line { stroke: var(--border); stroke-width: 1; } .chart .chart-grid line.baseline { stroke: var(--border-strong); } .chart .col rect { fill: transparent; transition: fill .12s; } .chart .col:hover rect { fill: color-mix(in oklab, var(--text) 5%, transparent); } .chart .col:hover text { fill: var(--text); } .chart .mark { pointer-events: none; } .chart .line, .chart-key-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linecap: round; } .chart .line.is-estimated, .chart-key-line { stroke-dasharray: 4 4; } .chart .point { fill: var(--chart); stroke: var(--surface); stroke-width: 2; } .chart .point.is-estimated, .chart-key-point { fill: var(--surface); stroke: var(--chart); stroke-width: 2; } .chart .bar { fill: var(--chart); transition: fill .12s; } .chart .col:hover .bar { fill: var(--primary-text); } .chart text.value { fill: var(--text); font-size: 12px; font-weight: 600; } .chart .bar-soft { fill: color-mix(in oklab, var(--chart) 28%, transparent); } .chart .col:hover .bar-soft { fill: color-mix(in oklab, var(--chart) 45%, transparent); } .chart text.bar-value { fill: var(--muted); font-size: 11px; font-weight: 600; } .chart-key-bar { fill: color-mix(in oklab, var(--chart) 28%, transparent); } .chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .chart-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); } /* ---------- Urlopy i zwolnienia ---------- */ .text-warning { color: var(--warning-text); } .kpi.is-warning .kpi-value { color: var(--warning-text); } .abs-decision { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; } .abs-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; } .abs-note svg { width: 14px; height: 14px; } /* kolory kategorii: --c (akcent) i --c-bg (wypełnienie paska) */ .cat-leave { --c: var(--success); --c-text: var(--success-text); } .cat-unpaid { --c: var(--info); --c-text: var(--info-text); } .cat-sick { --c: var(--danger); --c-text: var(--danger-text); } .cat-other { --c: var(--warning); --c-text: var(--warning-text); } .cat-remote { --c: var(--brand); --c-text: var(--primary-text); } .abs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--muted); } .abs-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .abs-key::before { content: ""; width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; background: color-mix(in oklab, var(--c, var(--faint)) 28%, var(--surface)); box-shadow: inset 3px 0 0 var(--c, var(--faint)); } .abs-key.cat-remote::before { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--c); border: 0; } .abs-key.is-pending::before { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--faint) 35%, var(--surface)) 0 3px, var(--surface) 3px 6px); box-shadow: inset 0 0 0 1px var(--faint); } .abs-key.is-missing::before { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: none; margin: 0 3px; } th .abs-key { font-weight: 550; } .abs-cal-header { flex-wrap: wrap; } /* Kalendarz: wiersz = siatka [osoba][urlop][dni miesiąca]; paski leżą na torach (--lanes) */ .abs-scroll { overflow-x: auto; overscroll-behavior-x: contain; } .abs-cal { --name-w: 210px; --meta-w: 84px; --day-w: minmax(26px, 1fr); --lane-h: 30px; min-width: calc(var(--name-w) + var(--meta-w) + var(--days) * 26px); } .abs-row { display: grid; grid-template-columns: var(--name-w) var(--meta-w) repeat(var(--days), var(--day-w)); grid-template-rows: repeat(var(--lanes, 1), var(--lane-h)); padding: 3px 0; border-bottom: 1px solid var(--border); } .abs-row:last-child { border-bottom: 0; } .abs-name, .abs-meta { grid-row: 1 / -1; display: flex; align-items: center; min-width: 0; background: var(--surface); } .abs-name { grid-column: 1; position: sticky; left: 0; z-index: 3; gap: 6px; padding: 0 12px 0 20px; } .abs-meta { grid-column: 2; position: sticky; left: var(--name-w); z-index: 3; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; padding: 0 12px 0 4px; font-size: 12.5px; border-right: 1px solid var(--border); box-shadow: 6px 0 8px -8px rgb(0 0 0 / .18); } .abs-flag { display: inline-grid; place-items: center; color: var(--danger-text); opacity: .8; } .abs-flag svg { width: 13px; height: 13px; } .abs-meter { display: block; width: 44px; height: 3px; border-radius: 99px; background: var(--surface-hover); overflow: hidden; } .abs-meter > span { display: block; height: 100%; background: var(--success); border-radius: inherit; } .abs-meter.is-over > span { background: var(--danger); } td .abs-meter { width: 100%; height: 5px; } .abs-cell { grid-row: 1 / -1; margin: -3px 0; border-left: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .abs-cell.is-off { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, color-mix(in oklab, var(--border) 45%, var(--surface-2)) 4px 5px); } .abs-cell.is-today { background: color-mix(in oklab, var(--brand) 9%, transparent); box-shadow: inset 1px 0 0 color-mix(in oklab, var(--brand) 35%, transparent), inset -1px 0 0 color-mix(in oklab, var(--brand) 35%, transparent); } .abs-row:not(.abs-head):hover .abs-cell:not(.is-today) { background-color: color-mix(in oklab, var(--surface-hover) 70%, transparent); } .abs-row:not(.abs-head):hover .abs-name, .abs-row:not(.abs-head):hover .abs-meta { background: var(--surface-hover); } .abs-row.is-me .abs-name { box-shadow: inset 3px 0 0 var(--brand); } .abs-head { position: sticky; top: 0; z-index: 4; grid-template-rows: 40px; padding: 0; background: var(--surface-2); } .abs-head .abs-name, .abs-head .abs-meta { background: var(--surface-2); font-size: 12px; font-weight: 550; color: var(--muted); white-space: nowrap; } .abs-head .abs-meta { align-items: flex-end; } .abs-dayhead { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; color: var(--muted); border-left: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .abs-dayhead span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--faint); } .abs-dayhead b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .abs-dayhead.is-off b, .abs-dayhead.is-off span { color: var(--faint); font-weight: 500; } .abs-dayhead[title] b { color: var(--danger-text); } .abs-dayhead.is-today b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-contrast); } .abs-group { display: flex; align-items: center; height: 30px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .abs-group-label { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 12px; font-weight: 600; color: var(--text-2); } .abs-bar { position: relative; z-index: 2; align-self: center; height: 22px; margin: 0 2px; padding: 0 7px; display: flex; align-items: center; min-width: 0; font-size: 11px; font-weight: 600; color: var(--c-text); background: color-mix(in oklab, var(--c) 22%, var(--surface)); border-radius: 6px; box-shadow: inset 3px 0 0 var(--c); cursor: default; transition: filter .12s, box-shadow .12s; } .abs-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .abs-bar:hover { filter: saturate(1.3) brightness(.97); box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px var(--c); } .abs-bar.cat-remote { background: color-mix(in oklab, var(--c) 7%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c) 55%, transparent); } .abs-bar.is-pending { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--c) 20%, var(--surface)) 0 5px, var(--surface) 5px 10px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent); } .abs-bar.cut-start { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; } .abs-bar.cut-end { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .abs-miss { grid-row: 1 / -1; align-self: center; justify-self: center; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); opacity: .75; } @media (max-width: 700px) { .abs-cal { --name-w: 132px; --meta-w: 0px; } .abs-meta { visibility: hidden; padding: 0; border: 0; box-shadow: none; } .abs-name { padding-left: 12px; font-size: 13px; box-shadow: 6px 0 8px -8px rgb(0 0 0 / .18); } .abs-name .person .avatar { display: none; } } /* Listy pod kalendarzem */ .abs-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); line-height: 1; flex-shrink: 0; } .abs-date b { font-size: 14px; } .abs-date small { font-size: 10px; color: var(--muted); margin-top: 2px; } /* Podsumowanie roku */ .abs-year td { padding-top: 10px; padding-bottom: 10px; } .abs-year th, .abs-year td { padding-left: 12px; padding-right: 12px; } .abs-year tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--brand); } .abs-year-group td { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); padding-top: 7px; padding-bottom: 7px; } .abs-year-group:hover { background: none !important; } .abs-heat { display: grid; grid-template-columns: repeat(12, 24px); gap: 2px; } .abs-heat > a { position: relative; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--success-text); background: color-mix(in oklab, var(--border) 55%, transparent); transition: box-shadow .12s; } .abs-heat > a:hover { box-shadow: 0 0 0 1.5px var(--success); } .abs-heat > a.lvl-1 { background: color-mix(in oklab, var(--success) 16%, var(--surface)); } .abs-heat > a.lvl-2 { background: color-mix(in oklab, var(--success) 32%, var(--surface)); } .abs-heat > a.lvl-3 { background: color-mix(in oklab, var(--success) 52%, var(--surface)); color: #fff; } .abs-heat > a.lvl-4 { background: color-mix(in oklab, var(--success) 78%, var(--surface)); color: #fff; } .abs-heat > a.has-remote::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); } .abs-heat-head > span { text-align: center; font-size: 10px; font-weight: 500; color: var(--faint); } .abs-leave { min-width: 150px; } .abs-leave-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* Firma → Dokumenty (dokumenty finansowe): lista i formularz. */ .finance-filters .select { min-width: 140px; } .date-range { display: inline-flex; align-items: center; gap: 6px; } .date-range .input { width: 150px; } .finance-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; } .finance-kpi .kpi-value { font-size: 26px; } .finance-kpi-due { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; color: var(--danger-text); font-weight: 500; } @media (max-width: 480px) { .finance-kpis { grid-template-columns: 1fr; } } :is(.finance-table, .report-table) .check-col { width: 1%; padding-right: 0; } :is(.finance-table, .report-table) .check-col input { width: 16px; height: 16px; accent-color: var(--brand); } .finance-table tr.is-pending td { background: color-mix(in oklab, var(--warning-soft) 55%, transparent); } .finance-table .finance-party { width: 100%; max-width: 0; min-width: 160px; } .finance-table .finance-number > * { max-width: 200px; } .finance-table .finance-number > *, .finance-table .finance-party > a, .finance-table .finance-party > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .finance-table .col-flow { min-width: 190px; } .finance-table .dropdown-menu form { margin: 0; } .inline-form { display: inline; margin: 0; } .finance-bulk, .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: sticky; bottom: 0; z-index: 2; } .finance-bulk .select, .bulk-bar .select { width: auto; min-width: 220px; } .finance-locked { align-items: center; flex-wrap: wrap; } .finance-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; } @media (max-width: 1200px) { .finance-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .finance-head { grid-template-columns: minmax(0, 1fr); } } .finance-card { margin-bottom: 16px; } .finance-card > .field-errors, .finance-card > .alert { margin: 12px 20px 0; } .finance-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .finance-postal { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; } @media (max-width: 560px) { .finance-dates, .finance-postal { grid-template-columns: minmax(0, 1fr); } } .finance-sep { border-top: 1px solid var(--border); } .finance-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--warning-soft); color: var(--warning-text); } .finance-company-info { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); } .finance-files li { padding: 6px 0; border-bottom: 1px solid var(--border); gap: 12px; } .finance-files li:last-child { border-bottom: 0; } .finance-files a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .finance-lines th, .finance-lines td { padding: 8px 8px; vertical-align: top; } .finance-lines th:first-child, .finance-lines td:first-child { padding-left: 16px; } .finance-lines .input, .finance-lines .select { width: 100%; } .finance-lines .field-errors { margin-top: 4px; } .finance-lines .col-name { min-width: 220px; } .finance-lines .col-category { min-width: 190px; width: 18%; } .finance-lines .col-project { min-width: 230px; width: 22%; } .finance-lines .col-employee { min-width: 190px; width: 18%; } .finance-lines .col-qty { width: 96px; min-width: 90px; } .finance-lines .col-price, .finance-lines .col-cost { width: 130px; min-width: 120px; } .finance-lines .col-vat { width: 104px; min-width: 100px; } .finance-lines .col-net { width: 120px; } .finance-lines td.col-net { padding-top: 18px; } .finance-lines td.col-remove { padding-top: 14px; } .finance-lines .col-remove { width: 40px; padding-right: 12px; } .finance-lines[data-scope="project"] .col-employee, .finance-lines[data-scope="employee"] .col-project, .finance-lines[data-payroll="1"] .col-qty, .finance-lines[data-payroll="1"] .col-vat, .finance-lines[data-payroll="0"] .col-cost, .finance-lines[data-payroll="1"] .when-vat, .finance-lines[data-payroll="0"] .when-payroll { display: none; } .finance-totals { display: inline-grid; grid-template-columns: auto auto; gap: 6px 16px; align-items: baseline; text-align: right; } .finance-totals strong { font-size: 15px; } .finance-totals [data-finance-document-target="totalCurrency"] { grid-column: 1 / -1; font-size: 12px; } .finance-actions { position: sticky; bottom: 0; padding: 12px 0; background: var(--bg, var(--surface)); z-index: 2; } /* Ustawienia → Plan kont: edytor drzewa kont. */ .chart-editor { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .chart-toolbar .input-icon { flex: 1 1 220px; max-width: 360px; } .chart-toolbar .segmented { margin-left: auto; } .chart-toolbar .segmented svg { width: 14px; height: 14px; } .chart-editor textarea { min-height: 360px; } .chart-tree { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; } .chart-row { --indent: 22px; position: relative; display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 3px 8px 3px calc(8px + var(--depth, 0) * var(--indent)); border-bottom: 1px solid var(--border); } .chart-row:last-child { border-bottom: 0; } .chart-row:hover, .chart-row:focus-within { background: var(--surface-2); } .chart-row:not(.is-root)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(8px + var(--depth) * var(--indent) - var(--indent) + 12px); border-left: 1px solid var(--border-strong); opacity: .6; } .chart-row.is-root .chart-name { font-weight: 600; } .chart-row.is-match .chart-name, .chart-row.is-match .chart-code { background: var(--warning-soft); } .chart-row.is-invalid { background: color-mix(in oklab, var(--danger-soft) 70%, transparent); } .chart-toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; } .chart-toggle svg { width: 16px; height: 16px; transition: transform .15s; } .chart-toggle:hover { background: var(--surface-hover); color: var(--text); } .chart-toggle.is-open svg { transform: rotate(90deg); } .chart-toggle.is-empty { visibility: hidden; } .form .chart-row input[type=text] { height: 32px; padding: 0 8px; border-color: transparent; box-shadow: none; background: transparent; border-radius: 7px; } .form .chart-row input[type=text]:hover { border-color: var(--border); background: var(--surface); } .form .chart-row input[type=text]:focus { border-color: var(--brand); background: var(--surface); box-shadow: var(--ring); } .form .chart-row input.is-invalid { border-color: var(--danger); background: var(--surface); } .form .chart-row .chart-code { width: 112px; flex-shrink: 0; font-family: var(--mono); font-size: 13px; color: var(--text-2); } .form .chart-row .chart-name { flex: 1 1 auto; min-width: 120px; width: auto; } .chart-count { flex-shrink: 0; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--neutral-soft); color: var(--neutral-text); font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .chart-actions { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .12s; } .chart-row:hover .chart-actions, .chart-row:focus-within .chart-actions { opacity: 1; } @media (hover: none) { .chart-actions { opacity: 1; } } .chart-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; } .chart-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } @media (max-width: 560px) { .chart-row { --indent: 14px; flex-wrap: wrap; } .form .chart-row .chart-code { width: 84px; } .form .chart-row .chart-name { flex-basis: calc(100% - 130px); } .chart-actions { margin-left: auto; } } /* ---------- Lejek sprzedaży ---------- */ .pipeline-strip { display: flex; gap: 3px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 2px; } .pipeline-strip-step { flex: 1 1 0; min-width: 120px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 20px 9px 22px; background: color-mix(in oklab, var(--stage-color) 16%, var(--surface)); box-shadow: inset 0 3px 0 var(--stage-color); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); font-size: 12.5px; font-weight: 550; } .pipeline-strip-step:first-child { padding-left: 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); } .pipeline-strip-meta { color: var(--muted); font-weight: 500; } .deal-board { grid-template-columns: repeat(var(--cols, 4), minmax(250px, 1fr)); } .deal-board .board-col { box-shadow: inset 0 3px 0 var(--stage-color, var(--border)); transition: border-color .12s, background .12s; } .deal-board .board-col.is-drop-target { border-color: var(--brand); background: var(--brand-soft); } .board-col-sum { display: flex; justify-content: space-between; gap: 8px; padding: 0 14px 8px; font-size: 12px; color: var(--muted); } .board-col-sum b { color: var(--text-2); font-weight: 600; } .deal-card { position: relative; } .deal-card[draggable=true] { cursor: grab; } .deal-card.is-dragging { opacity: .4; } .deal-card.is-rotten { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-xs); } .deal-card-amount { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .deal-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--danger-text); font-weight: 550; } .deal-flag svg { width: 13px; height: 13px; } .deal-board-empty { text-align: center; padding: 16px 0; } .stage-pick { display: flex; flex-direction: column; gap: 2px; padding: 8px; } .stage-pick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; color: var(--muted); text-align: left; cursor: pointer; } .stage-pick button:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); } .stage-pick button:disabled { cursor: default; } .stage-pick .dot { opacity: .35; } .stage-pick .is-passed { color: var(--text-2); } .stage-pick .is-passed .dot, .stage-pick .is-current .dot { opacity: 1; } .stage-pick .is-current { background: var(--surface-hover); color: var(--text); font-weight: 600; } .stage-pick .pct { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; } /* ---------- Termin płatności (PaymentTermType) ---------- */ .payment-term { display: flex; gap: 8px; align-items: stretch; } .payment-term > select { flex: 1 1 auto; min-width: 0; } .payment-term-custom { flex: 0 0 132px; } .payment-term-custom .input { width: 100%; min-width: 0; } /* ---------- Kontrahent w dokumencie: wyszukiwarka po nazwie lub NIP ---------- */ .company-picker { position: relative; } .company-picker .input { width: 100%; } .company-picker .token-menu { max-height: 320px; } .company-option { flex-direction: column; align-items: stretch; gap: 2px; } .company-option-name { display: flex; align-items: center; gap: 6px; font-weight: 550; color: var(--text); } .company-option-meta { font-size: 12.5px; color: var(--muted); } .company-option-new { flex-direction: row; align-items: center; color: var(--primary-text); border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; } .company-option-new svg { width: 16px; height: 16px; } .finance-company-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .finance-company-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; } .finance-company-info dt { color: var(--muted); } .finance-company-info dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; } /* Wypłaty osób (osoba × miesiąc) */ .payouts th, .payouts td { padding-left: 10px; padding-right: 10px; } .payouts td:not(:first-child) { font-size: 12.5px; } /* ---------- Zimne kontakty ---------- */ /* Akcje wiersza pojawiają się po najechaniu, nałożone na prawą część wiersza (nie poszerzają tabeli). */ .table td.row-actions-cell { position: relative; width: 0; padding: 0; } .row-actions { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 2px; padding: 4px 0 4px 16px; background: var(--surface-hover); box-shadow: -18px 0 14px -6px var(--surface-hover); opacity: 0; pointer-events: none; transition: opacity .12s; } .table tbody tr:hover .row-actions, .row-actions:focus-within { opacity: 1; pointer-events: auto; } @media (hover: none) { .table td.row-actions-cell { position: static; width: 1%; padding: 12px 16px; } .row-actions { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; box-shadow: none; padding: 0; } } .cold-table tr.is-due td:first-child { box-shadow: inset 3px 0 0 var(--warning, #f59e0b); } /* ---------- Ustawienia → Rekrutacja ---------- */ .variable-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .variable-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .variable-chip { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--primary-text); cursor: pointer; } .variable-chip:hover { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 30%, transparent); } /* Edytor ankiety */ .survey-header-image { display: flex; gap: 16px; align-items: flex-start; } .survey-header-image img { width: 160px; max-height: 110px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); flex-shrink: 0; } .survey-header-image > .stack { flex: 1; } .survey-questions { display: flex; flex-direction: column; gap: 12px; counter-reset: survey-q; } .survey-q { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .survey-q.is-info { background: var(--surface-2); } .survey-q.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .survey-q.is-new { animation: survey-q-in .6s ease-out; } @keyframes survey-q-in { from { box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand); } } .survey-q-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -6px 0 0; } .survey-q-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--muted); } .survey-q:not(.is-info) .survey-q-kind::before { counter-increment: survey-q; content: counter(survey-q) "."; color: var(--text); font-weight: 650; } .survey-q-kind svg { width: 14px; height: 14px; } .survey-q-tools { display: inline-flex; gap: 2px; } .survey-q:first-child .survey-q-tools [data-action$="#up"], .survey-q:last-child .survey-q-tools [data-action$="#down"] { opacity: .35; pointer-events: none; } .survey-q-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; } .survey-q-required { padding-bottom: 10px; white-space: nowrap; } .survey-q .textarea.survey-q-description { min-height: 0; } .survey-option { display: flex; align-items: center; gap: 4px; } .survey-option .input { flex: 1; } .survey-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); } .survey-empty[hidden] { display: none; } .survey-empty > svg { width: 28px; height: 28px; color: var(--faint); margin-bottom: 4px; } .survey-palette { position: sticky; top: 16px; } .survey-palette-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .survey-palette-item:hover { background: var(--surface-hover); } .survey-palette-item > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); flex-shrink: 0; } .survey-palette-item > span { display: flex; flex-direction: column; gap: 1px; font-size: 13px; } .survey-palette-sep { border: 0; border-top: 1px solid var(--border); margin: 6px 0; } @media (max-width: 1100px) { .survey-palette { position: static; order: -1; } .survey-palette .card-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .survey-palette-item .small, .survey-palette-sep { display: none; } } @media (max-width: 560px) { .survey-q-grid { grid-template-columns: 1fr; } .survey-q-required { padding-bottom: 0; } .survey-header-image { flex-direction: column; } } /* Podgląd ankiety (widok kandydata) */ .survey-preview { max-width: 760px; overflow: hidden; } .survey-preview-image { display: block; width: 100%; max-height: 260px; object-fit: cover; } .survey-preview h1 { font-size: 22px; } .survey-preview-q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .survey-preview-q legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 15px; } .survey-preview-q .req { color: var(--danger); margin-left: 3px; } .survey-preview-info { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); } .survey-matrix th[scope="row"] { font-weight: 500; text-align: left; } .survey-matrix input { width: 17px; height: 17px; accent-color: var(--brand); } .survey-preview-bottom { font-size: 12.5px; color: var(--muted); } .survey-preview-bottom summary { cursor: pointer; } .survey-preview-bottom > div { margin-top: 8px; } /* ---------- Edytor tekstu sformatowanego (opis zamówienia) ---------- */ .rich-editor { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: var(--shadow-xs); transition: border-color .12s, box-shadow .12s; } .rich-editor:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .rich-editor.is-readonly { background: var(--surface-2); } .rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 9px 9px 0 0; } .rich-btn { display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; } .rich-btn svg { width: 16px; height: 16px; } .rich-btn:hover { background: var(--surface-hover); color: var(--text); } .rich-btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--primary-text); } .rich-btn:focus-visible { outline: none; box-shadow: var(--ring); } .rich-toolbar .sep { width: 1px; height: 18px; margin: 0 4px; background: var(--border); } .form .rich-toolbar select.rich-vars { width: auto; max-width: 260px; height: 28px; margin-left: auto; padding: 0 28px 0 8px; font-size: 12.5px; box-shadow: none; } .rich-content { position: relative; min-height: 160px; max-height: 520px; overflow-y: auto; padding: 10px 14px; line-height: 1.55; outline: none; overflow-wrap: anywhere; } .rich-content.is-empty::before { content: attr(data-placeholder); position: absolute; top: 10px; left: 14px; right: 14px; color: var(--faint); pointer-events: none; } .rich-content > :first-child, .rich-view > :first-child { margin-top: 0; } .rich-content p, .rich-view p { margin: 0 0 .6em; } .rich-content ul, .rich-content ol, .rich-view ul, .rich-view ol { margin: 0 0 .6em; padding-left: 1.5em; } .rich-content li, .rich-view li { margin: .15em 0; } .rich-content h3, .rich-view h3 { margin: .9em 0 .35em; font-size: 14px; font-weight: 650; } .rich-view { line-height: 1.55; overflow-wrap: anywhere; } .rich-view > :last-child { margin-bottom: 0; } /* ---------- Umowy ---------- */ .sr-only + .form-section { border-top: 0; padding-top: 0; } .contract-order { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-margin-top: calc(var(--topbar-h) + 16px); } .contract-order + .contract-order { margin-top: 16px; } .contract-order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; } .contract-order-head h4 { font-size: 14px; font-weight: 600; margin: 0; } .contract-order-body { display: grid; gap: 16px; padding: 16px; } .contract-add-order { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; } .contract-add-order .select { flex: 1 1 240px; width: auto; } .contract-docs { list-style: none; margin: 0; padding: 0; } .contract-docs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .contract-docs li:last-child { border-bottom: 0; } .contract-docs .doc-name { display: flex; align-items: center; gap: 8px; min-width: 0; } .contract-docs .doc-name svg { flex-shrink: 0; color: var(--muted); } .contract-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .contract-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--faint); font-size: 13px; } .contract-steps li svg { width: 18px; height: 18px; margin-top: 1px; } .contract-steps li.is-done { color: var(--text-2); } .contract-steps li.is-done svg { color: var(--success); } .contract-steps li.is-current { color: var(--text); font-weight: 550; } .contract-steps li.is-current svg { color: var(--primary-text); } .contract-steps .when { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; } .offer-variant { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-margin-top: calc(var(--topbar-h) + 16px); } .offer-variant + .offer-variant { margin-top: 20px; } .offer-variant.is-accepted { border-color: var(--success); } .offer-variant-body { display: grid; gap: 16px; padding: 16px; } .offer-variant-body > .contract-order + .contract-order { margin-top: 0; } .offer-variant-body > .contract-add-order { margin-top: 0; } .deal-card-amount { white-space: nowrap; } .deal-card .task-card-meta > .row:first-child { min-width: 0; flex-wrap: wrap; row-gap: 4px; } .deal-card .task-card-meta > .row:last-child { flex-shrink: 0; } .deal-card-offer { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .12s; background: var(--surface); box-shadow: var(--shadow-xs); } .deal-card:hover .deal-card-offer, .deal-card:focus-within .deal-card-offer { opacity: 1; } @media (hover: none) { .deal-card .deal-card-offer { opacity: 1; } } .deal-card-offers { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); } .deal-card-offers svg { width: 13px; height: 13px; } .var-chips { display: flex; flex-wrap: wrap; gap: 6px; } .var-chips code { padding: 2px 7px; border-radius: 6px; background: var(--surface-hover); border: 1px solid var(--border); font-size: 12px; } .var-chips code.is-system { background: var(--info-soft); border-color: transparent; color: var(--info-text); } .var-table td:first-child { white-space: nowrap; } /* Ankiety: adres, link, odpowiedzi, strona publiczna */ .survey-domain-body { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; } .survey-domain-body > .stack { flex: 1 1 320px; } .survey-domain-form { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; flex: 1 1 360px; max-width: 560px; } .survey-domain-form .field { flex: 1; } .survey-domain-form .btn { margin-top: 26px; flex-shrink: 0; } .survey-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .survey-link > svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; } .survey-link a { color: var(--primary-text); font-size: 13px; } .survey-answers { margin: 0; display: flex; flex-direction: column; gap: 4px; } .survey-answers dt { font-weight: 600; margin-top: 10px; } .survey-answers dt:first-child { margin-top: 0; } .survey-answers dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; } .survey-answers ul { margin: 0; padding-left: 18px; } .survey-choices { display: flex; flex-direction: column; gap: 8px; } .survey-preview-q.has-error legend { color: var(--danger-text); } .public-survey { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; } .public-survey-brand { font-weight: 700; font-size: 15px; margin-bottom: 12px; color: var(--muted); } .public-survey .survey-preview { max-width: none; } @media (max-width: 560px) { .public-survey { padding: 16px 12px 40px; } .survey-domain-form { flex-direction: column; align-items: stretch; } .survey-domain-form .btn { margin-top: 0; } } /* ---------- Kalendarz (Praca → Kalendarz) ---------- */ :where(.cal-event, .cal-chip, .abs-key).tone-primary { --c: var(--brand); } :where(.cal-event, .cal-chip, .abs-key).tone-success { --c: var(--success); } :where(.cal-event, .cal-chip, .abs-key).tone-info { --c: var(--info); } :where(.cal-event, .cal-chip, .abs-key).tone-warning { --c: var(--warning); } :where(.cal-event, .cal-chip, .abs-key).tone-danger { --c: var(--danger); } :where(.cal-event, .cal-chip, .abs-key).tone-neutral { --c: var(--faint); } .cal-p0 { --c: var(--brand); } .cal-p1 { --c: var(--success); } .cal-p2 { --c: var(--warning); } .cal-p3 { --c: var(--info); } .cal-p4 { --c: #db2777; } .cal-p5 { --c: #0d9488; } .cal-p6 { --c: var(--danger); } .cal-p7 { --c: #7c3aed; } .cal-range::first-letter { text-transform: uppercase; } .cal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; } .cal-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cal-main { overflow: hidden; } .cal-wrap { overflow-x: auto; } @media (max-width: 1000px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } .cal-side { order: 2; } } .cal-mini { padding: 12px; } .cal-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cal-mini-head .month-nav-label { min-width: 0; font-size: 14px; } .cal-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; } .cal-mini-dow { font-size: 11px; color: var(--faint); font-weight: 600; padding: 2px 0; } .cal-mini-day { height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; } .cal-mini-day:hover { background: var(--surface-hover); } .cal-mini-day.is-outside { color: var(--faint); } .cal-mini-day.is-selected { background: var(--brand-soft); color: var(--primary-text); font-weight: 600; } .cal-mini-day.is-today { box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 700; } .cal-people .list-item { padding: 8px 16px; gap: 10px; font-size: 13.5px; } .cal-people .list-item:hover { background: var(--surface-hover); } .cal-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--c); display: inline-grid; place-items: center; flex-shrink: 0; color: #fff; } .cal-check svg { width: 12px; height: 12px; } .cal-person.is-on .cal-check { background: var(--c); } .cal-hint, .cal-legend { padding: 0 4px; } .cal-frame { --hour: 48px; --min: calc(var(--hour) / 60); --gutter: 58px; min-width: calc(var(--gutter) + var(--cols) * 104px); } .cal-head, .cal-allday, .cal-grid { display: grid; grid-template-columns: var(--gutter) repeat(var(--cols), minmax(0, 1fr)); } .cal-head, .cal-allday { overflow-y: hidden; scrollbar-gutter: stable; } .cal-head { border-bottom: 1px solid var(--border); } .cal-colhead { min-width: 0; min-height: 52px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border-left: 1px solid var(--border); } .cal-daylink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .cal-dayname { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .cal-daynum { min-width: 30px; height: 30px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 99px; font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } a.cal-daynum:hover, .cal-daylink:hover .cal-daynum { background: var(--surface-hover); } .is-today .cal-daynum, .is-today a.cal-daynum:hover, .is-today .cal-daylink:hover .cal-daynum { background: var(--brand); color: var(--brand-contrast); } .cal-colhead.is-today .cal-dayname { color: var(--primary-text); } .cal-holiday { min-width: 0; font-size: 11px; color: var(--danger-text); } .cal-allday { border-bottom: 1px solid var(--border-strong); background: var(--surface-2); } .cal-gutter { padding: 7px 8px 0 0; text-align: right; font-size: 10.5px; line-height: 1.2; color: var(--faint); } .cal-allday-cell { min-width: 0; min-height: 32px; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--border); cursor: cell; } .cal-scroll { height: clamp(360px, calc(100vh - 300px), 900px); overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; } .cal-grid { padding-top: 8px; } .cal-hour { position: relative; height: var(--hour); } .cal-hour span { position: absolute; top: -7px; right: 8px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .cal-col { position: relative; min-width: 0; height: calc(var(--hour) * 24); border-left: 1px solid var(--border); background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--border) 45%, transparent) 1px, transparent 1px); background-size: 100% var(--hour), 100% calc(var(--hour) / 2); cursor: cell; } .cal-col.is-off { background-color: var(--surface-2); } .cal-col.is-today { background-color: color-mix(in oklab, var(--brand) 4%, var(--surface)); } .cal-event { position: absolute; z-index: 1; top: calc(var(--top) * var(--min)); height: calc(var(--height) * var(--min) - 2px); left: calc(2px + var(--lane) * (100% - 6px) / var(--lanes)); width: calc((100% - 6px) / var(--lanes) - 2px); display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; overflow: hidden; border-radius: 6px; border-left: 3px solid var(--c); background: color-mix(in oklab, var(--c) 16%, var(--surface)); box-shadow: 0 0 0 1px var(--surface); color: var(--text); font-size: 12px; line-height: 1.3; cursor: pointer; user-select: none; touch-action: none; } .cal-event:hover { z-index: 2; background: color-mix(in oklab, var(--c) 25%, var(--surface)); } .cal-event[data-drag] { cursor: grab; } .cal-event-title { display: block; flex: 0 1 auto; min-width: 0; min-height: 0; overflow: hidden; overflow-wrap: anywhere; font-weight: 600; } .cal-event-title > * { display: inline; vertical-align: -1px; margin-right: 3px; } .cal-event-meta { flex-shrink: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .cal-event.is-short { flex-direction: row; align-items: baseline; gap: 6px; padding-top: 1px; padding-bottom: 0; line-height: 15px; } .cal-event.is-short .cal-event-title { flex: 0 0 auto; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; } .cal-event.is-short .cal-event-meta { flex-shrink: 1; } .cal-event.is-narrow { padding-left: 4px; padding-right: 3px; } .cal-event.is-narrow .cal-event-title { display: block; white-space: nowrap; text-overflow: ellipsis; } .cal-event:is(.is-narrow, .is-short) .cal-event-title > .cal-initials, .cal-event.is-narrow .cal-event-title > * { display: none; } .cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; } .cal-event.is-dragging { z-index: 5; opacity: .9; box-shadow: var(--shadow-md); pointer-events: none; } .is-cal-dragging, .is-cal-dragging * { cursor: grabbing !important; user-select: none; } .cal-event.is-saving, .cal-chip.is-saving { opacity: .5; } .cal-ghost { position: absolute; z-index: 4; left: 2px; right: 4px; top: calc(var(--top) * var(--min)); height: calc(var(--height) * var(--min)); padding: 2px 6px; border: 1px dashed var(--brand); border-radius: 6px; background: var(--brand-soft); color: var(--primary-text); font-size: 11px; font-weight: 600; pointer-events: none; } .cal-now { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--top, -10) * var(--min)); height: 2px; background: var(--danger); pointer-events: none; } .cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); } .cal-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 6px; border-radius: 5px; background: color-mix(in oklab, var(--c) 16%, var(--surface)); box-shadow: inset 3px 0 0 var(--c); color: var(--text); font-size: 12px; line-height: 1.35; user-select: none; touch-action: none; } a.cal-chip:hover { background: color-mix(in oklab, var(--c) 26%, var(--surface)); } .cal-chip[data-drag] { cursor: grab; } .cal-chip.is-dragging { opacity: .55; pointer-events: none; } .cal-chip-icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--c); } .cal-chip-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cal-chip-time { flex-shrink: 0; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .cal-initials { flex-shrink: 0; margin-right: 1px; color: var(--c); font-size: 10px; font-weight: 700; } :is(.cal-chip, .cal-event).is-done :is(.cal-chip-title, .cal-event-title) { text-decoration: line-through; color: var(--muted); } :is(.cal-chip, .cal-event).is-tentative { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--c) 16%, var(--surface)) 0 4px, var(--surface) 4px 8px); } :is(.cal-chip, .cal-event).is-masked { --c: var(--faint); color: var(--muted); cursor: default; } :is(.cal-allday-cell, .cal-month-cell).is-drop-target { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); } .cal-month { display: grid; grid-template-columns: repeat(7, minmax(104px, 1fr)); } .cal-month-head { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .cal-month-cell { min-width: 0; min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: cell; } .cal-month > :nth-child(7n + 1) { border-left: 0; } .cal-month-cell.is-off { background: color-mix(in oklab, var(--surface-2) 70%, var(--surface)); } .cal-month-cell.is-outside { background: var(--surface-2); } .cal-month-cell.is-outside .cal-daynum { color: var(--faint); } .cal-month-day { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 1px; } .cal-month .cal-daynum { min-width: 24px; height: 24px; font-size: 12.5px; } .cal-more { padding: 0 6px; color: var(--muted); font-size: 11.5px; } .cal-more:hover { color: var(--text); } .cal-form-when { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 700px) { .cal-form-when { grid-template-columns: 1fr; } } /* ---------- Rekrutacja (Ludzie → Rekrutacja) ---------- */ .rec-stagebar { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; background: var(--surface-hover); margin: 4px 0 2px; } .rec-stagebar > span { min-width: 4px; } .rec-stagebar.is-empty { opacity: .6; } .rec-new-badge { margin-left: 6px; } .rec-new-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-left: 6px; border-radius: 99px; background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); vertical-align: middle; } .rec-danger-zone { border-color: color-mix(in oklab, var(--danger) 25%, var(--border)); } .rec-link-compact { margin-bottom: 0; padding: 8px 10px; } .rec-url-row .input { width: 100%; } .rec-meta svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--faint); } .rec-meta > span { display: inline-flex; align-items: center; gap: 4px; } .rec-filter-check { align-items: center; padding: 0 4px; white-space: nowrap; } .rec-filter-check input { margin: 0; } .rec-view-toggle { margin-left: auto; } .rec-kpis { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .rec-kpis > * { flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-left: 1px solid var(--border); } .rec-kpis > :first-child { border-left: 0; } .rec-kpis b { font-size: 20px; font-weight: 650; } .rec-kpis b .muted { font-size: 14px; font-weight: 500; } a.rec-kpis-link:hover, .rec-kpis > a:hover { background: var(--surface-hover); } /* tablica */ .rec-board { display: flex; align-items: stretch; } .rec-board .board-col { flex: 1 1 236px; min-width: 236px; max-width: 360px; } .rec-board .board-col { box-shadow: inset 0 3px 0 var(--stage-color, var(--border)); transition: border-color .12s, background .12s; } .rec-board .board-col.is-drop-target { border-color: var(--brand); background: var(--brand-soft); } .rec-board .board-col-body { max-height: calc(100vh - 330px); min-height: 120px; } .rec-board-empty { text-align: center; padding: 16px 0; } /* zwinięty etap: wąski pionowy pasek, nadal cel upuszczenia */ .rec-col-strip { display: none; } .rec-board .board-col.is-collapsed { flex: 0 0 44px; min-width: 44px; align-self: stretch; } .rec-board .board-col.is-collapsed > .board-col-header, .rec-board .board-col.is-collapsed > .board-col-body { display: none; } .rec-board .board-col.is-collapsed .rec-col-strip { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; width: 100%; padding: 12px 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; border-radius: inherit; } .rec-col-strip:hover { background: var(--surface-hover); } .rec-col-strip .num { font-size: 12px; color: var(--muted); } .rec-col-strip-name { writing-mode: vertical-rl; font-weight: 600; white-space: nowrap; max-height: 60vh; overflow: hidden; text-overflow: ellipsis; } .rec-col-strip-new { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); } .rec-col-fold { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s; } .rec-col-fold svg { width: 14px; height: 14px; } .rec-col-fold:hover { background: var(--surface-hover); color: var(--text); } .board-col:hover .rec-col-fold, .rec-col-fold:focus-visible { opacity: 1; } .rec-auto { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; height: 20px; border-radius: 6px; font-size: 11.5px; color: var(--warning-text); background: var(--warning-soft); } .rec-auto svg { width: 12px; height: 12px; } .rec-card { position: relative; padding: 10px 11px; cursor: grab; } .rec-card.is-dragging { opacity: .5; } .rec-card.is-new { border-left: 3px solid var(--warning); } .rec-card.is-selected { border-color: var(--brand); box-shadow: var(--ring); } .rec-card-link { display: block; cursor: pointer; } .rec-card-head { display: flex; align-items: center; gap: 9px; } .rec-card-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; } .rec-card .task-card-meta { margin-top: 8px; min-height: 22px; } .rec-card-next { opacity: 0; transition: opacity .12s; } .rec-card:hover .rec-card-next, .rec-card-next:focus-visible { opacity: 1; } .rec-icon { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 11.5px; } .rec-icon svg { width: 13px; height: 13px; } .rec-icon.is-ok { color: var(--success-text); } .rec-icon.is-late { color: var(--warning-text); } .rec-stars { display: inline-flex; letter-spacing: -1px; color: var(--border-strong); font-size: 14px; line-height: 1; } .rec-stars.is-sm { font-size: 12px; } .rec-stars .is-on { color: #f59e0b; } .table tr.is-selected td { background: var(--brand-soft); } .table tr.rec-row-new .row-link { font-weight: 650; } /* panel zgłoszenia */ .rec-drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; } .rec-drawer-backdrop { position: absolute; inset: 0; background: rgb(10 10 16 / .28); opacity: 0; transition: opacity .18s; } .rec-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(1180px, 94vw); background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .22s ease; overflow: hidden; display: flex; flex-direction: column; } .rec-drawer.is-open { pointer-events: auto; } .rec-drawer.is-open .rec-drawer-backdrop { opacity: 1; } .rec-drawer.is-open .rec-drawer-panel { transform: none; } .rec-drawer-panel > turbo-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; } .rec-drawer-loading { display: none; position: absolute; inset: 0; place-items: center; background: color-mix(in oklab, var(--bg) 70%, transparent); } .rec-drawer-loading svg { width: 28px; height: 28px; color: var(--muted); animation: rec-spin 1s linear infinite; } .rec-drawer.is-loading .rec-drawer-loading { display: grid; } @keyframes rec-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rec-drawer-panel, .rec-drawer-backdrop { transition: none; } .rec-drawer-loading svg { animation: none; } } .rec-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; } .rec-panel-head { padding: 10px 20px 14px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } .rec-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rec-panel-bar .is-disabled { opacity: .35; pointer-events: none; } .rec-person { display: flex; align-items: center; gap: 14px; } .rec-person h2 { font-size: 20px; font-weight: 650; line-height: 1.25; } .rec-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; } .rec-contact a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); min-width: 0; } .rec-contact a:hover { color: var(--primary-text); } .rec-contact svg { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; } .rec-rate { display: flex; flex-shrink: 0; } .rec-rate button { border: 0; background: none; padding: 0 1px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--border-strong); } .rec-rate button.is-on { color: #f59e0b; } .rec-rate:hover button { color: #f59e0b; } .rec-rate button:hover ~ button { color: var(--border-strong); } .rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rec-stage-btn { max-width: 260px; box-shadow: inset 3px 0 0 var(--stage-color); } .rec-stage-btn .dot { background: var(--stage-color); } .rec-stage-btn svg { width: 14px; height: 14px; color: var(--muted); } .rec-stage-menu { min-width: 260px; } .rec-stage-menu .dropdown-item.is-current { font-weight: 600; cursor: default; } .rec-stage-menu .dropdown-item[disabled] { opacity: 1; } .rec-pop-menu { width: min(340px, 86vw); padding: 14px; } .rec-actions .rec-pop-menu { left: 0; right: auto; } .rec-decision { margin: 0; align-items: center; } .rec-panel-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } .rec-doc { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface-2); } .rec-doc-tabs { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; border-bottom: 1px solid var(--border); } .rec-doc-tabs .chip { flex-shrink: 0; max-width: 240px; cursor: pointer; font: inherit; font-size: 12px; } .rec-doc-tabs .chip svg { width: 13px; height: 13px; flex-shrink: 0; } .rec-doc-tabs .chip.is-active { border-color: var(--brand); color: var(--primary-text); background: var(--brand-soft); } .rec-doc-frame { flex: 1; min-height: 0; display: flex; } .rec-doc-frame iframe { flex: 1; width: 100%; border: 0; background: var(--surface); } .rec-doc-frame img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; } .rec-doc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; color: var(--muted); } .rec-doc-empty > svg { width: 32px; height: 32px; color: var(--faint); } .rec-info { min-height: 0; overflow-y: auto; padding: 0 20px 28px; } .rec-tabs { position: sticky; top: 0; z-index: 2; background: var(--bg); margin-bottom: 18px; } .rec-tabs .count { font-size: 11px; color: var(--faint); } .rec-h { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .rec-message { padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); line-height: 1.55; overflow-wrap: anywhere; } .rec-other { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .rec-other li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .rec-survey > summary { cursor: pointer; list-style: none; } .rec-survey > summary::-webkit-details-marker { display: none; } .rec-links > summary { cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .rec-links > summary svg { width: 14px; height: 14px; } @media (max-width: 900px) { .rec-panel-body { display: block; overflow-y: auto; } .rec-doc { border-right: 0; border-bottom: 1px solid var(--border); } .rec-doc-frame { height: 70vh; flex: none; } .rec-info { overflow: visible; padding-top: 4px; } .rec-person { flex-wrap: wrap; } } .rec-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rec-files li { display: flex; align-items: center; gap: 10px; } .rec-file-ext { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-text); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; } .rec-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rec-upload .input { flex: 1 1 200px; padding-top: 5px; } .rec-note-form { display: flex; flex-direction: column; gap: 8px; } .rec-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .rec-timeline-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; } .rec-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--border); } .rec-timeline-icon { flex-shrink: 0; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 99px; background: var(--surface-hover); color: var(--muted); } .rec-timeline-icon svg { width: 14px; height: 14px; } .rec-timeline-item.kind-note .rec-timeline-icon { background: var(--primary-soft); color: var(--primary-text); } .rec-timeline-item.kind-email_failed .rec-timeline-icon { background: var(--danger-soft); color: var(--danger-text); } .rec-timeline-item.kind-applied .rec-timeline-icon, .rec-timeline-item.kind-survey .rec-timeline-icon { background: var(--info-soft); color: var(--info-text); } .rec-timeline-body { flex: 1; min-width: 0; } .rec-timeline-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-height: 27px; } .rec-timeline-meta strong { color: var(--text-2); font-weight: 600; } .rec-timeline-delete { margin-left: auto; opacity: 0; } .rec-timeline-item:hover .rec-timeline-delete, .rec-timeline-delete:focus-within { opacity: 1; } .rec-timeline-content { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; } .rec-timeline-content.is-note { padding: 9px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); line-height: 1.5; } .rec-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); } .rec-dialog::backdrop { background: rgb(10 10 16 / .35); } .rec-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .rec-dialog-head h2 { font-size: 15px; } .rec-dialog-body { padding: 16px 18px; } .rec-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); } .rec-auto-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .rec-auto-list .select { display: inline-block; width: auto; max-width: 100%; margin: 2px 4px; } .rec-auto-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .rec-auto-row .field { margin: 0; } .rec-auto-row [hidden] { display: none; } @media (max-width: 900px) { .rec-auto-row { grid-template-columns: 1fr; } } .rec-app-chip { display: flex; align-items: center; gap: 6px; max-width: 360px; font-size: 12.5px; } .rec-app-chip + .rec-app-chip { margin-top: 2px; } .rec-app-chip:hover .truncate { color: var(--primary-text); } /* ogłoszenie (publiczne i podgląd) */ .rec-job h1 { font-size: 26px; line-height: 1.2; } .job-head { margin-bottom: 22px; } .job-facts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13.5px; } .job-facts li { display: inline-flex; align-items: center; gap: 6px; } .job-facts svg { width: 15px; height: 15px; } .job-salaries { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .job-salary { display: flex; flex-direction: column; padding: 10px 14px; border-radius: var(--radius); background: var(--success-soft); color: var(--success-text); } .job-salary b { font-size: 17px; } .job-salary span { font-size: 12px; opacity: .85; } .job-section { margin-top: 22px; } .job-section h2 { font-size: 16px; margin-bottom: 8px; } .job-section .rich-view { line-height: 1.6; } .job-card, .job-apply { margin-bottom: 16px; } .job-apply h2 { font-size: 18px; } .job-back { margin-bottom: 10px; font-size: 13.5px; } .job-back svg { width: 14px; height: 14px; vertical-align: -2px; } .job-consents { margin: 6px 0 18px; } .job-rodo { margin-top: 18px; } .job-rodo > summary { cursor: pointer; color: var(--muted); } .job-rodo p { margin: 8px 0 0; } .job-list .list-item:hover { background: var(--surface-hover); } .job-list svg { width: 16px; height: 16px; } /* ---------- Poczta (Outlook) ---------- */ .mail-row { gap: 12px; } .card.mail-box { overflow: visible; } .mail-box .dropdown-menu { z-index: 60; } a.mail-row:hover { background: var(--surface-hover); } .mail-list .list-item { padding: 10px 20px; } .mail-dir { width: 26px; height: 26px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 8px; } .mail-dir svg { width: 14px; height: 14px; } .mail-dir.is-in { background: var(--info-soft); color: var(--info-text); } .mail-dir.is-out { background: var(--success-soft); color: var(--success-text); } .mail-subject { display: block; font-weight: 600; } .mail-meta { display: block; font-size: 12.5px; color: var(--muted); } .mail-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .mail-head { padding: 16px 20px; border-bottom: 1px solid var(--border); } .mail-head .dl { grid-template-columns: 60px minmax(0, 1fr); gap: 6px 12px; } .mail-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .mail-images { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; color: var(--muted); } .mail-body { display: block; width: 100%; height: 560px; border: 0; background: #fff; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } @media (max-width: 700px) { .mail-row { flex-wrap: wrap; } .mail-row > .grow { flex: 1 1 0; min-width: 55%; } .mail-actions { width: 100%; justify-content: flex-end; } } /* ---------- Zadania: drawer (layout, ramka „task-panel”) ---------- */ .task-drawer { position: fixed; inset: 0; z-index: 85; pointer-events: none; } .task-drawer-backdrop { position: absolute; inset: 0; background: rgb(10 10 16 / .22); opacity: 0; transition: opacity .18s; } .task-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; overflow: hidden; } .task-drawer.is-open { pointer-events: auto; } .task-drawer.is-open .task-drawer-backdrop { opacity: 1; } .task-drawer.is-open .task-drawer-panel { transform: none; } .task-drawer-panel > turbo-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; } .task-drawer-loading { display: none; position: absolute; inset: 0; place-items: center; background: color-mix(in oklab, var(--surface) 70%, transparent); } .task-drawer-loading svg { width: 28px; height: 28px; color: var(--muted); animation: rec-spin 1s linear infinite; } .task-drawer.is-loading .task-drawer-loading { display: grid; } @media (prefers-reduced-motion: reduce) { .task-drawer-panel, .task-drawer-backdrop { transition: none; } .task-drawer-loading svg { animation: none; } } .task-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; } .task-panel-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); } .task-panel-bar form { margin: 0; } .task-panel-bar .dropdown-menu form { margin: 0; } .task-save-state { margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-complete-btn svg { color: var(--muted); } .task-complete-btn:hover { border-color: var(--success); color: var(--success-text); } .task-complete-btn:hover svg { color: var(--success-text); } .task-complete-btn.is-done { --btn-bg: var(--success-soft); --btn-fg: var(--success-text); border-color: color-mix(in oklab, var(--success) 35%, transparent); } .task-complete-btn.is-done svg { color: var(--success-text); } .task-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 32px; } .task-panel-body > .form { max-width: 560px; } .task-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--muted); margin-bottom: 6px; } .task-crumbs svg { width: 13px; height: 13px; color: var(--faint); } .task-crumbs .link { color: var(--muted); } .task-crumbs .link:hover { color: var(--primary-text); } .task-title { display: block; box-sizing: border-box; width: calc(100% + 16px); margin: 0 -8px 14px; padding: 4px 8px; resize: none; overflow: hidden; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 22px; font-weight: 650; line-height: 1.3; } .task-title:hover { border-color: var(--border); } .task-title:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); background: var(--surface); } .task-title.is-done { color: var(--muted); } .task-fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; align-items: center; margin: 0 0 20px; } .task-fields dt { font-size: 13px; color: var(--muted); } .task-fields dd { margin: 0; min-width: 0; } .task-input { max-width: 100%; border-color: transparent; box-shadow: none; background-color: transparent; } .task-input:hover { border-color: var(--border); background-color: var(--surface); } .task-input:focus { background-color: var(--surface); } select.task-input { width: auto; min-width: 180px; } .task-input.is-invalid { border-color: var(--danger); } .task-input.is-overdue { color: var(--danger-text); font-weight: 550; } .task-field-with-avatar { display: flex; align-items: center; gap: 6px; min-width: 0; } .task-field-with-avatar .prio { margin: 0 4px 0 8px; flex-shrink: 0; } .task-avatar-empty { color: var(--faint); background: var(--surface-2); border: 1px dashed var(--border-strong); } .task-avatar-empty svg { width: 13px; height: 13px; } .task-dates { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .task-dates .task-input { width: 150px; } .task-estimate { display: flex; align-items: center; gap: 6px; } .task-estimate .task-input { width: 90px; } .task-static { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 0 12px; min-height: 34px; font-size: 13.5px; } .task-static svg { width: 14px; height: 14px; color: var(--muted); } .task-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); } .task-section { margin-top: 22px; } .task-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--text); } .task-h .num { font-weight: 500; } .task-description .rich-content { min-height: 90px; max-height: none; } .task-description .rich-toolbar { opacity: .55; transition: opacity .12s; } .task-description:focus-within .rich-toolbar, .task-description:hover .rich-toolbar { opacity: 1; } .task-subtask-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .task-subtask { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px; border-bottom: 1px solid var(--border); font-size: 13.5px; } .task-subtask:hover { background: var(--surface-hover); } .task-subtask form { margin: 0; display: inline-flex; } .task-subtask .due, .task-subtask .num { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); flex-shrink: 0; } .task-subtask .num svg { width: 13px; height: 13px; } .task-subtask.is-dragging { opacity: .45; } .task-subtask.is-done .task-subtask-title { color: var(--muted); text-decoration: line-through; } .task-subtask-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .task-subtask-title:hover { color: var(--primary-text); } .task-grip { display: inline-flex; color: var(--faint); cursor: grab; opacity: 0; transition: opacity .12s; } .task-grip svg { width: 14px; height: 14px; } .task-subtask:hover .task-grip { opacity: 1; } @media (hover: none) { .task-grip { display: none; } } .task-check-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; flex-shrink: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: transparent; cursor: pointer; } .task-check-btn svg { width: 12px; height: 12px; } .task-check-btn:hover { border-color: var(--success); color: var(--success); } .task-check-btn.is-done { background: var(--success); border-color: var(--success); color: #fff; } .task-check-btn:focus-visible { outline: none; box-shadow: var(--ring); } .task-subtask-add { display: flex; align-items: center; gap: 8px; padding: 6px; color: var(--faint); } .task-subtask-add svg { width: 16px; height: 16px; flex-shrink: 0; } .task-subtask-add .input { border-color: transparent; box-shadow: none; background: transparent; } .task-subtask-add .input:focus { border-color: var(--brand); background: var(--surface); } .task-meter { height: 6px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-bottom: 8px; } .task-meter span { display: block; height: 100%; background: var(--success); } .task-meter.is-over span { background: var(--warning); } .task-time { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .task-time li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; } .task-meta { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); } .task-card.is-done .task-card-title { color: var(--muted); } .due.is-complete { color: var(--success-text); } .due.is-mine { color: var(--primary-text); font-weight: 550; } @media (max-width: 700px) { .task-panel-body { padding: 14px 16px 28px; } .task-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; } .task-fields dt { margin-top: 8px; } .task-complete-btn { padding: 0 8px; } select.task-input { width: 100%; min-width: 0; } } /* ---------- Zadania: współpraca (wiadomości, pliki, obserwujący) ---------- */ .task-panel.is-file-over { box-shadow: inset 0 0 0 2px var(--brand); } .task-panel-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 14px; border-top: 1px solid var(--border); background: var(--surface-2); } .task-stale { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--info-soft); color: var(--info-text); } .task-stale svg { width: 14px; height: 14px; } .task-stale .btn { margin-left: auto; } .task-followers { display: flex; align-items: center; gap: 8px; min-height: 30px; } .task-followers form { margin: 0; } .task-follower-stack { display: inline-flex; align-items: center; padding: 2px; border-radius: 99px; } .task-follower-stack:hover { background: var(--surface-hover); } .task-follower-stack > span + span { margin-left: -6px; } .task-follower-stack .avatar { box-shadow: 0 0 0 2px var(--surface-2); } .task-follower-more { background: var(--surface); color: var(--muted); font-size: 10.5px; } .task-follower-menu { width: min(320px, 86vw); padding: 8px; } .task-follower-menu .list-item { padding: 6px 4px; } .task-follower-add { padding: 8px 4px 2px; border-top: 1px solid var(--border); margin-top: 4px; } .task-editor { position: relative; } .task-editor .rich-toolbar { padding: 2px 4px; } .task-editor .rich-btn { width: 28px; height: 26px; } .task-editor-content { min-height: 44px; max-height: 220px; padding: 8px 12px; } .task-editor-content.is-empty::before { top: 8px; left: 12px; } .mention { display: inline; padding: 0 3px; border-radius: 5px; background: var(--brand-soft); color: var(--primary-text); font-weight: 550; white-space: nowrap; } .mention.is-unknown { background: var(--neutral-soft); color: var(--muted); } .mention-menu { position: absolute; left: 8px; bottom: calc(100% + 4px); z-index: 30; width: min(300px, calc(100% - 16px)); list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); } .mention-menu[hidden] { display: none; } .mention-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13.5px; } .mention-option.is-active, .mention-option:hover { background: var(--brand-soft); } .mention-empty { padding: 6px 8px; font-size: 12.5px; color: var(--muted); } .task-composer form { margin: 0; } .task-composer-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .task-composer-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; } .task-composer-file { max-width: 100%; } .task-composer-file > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .task-composer-file.is-uploading { opacity: .65; } .task-composer-file-remove { border: 0; background: none; padding: 0 2px; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; } .task-composer-file-remove:hover { color: var(--danger-text); } .task-composer-error:empty { display: none; } .task-composer-bar .btn-primary { margin-left: auto; } .task-feed { display: flex; flex-direction: column; gap: 12px; } .task-feed-tabs button { height: 24px; padding: 0 9px; font-size: 12px; } .task-activity[data-filter="comments"] .feed-activity, .task-activity[data-filter="history"] .feed-comment { display: none; } .task-feed-more { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-text); } .task-feed-more svg { width: 14px; height: 14px; } .feed-empty { margin: 0; } .feed-activity { display: flex; align-items: flex-start; gap: 8px; padding-left: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.45; } .feed-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); } .feed-icon svg { width: 11px; height: 11px; } .feed-text { min-width: 0; overflow-wrap: anywhere; } .feed-text b { color: var(--text-2); font-weight: 600; } .feed-text s { text-decoration-color: var(--faint); } .feed-text > span:not(.faint) { color: var(--text-2); } .feed-comment { display: flex; gap: 10px; } .feed-comment-main { flex: 1; min-width: 0; } .feed-comment-head { display: flex; align-items: center; gap: 8px; min-height: 26px; } .feed-comment-head b { font-size: 13.5px; } .feed-comment-menu { margin-left: auto; opacity: 0; transition: opacity .12s; } .feed-comment:hover .feed-comment-menu, .feed-comment-menu[open], .feed-comment-menu:focus-within { opacity: 1; } @media (hover: none) { .feed-comment-menu { opacity: 1; } } .feed-comment-menu form { margin: 0; } .feed-comment-body { font-size: 13.5px; margin: 0; } .feed-comment-body a { color: var(--primary-text); text-decoration: underline; } .feed-comment-body[hidden] { display: none; } .feed-comment.is-deleted .avatar { opacity: .45; } .feed-comment-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .feed-comment-files .chip svg { width: 13px; height: 13px; } .feed-image img { display: block; max-width: min(260px, 100%); max-height: 180px; border-radius: 8px; border: 1px solid var(--border); object-fit: cover; } .feed-comment-edit { margin-top: 6px; } .feed-comment-edit[hidden] { display: none; } .task-files { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .task-file { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .task-file form { margin: 0; } .task-file-thumb { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); } .task-file-thumb img { width: 100%; height: 100%; object-fit: cover; } .task-file-ext { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); } .task-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .task-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; color: var(--text); } .task-file-name:hover { color: var(--primary-text); } .task-dropzone { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); font-size: 13px; cursor: pointer; } .task-dropzone svg { width: 15px; height: 15px; } .task-dropzone:hover, .task-panel.is-file-over .task-dropzone { border-color: var(--brand); background: var(--brand-soft); color: var(--primary-text); } .task-uploads { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .task-uploads:empty { display: none; } .task-upload { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .task-upload-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-upload-bar { width: 120px; height: 5px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; } .task-upload-bar span { display: block; width: 0; height: 100%; background: var(--brand); transition: width .15s; } .task-upload.is-error { color: var(--danger-text); } .task-upload.is-error .task-upload-bar { display: none; } .task-upload.is-error .task-upload-state { color: var(--danger-text); } .task-subtask-add .task-subtask-repeat { width: auto; flex-shrink: 0; } .task-card-meta > .row:first-child { flex-wrap: wrap; row-gap: 4px; min-width: 0; } .task-card-meta > .row:last-child { flex-shrink: 0; } @media (max-width: 700px) { .task-panel-foot { padding: 8px 12px 12px; } .task-subtask-add { flex-wrap: wrap; } } .task-files-more { margin-bottom: 8px; } .task-files-more > summary { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--primary-text); } .task-files-more > summary svg { width: 14px; height: 14px; } /* środowisko dev: pasek debugowania Symfony nie zasłania pola wiadomości */ body:has(.sf-toolbar-opened) .task-drawer-panel { bottom: 36px; } /* ── Zadania: okno „Zarejestruj czas pracy” (task_finish_controller) ───────────── */ .tf-dialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden; } .tf-dialog[open] { display: flex; flex-direction: column; } .tf-dialog::backdrop { background: rgb(10 10 16 / .45); } .tf-dialog > div { display: flex; flex-direction: column; min-height: 0; flex: 1; } .tf { display: flex; flex-direction: column; min-height: 0; flex: 1; } .tf-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border); } .tf-head h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; } .tf-head p { margin-top: 4px; font-size: 13.5px; } .tf-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--primary-text); } .tf-icon svg { width: 22px; height: 22px; } .tf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 16px; display: flex; flex-direction: column; } .tf-body > .alert, .tf-note-info { margin: 10px 0 4px; } .tf-note-info { display: flex; align-items: center; gap: 6px; } .tf-note-info svg { width: 14px; height: 14px; flex-shrink: 0; } .tf-cols { display: flex; justify-content: space-between; padding: 12px 0 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; } .tf-row { padding: 14px 0; border-bottom: 1px solid var(--border); } .tf-row:last-child { border-bottom: 0; } .tf-row-head { display: flex; align-items: flex-start; gap: 10px; } .tf-close { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; } .tf-title { font-weight: 550; font-size: 14.5px; overflow-wrap: anywhere; } .tf-meta { margin-top: 2px; } .tf-meta svg { width: 12px; height: 12px; vertical-align: -1px; } .tf-logged { color: var(--success-text); } .tf-state:empty { display: none; } .tf-state::before { content: "· "; } .tf-sum { flex-shrink: 0; font-weight: 600; font-size: 13.5px; padding-top: 1px; } .tf-content { margin: 10px 0 0 27px; } .tf-row.is-root .tf-content, .tf-row.is-root .tf-errors { margin-left: 0; } .tf-slots { display: flex; flex-direction: column; gap: 8px; } .tf-slots:empty { display: none; } .tf-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tf-slot .tf-date { width: 150px; flex-shrink: 0; } .tf-times { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .tf-slot .tf-time { width: 104px; } .tf-duration { width: 56px; flex-shrink: 0; color: var(--text-2); font-weight: 550; } .tf-slot.is-invalid .input { border-color: var(--danger); } .tf-slot-error { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--danger-text); } .tf-row-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; } .tf-row-foot .tf-add { margin-left: -10px; color: var(--primary-text); } .tf-skip { align-items: center; color: var(--text-2); } .tf-errors { margin: 8px 0 0 27px; } .tf-row.is-off .tf-title { color: var(--muted); } .tf-row.is-off .tf-content { display: none; } .tf-row.is-skipped .tf-slots, .tf-row.is-skipped .tf-add, .tf-row.is-skipped .tf-sum { display: none; } .tf-group { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); } .tf-group > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 13.5px; } .tf-group > summary::-webkit-details-marker { display: none; } .tf-group > summary svg { width: 15px; height: 15px; color: var(--muted); } .tf-group[open] > summary { border-bottom: 1px solid var(--border); } .tf-group > .tf-row { padding: 12px 14px; } .tf-foot { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface); } .tf-total { font-weight: 550; color: var(--text-2); } .tf-page { max-width: 860px; } @media (max-width: 640px) { .tf-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; } .tf-head { padding: 16px; gap: 12px; } .tf-icon { width: 36px; height: 36px; } .tf-body { padding: 4px 16px 12px; } .tf-foot { padding: 12px 16px; flex-wrap: wrap; } .tf-foot .btn-primary { flex: 1 1 100%; order: 3; } .tf-content, .tf-errors { margin-left: 0; } .tf-slot .tf-date { flex: 1 1 100%; width: auto; } .tf-slot .tf-time { width: 96px; } } /* ---------- Praca → Zadania: Przegląd, Lista, Oś czasu, Kalendarz ---------- */ :where(.tl-bar, .section-bar > span, .section-key).tone-neutral { --c: var(--faint); } :where(.tl-bar, .section-bar > span, .section-key).tone-primary { --c: var(--brand); } :where(.tl-bar, .section-bar > span, .section-key).tone-warning { --c: var(--warning); } :where(.tl-bar, .section-bar > span, .section-key).tone-success { --c: var(--success); } :where(.tl-bar, .section-bar > span, .section-key).tone-danger { --c: var(--danger); } :where(.tl-bar, .section-bar > span, .section-key).tone-info { --c: var(--info); } /* Przegląd */ .task-overview { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } @media (max-width: 1000px) { .task-overview { grid-template-columns: minmax(0, 1fr); } } .task-group + .task-group { border-top: 1px solid var(--border); } .task-group-title { display: flex; align-items: center; gap: 8px; padding: 12px 20px 4px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .task-group-title svg { width: 14px; height: 14px; } .task-group-title.tone-danger svg { color: var(--danger); } .task-group-title.tone-warning svg { color: var(--warning); } .task-group-empty { margin: 0; padding: 4px 20px 12px; } .task-group .list-item { padding: 8px 20px; } .task-group-more { display: flex; align-items: center; gap: 4px; padding: 0 20px 12px; color: var(--muted); } .task-group-more:hover { color: var(--text); } .task-group-more svg { width: 13px; height: 13px; } .task-row .prio { flex-shrink: 0; } .task-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; } .task-row-title { font-weight: 550; } .task-row-main:hover .task-row-title { color: var(--primary-text); } .task-row-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .task-row-sub b { font-weight: 600; color: var(--text-2); } .task-row-sub svg { flex-shrink: 0; } .task-row.is-done .task-row-title { text-decoration: line-through; color: var(--muted); } .section-bar { display: flex; gap: 2px; height: 10px; margin-bottom: 14px; border-radius: 4px; overflow: hidden; } .section-bar > span { min-width: 4px; background: var(--c); } .section-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .section-legend a { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; } .section-legend a:hover { background: var(--surface-hover); } .section-key { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: var(--c); } .section-pct { min-width: 38px; text-align: right; font-size: 12px; } .agenda-bars { height: 136px; gap: 4px; } .agenda-bars .bar { color: inherit; } .agenda-bars .bar em { min-height: 14px; font-style: normal; font-size: 11px; color: var(--text-2); } .agenda-bars .bar small { line-height: 1.25; text-align: center; } .agenda-bars .bar.is-off small { opacity: .6; } .agenda-bars .bar.is-today small { color: var(--primary-text); font-weight: 700; } /* Lista */ .task-table .task-section-head th { position: static; padding: 8px 12px; background: var(--surface-2); color: var(--text); font-size: 13px; } .task-table tbody + tbody .task-section-head th { border-top: 1px solid var(--border); } .task-section.is-collapsed .task-line { display: none; } .task-section-toggle svg { transition: transform .15s; } .task-section.is-collapsed .task-section-toggle svg { transform: rotate(-90deg); } .task-section-add { opacity: 0; transition: opacity .12s; } .task-section-head:hover .task-section-add, .task-section-add:focus-visible { opacity: 1; } @media (hover: none) { .task-section-add { opacity: 1; } } .task-line td { padding-top: 8px; padding-bottom: 8px; } .task-table tbody .task-line:last-child td { border-bottom: 0; } .task-line-title { min-width: 0; } .task-line.is-done .task-line-title { text-decoration: line-through; color: var(--muted); } .task-line-meta { display: inline-flex; flex-shrink: 0; gap: 8px; font-size: 12px; color: var(--muted); } .task-table .project-tag { display: block; max-width: 240px; font-size: 12.5px; color: var(--muted); } .task-table .project-tag b { font-weight: 600; color: var(--text-2); } .task-table .person { font-size: 13px; } /* Oś czasu */ .tl { --label: 300px; } @media (max-width: 700px) { .tl { --label: 180px; } } .tl-scroll { max-height: 72vh; overflow: auto; overscroll-behavior: contain; } .tl-frame { position: relative; width: calc(var(--label) + var(--day) * var(--days)); } .tl-head, .tl-group, .tl-row { display: grid; grid-template-columns: var(--label) calc(var(--day) * var(--days)); } .tl-head { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--border); } .tl-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px 0 16px; background: var(--surface); border-right: 1px solid var(--border); } .tl-label .truncate { flex: 1; min-width: 0; } .tl-label .prio { flex-shrink: 0; } .tl-label .avatar { --size: 20px; font-size: 9px; } .tl-corner { z-index: 5; font-size: 12px; font-weight: 550; color: var(--muted); } .tl-months, .tl-days { display: grid; grid-template-columns: repeat(var(--days), var(--day)); } .tl-months span { padding: 6px 8px 2px; overflow: hidden; border-left: 1px solid var(--border); font-size: 12px; font-weight: 600; white-space: nowrap; } .tl-months span:first-child { border-left: 0; } .tl-months span::first-letter { text-transform: uppercase; } .tl-days span { display: flex; flex-direction: column; align-items: center; padding: 2px 0 6px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .tl-days small { font-size: 10px; color: var(--faint); text-transform: uppercase; } .tl-days .is-off { color: var(--faint); } .tl-days .is-today { color: var(--primary-text); font-weight: 700; } .tl-days .tl-week { align-items: flex-start; padding-left: 4px; border-left: 1px solid var(--border); color: var(--muted); } .tl-body { position: relative; } .tl-bg { position: absolute; top: 0; bottom: 0; left: var(--label); width: calc(var(--day) * var(--days)); display: grid; grid-template-columns: repeat(var(--days), var(--day)); pointer-events: none; } .tl-bg i { border-left: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .tl-monthly .tl-bg i { border-left: 0; } .tl-monthly .tl-bg i.is-monday { border-left: 1px solid color-mix(in oklab, var(--border) 55%, transparent); } .tl-bg i.is-off { background: color-mix(in oklab, var(--surface-2) 85%, transparent); } .tl-today { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * var(--day) + var(--day) / 2 - 1px); width: 2px; background: var(--danger); opacity: .7; } .tl-drop { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--i) * var(--day)); width: max(var(--day), 2px); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); } .tl-drop::after { content: attr(data-label); position: absolute; top: 4px; left: calc(100% + 4px); padding: 1px 6px; border-radius: 4px; background: var(--brand); color: var(--brand-contrast); font-size: 11px; font-weight: 600; white-space: nowrap; } .tl-group { background: color-mix(in oklab, var(--surface-2) 70%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .tl-group:first-of-type { border-top: 0; } .tl-group .tl-label { justify-content: space-between; height: 32px; background: var(--surface-2); font-size: 12.5px; } .tl-group .tl-label b { font-weight: 600; } .tl-row { height: 34px; } .tl-row .tl-label { font-size: 13px; } .tl-row:hover .tl-label { background: var(--surface-hover); } .tl-row.is-done .tl-label a, .tl-row.is-done .tl-bar-text { text-decoration: line-through; color: var(--muted); } .tl-track { position: relative; } .tl-bar { position: absolute; z-index: 1; top: 6px; height: 22px; left: calc(var(--start) * var(--day) + 2px); width: max(calc(var(--span) * var(--day) - 4px), 6px); display: flex; align-items: center; border-radius: 6px; background: color-mix(in oklab, var(--c) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent), inset 3px 0 0 var(--c); color: var(--text); font-size: 12px; cursor: grab; user-select: none; touch-action: none; } .tl-bar:hover { background: color-mix(in oklab, var(--c) 32%, var(--surface)); } .tl-bar.is-cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, transparent); } .tl-bar.is-cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; } .tl-bar-text { min-width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; } .tl-bar.is-day .tl-bar-text, .tl-monthly .tl-bar .tl-bar-text { position: absolute; left: calc(100% + 6px); max-width: 260px; padding: 0; color: var(--muted); } .tl-edge { position: absolute; z-index: 2; top: 0; bottom: 0; width: 8px; cursor: ew-resize; } .tl-edge.is-start { left: -3px; } .tl-edge.is-end { right: -3px; } .tl-edge::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 3px; width: 2px; border-radius: 2px; background: var(--c); opacity: 0; transition: opacity .12s; } .tl-bar:hover .tl-edge::after { opacity: .9; } .tl-bar.is-dragging { z-index: 3; cursor: grabbing; box-shadow: var(--shadow-md), inset 0 0 0 1px var(--c); } .tl-bar[data-preview]::before { content: attr(data-preview); position: absolute; bottom: calc(100% + 3px); left: 0; padding: 1px 6px; border-radius: 4px; background: var(--text); color: var(--surface); font-size: 11px; font-weight: 600; white-space: nowrap; } .tl-bar.is-saving { opacity: .5; } .tl-empty { position: relative; height: 260px; } .tl-empty .empty { position: sticky; left: 0; width: min(560px, 90vw); } .tl-hint { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); } /* Kalendarz zadań i przeciąganie */ .task-cal .cal-month-cell { cursor: default; } .task-cal .cal-chip { cursor: grab; } .task-cal .cal-chip .prio { flex-shrink: 0; width: 6px; height: 6px; } .task-cal .cal-month-cell:not(.is-expanded) .cal-chip.is-extra { display: none; } .task-cal-add { width: 22px; height: 22px; margin-left: auto; opacity: 0; transition: opacity .12s; } .cal-month-cell:hover .task-cal-add, .task-cal-add:focus-visible { opacity: 1; } @media (hover: none) { .task-cal-add { opacity: 1; } } .task-cal-more { border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; } .unscheduled-list { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px; } .unscheduled-chip { max-width: 300px; padding: 4px 8px; cursor: grab; } .unscheduled-chip .prio { flex-shrink: 0; } .schedule-ghost { position: fixed; z-index: 1000; top: 0; left: 0; pointer-events: none; opacity: .92; box-shadow: var(--shadow-md); } .schedule-ghost.tl-bar { position: fixed; height: 22px; } .is-schedule-dragging, .is-schedule-dragging * { cursor: grabbing !important; user-select: none; } /* ---------- Statusy projektów (Ustawienia → Projekty → Statusy) ---------- */ .badge-status { background: color-mix(in oklab, var(--status-color) 15%, var(--surface)); color: color-mix(in oklab, var(--status-color) 65%, var(--text)); } .badge-status::before { background: var(--status-color); opacity: 1; } .status-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .status-kind { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); } .status-kind:hover { background: var(--surface-hover); } .status-kind:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } .status-kind input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); flex-shrink: 0; } .status-kind > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .drag-handle { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--faint); cursor: grab; border-radius: 6px; } .drag-handle:hover { color: var(--text-2); background: var(--surface-hover); } .drag-handle svg { width: 16px; height: 16px; } .sortable-row.is-dragging { opacity: .4; } [data-controller~="sortable-list"].is-saving { opacity: .6; pointer-events: none; } .dropdown > summary .badge-status { cursor: pointer; } .dropdown > summary .badge-status::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .7; } .dropdown-item.is-current { color: var(--text); font-weight: 550; } /* ---------- Raporty ---------- */ .tabs a.is-disabled { opacity: .55; pointer-events: none; cursor: default; } .report-nav { margin-bottom: 16px; flex-wrap: wrap; } .report-nav svg { width: 15px; height: 15px; } .report-alert { margin-bottom: 16px; } .report-table tfoot th { position: static; background: var(--surface-2); color: var(--text); font-size: 13.5px; border-top: 1px solid var(--border); border-bottom: 0; } .report-amount { display: block; } .report-rule { display: inline-flex; align-items: center; gap: 6px; } .report-rule svg { width: 13px; height: 13px; } .report-reason { display: block; white-space: pre-line; font-size: 13px; } .report-person { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .report-dismiss { width: 320px; } .report-docs { margin-top: 4px; } .report-docs > summary { cursor: pointer; width: max-content; } .report-docs ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; } .report-docs li { display: flex; flex-wrap: wrap; gap: 4px 10px; } .report-rules { margin-top: 16px; } .report-rules > summary { cursor: pointer; list-style: none; } .report-rules > summary::-webkit-details-marker { display: none; } .report-rules > summary h2 { display: inline-flex; align-items: center; gap: 8px; } .report-rules > summary svg { width: 16px; height: 16px; color: var(--muted); } .report-rules:not([open]) > summary { border-bottom: 0; } .report-rules .dl { grid-template-columns: 240px minmax(0, 1fr); } @media (max-width: 700px) { .report-rules .dl { grid-template-columns: 1fr; } } /* wiekowanie należności */ .report-aging { --gap: 18px; } .aging-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--surface-hover); gap: 2px; } .aging-bar > span { display: block; min-width: 3px; } .aging-current { --aging: color-mix(in oklab, var(--chart) 55%, transparent); } .aging-d30 { --aging: var(--warning); } .aging-d60 { --aging: color-mix(in oklab, var(--danger) 60%, var(--warning)); } .aging-d90 { --aging: var(--danger); } .aging-over90 { --aging: color-mix(in oklab, var(--danger) 70%, black); } .aging-bar > span { background: var(--aging); } .aging-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--muted); } .aging-key { display: inline-flex; align-items: center; gap: 6px; } .aging-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--aging); } .aging-key strong { color: var(--text); font-weight: 600; } /* wykres wyniku */ .report-chart .bar-cost, .chart-key-cost { fill: color-mix(in oklab, var(--muted) 35%, transparent); } .report-chart .col:hover .bar-cost { fill: color-mix(in oklab, var(--muted) 55%, transparent); } .chart-key-income { fill: var(--chart); } .report-chart .line-result, .chart-key-result { fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; } .report-chart .line-result.is-estimated { stroke-dasharray: 4 4; } .report-chart .point-result, svg .point-result { fill: var(--success); stroke: var(--surface); stroke-width: 2; } .report-chart .point-result.is-negative { fill: var(--danger); } .report-grade { display: inline-flex; align-items: center; gap: 6px; } .report-grade svg { width: 14px; height: 14px; } .report-note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-2); white-space: normal; } .report-note .faint { display: block; font-size: 12px; } .report-docs .link svg { width: 13px; height: 13px; vertical-align: -2px; } .report-table th, .report-table td { padding-left: 12px; padding-right: 12px; } .report-table th:first-child, .report-table td:first-child { padding-left: 16px; } .report-table th:last-child, .report-table td:last-child { padding-right: 16px; } /* pionowa kreska oddzielająca część kasową (wpływy/wydatki) od wyniku memoriałowego */ .report-table .col-split { border-left: 1px solid var(--border-strong); } /* ---------- Ikona projektu (jak w Notion) ---------- */ .project-icon { --icon-size: 20px; display: inline-grid; place-items: center; width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; font-size: calc(var(--icon-size) * .85); line-height: 1; vertical-align: -0.2em; } .project-icon svg { width: 100%; height: 100%; } .project-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 22%; } .project-icon-sm { --icon-size: 16px; } .project-icon-lg { --icon-size: 40px; } .project-icon-xl { --icon-size: 64px; } .project-name { display: inline-flex; align-items: center; gap: 6px; } .project-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .project-title h1 { min-width: 0; } .icon-picker-trigger { display: inline-flex; align-items: center; border-radius: 10px; padding: 2px; } .icon-picker-trigger:hover { background: var(--surface-hover); } .project-icon-add { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; font-size: 13px; color: var(--faint); border-radius: 8px; } .project-icon-add svg { width: 18px; height: 18px; } .project-icon-add span { display: none; } .page-header:hover .project-icon-add span, .icon-picker[open] .project-icon-add span { display: inline; } .icon-picker-menu { width: min(400px, calc(100vw - 32px)); padding: 0; } .icon-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); } .icon-picker-tabs { display: flex; gap: 2px; } .icon-picker-tabs button { height: 34px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; } .icon-picker-tabs button.is-active { color: var(--text); border-bottom-color: var(--text); } .icon-picker-search { padding: 10px 10px 4px; } .icon-picker-search .input-icon { width: 100%; } .icon-picker-search .input { width: 100%; } .icon-picker-scroll { max-height: 280px; overflow-y: auto; padding: 4px 10px 10px; } .icon-picker-label { font-size: 11.5px; font-weight: 550; color: var(--muted); margin: 8px 2px 4px; } .icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; } .icon-picker-cell { display: grid; place-items: center; height: 34px; border: 0; border-radius: 6px; background: none; cursor: pointer; padding: 0; font: inherit; } .icon-picker-cell:hover { background: var(--surface-hover); } .icon-picker-cell.is-current { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); } .icon-picker-emoji { font-size: 22px; line-height: 1; } .icon-picker-icon { color: var(--pick-color, var(--muted)); } .icon-picker-icon svg { width: 20px; height: 20px; } .icon-picker-empty { margin: 8px 2px; } .icon-picker-custom { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--border); } .icon-picker-custom .input { flex: 1; min-width: 0; } .icon-picker-colors { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 2px; } .icon-picker-color { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); cursor: pointer; } .icon-picker-color input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .icon-picker-color:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch); } .icon-picker-color:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; } .icon-picker-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px; padding: 22px 16px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: 12px; cursor: pointer; } .icon-picker-drop:hover { background: var(--surface-hover); border-color: var(--brand); } .icon-picker-drop svg { width: 28px; height: 28px; color: var(--muted); } .icon-picker-drop img { border-radius: 14px; object-fit: cover; } .icon-picker-drop:focus-within { box-shadow: var(--ring); } /* ========================================================================== Zgłoszenia (Praca → Zgłoszenia) i panel klienta ========================================================================== */ .nav-count { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; } .tabs .count { min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--neutral-soft); color: var(--neutral-text); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; } .tabs .count.is-alert { background: var(--danger-soft); color: var(--danger-text); } .ticket-queues { margin-bottom: 16px; } .ticket-row-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .ticket-row-title .row-link { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ticket-table tr.is-awaiting .row-link { font-weight: 650; } .ticket-table tr.is-muted td { color: var(--muted); } .dot-alert { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); } .ticket-priority { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); } .ticket-priority svg { width: 12px; height: 12px; } .ticket-priority.is-high { color: var(--warning-text); } .ticket-priority.is-urgent { color: var(--danger-text); } .ticket-thread { --gap: 12px; } .ticket-message { overflow: hidden; } .ticket-message-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .ticket-message-head .badge svg { width: 11px; height: 11px; } .ticket-message-body { padding: 14px 16px; overflow-wrap: anywhere; } .ticket-message-body a { color: var(--primary-text); text-decoration: underline; } .ticket-message.is-reply { border-left: 3px solid var(--brand); } .ticket-message.is-note { border-left: 3px solid var(--warning); } .ticket-message.is-note .ticket-message-head, .ticket-message.is-note .ticket-message-body { background: var(--warning-soft); } .ticket-message.is-automated { opacity: .8; } .ticket-mail-body { display: block; width: 100%; height: 60px; border: 0; background: #fff; } .ticket-mail-body.is-quoted { border-top: 1px solid var(--border); } .ticket-quoted > summary { display: inline-flex; align-items: center; gap: 4px; margin: 0 16px 10px; padding: 0 8px; height: 22px; border-radius: 6px; background: var(--surface-hover); color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; } .ticket-quoted > summary::-webkit-details-marker { display: none; } .ticket-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--border); } .ticket-files .chip svg { width: 13px; height: 13px; } .ticket-event { display: flex; align-items: flex-start; gap: 8px; padding: 0 6px; font-size: 12.5px; color: var(--muted); } .ticket-event b { color: var(--text-2); font-weight: 600; } .ticket-event s { text-decoration-color: var(--faint); } .ticket-composer { padding: 14px; } .ticket-composer.is-note { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 35%, transparent); } .ticket-composer.is-note .btn-primary { background: var(--warning); border-color: var(--warning); } .ticket-composer-tabs { margin-bottom: 10px; } .ticket-composer-tabs label { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; font-weight: 500; font-size: 13px; color: var(--muted); cursor: pointer; } .ticket-composer-tabs label svg { width: 14px; height: 14px; } .ticket-recipients { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; font-size: 13px; } .ticket-cc { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; } .ticket-cc .input { flex: 1; } .ticket-composer-note { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12.5px; color: var(--warning-text); } .ticket-composer-note svg { width: 14px; height: 14px; } .ticket-editor .rich-content { min-height: 140px; } .ticket-composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .file-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .file-pick [data-file-list-target="list"] { overflow-wrap: anywhere; } .ticket-field { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; } .ticket-field > * { max-width: 100%; } .ticket-field .select-search, .ticket-field form, .ticket-field select { width: 100%; } .ticket-field-label { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--faint); } .ticket-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ticket-suggestions form { width: auto !important; } .chip-button { cursor: pointer; font: inherit; font-size: 12px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-button:hover { border-color: var(--brand); color: var(--primary-text); } .ticket-tasks .list-item { gap: 8px; padding: 8px 0; } .ticket-tasks svg { width: 16px; height: 16px; flex-shrink: 0; } .ticket-task-form > summary { list-style: none; } .ticket-task-form > summary::-webkit-details-marker { display: none; } .ticket-task-form[open] > summary { display: none; } .inbox-address { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); } .inbox-address .mono { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; } /* Panel klienta */ .portal-page { background: var(--bg); min-height: 100vh; } .portal-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 0 max(16px, calc((100vw - 1040px) / 2)); height: 58px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(8px); } .portal-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; min-width: 0; } .portal-nav { display: flex; gap: 2px; margin-left: 12px; } .portal-nav a { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; color: var(--muted); font-weight: 500; } .portal-nav a:hover, .portal-nav a.is-active { background: var(--surface-hover); color: var(--text); } .portal-nav svg { width: 15px; height: 15px; } .portal-main { max-width: 1040px; margin: 0 auto; padding: 28px 16px 60px; } .portal-login { max-width: 420px; margin: 8vh auto 0; } .portal-user { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; } @media (max-width: 700px) { .portal-nav span { display: none; } .portal-user .truncate { display: none; } .ticket-message-head { flex-wrap: wrap; } } .form-heading { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 650; color: var(--text); } .form-heading:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .ticket-unassigned { display: flex; gap: 6px; align-items: flex-start; color: var(--warning-text); } .ticket-unassigned svg { flex-shrink: 0; margin-top: 2px; } .ticket-composer .btn > span { display: inline-flex; align-items: center; gap: 6px; } .ticket-composer .btn > span[hidden], .ticket-composer [hidden] { display: none; } /* ---------- Szablony zadań: edytor pozycji (Ustawienia → Projekty) ---------- */ .tt-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); } .tt-item.is-subtask { margin-left: 28px; background: var(--surface-2); } .tt-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .tt-item-kind { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .tt-item.is-subtask .tt-item-kind { color: var(--faint); } @media (max-width: 700px) { .tt-item.is-subtask { margin-left: 14px; } } /* ---------- Planer pracy (Praca → Planer) ---------- */ .pl-hours { width: 84px; text-align: right; } .pl-week { width: 66px; padding: 0 8px; text-align: right; } .pl-label { flex: 1 1 240px; width: auto; max-width: 320px; } .pl-weeks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; justify-content: flex-end; } .pl-week-label { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--muted); }