/* ============================================================ bauplan.css – BauPlan Pro · NACH style.css einbinden Light/Dark via [data-theme="light"|"dark"] auf ============================================================ */ /* ══════════════════════════════════════════════ THEME TOKENS (override style.css where needed) ══════════════════════════════════════════════ */ /* ── DARK (default aus style.css) ── */ [data-theme="dark"] { --bp-bg: #0d0f14; --bp-surface: #161920; --bp-surface2: #1e222b; --bp-surface3: #252a35; --bp-border: rgba(255,255,255,.08); --bp-border2: rgba(255,255,255,.13); --bp-text: #e8eaf0; --bp-muted: #8a8fa8; --bp-accent: #c8963b; --bp-accent-bg: rgba(169,237,23,.08); --bp-danger: #f87171; --bp-danger-bg: rgba(248,113,113,.08); --bp-shadow: 0 8px 32px rgba(0,0,0,.5); --bp-shadow-lg: 0 24px 60px rgba(0,0,0,.65); --bp-nav-bg: rgba(13,15,20,.92); --bp-modal-bg: #1a1d26; --bp-overlay: rgba(0,0,0,.75); --bp-input-bg: #0d0f14; --bp-scrollbar: #2a2f3d; --bp-label-bg: #131720; /* left label column */ } /* ── LIGHT ── */ [data-theme="light"] { --bp-bg: #f4f5f7; --bp-surface: #ffffff; --bp-surface2: #f0f1f4; --bp-surface3: #e8eaee; --bp-border: rgba(0,0,0,.08); --bp-border2: rgba(0,0,0,.14); --bp-text: #16191f; --bp-muted: #6b7280; --bp-accent: #6c4908; /* etwas dunkler für Lesbarkeit auf Weiß */ --bp-accent-bg: rgba(107,184,0,.08); --bp-danger: #dc2626; --bp-danger-bg: rgba(220,38,38,.07); --bp-shadow: 0 4px 20px rgba(0,0,0,.10); --bp-shadow-lg: 0 20px 50px rgba(0,0,0,.15); --bp-nav-bg: rgba(255,255,255,.92); --bp-modal-bg: #ffffff; --bp-overlay: rgba(15,20,30,.55); --bp-input-bg: #f4f5f7; --bp-scrollbar: #d1d5db; --bp-label-bg: #eef0f5; /* left label column */ /* override style.css global tokens for light mode */ --clr-bg: #f4f5f7; --clr-surface: #ffffff; --clr-surface2: #f0f1f4; --clr-border: rgba(0,0,0,.08); --clr-text: #16191f; --clr-text-muted: #6b7280; --clr-accent: #6bb800; --clr-cta: #6bb800; --clr-cta-hover: #4d8500; --nav-bg: rgba(255,255,255,.92); --nav-bg-scrolled:rgba(255,255,255,.97); } /* ── Keep btn-primary readable in light ── */ [data-theme="light"] .btn-primary { color: #fff; background: #16191f; } [data-theme="light"] .btn-primary:hover { background: #6bb800; } /* ══════════════════════════════════════════════ RESET / BASE ══════════════════════════════════════════════ */ html, body { height: 100%; overflow: hidden; } body { background: var(--bp-bg); color: var(--bp-text); transition: background .25s ease, color .25s ease; } /* ══════════════════════════════════════════════ TOPBAR ══════════════════════════════════════════════ */ :root { --topbar-h: 80px; } .bp-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--bp-nav-bg); border-bottom: 1px solid var(--bp-border); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); z-index: 1000; /* accent line */ box-shadow: 0 2px 0 0 var(--bp-accent); border-bottom: none !important; transition: background .25s ease, box-shadow .25s ease; } .bp-topbar-inner { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 16px; overflow: hidden; /* prevent any wrapping */ flex-wrap: nowrap; } /* Logo button */ .bp-logo-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--bp-border2); background: var(--bp-surface2); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; transition: border-color .2s ease, transform .15s ease; } .bp-logo-btn:hover { border-color: var(--bp-accent); transform: scale(1.05); } .bp-logo-btn img { width: 100%; height: 100%; object-fit: contain; } .bp-logo-fallback { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--bp-accent); letter-spacing: -.02em; } /* Project info */ .bp-topbar-project { flex: 1; min-width: 0; } .bp-topbar-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--bp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .bp-topbar-sub { font-size: 11px; color: var(--bp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-top: 1px; } /* Meta */ .bp-topbar-meta { display: flex; gap: 18px; font-size: 11px; } .bp-topbar-meta-item { display: flex; flex-direction: column; gap: 0; } .bp-topbar-meta-key { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--bp-muted); font-weight: 600; } .bp-topbar-meta-val { color: var(--bp-text); font-weight: 500; line-height: 1.3; } /* Actions */ .bp-topbar-actions { flex-wrap: nowrap; flex-shrink: 0; display: flex; gap: 4px; align-items: center; } .bp-topbar-divider { width: 1px; height: 18px; background: var(--bp-border); margin: 0 2px; opacity: .6; flex-shrink: 0; } /* Icon button (topbar) */ .bp-icon-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--bp-muted); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .bp-icon-btn:hover { background: var(--bp-surface2); border-color: var(--bp-border); color: var(--bp-text); } .bp-icon-btn svg { flex-shrink: 0; } .bp-btn-icon { padding: 6px 8px; } /* Theme toggle */ .bp-theme-toggle { border-color: var(--bp-border); } .bp-theme-toggle:hover { border-color: var(--bp-accent); color: var(--bp-accent); } /* ══════════════════════════════════════════════ APP SHELL ══════════════════════════════════════════════ */ .bp-shell { display: flex; height: 100vh; padding-top: var(--topbar-h); overflow: hidden; transition: padding-top .3s ease; } /* Topbar collapsed state */ /* topbar-hidden applied on element */ html.topbar-hidden .bp-topbar { transform: translateY(-100%); box-shadow: none; } html.topbar-hidden .bp-shell { padding-top: 0; } html.topbar-hidden .bp-sidebar { top: 0; } /* Collapse button hidden on mobile */ @media (max-width: 768px) { .bp-topbar-collapse { display: none; } .bp-topbar-tab { display: none; } } /* Topbar reveal tab — always visible */ .bp-topbar-tab { position: fixed; top: 0; right: 80px; /* move away from Projekt button area */ z-index: 1001; background: var(--bp-surface2); border: 1px solid var(--bp-border2); border-top: none; border-radius: 0 0 8px 8px; padding: 4px 12px; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--bp-muted); cursor: pointer; display: flex; align-items: center; gap: 5px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; transform: translateY(-100%); } .topbar-hidden .bp-topbar-tab { opacity: 1; pointer-events: all; transform: translateY(0); } .bp-topbar-tab:hover { color: var(--bp-accent); border-color: var(--bp-accent); } /* Collapse toggle button in topbar */ .bp-topbar-collapse { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--bp-border); background: transparent; color: var(--bp-muted); cursor: pointer; flex-shrink: 0; transition: color .15s ease, background .15s ease; margin-left: 4px; } .bp-topbar-collapse:hover { color: var(--bp-text); background: var(--bp-surface2); } .bp-topbar { transition: transform .3s ease, background .25s ease, box-shadow .25s ease; } /* ── SIDEBAR ── */ .bp-sidebar { width: 208px; flex-shrink: 0; background: var(--bp-surface); border-right: 1px solid var(--bp-border); display: flex; flex-direction: column; overflow-y: auto; transition: background .25s ease; } .bp-sidenav { flex: 1; padding: 8px 0; } .bp-sidenav-section { padding: 10px 0 6px; border-bottom: 1px solid var(--bp-border); } .bp-sidenav-section:last-child { border-bottom: none; } .bp-sidenav-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-muted); padding: 0 14px 6px; } .bp-nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; color: var(--bp-muted); cursor: pointer; text-decoration: none; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; margin-right: 8px; transition: color .15s ease, background .15s ease, border-color .15s ease; } .bp-nav-item svg { flex-shrink: 0; opacity: .7; transition: opacity .15s ease; } .bp-nav-item:hover { color: var(--bp-text); background: var(--bp-surface2); } .bp-nav-item:hover svg { opacity: 1; } .bp-nav-item.active { color: var(--bp-accent); background: var(--bp-accent-bg); border-left-color: var(--bp-accent); font-weight: 600; } .bp-nav-item.active svg { opacity: 1; } .bp-badge { margin-left: auto; background: var(--bp-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; line-height: 1.5; } .bp-sidebar-footer { padding: 12px 14px; font-size: 10.5px; color: var(--bp-muted); border-top: 1px solid var(--bp-border); line-height: 1.6; } .bp-sidebar-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; display: inline-block; } /* ── MAIN ── */ .bp-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--bp-bg); transition: background .25s ease; } .bp-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* View header */ .bp-view-header { display: flex; align-items: center; gap: 12px; padding: 14px 24px 12px; flex-shrink: 0; border-bottom: 1px solid var(--bp-border); background: var(--bp-bg); position: relative; z-index: 5; } .bp-view-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--bp-text); letter-spacing: -.03em; } .bp-view-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ══════════════════════════════════════════════ BUTTON OVERRIDES ══════════════════════════════════════════════ */ .btn { transition: background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease; } .bp-btn-sm { padding: 7px 14px !important; font-size: 12px !important; border-radius: 8px !important; } .btn.bp-btn-sm { display: inline-flex; align-items: center; gap: 5px; } /* btn-primary always uses accent */ .btn-primary { background: var(--bp-accent) !important; color: #111 !important; font-weight: 700 !important; border: none !important; } .btn-primary:hover { background: color-mix(in srgb, var(--bp-accent) 85%, #fff) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(169,237,23,.3) !important; } [data-theme="light"] .btn-primary:hover { box-shadow: 0 4px 16px rgba(107,184,0,.25) !important; } /* Text button */ .bp-text-btn { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--bp-muted); padding: 6px 4px; border-radius: 6px; transition: color .15s ease; } .bp-text-btn:hover { color: var(--bp-text); } /* Danger button */ .bp-danger-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--bp-danger-bg); border-radius: 8px; padding: 7px 12px; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--bp-danger); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .bp-danger-btn:hover { background: var(--bp-danger-bg); border-color: var(--bp-danger); } /* ══════════════════════════════════════════════ FORM ══════════════════════════════════════════════ */ .bp-form-group { display: flex; flex-direction: column; gap: 5px; } .bp-field-label { font-size: 11px; font-weight: 600; color: var(--bp-muted); text-transform: uppercase; letter-spacing: .07em; } .bp-input { background: var(--bp-input-bg); border: 1px solid var(--bp-border2); border-radius: 8px; color: var(--bp-text); padding: 8px 11px; font-family: var(--font-body); font-size: 13px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease, background .25s ease; -webkit-appearance: none; } .bp-input:focus { outline: none; border-color: var(--bp-accent); box-shadow: 0 0 0 3px rgba(169,237,23,.12); } [data-theme="light"] .bp-input:focus { box-shadow: 0 0 0 3px rgba(107,184,0,.14); } .bp-textarea { resize: vertical; min-height: 72px; line-height: 1.6; } /* Select */ .bp-select-wrap { position: relative; } .bp-select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; } .bp-select option { background: var(--bp-surface2); } .bp-select-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--bp-muted); } /* ══════════════════════════════════════════════ GANTT ══════════════════════════════════════════════ */ .bp-gantt-wrap { flex: 1; overflow: auto; margin-top: 12px; position: relative; } .bp-gantt-inner { display: block; min-width: max-content; } .bp-gantt-grid { display: block; } /* Month row */ .bp-gantt-months { display: flex; background: var(--bp-bg); border-bottom: 1px solid var(--bp-border); position: sticky; top: 0; z-index: 19; } .bp-gantt-month-spacer { width: 260px; flex-shrink: 0; border-right: 2px solid var(--bp-accent); background: var(--bp-label-bg); position: sticky; left: 0; z-index: 21; padding: 4px 12px; font-size: 11px; color: var(--bp-muted); display: flex; align-items: center; } .bp-gantt-month { border-right: 2px solid var(--bp-accent); font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--bp-accent); padding: 4px 8px; display: flex; align-items: center; background: var(--bp-bg); white-space: nowrap; } /* Day header */ .bp-gantt-days { display: flex; background: var(--bp-surface); border-bottom: 1px solid var(--bp-border); position: sticky; top: 26px; z-index: 18; } .bp-gantt-day-spacer { width: 260px; flex-shrink: 0; border-right: 2px solid var(--bp-accent); background: var(--bp-label-bg); position: sticky; left: 0; z-index: 20; padding: 0 12px; display: flex; align-items: flex-end; font-size: 10px; color: var(--bp-muted); font-weight: 600; padding-bottom: 4px; } .bp-gantt-day-col { width: 36px; flex-shrink: 0; border-right: 1px solid var(--bp-border); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2px; cursor: pointer; transition: background .1s ease; user-select: none; } .bp-gantt-day-col:hover { background: var(--bp-accent-bg); } .bp-gantt-day-col.is-weekend { background: rgba(128,128,128,.05); } .bp-gantt-day-col.is-today { background: rgba(169,237,23,.12); } .bp-gantt-day-col.is-today .bp-gantt-day-num { color: var(--bp-accent); font-weight: 800; } .bp-gantt-day-name { font-size: 8px; color: var(--bp-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .bp-gantt-day-num { font-size: 11px; font-weight: 600; color: var(--bp-muted); } .bp-gantt-day-col.is-weekend .bp-gantt-day-num { opacity: .35; } /* Gewerk header */ .bp-gantt-gw-header { display: flex; align-items: center; height: 28px; background: var(--bp-surface2); border-bottom: 1px solid var(--bp-border); } .bp-gantt-gw-label { width: 260px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--bp-text); border-right: 2px solid var(--bp-accent); position: sticky; left: 0; z-index: 10; background: var(--bp-label-bg); height: 100%; filter: brightness(1.12); } .bp-gantt-gw-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; } .bp-gantt-gw-grid { display: flex; height: 28px; flex: 1; min-width: 0; overflow: hidden; } .bp-gantt-gw-cell { width: 36px; flex-shrink: 0; border-right: 1px solid var(--bp-border); } .bp-gantt-gw-cell.is-weekend { background: rgba(128,128,128,.06); } /* Task row */ .bp-gantt-task-row { display: flex; align-items: center; height: 36px; border-bottom: 1px solid var(--bp-border); cursor: pointer; } .bp-gantt-task-row:hover .bp-gantt-task-label { background: var(--bp-surface2); filter: brightness(1.06); } .bp-gantt-task-label { width: 260px; flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 22px; font-size: 12px; font-weight: 400; color: var(--bp-muted); border-right: 2px solid var(--bp-accent); position: sticky; left: 0; z-index: 9; background: var(--bp-label-bg); transition: background .12s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-gantt-task-grid { display: flex; height: 100%; flex: 1; position: relative; } .bp-gantt-task-cell { width: 36px; flex-shrink: 0; border-right: 1px solid var(--bp-border); } .bp-gantt-task-cell.is-weekend { background: rgba(128,128,128,.04); } /* Bar */ .bp-gantt-bar { position: absolute; top: 4px; height: 28px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; color: rgba(0,0,0,.78); white-space: nowrap; overflow: hidden; cursor: pointer; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.12); transition: filter .15s ease, box-shadow .15s ease, transform .12s ease; } .bp-gantt-bar:hover { filter: brightness(1.1); box-shadow: 0 2px 12px rgba(0,0,0,.3); transform: translateY(-1px); } .bp-gantt-bar.collision { outline: 2px solid var(--bp-danger); box-shadow: 0 0 0 3px rgba(248,113,113,.2); } /* Collision tag */ .bp-collision-tag { font-size: 11px; font-weight: 600; color: var(--bp-danger); background: var(--bp-danger-bg); border: 1px solid rgba(248,113,113,.2); padding: 4px 10px; border-radius: 99px; display: flex; align-items: center; gap: 5px; } /* ══════════════════════════════════════════════ TOOLTIP ══════════════════════════════════════════════ */ .bp-tooltip { position: fixed; background: var(--bp-surface); border: 1px solid var(--bp-border2); border-top: 2px solid var(--bp-accent); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--bp-text); pointer-events: none; z-index: 9999; box-shadow: var(--bp-shadow); max-width: 240px; line-height: 1.6; } .bp-tooltip-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-bottom: 3px; } .bp-tooltip-row { color: var(--bp-muted); font-size: 11px; } .bp-tooltip-notes { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--bp-border); font-size: 11px; color: var(--bp-muted); font-style: italic; } /* ══════════════════════════════════════════════ TAGESREGISTER ══════════════════════════════════════════════ */ .bp-tages-daynav { display: flex; align-items: center; gap: 8px; margin-left: auto; } .bp-tages-dayinfo { text-align: center; min-width: 130px; } .bp-tages-dayname { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--bp-text); } .bp-tages-daynum { font-size: 10px; color: var(--bp-muted); margin-top: 1px; } .bp-tages-body { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; } .bp-tages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Card */ .bp-card { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: 12px; padding: 16px 18px; transition: background .25s ease; } .bp-card-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--bp-accent); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid var(--bp-border); } .bp-active-task { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; background: var(--bp-surface2); border-radius: 7px; margin-bottom: 5px; } .bp-active-task-name { font-size: 12px; font-weight: 600; color: var(--bp-text); line-height: 1.3; } .bp-active-task-meta { font-size: 10.5px; color: var(--bp-muted); margin-top: 1px; } /* Images */ .bp-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 8px; } .bp-img-thumb { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--bp-surface2); position: relative; cursor: pointer; } .bp-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; } .bp-img-thumb:hover img { transform: scale(1.04); } .bp-img-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.65); border: none; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s ease; backdrop-filter: blur(4px); } .bp-img-thumb:hover .bp-img-remove { opacity: 1; } .bp-img-add { aspect-ratio: 1; border-radius: 8px; border: 1.5px dashed var(--bp-border2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--bp-muted); cursor: pointer; font-size: 11px; font-weight: 500; transition: border-color .15s ease, color .15s ease, background .15s ease; } .bp-img-add:hover { border-color: var(--bp-accent); color: var(--bp-accent); background: var(--bp-accent-bg); } /* Files */ .bp-file-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bp-surface2); border-radius: 7px; margin-bottom: 5px; } .bp-file-icon { color: var(--bp-muted); flex-shrink: 0; } .bp-file-name { font-size: 12px; font-weight: 600; color: var(--bp-text); flex: 1; } /* ══════════════════════════════════════════════ GEWERKE ══════════════════════════════════════════════ */ .bp-gewerke-list { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; } .bp-gewerk-card { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; transition: border-color .15s ease, box-shadow .15s ease; } .bp-gewerk-card:hover { border-color: var(--bp-border2); box-shadow: var(--bp-shadow); } .bp-gewerk-swatch { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .15s ease, box-shadow .15s ease; } .bp-gewerk-swatch:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.3); } .bp-gewerk-info { flex: 1; min-width: 0; } .bp-gewerk-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--bp-text); } .bp-gewerk-meta { font-size: 11px; color: var(--bp-muted); margin-top: 2px; } .bp-task-count { font-size: 11px; font-weight: 600; color: var(--bp-accent); background: var(--bp-accent-bg); border: 1px solid rgba(169,237,23,.18); padding: 3px 10px; border-radius: 99px; white-space: nowrap; } /* ══════════════════════════════════════════════ EMAIL ══════════════════════════════════════════════ */ .bp-email-body { flex: 1; overflow-y: auto; padding: 16px 24px; max-width: 800px; } .bp-email-compose { background: var(--bp-surface); border: 1px solid var(--bp-border); border-radius: 12px; overflow: hidden; margin-top: 14px; } .bp-email-header-bar { background: var(--bp-accent); padding: 10px 18px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: rgba(0,0,0,.75); } .bp-email-field { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--bp-border); } .bp-email-field-label { font-size: 11px; font-weight: 600; color: var(--bp-muted); width: 60px; flex-shrink: 0; padding-top: 5px; text-transform: uppercase; letter-spacing: .06em; } .bp-email-field input { flex: 1; background: transparent; border: none; color: var(--bp-text); font-family: var(--font-body); font-size: 13px; outline: none; } .bp-email-textarea { width: 100%; min-height: 220px; background: transparent; border: none; color: var(--bp-text); font-family: var(--font-body); font-size: 13px; outline: none; resize: vertical; padding: 14px 18px; line-height: 1.7; } /* ══════════════════════════════════════════════ COLLISION ══════════════════════════════════════════════ */ .bp-collision-list { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; } .bp-collision-card { background: var(--bp-surface); border: 1px solid rgba(248,113,113,.18); border-radius: 12px; padding: 16px 18px; } .bp-collision-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .bp-collision-nr { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--bp-text); } .bp-overlap-tag { font-size: 11px; font-weight: 600; color: var(--bp-danger); background: var(--bp-danger-bg); border: 1px solid rgba(248,113,113,.2); padding: 2px 9px; border-radius: 99px; } .bp-collision-tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bp-collision-task { background: var(--bp-surface2); border-radius: 8px; padding: 10px 12px; } .bp-collision-task-gw { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 700; font-size: 12px; color: var(--bp-text); } .bp-collision-task-name { font-weight: 500; font-size: 13px; color: var(--bp-text); } .bp-collision-task-dates { font-size: 11px; color: var(--bp-muted); margin-top: 2px; } .bp-collision-overlap { font-size: 11px; color: var(--bp-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bp-border); } /* ══════════════════════════════════════════════ MODALS (modernisiert) ══════════════════════════════════════════════ */ .bp-modal-overlay { position: fixed; inset: 0; background: var(--bp-overlay); display: flex; align-items: center; justify-content: center; z-index: 1500; padding: 20px; backdrop-filter: blur(8px) saturate(140%); animation: bp-overlay-in .2s ease; } @keyframes bp-overlay-in { from { opacity: 0; } to { opacity: 1; } } .bp-modal { background: var(--bp-modal-bg); border: 1px solid var(--bp-border2); border-radius: 16px; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; box-shadow: var(--bp-shadow-lg); animation: bp-modal-in .22s cubic-bezier(.2,.8,.3,1); transition: background .25s ease; } @keyframes bp-modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .bp-modal-lg { max-width: 680px; } .bp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--bp-border); position: sticky; top: 0; background: var(--bp-modal-bg); z-index: 2; } .bp-modal-title-wrap { display: flex; align-items: center; gap: 9px; } .bp-modal-icon { color: var(--bp-accent); flex-shrink: 0; } .bp-modal-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--bp-text); } .bp-modal-close { width: 30px; height: 30px; border-radius: 8px; background: var(--bp-surface2); border: 1px solid var(--bp-border); color: var(--bp-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease; } .bp-modal-close:hover { background: var(--bp-danger-bg); color: var(--bp-danger); border-color: var(--bp-danger); } .bp-modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .bp-modal-divider { height: 1px; background: var(--bp-border); margin: 2px 0; } .bp-modal-footer { padding: 14px 22px; border-top: 1px solid var(--bp-border); display: flex; align-items: center; gap: 8px; position: sticky; bottom: 0; background: var(--bp-modal-bg); z-index: 2; } /* Logo row in project modal */ .bp-modal-logo-row { display: flex; gap: 16px; } .bp-logo-upload { border: 1.5px dashed var(--bp-border2); border-radius: 10px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; overflow: hidden; padding: 8px; } .bp-logo-upload:hover { border-color: var(--bp-accent); background: var(--bp-accent-bg); } /* Color swatches */ .bp-color-swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .bp-color-swatch { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 2px; transition: transform .15s ease, outline-color .15s ease; } .bp-color-swatch:hover { transform: scale(1.12); } .bp-color-swatch.active { outline-color: var(--bp-text); transform: scale(1.12); } /* ══════════════════════════════════════════════ EMPTY STATE / INFO ══════════════════════════════════════════════ */ .bp-empty { text-align: center; padding: 60px 20px; color: var(--bp-muted); } .bp-empty-icon { font-size: 40px; margin-bottom: 12px; } .bp-empty-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--bp-accent); margin-bottom: 6px; } .bp-empty-desc { font-size: 13px; } .bp-info { background: var(--bp-accent-bg); border: 1px solid rgba(169,237,23,.15); border-left: 3px solid var(--bp-accent); border-radius: 7px; padding: 9px 12px; font-size: 12px; color: var(--bp-muted); line-height: 1.5; } /* ══════════════════════════════════════════════ SIDEBAR HOME / NEW items ══════════════════════════════════════════════ */ .bp-nav-home { color: var(--bp-accent) !important; } .bp-nav-home svg { stroke: var(--bp-accent) !important; } .bp-nav-home:hover { background: rgba(169,237,23,.1) !important; } /* ══════════════════════════════════════════════ HOME BUTTON ══════════════════════════════════════════════ */ .bp-home-btn { color: var(--bp-accent) !important; font-weight: 600 !important; border-color: rgba(169,237,23,.2) !important; background: rgba(169,237,23,.06) !important; } .bp-home-btn svg { stroke: var(--bp-accent); } .bp-home-btn:hover { background: rgba(169,237,23,.14) !important; border-color: var(--bp-accent) !important; } /* Drawer home item */ .bp-drawer-home { color: var(--bp-accent) !important; background: rgba(169,237,23,.07); border-radius: 9px; font-weight: 600; margin-bottom: 4px; } .bp-drawer-home svg { stroke: var(--bp-accent); opacity: 1 !important; } .bp-drawer-home:hover { background: rgba(169,237,23,.14) !important; } /* ══════════════════════════════════════════════ HAMBURGER BUTTON ══════════════════════════════════════════════ */ .bp-hamburger { display: none; /* shown only on mobile */ flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--bp-border2); background: var(--bp-surface2); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .15s ease, border-color .15s ease; } .bp-hamburger:hover { background: var(--bp-surface3); border-color: var(--bp-accent); } .bp-hamburger span { display: block; width: 18px; height: 1.75px; background: var(--bp-text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease, width .2s ease; } /* Animated X when drawer open */ .bp-hamburger.is-open span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); } .bp-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; } .bp-hamburger.is-open span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); } /* ══════════════════════════════════════════════ ZOOM CONTROLS ══════════════════════════════════════════════ */ .bp-zoom-ctrl { display: flex; align-items: center; gap: 4px; background: var(--bp-surface); border: 1px solid var(--bp-border2); border-radius: 8px; padding: 3px 6px; } .bp-zoom-slider { width: 80px; height: 3px; appearance: none; -webkit-appearance: none; background: var(--bp-border2); border-radius: 3px; cursor: pointer; outline: none; accent-color: var(--bp-accent); } .bp-zoom-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bp-accent); cursor: pointer; box-shadow: 0 0 0 2px rgba(169,237,23,.25); } .bp-zoom-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bp-accent); border: none; cursor: pointer; } .bp-zoom-label { font-size: 10px; font-weight: 700; color: var(--bp-muted); min-width: 32px; text-align: center; font-family: var(--font-display); letter-spacing: .04em; } .bp-vdivider { width: 1px; height: 18px; background: var(--bp-border2); margin: 0 2px; } /* ══════════════════════════════════════════════ FORTSCHRITT — PROGRESS ══════════════════════════════════════════════ */ /* ── Gantt bar overlay ── */ .bp-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: #000; border-radius: 6px 0 0 6px; pointer-events: none; transition: width .3s ease, opacity .3s ease; } .bp-bar-pct { position: absolute; left: 5px; font-size: 9px; font-weight: 800; color: rgba(0,0,0,.7); pointer-events: none; z-index: 3; flex-shrink: 0; } .bp-bar-done-icon { position: absolute; left: 5px; color: rgba(0,0,0,.65); z-index: 3; pointer-events: none; display: flex; align-items: center; } .bp-bar-done { opacity: .75; } .bp-bar-done .bp-bar-label { text-decoration: line-through; opacity: .7; } /* ── Task modal progress slider ── */ .bp-progress-slider-wrap { position: relative; height: 8px; background: var(--bp-border2); border-radius: 4px; overflow: visible; margin: 4px 0; } .bp-progress-slider { position: absolute; inset: -6px 0; width: 100%; height: 20px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; z-index: 2; outline: none; } .bp-progress-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bp-accent); border: 2px solid var(--bp-modal-bg); box-shadow: 0 0 0 2px rgba(169,237,23,.3); cursor: pointer; } .bp-progress-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--bp-accent); border: 2px solid var(--bp-modal-bg); cursor: pointer; } .bp-progress-track-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bp-accent); border-radius: 4px; pointer-events: none; transition: width .15s ease, background .2s ease; height: 100%; } .bp-progress-steps { display: flex; gap: 4px; margin-top: 8px; align-items: center; flex-wrap: wrap; } .bp-prog-step { padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--bp-surface2); border: 1px solid var(--bp-border2); color: var(--bp-muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .bp-prog-step:hover { background: var(--bp-surface3); color: var(--bp-text); } .bp-prog-step.active { background: var(--bp-accent); border-color: var(--bp-accent); color: #111; } /* ── Quick progress in Tagesregister ── */ .bp-active-task { flex-direction: column; gap: 6px; } .bp-active-task-top { display: flex; align-items: flex-start; gap: 8px; width: 100%; } .bp-active-task-quick { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding-left: 18px; /* align with text */ } .bp-quick-prog { padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; background: var(--bp-surface3); border: 1px solid var(--bp-border2); color: var(--bp-muted); cursor: pointer; transition: all .12s ease; } .bp-quick-prog:hover { background: var(--bp-surface2); color: var(--bp-text); } .bp-quick-prog.active { font-weight: 800; } /* ── Status badge ── */ .bp-status-badge { margin-left: auto; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .bp-status-planned { background: rgba(138,143,168,.12); color: var(--bp-muted); } .bp-status-active { background: rgba(245,158,11,.12); color: #f59e0b; } .bp-status-done { background: rgba(169,237,23,.12); color: var(--bp-accent); } .bp-status-paused { background: rgba(248,113,113,.1); color: var(--bp-danger); } /* ══════════════════════════════════════════════ FRISTEN-WARNUNGEN (Deadline Warnings) ══════════════════════════════════════════════ */ .bp-warning-panel { border-top: 1px solid var(--bp-border); max-height: 220px; overflow-y: auto; flex-shrink: 0; } .bp-warning-panel::before { content: 'FRISTEN'; display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-muted); padding: 8px 14px 2px; } .bp-warn-ok .bp-warn-name { color: var(--bp-accent) !important; } .bp-warn-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 14px; cursor: default; border-bottom: 1px solid var(--bp-border); transition: background .12s ease; } .bp-warn-item:hover { background: var(--bp-surface2); } .bp-warn-item:last-child { border-bottom: none; } .bp-warn-icon { flex-shrink: 0; margin-top: 1px; } .bp-warn-name { font-size: 11px; font-weight: 600; color: var(--bp-text); line-height: 1.3; } .bp-warn-meta { font-size: 10px; color: var(--bp-muted); margin-top: 1px; } .bp-warn-error .bp-warn-name { color: var(--bp-danger); } .bp-warn-warn .bp-warn-name { color: #f59e0b; } .bp-warn-info .bp-warn-name { color: var(--bp-accent); } /* Topbar warning badge */ .bp-warn-topbadge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; border-radius: 99px; padding: 0 3px; font-size: 8px; font-weight: 800; color: #fff; line-height: 14px; text-align: center; pointer-events: none; } .bp-warn-topbadge--error { background: var(--bp-danger); } .bp-warn-topbadge--warn { background: #f59e0b; } /* ══════════════════════════════════════════════ DRAG & DROP IMPROVEMENTS ══════════════════════════════════════════════ */ .bp-bar-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .bp-bar-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(0,0,0,.15); border-radius: 0 5px 5px 0; opacity: 0; transition: opacity .15s ease; flex-shrink: 0; } .bp-gantt-bar:hover .bp-bar-resize { opacity: 1; } .bp-gantt-bar { cursor: grab; display: flex; align-items: center; } .bp-gantt-bar:active { cursor: grabbing; } /* Day-snap indicator line while dragging */ .bp-drag-snap { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bp-accent); opacity: .7; pointer-events: none; z-index: 100; box-shadow: 0 0 4px var(--bp-accent); } /* ══════════════════════════════════════════════ COLLISION — PARALLEL FREIGABE ══════════════════════════════════════════════ */ .bp-coll-section-title { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--bp-danger); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; padding: 0 2px; } .bp-coll-section-ok { color: var(--bp-accent); } .bp-collision-card--approved { border-color: rgba(169,237,23,.25) !important; background: rgba(169,237,23,.03); } .bp-collision-card--approved .bp-collision-overlap { border-color: rgba(169,237,23,.15); } .bp-parallel-btn { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; background: var(--bp-accent-bg); border: 1px solid rgba(169,237,23,.3); border-radius: 7px; padding: 5px 10px; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--bp-accent); cursor: pointer; transition: background .15s ease, border-color .15s ease; white-space: nowrap; } .bp-parallel-btn:hover { background: rgba(169,237,23,.15); border-color: var(--bp-accent); } .bp-parallel-btn--revoke { color: var(--bp-danger); background: var(--bp-danger-bg); border-color: rgba(248,113,113,.2); } .bp-parallel-btn--revoke:hover { background: rgba(248,113,113,.15); border-color: var(--bp-danger); } .bp-parallel-tag { font-size: 11px; font-weight: 600; color: var(--bp-accent); background: var(--bp-accent-bg); border: 1px solid rgba(169,237,23,.2); padding: 2px 9px; border-radius: 99px; } /* Gantt cursor hint for pan */ .bp-gantt-wrap { cursor: default; } .bp-gantt-wrap:active { cursor: grabbing; } /* ══════════════════════════════════════════════ EXCEL BUTTON ══════════════════════════════════════════════ */ .bp-excel-btn { color: #22c55e !important; } .bp-excel-btn svg { stroke: #22c55e; } .bp-excel-btn:hover { color: #16a34a !important; background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.3) !important; } .bp-excel-item { color: #22c55e !important; } .bp-excel-item svg { stroke: #22c55e; opacity: 1 !important; } .bp-excel-item:hover { color: #16a34a !important; background: rgba(34,197,94,.08) !important; } /* ══════════════════════════════════════════════ TOAST ══════════════════════════════════════════════ */ .bp-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--bp-surface); border: 1px solid var(--bp-border2); border-radius: 10px; padding: 11px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--bp-text); box-shadow: var(--bp-shadow-lg); z-index: 9999; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; white-space: nowrap; max-width: 90vw; } .bp-toast.bp-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .bp-toast-success { border-left: 3px solid #22c55e; } .bp-toast-error { border-left: 3px solid var(--bp-danger); } .bp-toast-info { border-left: 3px solid var(--bp-accent); } /* ══════════════════════════════════════════════ QUICK-EDIT CARD ══════════════════════════════════════════════ */ .bp-quickedit { position: fixed; z-index: 2000; width: 300px; background: var(--bp-modal-bg); border: 1px solid var(--bp-border2); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.25); animation: bp-qe-in .18s cubic-bezier(.2,.8,.3,1); overflow: hidden; } @keyframes bp-qe-in { from { opacity:0; transform: scale(.94) translateY(-6px); } to { opacity:1; transform: scale(1) translateY(0); } } .bp-qe-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; background: var(--bp-surface2); border-bottom: 1px solid var(--bp-border); } .bp-qe-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--bp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; } .bp-qe-close { width: 22px; height: 22px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--bp-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; flex-shrink: 0; } .bp-qe-close:hover { background: var(--bp-danger-bg); color: var(--bp-danger); border-color: var(--bp-danger); } .bp-qe-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; } .bp-qe-row { display: flex; flex-direction: column; gap: 3px; } .bp-qe-row2 { display: flex; gap: 10px; } .bp-qe-row2 > div { display: flex; flex-direction: column; gap: 3px; } .bp-qe-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--bp-muted); } .bp-qe-input { background: var(--bp-input-bg); border: 1px solid var(--bp-border2); border-radius: 7px; color: var(--bp-text); padding: 6px 9px; font-family: var(--font-body); font-size: 12.5px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } .bp-qe-input:focus { outline: none; border-color: var(--bp-accent); box-shadow: 0 0 0 2px rgba(169,237,23,.12); } .bp-qe-select { appearance: none; cursor: pointer; } .bp-qe-textarea { resize: none; line-height: 1.5; } .bp-qe-footer { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-top: 1px solid var(--bp-border); background: var(--bp-surface2); } .bp-qe-hint { font-size: 9px; color: var(--bp-muted); flex: 1; line-height: 1.3; } .bp-qe-del { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--bp-danger-bg); background: transparent; color: var(--bp-danger); cursor: pointer; transition: background .12s ease, border-color .12s ease; flex-shrink: 0; } .bp-qe-del:hover { background: var(--bp-danger-bg); border-color: var(--bp-danger); } /* Color accent strip on left edge */ .bp-quickedit::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bp-qe-color, var(--bp-accent)); border-radius: 12px 0 0 12px; } /* ══════════════════════════════════════════════ CONTEXT MENU ══════════════════════════════════════════════ */ .bp-ctx-menu { position: fixed; z-index: 2100; background: var(--bp-modal-bg); border: 1px solid var(--bp-border2); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 5px; min-width: 200px; animation: bp-qe-in .15s cubic-bezier(.2,.8,.3,1); overflow: hidden; } .bp-ctx-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--bp-text); cursor: pointer; transition: background .1s ease, color .1s ease; } .bp-ctx-item:hover { background: var(--bp-surface2); } .bp-ctx-item svg { flex-shrink: 0; color: var(--bp-muted); } .bp-ctx-item:hover svg { color: var(--bp-accent); } .bp-ctx-danger { color: var(--bp-danger) !important; } .bp-ctx-danger svg { color: var(--bp-danger) !important; } .bp-ctx-danger:hover { background: var(--bp-danger-bg) !important; } .bp-ctx-divider { height: 1px; background: var(--bp-border); margin: 4px 6px; } /* ══════════════════════════════════════════════ GANTT LABEL COLUMN TOGGLE ══════════════════════════════════════════════ */ /* Active state: button highlighted when labels hidden */ #btnToggleLabels.active { background: var(--bp-accent-bg) !important; border-color: var(--bp-accent) !important; color: var(--bp-accent) !important; } /* Collapsed: hide all label cells, reduce to 0 width */ .bp-gantt-labels-hidden .bp-gantt-month-spacer, .bp-gantt-labels-hidden .bp-gantt-day-spacer, .bp-gantt-labels-hidden .bp-gantt-gw-label, .bp-gantt-labels-hidden .bp-gantt-task-label { width: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; border-right: none !important; opacity: 0; transition: width .25s ease, opacity .2s ease, padding .25s ease; } /* Expanded: smooth open */ .bp-gantt-month-spacer, .bp-gantt-day-spacer, .bp-gantt-gw-label, .bp-gantt-task-label { transition: width .25s ease, opacity .2s ease, padding .25s ease; } /* Show a thin accent line as visual anchor when collapsed */ .bp-gantt-labels-hidden .bp-gantt-month-spacer { border-right: 2px solid var(--bp-accent) !important; width: 2px !important; } /* ══════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bp-scrollbar); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--bp-muted); } /* ══════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════ */ .bp-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 28px; background: var(--bp-surface); border-top: 1px solid var(--bp-border); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; color: var(--bp-muted); font-family: var(--font-body); z-index: 100; letter-spacing: .03em; transition: background .25s ease; } .bp-footer-sep { opacity: .3; } /* Push shell content up to make room for footer */ .bp-shell { padding-bottom: 28px; } /* ══════════════════════════════════════════════ MOBILE BOTTOM NAV ══════════════════════════════════════════════ */ .bp-mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; /* sit at very bottom, not above footer */ height: 58px; background: var(--bp-surface); border-top: 1px solid var(--bp-border); z-index: 1200; /* above all content layers */ padding: 0 4px; padding-bottom: env(safe-area-inset-bottom, 0px); justify-content: space-around; align-items: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -4px 20px rgba(0,0,0,.15); pointer-events: auto; /* ensure clicks register */ } .bp-mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 6px 4px; color: var(--bp-muted); text-decoration: none; cursor: pointer; border-radius: 10px; transition: color .15s ease, background .15s ease; min-width: 0; } .bp-mobile-nav-item span { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .bp-mobile-nav-item:hover { color: var(--bp-text); background: var(--bp-surface2); } .bp-mobile-nav-item.active { color: var(--bp-accent); } .bp-mobile-nav-item.active svg { stroke: var(--bp-accent); } /* ══════════════════════════════════════════════ MOBILE DRAWER ══════════════════════════════════════════════ */ .bp-drawer-overlay { display: none; position: fixed; inset: 0; background: var(--bp-overlay); z-index: 1400; backdrop-filter: blur(4px); animation: bp-overlay-in .2s ease; } .bp-drawer-overlay.open { display: block; } .bp-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 85vw); background: var(--bp-modal-bg); border-left: 1px solid var(--bp-border2); z-index: 1450; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.3,1); box-shadow: -8px 0 40px rgba(0,0,0,.3); } .bp-drawer.open { transform: translateX(0); } .bp-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--bp-border); flex-shrink: 0; } .bp-drawer-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--bp-text); } .bp-drawer-body { flex: 1; overflow-y: auto; padding: 12px 10px; } .bp-drawer-section-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-muted); padding: 6px 10px 4px; } .bp-drawer-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--bp-muted); cursor: pointer; text-decoration: none; transition: color .15s ease, background .15s ease; margin-bottom: 2px; } .bp-drawer-item:hover { color: var(--bp-text); background: var(--bp-surface2); } .bp-drawer-item.active { color: var(--bp-accent); background: var(--bp-accent-bg); } .bp-drawer-footer { padding: 14px 18px; border-top: 1px solid var(--bp-border); font-size: 10px; color: var(--bp-muted); text-align: center; flex-shrink: 0; } /* ══════════════════════════════════════════════ PRINT ══════════════════════════════════════════════ */ @media print { /* ── Light theme overrides for print ── */ :root, [data-theme="dark"], [data-theme="light"] { --bp-bg: #ffffff !important; --bp-surface: #ffffff !important; --bp-surface2: #f4f5f7 !important; --bp-surface3: #e8eaee !important; --bp-border: rgba(0,0,0,.12) !important; --bp-border2: rgba(0,0,0,.18) !important; --bp-text: #111111 !important; --bp-muted: #555555 !important; --bp-accent: #5a9900 !important; --bp-accent-bg: rgba(90,153,0,.08) !important; --bp-danger: #cc2222 !important; --bp-modal-bg: #ffffff !important; --bp-input-bg: #f4f5f7 !important; --bp-nav-bg: #ffffff !important; --clr-bg: #ffffff !important; --clr-surface: #ffffff !important; --clr-surface2: #f4f5f7 !important; --clr-text: #111111 !important; --clr-text-muted:#555555 !important; --clr-border: rgba(0,0,0,.12) !important; --clr-accent: #5a9900 !important; } /* Allow color-adjust so bar colors survive */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Reset text/shadows but NOT backgrounds */ *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } /* Most containers → white */ body, .bp-shell, .bp-main, .bp-view, .bp-gantt-wrap, .bp-gantt-inner, .bp-gantt-task-label, .bp-gantt-day-spacer, .bp-gantt-month-spacer, .bp-gantt-months, .bp-gantt-days, .bp-gantt-gw-header, .bp-tages-body, .bp-card, .bp-topbar { background-color: #fff !important; } .bp-gantt-surface2, .bp-gantt-gw-label { background-color: #f4f5f7 !important; } /* Gantt bars: keep inline background from style attribute — do NOT override */ /* The bars use style="background:#color" which is more specific, so just ensure color of text */ .bp-gantt-bar { color: rgba(0,0,0,.82) !important; } /* Weekend cells */ .bp-gantt-task-cell.is-weekend, .bp-gantt-gw-cell.is-weekend, .bp-gantt-day-col.is-weekend { background-color: #f0f0f0 !important; } /* ── Page: A4 landscape, minimal margins ── */ @page { size: A4 landscape; margin: 6mm 8mm; } /* ── Zoom: scale entire print content ── */ body { zoom: var(--print-zoom, 0.7); /* Fallback for Firefox */ transform-origin: top left; } /* Layout */ body { background: #fff !important; } .bp-shell { display: block !important; padding-bottom: 0 !important; background: #fff !important; } .bp-main { background: #fff !important; overflow: visible !important; } .bp-topbar { position: relative !important; /* remove sticky so it prints inline */ background: #fff !important; border-bottom: 2px solid #5a9900 !important; box-shadow: none !important; } .bp-topbar-name { color: #111 !important; } .bp-topbar-sub { color: #555 !important; } .bp-topbar-meta-val { color: #111 !important; } .bp-topbar-meta-key { color: #555 !important; } .bp-logo-fallback { color: #5a9900 !important; } /* Gantt fits on page */ .bp-gantt-wrap { overflow: visible !important; } .bp-gantt-inner { min-width: 100% !important; } .bp-gantt-months, .bp-gantt-days { position: relative !important; } /* un-sticky headers for print */ .bp-gantt-day-spacer, .bp-gantt-month-spacer { background: #eef0f5 !important; position: relative !important; } .bp-gantt-gw-label { background: #f0f1f4 !important; color: #111 !important; position: relative !important; } .bp-gantt-task-label { background: #eef0f5 !important; color: #333 !important; position: relative !important; } .bp-gantt-month { color: #5a9900 !important; background: #f4f5f7 !important; } .bp-gantt-day-num { color: #555 !important; } .bp-view-title { color: #111 !important; } .bp-card { background: #fff !important; border-color: #ddd !important; } .bp-card-title { color: #5a9900 !important; } /* Hide interactive UI elements */ .bp-topbar-actions, .bp-sidebar, .bp-modal-overlay, .bp-tooltip, .bp-footer, .bp-mobile-nav, .bp-drawer, .bp-drawer-overlay, .bp-zoom-ctrl, .bp-vdivider, .bp-icon-btn, .btn, .bp-warning-panel, #btnTagesPDF, #btnGanttExcel, #btnAddTask, .bp-bar-resize { display: none !important; } } /* ══════════════════════════════════════════════ RESPONSIVE — Tablet 960–1200 px ══════════════════════════════════════════════ */ @media (max-width: 1200px) { .bp-topbar-meta { gap: 10px; } } @media (max-width: 960px) { .bp-sidebar { width: 170px; } .bp-topbar-meta { display: none; } .bp-tages-grid { grid-template-columns: 1fr; } .bp-collision-tasks { grid-template-columns: 1fr; } .bp-zoom-ctrl .bp-zoom-slider { width: 56px; } .bp-topbar-name { font-size: 13px; } .bp-icon-btn span { display: none; } .bp-icon-btn { padding: 7px !important; } } /* ══════════════════════════════════════════════ RESPONSIVE — Mobile ≤ 768 px ══════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Layout shell ── */ .bp-shell { height: 100dvh; /* dynamic viewport height — accounts for browser chrome */ height: 100vh; /* fallback */ padding-bottom: calc(58px + 20px); padding-bottom: calc(58px + env(safe-area-inset-bottom, 16px)); overflow: hidden; /* shell itself doesn't scroll */ flex-direction: column; /* stack topbar + main vertically */ } /* Main area: fills remaining space, scrolls vertically */ .bp-main { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; /* critical for flex children to scroll */ } /* Views scroll inside main */ .bp-view { height: auto !important; overflow: visible !important; min-height: 0; } /* Gantt wrap: horizontal scroll only */ .bp-gantt-wrap { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; } /* ── Sidebar → hidden, replaced by bottom nav ── */ .bp-sidebar { display: none; } .bp-footer { display: none; } .bp-mobile-nav { display: flex; } /* ── Topbar ── */ .bp-topbar-inner { padding: 0 10px; gap: 6px; } .bp-topbar-project { min-width: 0; flex: 1; } .bp-topbar-name { font-size: 13px; } .bp-topbar-sub { display: none; } .bp-topbar-meta { display: none; } /* On mobile: topbar stays minimal — all buttons already removed from topbar */ /* Just hide the divider */ .bp-topbar-divider { display: none !important; } /* ── View header ── */ .bp-view-header { flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; min-height: auto; } .bp-view-title { font-size: 17px !important; width: 100%; } .bp-view-actions { margin-left: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 6px; } /* Make primary action buttons full-ish width */ .bp-view-actions .btn { flex: 1; justify-content: center; min-width: 120px; } /* ── Gantt ── */ .bp-zoom-ctrl { display: none; } .bp-vdivider { display: none; } #btnToggleLabels { display: none; } /* Narrower label column on mobile */ .bp-gantt-month-spacer, .bp-gantt-day-spacer, .bp-gantt-gw-label, .bp-gantt-task-label { width: 100px !important; min-width: 100px !important; font-size: 10px; padding-left: 6px !important; padding-right: 4px !important; } .bp-gantt-bar { font-size: 10px; padding: 0 4px; } .bp-gantt-task-row { height: 32px; } .bp-gantt-bar { height: 24px; top: 4px; } /* Tagesregister nav */ .bp-tages-daynav { margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .bp-tages-daynav input[type="date"] { flex: 1; min-width: 0; } /* Cards & lists */ .bp-tages-body { padding: 10px 12px; gap: 10px; } .bp-gewerke-list { padding: 10px 12px; gap: 8px; } .bp-collision-list{ padding: 10px 12px; gap: 8px; } .bp-email-body { padding: 10px 12px; max-width: 100%; } .bp-card { padding: 12px 14px; } .bp-tages-grid { grid-template-columns: 1fr; gap: 10px; } .bp-collision-tasks { grid-template-columns: 1fr; } .bp-gewerk-card { flex-wrap: wrap; } .bp-gewerk-info { min-width: calc(100% - 56px); } /* Image grid larger thumbs */ .bp-img-grid { grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 6px; } /* ── Quick-Edit: full-width bottom sheet on mobile ── */ .bp-quickedit { width: 100% !important; left: 0 !important; right: 0 !important; bottom: 58px !important; /* above mobile nav */ top: auto !important; border-radius: 16px 16px 0 0 !important; max-height: 80vh; overflow-y: auto; } .bp-quickedit::before { border-radius: 16px 16px 0 0; } /* Context menu: wider */ .bp-ctx-menu { min-width: min(260px, 90vw); } .bp-ctx-item { padding: 12px 16px; font-size: 14px; } /* ── Modals: full-screen bottom sheet ── */ .bp-modal-overlay { padding: 0; align-items: flex-end; } .bp-modal, .bp-modal-lg { max-width: 100%; width: 100%; border-radius: 20px 20px 0 0; max-height: 90vh; } .bp-modal-logo-row { flex-direction: column; } .bp-modal-body { padding: 16px; gap: 12px; } .bp-modal-header { padding: 14px 16px 12px; } .bp-modal-footer { padding: 12px 16px; } /* Larger touch targets for inputs */ .bp-input, .bp-select { font-size: 16px !important; } /* prevents iOS zoom */ .bp-qe-input { font-size: 16px !important; } /* Bottom nav safe area */ .bp-mobile-nav { padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(58px + env(safe-area-inset-bottom, 0px)); } } /* ══════════════════════════════════════════════ RESPONSIVE — Small mobile ≤ 480 px ══════════════════════════════════════════════ */ @media (max-width: 480px) { .bp-topbar-name { font-size: 12px; } .bp-home-btn span { display: none; } /* icon only on tiny screens */ .bp-logo-btn { width: 32px; height: 32px; } /* Even narrower gantt label */ .bp-gantt-month-spacer, .bp-gantt-day-spacer, .bp-gantt-gw-label, .bp-gantt-task-label { width: 80px !important; min-width: 80px !important; font-size: 9px; } .bp-view-title { font-size: 15px !important; } .bp-card-title { font-size: 12px; } .bp-img-grid { grid-template-columns: repeat(auto-fill, minmax(75px,1fr)); } .bp-tages-body { padding: 8px 10px; } .bp-gewerke-list { padding: 8px 10px; } .bp-collision-list{ padding: 8px 10px; } .bp-email-body { padding: 8px 10px; } /* Modal */ .bp-modal-body { padding: 12px; gap: 10px; } .bp-modal-header { padding: 12px 14px 10px; } .bp-modal-footer { padding: 10px 14px; } .bp-modal, .bp-modal-lg { max-height: 88vh; } /* Quick-edit */ .bp-quickedit { bottom: 58px !important; } /* Mobile nav labels smaller */ .bp-mobile-nav-item span { font-size: 8px; } /* Form grids collapse */ .bp-form-row-2, div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════ TOUCH IMPROVEMENTS (all mobile) ══════════════════════════════════════════════ */ @media (hover: none) and (pointer: coarse) { /* Larger tap targets */ .bp-nav-item { padding: 10px 14px; } .bp-icon-btn { min-width: 40px; min-height: 40px; } .btn.bp-btn-sm { padding: 10px 14px !important; } .bp-modal-close { width: 36px; height: 36px; } .bp-danger-btn { padding: 10px 14px; } .bp-parallel-btn { padding: 8px 12px; } /* Remove hover effects that don't make sense on touch */ .bp-gantt-bar:hover { transform: none; } .bp-gewerk-swatch:hover { transform: none; } /* Bigger resize handle */ .bp-bar-resize { width: 12px; opacity: .4; } }