/* ============================================================================ THEME SYSTEM — three palettes via [data-theme] on Defaults to bright. Toggle: document.documentElement.dataset.theme = 'dark'|'teal'|'bright' ============================================================================ */ :root, [data-theme="bright"] { --bg: #f7f8fa; --bg-soft: #f3f5f9; --card: #ffffff; --card-soft: #fafbfc; --border: #e6e8ec; --border-strong: #d0d5dd; --text: #0f1115; --text-soft: #4a5168; --text-muted: #6b7280; --text-faint: #9ca3af; --accent: #6366f1; --accent-2: #8b5cf6; --accent-soft: #eef0fb; --green: #10b981; --green-soft: #ecfdf5; --amber: #f59e0b; --amber-soft: #fffbeb; --red: #ef4444; --red-soft: #fef2f2; --blue: #3b82f6; --blue-soft: #eff6ff; --shadow-sm: 0 1px 2px rgba(15,17,21,.04); --shadow-md: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.06); --shadow-lg: 0 4px 14px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --shadow-glow: 0 6px 24px rgba(99,102,241,.18); --bg-decoration: none; --sidebar-bg: linear-gradient(180deg, #fdfdff 0%, #f8f9fc 100%); } [data-theme="dark"] { --bg: #0a0e1a; --bg-soft: #11162a; --card: #141a2e; --card-soft: #1a2138; --border: rgba(255,255,255,.06); --border-strong: rgba(255,255,255,.10); --text: #f1f5f9; --text-soft: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --accent: #818cf8; --accent-2: #c084fc; --accent-soft: rgba(129,140,248,.12); --green: #34d399; --green-soft: rgba(52,211,153,.12); --amber: #fbbf24; --amber-soft: rgba(251,191,36,.12); --red: #f87171; --red-soft: rgba(248,113,113,.12); --blue: #60a5fa; --blue-soft: rgba(96,165,250,.12); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 8px 28px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --shadow-glow: 0 6px 24px rgba(129,140,248,.25); --bg-decoration: radial-gradient(ellipse at top right, rgba(129,140,248,.08), transparent 50%), radial-gradient(ellipse at bottom left, rgba(192,132,252,.06), transparent 50%); --sidebar-bg: linear-gradient(180deg, rgba(20,26,46,.6) 0%, rgba(17,22,42,.8) 100%); } [data-theme="teal"] { --bg: #f0fdfa; --bg-soft: #e6fffa; --card: #ffffff; --card-soft: #f6fefc; --border: #d6f0eb; --border-strong: #a7e6da; --text: #0f3a3a; --text-soft: #2c5959; --text-muted: #4a6e6e; --text-faint: #82a3a3; --accent: #14b8a6; --accent-2: #06b6d4; --accent-soft: #ccfbf1; --green: #059669; --green-soft: #d1fae5; --amber: #f59e0b; --amber-soft: #fef3c7; --red: #dc2626; --red-soft: #fee2e2; --blue: #0284c7; --blue-soft: #e0f2fe; --shadow-sm: 0 1px 2px rgba(15,58,58,.04); --shadow-md: 0 1px 3px rgba(15,58,58,.05), 0 1px 2px rgba(15,58,58,.07); --shadow-lg: 0 4px 14px rgba(15,58,58,.08), 0 1px 3px rgba(15,58,58,.05); --shadow-glow: 0 6px 24px rgba(20,184,166,.22); --bg-decoration: radial-gradient(ellipse at top right, rgba(20,184,166,.06), transparent 50%); --sidebar-bg: linear-gradient(180deg, #f6fefc 0%, #e6fffa 100%); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.55; color: var(--text); -webkit-font-smoothing: antialiased; } body { display: grid; grid-template-columns: 240px 1fr; background: var(--bg); background-image: var(--bg-decoration); background-attachment: fixed; } /* ============ SIDEBAR ============ */ #sidebar { background: var(--sidebar-bg); backdrop-filter: blur(14px); border-right: 1px solid var(--border); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; } .brand-mark { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-mark svg { width: 20px; height: 20px; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Mask-based recoloring: oryginalna grafika logo (transparentne tło z wyekstrahowanej linii artysty) służy jako maska, kolor pochodzi z --accent motywu — przełączenie motywu zmienia kolor logo bez przeładowania pliku. */ .brand-mark .brand-svg { display: block; width: 100%; height: 100%; background-color: var(--accent); -webkit-mask: url("/assets/fidens-icon-mark.png") center/contain no-repeat; mask: url("/assets/fidens-icon-mark.png") center/contain no-repeat; } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.3px; color: var(--text); } .brand-sub { display: block; font-size: 10px; color: var(--text-faint); font-weight: 500; letter-spacing: .8px; text-transform: uppercase; margin-top: 1px; } .nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); padding: 18px 12px 6px; font-weight: 700; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; background: transparent; border: none; text-align: left; width: 100%; font-family: inherit; } .nav-item:hover { background: rgba(127,127,127,.06); color: var(--text); } .nav-item.active { background: linear-gradient(135deg, var(--accent-soft), rgba(139,92,246,.08)); color: var(--accent); font-weight: 600; } [data-theme="dark"] .nav-item.active { background: linear-gradient(135deg, var(--accent-soft), rgba(192,132,252,.10)); } [data-theme="teal"] .nav-item.active { background: linear-gradient(135deg, var(--accent-soft), rgba(6,182,212,.10)); } .nav-item .ico { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .sidebar-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; } .sidebar-utils { display: flex; gap: 6px; align-items: center; padding: 0 4px; } .theme-toggle { display: inline-flex; padding: 2px; background: rgba(127,127,127,.06); border: 1px solid var(--border); border-radius: 999px; } .theme-btn { background: transparent; border: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; font-size: 12px; line-height: 1; opacity: .45; transition: all .15s; } .theme-btn:hover { opacity: .85; } .theme-btn.active { opacity: 1; background: var(--card); box-shadow: var(--shadow-sm); } .sidebar-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; font-size: 13px; transition: all .15s; padding: 0; } .sidebar-btn:hover { background: var(--card); color: var(--text); border-color: var(--border-strong); } /* Icon-only button used in page-header (e.g. refresh) */ .icon-btn { background: var(--card); border: 1px solid var(--border); color: var(--text-muted); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; box-shadow: var(--shadow-sm); transition: all .15s; padding: 0; } .icon-btn:hover { box-shadow: var(--shadow-md); color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .sidebar-user { padding: 12px; background: var(--bg-soft); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; } .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(99,102,241,.25); } .sidebar-user-info { min-width: 0; } .sidebar-user-info b { display: block; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; } .sidebar-user-info small { color: var(--text-muted); font-size: 11px; } /* ============ MAIN ============ */ #main { min-width: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } #tab-gantt.tab.active { display: flex; flex-direction: column; height: 100%; min-height: 0; } #tab-gantt > .toolbar, #tab-gantt > .legend { flex: 0 0 auto; } #tab-gantt > #gantt-target { flex: 1 1 auto; min-height: 0; display: flex; } #tab-gantt > #gantt-target > .cgantt { flex: 1 1 auto; min-width: 0; } #tab-summary, #tab-kadry, #tab-sprzet { height: 100%; overflow: auto; padding: 24px 32px; } /* ZZ + Zamówienia tabs: keep horizontal kanban scrollbar pinned to viewport bottom. Tab itself stops vertical scrolling at the kanban; columns scroll their own content. */ #tab-orders.tab.active, #tab-zz.tab.active { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 24px 32px 0; overflow: hidden; } #orders-list, #zz-list { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 14px; /* breathing room above scrollbar */ scrollbar-gutter: stable; } .zz-column { max-height: 100%; overflow-y: auto; } /* Page header (used by Podsumowanie) */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--text); margin: 0; } .page-header .page-sub { color: var(--text-muted); font-size: 14px; margin-top: 2px; } /* Generic .btn (used in toolbar etc.) */ .btn { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 7px 13px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-sm); transition: all .15s; display: inline-flex; align-items: center; gap: 6px; } .btn:hover { box-shadow: var(--shadow-md); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; box-shadow: var(--shadow-glow); } /* === Kadry i Sprzęt === */ .kadry-header { margin-bottom: 20px; } .kadry-header h2 { margin: 0 0 6px 0; font-size: 22px; font-weight: 700; color: var(--text); } .kadry-sub { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 760px; } .kadry-block { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm); color: var(--text); } .kadry-block h3 { margin: 0 0 6px 0; font-size: 15px; font-weight: 600; color: var(--text); } .kadry-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .kadry-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 14px 0; line-height: 1.5; } .kadry-hint a { color: var(--accent); text-decoration: none; } .kadry-hint a:hover { text-decoration: underline; } .kadry-table-wrap { overflow-x: auto; } .kadry-table { width: 100%; border-collapse: collapse; font-size: 13px; } .kadry-table thead th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); } .kadry-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .kadry-table tbody tr:hover { background: var(--bg-soft); } .kadry-table tr.past td { opacity: 0.55; } .kadry-table .muted { color: var(--text-muted); } .pin-display { display: inline-block; background: var(--bg-soft); padding: 3px 10px; border-radius: 6px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 1px; margin-right: 6px; } .dow-chips { display: inline-flex; gap: 3px; flex-wrap: wrap; } .dow-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 6px; font-size: 11px; font-weight: 500; color: var(--text-faint); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px; cursor: default; } .dow-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .dow-chips-edit .dow-chip { cursor: pointer; transition: background 0.1s; } .dow-chips-edit .dow-chip:hover:not(.on) { background: var(--accent-soft); color: var(--accent); } .wyj-pill { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; background: var(--amber-soft); color: var(--amber); border-radius: 4px; font-size: 11px; } .upr-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; max-width: 360px; } .upr-chip { display: inline-block; padding: 3px 9px; font-size: 11px; font-weight: 500; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; border-radius: 5px; cursor: default; } .upr-chips-edit { gap: 6px; max-width: none; } .upr-chips-edit .upr-chip { background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s; } .upr-chips-edit .upr-chip:hover:not(.on) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); } .upr-chips-edit .upr-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .kadry-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); background: var(--card); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-soft); cursor: pointer; transition: background 0.1s, border-color 0.1s, color 0.1s; } .kadry-btn:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); } .kadry-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .kadry-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; } .kadry-btn-danger { color: var(--red); border-color: var(--red-soft); background: var(--card); } .kadry-btn-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } .kadry-btn-mini { padding: 3px 8px; font-size: 11px; border-radius: 5px; } /* Modal */ .kadry-modal-overlay { position: fixed; inset: 0; background: rgba(15, 22, 50, 0.45); backdrop-filter: blur(2px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; animation: kfade 0.15s; } [data-theme="dark"] .kadry-modal-overlay { background: rgba(0, 0, 0, 0.6); } @keyframes kfade { from { opacity: 0; } to { opacity: 1; } } .kadry-modal { background: var(--card); border: 1px solid var(--border); border-radius: 14px; width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; color: var(--text); } .kadry-modal h3 { margin: 0 0 6px 0; font-size: 17px; font-weight: 600; color: var(--text); } .kadry-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .kadry-field input, .kadry-field select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 14px; font-weight: 400; color: var(--text); text-transform: none; letter-spacing: 0; background: var(--card); transition: border-color 0.12s, box-shadow 0.12s; } .kadry-field input:focus, .kadry-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .kadry-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .kadry-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } /* === Master-detail (cards list + person detail page) === */ .kadry-list-actions { margin: 16px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* === Scaling toolbar (search + filters + sort + group + view) === */ .scaling-toolbar { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); margin-bottom: 14px; flex-wrap: wrap; } .st-search { flex: 1 1 280px; min-width: 200px; position: relative; } .st-search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: 13px; transition: border-color .12s, box-shadow .12s, background .12s; } .st-search input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); } .st-search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; } .st-chips { display: flex; gap: 6px; flex-wrap: wrap; } .st-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); font: inherit; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all .12s; user-select: none; } .st-chip:hover { color: var(--text); border-color: var(--border-strong); } .st-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .st-chip .count { background: rgba(255,255,255,.6); color: inherit; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1.4; } [data-theme="dark"] .st-chip .count { background: rgba(255,255,255,.12); } .st-chip.on .count { background: var(--card); } .st-select { padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; } .st-select:hover { border-color: var(--border-strong); } .st-view-toggle { display: inline-flex; padding: 3px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; } .st-view-toggle button { background: transparent; border: none; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 5px; transition: all .12s; } .st-view-toggle button:hover { color: var(--text); } .st-view-toggle button.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(99,102,241,.15); } .st-meta { font-size: 12px; color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; } /* === Group sections (cards view only) === */ .kadry-group { margin-bottom: 16px; } .kadry-group-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border); border-radius: 10px; transition: filter .12s; } .kadry-group-head:hover { filter: brightness(.97); } .kadry-group-head .caret { font-size: 12px; width: 14px; transition: transform .15s; } .kadry-group.collapsed .caret { transform: rotate(-90deg); } .kadry-group-head h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--accent); } .kadry-group-head .count { background: var(--card); color: var(--accent); padding: 1px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); } .kadry-group-head .group-meta { font-size: 12px; margin-left: auto; opacity: .85; } .kadry-group-body { margin-top: 12px; } .kadry-group.collapsed .kadry-group-body { display: none; } /* Stack multiple lists tighter */ .kadry-list + .kadry-list { margin-top: 14px; } .kadry-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } /* === Compact list view === */ .kadry-list { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .kadry-list .row { display: grid; grid-template-columns: 36px 1.5fr 1fr 160px 80px 100px 28px; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; font-size: 13px; } .kadry-list .row:last-child { border-bottom: none; } .kadry-list .row:hover { background: var(--accent-soft); } .kadry-list .row.head { background: var(--bg-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); cursor: default; padding: 7px 14px; } .kadry-list .row.head > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kadry-list .row.head:hover { background: var(--bg-soft); } /* Group-head row INSIDE the same table (replaces the separate kadry-group-head bar) */ .kadry-list .row.group-head { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); color: var(--accent); cursor: pointer; user-select: none; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 13px; transition: filter .12s; } .kadry-list .row.group-head:hover { filter: brightness(.97); } .kadry-list .row.group-head .caret { font-size: 12px; width: 12px; transition: transform .15s; } .kadry-list .row.group-head h4 { font-size: 13px; font-weight: 700; margin: 0; color: var(--accent); } .kadry-list .row.group-head .count { background: var(--card); color: var(--accent); padding: 1px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); } .kadry-list .row.group-head .group-meta { font-size: 12px; margin-left: auto; opacity: .85; color: var(--accent); } .kadry-list.collapsed .row.group-head .caret { transform: rotate(-90deg); } .kadry-list.collapsed .row:not(.group-head) { display: none; } [data-theme="dark"] .kadry-list .row.group-head .count { background: rgba(255,255,255,.08); } .kadry-list .avatar-mini { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kadry-list .avatar-mini.sprzet { background: linear-gradient(135deg, #d97706, #f59e0b); } .kadry-list .row .name { font-weight: 600; color: var(--text); } .kadry-list .row .stan { color: var(--text-muted); font-size: 12px; } .kadry-list .row .stan-badge { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 11px; background: var(--bg-soft); color: var(--text-soft); } .kadry-list .row .util-cell { display: flex; align-items: center; gap: 6px; } .kadry-list .row .util-cell .util-bar { flex: 1; max-width: 80px; height: 6px; background: var(--bg-soft); border-radius: 3px; overflow: hidden; } .kadry-list .row .util-cell .util-fill { height: 100%; } .kadry-list .row .util-cell .util-pct { min-width: 32px; font-weight: 600; font-size: 11px; } .kadry-list .row .tasks { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; } .kadry-list .row .pending { color: var(--amber); font-weight: 600; } .kadry-list .row .arrow { color: var(--text-faint); font-size: 16px; text-align: right; } .kadry-list .row.status-leave { opacity: .55; } .kadry-list .row.status-inactive { opacity: .4; filter: grayscale(.4); } .kadry-empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .prac-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; display: flex; flex-direction: column; gap: 8px; color: var(--text); } .prac-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .prac-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .prac-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(99,102,241,.25); } .prac-avatar.large { width: 72px; height: 72px; font-size: 26px; } .prac-avatar.sprzet-avatar { background: linear-gradient(135deg, #d97706, #f59e0b); } .prac-card-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .prac-card-name b { font-size: 14px; line-height: 1.2; color: var(--text); } .prac-card-name span { font-size: 12px; color: var(--text-muted); } .prac-card-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft); } .prac-card-label { color: var(--text-muted); min-width: 60px; } .prac-card-foot { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .prac-stat { color: var(--text-soft); } .prac-card-arrow { font-size: 22px; color: var(--text-faint); line-height: 1; } .prac-card:hover .prac-card-arrow { color: var(--accent); } .prac-card-foot-stack { align-items: flex-end; } .prac-card.status-leave { opacity: .55; } .prac-card.status-leave:hover { opacity: 1; } .prac-card.status-inactive { opacity: .4; filter: grayscale(.5); } .prac-card.status-inactive:hover { opacity: 1; filter: none; } .prac-card-stats { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .prac-pending { color: var(--amber); font-weight: 600; } .dow-chip.mini { min-width: 22px; padding: 2px 4px; font-size: 10px; } .pin-display.mini { padding: 2px 6px; font-size: 12px; letter-spacing: 0.5px; } .kadry-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .kadry-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; } .kadry-back { font-weight: 500; } .kadry-detail-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 18px 22px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); color: var(--text); } .kadry-detail-hero h2 { margin: 0 0 4px 0; font-size: 22px; font-weight: 700; color: var(--text); } .kadry-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .kadry-block-full { grid-column: 1 / -1; } .kd-info { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 0; font-size: 13px; } .kd-info dt { color: var(--text-muted); font-weight: 500; } .kd-info dd { margin: 0; color: var(--text); word-break: break-word; } /* Status badges (also reused in worker app context) */ .status-badge { display: inline-block; padding: 2px 9px; font-size: 11px; font-weight: 600; border-radius: 4px; border: 1px solid transparent; } .status-badge.s-Oczekuje { background: var(--amber-soft); color: var(--amber); } .status-badge.s-W-realizacji { background: var(--accent-soft); color: var(--accent); } .status-badge.s-Zakończone { background: var(--green-soft); color: var(--green); } .status-badge.s-Zablokowane { background: var(--red-soft); color: var(--red); } /* === Worker app start card (printable QR) === */ .start-card-modal { max-width: 460px; } .start-card { background: #fff; padding: 22px 26px; border: 1px dashed #b8bdcc; border-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1a1d29; } .sc-brand { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: #4f6df5; margin-bottom: 4px; } .sc-name { margin: 0 0 16px 0; font-size: 22px; line-height: 1.2; } .sc-qr { display: flex; justify-content: center; padding: 12px; background: #fff; border: 1px solid #eef0f5; border-radius: 8px; } .sc-tip { text-align: center; font-size: 12px; color: #7a8095; margin: 8px 0 14px 0; } .sc-creds { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px 0; padding: 12px; background: #f4f0ff; border-radius: 8px; font-size: 14px; } .sc-creds dt { font-weight: 600; color: #4a5168; } .sc-creds dd { margin: 0; font-family: ui-monospace, "SF Mono", Consolas, monospace; word-break: break-all; color: #1a1d29; } .sc-pin { font-size: 18px !important; font-weight: 700; letter-spacing: 2px; color: #4f6df5 !important; } .sc-steps { padding-left: 18px; margin: 0 0 14px 0; font-size: 13px; line-height: 1.5; color: #1a1d29; } .sc-steps li { margin-bottom: 6px; } .sc-steps ul { padding-left: 16px; margin-top: 4px; font-size: 12px; } .sc-foot { font-size: 11px; color: #7a8095; text-align: center; margin: 0; border-top: 1px solid #eef0f5; padding-top: 10px; } /* Print: ONE A4 page (standard, każda drukarka, każda kartka). Karta wypełnia stronę pionowo, duża typografia, duży QR. */ @media print { @page { size: A4 portrait; margin: 0; } html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; color: #000 !important; } /* Ukryj wszystko poza overlay z kartą */ body > *:not(.kadry-modal-overlay) { display: none !important; } .kadry-modal-overlay { position: static !important; background: #fff !important; padding: 0 !important; margin: 0 !important; display: block !important; inset: auto !important; width: auto !important; height: auto !important; overflow: visible !important; } .kadry-modal-overlay > *:not(.kadry-modal) { display: none !important; } .kadry-modal { box-shadow: none !important; border: none !important; background: #fff !important; padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; max-height: none !important; overflow: visible !important; display: block !important; transform: none !important; } .kadry-modal > *:not(.start-card) { display: none !important; } .no-print { display: none !important; } /* Karta wypełnia stronę A4 (210×297mm) z marginesem 15mm */ .start-card { position: static !important; width: 210mm; min-height: 297mm; box-sizing: border-box; border: none; box-shadow: none; padding: 18mm 20mm; background: #fff; margin: 0; page-break-after: avoid; page-break-inside: avoid; break-after: avoid; break-inside: avoid; color: #000; } .start-card .sc-brand { font-size: 14px; letter-spacing: 3px; margin-bottom: 4mm; } .start-card .sc-name { font-size: 36px; line-height: 1.1; margin: 0 0 10mm 0; font-weight: 700; } .start-card .sc-qr { padding: 4mm; margin: 0 auto 5mm auto; width: max-content; border: 1px solid #ccc; border-radius: 6px; } .start-card .sc-qr img { width: 80mm !important; height: 80mm !important; display: block; } .start-card .sc-tip { font-size: 14px; margin: 0 0 8mm 0; text-align: center; color: #555; } .start-card .sc-creds { grid-template-columns: auto 1fr; gap: 3mm 6mm; padding: 6mm 8mm; margin: 0 0 8mm 0; background: #f4f0ff; border-radius: 6px; font-size: 16px; } .start-card .sc-creds dt { font-weight: 600; color: #4a5168; } .start-card .sc-pin { font-size: 24px !important; font-weight: 700; letter-spacing: 3px; color: #4f6df5 !important; } .start-card .sc-steps { padding-left: 6mm; margin: 0 0 6mm 0; font-size: 14px; line-height: 1.5; } .start-card .sc-steps li { margin-bottom: 3mm; } .start-card .sc-steps ul { padding-left: 5mm; margin-top: 1.5mm; font-size: 13px; } .start-card .sc-foot { font-size: 11px; padding-top: 4mm; margin: 0; color: #666; text-align: center; border-top: 1px solid #eee; } } /* === Summary cards (mockup-grade) === */ #summary-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: box-shadow .2s ease; grid-column: span 4; } .kpi-card:hover { box-shadow: var(--shadow-lg); } .kpi-card.kpi-card-wide { grid-column: span 8; } .kpi-card.kpi-card-half { grid-column: span 6; } @media (max-width: 1100px) { .kpi-card, .kpi-card.kpi-card-wide, .kpi-card.kpi-card-half { grid-column: span 12; } } .kpi-card.kpi-glow::before { content: ''; position: absolute; top: -50%; right: -20%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(99,102,241,.10), transparent 70%); pointer-events: none; z-index: 0; } [data-theme="dark"] .kpi-card.kpi-glow::before { background: radial-gradient(circle, rgba(129,140,248,.18), transparent 70%); } [data-theme="teal"] .kpi-card.kpi-glow::before { background: radial-gradient(circle, rgba(20,184,166,.10), transparent 70%); } .kpi-card > * { position: relative; z-index: 1; } .kpi-card h3 { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .kpi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .kpi-card-head h3 { flex: 1 1 auto; min-width: 0; } .kpi-scale { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-soft); border-radius: 7px; } .kpi-scale-btn { padding: 4px 10px; border: none; background: transparent; font: inherit; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 5px; transition: all .12s; } .kpi-scale-btn:hover { color: var(--text); } .kpi-scale-btn.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(99,102,241,.15); } .kpi-big { font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -.7px; } .kpi-big small { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 6px; letter-spacing: 0; } .kpi-delta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; margin-top: 2px; } .kpi-delta.up { color: var(--green); background: var(--green-soft); } .kpi-delta.down { color: var(--red); background: var(--red-soft); } .kpi-delta.warn { color: var(--amber); background: var(--amber-soft); } .kpi-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--text-soft); } .kpi-list li { padding: 5px 0; display: flex; align-items: center; gap: 10px; } .kpi-list li .label { color: var(--text-soft); flex: 1; } .kpi-list li .val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .kpi-list li .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); display: inline-block; flex-shrink: 0; } .kpi-list li .dot.s-przyjęte { background: var(--amber); } .kpi-list li .dot.s-w-realizacji { background: var(--blue); } .kpi-list li .dot.s-zrealizowane { background: var(--green); } .kpi-list li .dot.s-anulowane { background: var(--red); } .kpi-list-detail { margin-top: 6px; } .kpi-list-detail li { display: block; padding: 10px 12px; background: var(--red-soft); border-left: 3px solid var(--red); border-radius: 6px; margin: 6px 0; font-size: 13px; } .kpi-list-detail li b { color: var(--text); font-weight: 600; } .kpi-list-detail li small { color: var(--text-muted); font-size: 12px; display: block; margin-top: 2px; } .kpi-list-detail.warn li { background: var(--amber-soft); border-left-color: var(--amber); } .kpi-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-top: 14px; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; } .kpi-sub.warn { color: var(--red); } .kpi-sub .badge { background: var(--red); color: #fff; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; } .kpi-sub.amber { color: var(--amber); } .kpi-sub.amber .badge { background: var(--amber); } .kpi-meta { font-size: 12px; color: var(--text-muted); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .kpi-meta b { color: var(--text); font-weight: 700; } .kpi-meta .sep { color: var(--text-faint); margin: 0 6px; } .kpi-meta.warn { color: var(--red); font-weight: 600; border-top: none; padding-top: 0; } .kpi-meta.ok { color: var(--green); } /* Utilization rows */ .kpi-rows { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .kpi-rows li { display: grid; grid-template-columns: 130px 1fr 50px; align-items: center; gap: 10px; padding: 0; font-size: 12px; } .kpi-row-label { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kpi-row-meta { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .util-bar { position: relative; height: 7px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; } .util-fill { display: block; height: 100%; border-radius: 4px; transition: width 0.4s ease; } .util-fill.util-low { background: linear-gradient(90deg, #34d399, var(--green)); } .util-fill.util-mid { background: linear-gradient(90deg, #fbbf24, var(--amber)); } .util-fill.util-high { background: linear-gradient(90deg, #f87171, var(--red)); } /* Podsumowanie's old "%" label span was hidden — keep that, but don't break util-fill spans */ .util-bar > span:not(.util-fill) { display: none; } /* AI button + output */ .ai-btn { margin-top: 14px; padding: 9px 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-glow); transition: transform .15s ease, box-shadow .15s ease; } .ai-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(99,102,241,.32); } .ai-btn:disabled { opacity: 0.6; cursor: wait; } .ai-out { font-size: 13px; margin-top: 10px; } .ai-out:empty { display: none; } .ai-suggestion { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 6px; color: var(--text); line-height: 1.5; white-space: pre-wrap; } .ai-loading { color: var(--text-muted); font-style: italic; } .ai-error { background: var(--red-soft); border-left: 3px solid var(--red); padding: 10px 12px; border-radius: 6px; color: var(--red); } /* Pipeline rows (ZZ) */ .pipeline-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .pipeline-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-soft); border-radius: 8px; font-size: 13px; transition: background .12s; } .pipeline-row:hover { background: var(--accent-soft); } .pipeline-count { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; min-width: 30px; text-align: center; } .pipeline-name { color: var(--text); font-weight: 500; } .pipeline-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* Magazyn alert rows */ .alert-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .alert-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; } .alert-row.zero { background: var(--red-soft); } .alert-row.low { background: var(--amber-soft); } .alert-row .name { flex: 1; color: var(--text); font-weight: 500; } .alert-row .qty { color: var(--text-soft); font-variant-numeric: tabular-nums; font-weight: 600; } .alert-row.zero .qty { color: var(--red); font-weight: 700; } .alert-row.low .qty { color: var(--amber); font-weight: 700; } /* (Old top-bar header/nav rules removed — replaced by sidebar layout above.) */ .tab { display: none; } .tab.active { display: block; } .toolbar { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; background: var(--card); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); flex-wrap: wrap; } .toolbar label { font-size: 13px; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; } .toolbar select { margin-left: 0; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s; } .toolbar select:hover { border-color: var(--border-strong); } .toolbar select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .toolbar input[type="checkbox"] { accent-color: var(--accent); } #gantt-status { color: var(--text-muted); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; } /* btn-primary hover (used by Nowe zamówienie + TERAZ) */ .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(99,102,241,.32); } [data-theme="teal"] .btn-primary:hover { box-shadow: 0 8px 22px rgba(20,184,166,.32); } [data-theme="dark"] .btn-primary:hover { box-shadow: 0 8px 22px rgba(129,140,248,.35); } /* Inline SVG icon inside .btn — matches text color via currentColor */ .btn .btn-ico { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; vertical-align: -2px; } #gantt-target { background: var(--card); border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 12px; overflow: auto; } #gantt-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: 12px; } .lg { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--text-soft); box-shadow: var(--shadow-sm); } .lg::before { content: ''; width: 12px; height: 12px; border-radius: 3px; } .lg-oczekuje::before { background: var(--amber); } .lg-w-realizacji::before { background: var(--accent); } .lg-zakonczone::before { background: var(--green); } .lg-zablokowane::before { background: var(--red); } .lg-opoznienie::before { background: var(--text-faint); border: 1px dashed var(--text-muted); } .lg-absence::before { background: repeating-linear-gradient(45deg, rgba(239,68,68,.18) 0 4px, rgba(239,68,68,.32) 4px 8px); border: 1px dashed rgba(239,68,68,.5); } /* ===== Custom Gantt ===== */ .cgantt { position: relative; font-size: 12px; user-select: none; } .cgantt-grid { display: grid; grid-template-columns: 220px 1fr 14px; /* labels | canvas | vertical bar */ grid-template-rows: 1fr 14px; /* main row | horizontal bar */ height: 100%; min-height: 0; overflow: hidden; } .cgantt-grid > .cgantt-row-labels { grid-row: 1; grid-column: 1; } .cgantt-grid > .cgantt-canvas { grid-row: 1; grid-column: 2; } .cgantt-grid > .cgantt-vbar { grid-row: 1; grid-column: 3; } .cgantt-grid > .cgantt-hbar { grid-row: 2; grid-column: 2; } .cgantt-row-labels { background: var(--card); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; /* hide left-column scrollbar (we sync it from the canvas via JS) */ scrollbar-width: none; } .cgantt-row-labels::-webkit-scrollbar { width: 0; height: 0; } .cgantt-row-labels .row-label { height: 26px; padding: 0 10px; display: flex; align-items: center; font-size: 12px; color: var(--text-soft); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cgantt-row-labels .row-label.group-header { background: var(--bg-soft); font-weight: 700; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; } .cgantt-canvas { overflow: hidden; /* both native bars suppressed — replaced by custom .cgantt-hbar/.cgantt-vbar */ position: relative; background: var(--card-soft); min-width: 0; min-height: 0; height: 100%; } /* (Native scrollbars hidden via overflow:hidden — both axes use custom bars below) */ .cgantt-canvas { scrollbar-color: var(--accent) #e8edfb; } /* Firefox vertical only */ /* Custom horizontal/vertical scrollbars — themed via vars */ .cgantt-hbar, .cgantt-vbar { display: flex; background: var(--bg-soft); flex: 0 0 auto; user-select: none; } .cgantt-hbar { align-items: stretch; height: 14px; } .cgantt-vbar { flex-direction: column; width: 14px; } .cgantt-hbar-arrow, .cgantt-vbar-arrow { background: var(--bg-soft); border: none; padding: 0; font-size: 14px; line-height: 1; color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: -apple-system, "Segoe UI Symbol", sans-serif; transition: background 0.1s, color 0.1s; } .cgantt-hbar-arrow { flex: 0 0 14px; width: 14px; } .cgantt-vbar-arrow { flex: 0 0 14px; height: 14px; } .cgantt-hbar-arrow:hover, .cgantt-vbar-arrow:hover { background: var(--accent-soft); } .cgantt-hbar-arrow:active, .cgantt-vbar-arrow:active { background: var(--border); color: var(--accent-2); } .cgantt-hbar-track, .cgantt-vbar-track { position: relative; flex: 1 1 auto; cursor: pointer; } .cgantt-hbar-track { height: 100%; } .cgantt-vbar-track { width: 100%; } .cgantt-hbar-thumb, .cgantt-vbar-thumb { position: absolute; background: var(--accent); border-radius: 5px; cursor: grab; transition: background 0.12s; } .cgantt-hbar-thumb { top: 2px; bottom: 2px; } .cgantt-vbar-thumb { left: 2px; right: 2px; } .cgantt-hbar-thumb:hover, .cgantt-vbar-thumb:hover { background: var(--accent-2); } .cgantt-hbar-thumb.dragging, .cgantt-vbar-thumb.dragging { cursor: grabbing; background: var(--accent-2); transition: none; } .cgantt-canvas::-webkit-scrollbar-thumb:hover { background: var(--accent-2); } .cgantt-canvas::-webkit-scrollbar-corner { background: var(--bg-soft); } .cgantt-canvas { scrollbar-color: var(--accent) var(--bg-soft); } /* Firefox */ .cgantt-canvas-inner { position: relative; } .cgantt-header { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--border); } .cgantt-header-day { position: absolute; top: 0; height: 24px; border-left: 1px solid var(--border); font-weight: 600; font-size: 12px; padding: 4px 6px; color: var(--text); background: var(--card); white-space: nowrap; } .cgantt-header-day.weekend { background: var(--red-soft); color: var(--red); } .cgantt-header-day.holiday { background: var(--amber-soft); color: var(--amber); } .cgantt-header-day.holiday::after { content: ' ✦'; } .cgantt-header-hour { position: absolute; top: 24px; height: 22px; border-left: 1px solid var(--border); font-size: 10px; padding: 4px 4px; color: var(--text-muted); white-space: nowrap; } .cgantt-rows { position: relative; } .cgantt-grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; } .cgantt-row { height: 26px; border-bottom: 1px solid var(--border); position: relative; z-index: 0; } .cgantt-row.group-header { background: var(--bg-soft); height: 26px; z-index: 0; } .cgantt-row.weekend-stripe { background-image: repeating-linear-gradient( 45deg, transparent 0 8px, rgba(127,127,127,.06) 8px 9px ); } /* Absence overlay — semi-transparent red wash on row segments where pracownik/sprzęt is unavailable */ .cgantt-absence { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient( 45deg, rgba(239,68,68,.10) 0 8px, rgba(239,68,68,.18) 8px 16px ); pointer-events: auto; /* enable hover tooltip */ cursor: help; z-index: 1; border-left: 1px dashed rgba(239,68,68,.4); border-right: 1px dashed rgba(239,68,68,.4); transition: filter .12s; } .cgantt-absence:hover { filter: brightness(.95); } /* Custom rich tooltip for absence overlays */ .cgantt-tip { position: fixed; z-index: 2000; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow-lg); font-size: 12px; line-height: 1.55; max-width: 320px; pointer-events: none; animation: cgt-fade .15s; } .cgantt-tip.hidden { display: none; } @keyframes cgt-fade { from { opacity: 0; transform: translateY(-4px); } } .cgantt-tip-head { font-size: 13px; font-weight: 700; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .cgantt-tip-row { font-size: 12px; color: var(--text-soft); margin-top: 3px; } .cgantt-tip-row b { color: var(--text-muted); font-weight: 600; } .cgantt-tip .muted { color: var(--text-muted); } [data-theme="dark"] .cgantt-absence { background: repeating-linear-gradient( 45deg, rgba(248,113,113,.18) 0 8px, rgba(248,113,113,.28) 8px 16px ); } .cgantt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 6; pointer-events: none; box-shadow: 0 0 6px rgba(239,68,68,.5); } .cgantt-now::after { content: 'TERAZ'; position: absolute; top: 0; left: 4px; background: var(--red); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 700; letter-spacing: .4px; box-shadow: 0 1px 3px rgba(239,68,68,.4); } .cgantt-bar { position: absolute; z-index: 5; height: 18px; top: 4px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; padding: 0 7px; font-size: 10px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-sm); transition: transform 0.1s, box-shadow 0.1s, filter 0.1s; } .cgantt-bar:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); z-index: 8; } .cgantt-bar.status-oczekuje { background: linear-gradient(180deg, #fbbf24, var(--amber)); color: #5b3700; } .cgantt-bar.status-w-realizacji { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #fff; } /* Teal theme: --accent (#14b8a6 teal) is too close to --green (#059669) visually on the Gantt bars. Override "W realizacji" to a clearly-blue gradient so it's distinguishable from "Zakończone". Same fix on the legend dot below. */ [data-theme="teal"] .cgantt-bar.status-w-realizacji { background: linear-gradient(180deg, #3b82f6, #1d4ed8); color: #fff; } [data-theme="teal"] .lg-w-realizacji::before { background: #3b82f6; } [data-theme="teal"] .gantt .bar-wrapper.status-w-realizacji .bar { fill: #3b82f6; } .cgantt-bar.status-zakonczone { background: linear-gradient(180deg, #34d399, var(--green)); color: #fff; } .cgantt-bar.status-zablokowane { background: repeating-linear-gradient(45deg, var(--red) 0 6px, #c9302c 6px 12px); color: #fff; border: 1px solid #a7332f; } .cgantt-bar.opoznienie { background: repeating-linear-gradient(45deg, var(--text-faint) 0 6px, var(--border-strong) 6px 12px); border: 1px dashed var(--text-muted); color: var(--text-soft); } /* === Task dialog (modernized) === */ #task-dialog { width: 560px; max-width: 96vw; padding: 0; border: none; border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 22, 50, 0.25), 0 4px 12px rgba(15, 22, 50, 0.08); background: var(--card); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #task-dialog::backdrop { background: rgba(15, 22, 50, 0.45); backdrop-filter: blur(2px); } #task-dialog form { padding: 0; margin: 0; } #task-dialog h2 { font-size: 17px; font-weight: 600; margin: 0; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); color: var(--text); } #task-dialog #td-body { padding: 16px 22px; max-height: 70vh; overflow-y: auto; } #task-dialog menu { margin: 0; padding: 12px 22px; background: var(--bg-soft); border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; display: flex; justify-content: flex-end; } #task-dialog menu button { padding: 8px 18px; border: 1px solid var(--border-strong); background: var(--card); border-radius: 7px; font: inherit; font-size: 13px; color: var(--text-soft); cursor: pointer; } #task-dialog menu button:hover { background: var(--border); border-color: var(--text-faint); } #task-dialog dl { display: grid; grid-template-columns: 130px 1fr; gap: 9px 16px; font-size: 13px; margin: 0; } #task-dialog dl dt { color: var(--text-muted); font-weight: 500; } #task-dialog dl dd { margin: 0; color: var(--text); word-break: break-word; line-height: 1.45; } /* Editor block */ .td-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .td-editor-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); margin-bottom: 14px; } .td-editor-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .td-field { margin-bottom: 14px; } .td-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 6px; } .td-editor textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--card); resize: vertical; min-height: 64px; line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s; } .td-editor textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 109, 245, 0.15); } /* Segmented status picker */ .td-segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; background: var(--bg-soft); border-radius: 9px; } .td-seg { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 8px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 500; color: var(--text-soft); transition: background 0.12s, color 0.12s, transform 0.08s; } .td-seg-icon { font-size: 16px; line-height: 1; } .td-seg:hover:not(.active) { background: #e8ebf2; } .td-seg:active { transform: scale(0.97); } .td-seg.active { background: var(--card); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 22, 50, 0.12); } .td-seg.active[data-status="Oczekuje"] { color: var(--amber); } .td-seg.active[data-status="W realizacji"] { color: var(--accent); } .td-seg.active[data-status="Zakończone"] { color: var(--green); } .td-seg.active[data-status="Zablokowane"] { color: var(--red); } /* Action buttons */ .td-actions { display: flex; gap: 10px; margin-top: 4px; } .td-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border: none; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s, transform 0.08s, box-shadow 0.12s; } .td-btn:active { transform: scale(0.97); } .td-btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79, 109, 245, 0.25); } .td-btn-primary:hover { background: var(--accent-2); box-shadow: 0 4px 10px rgba(79, 109, 245, 0.3); } .td-btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--border-strong); } .td-btn-ghost:hover { background: var(--border); border-color: var(--text-faint); } .td-msg { margin-top: 10px; font-size: 12px; min-height: 16px; transition: opacity 0.2s; } .td-msg.ok { color: var(--green); font-weight: 500; } .td-msg.err { color: var(--red); font-weight: 500; } /* Gantt task colors by status */ .gantt .bar-wrapper.status-oczekuje .bar { fill: var(--amber); } .gantt .bar-wrapper.status-w-realizacji .bar { fill: var(--accent); } .gantt .bar-wrapper.status-zakonczone .bar { fill: var(--green); } .gantt .bar-wrapper.status-zablokowane .bar { fill: var(--red); } .gantt .bar-wrapper.opoznienie .bar { fill: #c9c9c9; stroke-dasharray: 4 4; } /* === Orders kanban === */ #orders-list { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; } .order-column { background: var(--bg-soft); } .order-card-kanban { display: flex; flex-direction: column; gap: 6px; } .order-card-kanban .meta { font-size: 11px; } /* === Stale-records hidden note (under any kanban) === */ .kanban-hidden-note { margin: 0 0 12px 0; padding: 8px 14px; font-size: 12px; color: var(--text-muted); background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 8px; text-align: center; flex: 0 0 auto; } /* Aktywność dziś — audit expand */ .kpi-audit-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; } .kpi-audit-details summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 4px 0; list-style: none; } .kpi-audit-details summary::-webkit-details-marker { display: none; } .kpi-audit-details summary:hover { color: var(--accent-2); } .kpi-audit-body { color: var(--text-soft); line-height: 1.6; padding-top: 6px; } .kpi-audit-body div { margin-bottom: 6px; } .kpi-audit-body div.muted { color: var(--text-muted); } .kpi-audit-body b { color: var(--text); font-weight: 600; } .kpi-audit-body .bullet { display: block; padding-left: 14px; } .kpi-audit-body .bullet.muted { color: var(--text-muted); } /* === Orders cards (legacy grid — kept in case used elsewhere) === */ .order-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .order-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: box-shadow .2s, border-color .15s, transform .12s; position: relative; } .order-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); transform: translateY(-1px); } .order-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); } .order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .order-card h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; } .order-card .meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; } .order-card .meta b { color: var(--text); font-weight: 600; } .order-progress-wrap { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .order-card .progress { flex: 1 1 auto; height: 8px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; } .order-card .progress > div { height: 100%; background: linear-gradient(90deg, #34d399, var(--green)); border-radius: 4px; transition: width 0.4s; } .order-progress-pct { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; } .order-card .stats { display: flex; gap: 6px; font-size: 11px; flex-wrap: wrap; margin-top: 2px; } .order-card .stat { padding: 3px 9px; border-radius: 10px; background: var(--bg-soft); color: var(--text-soft); font-weight: 600; } .order-card .stat.scheduled { background: var(--accent-soft); color: var(--accent); } .order-card .stat.done { background: var(--green-soft); color: var(--green); } .order-card .stat.blocked { background: var(--red-soft); color: var(--red); } .order-status-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; } .order-status-pill.s-Przyjęte { background: var(--amber-soft); color: var(--amber); } .order-status-pill.s-W-realizacji { background: var(--accent-soft); color: var(--accent); } .order-status-pill.s-Zrealizowane { background: var(--green-soft); color: var(--green); } .order-status-pill.s-Anulowane { background: var(--red-soft); color: var(--red); } .order-deadline { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } .order-deadline.overdue { color: var(--red); font-weight: 600; } .order-deadline.soon { color: var(--amber); font-weight: 600; } /* === ZZ kanban (mockup grade) === */ #zz-list { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; } .zz-column { flex: 0 0 300px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; } .zz-column-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); padding: 0 4px; } .zz-column-count { background: var(--card); color: var(--text); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); letter-spacing: 0; } .zz-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13px; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); } .zz-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-1px); } .zz-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .zz-card.zz-warn { border-left: 3px solid var(--red); } .zz-card .nr { font-weight: 700; color: var(--text); font-size: 14px; } .zz-card .supplier { font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 4px; } .zz-card .meta { color: var(--text-muted); font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px 10px; } .zz-card .meta .val-pill { background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 8px; font-weight: 700; } .zz-card .meta .overdue-pill { background: var(--red-soft); color: var(--red); padding: 2px 8px; border-radius: 8px; font-weight: 700; } .zz-card .actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .zz-card .actions button { font: inherit; font-size: 11px; font-weight: 600; padding: 5px 10px; border: 1px solid var(--border); background: var(--card); color: var(--text-soft); border-radius: 6px; cursor: pointer; transition: all .12s; } .zz-card .actions button:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .zz-card .actions button.btn-warn { color: var(--red); border-color: var(--red-soft); } .zz-card .actions button.btn-warn:hover { background: var(--red); color: #fff; border-color: var(--red); } .zz-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 16px; font-style: italic; } .zz-locked-hint { font-size: 11px; color: var(--text-muted); font-style: italic; background: var(--bg-soft); padding: 4px 8px; border-radius: 5px; width: 100%; } /* Detail panel: clickable position rows for Brak dostawcy ZZs */ .dz-pos-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; background: var(--accent-soft); color: var(--accent); padding: 8px 12px; border-radius: 7px; line-height: 1.5; } #detail-body table tr.pos-no-supp td { background: var(--red-soft); } #detail-body table tr.pos-no-supp td:first-child { box-shadow: inset 3px 0 0 var(--red); } #detail-body table tr.dz-pos-clickable { cursor: pointer; transition: background .12s; } #detail-body table tr.dz-pos-clickable:hover td { background: var(--accent-soft); } #detail-body table tr.dz-pos-clickable.pos-no-supp:hover td { background: var(--red-soft); filter: brightness(.95); } /* === Settings dialog === */ dialog { border: none; border-radius: 14px; padding: 24px; max-width: 480px; background: var(--card); color: var(--text); box-shadow: var(--shadow-lg); } dialog::backdrop { background: rgba(15, 22, 50, 0.45); backdrop-filter: blur(2px); } [data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, 0.6); } dialog h2 { margin: 0 0 16px; color: var(--text); font-size: 17px; font-weight: 700; } dialog label { display: block; margin: 12px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); } dialog input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--card); margin-top: 6px; transition: border-color .12s, box-shadow .12s; } dialog input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } dialog .hint { font-size: 12px; color: var(--text-muted); margin: 8px 0 16px; line-height: 1.5; background: var(--bg-soft); padding: 10px 12px; border-radius: 7px; } dialog menu { display: flex; gap: 8px; justify-content: flex-end; padding: 0; margin: 16px 0 0; } dialog menu button { padding: 8px 18px; border: 1px solid var(--border); background: var(--card); color: var(--text-soft); border-radius: 7px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .12s; } dialog menu button:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); } dialog menu button[value="save"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; box-shadow: var(--shadow-glow); } dialog menu button[value="save"]:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(99,102,241,.32); } .empty { text-align: center; color: var(--text-muted); padding: 40px; font-size: 14px; } .error { background: var(--red-soft); color: var(--red); padding: 12px 16px; border-radius: 8px; margin: 12px 0; border-left: 3px solid var(--red); font-size: 13px; } /* === Detail panel (slide-up from bottom, drag to resize) === */ #detail-panel { position: fixed; bottom: 0; left: 240px; /* clear of sidebar */ right: 0; height: 44vh; /* default — JS sets inline style on drag */ max-height: 95vh; min-height: 120px; background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -8px 32px rgba(15,23,42,.18); display: flex; flex-direction: column; z-index: 20; transition: transform 0.25s ease; border-radius: 12px 12px 0 0; } [data-theme="dark"] #detail-panel { box-shadow: 0 -8px 32px rgba(0,0,0,.5); } #detail-panel.hidden { transform: translateY(100%); pointer-events: none; } /* Drag handle — full-width strip at the top so it's easy to grab */ #detail-resize { position: absolute; top: 0; left: 0; right: 0; height: 12px; cursor: ns-resize; z-index: 21; display: flex; align-items: center; justify-content: center; background: transparent; transition: background .15s; } #detail-resize::before { content: ''; width: 48px; height: 4px; background: var(--border-strong); border-radius: 2px; transition: background .15s, width .15s; } #detail-resize:hover::before { background: var(--accent); width: 60px; } #detail-resize.dragging::before { background: var(--accent); width: 60px; } #detail-panel.dragging { transition: none; user-select: none; } #detail-panel.dragging * { user-select: none; pointer-events: none; } #detail-panel.dragging #detail-resize { pointer-events: auto; } #detail-panel header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px 12px; border-bottom: 1px solid var(--border); background: var(--card); border-radius: 12px 12px 0 0; } #detail-panel h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } #detail-close { background: var(--bg-soft); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-muted); transition: all .12s; display: inline-flex; align-items: center; justify-content: center; } #detail-close:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); } #detail-body { padding: 14px 24px; overflow: auto; font-size: 13px; } #detail-body dl { display: grid !important; grid-template-columns: 180px 1fr; column-gap: 16px; row-gap: 6px; margin: 0 0 12px; align-items: baseline; } #detail-body dl dt { color: var(--text-muted); font-weight: 500; margin: 0; padding: 0; } #detail-body dl dd { margin: 0; padding: 0; color: var(--text); font-weight: 500; } #detail-body table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; } #detail-body th, #detail-body td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #e1e4eb; } #detail-body th { background: var(--bg); color: var(--text-muted); font-weight: 600; } #detail-body h3 { margin: 12px 0 6px; font-size: 13px; color: var(--text-soft); } /* Selected card highlight */ .order-card.selected, .zz-card.selected { outline: 2px solid var(--accent); outline-offset: -2px; } .order-card { cursor: pointer; } .zz-card { cursor: pointer; } main { padding-bottom: 16px; } body.detail-open main { padding-bottom: 44vh; } /* === Manager-todos banner === */ #availability-banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 24px; font-size: 13px; border-bottom: 1px solid var(--border); background: var(--bg-soft); color: var(--text); } #availability-banner.hidden { display: none; } #availability-banner[data-severity="red"] { background: var(--red-soft); border-bottom-color: var(--red); } #availability-banner[data-severity="amber"] { background: var(--amber-soft); border-bottom-color: var(--amber); } #availability-banner[data-severity="info"] { background: var(--blue-soft); border-bottom-color: var(--blue); } #availability-banner .banner-icon { font-size: 16px; flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.6); } #availability-banner[data-severity="red"] .banner-icon { color: var(--red); } #availability-banner[data-severity="amber"] .banner-icon { color: var(--amber); } #availability-banner[data-severity="info"] .banner-icon { color: var(--blue); } [data-theme="dark"] #availability-banner .banner-icon { background: rgba(255,255,255,.08); } #availability-banner .banner-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text); flex-shrink: 0; } #availability-banner[data-severity="red"] .banner-title { color: var(--red); } #availability-banner[data-severity="amber"] .banner-title { color: var(--amber); } #availability-banner[data-severity="info"] .banner-title { color: var(--blue); } #availability-banner .banner-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; } .banner-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font: inherit; font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; transition: all .15s; box-shadow: var(--shadow-sm); } .banner-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .banner-chip[data-tab=""] { cursor: default; } .banner-chip[data-tab=""]:hover { transform: none; box-shadow: var(--shadow-sm); } .banner-chip .chip-ico { font-size: 14px; line-height: 1; } .banner-chip.sev-red { border-color: var(--red); color: var(--red); } .banner-chip.sev-red .chip-ico { color: var(--red); } .banner-chip.sev-amber { border-color: var(--amber); color: var(--amber); } .banner-chip.sev-amber .chip-ico { color: var(--amber); } .banner-chip.sev-info { border-color: var(--blue); color: var(--blue); } .banner-chip.sev-info .chip-ico { color: var(--blue); } [data-theme="dark"] .banner-chip { background: rgba(20,26,46,.6); } /* === Banner detail modal === */ .banner-detail-modal { max-width: 640px; width: 100%; } .banner-detail-modal h3 { display: flex; align-items: center; gap: 10px; } .banner-detail-ico { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; background: var(--bg-soft); } .banner-detail-ico.sev-red { background: var(--red-soft); color: var(--red); } .banner-detail-ico.sev-amber { background: var(--amber-soft); color: var(--amber); } .banner-detail-ico.sev-info { background: var(--blue-soft); color: var(--blue); } .banner-detail-body { max-height: 60vh; overflow-y: auto; margin: 4px 0 8px 0; } .bd-hint { font-size: 12px; color: var(--text-muted); background: var(--bg-soft); padding: 8px 12px; border-radius: 6px; margin: 0 0 12px 0; line-height: 1.5; } .bd-list { display: flex; flex-direction: column; gap: 8px; } .bd-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--card-soft); border: 1px solid var(--border); border-radius: 8px; } .bd-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .bd-row-who { font-weight: 600; color: var(--text); font-size: 14px; } .bd-row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--text-muted); } .bd-row-reason { font-size: 12px; color: var(--text-soft); font-style: italic; margin-top: 2px; } .bd-pill { background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 10px; font-weight: 600; font-size: 11px; } .bd-dates { color: var(--text-muted); font-variant-numeric: tabular-nums; } .bd-dates .muted, .bd-row .muted { color: var(--text-faint); } .bd-row-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .bd-row-actions .kadry-btn { white-space: nowrap; min-width: 110px; } /* Pending wyjątek row tint inside Kadry/Sprzęt detail tables */ .kadry-table tr.wyj-pending td { background: var(--amber-soft); } .kadry-table tr.wyj-pending td:first-child { box-shadow: inset 3px 0 0 var(--amber); } /* Flash highlight when navigated from a banner chip */ @keyframes flash-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,.15); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } } .flash-highlight { animation: flash-pulse 2.4s ease-out 1; border-color: var(--amber) !important; } /* ============================================================================ MOBILE — managers panel responsive layer - Sidebar becomes off-canvas drawer (slides in from left) - Body switches from 240px+1fr to single column - Mobile topbar with hamburger replaces always-on sidebar - Detail panel pulls left:0 (no sidebar to clear) - Tab content padding tightened - Tables in Kadry/Sprzęt list view scroll horizontally ============================================================================ */ #mobile-topbar { display: none; } #sidebar-backdrop { display: none; } @media (max-width: 768px) { html, body { height: auto; /* allow page to grow */ overflow: visible; /* override desktop overflow:hidden that blocked mobile scroll */ min-height: 100%; } body { display: block; /* override 240px+1fr grid */ background-attachment: scroll; overscroll-behavior-y: contain; } #mobile-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; height: 52px; box-shadow: var(--shadow-sm); } #mobile-topbar .mobile-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); letter-spacing: -.3px; } #mobile-topbar .brand-mark { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } #mobile-topbar .brand-mark svg { width: 18px; height: 18px; fill: #fff; } #mobile-topbar .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } #mobile-menu-btn { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 8px; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } /* Sidebar becomes off-canvas drawer */ #sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; transform: translateX(-100%); transition: transform .25s ease; z-index: 100; box-shadow: 0 0 30px rgba(0,0,0,.2); } body.sidebar-open #sidebar { transform: translateX(0); } body.sidebar-open #sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(15,22,50,.45); backdrop-filter: blur(2px); animation: bd-fade .2s; } @keyframes bd-fade { from { opacity: 0; } } /* Main content */ #main { height: auto; min-height: calc(100vh - 52px); overflow: visible; } #tab-summary, #tab-kadry, #tab-sprzet { height: auto; padding: 16px 14px; overflow: visible; } #tab-orders.tab.active, #tab-zz.tab.active { height: auto; padding: 16px 14px 0; overflow: visible; } #tab-gantt.tab.active { height: calc(100vh - 52px); padding: 12px; } /* Page header — stack title + actions */ .page-header { gap: 12px; margin-bottom: 14px; } .page-header h1 { font-size: 20px; } .page-actions { width: 100%; justify-content: flex-end; } .page-sub { font-size: 12px; } /* Manager banner — tighter padding */ #availability-banner { padding: 8px 14px; font-size: 12px; } #availability-banner .banner-title { display: none; } #availability-banner .banner-icon { width: 22px; height: 22px; font-size: 14px; } .banner-chip { font-size: 11px; padding: 4px 10px; } /* Podsumowanie cards — full width stack */ #summary-grid { grid-template-columns: 1fr !important; gap: 12px; } .kpi-card, .kpi-card-wide, .kpi-card-half { grid-column: 1 !important; } .kpi-card { padding: 14px 16px; } .kpi-big { font-size: 26px; } .kpi-rows li { grid-template-columns: 110px 1fr 40px; gap: 8px; font-size: 11px; } /* Toolbars (Gantt, scaling) — tighter, wrap */ .toolbar { padding: 8px 10px; gap: 10px; } .toolbar select { padding: 6px 8px; font-size: 12px; } .scaling-toolbar { padding: 10px; gap: 10px; } .st-search { flex: 1 1 100%; } .st-chips { width: 100%; } .st-select, .st-view-toggle { flex: 1 1 auto; } .st-meta { width: 100%; text-align: right; } /* Kadry/Sprzęt list view — horizontal scroll for the table */ .kadry-list { overflow-x: auto; } .kadry-list .row { min-width: 640px; } /* keep table layout, scroll horizontally */ .kadry-list .row.group-head { min-width: auto; } /* Cards grids — tighten */ .kadry-cards { gap: 10px; grid-template-columns: 1fr; } .prac-card { padding: 12px 14px; } .prac-avatar { width: 38px; height: 38px; font-size: 14px; } /* Kanbans (Zamówienia, Zakupy) — already overflow-x; tighten column width */ .zz-column { flex: 0 0 280px; } #orders-list, #zz-list { padding: 0 14px 14px; gap: 10px; } /* Detail panel — full width on mobile (no sidebar to clear) */ #detail-panel { left: 0; height: 65vh; border-radius: 12px 12px 0 0; } #detail-panel header { padding: 16px 16px 10px; } #detail-panel h2 { font-size: 14px; } #detail-body { padding: 12px 16px; font-size: 12px; } #detail-body dl { grid-template-columns: 110px 1fr; column-gap: 10px; row-gap: 4px; } #detail-body table { font-size: 11px; } #detail-body th, #detail-body td { padding: 6px 4px; } /* Detail panel for Kadry/Sprzęt person page (kadry-detail-grid) — single column */ .kadry-detail-grid { grid-template-columns: 1fr !important; } .kadry-detail-hero { flex-direction: column; align-items: flex-start; padding: 14px 16px; } .kadry-detail-header { flex-direction: column; align-items: flex-start; gap: 10px; } .kadry-detail-actions { width: 100%; flex-wrap: wrap; } .kd-info { grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 12px; } /* Modals — bottom sheet style on mobile (slide up from bottom) */ .kadry-modal-overlay { align-items: flex-end !important; padding: 0; } .kadry-modal { border-radius: 14px 14px 0 0; width: 100% !important; max-width: 100% !important; max-height: 92vh; padding: 18px 18px env(safe-area-inset-bottom, 18px); animation: km-slide .2s ease-out; } @keyframes km-slide { from { transform: translateY(100%); } to { transform: translateY(0); } } .kadry-row-2 { grid-template-columns: 1fr; } /* dialog (settings, task editor) — same bottom-sheet treatment */ dialog { margin: 0; max-width: 100%; width: 100%; border-radius: 14px 14px 0 0; position: fixed; bottom: 0; left: 0; right: 0; top: auto; max-height: 92vh; overflow-y: auto; padding: 18px 18px env(safe-area-inset-bottom, 18px); } #task-dialog { width: 100%; max-width: 100%; } #task-dialog #td-body { padding: 12px 16px; max-height: 65vh; } /* Gantt — switch to native touch-scroll. Custom scrollbars (cgantt-hbar/vbar) don't track touch drags reliably; the existing scroll-event sync handler already updates row-labels Y when the canvas scrolls, so native scroll works for both axes out of the box. */ .cgantt-grid { grid-template-columns: 140px 1fr; /* drop the 14px vbar column */ grid-template-rows: 1fr; /* drop the 14px hbar row */ } .cgantt-canvas { overflow: auto !important; -webkit-overflow-scrolling: touch; } .cgantt-hbar, .cgantt-vbar { display: none; } /* Disable touch-scrolling on row-labels — they follow the canvas via the existing scroll-event sync. Otherwise users can drift the two columns out of alignment by touching labels. */ .cgantt-row-labels { overflow: hidden !important; touch-action: none; } } @media (max-width: 480px) { #tab-summary, #tab-kadry, #tab-sprzet, #tab-orders.tab.active, #tab-zz.tab.active { padding: 14px 10px; } .page-header h1 { font-size: 18px; } .kpi-card { padding: 12px 14px; } .kpi-big { font-size: 22px; } .scaling-toolbar { padding: 8px; } .st-chip { font-size: 10px; padding: 4px 8px; } /* Even tighter Gantt label column on small phones */ .cgantt-grid { grid-template-columns: 110px 1fr 12px; } .kanban-hidden-note { font-size: 11px; padding: 8px 10px; } }