/* ========================================================= VELD — stylesheet Rustige professionele kleurtinten geschikt voor operationele HSE-teams. ========================================================= */ *, *::before, *::after { box-sizing: border-box; } :root { /* ===== Brand & neutrals ===== */ --c-primary: #1e3a5f; --c-primary-hover: #264c7c; --c-primary-soft: #e8eef5; /* Primary used AS a solid background (always pairs with white text) — must stay dark enough for contrast in BOTH themes, unlike --c-primary which goes light in dark mode for use as text/links on dark surfaces. */ --c-primary-solid: #1e3a5f; /* Teal accent — tuned to the VELD logo teal (#2dd4bf) for brand unity */ --c-accent: #0ea79b; --c-accent-hover: #0c8e84; --c-accent-soft: #d0f7f1; --c-accent-glow: rgba(94, 234, 212, 0.32); /* AA-compliant teal for TEXT on white/light backgrounds (~5.9:1). Use --c-accent (#0ea79b) for buttons/borders/logo; --c-accent-text for text. */ --c-accent-text: #0a7064; --c-bg: #f5f7fb; --c-bg-elev: #fafbfd; --c-card: #ffffff; --c-text: #0f172a; --c-text-muted: #4a5568; /* darker for WCAG AA on bg */ --c-text-subtle: #6b7280; /* was #8893a4 — now passes AA */ --c-border: #e2e8f0; --c-border-strong: #cbd5e1; /* ===== Status & semantic ===== */ --c-planned: #2c5fa8; --c-planned-bg: #e8f0fb; --c-progress: #b45b14; --c-progress-bg: #fdf1e1; --c-completed: #1f7a3e; --c-completed-bg: #dcf3e3; --c-overdue: #b42318; --c-overdue-bg: #fdecea; --c-warning: #92400e; --c-warning-bg: #fef3c7; --c-escalation: #7c3aed; --c-escalation-bg: #f3e8ff; /* ===== Type accents ===== */ --c-type-inspection: #2c5fa8; --c-type-inspection-bg: #e8f0fb; --c-type-training: #6b4eb0; --c-type-training-bg: #efe9fa; --c-type-audit: #1f6f70; --c-type-audit-bg: #def1f0; --c-type-incident: #b42318; --c-type-incident-bg: #fdecea; --c-type-maintenance: #8a6510; --c-type-maintenance-bg: #faefcf; --c-type-meeting: #4a5468; --c-type-meeting-bg: #e7eaf0; /* ===== Elevation ===== */ --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.18); --shadow-modal: 0 24px 60px rgba(15, 23, 42, 0.25), 0 8px 24px rgba(15, 23, 42, 0.12); /* ===== Geometry ===== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px; /* ===== Motion ===== */ --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --motion-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --motion-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1); --transition: var(--motion-base); /* ===== Focus ring system (consistent everywhere) ===== */ --focus-ring: 0 0 0 3px rgba(14, 167, 155, 0.35); --focus-ring-light: 0 0 0 3px rgba(255, 255, 255, 0.45); --focus-ring-danger: 0 0 0 3px rgba(180, 35, 24, 0.30); } /* ===== Manual theme override via [data-theme] (settings modal) ===== When data-theme="light" is set on , force light palette. When data-theme="dark" is set, force dark palette. When no data-theme set, fall back to prefers-color-scheme. */ :root[data-theme="dark"] { --c-primary: #5b8dd6; --c-primary-hover: #7aa4e0; --c-primary-soft: #1a2a44; --c-primary-solid: #2c5183; --c-accent: #2dd4bf; --c-accent-hover: #5eead4; --c-accent-soft: #134e4a; --c-accent-glow: rgba(45, 212, 191, 0.35); --c-accent-text: #5eead4; /* bright teal — readable on dark surfaces */ --c-bg: #0f172a; --c-bg-elev: #182238; --c-card: #1e293b; --c-text: #f1f5f9; --c-text-muted: #cbd5e1; --c-text-subtle: #94a3b8; --c-border: #334155; --c-border-strong: #475569; /* Semantic FG colors brightened for dark backgrounds */ --c-planned: #93c5fd; --c-progress: #fdba74; --c-completed: #6ee7b7; --c-overdue: #fca5a5; --c-warning: #fcd34d; --c-escalation: #c4b5fd; --c-planned-bg: #1e2f4a; --c-progress-bg: #3a2710; --c-completed-bg: #133e23; --c-overdue-bg: #3e1413; --c-warning-bg: #3a2a0d; --c-escalation-bg: #2a1745; --c-type-inspection: #93c5fd; --c-type-training: #c4b5fd; --c-type-audit: #5eead4; --c-type-incident: #fca5a5; --c-type-maintenance:#fcd34d; --c-type-meeting: #cbd5e1; --c-type-inspection-bg: #1e2f4a; --c-type-training-bg: #2c1f4a; --c-type-audit-bg: #133b3c; --c-type-incident-bg: #3e1413; --c-type-maintenance-bg: #3a2a0d; --c-type-meeting-bg: #1f2533; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.7); } /* ===== Density override via [data-density="compact"] ===== */ :root[data-density="compact"] .task-card { padding: 10px 14px; gap: 12px; } :root[data-density="compact"] .task-title { font-size: 14px; } :root[data-density="compact"] .task-meta { font-size: 12.5px; } :root[data-density="compact"] .task-list { gap: 6px; } :root[data-density="compact"] .day-group + .day-group { margin-top: 10px; } :root[data-density="compact"] .nav-item { padding: 5px 10px; font-size: 12.5px; } :root[data-density="compact"] .sstat { padding: 7px 14px; } :root[data-density="compact"] .feed-filters { padding: 6px 14px; } /* ===== Dark mode (auto, opt-in via OS) ===== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-primary: #5b8dd6; --c-primary-hover: #7aa4e0; --c-primary-soft: #1a2a44; --c-primary-solid: #2c5183; --c-accent: #2dd4bf; --c-accent-hover: #5eead4; --c-accent-soft: #134e4a; --c-accent-glow: rgba(45, 212, 191, 0.35); --c-accent-text: #5eead4; --c-bg: #0f172a; --c-bg-elev: #182238; --c-card: #1e293b; --c-text: #f1f5f9; --c-text-muted: #cbd5e1; --c-text-subtle: #94a3b8; --c-border: #334155; --c-border-strong: #475569; /* Semantic FG colors — brightened so they pass WCAG AA on dark backgrounds */ --c-planned: #93c5fd; --c-progress: #fdba74; --c-completed: #6ee7b7; --c-overdue: #fca5a5; --c-warning: #fcd34d; --c-escalation: #c4b5fd; --c-planned-bg: #1e2f4a; --c-progress-bg: #3a2710; --c-completed-bg: #133e23; --c-overdue-bg: #3e1413; --c-warning-bg: #3a2a0d; --c-escalation-bg: #2a1745; --c-type-inspection: #93c5fd; --c-type-training: #c4b5fd; --c-type-audit: #5eead4; --c-type-incident: #fca5a5; --c-type-maintenance:#fcd34d; --c-type-meeting: #cbd5e1; --c-type-inspection-bg: #1e2f4a; --c-type-training-bg: #2c1f4a; --c-type-audit-bg: #133b3c; --c-type-incident-bg: #3e1413; --c-type-maintenance-bg: #3a2a0d; --c-type-meeting-bg: #1f2533; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.7); } } html, body { margin: 0; padding: 0; } body { /* System-font strategy: Segoe UI on Windows (the supervisor/werf target), native equivalents elsewhere. No web-font download — keeps the app fully offline and renders identically across machines (no "Inter if installed" inconsistency). */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background: var(--c-bg); color: var(--c-text); font-size: 14.5px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Tabular figures: dates, counts, KPIs and times line up like a data tool. Reset to proportional inside free-text content below. */ font-variant-numeric: tabular-nums; } /* Natural (proportional) digits inside long free-text, where prose reads better */ .notes-preview, .detail-notes, .detail-other-langs, .form-mail-review-hint, textarea, input[type="text"], input[type="url"], input[type="email"] { font-variant-numeric: normal; } h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--c-text); letter-spacing: -0.015em; } button { font: inherit; cursor: pointer; } input, select, textarea, button { font-family: inherit; color: inherit; } input[type="date"], input[type="time"] { min-height: 38px; font-variant-numeric: tabular-nums; } ::placeholder { color: var(--c-text-subtle); opacity: 1; } /* ===== Universal focus ring (one source of truth) ===== Buttons, inputs, selects, links — all use the same teal ring. Default browser outline is removed only when our consistent ring shows. */ :focus { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--c-accent) !important; } /* Text selection */ ::selection { background: var(--c-accent-glow); color: var(--c-text); } /* Tabular numbers wherever numbers display */ .tabular-nums, .task-date-day, .task-time, .sstat-value, .nav-badge, .overdue-aging, .result-count { font-variant-numeric: tabular-nums; } /* Accessibility helpers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -40px; left: 8px; background: var(--c-primary-solid); color: white; padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none; z-index: 9999; /* must beat toast (2000), modal (1000), sidebar (40+200) — skip link is the a11y escape hatch */ font-size: 14px; transition: top var(--transition); } .skip-link:focus { top: 8px; } /* =========== Header =========== */ .app-header { background: linear-gradient(135deg, var(--c-primary-solid) 0%, #2c5183 100%); color: white; padding: 18px 24px; box-shadow: var(--shadow-md); position: sticky; top: 0; z-index: 50; } .header-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .brand-logo { width: 52px; height: 52px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; flex-shrink: 0; } .brand-text { min-width: 0; } .app-header h1 { font-size: 20px; color: white; line-height: 1.2; word-break: break-word; } .subtitle { font-size: 13px; opacity: 0.85; margin: 2px 0 0; color: white; } .header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .api-toggle { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: white; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--transition), border-color var(--transition); } .api-toggle.api-on { border-color: rgba(120, 220, 160, 0.6); } .api-toggle.api-off { opacity: 0.65; } .api-toggle:hover { background: rgba(255,255,255,0.22); } .api-toggle:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; } .actor-button { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: white; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--transition), border-color var(--transition); } .actor-button.has-actor { border-color: rgba(255, 255, 255, 0.55); } .actor-button:hover { background: rgba(255,255,255,0.22); } .actor-button:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; } .actor-icon { font-size: 15px; line-height: 1; } .language-switcher { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-sm); padding: 4px 10px 4px 12px; } .lang-icon { font-size: 16px; line-height: 1; } .language-switcher select { background: transparent; color: white; border: none; padding: 6px 4px; font-size: 14px; cursor: pointer; font-weight: 500; } /* Keyboard-only — :focus (not :focus-visible) left a white ring lingering on "NL" after a mouse click, which read as an untidy shadow. */ .language-switcher select:focus-visible { outline: 2px solid rgba(255,255,255,0.45); outline-offset: 2px; border-radius: 3px; } .language-switcher select option { color: var(--c-text); background: white; } /* =========== Main =========== */ .app-main { max-width: 1400px; margin: 0 auto; padding: 24px; } .section-title { font-size: 13px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; } /* =========== Dashboard =========== */ .dashboard { margin-bottom: 22px; } .dashboard-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .stat-card { background: var(--c-card); border: 1px solid var(--c-border); border-left: 4px solid var(--c-border-strong); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 14px; text-align: left; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); width: 100%; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .stat-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: var(--radius-sm); background: #edf2f7; flex-shrink: 0; } .stat-info { min-width: 0; } .stat-value { font-size: 26px; font-weight: 700; line-height: 1; color: var(--c-text); } .stat-label { color: var(--c-text-muted); font-size: 13px; margin-top: 4px; font-weight: 500; } .stat-todo { border-left-color: var(--c-planned); } .stat-todo .stat-icon { background: var(--c-planned-bg); } .stat-week { border-left-color: var(--c-accent); } .stat-week .stat-icon { background: #defaf7; } .stat-overdue { border-left-color: var(--c-overdue); } .stat-overdue .stat-icon { background: var(--c-overdue-bg); } .stat-done { border-left-color: var(--c-completed); } .stat-done .stat-icon { background: var(--c-completed-bg); } .stat-escalation { border-left-color: #7c3aed; } .stat-escalation .stat-icon { background: #ede9fe; } .stat-escalation .stat-value { color: #7c3aed; } /* =========== Filters =========== */ .filters { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm); margin-bottom: 22px; } .filters-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .filters-header .section-title { margin-bottom: 0; } .btn-link { background: transparent; border: none; color: var(--c-primary); font-size: 13px; font-weight: 600; padding: 4px 6px; border-radius: 4px; cursor: pointer; } .btn-link:hover { background: var(--c-primary-soft); } .btn-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .filters-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; } .filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .filter-group label { font-size: 11px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .filter-group input, .filter-group select { padding: 9px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); font-size: 14px; background: white; color: var(--c-text); transition: border-color var(--transition), box-shadow var(--transition); width: 100%; min-width: 0; } .filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12); } .filter-period-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); margin-bottom: 14px; } .period-label { font-size: 11px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .period-buttons { display: flex; flex-wrap: wrap; gap: 6px; } .period-btn { padding: 7px 14px; border: 1px solid var(--c-border-strong); background: white; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--c-text-muted); transition: all var(--transition); white-space: nowrap; } .period-btn:hover { border-color: var(--c-primary); color: var(--c-primary); } .period-btn.active { background: var(--c-primary-solid); border-color: var(--c-primary-solid); color: white; } .period-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .actions { display: flex; gap: 10px; flex-wrap: wrap; } /* =========== Buttons =========== */ .btn { padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; white-space: nowrap; letter-spacing: -0.005em; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-primary { background: var(--c-accent); color: white; box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset, 0 1px 2px rgba(14, 167, 155, 0.25); } .btn-primary:hover { background: var(--c-accent-hover); box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset, 0 2px 6px rgba(14, 167, 155, 0.35); } .btn-primary:focus-visible { box-shadow: var(--focus-ring), 0 1px 0 rgba(0,0,0,0.08) inset; } .btn-secondary { background: var(--c-card); color: var(--c-primary); border-color: var(--c-border-strong); } .btn-secondary:hover { border-color: var(--c-primary); background: var(--c-primary-soft); } .btn-ghost { background: transparent; color: var(--c-text-muted); } .btn-ghost:hover { background: var(--c-bg); color: var(--c-text); } .btn-danger { background: var(--c-card); color: var(--c-overdue); border-color: var(--c-overdue); } .btn-danger:hover { background: var(--c-overdue); color: white; } .btn-danger:focus-visible { box-shadow: var(--focus-ring-danger); } /* =========== Agenda =========== */ .agenda-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; } .result-count { font-size: 11px; font-weight: 700; color: var(--c-text-muted); background: var(--c-bg); padding: 2px 8px; border-radius: var(--radius-full); letter-spacing: 0.02em; } .task-list { display: flex; flex-direction: column; gap: 18px; /* breathing room between day-groups (single source of spacing) */ } /* ===== Day-grouped feed with sticky day headers ===== */ .day-group { display: flex; flex-direction: column; gap: 8px; } .day-group-tasks { display: flex; flex-direction: column; gap: 8px; } .day-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); position: sticky; top: calc(var(--feed-toolbar-h) - 1px); z-index: 10; backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); background: color-mix(in srgb, var(--c-bg) 88%, transparent); } @supports not (background: color-mix(in srgb, red 50%, blue)) { .day-header { background: var(--c-bg); } } .day-header-label { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; overflow: hidden; } .day-header-rel { color: var(--c-text); font-weight: 700; flex-shrink: 0; } .day-header-sep { opacity: 0.4; font-weight: 400; flex-shrink: 0; } .day-header-long { color: var(--c-text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; overflow: hidden; /* truncation lives here, on the actually-long child */ text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .day-header-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; /* never compressed by the label */ } .day-header-count { background: var(--c-card); color: var(--c-text-muted); padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; border: 1px solid var(--c-border); font-variant-numeric: tabular-nums; } .day-header-escal { color: var(--c-escalation); font-weight: 700; font-size: 11px; padding: 2px 7px; background: var(--c-escalation-bg); border: 1px solid rgba(124, 58, 237, 0.25); border-radius: var(--radius-full); font-variant-numeric: tabular-nums; } /* Special day-headers */ .day-header-today { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent-soft) 70%, transparent); } .day-header-today .day-header-rel { color: var(--c-accent-hover); } .day-header-overdue { background: var(--c-overdue-bg); border-color: rgba(180, 35, 24, 0.25); color: var(--c-overdue); } .day-header-overdue .day-header-label { color: var(--c-overdue); } .day-header-icon { font-size: 13px; } .day-header-nodate { background: var(--c-card); font-style: italic; } .task-card { background: var(--c-card); border: 1px solid var(--c-border); border-left: 4px solid var(--c-border-strong); border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-xs); cursor: pointer; transition: transform var(--motion-fast), box-shadow var(--motion-base), border-color var(--motion-fast), background var(--motion-fast); display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; position: relative; } .task-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--c-border-strong); } .task-card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-sm); border-color: var(--c-accent); } .task-card.overdue { border-left-color: var(--c-overdue); background: linear-gradient(90deg, #fff8f6 0%, var(--c-card) 30%); } .task-card.completed { border-left-color: var(--c-completed); background: linear-gradient(90deg, var(--c-completed-bg) 0%, var(--c-card) 30%); opacity: 0.78; } .task-card.completed:hover { opacity: 1; } /* Completed: a calm green check-mark chip before the title — no strike-through (cleaner, and avoids slashing long / multi-script titles). The card already carries the green edge, date tint, faded opacity and "Afgerond" badge. */ .task-card.completed .task-title { text-decoration: none; } .task-done-check { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-right: 7px; border-radius: 50%; background: var(--c-completed); color: #fff; vertical-align: -3px; flex: none; } .task-done-check .v-icon { width: 11px; height: 11px; stroke-width: 3; } .task-card.in_progress { border-left-color: var(--c-progress); } .task-card.planned { border-left-color: var(--c-planned); } /* Subtle escalation glow on the left edge (without overpowering kritiek/overdue) */ .task-card.needs-escalation::after { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: linear-gradient(180deg, var(--c-escalation), transparent); opacity: 0.35; pointer-events: none; } .task-date { text-align: center; padding: 8px 6px; background: var(--c-primary-soft); border-radius: var(--radius-sm); min-width: 0; } .task-card.overdue .task-date { background: var(--c-overdue-bg); } .task-card.completed .task-date{ background: var(--c-completed-bg); } .task-date-day { font-size: 22px; font-weight: 700; line-height: 1; color: var(--c-primary); } .task-card.overdue .task-date-day { color: var(--c-overdue); } .task-card.completed .task-date-day{ color: var(--c-completed); } .task-date-month { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); margin-top: 2px; font-weight: 600; } .task-time { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .task-main { min-width: 0; } .task-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--c-text); word-break: break-word; } .task-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; color: var(--c-text-muted); } .task-meta-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .task-meta-icon { font-size: 13px; opacity: 0.7; display: inline-flex; align-items: center; } /* Consistent inline-icon sizing — inherits text colour + scales with font-size. Used by the monochrome SVG set (ICON_USER/PIN/REPEAT/WARN/CLOCK) that replaced decorative emoji on task cards. */ .v-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; } .task-meta-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; } .overdue-tag { color: var(--c-overdue); font-weight: 700; } .task-badges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; } .status-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); flex-shrink: 0; } .status-toggle-btn .v-icon { width: 16px; height: 16px; } .status-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 2px 6px rgba(0,0,0,0.10); } .status-toggle-btn:active { transform: scale(0.94); } .status-toggle-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .status-toggle-planned { color: var(--c-planned); border-color: var(--c-planned); } .status-toggle-in_progress { color: var(--c-progress); border-color: var(--c-progress); } .status-toggle-wait_verification { color: var(--c-escalation); border-color: var(--c-escalation); } .status-toggle-completed { color: var(--c-completed); border-color: var(--c-completed); background: var(--c-completed-bg); } .status-toggle-planned:hover { background: var(--c-planned-bg); } .status-toggle-in_progress:hover { background: var(--c-progress-bg); } .status-toggle-wait_verification:hover { background: var(--c-escalation-bg); } .status-toggle-completed:hover { background: var(--c-completed); color: white; } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; /* calmer than 700 — less visual shouting */ text-transform: uppercase; letter-spacing: 0.03em; /* tighter — uppercase pills read quieter */ white-space: nowrap; background: #eef2f7; color: var(--c-text-muted); border: 1px solid transparent; } .badge-type-inspection { background: var(--c-type-inspection-bg); color: var(--c-type-inspection); } .badge-type-training { background: var(--c-type-training-bg); color: var(--c-type-training); } .badge-type-audit { background: var(--c-type-audit-bg); color: var(--c-type-audit); } .badge-type-incident { background: var(--c-type-incident-bg); color: var(--c-type-incident); } .badge-type-maintenance { background: var(--c-type-maintenance-bg); color: var(--c-type-maintenance); } .badge-type-meeting { background: var(--c-type-meeting-bg); color: var(--c-type-meeting); } .badge-status-planned { background: var(--c-planned-bg); color: var(--c-planned); } .badge-status-in_progress { background: var(--c-progress-bg); color: var(--c-progress); } .badge-status-wait_verification { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; font-weight: 600; } .badge-status-completed { background: var(--c-completed-bg); color: var(--c-completed); } .badge-status-overdue { background: var(--c-overdue-bg); color: var(--c-overdue); } .badge-escalation { background: #fdf4ff; color: #7c3aed; border-color: #e9d5ff; font-weight: 700; } .badge-capa { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; font-weight: 600; font-size: 10px; letter-spacing: 0.04em; } /* Secondary CAPA workflow status on the card (calm teal — clearly secondary) */ .badge-capa-secondary { background: var(--c-accent-soft); color: var(--c-accent-text); border-color: transparent; font-weight: 600; } .theme-dark .badge-capa-secondary { background: rgba(45,212,191,0.14); color: var(--c-accent); border-color: rgba(45,212,191,0.24); } /* Kritiek + hoog stay loud (they are the signal). Normaal/laag + recurrence are secondary metadata → neutral grey so they recede and normal tasks read calmly. "Kritieke info moet het hardst opvallen." */ .badge-priority-kritiek { background: #fdecea; color: #b42318; border-color: #f5c6c4; font-weight: 700; } .badge-priority-hoog { background: #fdf1e1; color: #b45b14; border-color: #f5d9b4; font-weight: 600; } .badge-priority-normaal { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; font-weight: 600; } .badge-priority-laag { background: #f6f7f9; color: #94a3b8; border-color: #e8ecf1; font-weight: 600; } .badge-recurrence { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; } /* ---- Task card urgency visual treatments ---- */ .task-card.priority-kritiek { background: #fffafa; border-left-color: #b42318 !important; border-left-width: 4px; } .task-card.priority-kritiek .task-date { background: #fdecea; } .task-card.priority-kritiek .task-date-day { color: #b42318; } .task-card.due-today { background: #fffbf0; border-left-color: #c47a0c !important; border-left-width: 4px; } .task-card.due-today .task-date { background: #fdf3d7; } .task-card.due-today .task-date-day { color: #c47a0c; } .task-card.due-soon { border-left-color: #d9a014 !important; } .task-card.wait_verification { background: #fdf8ff; border-left-color: #7c3aed !important; border-left-width: 4px; } /* Escalation indicator — only for overdue (not already flagged kritiek) */ .task-card.needs-escalation:not(.priority-kritiek) { border-left-color: #7c3aed !important; border-left-width: 4px; } /* Urgency badges on cards */ .overdue-aging { color: var(--c-overdue); font-size: 11px; font-weight: 700; background: var(--c-overdue-bg); padding: 2px 7px; border-radius: 999px; border: 1px solid #f5c6c4; } .due-today-badge { color: #c47a0c; font-size: 11px; font-weight: 700; background: #fdf3d7; padding: 2px 7px; border-radius: 999px; border: 1px solid #f5d9a0; } .due-soon-badge { color: #8a6510; font-size: 11px; font-weight: 600; background: #faf5e8; padding: 2px 7px; border-radius: 999px; border: 1px solid #ecdca9; } /* Notes preview on card */ .notes-preview { font-size: 12px; color: var(--c-text-muted); margin-top: 5px; line-height: 1.4; font-style: italic; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Search highlight */ mark.search-hl { background: #fff59d; color: inherit; padding: 0 1px; border-radius: 2px; } /* Recurrence icon in card title */ .rec-icon { margin-right: 3px; font-style: normal; } /* Dashboard additions */ .stat-kritiek { border-left-color: var(--c-overdue); } .stat-kritiek .stat-icon { background: var(--c-overdue-bg); color: var(--c-overdue); } .stat-today { border-left-color: #c47a0c; } .stat-today .stat-icon { background: #fdf3d7; } .stat-rate { font-size: 11px; color: var(--c-completed); font-weight: 600; margin-top: 2px; } /* Filter header actions */ .filters-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .btn-my-tasks { background: var(--c-primary-soft); color: var(--c-primary); border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--transition); white-space: nowrap; } .btn-my-tasks:hover { background: #d3e0ef; } .btn-my-tasks--active { background: var(--c-primary-solid) !important; color: #fff !important; border-color: var(--c-primary-solid) !important; } .filter-active-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary-solid); color: white; border-radius: 999px; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; vertical-align: middle; } /* =========== Mijn taken vandaag bar =========== */ .my-tasks-bar { margin: 0 0 12px 0; border-radius: var(--radius-md); background: linear-gradient(135deg, #eef4fb 0%, #f5f8fd 100%); border: 1.5px solid var(--c-primary-soft); padding: 10px 16px; box-shadow: 0 1px 4px rgba(30,58,95,0.07); } .my-tasks-bar-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; } .my-tasks-bar-title { font-size: 12px; font-weight: 700; color: var(--c-primary); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 6px; } .my-tasks-bar-text { font-size: 13px; color: var(--c-text); } .my-tasks-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; } .legend-label { font-size: 11px; font-weight: 600; color: var(--c-text-muted); margin-right: 2px; } .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .legend-text { font-size: 11px; color: var(--c-text-muted); margin-right: 6px; } .legend-kritiek { background: #b42318; } .legend-hoog { background: #c47a0c; } .legend-normaal { background: #1e3a5f; } .legend-laag { background: #9ca3af; } /* Detail: link row */ .detail-link-row { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; border-top: 1px solid var(--c-border); flex-wrap: wrap; } .detail-link { color: var(--c-primary); text-decoration: underline; font-size: 13px; word-break: break-all; } .detail-link:hover { color: var(--c-primary-hover); } /* Subtle provenance line in the detail modal when a task came from mail text */ .detail-mail-origin { margin: 8px 0 0; padding: 6px 10px; font-size: 12.5px; color: var(--c-text-muted); background: var(--c-bg); border-left: 3px solid var(--c-border-strong); border-radius: var(--radius-xs); } /* Derived HSE workflow block (stage / next action / blocker) */ .detail-workflow { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); display: grid; gap: 6px; } .detail-workflow-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; flex-wrap: wrap; } .detail-workflow-key { min-width: 108px; color: var(--c-text-muted); font-weight: 600; font-size: 12px; } .detail-workflow-next { color: var(--c-text); font-weight: 600; } .detail-workflow-who { color: var(--c-text-subtle); font-weight: 500; } .detail-workflow-blocked span:last-child { color: var(--c-overdue); font-weight: 700; } .wf-stage { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; background: var(--c-planned-bg); color: var(--c-planned); border: 1px solid transparent; } .wf-stage-intake, .wf-stage-triage { background: #eef2f7; color: var(--c-text-muted); } .wf-stage-assigned { background: var(--c-planned-bg); color: var(--c-planned); } .wf-stage-in_progress { background: var(--c-progress-bg); color: var(--c-progress); } .wf-stage-evidence_required { background: var(--c-overdue-bg); color: var(--c-overdue); } .wf-stage-verification { background: #ede9fe; color: #7c3aed; } .wf-stage-approval { background: var(--c-accent-soft); color: var(--c-accent-hover); } .wf-stage-closed { background: var(--c-completed-bg); color: var(--c-completed); } /* =========== CAPA section (form + detail) =========== */ .detail-capa-section { margin-top: 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; } .detail-capa-section.capa-filled { border-color: #c4b5fd; background: #fafaff; } .capa-summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--c-text); list-style: none; background: var(--c-bg); user-select: none; } .capa-summary::-webkit-details-marker, .capa-summary::marker { display: none; } /* Custom chevron icon */ .capa-summary::after, .form-capa-summary::after { content: ''; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted); transform: rotate(45deg); transition: transform var(--motion-base); flex-shrink: 0; } .detail-capa-section[open] .capa-summary::after, .form-capa-section[open] .form-capa-summary::after { transform: rotate(-135deg); } .detail-capa-section[open] .capa-summary { border-bottom: 1px solid var(--c-border); } .capa-title { flex: 1; } .capa-filled-badge { display: none; } .capa-filled .capa-filled-badge { display: inline-flex; font-size: 10px; font-weight: 700; background: #7c3aed; color: #fff; padding: 1px 7px; border-radius: 999px; letter-spacing: 0.04em; } .capa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 14px; } .capa-item-full { grid-column: 1 / -1; } .capa-label { font-size: 11px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .capa-value { font-size: 13px; color: var(--c-text); white-space: pre-wrap; line-height: 1.5; } .capa-value.capa-empty { color: var(--c-text-subtle); font-style: italic; } /* Form CAPA section */ .form-capa-section { border: 1.5px solid var(--c-border); border-radius: var(--radius-md); margin-top: 14px; overflow: hidden; } .form-capa-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 13px; background: var(--c-bg); list-style: none; user-select: none; } .form-capa-summary::-webkit-details-marker, .form-capa-summary::marker { display: none; } .form-capa-section[open] .form-capa-summary { border-bottom: 1px solid var(--c-border); } .form-capa-hint { font-size: 11px; font-weight: 400; color: var(--c-text-subtle); } .form-capa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 14px; } .form-group-full { grid-column: 1 / -1; } /* Detail source bar: actions row */ .detail-source-bar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .detail-print-btn { font-size: 12px; } /* Activity log */ .detail-activity { margin-top: 18px; border-top: 1px solid var(--c-border); padding-top: 14px; } .activity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .activity-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); } .activity-log-entries { display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; } .activity-entry { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 6px; background: var(--c-bg); border: 1px solid var(--c-border); font-size: 12px; } .activity-stamp { color: var(--c-text-muted); font-size: 11px; } .activity-action { color: var(--c-text); font-weight: 500; } .activity-empty { color: var(--c-text-muted); font-size: 12px; font-style: italic; padding: 6px 0; } .activity-comment-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .activity-comment-form textarea { width: 100%; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; resize: vertical; font-family: inherit; } .activity-comment-actions { display: flex; gap: 8px; } .btn-sm { padding: 5px 12px; font-size: 12px; } /* Old print rules removed — centralised in the bottom @media print block. */ .no-tasks { text-align: center; padding: 64px 24px; color: var(--c-text-muted); background: var(--c-card); border-radius: var(--radius-md); border: 1px solid var(--c-border); position: relative; overflow: hidden; } .no-tasks::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, var(--c-accent-soft) 0%, transparent 35%), radial-gradient(circle at 80% 70%, rgba(94, 234, 212, 0.08) 0%, transparent 40%); opacity: 0.6; pointer-events: none; } .no-tasks > * { position: relative; z-index: 1; } .no-tasks-icon { font-size: 44px; margin-bottom: 12px; opacity: 0.45; filter: grayscale(0.3); } .no-tasks-text { font-size: 15px; font-weight: 600; color: var(--c-text); margin: 0 0 4px; } .no-tasks-hint { font-size: 13px; color: var(--c-text-muted); margin-top: 6px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.55; } /* Onboarding empty state — first-time user */ .no-tasks-onboarding { padding: 72px 28px 64px; border: 1px solid var(--c-border); } .no-tasks-onboarding .no-tasks-icon { font-size: 56px; opacity: 0.8; margin-bottom: 16px; filter: none; } .no-tasks-onboarding .no-tasks-text { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; } .no-tasks-cta { margin-top: 18px; padding: 10px 22px; font-size: 14px; } /* =========== Footer =========== */ .app-footer { margin-top: 32px; padding: 16px 24px 20px; text-align: center; color: var(--c-text-subtle); font-size: 12px; } .app-footer p { margin: 0 0 4px; } .app-footer-version { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; margin-top: 8px !important; padding: 4px 12px; background: var(--c-bg-elev); border: 1px solid var(--c-border); border-radius: var(--radius-full); color: var(--c-text-muted); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .app-footer-brand { font-weight: 800; color: var(--c-accent); letter-spacing: 0.08em; } .app-footer-divider { opacity: 0.4; } .app-footer-version-num, .app-footer-build { font-weight: 600; color: var(--c-text); } /* ===== Toolbar overflow menu (⋯) — JSON backup/restore ===== */ .toolbar-menu { position: relative; display: inline-flex; } .toolbar-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; display: flex; flex-direction: column; gap: 2px; animation: toolbarPopIn 140ms cubic-bezier(0.4, 0, 0.2, 1); } .toolbar-menu-pop[hidden] { display: none; } @keyframes toolbarPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .toolbar-menu-pop button[role="menuitem"] { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; background: transparent; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--c-text); cursor: pointer; transition: background var(--motion-fast); } .toolbar-menu-pop button[role="menuitem"]:hover { background: var(--c-bg); } .toolbar-menu-pop button[role="menuitem"]:focus-visible { outline: none; box-shadow: var(--focus-ring); background: var(--c-bg); } .toolbar-menu-pop button[role="menuitem"]::before { content: ''; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; opacity: 0.7; } #btn-export-json::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); } #btn-import-json::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E"); } /* =========== Modals =========== */ .modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; opacity: 0; transition: opacity var(--motion-base); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal.modal-open { opacity: 1; } .modal[hidden] { display: none; } .modal-content { background: var(--c-card); border-radius: var(--radius-lg); max-width: 640px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-modal); -webkit-overflow-scrolling: touch; transform: translateY(14px) scale(0.985); transition: transform var(--motion-base); } .modal.modal-open .modal-content { transform: translateY(0) scale(1); } .modal-content-sm { max-width: 440px; } .modal-content-md { max-width: 540px; } .modal-footer { padding: 12px 18px 14px; border-top: 1px solid var(--c-border); display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; background: var(--c-card); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* ===== Settings modal ===== */ .settings-body { padding: 6px 18px 12px; } .settings-section { padding: 14px 0; border-bottom: 1px solid var(--c-border); } .settings-section:last-child { border-bottom: none; } .settings-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); margin: 0 0 12px; } .settings-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; } .settings-row label { color: var(--c-text-muted); font-weight: 500; } .settings-row select { appearance: none; -webkit-appearance: none; padding: 7px 28px 7px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-card); color: var(--c-text); font-size: 13px; font-weight: 500; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; } .settings-row select:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); } .settings-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* Storage usage bar */ .settings-storage-bar { width: 100%; height: 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-full); overflow: hidden; } .settings-storage-fill { height: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover)); width: 0%; transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1); } .settings-storage-text { margin: 6px 0 0; font-size: 12px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; } /* About section */ .settings-about { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 0; font-size: 13px; } .settings-about dt { color: var(--c-text-muted); font-weight: 500; } .settings-about dd { margin: 0; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; } /* Account & enterprise section — honest "coming with backend" note */ .settings-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--c-text-muted); } .settings-hint-sub { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--c-text-subtle); } /* Generic app dialog (custom confirm/prompt) */ .app-dialog-body { padding: 18px 22px 4px; } .app-dialog-message { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-text); white-space: pre-line; /* render the "\n\n" line breaks */ } .app-dialog-input { width: 100%; margin-top: 12px; padding: 9px 12px; font-size: 14px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-card); color: var(--c-text); } .app-dialog-input:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); } /* Mail-to-task review banner at the top of the task form */ .form-mail-review { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--c-warning-bg); border-left: 4px solid #c47a0c; border-radius: var(--radius-sm); background: var(--c-warning-bg); } .form-mail-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .form-mail-review-title { font-weight: 700; font-size: 13px; color: var(--c-warning); } .form-mail-review-conf { font-size: 12px; font-weight: 600; color: var(--c-warning); font-variant-numeric: tabular-nums; } .form-mail-review-hint { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--c-text-muted); } .form-mail-review-uncertain { margin-top: 6px; font-size: 12px; font-weight: 600; color: #c47a0c; } /* ===== Evidence attachments (photos / documents) ===== */ .form-attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .attach-chip { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 13px; } .attach-chip-icon { color: var(--c-accent); display: inline-flex; flex: none; } .attach-chip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-chip-size { color: var(--c-text-subtle); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; } .attach-chip-remove { display: inline-flex; align-items: center; justify-content: center; flex: none; border: none; background: transparent; color: var(--c-text-subtle); line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-xs); } .attach-chip-remove .v-icon { width: 14px; height: 14px; } .attach-chip-remove:hover { color: var(--c-overdue); background: var(--c-overdue-bg); } .detail-attachments { margin: 12px 0 0; } .detail-attach-heading { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--c-text-muted); } .detail-attach-heading .v-icon { color: var(--c-accent); } .detail-attach-count { background: var(--c-accent-soft); color: var(--c-accent-hover); font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); } .detail-attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .detail-attach-item { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px; background: var(--c-card); } .detail-attach-thumb { height: 90px; border-radius: var(--radius-xs); background: var(--c-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--c-text-subtle); } .detail-attach-thumb .v-icon { width: 28px; height: 28px; } .detail-attach-img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; } .detail-attach-meta { display: flex; flex-direction: column; min-width: 0; } .detail-attach-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-attach-size { font-size: 11.5px; color: var(--c-text-subtle); font-variant-numeric: tabular-nums; } .detail-attach-dl { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--c-border-strong); background: var(--c-card); color: var(--c-accent-text); border-radius: var(--radius-xs); padding: 4px 8px; font-size: 12px; cursor: pointer; } .detail-attach-dl:hover { background: var(--c-accent-soft); border-color: var(--c-accent); } .detail-attach-dl .v-icon { width: 14px; height: 14px; } /* ===== Shortcuts modal ===== */ .shortcuts-list { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 12px; margin: 0; padding: 18px; font-size: 13.5px; } .shortcuts-list dt { display: inline-flex; align-items: center; gap: 6px; justify-self: end; color: var(--c-text-muted); font-size: 12px; } .shortcuts-list dd { margin: 0; color: var(--c-text); align-self: center; } kbd { display: inline-block; padding: 2px 7px; border: 1px solid var(--c-border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--c-bg); color: var(--c-text); font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 600; line-height: 1.4; box-shadow: 0 1px 0 rgba(0,0,0,0.05); vertical-align: middle; } /* ===== Sidebar footer actions (settings + shortcuts) ===== */ .sidebar-footer-actions { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; /* must never shrink — keeps icons visible */ background: var(--sidebar-bg); } .sidebar-footer-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: rgba(255,255,255,0.55); border-radius: var(--radius-xs); cursor: pointer; font-size: 14px; transition: background var(--motion-fast), color var(--motion-fast); } .sidebar-footer-btn:hover { background: var(--sidebar-hover-bg); color: white; } .sidebar-footer-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-light); } .sidebar-footer-spacer { flex: 1; } .sidebar-footer-version { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.4); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; padding-right: 4px; } .modal-header { padding: 14px 18px; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--c-card); z-index: 1; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal-header h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; line-height: 1; cursor: pointer; color: var(--c-text-muted); border-radius: var(--radius-sm); flex-shrink: 0; transition: background var(--motion-fast), color var(--motion-fast); } .modal-close .v-icon { width: 18px; height: 18px; } .modal-close:hover { background: var(--c-bg); color: var(--c-text); } .modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); background: var(--c-bg); } /* ===== Actor (name) form ===== */ .actor-form { padding: 18px 18px 16px; } .actor-form-hint { margin: 0 0 12px; color: var(--c-text-muted); font-size: 13px; line-height: 1.5; } .actor-form input[type="text"] { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-card); color: var(--c-text); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .actor-form input[type="text"]:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); } /* =========== Form =========== */ .task-form { padding: 18px 20px 20px; } .form-group { margin-bottom: 14px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--c-text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); font-size: 14px; background: white; color: var(--c-text); transition: border-color var(--transition), box-shadow var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12); } .form-group input:invalid:not(:placeholder-shown) { border-color: var(--c-overdue); } .form-group textarea { resize: vertical; min-height: 96px; font-family: inherit; line-height: 1.5; } .form-error { background: var(--c-overdue-bg); border: 1px solid var(--c-overdue); color: var(--c-overdue); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-top: 6px; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border); } /* =========== Detail =========== */ .modal-body { padding: 18px 20px 20px; } .detail-section { margin-bottom: 16px; } .detail-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; word-break: break-word; } .detail-badges { display: flex; gap: 6px; flex-wrap: wrap; } .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 18px; } .detail-item { background: #f7fafc; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); min-width: 0; } .detail-label { font-size: 11px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .detail-value { font-size: 14px; color: var(--c-text); word-break: break-word; } .detail-notes-heading { font-size: 12px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 6px; } .detail-notes { background: #f7fafc; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--c-border); white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.55; min-height: 56px; color: var(--c-text); } .detail-notes.empty { color: var(--c-text-subtle); font-style: italic; } .detail-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--c-border); } /* =========== Toast — bottom-right stack with slide-in ============ */ .toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column-reverse; /* newest at bottom = closest to anchor */ gap: 8px; z-index: 2000; pointer-events: none; max-width: calc(100% - 40px); } @keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } .toast { background: var(--c-text); color: white; padding: 11px 14px 11px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-lg); pointer-events: auto; animation: toastIn 220ms cubic-bezier(0.34, 1.56, 0.64, 1); max-width: 340px; border-left: 3px solid currentColor; display: flex; align-items: center; gap: 8px; } .toast::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.85; } .toast-success { background: #064e3b; color: #d1fae5; border-left-color: #34d399; } .toast-success::before { background: #34d399; } .toast-error, .toast-danger { background: #4c1413; color: #fee2e2; border-left-color: #f87171; } .toast-error::before, .toast-danger::before { background: #f87171; } .toast-info { background: #1e293b; color: #e2e8f0; border-left-color: var(--c-accent); } .toast-info::before { background: var(--c-accent); } .toast-undo { display: flex; align-items: center; gap: 12px; pointer-events: all; } .toast-undo-btn { background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.5); color: white; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .toast-undo-btn:hover { background: rgba(255,255,255,0.4); } /* =========== Responsive =========== */ @media (max-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .filters-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .dashboard-grid { grid-template-columns: repeat(3, 1fr); } .form-capa-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .app-header { padding: 14px 16px; } .header-content { flex-direction: column; align-items: stretch; gap: 10px; } .brand { gap: 12px; } .app-header h1 { font-size: 18px; } .subtitle { font-size: 12px; } .language-switcher { align-self: stretch; justify-content: center; } .app-main { padding: 16px; } .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-card { padding: 12px 14px; gap: 12px; } .stat-icon { width: 38px; height: 38px; font-size: 18px; } .stat-value { font-size: 22px; } .capa-grid { grid-template-columns: 1fr; } .form-capa-grid { grid-template-columns: 1fr; } .filters { padding: 14px; } .filters-grid { grid-template-columns: 1fr; gap: 10px; } .filter-period-row { gap: 10px; } .period-buttons { width: 100%; } .period-btn { flex: 1 1 calc(50% - 3px); text-align: center; } .actions { flex-direction: column; gap: 8px; } .actions .btn { width: 100%; justify-content: center; } .task-card { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 14px; } .task-badges { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-start; margin-top: 4px; } .task-date-day { font-size: 20px; } .task-meta-value { max-width: none; white-space: normal; } .form-row { grid-template-columns: 1fr; gap: 0; } .detail-grid { grid-template-columns: 1fr; } .modal { padding: 8px; } .modal-content { max-height: 96vh; border-radius: var(--radius-md); } .form-actions, .detail-actions { flex-direction: column-reverse; } .form-actions .btn, .detail-actions .btn { width: 100%; justify-content: center; } .toast-container { top: auto; bottom: 16px; right: 16px; left: 16px; } .toast { max-width: none; } } @media (max-width: 380px) { .brand-logo { width: 44px; height: 44px; font-size: 13px; } .app-header h1 { font-size: 16px; } .stat-value { font-size: 20px; } .stat-label { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Disable transform-based animations that can cause vestibular issues */ .task-card:hover { transform: none !important; } .status-toggle-btn:hover { transform: none !important; } .modal-content { transform: none !important; } .btn:active { transform: none !important; } } /* ========================================================= Meertalige content — taal-tabs, brontaal, source pills, fallback ========================================================= */ /* Source pills: human / lexicon / api / missing — monochrome SVG icons */ .src-pill .v-icon { width: 12px; height: 12px; } .src-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: #edf2f7; color: var(--c-text-muted); border: 1px solid var(--c-border); white-space: nowrap; line-height: 1.4; } .src-pill.src-human { background: #dcf3e3; color: #1f7a3e; border-color: #b9e8c8; } .src-pill.src-lexicon { background: #ecf2ff; color: #2c5fa8; border-color: #c8d6f3; } .src-pill.src-api { background: #faf5e8; color: #8a6510; border-color: #ecdca9; } .src-pill.src-missing { background: #fdecea; color: #b42318; border-color: #f4c5be; } /* Task card: source flag + fallback */ .task-fallback-flag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; padding: 2px 6px; background: var(--c-progress-bg); color: var(--c-progress); border: 1px solid #ecd2a9; border-radius: 999px; vertical-align: middle; } .task-meta-item.src-meta { background: #f7fafc; padding: 2px 8px 2px 4px; border-radius: 999px; border: 1px solid var(--c-border); } .task-meta-src-text { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--c-text-muted); } /* === Form translatable section === */ .form-translatable { background: #f8fafd; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 18px; } .form-translatable-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .form-translatable-title { font-size: 12px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .form-source-lang { display: flex; align-items: center; gap: 6px; } .form-source-lang label { font-size: 11px; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; } .form-source-lang select { padding: 5px 9px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: white; font-size: 13px; font-weight: 500; } .form-lang-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--c-border); padding-bottom: 6px; flex-wrap: wrap; } .form-lang-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--c-text-muted); transition: all var(--transition); position: relative; } .form-lang-tab:hover { background: white; color: var(--c-primary); border-color: var(--c-primary); } .form-lang-tab.active { background: white; color: var(--c-primary); border-color: var(--c-primary); border-bottom-color: white; box-shadow: 0 -2px 0 var(--c-primary) inset; font-weight: 600; } .form-lang-tab.is-source::after { content: '★'; position: absolute; top: -6px; right: -4px; background: var(--c-accent); color: white; font-size: 9px; width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Monochrome 2-letter language code chip (replaces the OS-flaky flag emoji, which on Windows rendered as a letter-box). Reused in the other-lang header. */ .tab-code, .other-lang-header .tab-code { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.06); color: var(--c-text-muted); font-variant-numeric: tabular-nums; flex: none; } .form-lang-tab.active .tab-code { background: var(--c-accent-soft); color: var(--c-accent-text); } .theme-dark .tab-code { background: rgba(255, 255, 255, 0.10); } .tab-status .src-pill { padding: 1px 4px; font-size: 10px; } .form-field-meta { display: inline-block; margin-left: 6px; vertical-align: middle; } .form-translatable-actions { display: flex; justify-content: flex-end; margin-top: 4px; } .btn-translate { background: var(--c-accent); color: white; padding: 8px 14px; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--transition); } .btn-translate:hover { background: #1f6f70; } .btn-translate:disabled { opacity: 0.55; cursor: not-allowed; } .btn-translate:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .form-meta-grid { border-top: 1px dashed var(--c-border); padding-top: 14px; } /* === Detail: source-bar, fallback, andere talen === */ .detail-source-bar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--c-primary-soft); border: 1px solid #d8e0ec; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; flex-wrap: wrap; justify-content: space-between; } .detail-source-text strong { color: var(--c-primary); } .toggle-original { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 10px; background: white; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); color: var(--c-primary); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .toggle-original:hover { background: var(--c-primary-solid); color: white; border-color: var(--c-primary); } .toggle-original[aria-pressed="true"] { background: var(--c-primary-solid); color: white; border-color: var(--c-primary); } .toggle-original:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .original-banner { background: var(--c-progress-bg); border: 1px solid #ecd2a9; border-left: 4px solid var(--c-progress); color: var(--c-progress); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 12px; font-weight: 500; } .original-banner strong { font-weight: 700; } /* === Spinner + loading state === */ @keyframes hse-spin { to { transform: rotate(360deg); } } .spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: hse-spin 0.7s linear infinite; vertical-align: -2px; margin-right: 4px; } .detail-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--c-text-muted); font-size: 14px; background: #f7fafc; border-radius: var(--radius-md); margin-top: 14px; } .detail-loading .spinner-inline { width: 18px; height: 18px; color: var(--c-primary); margin-right: 0; } .detail-fallback { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; background: var(--c-progress-bg); color: var(--c-progress); border: 1px solid #ecd2a9; border-radius: 999px; vertical-align: middle; cursor: help; } .detail-src-inline { margin-left: 6px; vertical-align: middle; } .detail-other-langs { margin-top: 14px; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: #fafbfd; overflow: hidden; } .detail-other-langs > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--c-primary); list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; } .detail-other-langs > summary::before { content: '▸'; display: inline-block; transition: transform 150ms ease; font-size: 12px; } .detail-other-langs[open] > summary::before { transform: rotate(90deg); } .detail-other-langs > summary::-webkit-details-marker { display: none; } .detail-other-langs > summary:hover { background: var(--c-primary-soft); } .other-lang-block { padding: 12px 14px; border-top: 1px solid var(--c-border); } .other-lang-header { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text); margin-bottom: 8px; } .other-lang-flag { font-size: 16px; } .other-lang-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: start; padding: 4px 0; font-size: 13px; } .other-lang-label { color: var(--c-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; } .other-lang-value { color: var(--c-text); word-break: break-word; } .other-lang-value-notes { white-space: pre-wrap; font-size: 13px; line-height: 1.45; } /* === Responsive overrides for new elements === */ @media (max-width: 640px) { .form-translatable { padding: 12px; } .form-translatable-header { flex-direction: column; align-items: stretch; gap: 8px; } .form-lang-tab { padding: 7px 10px; font-size: 12px; } .form-lang-tab .tab-label { display: none; } /* klein scherm: code + status volstaan */ .form-lang-tab .tab-code { font-size: 11px; padding: 2px 6px; } .other-lang-line { grid-template-columns: 1fr; gap: 2px; } .other-lang-line .src-pill { justify-self: start; } .detail-source-bar { width: 100%; justify-content: center; } .header-controls { width: 100%; justify-content: space-between; } } /* Old print rules removed — centralised in the bottom @media print block. */ /* ========================================================== HSE COMMAND CENTER — Slack-like layout ========================================================== */ /* ===== App shell ===== */ .app-shell { display: flex; min-height: 100vh; } /* ===== Sidebar ===== */ :root { --sidebar-w: 240px; --sidebar-bg: #1a2e4a; --sidebar-text: #b8c5d4; --sidebar-text-active: #ffffff; --sidebar-hover-bg: rgba(255,255,255,0.07); --sidebar-active-bg: rgba(255,255,255,0.14); --sidebar-border: rgba(255,255,255,0.08); --feed-toolbar-h: 56px; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; overflow: hidden; /* No outer scroll — channel-list scrolls instead */ position: sticky; top: 0; height: 100vh; z-index: 40; transition: transform 200ms ease; } /* Sidebar top — brand + close */ .sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 12px; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .sidebar-logo { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(94,234,212,0.35); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset, 0 1px 3px rgba(0,0,0,0.2); } .sidebar-logo svg { width: 26px; height: 26px; display: block; } .sidebar-brand-name { font-size: 13px; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-close { display: none; /* shown on mobile (becomes inline-flex) */ align-items: center; justify-content: center; background: transparent; border: none; color: var(--sidebar-text); line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 4px; flex-shrink: 0; } .sidebar-close .v-icon { width: 20px; height: 20px; } .sidebar-close:hover { background: var(--sidebar-hover-bg); color: white; } /* Sidebar controls — actor + lang */ .sidebar-controls { padding: 10px 10px 6px; border-bottom: 1px solid var(--sidebar-border); display: flex; flex-direction: column; gap: 6px; } .sidebar-actor { width: 100%; justify-content: flex-start; background: var(--sidebar-hover-bg); border: 1px solid rgba(255,255,255,0.1); color: var(--sidebar-text); border-radius: 6px; font-size: 12px; padding: 6px 10px; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-actor:hover { background: rgba(255,255,255,0.12); color: white; } .sidebar-actor .actor-icon { font-size: 13px; flex-shrink: 0; } .sidebar-lang-row { display: flex; align-items: center; gap: 6px; } .sidebar-api-btn { flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--sidebar-text); font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; } .sidebar-api-btn.api-on { border-color: rgba(120,220,160,0.4); color: #a3dfc0; } .sidebar-api-btn.api-off { opacity: 0.6; } .sidebar-api-btn:hover { background: rgba(255,255,255,0.12); } .sidebar-lang { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; padding: 3px 8px; gap: 4px; transition: background var(--motion-fast), border-color var(--motion-fast); } .sidebar-lang:hover { background: rgba(255,255,255,0.12); } .sidebar-lang .lang-icon { font-size: 13px; } .sidebar-lang select { appearance: none; -webkit-appearance: none; font-size: 11px; font-weight: 700; color: white; padding: 3px 18px 3px 2px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 10px; border: none; cursor: pointer; } .sidebar-lang select option { color: var(--c-text); background: white; } .sidebar-lang select:focus-visible { outline: none; box-shadow: var(--focus-ring-light); border-radius: 4px; } /* Sidebar sections — flex column so the channel-list can scroll inside */ .sidebar-section { display: flex; flex-direction: column; flex: 1; min-height: 0; /* allow the child .channel-list to actually scroll */ padding: 10px 0 0; } .sidebar-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); padding: 4px 14px; text-transform: uppercase; flex-shrink: 0; } .channel-list { display: flex; flex-direction: column; gap: 1px; padding: 0 6px 6px; flex: 1; min-height: 0; overflow-y: auto; /* this is where the scrollbar lives now */ overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .channel-list::-webkit-scrollbar { width: 4px; } .channel-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; } .channel-list::-webkit-scrollbar-track { background: transparent; } .sidebar-divider { height: 1px; background: var(--sidebar-border); margin: 6px 8px; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: none; border-radius: 6px; background: transparent; color: var(--sidebar-text); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; width: 100%; transition: background 100ms, color 100ms; position: relative; } .nav-item:hover { background: var(--sidebar-hover-bg); color: white; } .nav-item.active { background: var(--sidebar-active-bg); color: white; font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #5eead4; box-shadow: 0 0 6px rgba(94,234,212,0.5); } .nav-item:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; } .nav-item-alert:not(.active) { color: #f5a0a0; } .nav-item-alert:not(.active):hover { color: white; } .nav-item-escalation:not(.active) { color: #d4b8f0; } .nav-item-escalation:not(.active):hover { color: white; } .nav-item-done:not(.active) { color: rgba(255,255,255,0.5); } .nav-icon { font-size: 14px; line-height: 1; flex-shrink: 0; } .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-badge { min-width: 18px; height: 18px; padding: 0 5px; background: rgba(255,255,255,0.18); color: white; border-radius: 999px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-badge-alert { background: rgba(220,80,60,0.7); } .nav-item.active .nav-badge { background: rgba(255,255,255,0.25); } /* Sidebar footer note — short status line at bottom of sidebar */ .sidebar-footer-note { /* Flex parent — truncation happens on the > span:last-child child below */ display: flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.55); /* WCAG AA on --sidebar-bg #1a2e4a */ line-height: 1.3; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; /* never shrink — pinned at bottom */ background: #142441; /* opaque slightly-darker shade of sidebar — never see-through */ overflow: hidden; /* clips overflow but no ellipsis here (would do nothing on flex) */ letter-spacing: 0.01em; } .sidebar-footer-icon { font-size: 12px; opacity: 0.85; flex-shrink: 0; } .sidebar-footer-note > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Sidebar overlay (mobile) */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 190; backdrop-filter: blur(2px); } /* ===== MAIN PANEL ===== */ .main-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--c-bg); } /* ===== Feed toolbar ===== */ .feed-toolbar { background: var(--c-card); border-bottom: 1px solid var(--c-border); padding: 0 16px; height: var(--feed-toolbar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 30; flex-shrink: 0; box-shadow: 0 1px 3px rgba(15,23,42,0.05); } .feed-toolbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .feed-toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hamburger-btn { display: none; /* shown on mobile (becomes flex) */ align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--c-text-muted); padding: 6px 8px; border-radius: var(--radius-sm); line-height: 1; flex-shrink: 0; } .hamburger-btn .v-icon { width: 20px; height: 20px; } .hamburger-btn:hover { background: var(--c-primary-soft); color: var(--c-primary); } .feed-title-area { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; overflow: hidden; } .feed-channel-title { font-size: 16px; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; min-width: 0; letter-spacing: -0.015em; /* NB: do NOT add display:flex here — it breaks text-overflow:ellipsis */ } .feed-channel-title::before { content: '#'; color: var(--c-accent); font-weight: 700; font-size: 17px; opacity: 0.75; margin-right: 4px; } .feed-search-wrap { position: relative; } .feed-search-wrap::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; opacity: 0.65; } .feed-search-wrap input[type="search"] { padding: 7px 12px 7px 30px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); font-size: 13px; background: var(--c-bg); color: var(--c-text); width: 260px; /* stable width — no jumpiness on focus */ transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast); } .feed-search-wrap input[type="search"]:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); background: var(--c-card); } .btn-compact { padding: 7px 11px; font-size: 12px; font-weight: 600; } /* ===== Stats strip ===== */ .stats-strip { display: flex; align-items: stretch; background: var(--c-card); border-bottom: 1px solid var(--c-border); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; } .stats-strip::-webkit-scrollbar { display: none; } .sstat { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border: none; border-right: 1px solid var(--c-border); background: var(--c-card); cursor: pointer; white-space: nowrap; transition: background var(--motion-fast), color var(--motion-fast); font-size: 13px; color: var(--c-text-muted); flex-shrink: 0; position: relative; } .sstat:hover { background: var(--c-bg); color: var(--c-text); } .sstat:focus-visible { outline: none; box-shadow: inset var(--focus-ring); background: var(--c-bg); } .sstat-active { background: var(--c-accent-soft); color: var(--c-text); font-weight: 600; } .sstat-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--c-accent); border-radius: 2px 2px 0 0; } .sstat-icon { font-size: 13px; } .sstat-value { font-size: 18px; font-weight: 700; color: var(--c-text); line-height: 1; } .sstat-label { font-size: 11px; font-weight: 500; color: var(--c-text-muted); } .sstat-rate { font-size: 10px; color: var(--c-completed); font-weight: 600; margin-left: 2px; } /* Per-type coloring */ .sstat-kritiek .sstat-value { color: var(--c-overdue); } .sstat-overdue .sstat-value { color: var(--c-overdue); } .sstat-today .sstat-value { color: #c47a0c; } .sstat-done .sstat-value { color: var(--c-completed); } .sstat-escalation .sstat-value{ color: #7c3aed; } /* Inline-SVG stat icons inherit the same semantic colour as the value */ .sstat-icon .v-icon { vertical-align: middle; } .sstat-kritiek .sstat-icon { color: var(--c-overdue); } .sstat-overdue .sstat-icon { color: var(--c-overdue); } .sstat-today .sstat-icon { color: #c47a0c; } .sstat-done .sstat-icon { color: var(--c-completed); } .sstat-escalation .sstat-icon { color: #7c3aed; } .nav-icon .v-icon { vertical-align: middle; } /* ===== Feed sub-filters ===== */ .feed-filters { background: var(--c-card); border-bottom: 1px solid var(--c-border); padding: 8px 14px; flex-shrink: 0; } .feed-filters-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .feed-filter-select { appearance: none; -webkit-appearance: none; padding: 6px 26px 6px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; background: var(--c-card); color: var(--c-text); cursor: pointer; transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; } .feed-filter-select:hover { border-color: var(--c-text-muted); } .feed-filter-select:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); } /* Mark filter as "active" (value != all) for subtle highlighting */ .feed-filter-select:not([data-value="all"]):not([value="all"]) {} .feed-filters-inner .period-btn { padding: 5px 10px; font-size: 11px; } .feed-filters-inner .btn-my-tasks { padding: 5px 10px; font-size: 11px; } .feed-reset-btn { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--c-text-muted); background: transparent; border: none; padding: 4px 6px; border-radius: 4px; cursor: pointer; } .feed-reset-btn:hover { background: var(--c-primary-soft); color: var(--c-primary); } /* ===== Feed main ===== */ .feed-main { flex: 1; padding: 16px 20px; max-width: 1100px; width: 100%; margin: 0 auto; } /* ===== CAPA closure badges ===== */ .badge-closure-open { background: #fdf1e1; color: #b45b14; border-color: #f5d9b4; } .badge-closure-verified { background: #ede9fe; color: #7c3aed; border-color: #c4b5fd; } .badge-closure-closed { background: var(--c-completed-bg); color: var(--c-completed); border-color: #b9e8c8; } /* Severity scale (incident/injury) — calm, escalating tones */ .badge-severity-near_miss { background: #eef2fb; color: #3a5a99; border-color: #d3deef; } .badge-severity-first_aid { background: #fdf6e3; color: #8a6d1e; border-color: #efe1b8; } .badge-severity-medical { background: #fdf1e1; color: #b45b14; border-color: #f5d9b4; } .badge-severity-lost_time { background: #fbe9e0; color: #b14a2a; border-color: #f1cdbb; } .badge-severity-serious { background: #fbe4e4; color: #b02a2a; border-color: #f0c2c2; } /* Effectiveness review */ .badge-eff-pending { background: #eef2fb; color: #3a5a99; border-color: #d3deef; } .badge-eff-effective { background: var(--c-completed-bg); color: var(--c-completed); border-color: #b9e8c8; } .badge-eff-not_effective { background: #fbe4e4; color: #b02a2a; border-color: #f0c2c2; } /* CAPA root-cause (5 whys) + effectiveness note in detail */ .capa-why { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; } .capa-why li { line-height: 1.45; } .capa-eff-note { margin-top: 5px; font-size: 13px; } .capa-eff-meta { margin-top: 3px; font-size: 12px; color: var(--c-text-muted); } /* Form: 5× why inputs */ .form-why-list { display: flex; flex-direction: column; gap: 6px; } .form-why-list .form-why { width: 100%; } /* CAPA closure mismatch warning — closureStatus=closed maar taak niet completed */ .capa-closure-warning { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 5px 9px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.3; } .badge-capa-warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; font-weight: 700; } /* Mini status-dot op CAPA-badge in taakkaart */ .badge-capa { display: inline-flex; align-items: center; gap: 4px; } .badge-capa-status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b45b14; } .badge-capa-status-verified { background: #7c3aed; } .badge-capa-status-closed { background: var(--c-completed); } /* Escalation reason — own line under the badges in the detail view */ .detail-escalation-reason { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; background: var(--c-escalation-bg); color: var(--c-escalation); border: 1px solid rgba(124, 58, 237, 0.25); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; line-height: 1.4; } .detail-escalation-reason strong { font-weight: 700; } .detail-escalation-icon { font-size: 14px; flex-shrink: 0; } /* ===== Mobile responsive ===== */ @media (max-width: 900px) { .feed-channel-title { max-width: 160px; } .feed-search-wrap input[type="search"] { width: 160px; } .feed-search-wrap input[type="search"]:focus { width: 200px; } } @media (max-width: 768px) { /* Sidebar becomes a slide-in drawer on mobile */ .sidebar { position: fixed; left: 0; top: 0; height: 100%; z-index: 200; transform: translateX(-100%); width: min(var(--sidebar-w), 85vw); } .sidebar.open { transform: translateX(0); } .sidebar-close { display: flex; } /* Main panel fills full width */ .main-panel { width: 100%; } /* Show hamburger */ .hamburger-btn { display: flex; } /* Feed toolbar adjustments */ .feed-toolbar { padding: 0 12px; gap: 8px; } .feed-channel-title { font-size: 15px; max-width: 130px; } .feed-search-wrap { display: none; } /* hide search in toolbar on mobile — it's in filters */ .btn-compact { padding: 6px 9px; font-size: 11px; } /* Feed main padding */ .feed-main { padding: 12px 14px; } /* Stats strip smaller */ .sstat { padding: 7px 12px; gap: 5px; } .sstat-value { font-size: 15px; } .sstat-label { display: none; } /* show only count on mobile */ /* Sub-filters: add search at top on mobile */ .feed-filters { padding: 8px 12px; } .feed-filters-inner { gap: 5px; } .feed-filter-select { font-size: 12px; } } @media (max-width: 480px) { .feed-toolbar-right .btn-compact { display: none; } /* hide CSV/ICS on very small screens */ .stats-strip { flex-wrap: nowrap; } .sstat-icon { display: none; } .feed-main { padding: 10px 12px; } } /* Old print rules removed — centralised in the bottom @media print block. */ /* ================================================================= SLACK-INSPIRED FEATURES — Quick Switcher, Compose-bar, Pinned, Hover ================================================================= */ /* ===== ⌘K Quick Switcher modal ===== */ .quick-switcher-modal { align-items: flex-start; padding-top: 80px; } .qs-content { max-width: 620px; width: 100%; border-radius: var(--radius-lg); background: var(--c-card); overflow: hidden; box-shadow: var(--shadow-modal); } .qs-input-wrap { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--c-border); } .qs-input-icon { color: var(--c-text-muted); display: inline-flex; flex-shrink: 0; } .qs-input-wrap input { flex: 1; background: transparent; border: none; outline: none; font-size: 15px; font-weight: 500; color: var(--c-text); font-family: inherit; padding: 4px 0; } .qs-input-wrap input::placeholder { color: var(--c-text-subtle); } .qs-input-wrap input:focus-visible { box-shadow: none; } .qs-input-esc { background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text-muted); padding: 3px 7px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; font-family: inherit; flex-shrink: 0; } .qs-results { max-height: 440px; overflow-y: auto; padding: 6px 0; } .qs-group-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); padding: 8px 18px 4px; } .qs-result { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; padding: 9px 18px; cursor: pointer; color: var(--c-text); transition: background var(--motion-fast); } .qs-result.is-selected { background: var(--c-accent-soft); } .qs-result-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; background: var(--c-bg); border-radius: var(--radius-sm); flex-shrink: 0; } .qs-result.is-selected .qs-result-icon { background: var(--c-card); } .qs-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .qs-result-label { font-size: 13.5px; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qs-result-sub { font-size: 11.5px; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qs-mark { background: var(--c-accent-glow); color: var(--c-text); padding: 0 2px; border-radius: 2px; font-weight: 700; } .qs-empty { padding: 32px 18px; text-align: center; color: var(--c-text-muted); font-size: 13px; } .qs-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: var(--c-bg); border-top: 1px solid var(--c-border); font-size: 11px; color: var(--c-text-muted); gap: 12px; } .qs-footer span { display: inline-flex; align-items: center; gap: 4px; } /* ===== Sticky Compose bar (bottom of feed) — Slack composer feel ===== */ .compose-bar { position: sticky; bottom: 0; padding: 8px 20px 12px; background: linear-gradient(180deg, transparent 0%, var(--c-bg) 35%); z-index: 5; pointer-events: none; transition: transform var(--motion-base), opacity var(--motion-fast); } /* "auto" mode: hide on scroll down */ .compose-bar.compose-bar-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; } /* "off" mode: completely removed */ .compose-bar.compose-bar-off { display: none; } .compose-input { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 1060px; margin: 0 auto; padding: 8px 12px; background: var(--c-card); border: 1px solid var(--c-border-strong); border-radius: 10px; font-family: inherit; font-size: 13px; color: var(--c-text-muted); text-align: left; cursor: text; box-shadow: var(--shadow-sm); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); pointer-events: auto; } .compose-input:hover { border-color: var(--c-accent); box-shadow: var(--shadow-md); } .compose-input:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); } .compose-plus { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-accent); color: white; border-radius: var(--radius-sm); flex-shrink: 0; } .compose-plus .v-icon { width: 14px; height: 14px; } /* "+" affordances unified to a crisp SVG icon (was a fullwidth ＋ glyph). */ .btn-plus-icon { display: inline-flex; align-items: center; } .btn-plus-icon .v-icon { width: 15px; height: 15px; } .combo-create-icon .v-icon { width: 12px; height: 12px; } .sidebar-site-add-icon .v-icon { width: 11px; height: 11px; } .compose-placeholder { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compose-channel { font-weight: 700; color: var(--c-accent); margin-left: 4px; } .compose-hint { font-size: 10px; color: var(--c-text-subtle); flex-shrink: 0; } .compose-hint kbd { background: var(--c-bg); border: 1px solid var(--c-border); border-bottom-width: 2px; padding: 2px 6px; border-radius: var(--radius-xs); font-family: ui-monospace, "SF Mono", monospace; font-size: 10px; font-weight: 700; color: var(--c-text-muted); } /* ===== Toolbar icon buttons (notifications + dashboard) ===== */ .toolbar-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--c-text-muted); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); } .toolbar-icon-btn:hover { background: var(--c-bg); color: var(--c-text); } .toolbar-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .toolbar-icon-btn svg { width: 18px; height: 18px; } .toolbar-icon-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 5px; background: var(--c-text-muted); color: white; border-radius: var(--radius-full); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; border: 1.5px solid var(--c-card); } .toolbar-icon-badge.is-critical { background: var(--c-overdue); } /* ===== Notification drawer ===== */ .notif-content { max-width: 520px; } .notif-body { padding: 0 0 8px; max-height: 60vh; overflow-y: auto; } .notif-empty { padding: 48px 24px; text-align: center; color: var(--c-text-muted); } .notif-empty-icon { font-size: 36px; color: var(--c-completed); margin-bottom: 8px; opacity: 0.7; } .notif-cat { padding: 8px 18px 12px; border-bottom: 1px solid var(--c-border); } .notif-cat:last-child { border-bottom: none; } .notif-cat-header { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-muted); } .notif-cat-icon { font-size: 14px; } .notif-cat-name { flex: 1; } .notif-cat-count { background: var(--c-bg-elev); color: var(--c-text-muted); padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-variant-numeric: tabular-nums; } .notif-cat-critical .notif-cat-icon { color: var(--c-overdue); } .notif-cat-overdue .notif-cat-icon { color: var(--c-overdue); } .notif-cat-verifExpired .notif-cat-icon { color: var(--c-warning); } .notif-cat-evidenceMissing .notif-cat-icon{ color: var(--c-warning); } .notif-cat-awaitingApproval .notif-cat-icon { color: var(--c-escalation); } .notif-cat-items { display: flex; flex-direction: column; gap: 4px; } .notif-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background var(--motion-fast), border-color var(--motion-fast); } .notif-item:hover { background: var(--c-bg-elev); border-color: var(--c-border-strong); } .notif-item-title { font-size: 13px; font-weight: 600; color: var(--c-text); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-item-meta { font-size: 11px; color: var(--c-text-muted); } .notif-more { padding: 6px 4px; font-size: 11px; color: var(--c-text-muted); font-style: italic; } .notif-footer { padding: 10px 18px 14px; border-top: 1px solid var(--c-border); background: var(--c-bg); font-size: 11px; color: var(--c-text-muted); line-height: 1.5; } /* ===== Management dashboard ===== */ .dashboard-content { max-width: 800px; } .modal-content-lg { max-width: 880px; } .dashboard-header-actions { display: flex; gap: 8px; align-items: center; } .dashboard-body { padding: 18px; } /* Management-dashboard KPI grid — own class so it no longer collides with the legacy `.dashboard-grid` (whose later rule killed these responsive columns). */ .dash-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; } @media (max-width: 600px) { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } } .dashboard-kpi { position: relative; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 14px 16px 13px; text-align: left; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .dashboard-kpi:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); } .dashboard-kpi-icon { position: absolute; top: 12px; right: 12px; color: var(--c-text-subtle); opacity: 0.5; } .dashboard-kpi-icon .v-icon { width: 17px; height: 17px; } .dashboard-kpi-value { font-size: 28px; font-weight: 700; color: var(--c-text); line-height: 1.1; font-variant-numeric: tabular-nums; } .dashboard-kpi-label { font-size: 11px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } .dashboard-kpi-warn { border-color: rgba(220, 38, 38, 0.30); } .dashboard-kpi-warn .dashboard-kpi-value { color: var(--c-overdue); } .dashboard-kpi-warn .dashboard-kpi-icon { color: var(--c-overdue); opacity: 0.85; } .dashboard-section { margin-bottom: 22px; } .dashboard-section h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-muted); margin: 0 0 8px; } .dashboard-rows { display: flex; flex-direction: column; gap: 6px; } .dashboard-row { display: grid; grid-template-columns: 160px 1fr 60px; align-items: center; gap: 10px; font-size: 13px; } .dashboard-row-label { font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-row-bar { height: 8px; background: var(--c-bg); border-radius: var(--radius-full); overflow: hidden; } .dashboard-row-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover)); transition: width 280ms ease; } .dashboard-row-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-text-muted); font-size: 12px; } .dashboard-approval { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .dashboard-approval-cell { padding: 12px; border-radius: var(--radius-md); text-align: center; background: var(--c-bg); border: 1px solid var(--c-border); } .dashboard-approval-cell .ap-cell-value { font-size: 22px; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; } .dashboard-approval-cell .ap-cell-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; color: var(--c-text-muted); } .dashboard-approval-cell.ap-open { background: rgba(180, 91, 20, 0.08); } .dashboard-approval-cell.ap-executed { background: rgba(44, 95, 168, 0.10); } .dashboard-approval-cell.ap-verified { background: rgba(124, 58, 237, 0.10); } .dashboard-approval-cell.ap-approved { background: rgba(31, 122, 62, 0.10); } .dashboard-approval-cell.ap-open .ap-cell-value { color: var(--c-progress); } .dashboard-approval-cell.ap-executed .ap-cell-value { color: var(--c-planned); } .dashboard-approval-cell.ap-verified .ap-cell-value { color: var(--c-escalation); } .dashboard-approval-cell.ap-approved .ap-cell-value { color: var(--c-completed); } .dashboard-empty { padding: 14px 10px; font-size: 12px; color: var(--c-text-subtle); font-style: italic; text-align: center; } .dashboard-footer { padding-top: 8px; border-top: 1px solid var(--c-border); font-size: 11px; color: var(--c-text-muted); line-height: 1.5; text-align: center; } /* CAPA approval badges */ .badge-approval { font-weight: 700; } .badge-approval-open { background: rgba(180, 91, 20, 0.14); color: var(--c-progress); border-color: rgba(180, 91, 20, 0.30); } .badge-approval-executed { background: rgba(44, 95, 168, 0.14); color: var(--c-planned); border-color: rgba(44, 95, 168, 0.30); } .badge-approval-verified { background: rgba(124, 58, 237, 0.14); color: var(--c-escalation); border-color: rgba(124, 58, 237, 0.30); } .badge-approval-approved { background: rgba(31, 122, 62, 0.14); color: var(--c-completed); border-color: rgba(31, 122, 62, 0.30); } .badge-evidence-missing { background: var(--c-warning-bg); color: var(--c-warning); border-color: rgba(252, 211, 77, 0.40); font-weight: 700; } .capa-approval-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-border); } .capa-approval-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .capa-approval-summary { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--c-text-muted); } .capa-audit-line { line-height: 1.5; } .capa-audit-ts { color: var(--c-text-subtle); font-size: 11px; } .capa-approval-comment { margin-top: 8px; padding: 8px 10px; background: var(--c-bg); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5; } /* Actor form warning notice */ .actor-form-warning { margin: 10px 0 14px; padding: 8px 12px; background: var(--c-warning-bg); border: 1px solid rgba(252, 211, 77, 0.40); border-radius: var(--radius-sm); font-size: 11.5px; line-height: 1.4; color: var(--c-warning); } /* Dark-mode overrides */ .theme-dark .dashboard-kpi { background: var(--c-bg-elev); } .theme-dark .dashboard-approval-cell { background: var(--c-bg-elev); border-color: var(--c-border); } .theme-dark .notif-item { background: var(--c-bg-elev); } .theme-dark .notif-item:hover { background: var(--c-card); } .theme-dark .notif-footer { background: var(--c-bg-elev); } .theme-dark .toolbar-icon-badge { border-color: var(--c-card); } .theme-dark .actor-form-warning { background: rgba(252, 211, 77, 0.10); border-color: rgba(252, 211, 77, 0.30); color: var(--c-warning); } @media (max-width: 640px) { .dashboard-grid { grid-template-columns: 1fr 1fr; } .dashboard-approval { grid-template-columns: 1fr 1fr; } .dashboard-row { grid-template-columns: 100px 1fr 50px; } } /* Old print rules removed — centralised in the bottom @media print block. */ /* ===== Combobox (site picker in form — Linear/Slack style) ===== */ .combo-wrap { position: relative; width: 100%; } .combo-input { width: 100%; padding-right: 34px !important; /* room for the chevron toggle */ } .combo-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-xs); color: var(--c-text-muted); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .combo-toggle:hover { background: var(--c-bg); color: var(--c-text); } .combo-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .combo-toggle svg { width: 14px; height: 14px; } .combo-popover { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--c-card); border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 100; max-height: 260px; display: flex; flex-direction: column; overflow: hidden; animation: comboPopIn 130ms cubic-bezier(0.4, 0, 0.2, 1); } .combo-popover[hidden] { display: none; } @keyframes comboPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .combo-popover-list { flex: 1; overflow-y: auto; padding: 4px; scrollbar-width: thin; } .combo-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--c-text); transition: background var(--motion-fast); } .combo-option:hover, .combo-option.is-highlight { background: var(--c-accent-soft); } .combo-option.is-default { font-style: italic; color: var(--c-text-muted); } .combo-option-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combo-option-count { font-size: 11px; font-weight: 700; color: var(--c-text-muted); background: var(--c-bg); padding: 1px 8px; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; flex-shrink: 0; } .combo-empty { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--c-text-muted); font-style: italic; } .combo-popover-action { border-top: 1px solid var(--c-border); padding: 4px; background: var(--c-bg); } .combo-create-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-accent-hover); text-align: left; transition: background var(--motion-fast); } .combo-create-btn:hover { background: var(--c-accent-soft); } .combo-create-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .combo-create-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--c-accent); color: white; border-radius: var(--radius-xs); font-weight: 700; flex-shrink: 0; } .combo-create-prefix { color: var(--c-text-muted); font-weight: 500; } .combo-create-name { color: var(--c-accent-hover); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Dark mode for combobox */ .theme-dark .combo-popover { background: var(--c-card); border-color: var(--c-border-strong); } .theme-dark .combo-popover-action { background: var(--c-bg-elev); } .theme-dark .combo-toggle:hover { background: var(--c-bg-elev); } .theme-dark .combo-option-count { background: var(--c-bg-elev); } /* ===== Sidebar "+ Nieuwe werf" button (bottom of sites-list) ===== */ .sidebar-site-add { display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); margin: 6px; padding: 6px 10px; background: transparent; border: 1px dashed rgba(94, 234, 212, 0.35); border-radius: var(--radius-sm); color: rgba(94, 234, 212, 0.85); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); } .sidebar-site-add:hover { background: rgba(94, 234, 212, 0.10); border-color: rgba(94, 234, 212, 0.55); color: #5eead4; } .sidebar-site-add:focus-visible { outline: none; box-shadow: var(--focus-ring-light); } .sidebar-site-add-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: rgba(94, 234, 212, 0.18); border-radius: var(--radius-xs); font-weight: 700; font-size: 12px; flex-shrink: 0; } .sites-empty-hint { padding: 8px 12px; font-size: 11px; color: rgba(255,255,255,0.4); font-style: italic; text-align: center; } /* ===== Site & Shift — Slack-style filtering for multi-site / multi-shift HSE ===== */ /* Factory icon (replaces 🏗️ crane emoji) — inherits color via currentColor */ .site-icon { display: inline-block; vertical-align: -2px; flex-shrink: 0; fill: currentColor; } /* Size variants per usage context */ .task-site-chip .site-icon { width: 11px; height: 11px; margin-right: 1px; } .sidebar-section-sites .sidebar-section-label .site-icon { width: 13px; height: 13px; color: rgba(94, 234, 212, 0.85); } .qs-result-icon .site-icon { width: 16px; height: 16px; color: var(--c-text-muted); } .qs-result.is-selected .qs-result-icon .site-icon { color: var(--c-accent-hover); } /* Compact chips inline in task meta */ .task-meta-site { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .task-site-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--radius-full); background: var(--c-bg); border: 1px solid var(--c-border); font-size: 11px; font-weight: 600; color: var(--c-text-muted); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .task-site-chip.is-default { background: transparent; color: var(--c-text-subtle); font-style: italic; font-weight: 500; } .task-shift-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; text-transform: uppercase; } .task-shift-chip.shift-all { background: var(--c-bg); color: var(--c-text-subtle); border: 1px solid var(--c-border); } .task-shift-chip.shift-day { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .task-shift-chip.shift-night { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; } /* ===== Shift-segment (3-button toggle) in toolbar ===== */ .shift-segment { display: inline-flex; align-items: stretch; gap: 0; background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); overflow: hidden; height: 28px; flex-shrink: 0; } .shift-seg-btn { padding: 0 10px; background: transparent; border: none; font-size: 11.5px; font-weight: 600; color: var(--c-text-muted); cursor: pointer; letter-spacing: 0.01em; transition: background var(--motion-fast), color var(--motion-fast); border-right: 1px solid var(--c-border); } .shift-seg-btn:last-child { border-right: none; } .shift-seg-btn:hover { background: var(--c-card); color: var(--c-text); } .shift-seg-btn:focus-visible { outline: none; box-shadow: inset var(--focus-ring); } .shift-seg-btn.active { background: var(--c-card); color: var(--c-text); font-weight: 700; } .shift-seg-btn.shift-seg-day.active { background: #fef3c7; color: #92400e; } .shift-seg-btn.shift-seg-night.active { background: #ede9fe; color: #5b21b6; } /* ===== Sidebar SITES section ===== */ .sidebar-section-sites { flex: 0 0 auto; padding-bottom: 6px; border-bottom: 1px solid var(--sidebar-border); } .sidebar-section-sites .sidebar-section-label { display: flex; align-items: center; gap: 5px; color: rgba(94, 234, 212, 0.85); } .sites-list { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; max-height: 200px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .sites-list::-webkit-scrollbar { width: 3px; } .sites-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; } .site-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: transparent; border: none; border-radius: var(--radius-xs); color: var(--sidebar-text); font-size: 12.5px; font-weight: 500; text-align: left; width: 100%; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); position: relative; } .site-item:hover { background: var(--sidebar-hover-bg); color: white; } .site-item:focus-visible { outline: none; box-shadow: var(--focus-ring-light); } .site-item.active { background: var(--sidebar-active-bg); color: white; font-weight: 600; } .site-item.active::before { content: ''; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: #5eead4; box-shadow: 0 0 6px rgba(94,234,212,0.5); } .site-item-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(94, 234, 212, 0.6); flex-shrink: 0; } .site-item.active .site-item-dot { background: #5eead4; } .site-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-item-badge { min-width: 18px; height: 18px; padding: 0 5px; background: rgba(255,255,255,0.18); color: white; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-variant-numeric: tabular-nums; } .site-item.active .site-item-badge { background: rgba(255,255,255,0.30); } /* Dark-mode overrides for the new components */ .theme-dark .task-site-chip { background: var(--c-bg-elev); border-color: var(--c-border); color: var(--c-text-muted); } .theme-dark .task-shift-chip.shift-all { background: var(--c-bg-elev); border-color: var(--c-border); } .theme-dark .task-shift-chip.shift-day { background: rgba(252, 211, 77, 0.14); color: var(--c-warning); border-color: rgba(252, 211, 77, 0.30); } .theme-dark .task-shift-chip.shift-night { background: rgba(196, 181, 253, 0.14); color: var(--c-escalation); border-color: rgba(196, 181, 253, 0.30); } .theme-dark .shift-segment { background: var(--c-bg-elev); border-color: var(--c-border-strong); } .theme-dark .shift-seg-btn { border-right-color: var(--c-border); } .theme-dark .shift-seg-btn:hover { background: var(--c-card); } .theme-dark .shift-seg-btn.active { background: var(--c-card); } .theme-dark .shift-seg-btn.shift-seg-day.active { background: rgba(252, 211, 77, 0.14); color: var(--c-warning); } .theme-dark .shift-seg-btn.shift-seg-night.active { background: rgba(196, 181, 253, 0.14); color: var(--c-escalation); } /* Mobile: shrink shift-segment, hide site chip label, keep shift visible */ @media (max-width: 640px) { .shift-segment { height: 26px; } .shift-seg-btn { padding: 0 8px; font-size: 11px; } .task-site-chip { max-width: 90px; } } /* ===== Sidebar PINNED section ===== */ .sidebar-section-pinned { flex: 0 0 auto; padding-bottom: 6px; border-bottom: 1px solid var(--sidebar-border); } .sidebar-section-pinned .sidebar-section-label { display: flex; align-items: center; gap: 5px; color: rgba(94, 234, 212, 0.85); } .pinned-list { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; max-height: 180px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .pinned-list::-webkit-scrollbar { width: 3px; } .pinned-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; } .pinned-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: transparent; border: none; border-radius: var(--radius-xs); color: var(--sidebar-text); font-size: 12px; font-weight: 500; text-align: left; width: 100%; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .pinned-item:hover { background: var(--sidebar-hover-bg); color: white; } .pinned-item:focus-visible { outline: none; box-shadow: var(--focus-ring-light); } .pinned-item-icon { font-size: 10px; color: #fbbf24; flex-shrink: 0; } .pinned-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pinned-item-overdue .pinned-item-label { color: #fca5a5; } .pinned-item-done { opacity: 0.72; } .pinned-item-done .pinned-item-icon { color: var(--c-completed); } /* ===== Task card hover-actions (Slack message hover toolbar) ===== */ .task-hover-actions { position: absolute; top: -10px; right: 14px; display: flex; gap: 2px; padding: 2px; background: var(--c-card); border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(2px); transition: opacity var(--motion-fast), transform var(--motion-fast); z-index: 2; } .task-card:hover .task-hover-actions, .task-card:focus-within .task-hover-actions { opacity: 1; pointer-events: auto; transform: translateY(0); } .task-hover-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-xs); color: var(--c-text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .task-hover-btn:hover { background: var(--c-bg); color: var(--c-text); } .task-pin-btn { color: var(--c-text-subtle); } .task-pin-btn.is-pinned { color: #f59e0b; } .task-pin-btn:hover { color: #f59e0b; } /* ===== Pinned badge on task card itself ===== */ .badge-pinned { background: rgba(251, 191, 36, 0.16); color: #b45309; border-color: rgba(251, 191, 36, 0.35); font-size: 11px; } /* ===== Detail modal pin button ===== */ .detail-pin-btn .detail-pin-icon { color: var(--c-text-subtle); transition: color var(--motion-fast); } .detail-pin-btn.is-pinned .detail-pin-icon { color: #f59e0b; } .detail-pin-btn:hover .detail-pin-icon { color: #f59e0b; } /* ===== Dark mode overrides for the new components ===== */ .theme-dark .qs-content { background: var(--c-card); } .theme-dark .qs-input-wrap input { color: var(--c-text); } .theme-dark .qs-result.is-selected { background: var(--c-accent-soft); } .theme-dark .qs-result-icon { background: var(--c-bg-elev); } .theme-dark .qs-footer { background: var(--c-bg-elev); } .theme-dark .qs-input-esc { background: var(--c-bg-elev); } .theme-dark .compose-input { background: var(--c-card); border-color: var(--c-border-strong); } .theme-dark .compose-input:hover { background: var(--c-bg-elev); } .theme-dark .compose-hint kbd { background: var(--c-bg-elev); border-color: var(--c-border); } .theme-dark .task-hover-actions { background: var(--c-card); border-color: var(--c-border-strong); } .theme-dark .task-hover-btn:hover { background: var(--c-bg-elev); } .theme-dark .badge-pinned { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.28); } /* ===== Mobile adjustments ===== */ @media (max-width: 768px) { .quick-switcher-modal { padding-top: 12px; } .qs-content { max-width: 100%; } .qs-footer { display: none; } .compose-bar { padding: 10px 12px 14px; } .compose-input { padding: 9px 12px; font-size: 13px; } .compose-hint { display: none; } .compose-channel { display: none; } /* Hover actions: show always on mobile (no hover) */ .task-hover-actions { opacity: 1; pointer-events: auto; transform: none; position: static; box-shadow: none; border: none; background: transparent; padding: 0; } .task-hover-btn { width: 22px; height: 22px; font-size: 12px; } } /* ================================================================= DARK MODE — component-level color overrides ---------------------------------------------------------------- Targets `.theme-dark` set on by the inline FOUC script and by applyTheme(). Single source of truth — works for both manual data-theme="dark" and auto via prefers-color-scheme. ---------------------------------------------------------------- These overrides fix the ~70 hardcoded light pastels that don't adapt to dark backgrounds (badges, task-card states, src-pills, stat icons, form inputs, misc UI). ================================================================= */ /* ---------- Task card backgrounds for urgency states ---------- */ .theme-dark .task-card.overdue { background: linear-gradient(90deg, #2a1313 0%, var(--c-card) 30%); } .theme-dark .task-card.priority-kritiek { background: #2a1414; } .theme-dark .task-card.priority-kritiek .task-date { background: #3e1a1a; } .theme-dark .task-card.priority-kritiek .task-date-day { color: var(--c-overdue); } .theme-dark .task-card.due-today { background: #2a230d; } .theme-dark .task-card.due-today .task-date { background: #3a3017; } .theme-dark .task-card.due-today .task-date-day { color: var(--c-warning); } .theme-dark .task-card.wait_verification { background: #1f1733; } .theme-dark .task-card.completed { background: linear-gradient(90deg, var(--c-completed-bg) 0%, var(--c-card) 30%); } /* Completed check-mark chip in dark mode keeps a crisp white tick on green. */ .theme-dark .task-done-check { color: #0b1220; } /* ---------- Badges — all pastel pairs swapped for dark-mode variants ---------- */ .theme-dark .badge { background: rgba(255, 255, 255, 0.06); color: var(--c-text-muted); border-color: rgba(255, 255, 255, 0.08); } .theme-dark .badge-priority-kritiek { background: rgba(252, 165, 165, 0.14); color: var(--c-overdue); border-color: rgba(252, 165, 165, 0.25); } .theme-dark .badge-priority-hoog { background: rgba(253, 186, 116, 0.14); color: var(--c-progress); border-color: rgba(253, 186, 116, 0.25); } .theme-dark .badge-priority-normaal { background: rgba(255, 255, 255, 0.06); color: var(--c-text-muted); border-color: rgba(255, 255, 255, 0.10); } .theme-dark .badge-priority-laag { background: rgba(255, 255, 255, 0.05); color: var(--c-text-subtle); border-color: rgba(255, 255, 255, 0.08); } .theme-dark .badge-recurrence { background: rgba(255, 255, 255, 0.06); color: var(--c-text-muted); border-color: rgba(255, 255, 255, 0.10); } .theme-dark .badge-status-wait_verification { background: rgba(196, 181, 253, 0.14); color: var(--c-escalation); border-color: rgba(196, 181, 253, 0.25); } .theme-dark .badge-escalation { background: rgba(196, 181, 253, 0.14); color: var(--c-escalation); border-color: rgba(196, 181, 253, 0.28); } .theme-dark .badge-capa { background: rgba(110, 231, 183, 0.14); color: var(--c-completed); border-color: rgba(110, 231, 183, 0.25); } /* CAPA closure dot colors */ .theme-dark .badge-capa-status { background: var(--c-progress); } .theme-dark .badge-capa-status-verified { background: var(--c-escalation); } .theme-dark .badge-capa-status-closed { background: var(--c-completed); } /* CAPA closure badges */ .theme-dark .badge-closure-open { background: rgba(253, 186, 116, 0.14); color: var(--c-progress); border-color: rgba(253, 186, 116, 0.25); } .theme-dark .badge-closure-verified { background: rgba(196, 181, 253, 0.14); color: var(--c-escalation); border-color: rgba(196, 181, 253, 0.25); } .theme-dark .badge-closure-closed { background: rgba(110, 231, 183, 0.14); color: var(--c-completed); border-color: rgba(110, 231, 183, 0.25); } /* Severity + effectiveness badges (dark) */ .theme-dark .badge-severity-near_miss, .theme-dark .badge-eff-pending { background: rgba(147, 178, 235, 0.14); color: #9db8ec; border-color: rgba(147, 178, 235, 0.25); } .theme-dark .badge-severity-first_aid { background: rgba(234, 205, 120, 0.14); color: #e0c878; border-color: rgba(234, 205, 120, 0.25); } .theme-dark .badge-severity-medical { background: rgba(253, 186, 116, 0.14); color: var(--c-progress); border-color: rgba(253, 186, 116, 0.25); } .theme-dark .badge-severity-lost_time { background: rgba(240, 150, 120, 0.14); color: #ef9b7c; border-color: rgba(240, 150, 120, 0.25); } .theme-dark .badge-severity-serious, .theme-dark .badge-eff-not_effective { background: rgba(248, 150, 150, 0.14); color: #f08a8a; border-color: rgba(248, 150, 150, 0.25); } .theme-dark .badge-eff-effective { background: rgba(110, 231, 183, 0.14); color: var(--c-completed); border-color: rgba(110, 231, 183, 0.25); } /* ---- Dark mode: surfaces that still carried hardcoded light fills ---- */ .theme-dark .detail-item, .theme-dark .task-meta-item.src-meta, .theme-dark .form-translatable, .theme-dark .detail-loading, .theme-dark .detail-other-langs { background: var(--c-bg-elev); } .theme-dark .detail-capa-section.capa-filled { background: var(--c-bg-elev); border-color: var(--c-escalation); } .theme-dark .period-btn { background: var(--c-card); color: var(--c-text-muted); } .theme-dark .wf-stage-intake, .theme-dark .wf-stage-triage { background: var(--c-bg-elev); color: var(--c-text-muted); } .theme-dark .wf-stage-verification { background: var(--c-escalation-bg); color: var(--c-escalation); } .theme-dark mark.search-hl { color: #1f2937; } .theme-dark .detail-fallback { border-color: rgba(253, 186, 116, 0.30); } /* Brand header keeps a deep, readable navy in dark mode (instead of the light-blue that --c-primary becomes for text use). */ .theme-dark .app-header { background: linear-gradient(135deg, #16263f 0%, #21385c 100%); } /* CAPA closure mismatch warning */ .theme-dark .capa-closure-warning { background: rgba(252, 211, 77, 0.10); color: var(--c-warning); border-color: rgba(252, 211, 77, 0.30); } .theme-dark .badge-capa-warning { background: rgba(252, 211, 77, 0.14); color: var(--c-warning); border-color: rgba(252, 211, 77, 0.30); } /* ---------- Urgency mini-badges on task cards ---------- */ .theme-dark .overdue-aging { background: rgba(252, 165, 165, 0.12); color: var(--c-overdue); border-color: rgba(252, 165, 165, 0.25); } .theme-dark .due-today-badge { background: rgba(252, 211, 77, 0.12); color: var(--c-warning); border-color: rgba(252, 211, 77, 0.25); } .theme-dark .due-soon-badge { background: rgba(252, 211, 77, 0.10); color: var(--c-warning); border-color: rgba(252, 211, 77, 0.22); } /* ---------- Src pills (translation source markers) ---------- */ .theme-dark .src-pill { background: rgba(255, 255, 255, 0.06); color: var(--c-text-muted); border-color: rgba(255, 255, 255, 0.10); } .theme-dark .src-pill.src-human { background: rgba(110, 231, 183, 0.12); color: var(--c-completed); border-color: rgba(110, 231, 183, 0.22); } .theme-dark .src-pill.src-lexicon { background: rgba(147, 197, 253, 0.12); color: var(--c-planned); border-color: rgba(147, 197, 253, 0.22); } .theme-dark .src-pill.src-api { background: rgba(94, 234, 212, 0.12); color: var(--c-accent-hover); border-color: rgba(94, 234, 212, 0.22); } .theme-dark .src-pill.src-missing { background: rgba(252, 165, 165, 0.10); color: var(--c-overdue); border-color: rgba(252, 165, 165, 0.20); } /* ---------- Stat-card icons (legacy dashboard) ---------- */ .theme-dark .stat-icon { background: rgba(255, 255, 255, 0.06); } .theme-dark .stat-todo .stat-icon { background: rgba(147, 197, 253, 0.12); } .theme-dark .stat-week .stat-icon { background: rgba(94, 234, 212, 0.12); } .theme-dark .stat-overdue .stat-icon { background: rgba(252, 165, 165, 0.12); } .theme-dark .stat-today .stat-icon { background: rgba(252, 211, 77, 0.12); } .theme-dark .stat-done .stat-icon { background: rgba(110, 231, 183, 0.12); } .theme-dark .stat-escalation .stat-icon { background: rgba(196, 181, 253, 0.12); } .theme-dark .stat-escalation .stat-value { color: var(--c-escalation); } /* ---------- Form inputs / selects / textareas ---------- NB: use `background-color`, NOT shorthand `background:` — the shorthand would reset background-image (chevron) and background-repeat (no-repeat) on selects, causing the arrow to tile across the element. */ .theme-dark .filter-group input, .theme-dark .filter-group select, .theme-dark .form-source-lang select, .theme-dark input[type="text"], .theme-dark input[type="url"], .theme-dark input[type="email"], .theme-dark input[type="date"], .theme-dark input[type="time"], .theme-dark input[type="search"], .theme-dark input[type="tel"], .theme-dark input[type="number"], .theme-dark select, .theme-dark textarea { background-color: var(--c-bg-elev); color: var(--c-text); border-color: var(--c-border-strong); } .theme-dark .feed-filter-select option, .theme-dark .form-source-lang select option, .theme-dark .settings-row select option, .theme-dark select option { background: var(--c-card); color: var(--c-text); } /* form-lang-tab in dark mode */ .theme-dark .form-lang-tab { background: var(--c-bg-elev); color: var(--c-text-muted); border-color: var(--c-border); } .theme-dark .form-lang-tab:hover { color: var(--c-text); } .theme-dark .form-lang-tab.active { background: var(--c-card); color: var(--c-text); border-color: var(--c-border-strong); } /* ---------- Sundry button / hover backgrounds ---------- */ .theme-dark .modal-close:hover { background: var(--c-bg-elev); } .theme-dark .btn-ghost:hover { background: var(--c-bg-elev); } .theme-dark .btn-my-tasks { background: var(--c-primary-soft); color: var(--c-primary); } .theme-dark .btn-my-tasks:hover { background: #243556; } .theme-dark .btn-secondary { background: var(--c-card); color: var(--c-primary); } .theme-dark .btn-secondary:hover { background: var(--c-primary-soft); border-color: var(--c-primary); } .theme-dark .btn-danger { background: var(--c-card); } /* ---------- Sub-filter chevron icons (selects) — light arrow on dark bg ---------- Defensive: explicitly re-declare repeat/position/size so any future background shorthand earlier in the cascade can't break the icon. */ .theme-dark .feed-filter-select, .theme-dark .settings-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; } .theme-dark .feed-search-wrap::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } /* Also defensive for the sidebar-lang select in dark mode */ .theme-dark .sidebar-lang select { background-repeat: no-repeat; background-position: right 2px center; background-size: 10px; } /* ---------- Day headers (sticky scrolled-bg color-mix already adapts via vars) ---------- */ .theme-dark .day-header-overdue { background: rgba(252, 165, 165, 0.10); color: var(--c-overdue); border-color: rgba(252, 165, 165, 0.25); } .theme-dark .day-header-overdue .day-header-label { color: var(--c-overdue); } .theme-dark .day-header-today { background: rgba(45, 212, 191, 0.10); } .theme-dark .day-header-today .day-header-rel { color: var(--c-accent-hover); } .theme-dark .day-header-escal { background: rgba(196, 181, 253, 0.12); color: var(--c-escalation); border-color: rgba(196, 181, 253, 0.28); } .theme-dark .day-header-count { background: var(--c-bg-elev); color: var(--c-text-muted); border-color: var(--c-border); } /* ---------- Detail-modal escalation reason ---------- */ .theme-dark .detail-escalation-reason { background: rgba(196, 181, 253, 0.10); color: var(--c-escalation); border-color: rgba(196, 181, 253, 0.28); } /* ---------- Settings storage bar ---------- */ .theme-dark .settings-storage-bar { background: var(--c-bg-elev); border-color: var(--c-border); } /* ---------- Status toggle button when completed (filled green) ---------- */ .theme-dark .status-toggle-completed { background: rgba(110, 231, 183, 0.18); } .theme-dark .status-toggle-completed:hover { background: var(--c-completed); color: var(--c-bg); } /* ---------- Toolbar overflow menu ---------- */ .theme-dark .toolbar-menu-pop { background: var(--c-card); border-color: var(--c-border-strong); } .theme-dark .toolbar-menu-pop button[role="menuitem"]:hover { background: var(--c-bg-elev); } /* ---------- Onboarding empty state — keep contrast ---------- */ .theme-dark .no-tasks-onboarding { border-color: var(--c-border); } /* ---------- Hamburger / icon buttons in toolbar ---------- */ .theme-dark .hamburger-btn:hover { background: var(--c-primary-soft); color: var(--c-primary); } /* ---------- kbd elements in shortcuts modal ---------- */ .theme-dark kbd { background: var(--c-bg-elev); border-color: var(--c-border-strong); color: var(--c-text); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); } /* ---------- Activity-log row dividers ---------- */ .theme-dark .activity-entry { border-color: var(--c-border); } /* ---------- Modal footer sticky background ---------- */ .theme-dark .modal-footer { background: var(--c-card); border-color: var(--c-border); } /* ---------- Form language tabs — fix the white border-bottom-color leak ---------- */ .theme-dark .form-lang-tab:hover { background: var(--c-bg-elev); } .theme-dark .form-lang-tab.active { background: var(--c-card); border-bottom-color: var(--c-card); color: var(--c-text); border-color: var(--c-primary); box-shadow: 0 -2px 0 var(--c-primary) inset; } /* ---------- Toggle-original button (detail modal) ---------- */ .theme-dark .toggle-original { background: var(--c-bg-elev); border-color: var(--c-border-strong); color: var(--c-primary); } .theme-dark .toggle-original:hover { background: var(--c-primary); color: var(--c-card); border-color: var(--c-primary); } /* ---------- Detail modal misc backgrounds ---------- */ .theme-dark .detail-source-bar { background: var(--c-bg-elev); border-color: var(--c-border); } .theme-dark .original-banner { background: rgba(45, 212, 191, 0.10); color: var(--c-accent-hover); border-color: rgba(45, 212, 191, 0.25); } .theme-dark .detail-notes.empty { color: var(--c-text-subtle); } .theme-dark .detail-link { background: var(--c-bg-elev); border-color: var(--c-border); color: var(--c-accent-hover); } .theme-dark .detail-link:hover { background: var(--c-primary-soft); } /* ---------- Activity log empty state + entries ---------- */ .theme-dark .activity-empty { color: var(--c-text-subtle); } .theme-dark .activity-comment-form textarea { background: var(--c-bg-elev); border-color: var(--c-border-strong); color: var(--c-text); } /* ---------- My-tasks bar (legend) ---------- */ .theme-dark .my-tasks-bar { background: var(--c-bg-elev); border-color: var(--c-border); } .theme-dark .my-tasks-bar-title { color: var(--c-text); } /* ---------- Form CAPA section ---------- */ .theme-dark .form-capa-section { border-color: var(--c-border); } .theme-dark .form-capa-summary { background: var(--c-bg-elev); color: var(--c-text); } .theme-dark .detail-capa-section { border-color: var(--c-border); } .theme-dark .detail-capa-section .capa-summary { background: var(--c-bg-elev); color: var(--c-text); } /* ---------- Spinner (auto-translating) ---------- */ .theme-dark .spinner-inline { border-color: rgba(255,255,255,0.2); border-top-color: var(--c-accent); } /* ---------- Toast-undo button (it stayed too bright) ---------- */ .theme-dark .toast-undo-btn { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); color: white; } .theme-dark .toast-undo-btn:hover { background: rgba(255,255,255,0.30); } /* ===================================================================== SITE DETAIL + MEMBERS — werfbeheer modal + sidebar manage button ===================================================================== */ /* Sidebar: row container holding the filter button + a manage button */ .site-item-row { display: flex; align-items: stretch; gap: 2px; position: relative; } .site-item-filter { flex: 1; } .site-item-manage { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 0 6px; background: transparent; border: none; border-radius: var(--radius-xs); color: rgba(94, 234, 212, 0.85); font-size: 12px; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .site-item-manage:hover { background: var(--sidebar-hover-bg); color: white; } .site-item-manage:focus-visible { outline: none; box-shadow: var(--focus-ring-light); } .site-item-member-count { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } .site-item-badge-kritiek { background: rgba(220, 80, 60, 0.7); color: white; } /* Site detail modal */ .site-detail-content { max-width: 640px; } .site-detail-tabs { display: flex; gap: 0; padding: 0 18px; border-bottom: 1px solid var(--c-border); background: var(--c-card); } .site-detail-tab { background: transparent; border: none; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--c-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--motion-fast), border-color var(--motion-fast); } .site-detail-tab:hover { color: var(--c-text); } .site-detail-tab.is-active { color: var(--c-accent-hover); border-bottom-color: var(--c-accent); } .site-detail-tab:focus-visible { outline: none; box-shadow: inset var(--focus-ring); } .site-detail-pane { padding: 16px 18px 12px; } .site-detail-pane[hidden] { display: none !important; } .site-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .site-stat { padding: 10px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); text-align: left; } .site-stat-value { font-size: 20px; font-weight: 700; color: var(--c-text); line-height: 1.1; font-variant-numeric: tabular-nums; } .site-stat-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-muted); margin-top: 2px; } .site-stat-warn .site-stat-value { color: var(--c-overdue); } .site-overview-form { display: flex; flex-direction: column; gap: 12px; } .site-overview-form input[type="text"] { width: 100%; padding: 9px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); font-size: 13.5px; background: var(--c-card); } .site-overview-form input[type="text"]:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); } .site-detail-actions { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; } .site-detail-permission-note { margin: 6px 18px 14px; padding: 8px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--c-text-muted); font-style: italic; } /* Members tab */ .site-members-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); } .site-members-count { font-size: 12px; font-weight: 600; color: var(--c-text-muted); font-variant-numeric: tabular-nums; } .site-members-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; } .site-members-empty { padding: 28px 12px; text-align: center; color: var(--c-text-subtle); font-style: italic; font-size: 12.5px; } .member-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .member-row.is-inactive { opacity: 0.55; background: transparent; border-style: dashed; } .member-row-main { flex: 1; min-width: 0; } .member-row-name { font-size: 13.5px; font-weight: 700; color: var(--c-text); display: flex; align-items: center; gap: 6px; } .member-row-inactive-pill { font-size: 10px; font-weight: 700; padding: 1px 6px; background: var(--c-bg-elev); color: var(--c-text-muted); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.04em; } .member-row-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--c-text-muted); margin-top: 3px; } .member-row-role { font-weight: 600; color: var(--c-text); } .member-row-team { background: var(--c-bg-elev); padding: 1px 7px; border-radius: var(--radius-full); } .member-row-shift { padding: 1px 7px; border-radius: var(--radius-full); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.02em; } .member-row-shift.shift-all { background: var(--c-bg-elev); color: var(--c-text-subtle); } .member-row-shift.shift-day { background: #fef3c7; color: #92400e; } .member-row-shift.shift-night { background: #ede9fe; color: #5b21b6; } .member-row-contact { font-size: 11px; color: var(--c-text-subtle); } .member-row-actions { display: flex; gap: 2px; flex-shrink: 0; } .member-row-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-xs); color: var(--c-text-muted); font-size: 13px; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .member-row-btn:hover { background: var(--c-card); color: var(--c-text); } .member-row-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .member-row-btn-danger:hover { background: var(--c-overdue-bg); color: var(--c-overdue); } /* Member edit form: checkbox row */ .checkbox-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--c-text); cursor: pointer; } .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-accent); cursor: pointer; } /* Dark-mode overrides */ .theme-dark .site-detail-tabs { background: var(--c-card); } .theme-dark .site-stat { background: var(--c-bg-elev); } .theme-dark .member-row { background: var(--c-bg-elev); } .theme-dark .member-row.is-inactive { background: transparent; } .theme-dark .member-row-team { background: var(--c-bg); } .theme-dark .member-row-shift.shift-day { background: rgba(252, 211, 77, 0.14); color: var(--c-warning); } .theme-dark .member-row-shift.shift-night { background: rgba(196, 181, 253, 0.14); color: var(--c-escalation); } .theme-dark .site-overview-form input[type="text"] { background: var(--c-bg-elev); color: var(--c-text); } .theme-dark .site-detail-permission-note { background: var(--c-bg-elev); } /* Mobile */ @media (max-width: 640px) { .site-detail-stats { grid-template-columns: 1fr 1fr; } .site-detail-actions { flex-direction: column-reverse; } .member-row { flex-direction: column; align-items: stretch; } .member-row-actions { justify-content: flex-end; } } /* ===================================================================== PRINT / PDF — single consolidated @media print block. Mode-aware via html[data-print-mode="X"] set right before window.print() and removed in afterprint. This replaces the four legacy print blocks that used `body * { visibility: hidden }` (which conflicted with each other in unpredictable ways). Modes: "detail" → single task detail report "dashboard" → management KPI dashboard "capa" → CAPA approval-status overview "list" → currently filtered task list (default) ===================================================================== */ @page { size: A4; margin: 18mm 16mm 22mm 16mm; } @media print { :root { /* Force light palette regardless of dark-mode setting */ color-scheme: light; } html, body { background: white !important; color: black !important; font-size: 11pt; } body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Hide all interactive / chrome elements globally — pages re-show what they need. */ .sidebar, .sidebar-overlay, .feed-toolbar, .stats-strip, .feed-filters, .compose-bar, .toast-container, .my-tasks-bar, .modal-header button, .modal-close, .detail-actions, .detail-print-btn, .detail-source-bar-actions, .detail-activity .activity-comment-form, #detail-add-comment, .detail-other-langs, .dashboard-header-actions, .app-footer, .task-hover-actions, .status-toggle-btn, .toolbar-menu-pop, .qs-modal, .actor-modal, .site-add-modal, .shortcuts-modal, .settings-modal, .notif-modal { display: none !important; } /* Layout reset — single column, no shadows, hairline borders */ .app-shell { display: block !important; } .main-panel { width: 100% !important; max-width: 100% !important; } .feed-main { padding: 0 !important; max-width: 100% !important; } .modal-content { box-shadow: none !important; max-height: none !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; } /* Page-break protection */ .task-card, .detail-section, .detail-grid, .detail-capa-section, .detail-activity, .dashboard-kpi, .dashboard-section, .capa-print-row, .day-group { page-break-inside: avoid; break-inside: avoid; } h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; } /* Branded header inserted by JS as .print-header */ .print-header { display: block !important; border-bottom: 2px solid #0ea79b; padding-bottom: 8px; margin-bottom: 14px; page-break-after: avoid; } .print-header-title { font-size: 16pt; font-weight: 700; color: #0f172a; margin: 0 0 2px; } .print-header-meta { font-size: 9pt; color: #475569; display: flex; flex-wrap: wrap; gap: 6px 14px; } .print-header-meta strong { color: #0f172a; font-weight: 600; } /* Footer with VELD watermark on every page via running element */ .print-footer { display: block !important; text-align: center; font-size: 8pt; color: #64748b; letter-spacing: 0.1em; text-transform: uppercase; border-top: 1px solid #e2e8f0; padding-top: 6px; margin-top: 18px; } /* ---------- LIST mode (default) ---------- */ /* Task list visible; cards print as compact rows */ .task-list { gap: 4px; } .task-card { grid-template-columns: 54px 1fr auto !important; padding: 8px 10px !important; box-shadow: none !important; border: 1px solid #cbd5e1 !important; border-left: 3px solid #94a3b8 !important; background: white !important; color: black !important; page-break-inside: avoid; } .task-card .task-meta-value { color: #334155 !important; } .task-card .task-title { color: #0f172a !important; } .task-card .notes-preview { display: none; } .task-card .badge { background: transparent !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; } /* Attachments: blob thumbnails don't print reliably — show the file name+size as a clean text list so an audit PDF always states the evidence files. */ .detail-attach-thumb, .detail-attach-dl { display: none !important; } .detail-attach-grid { display: block !important; } .detail-attach-item { display: block !important; border: none !important; padding: 2px 0 !important; } .detail-attach-item::before { content: "• "; } .detail-attach-name { font-weight: 600 !important; } .day-header { background: transparent !important; border: none !important; border-bottom: 1px solid #cbd5e1 !important; border-radius: 0 !important; box-shadow: none !important; color: #0f172a !important; position: static !important; } /* ---------- DETAIL mode ---------- */ html[data-print-mode="detail"] body > *:not(#detail-modal) { display: none !important; } html[data-print-mode="detail"] #detail-modal { display: block !important; position: static !important; background: white !important; box-shadow: none !important; border: none !important; padding: 0 !important; width: 100% !important; } html[data-print-mode="detail"] #detail-modal .modal-content { transform: none !important; background: white !important; } html[data-print-mode="detail"] .modal-header h2 { font-size: 18pt !important; color: #0f172a !important; } html[data-print-mode="detail"] .modal-header { background: white !important; border-bottom: 2px solid #0ea79b !important; } /* ---------- DASHBOARD mode ---------- */ html[data-print-mode="dashboard"] body > *:not(#dashboard-modal) { display: none !important; } html[data-print-mode="dashboard"] #dashboard-modal { display: block !important; position: static !important; background: white !important; box-shadow: none !important; border: none !important; padding: 0 !important; width: 100% !important; } html[data-print-mode="dashboard"] .dashboard-kpi { background: white !important; border: 1px solid #cbd5e1 !important; } html[data-print-mode="dashboard"] .dashboard-kpi-icon { display: none !important; } html[data-print-mode="dashboard"] .dashboard-kpi-value { color: #0f172a !important; } html[data-print-mode="dashboard"] .dashboard-kpi-warn .dashboard-kpi-value { color: #991b1b !important; } html[data-print-mode="dashboard"] .dashboard-row-bar { background: #e5e7eb !important; } html[data-print-mode="dashboard"] .dashboard-row-fill { background: #475569 !important; } html[data-print-mode="dashboard"] .dashboard-approval-cell { background: white !important; border: 1px solid #cbd5e1 !important; } /* ---------- CAPA overview mode ---------- */ html[data-print-mode="capa"] body > *:not(#capa-print-container) { display: none !important; } #capa-print-container { display: block !important; padding: 0; } .capa-print-row { border: 1px solid #cbd5e1; border-left: 3px solid #0ea79b; padding: 10px 12px; margin-bottom: 8px; background: white; } .capa-print-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; margin-bottom: 6px; } .capa-print-row-title { font-size: 12pt; font-weight: 700; color: #0f172a; flex: 1; } .capa-print-row-meta { font-size: 9pt; color: #475569; } .capa-print-row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 10pt; } .capa-print-field { line-height: 1.4; } .capa-print-field-label { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 2px; } .capa-print-field-value { color: #0f172a; } .capa-print-row-status { display: inline-block; padding: 1px 7px; border: 1px solid #94a3b8; border-radius: 4px; font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; } .capa-print-row-evidence-missing { color: #92400e; font-weight: 700; } /* Default print: show header + list */ .print-only { display: block !important; } } /* Hide print-only elements on screen */ .print-only, .print-header, .print-footer, #capa-print-container { display: none; }