/* Proficiency Manager — pm.css Baut auf dem zentralen Design-System auf (capita-ui.css, v1). Hier steht nur Tool-Spezifisches: 1. Grundmuster der AWS-Apps-Tools (wie im User Manager): Seitenkopf, Werkzeugleiste, Pillen, Listen, Karten, Hinweise, Speicherleiste, Drawer, Auswahllisten, Tabellen, Suche oben, Dialoge 2. Level-Rampe, Matrix, Level-Fenster und Combo 3. Rahmen: Seitenleiste, Kopfleiste, Anmeldung, Matrix-Werkzeuge und Detailbereich, Dialog-Inhalte, gemeinsame Tabellen-Zustände, Ebenen (z-index), Fokus, Bewegung, die optionalen Sprachfarben und die Bereiche (Wahl oben, Menü, Zeile unter dem Titel, Pille, Vorschlag) 4. Ansichten: je Ansicht ein Abschnitt (nur Regeln dieser Ansicht; Klassen aus 1–3 nicht neu definieren). Alle Farben aus Tokens des Design-Systems. Feste Farben nur: Speicherleiste, die fünf Avatar-Töne, die Level-Rampe und die Sprachfarben (je hell und dunkel). Bereiche haben bewusst keine eigenen Farben. Ebenen: Kopfleiste 20 · Auswahl-Leiste der Bereiche 30 · Speicherleiste 40 · Level-Fenster, Suche, Combo, Menü 45 · Drawer 70/71 · Dialog 80 · Toast 90. */ /* ===================================================================== 1. Grundmuster der AWS-Apps-Tools ===================================================================== */ .pm-center{min-height:100vh; display:grid; place-items:center; padding:24px;} .pm-auth-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:32px 34px; width:min(400px,92vw); display:flex; flex-direction:column; gap:14px; text-align:center;} .pm-auth-title{font-size:21px; font-weight:800; letter-spacing:-.01em;} .pm-auth-card p{color:var(--muted);} .ic{width:18px; height:18px; flex:none;} button{font-family:inherit;} /* ---------- Kopf einer Seite ---------- */ .pm-back{display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; font-weight:600; margin-bottom:12px; padding:2px 0;} .pm-back .ic{width:16px; height:16px;} .pm-back:hover{color:var(--ink); text-decoration:none;} .pm-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px;} .pm-head h1{font-size:26px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:12px;} .pm-head .sub{color:var(--muted); font-size:14px; margin-top:5px; max-width:720px;} .pm-head .acts{display:flex; gap:10px; align-items:center;} .pm-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px;} /* ---------- Werkzeugleiste ---------- */ .pm-tools{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap;} .pm-find{position:relative; width:320px;} .pm-find input{width:100%; padding:9px 12px 9px 34px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px;} .pm-find input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);} .pm-find .ic{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted);} .pm-filters{display:flex; gap:6px; flex-wrap:wrap;} .pm-filters .cui-chip{padding:6px 12px;} .pm-filters .cui-chip .n{color:var(--muted); font-weight:600; margin-left:2px;} /* ---------- Pillen / Kennzeichen ---------- */ .pm-pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--ink-2); font-size:12px; font-weight:600; white-space:nowrap; line-height:1.5;} .pm-pill .ic{width:13px; height:13px;} .pm-pill.ok{background:var(--ok-bg); color:var(--ok-ink);} .pm-pill.warn{background:var(--warn-bg); color:var(--warn-ink);} .pm-pill.bad{background:var(--bad-bg); color:var(--bad-ink);} .pm-pill.info{background:var(--info-bg); color:var(--info-ink);} .pm-pill.accent{background:var(--accent-soft); color:var(--accent-dark);} :root[data-theme="dark"] .pm-pill.accent{color:var(--accent);} .pm-pill.line{background:transparent; border:1px solid var(--border);} .pm-tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); vertical-align:middle;} .pm-tag.new{background:var(--ok-bg); color:var(--ok-ink);} .pm-tag.gone{background:var(--bad-bg); color:var(--bad-ink);} .pm-tag.chg{background:var(--info-bg); color:var(--info-ink);} /* ---------- Zeichen: Personen, Gruppen, Apps ---------- */ .pm-av{width:32px; height:32px; border-radius:50%; display:inline-grid; place-items:center; font-size:11.5px; font-weight:700; letter-spacing:.02em; flex:none; user-select:none;} .pm-av.sm{width:26px; height:26px; font-size:10px; box-shadow:0 0 0 2px var(--surface);} .pm-av.lg{width:58px; height:58px; font-size:19px;} .pm-av-0{background:#e4ece6; color:#1e4a3c;} .pm-av-1{background:#e8e6f1; color:#3d3768;} .pm-av-2{background:#f1e9df; color:#6a4a22;} .pm-av-3{background:#e2ebf2; color:#244b66;} .pm-av-4{background:#eeeae4; color:#4f4a40;} :root[data-theme="dark"] .pm-av-0{background:#1d2c26; color:#9fd6bd;} :root[data-theme="dark"] .pm-av-1{background:#23213a; color:#bdb6ee;} :root[data-theme="dark"] .pm-av-2{background:#2e251a; color:#e8c79c;} :root[data-theme="dark"] .pm-av-3{background:#1a2834; color:#9fc4e3;} :root[data-theme="dark"] .pm-av-4{background:#26241f; color:#d3cbbb;} .pm-clip{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;} .pm-gm{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:14px; background:var(--surface-3); color:var(--ink-2); flex:none; letter-spacing:-.01em;} .pm-gm .ic{width:19px; height:19px;} .pm-gm.lg{width:52px; height:52px; border-radius:15px; font-size:18px;} .pm-gm.lg .ic{width:24px; height:24px;} .pm-ai{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-dark); flex:none;} :root[data-theme="dark"] .pm-ai{color:var(--accent);} .pm-ai .ic{width:18px; height:18px;} .pm-ai.sm{width:26px; height:26px; border-radius:8px;} .pm-ai.sm .ic{width:14px; height:14px;} /* ---------- Zeilenliste ---------- */ .pm-list{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;} .pm-list-h{display:grid; gap:18px; padding:11px 22px; background:var(--surface-2); border-bottom:1px solid var(--border); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700;} .pm-row{display:grid; gap:18px; align-items:center; padding:15px 22px; border-bottom:1px solid var(--line); cursor:pointer; transition:background var(--dur) var(--ease); color:inherit;} .pm-row:hover{background:var(--hover); text-decoration:none;} .pm-row:last-child{border-bottom:none;} .pm-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;} .pm-row .chev{color:var(--faint); justify-self:end;} .pm-row .chev .ic{width:16px; height:16px;} .pm-cell{display:flex; align-items:center; gap:12px; min-width:0;} .pm-cell > div{min-width:0;} .pm-t{font-weight:700; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .pm-s{color:var(--muted); font-size:12.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .pm-sm{font-size:13px; color:var(--ink-2);} .pm-mut{color:var(--muted);} /* ---------- Karten ---------- */ .pm-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);} .pm-card-h{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 22px 6px;} .pm-card-h h2{font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; letter-spacing:-.005em;} .pm-card-h h2 .n{color:var(--muted); font-weight:600;} .pm-card-h .hint{color:var(--muted); font-size:12.5px; margin-top:3px;} .pm-card-b{padding:8px 22px 18px;} .pm-detail{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr); gap:20px; align-items:start;} .pm-col{display:flex; flex-direction:column; gap:20px; min-width:0;} /* ---------- Umschalter (Segment) ---------- */ .pm-seg{display:inline-flex; padding:3px; border-radius:11px; background:var(--surface-3); border:1px solid var(--border); gap:2px; flex-wrap:wrap;} .pm-seg button{border:0; background:transparent; padding:6px 12px; border-radius:8px; font-size:12.8px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); white-space:nowrap;} .pm-seg button:hover:not(:disabled):not(.on){background:var(--surface); color:var(--ink);} .pm-seg button.on{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm);} .pm-seg button:disabled{opacity:.42; cursor:not-allowed;} .pm-seg.sm button{padding:4px 10px; font-size:12px;} /* ---------- Hinweise ---------- */ .pm-note{display:flex; gap:10px; padding:11px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); font-size:12.8px; line-height:1.45;} .pm-note .ic{width:16px; height:16px; margin-top:1px; color:var(--muted);} .pm-note.warn{background:var(--warn-bg); border-color:transparent; color:var(--warn-ink);} .pm-note.warn .ic{color:var(--warn);} .pm-note.info{background:var(--info-bg); border-color:transparent; color:var(--info-ink);} .pm-note.info .ic{color:var(--info);} .pm-empty{padding:22px 4px; color:var(--muted); font-size:13px; display:flex; align-items:center; gap:10px;} .pm-empty .ic{color:var(--faint);} .pm-empty-big{padding:46px 20px; text-align:center; color:var(--muted);} .pm-empty-big .ic{width:30px; height:30px; color:var(--faint); margin-bottom:10px;} /* Kopf einer Detailseite */ .pm-hero{display:flex; gap:16px; align-items:center;} .pm-hero h1{font-size:26px;} /* ---------- Speicherleiste ---------- */ .pm-savebar{position:fixed; left:240px; right:0; bottom:20px; display:flex; justify-content:center; pointer-events:none; z-index:40; padding:0 24px;} .pm-savebar-in{pointer-events:auto; display:flex; align-items:center; gap:14px; width:min(920px,100%); background:#07433b; color:#e6f1ea; border-radius:16px; padding:11px 12px 11px 20px; box-shadow:0 18px 44px -14px rgba(7,40,34,.55), 0 2px 8px rgba(0,0,0,.12); animation:pm-up .22s var(--ease);} .pm-savebar .sum{flex:1; min-width:0; font-size:13.4px;} .pm-savebar .sum b{color:#fff;} .pm-savebar .sum .list{color:#bcd6c9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-size:12.5px; margin-top:1px;} .pm-savebar .sv{background:#c9ff65; color:#09090b; border:0;} .pm-savebar .sv:hover{background:#b8f04e;} .pm-savebar .dis{background:transparent; color:#cfe3d8; border:1px solid rgba(255,255,255,.18);} .pm-savebar .dis:hover{background:rgba(255,255,255,.08); color:#fff;} .pm-savebar .cui-btn:disabled{opacity:.6;} @keyframes pm-up{from{transform:translateY(14px); opacity:0;}to{transform:none; opacity:1;}} .pm-pad-bottom{height:96px;} /* ---------- Seitenleiste von rechts (Drawer) ---------- */ .pm-drawer-back{position:fixed; inset:0; background:rgba(9,9,11,.34); opacity:0; transition:opacity .2s var(--ease); z-index:70;} .pm-drawer-back.open{opacity:1;} .pm-drawer{position:fixed; top:0; right:0; bottom:0; background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .24s var(--ease); z-index:71; display:flex; flex-direction:column;} .pm-drawer.open{transform:none;} .pm-drawer-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:22px 24px 16px; border-bottom:1px solid var(--line);} .pm-drawer-h h2{font-size:18px; font-weight:800; letter-spacing:-.01em;} .pm-drawer-h p{color:var(--muted); font-size:13px; margin-top:4px;} .pm-drawer-b{flex:1; overflow:auto; padding:16px 24px 24px;} .pm-drawer-f{padding:14px 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface-2);} .pm-drawer-f .grow{flex:1; color:var(--muted); font-size:12.8px;} .pm-drawer .pm-find{width:100%; margin-bottom:12px;} /* ---------- Auswahllisten ---------- */ .pm-pick{display:grid; grid-template-columns:18px 32px 1fr auto; gap:12px; align-items:center; padding:9px 10px; border-radius:10px; cursor:pointer; user-select:none;} .pm-pick:hover{background:var(--hover);} .pm-pick.on{background:var(--accent-soft);} .pm-pick.dis{opacity:.5; cursor:default;} .pm-pick input{width:16px; height:16px; accent-color:var(--accent); margin:0;} .pm-pick .n{font-weight:600; font-size:13.6px;} .pm-pick .e{color:var(--muted); font-size:12px;} .pm-pick-tools{display:flex; justify-content:space-between; align-items:center; margin:0 2px 6px; font-size:12.5px; color:var(--muted);} .pm-linkbtn{border:0; background:none; color:var(--accent); font-weight:600; font-size:12.5px; cursor:pointer; padding:2px;} .pm-group-h{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; padding:14px 10px 6px;} .pm-step{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; margin:18px 0 10px;} .pm-step:first-child{margin-top:4px;} /* ---------- Tabelle ---------- */ .pm-table{width:100%; border-collapse:collapse; font-size:13.4px;} .pm-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--border);} .pm-table td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;} .pm-table tr:last-child td{border-bottom:none;} .pm-table .pm-cell{gap:10px;} /* Protokoll: Tageszeile */ .pm-log-day{padding:14px 22px 6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; background:var(--surface-2); border-bottom:1px solid var(--line);} /* ---------- Suche oben ---------- */ .pm-gsearch{position:relative; margin-left:18px;} .pm-gsearch input{width:240px; padding:8px 12px 8px 34px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px;} .pm-gsearch input:focus{outline:none; border-color:var(--accent); background:var(--surface);} .pm-gsearch > .ic{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none;} .pm-gs-pop{position:absolute; top:calc(100% + 8px); left:0; width:440px; max-height:70vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; z-index:45;} .pm-gs-sec{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; padding:10px 10px 4px;} .pm-gs-i{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--ink);} .pm-gs-i:hover, .pm-gs-i.act{background:var(--hover); text-decoration:none;} .pm-gs-i .s{color:var(--muted); font-size:12px; margin-left:auto; white-space:nowrap;} /* ---------- Dialog ---------- */ .pm-modal{width:min(480px,92vw);} .pm-modal.wide{width:min(600px,94vw); max-height:86vh; overflow:auto;} .pm-modal .pm-step{margin:16px 0 6px;} .pm-modal .pm-step:first-child{margin-top:2px;} .pm-modal-body{color:var(--ink-2); font-size:13.6px; margin-bottom:20px; line-height:1.5;} .pm-modal-body ul{margin:8px 0 0 18px;} .cui-btn-danger-solid{background:var(--bad); color:#fff;} .cui-btn-danger-solid:hover{background:color-mix(in srgb, var(--bad) 86%, #000);} .cui-toast.out{opacity:0; transform:translateY(6px); transition:all .2s var(--ease);} /* ---------- Kopfleiste ---------- */ .pm-me{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-weight:600; white-space:nowrap;} .cui-topbar .cui-crumb{white-space:nowrap;} /* ---------- Ladezustand ---------- */ .pm-skel{height:14px; border-radius:6px; background:linear-gradient(90deg, var(--line) 25%, var(--surface-3) 50%, var(--line) 75%); background-size:200% 100%; animation:cui-sh 1.3s infinite;} .pm-skel-row{display:grid; grid-template-columns:40px 1fr 1fr 1fr; gap:18px; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line);} .pm-skel-row .b{width:40px; height:40px; border-radius:12px;} @media (prefers-reduced-motion: reduce){ .pm-skel{animation:none;} .pm-drawer, .pm-drawer-back{transition:none;} } .hidden{display:none !important;} /* ===================================================================== 2. Level-Rampe, Matrix, Level-Fenster und Combo ===================================================================== */ /* 5-stufige Level-Rampe (Ellio-Markenfamilie) + Matrix-Linien — Werte nicht ändern */ :root { --lvl-1:#edf6dc; --lvl-1-t:#4a6626; --lvl-2:#d5edaa; --lvl-2-t:#3c5620; --lvl-3:#a9d977; --lvl-3-t:#26401a; --lvl-4:#356e2e; --lvl-4-t:#ffffff; --lvl-5:#07433b; --lvl-5-t:#c9ff65; --lvl-0:#dcded6; --lvl-0-t:#4b524c; /* Skill 0: grau, nur im PM (in Connect nicht zugewiesen) */ --proj-line:#a3a89b; /* kräftige Trennlinie zwischen Projekten */ --prj-line:var(--proj-line); /* mittlere Linie: Projekt-Anfang in einem zusammengelegten Band (1 px) */ --sub-line:#d2d5c9; /* zarte Trennlinie zwischen Subtypen */ --band-alt:#f8f9f4; /* Tönung jedes 2. Subtyp-Blocks */ --proj-band-bg:#eceee5; /* Hintergrund Projekt-Band */ --dot:#d6d9cd; /* leere Matrix-Zelle */ } :root[data-theme="dark"] { --lvl-1:#22301a; --lvl-1-t:#aacd8b; --lvl-2:#33491f; --lvl-2-t:#cbe9a0; --lvl-3:#4d7529; --lvl-3-t:#f0ffd8; --lvl-4:#82bc41; --lvl-4-t:#09090b; --lvl-5:#b5e85a; --lvl-5-t:#09090b; --lvl-0:#2e2e35; --lvl-0-t:#b2b2ba; --proj-line:#3f3f47; --prj-line:#4d4d57; /* dunkel heller als --proj-line: 1 px in derselben Farbe wäre kaum von --sub-line zu unterscheiden */ --sub-line:#2a2a31; --band-alt:#141418; --proj-band-bg:#1f1f24; --dot:#38383f; } /* ---------- Level-Badges ---------- */ .lvl { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 2px; border-radius: 8px; font-family: var(--mono); font-weight: 700; font-size: 13px; color: #fff; } .lvl.small { min-width: 20px; height: 20px; font-size: 11px; border-radius: 6px; } .lvl-1 { background: var(--lvl-1); color: var(--lvl-1-t); } .lvl-2 { background: var(--lvl-2); color: var(--lvl-2-t); } .lvl-3 { background: var(--lvl-3); color: var(--lvl-3-t); } .lvl-4 { background: var(--lvl-4); color: var(--lvl-4-t); } .lvl-5 { background: var(--lvl-5); color: var(--lvl-5-t); } /* Skill 0: graues Feld, Ziffer in Inter (die 0 von JetBrains Mono trägt einen Punkt); nie in Sprachfarben */ .lvl-0 { background: var(--lvl-0); color: var(--lvl-0-t); font-family: var(--sans); } /* ---------- MATRIX (dreizeiliger Sticky-Kopf + Sticky-Agentenspalte) ---------- */ /* Höhe setzt view-matrix.js (bis über die Speicherleiste); eigene Schichtung, damit die Sticky-Ecke (z 60) nicht über Dialogen liegt; Rahmen so breit wie die Tabelle, breite Tabellen scrollen. Keine Scroll-Verankerung: Vormerkungen ersetzen einzelne Zellen, der Scrollstand soll dabei nicht springen. Die Breite einer senkrechten Scrollleiste misst view-matrix.js und zieht sie von der Tabellenbreite ab. */ .matrix-wrap { overflow: auto; isolation: isolate; width: fit-content; max-width: 100%; overflow-anchor: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .matrix-wrap:has(> .pm-empty-big) { width: auto; } .matrix { border-collapse: separate; border-spacing: 0; } .matrix thead .proj-band { position: sticky; top: 0; z-index: 6; height: 26px; background: var(--proj-band-bg); border-bottom: 1px solid var(--border); border-left: 2px solid var(--proj-line); font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; white-space: nowrap; padding: 0 9px; } .matrix thead .sub-band { position: sticky; top: 26px; z-index: 5; height: 24px; background: var(--surface); border-bottom: 1px solid var(--border); border-left: 1px solid var(--sub-line); font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-align: center; white-space: nowrap; padding: 0 8px; } .matrix thead .sub-band.band-alt { background: var(--band-alt); } .matrix thead .sub-band.proj-start { border-left: 2px solid var(--proj-line); } .matrix thead th.col { position: sticky; top: 50px; z-index: 4; height: 26px; min-width: 38px; background: var(--surface); border-bottom: 2px solid var(--border); vertical-align: middle; text-align: center; padding: 0 4px; } .matrix thead th.col.band-alt { background: var(--band-alt); } .matrix thead th.col .lang { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); } .matrix thead th.col.sub-start { border-left: 1px solid var(--sub-line); } .matrix thead th.col.proj-start { border-left: 2px solid var(--proj-line); } .matrix .sticky { position: sticky; left: 0; z-index: 30; background: var(--surface); border-right: 2px solid var(--border); text-align: left; min-width: 230px; max-width: 260px; padding: 9px 18px; } .matrix .sticky::after { content: ""; position: absolute; top: 0; right: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(90deg, var(--overlay), transparent); } .matrix thead .corner { top: 0; z-index: 60; vertical-align: bottom; } /* top: 0, sonst scrollt die Ecke senkrecht weg */ .matrix td { border-bottom: 1px solid var(--line); text-align: center; padding: 6px 4px; min-width: 38px; } .matrix tbody td.band-alt { background: var(--band-alt); } .matrix tbody td.proj-start { border-left: 2px solid var(--proj-line); } .matrix tbody td.sub-start { border-left: 1px solid var(--sub-line); } /* Projekt-Anfang in einem zusammengelegten Band (z. B. generali_cpc | generali_garage im Band generali): mittlere Linie zwischen der kräftigen Band-Linie (proj-start) und der zarten Unterband-Linie (sub-start) */ .matrix thead .sub-band.prj-start, .matrix thead th.col.prj-start, .matrix tbody td.prj-start { border-left: 1px solid var(--prj-line); } /* «Ohne Projekt»: ruhig abgesetzt (normale Schrift, gedämpft), damit es nicht wie ein Projekt aussieht */ .matrix thead .proj-band.ohne { font-weight: 500; color: var(--muted); } .matrix tbody tr:hover td { background: var(--hover); } .matrix tbody tr:hover .sticky { background: var(--hover); } .cell { line-height: 0; } .cell .lvl { cursor: default; } .cell.editable .lvl { cursor: pointer; border: 2px solid transparent; transition: transform .1s, box-shadow .1s; } .cell.editable:hover .lvl { transform: translateY(-1px); box-shadow: var(--shadow-lg); } /* Leere Zelle: Punkt als Text direkt in der Zelle (kein eigenes Element, grosse Matrizen zeichnen schneller). Mindesthöhe wie eine Zelle mit Chip (26 px + Innenabstand 2 × 6 px + Linie 1 px, border-box); beim Zeigen auf bearbeitbare Zellen Punkt in Akzentfarbe und Rahmen in --accent-soft. */ .matrix td.cell.empty { height: 39px; color: var(--dot); font-weight: 500; } .cell.editable { cursor: pointer; } .matrix td.cell.editable.empty:hover { position: relative; color: var(--accent); } .matrix td.cell.editable.empty:hover::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--accent-soft); pointer-events: none; } .agent-name { display: flex; flex-direction: column; justify-content: center; gap: 1px; } .an-name { font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .an-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Vormerkung (auch mit unklarem Ausgang): blau gestrichelter Rahmen + Punkt in --info, nie grün */ .matrix td.cell.pending{position:relative} .matrix td.cell.pending::before{content:""; position:absolute; inset:3px; border:2px dashed color-mix(in srgb, var(--info) 75%, transparent); border-radius:9px; pointer-events:none} .matrix td.cell.pending::after{content:""; position:absolute; top:2px; right:2px; width:7px; height:7px; border-radius:50%; background:var(--info); box-shadow:0 0 0 2px var(--surface)} /* ---------- Zellen-Editor (Level-Fenster) ---------- */ .cell-pop { position: fixed; z-index: 45; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px; } .cell-pop-levels { display: flex; gap: 8px; margin-bottom: 12px; } .lvl-btn { width: 38px; height: 38px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--surface); font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink-2); cursor: pointer; transition: border-color .12s, color .12s; } .lvl-btn:hover { border-color: var(--accent); color: var(--accent); } .lvl-btn.z0 { font-family: var(--sans); } .lvl-btn.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 5px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent); } /* ---------- Combo (gestylte Such-Dropdowns) ---------- */ .combo { position: relative; } .combo input { width: 100%; } .combo-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto; padding: 4px; } .combo-opt { padding: 8px 11px; font-size: 13.5px; cursor: pointer; border-radius: var(--r-xs); } .combo-opt:hover { background: var(--hover); } .combo-empty { padding: 10px 12px; font-size: 13.5px; color: var(--muted); } /* ===================================================================== 3. Rahmen und gemeinsame Bausteine (nur Tokens des Design-Systems) ===================================================================== */ .cui-content.pm-wide{max-width:none; padding-bottom:0} a.cui-tab:hover, a.cui-chip:hover, a.pm-row:hover, a.pm-gs-i:hover{text-decoration:none} .pm-combo{position:relative} .pm-combo-grp{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; padding:10px 11px 4px} .cui-overlay{z-index:80} .cui-toast-wrap{z-index:90} body.has-savebar .cui-toast-wrap{bottom:96px} /* Solange ein Dialog oder Drawer offen ist, liegen keine Toasts über deren Knöpfen. Alte Toasts entfernt lib.js beim Öffnen; diese Regel deckt Toasts ab, die währenddessen entstehen. */ body:has(.cui-overlay.open) .cui-toast-wrap, body:has(.pm-drawer.open) .cui-toast-wrap{visibility:hidden} /* Fokus- und scrollIntoView-Ziele landen über der Speicherleiste, nicht darunter */ :root:has(body.has-savebar){scroll-padding-bottom:104px} /* Platz am Seitenende, solange die Speicherleiste sichtbar ist (wie .pm-pad-bottom, 96 px; nicht auf der Matrix). Der Rahmen setzt das für jede Seite; Ansichten hängen selbst kein .pm-pad-bottom an. */ body.has-savebar .cui-content:not(.pm-wide)::after{content:""; display:block; height:96px} @media (max-width:1499px){ .pm-me .nm{display:none} } .lvl.gone{opacity:.45; text-decoration:line-through} .pm-n{color:var(--muted); font-weight:600} .pm-foot{color:var(--muted); font-size:12.5px; margin:10px 4px} .pm-kbd{font:600 11px var(--mono); color:var(--muted)} /* ---------- Kleine Helfer ---------- */ p.pm-s{white-space:normal; overflow:visible} /* Sätze in .pm-s umbrechen; span/div.pm-s bleiben einzeilig */ label.pm-find{display:block} /* label ist inline: sonst greifen Breite und Abstand unten nicht (in Flex-Leisten ohne Wirkung) */ .pm-faint{color:var(--faint)} .pm-num{font-variant-numeric:tabular-nums} .pm-langs{font-family:var(--mono); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums} .pm-lock{display:inline-flex; align-items:center; color:var(--muted)} .pm-lock .ic{width:13px; height:13px} .pm-note{margin-bottom:16px} .pm-note > div{min-width:0} .pm-note .pm-linkbtn{margin-left:4px} .cui-toast .pm-linkbtn{margin-left:auto; padding:2px 4px; white-space:nowrap} .cui-toast.err svg{stroke:var(--bad)} .pm-switch{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap} .cui-switch input:focus-visible + .cui-track{outline:2px solid var(--accent); outline-offset:2px} .cui-tabs .cui-tab{display:inline-flex; align-items:center; gap:6px; white-space:nowrap} /* ---------- Kopfleiste ---------- */ /* Datenstand: Punkt grün; während des Abgleichs und ab 15 Minuten Alter in --warn */ .pm-stand{font-family:var(--mono); font-size:11.5px; padding:5px 10px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--muted); display:inline-flex; align-items:center; gap:7px; white-space:nowrap} .pm-stand::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none} .pm-stand.busy::before, .pm-stand.old::before{background:var(--warn)} .cui-topbar{flex-wrap:nowrap} /* ---------- Anmeldung, Kein Zugriff, nicht erreichbar ---------- */ .pm-auth-logo{display:block; height:64px; width:auto; margin:0 auto 2px} .pm-auth-logo.dark{display:none} :root[data-theme="dark"] .pm-auth-logo.light{display:none} :root[data-theme="dark"] .pm-auth-logo.dark{display:block} .pm-auth-card .cui-btn{justify-content:center} .pm-auth-card .pm-s{white-space:normal; overflow:visible} .pm-auth-card p.pm-s{margin:-8px 0 0} .pm-auth-card .pm-note{margin:0; text-align:left} #error-detail:empty{display:none} #login-theme{position:fixed; top:16px; right:16px} /* ---------- Matrix: Werkzeuge, Reiter, Legende, Köpfe ---------- */ .pm-tools.pm-mx-tools{gap:10px; flex-wrap:nowrap} .pm-tools .cui-select{flex:none} .pm-legend{display:flex; justify-content:space-between; align-items:center; margin:0 2px 10px; font-size:12.5px; color:var(--muted)} .pm-legend b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums} .pm-legend-r{display:flex; align-items:center; gap:6px; white-space:nowrap} .pm-legend-r > .lvl + span:not(.lvl){margin-left:2px} .pm-legend-sep{width:1px; height:18px; background:var(--line); margin:0 8px} .pm-legend-z{display:inline-flex; align-items:center; gap:6px} .pm-legend-gap{width:8px} .pm-lg-pend{position:relative; display:inline-block; width:20px; height:20px; flex:none} .pm-lg-pend::before{content:""; position:absolute; inset:0; border:2px dashed color-mix(in srgb, var(--info) 75%, transparent); border-radius:6px} .pm-lg-pend::after{content:""; position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%; background:var(--info); box-shadow:0 0 0 2px var(--bg)} .lang-link{display:block; color:var(--muted); font:700 12px var(--mono); padding:4px 0} .lang-link:hover{color:var(--ink); text-decoration:underline} .matrix a.an-name{color:var(--ink)} .matrix a.an-name:hover{text-decoration:underline} .matrix thead .corner{font-size:13px; font-weight:700; color:var(--ink); padding-bottom:8px} .matrix-wrap .pm-empty-big{min-width:420px} /* ---------- Matrix: ganze Breite und Detailbereich ---------- */ /* Matrix und Detailbereich nebeneinander. Die Tabellenbreite setzt view-matrix.js (table-layout:fixed, colgroup): ohne Detailbereich genau die Breite des Inhaltsbereichs; zu schmal (Laptop) scrollt sie waagrecht. Ab 2400 px hat der Detailbereich eine feste Breite (view-matrix.js setzt flex inline) und die Matrix den Rest. */ .mxe-body{display:flex; align-items:flex-start; gap:20px; min-width:0} .mxe-body > .matrix-wrap{flex:0 1 auto; min-width:0} .mxe-body > .matrix-wrap:has(> .pm-empty-big){flex:1 1 auto} .matrix.mxe-fixed{table-layout:fixed} .matrix.mxe-fixed .sticky{min-width:0; max-width:none} .matrix.mxe-fixed th.col, .matrix.mxe-fixed td{min-width:0} /* Band- und Unterband-Beschriftungen bleiben beim waagrechten Scrollen lesbar: mittig über ihren Spalten, am Rand halten sie an (links neben der stehenden Agentenspalte, --mx-agw setzt view-matrix.js; rechts am Rand der Matrix), solange Spalten ihrer Gruppe zu sehen sind. overflow: clip statt hidden, sonst wäre das th selbst der Scroll-Bereich und sticky wirkungslos. Die Spalten sind immer so breit wie ihre Beschriftungen (measureNeeds). */ .matrix thead .proj-band, .matrix thead .sub-band{overflow:clip; text-overflow:clip} .matrix thead .proj-band .mxe-lb, .matrix thead .sub-band .mxe-lb{display:inline-block; position:sticky; left:calc(var(--mx-agw, 240px) + 12px); right:12px} .matrix .an-meta .an-d:not(:empty)::before{content:" · "} .mxe-corner .mxe-cu, .mxe-corner .mxe-cd{display:none} /* Einzeilige Agentenspalte: Name | USERNAME | Abteilung in festen Spalten (kürzere Zeilen, klares Raster) */ .mxe-one .agent-name, .mxe-one .mxe-corner{display:grid; grid-template-columns:minmax(0,1fr) 78px 64px; column-gap:12px; align-items:baseline} .mxe-one .an-meta{display:contents} .mxe-one .an-u, .mxe-one .an-d{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .mxe-one .matrix .an-meta .an-d::before{content:none} .mxe-one .matrix td.sticky{padding-top:8px; padding-bottom:8px} .mxe-one .mxe-corner .mxe-cu, .mxe-one .mxe-corner .mxe-cd{display:block; font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* Ab 1900 px Fensterbreite: Chips leicht grösser, weiter mittig in den breiteren Spalten */ @media (min-width:1900px){ .matrix .cell .lvl{min-width:28px; height:28px; font-size:13.5px} .matrix td.cell.empty{height:41px} .matrix td.cell.editable.empty:hover::after{width:28px; height:28px; margin:-14px 0 0 -14px} } /* Gewählte Zeile (Agent) ODER Spalte (Skill) – nie beides. Zeile: leichte Tönung + Balken links. Spalte: Kopf getönt mit Linie unten, darunter nur zwei feine Randlinien (keine Flächentönung, kein Fadenkreuz). */ .matrix tbody tr.mxe-rsel td{background:color-mix(in srgb, var(--accent) 6%, var(--surface))} .matrix tbody tr.mxe-rsel td.band-alt{background:color-mix(in srgb, var(--accent) 6%, var(--band-alt))} .matrix tbody tr.mxe-rsel td.sticky{background:color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow:inset 3px 0 0 var(--accent)} .matrix thead th.col.mxe-csel{background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border-bottom-color:var(--accent)} .matrix thead th.col.mxe-csel .lang-link{color:var(--ink)} .matrix tbody td.mxe-csel{box-shadow:inset 1px 0 0 color-mix(in srgb, var(--accent) 50%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 50%, transparent)} .matrix tbody tr:last-child td.mxe-csel{box-shadow:inset 1px 0 0 color-mix(in srgb, var(--accent) 50%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 50%, transparent)} .mxe-body.has-side .matrix td.sticky, .mxe-body.has-side .matrix th.col{cursor:pointer} /* Detailbereich: Karte, Kopf steht, Inhalt scrollt (Höhe setzt view-matrix.js wie bei der Matrix) */ .mxe-side{flex:1 1 0; min-width:0; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden} .mxe-side[hidden]{display:none} .mxe-h{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 10px 20px} .mxe-id{display:flex; align-items:center; gap:12px; min-width:0} .mxe-ttl{min-width:0} .mxe-ttl h2{font-size:16px; font-weight:700; line-height:1.3; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mxe-sub{display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:3px; font-size:12.5px; color:var(--ink-2)} .mxe-sub2{margin-top:3px; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mxe-mono{font-family:var(--mono); font-size:12px; color:var(--muted)} .mxe-x{flex:none; width:32px; height:32px} .mxe-x .ic{width:16px; height:16px} .mxe-acts{display:flex; flex-wrap:wrap; gap:8px; padding:2px 20px 14px; border-bottom:1px solid var(--line)} .mxe-acts .cui-btn .ic{width:15px; height:15px} .mxe-b{flex:1 1 auto; min-height:0; overflow:auto; padding:4px 20px 18px} /* breiter Detailbereich: zwei Spalten (Skills | letzte Änderungen); schmal untereinander */ .mxe-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); column-gap:32px} .mxe-col{min-width:0} /* sehr breiter Detailbereich (wenige Werte auf ultrabreitem Bildschirm): Listen nicht überlang ziehen */ .mxe-hl, .mxe-log{max-width:680px} .mxe-sec{padding:14px 0 4px; min-width:0} .mxe-sec h3{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap} .mxe-sec h3 .n{color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:0} .mxe-empty{display:flex; align-items:center; gap:8px; padding:6px 0 10px; font-size:13px; color:var(--muted)} .mxe-empty .ic{width:16px; height:16px; color:var(--faint)} .mxe-sec .pm-note.mxe-note{margin:2px 0 8px} /* Hinweis ohne Auswahl: Kopf ohne Knöpfe, darunter «Was man anklicken kann» und «Zuletzt geändert» */ .mxe-h.plain{padding-bottom:14px; border-bottom:1px solid var(--line)} .mxe-how{display:flex; flex-direction:column; gap:12px; padding-bottom:6px} .mxe-how-i{display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:12px; align-items:start} .mxe-how-i b{display:block; font-size:13px; font-weight:600; color:var(--ink); line-height:1.4} .mxe-how-i span:not(.pm-ai){display:block; font-size:12.5px; color:var(--muted); line-height:1.45} .mxe-how-f{font-size:12px; color:var(--muted); line-height:1.45; padding-top:4px} /* Profil: Skills nach Projekt als Chips (Sprachbuchstabe + Level, Farbe aus --lvl-1..5; Sprachfarben über die Klasse) */ .mxe-projs{display:flex; flex-wrap:wrap; align-items:center; gap:8px} .mxe-proj{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px; max-width:100%; padding:5px 8px 5px 9px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); white-space:nowrap} .mxe-pn{font-size:11px; font-weight:600; color:var(--muted)} .mxe-proj.ohne > .mxe-pn{font-weight:500} .mxe-st{font-size:12.5px; font-weight:600; color:var(--ink)} .mxe-dot{color:var(--faint)} .mxe-chips{display:inline-flex; gap:8px} .mxe-c{position:relative; display:inline-flex; padding:0; border:0; background:none; border-radius:7px; font:inherit; line-height:0} button.mxe-c{cursor:pointer} .mxe-lv{display:inline-flex; align-items:center; justify-content:center; gap:1px; height:22px; min-width:22px; padding:0 6px; border-radius:6px; font:700 11.5px/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap} .mxe-lv.lvl-0{font-family:var(--sans)} /* wie .lvl-0: die 0 von JetBrains Mono trägt einen Punkt */ .mxe-l{font-weight:500; opacity:.78} .mxe-lv.gone{opacity:.45; text-decoration:line-through} button.mxe-c .mxe-lv, button.mxe-k .lvl{transition:transform .1s, box-shadow .1s} button.mxe-c:hover .mxe-lv, button.mxe-k:hover .lvl{transform:translateY(-1px); box-shadow:var(--shadow-lg)} /* Vormerkung wie in der Matrix: blau gestrichelter Rahmen + Punkt in --info */ .mxe-c.pending::before, .mxe-k.pending::before{content:""; position:absolute; inset:-3px; border:2px dashed color-mix(in srgb, var(--info) 75%, transparent); border-radius:9px; pointer-events:none} .mxe-c.pending::after, .mxe-k.pending::after{content:""; position:absolute; top:-4px; right:-4px; width:7px; height:7px; border-radius:50%; background:var(--info); box-shadow:0 0 0 2px var(--surface)} .mxe-c.pending::after{box-shadow:0 0 0 2px var(--surface-2)} /* Skill: Agenten nach Level (Chip links, Name, Username · Abteilung; stärkere Linie zwischen den Levels) */ .mxe-hl{display:flex; flex-direction:column} .mxe-hl-i{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:12px; padding:5px 4px 5px 2px} .mxe-hl-i.brk{border-top:1px solid var(--line); margin-top:5px; padding-top:10px} .mxe-k{position:relative; display:inline-flex; padding:0; border:0; background:none; border-radius:8px; line-height:0; font:inherit} button.mxe-k{cursor:pointer} .mxe-hl-n{display:flex; align-items:baseline; gap:10px; min-width:0} a.mxe-nm{font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0} a.mxe-nm:hover{text-decoration:underline} .mxe-mt{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0} .mxe-hl-i .pm-tag{white-space:nowrap} /* Letzte Änderungen: Avatar | Was · Änderung | Bearbeiter · Zeit */ .mxe-log{display:flex; flex-direction:column} .mxe-log-i{display:grid; grid-template-columns:26px minmax(0,1fr) auto; grid-template-areas:"av t c" "av s s"; column-gap:10px; row-gap:2px; align-items:center; padding:8px 0; border-top:1px solid var(--line)} .mxe-log-i:first-child{border-top:0} .mxe-log-i > .pm-av{grid-area:av; align-self:start; margin-top:2px} .mxe-log-t{grid-area:t; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mxe-log-t a{color:var(--ink)} .mxe-log-t .mxe-log-v{font-weight:500; color:var(--ink-2)} .mxe-log-t a:hover{text-decoration:underline} .mxe-log-c{grid-area:c} .mxe-log-s{grid-area:s; display:flex; align-items:center; gap:8px; min-width:0} .mxe-log-s .pm-s{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0} .mxe-log-s .pm-pill{padding:1px 8px; font-size:11px} @media (prefers-reduced-motion: reduce){ button.mxe-c .mxe-lv, button.mxe-k .lvl{transition:none} } /* ---------- Level-Fenster: Inhalt ---------- */ .cell-pop:focus{outline:none} .cp-head{margin-bottom:8px} .cp-head b{display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3} .cp-head span{display:block; font-family:var(--mono); font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .cp-state{font-size:12.5px; color:var(--ink-2); line-height:1.5} .cp-state.pend{color:var(--info-ink); font-weight:600} .cell-pop .cell-pop-levels{margin-top:12px} .cp-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 10px; border-top:1px solid var(--line); padding-top:10px; margin-top:2px} .cp-row > *{white-space:nowrap} /* «Vormerkung aufheben» bricht nicht zweizeilig um, sondern rückt in eine eigene Zeile */ .cp-row:empty{display:none} .cp-last{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.45} .cell-pop .pm-kbd{margin-top:8px; line-height:1.5} .cell-pop .nw{white-space:nowrap} /* ---------- Combo (gemeinsam, z 45) ---------- */ .pm-combo-list{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:45; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); max-height:320px; overflow-y:auto; padding:4px; min-width:260px} .pm-combo-list .combo-opt{display:flex; align-items:center; gap:12px; justify-content:space-between} .pm-combo-list .combo-opt .pm-s{margin:0; flex:none} .pm-combo-list .combo-opt.act{background:var(--hover); box-shadow:inset 0 0 0 1px var(--border)} /* ---------- Dialog-Inhalte: Prüfen und speichern, Ergebnis, Rückgängig ---------- */ .pm-modal-body p{color:inherit; font-size:inherit; margin:0 0 10px} .pm-modal-body p.pm-s{color:var(--muted); font-size:12.5px; margin:12px 0 0} .pm-modal-body .pm-note{margin:14px 0 0} .pm-modal-body .pm-step{margin:16px 0 8px} .pm-chg{display:inline-flex; align-items:center; gap:6px; vertical-align:middle; white-space:nowrap} .pm-chg-t{font-size:12.5px; color:var(--muted)} .pm-chg .pm-chg-a{width:12px; height:12px; color:var(--faint)} .pm-chg-group{margin-top:14px} .pm-chg-h{display:flex; align-items:center; gap:8px; min-width:0} .pm-chg-h b{color:var(--ink)} .pm-chg-h .pm-s{margin:0} .pm-chg-h .pm-pill{margin-left:auto} .pm-modal-body .pm-chg-list, .pm-chg-list{list-style:none; margin:4px 0 0 34px; padding:0} .pm-chg-list li{padding:5px 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap} .pm-chg-list li b{color:var(--ink); font-weight:600} .pm-modal-body p.pm-chg-why{margin:2px 0 0 34px} /* Grund je Agent (Ergebnis, gesperrte Vormerkungen) */ /* Breiter Dialog: Titel und Knöpfe bleiben stehen, der Körper scrollt */ .pm-modal.wide{display:flex; flex-direction:column; overflow:hidden} .pm-modal.wide > h3, .pm-modal.wide > .cui-row, .pm-modal.wide > .pm-status{flex:none} .pm-modal.wide > .pm-modal-body{flex:1 1 auto; min-height:0; overflow:auto; margin-bottom:14px; padding-right:4px} .pm-modal > .pm-status{min-height:19px; margin:-6px 0 12px; color:var(--muted); font-size:12.5px} .pm-modal > .pm-status:empty{visibility:hidden} .pm-undo{border:1px solid var(--border); border-radius:9px; overflow:hidden} .pm-undo-r{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:baseline; padding:10px 12px; border-top:1px solid var(--line)} .pm-undo-r:first-child{border-top:none} .pm-undo-r > .l{font-size:12px; color:var(--muted)} .pm-undo-r > .v{min-width:0; color:var(--ink)} .pm-undo-r > .v .pm-s{margin-top:2px} .pm-undo-r.target{background:var(--accent-soft)} .pm-note.bad{background:var(--bad-bg); border-color:transparent; color:var(--bad-ink)} .pm-note.bad .ic{color:var(--bad)} /* ---------- Gemeinsame Tabellen-Zustände (Skill-Seite, Agentenseite, Auswertung) ---------- */ .pm-table.dense{table-layout:fixed} .pm-table.dense th, .pm-table.dense td{padding:10px 10px} .pm-table td.acts, .pm-table th.acts{text-align:right; white-space:nowrap} .pm-table td.acts .cui-ic + .cui-ic{margin-left:2px} .pm-table tr.is-new{background:linear-gradient(90deg, color-mix(in srgb, var(--ok) 9%, transparent), transparent 60%)} .pm-table tr.is-chg{background:linear-gradient(90deg, color-mix(in srgb, var(--info) 9%, transparent), transparent 60%)} .pm-table tr.is-gone{background:color-mix(in srgb, var(--bad) 7%, transparent)} .lvl.was{opacity:.55} .pm-lvlchg{display:inline-flex; align-items:center; gap:6px} .pm-lvlchg .ic{width:12px; height:12px; color:var(--faint)} .pm-card-f{border-top:1px solid var(--line); background:var(--surface-2); padding:12px 22px; display:flex; align-items:center; gap:12px; border-radius:0 0 16px 16px} .pm-picklist{max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:4px} .pm-log{display:flex; flex-direction:column} .pm-log-i{display:grid; grid-template-columns:26px 1fr auto; gap:10px; padding:10px 0; border-top:1px solid var(--line); align-items:center} .pm-log-i:first-child{border-top:none} /* Hervorhebung nach dem Speichern (2 s); Ein- und Ausblenden je 240 ms */ .pm-flashing, .pm-flashing > td{transition:background-color .24s var(--ease)} .pm-flash{background-color:color-mix(in srgb, var(--ok) 8%, transparent) !important} .pm-flash > td{background-color:color-mix(in srgb, var(--ok) 8%, transparent) !important} .matrix tr.pm-flash > td.sticky{background-color:color-mix(in srgb, var(--ok) 8%, var(--surface)) !important} .matrix tr.pm-flash > td.band-alt{background-color:color-mix(in srgb, var(--ok) 8%, var(--band-alt)) !important} /* ---------- Fokus ---------- */ :where(a, button, select, summary, [tabindex]):focus-visible{outline:2px solid var(--accent); outline-offset:2px} :where(a.pm-row, .matrix td, .pm-gs-i, .combo-opt, .pm-pick):focus-visible{outline-offset:-2px} .cui-side :focus-visible, .pm-savebar :focus-visible{outline-color:var(--cyan)} #main:focus, .pm-modal:focus, .pm-drawer:focus{outline:none} /* ---------- Bewegung ---------- */ @media (prefers-reduced-motion: reduce){ .pm-savebar-in, .cui-toast{animation:none} .pm-flashing, .pm-flashing > td, .cui-toast.out{transition:none} .cell.editable .lvl{transition:none} } /* ---------- Sprachfarben (optional) ---------- Einstellung «Sprachfarben», nur in diesem Browser, Standard aus. Aus: die Klassen sf-d, sf-f, sf-i und sf-e haben keine Wirkung, die Darstellung bleibt unverändert. An: Attribut data-sprachfarben="an" am Wurzelelement. Deutsch gelb, Französisch violett, Italienisch türkis, Englisch pink; bewusst kein Grün (Werte ohne Sprache), Blau (vorgemerkt) oder Rot (Fehler). Werte ohne Sprache tragen keine Klasse und bleiben grün. Level-Chips: Ein Element mit Sprachklasse (Matrix-Zelle, Chip) setzt die Level-Rampe --lvl-1..5 für sich und alles darin auf die Rampe seiner Sprache. Das Level bleibt Zahl und Helligkeit wie bei Grün (hell 1 bis dunkel 5, im dunklen Theme umgekehrt); die Zahl hat in beiden Themes mindestens 4.5:1 Kontrast. Spalten und Zeilen bleiben ungefärbt. Etikett (.pm-sf-tag, Sprachbuchstabe im Matrix-Kopf) = Stufe 3 der Sprache; .pm-sf-ink und L.langs nur Schrift. Für Ansichten: L.lvl(n, {lang}) bzw. L.chg(alt, neu, lang), sonst L.langClass(lang). */ :root{ --sf-d-1:#f6e8af; --sf-d-1-t:#5b4c01; --sf-d-2:#efd278; --sf-d-2-t:#514003; --sf-d-3:#e6b731; --sf-d-3-t:#3a2c01; --sf-d-4:#8c6306; --sf-d-4-t:#ffffff; --sf-d-5:#614000; --sf-d-5-t:#feecd1; --sf-d-ink:#734d01; --sf-f-1:#e9e4ff; --sf-f-1-t:#514279; --sf-f-2:#d7ccff; --sf-f-2-t:#473571; --sf-f-3:#c3affe; --sf-f-3-t:#322255; --sf-f-4:#7455b8; --sf-f-4-t:#ffffff; --sf-f-5:#4e3680; --sf-f-5-t:#efebff; --sf-f-ink:#5c4295; --sf-i-1:#c2f2f7; --sf-i-1-t:#05585e; --sf-i-2:#93e4ec; --sf-i-2-t:#024c51; --sf-i-3:#5ed1de; --sf-i-3-t:#02353a; --sf-i-4:#067a87; --sf-i-4-t:#ffffff; --sf-i-5:#004f68; --sf-i-5-t:#cef7ff; --sf-i-ink:#07606c; --sf-e-1:#ffddeb; --sf-e-1-t:#713652; --sf-e-2:#febfda; --sf-e-2-t:#682848; --sf-e-3:#fe99c7; --sf-e-3-t:#4d1632; --sf-e-4:#a93f75; --sf-e-4-t:#ffffff; --sf-e-5:#75254e; --sf-e-5-t:#ffe7f0; --sf-e-ink:#88305d; } :root[data-theme="dark"]{ --sf-d-1:#4e3104; --sf-d-1-t:#fbc27b; --sf-d-2:#6a4402; --sf-d-2-t:#ffdbaf; --sf-d-3:#926001; --sf-d-3-t:#fef7ee; --sf-d-4:#dea132; --sf-d-4-t:#09090b; --sf-d-5:#fec766; --sf-d-5-t:#09090b; --sf-d-ink:#edbb64; --sf-f-1:#382e53; --sf-f-1-t:#cec0ff; --sf-f-2:#4e3f76; --sf-f-2-t:#e0d8ff; --sf-f-3:#6f59a6; --sf-f-3-t:#f9f7ff; --sf-f-4:#b59bfd; --sf-f-4-t:#09090b; --sf-f-5:#d4c8fe; --sf-f-5-t:#09090b; --sf-f-ink:#c8b7ff; --sf-i-1:#023d42; --sf-i-1-t:#89dae2; --sf-i-2:#02555b; --sf-i-2-t:#afeaf0; --sf-i-3:#097781; --sf-i-3-t:#eafdff; --sf-i-4:#44c1d2; --sf-i-4-t:#09090b; --sf-i-5:#86e2f2; --sf-i-5-t:#09090b; --sf-i-ink:#79d4e4; --sf-e-1:#4e2639; --sf-e-1-t:#feb0d1; --sf-e-2:#6e344f; --sf-e-2-t:#ffcee2; --sf-e-3:#9b4870; --sf-e-3-t:#fef6f9; --sf-e-4:#f087b7; --sf-e-4-t:#09090b; --sf-e-5:#febad7; --sf-e-5-t:#09090b; --sf-e-ink:#fea4cc; } /* Sprachklasse → Level-Rampe und Schriftfarbe der Sprache */ :root[data-sprachfarben="an"] .sf-d{--lvl-1:var(--sf-d-1); --lvl-1-t:var(--sf-d-1-t); --lvl-2:var(--sf-d-2); --lvl-2-t:var(--sf-d-2-t); --lvl-3:var(--sf-d-3); --lvl-3-t:var(--sf-d-3-t); --lvl-4:var(--sf-d-4); --lvl-4-t:var(--sf-d-4-t); --lvl-5:var(--sf-d-5); --lvl-5-t:var(--sf-d-5-t); --sf-ink:var(--sf-d-ink)} :root[data-sprachfarben="an"] .sf-f{--lvl-1:var(--sf-f-1); --lvl-1-t:var(--sf-f-1-t); --lvl-2:var(--sf-f-2); --lvl-2-t:var(--sf-f-2-t); --lvl-3:var(--sf-f-3); --lvl-3-t:var(--sf-f-3-t); --lvl-4:var(--sf-f-4); --lvl-4-t:var(--sf-f-4-t); --lvl-5:var(--sf-f-5); --lvl-5-t:var(--sf-f-5-t); --sf-ink:var(--sf-f-ink)} :root[data-sprachfarben="an"] .sf-i{--lvl-1:var(--sf-i-1); --lvl-1-t:var(--sf-i-1-t); --lvl-2:var(--sf-i-2); --lvl-2-t:var(--sf-i-2-t); --lvl-3:var(--sf-i-3); --lvl-3-t:var(--sf-i-3-t); --lvl-4:var(--sf-i-4); --lvl-4-t:var(--sf-i-4-t); --lvl-5:var(--sf-i-5); --lvl-5-t:var(--sf-i-5-t); --sf-ink:var(--sf-i-ink)} :root[data-sprachfarben="an"] .sf-e{--lvl-1:var(--sf-e-1); --lvl-1-t:var(--sf-e-1-t); --lvl-2:var(--sf-e-2); --lvl-2-t:var(--sf-e-2-t); --lvl-3:var(--sf-e-3); --lvl-3-t:var(--sf-e-3-t); --lvl-4:var(--sf-e-4); --lvl-4-t:var(--sf-e-4-t); --lvl-5:var(--sf-e-5); --lvl-5-t:var(--sf-e-5-t); --sf-ink:var(--sf-e-ink)} /* Etiketten: Sprachbuchstabe im Matrix-Kopf, Legende, Sprach-Chips der Skill-Seite (.pm-sf-tag) */ :root[data-sprachfarben="an"] .pm-sf-tag{display:inline-block; min-width:20px; padding:3px 0; border-radius:5px; font:700 11px/1 var(--mono); text-align:center} :root[data-sprachfarben="an"] .matrix thead th.col:is(.sf-d, .sf-f, .sf-i, .sf-e) .lang-l{padding:1px 6px; border-radius:5px} :root[data-sprachfarben="an"] .pm-sf-tag:is(.sf-d, .sf-f, .sf-i, .sf-e), :root[data-sprachfarben="an"] .matrix thead th.col:is(.sf-d, .sf-f, .sf-i, .sf-e) .lang-l{background:var(--lvl-3); color:var(--lvl-3-t)} /* Nur Schrift: Sprachzählung «D 3 · F 2 · I – · E 1» (L.langs) und .pm-sf-ink */ :root[data-sprachfarben="an"] .pm-langs :is(.sf-d, .sf-f, .sf-i, .sf-e), :root[data-sprachfarben="an"] .pm-sf-ink:is(.sf-d, .sf-f, .sf-i, .sf-e){color:var(--sf-ink); font-weight:600} /* Legende der Matrix: Teil «Sprachen» nur mit eingeschalteten Sprachfarben */ .pm-legend-sf{display:none} :root[data-sprachfarben="an"] .pm-legend-sf{display:inline-flex; align-items:center; gap:6px} /* ---------- Bereiche: Wahl oben, Menü, Zeile unter dem Titel, Pille, Vorschlag ---------- Eigene Einteilung im PM (z. B. KMU und MI). Bewusst neutral: keine Farbe je Bereich (Level sind grün, Sprachen haben Farben). Ein gewählter Bereich oben ist ruhig hervorgehoben, im Akzent der Oberfläche wie ein gewählter Chip. */ /* Gleich hoch wie das Suchfeld daneben (38 px), damit Ober- und Unterkante fluchten */ .pm-bwahl{display:inline-flex; align-items:center; gap:7px; flex:none; height:38px; padding:0 9px 0 10px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); font:600 13px/1 var(--sans); white-space:nowrap; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease)} .pm-bwahl:hover{background:var(--hover); color:var(--ink)} .pm-bwahl .ic{width:15px; height:15px; color:var(--muted)} .pm-bwahl .pm-bw-chev{width:14px; height:14px} /* Lange Bereichsnamen: «…», der volle Name steht im title */ .pm-bw-t{display:block; min-width:0; max-width:240px; overflow:hidden; text-overflow:ellipsis; line-height:1.25} .pm-bw-short{display:none} .pm-bwahl.on{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent-dark)} .pm-bwahl.on .ic{color:currentColor} :root[data-theme="dark"] .pm-bwahl.on{color:var(--accent)} /* Auf Seiten, auf denen die Wahl nicht wirkt (Agenten- und Skill-Seite, Bereiche, Historie): neutral und gedämpft */ .pm-bwahl.idle{color:var(--muted)} .pm-bwahl.idle:hover{color:var(--ink)} .pm-bwahl[aria-expanded="true"]{border-color:var(--accent)} /* Kopfleiste mit Bereich-Wahl: nur die Suche gibt Platz ab (bei 1366 px), Knöpfe und Stand bleiben unverkürzt */ .cui-topbar > *{flex-shrink:0} .cui-topbar > .pm-gsearch{flex:0 1 240px; min-width:150px} .cui-topbar > .pm-gsearch input{width:100%} @media (max-width:1499px){ .cui-topbar{gap:10px} .cui-topbar > .pm-gsearch{flex-basis:210px; margin-left:4px} .pm-bwahl > .ic:first-child{display:none} /* die Beschriftung sagt es: «Alle Bereiche», «Bereich KMU» */ .pm-bw-t{max-width:150px} .pm-bw-full{display:none} /* «Nicht eingeteilt» statt «Noch nicht eingeteilt» */ .pm-bw-short{display:inline} } /* Menü (L.menu): wie die Suche oben; Haken links, Zahlen rechts, Trennlinie vor dem Link */ .pm-menu{position:fixed; z-index:45; min-width:250px; max-width:min(400px, 92vw); max-height:70vh; overflow:auto; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg)} .pm-menu:focus{outline:none} .pm-menu-i{display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; column-gap:10px; width:100%; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--ink); font:500 13.5px/1.35 var(--sans); text-align:left; white-space:nowrap; cursor:pointer} .pm-menu-i:hover, .pm-menu-i:focus{background:var(--hover); outline:none; text-decoration:none} .pm-menu-i:focus-visible{box-shadow:inset 0 0 0 1px var(--border)} .pm-menu-i.on .pm-menu-l{font-weight:600} .pm-menu-i:disabled{opacity:.5; cursor:default} a.pm-menu-i .pm-menu-l{color:var(--accent); font-weight:600} .pm-menu-c{display:inline-flex; width:16px} .pm-menu-c .ic{width:15px; height:15px; color:var(--accent)} .pm-menu-l{min-width:0; overflow:hidden; text-overflow:ellipsis} .pm-menu-s{padding-left:16px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums} .pm-menu-sep{height:1px; margin:5px 6px; background:var(--line)} .pm-menu-h{padding:8px 10px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700} /* Beschriftung vor Filter-Chips («Abteilung»: neben Bereichen wäre «MI» allein doppeldeutig), wie «Sprachen» der Skill-Seite */ .pm-flt-l{align-self:center; margin-right:2px; font-size:12.5px; font-weight:600; color:var(--muted)} /* Zeile unter dem Titel der Listen-Ansichten: «Nur Bereich KMU · 13 Agenten · 26 Skills · Alle Bereiche zeigen» */ .pm-bx{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:8px; font-size:12.8px; color:var(--muted)} .pm-bx > .ic{width:15px; height:15px; color:var(--muted)} .pm-bx b{color:var(--ink-2); font-weight:600} .pm-bx .pm-linkbtn{font-size:12.8px; padding:0 2px} .pm-bx-h{border-bottom:1px dotted var(--faint); cursor:help} /* Bereich als ruhige Pille; mit Recht ein Knopf mit Menü. «Noch nicht eingeteilt» bzw. «offen» mit Linie, gedämpft. Lange Namen kürzt die Pille mit «…» (voller Name im title), statt die Spalte zu sprengen. */ .pm-pill.pm-bp{gap:4px; min-width:0; max-width:100%} .pm-pill.pm-bp .ic{flex:none} .pm-bp-t{min-width:0; overflow:hidden; text-overflow:ellipsis} .pm-pill.pm-bp.off{color:var(--muted)} button.pm-pill.pm-bp{border:1px solid transparent; padding-right:6px; font-family:inherit; cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease)} button.pm-pill.pm-bp.line{border-color:var(--border)} button.pm-pill.pm-bp .ic{width:13px; height:13px; color:var(--muted)} button.pm-pill.pm-bp:hover{border-color:var(--border); background:var(--hover); color:var(--ink)} button.pm-pill.pm-bp[aria-expanded="true"]{border-color:var(--accent)} button.pm-pill.pm-bp:disabled{opacity:.6; cursor:default} /* Vorschlag: «Vorschlag: KMU (3 von 3 Skills) · Übernehmen»; in Listen zweizeilig: «KMU · Übernehmen», darunter die Begründung (ganz lesbar, notfalls mit «…» und vollem Text im title) */ .pm-bv{display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; font-size:12.5px; color:var(--muted); white-space:nowrap} .pm-bv b{color:var(--ink-2); font-weight:600} .pm-bv-t{min-width:0; overflow:hidden; text-overflow:ellipsis} .pm-bv-d{color:var(--faint)} .pm-bv .pm-linkbtn{flex:none; padding:2px 4px; border-radius:var(--r-xs)} .pm-bv .pm-linkbtn:hover{background:var(--hover)} .pm-bv .pm-linkbtn:is(:disabled, [aria-disabled="true"]){opacity:.5; cursor:default} .pm-bv.c{display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%} .pm-bv-l{display:flex; align-items:center; gap:6px; max-width:100%; min-width:0} .pm-bv-n{min-width:0; overflow:hidden; text-overflow:ellipsis} .pm-bv-r{max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:12px} /* Matrix: Bereich unter dem Agentennamen; noch nicht eingeteilt («MI · offen») gedämpft. Einzeilig gerade so breit, dass «Swisscom» und die Bereichsnamen passen (die Agentenspalte ist dafür 4 px breiter, der Name behält seinen Platz); «offen» steht dort ohne Abteilung (.an-dl, die Abteilung steht im title), sonst kürzte «Swisscom · offen» gerade «offen» weg. Der Kopf «Bereich / Abteilung» darf umbrechen (der Eckkopf ist drei Zeilen hoch). */ .matrix .an-meta .an-d.off{color:var(--faint)} .mxe-one .an-d .an-dl{display:none} .mxe-one .agent-name, .mxe-one .mxe-corner{grid-template-columns:minmax(0,1fr) 78px 68px} .mxe-one .mxe-corner .mxe-cd{white-space:normal; line-height:1.25} .pm-mx-eacts{display:flex; justify-content:center; gap:8px; margin-top:14px} .pm-mx-bempty .cui-btn{margin-top:14px} /* ===================================================================== 4. Ansichten (nur Regeln der jeweiligen Ansicht, nur Kanon-Tokens) ===================================================================== */ /* --------------------------------------------------------------------- 4.1 Pro Skill: Liste und Skill-Seite (js/view-skill.js) Eigene Klassen: cols-skills, pm-list-grp, pm-stats-3, pm-dist, sonst Präfix pm-sk-. --------------------------------------------------------------------- */ /* ===================================================================== Pro Skill – Liste ===================================================================== */ .pm-find.pm-sk-find{width:300px} .cols-skills{grid-template-columns:minmax(260px,1.8fr) 110px 110px minmax(160px,1fr) 20px} /* Mit Bereichen bei «Alle Bereiche»: Spalte «Bereich» nach dem Wert */ .cols-skills.has-b{grid-template-columns:minmax(240px,1.8fr) 130px 100px 100px minmax(150px,1fr) 20px} .pm-sk-ball{margin-top:14px} .pm-list-grp{padding:10px 22px 6px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* «Ohne Projekt» wie in der Matrix ruhig abgesetzt */ .pm-list-grp.ohne{text-transform:none; letter-spacing:.01em; font-weight:500} a.pm-row.cols-skills .pm-t{font-size:14px} a.pm-row.cols-skills .chev{display:flex; align-items:center} .pm-sk-num{font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums} .pm-sk-num.zero{color:var(--faint)} /* ===================================================================== Skill-Seite ===================================================================== */ /* ---------- Kopf: .pm-hero links, Knöpfe oben rechts ---------- */ .pm-head.pm-sk-head{align-items:flex-start} .pm-sk-head .pm-hero{align-items:flex-start; min-width:0} .pm-sk-ht{min-width:0} .pm-sk-head h1{overflow-wrap:anywhere} .pm-sk-head .acts{flex:none} .pm-sk-langs{gap:6px} .pm-sk-ml{font-size:12.5px; font-weight:600; color:var(--muted); margin-right:4px} .pm-sk-langs .cui-chip .n{color:var(--muted); font-weight:600; margin-left:2px} .pm-sk-langs .cui-chip.on .n{color:inherit} /* Sprachfarben an: Buchstabe der Sprach-Chips als Etikett (Farben aus Abschnitt 3, .pm-sf-tag). Negative Ränder halten die Chip-Höhe gleich; aus bleibt der Buchstabe reiner Text. */ :root[data-sprachfarben="an"] .pm-sk-langs .pm-sf-tag{min-width:17px; padding:2px 4px; margin:-2px -2px -2px -5px; font:700 11px/1.2 var(--mono)} /* ---------- Kennzahlen: drei gleich hohe cui-stat ---------- */ .pm-stats-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px} .pm-stats-3 .cui-stat{min-height:112px; min-width:0} .pm-stats-3 .cui-stat > .pm-s{margin-top:2px} .pm-dist{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; margin-top:12px; text-align:center} .pm-dist > div{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0} .pm-dist-n{font:700 15px/1.2 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums} .pm-dist-n.zero{color:var(--faint)} .pm-dist-l{font-size:12px; line-height:20px; color:var(--muted); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* ---------- Zweispaltig bzw. einspaltig ohne rechte Karten ---------- */ .pm-detail.pm-sk-one{grid-template-columns:minmax(0,1fr)} /* ---------- Tabelle «Agenten mit diesem Skill» ---------- table-layout:fixed (.pm-table.dense). Spalten mit festem Inhalt bekommen feste Breiten, damit Pille, Level «alt → neu» und «Stift + Aufheben» bei 1366 px nicht überlaufen; «Agent» bekommt den Rest. Fehlt eine Spalte (kein Recht), geht ihre Breite so von selbst an «Agent». */ .pm-sk-tbl col.c-dept{width:100px} .pm-sk-tbl col.c-lvl{width:92px} .pm-sk-tbl col.c-chg{width:20%} .pm-sk-tbl col.c-acts{width:112px} .pm-sk-tbl td{vertical-align:middle} .pm-sk-tbl .pm-cell{min-width:0} .pm-sk-who{min-width:0; flex:1} .pm-sk-nm{display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; min-width:0} .pm-sk-nm a{font-size:14px; font-weight:600; color:var(--ink); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pm-sk-nm a:hover{text-decoration:underline} .pm-sk-nm .pm-tag, .pm-sk-nm .pm-pill{flex:none; white-space:nowrap} .pm-sk-who > .pm-s{margin-top:1px; font-size:12px} .pm-sk-when{font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums} .pm-sk-by{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px} .pm-sk-tbl td.acts{white-space:nowrap} .pm-sk-tbl td.acts .pm-linkbtn{vertical-align:middle; margin-left:4px} :where(.pm-sk-tbl) button.cui-ic{background:transparent; padding:0; vertical-align:middle} .pm-sk-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap} .pm-sk-empty{align-items:flex-start; padding:18px 4px 8px} .pm-sk-empty > div{color:var(--ink-2)} .pm-sk-next{display:flex; align-items:center; gap:6px; margin-top:4px; color:var(--muted); font-size:12.5px} .pm-sk-next .ic{width:14px; height:14px; color:var(--faint)} /* ---------- Karte «Weitere Agenten zuweisen» ---------- */ .pm-sk-assign{scroll-margin-top:84px; scroll-margin-bottom:24px} .pm-sk-assign .pm-find{width:100%; margin-bottom:12px} .pm-sk-assign .pm-filters{margin-bottom:12px} .pm-sk-assign .pm-pick-tools{min-height:24px; gap:10px} .pm-sk-tr{display:inline-flex; align-items:center; gap:10px; white-space:nowrap} .pm-sk-np{color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums} .pm-sk-assign .pm-picklist .pm-group-h:first-child{padding-top:8px} .pm-sk-pick .pm-av.sm, .pm-sk-tbl .pm-av.sm{box-shadow:none} .pm-sk-pn{min-width:0} .pm-sk-pn .n, .pm-sk-pn .e{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pm-sk-pr{display:inline-flex; align-items:center; gap:6px; justify-self:end} .pm-sk-pempty{padding:16px 10px} .pm-sk-assign .pm-card-f{flex-wrap:wrap; gap:8px 10px} .pm-sk-assign .pm-card-f .pm-seg{flex-wrap:nowrap; flex:none} .pm-sk-assign .pm-card-f .pm-seg.sm button{padding:4px 8px; min-width:23px; font-variant-numeric:tabular-nums} .pm-sk-flbl{font-size:12.5px; font-weight:600; color:var(--ink-2)} .pm-sk-go{margin-left:auto} .pm-sk-limit{flex-basis:100%; margin:0; color:var(--bad-ink); white-space:normal} /* ---------- Karte «Verlauf» ---------- .pm-log-i (Abschnitt 3: 26px 1fr auto) hier zweizeilig: Knopf/Pille neben dem Agentennamen, die Änderungszeile darunter über die volle Breite (sonst wird «Bearbeiter · Zeit» bei 1366 px abgeschnitten). */ .pm-sk-log .pm-log-i{grid-template-columns:26px minmax(0,1fr) auto; grid-template-areas:"av l1 la" "av l2 l2"; row-gap:4px} .pm-sk-log .pm-log-i > .pm-av{grid-area:av} .pm-sk-l1{grid-area:l1; min-width:0; font-size:13.4px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pm-sk-l1 a{color:var(--ink)} .pm-sk-l1 a:hover{text-decoration:underline} .pm-sk-la{grid-area:la; display:flex; justify-content:flex-end; align-items:center} .pm-sk-la .cui-btn-sm{margin:-5px 0} .pm-sk-l2{grid-area:l2; display:flex; flex-wrap:wrap; align-items:center; gap:3px 8px; min-width:0} .pm-sk-l2 .pm-s{margin:0; min-width:0; max-width:100%} .pm-sk-more{padding-top:10px; border-top:1px solid var(--line)} /* --------------------------------------------------------------------- 4.2 Pro Agent: Liste, Agentenseite, Drawer Vorbild und Übertragen Präfix pm-ag- / pm-dv- / pm-du-, dazu .cols-agents, .pm-xfer und tr.pm-grp. --------------------------------------------------------------------- */ /* ===================================================================== Gemeinsam: Filter-Chips als Knöpfe (gleiche Höhe wie span.cui-chip) ===================================================================== */ button.cui-chip.pm-ag-chip{font-family:inherit; line-height:inherit; letter-spacing:normal} /* ===================================================================== Agentenliste ===================================================================== */ .cols-agents{grid-template-columns:minmax(260px,1.5fr) 130px 90px 180px minmax(190px,1fr) 20px} .cols-agents.no-hist{grid-template-columns:minmax(260px,1.5fr) 130px 90px 180px 20px} /* Mit Bereichen bei «Alle Bereiche»: Spalte «Bereich» nach der Abteilung. «Skills» bleibt 90 px breit wie ohne Bereiche (die Pille «Ohne Skills» braucht 85 px); Platz geben Bereich (lange Namen kürzt die Pille) und Sprachen ab. */ .cols-agents.has-b{grid-template-columns:minmax(230px,1.5fr) 110px 96px 90px 160px minmax(170px,1fr) 20px} .cols-agents.no-hist.has-b{grid-template-columns:minmax(230px,1.5fr) 110px 96px 90px 160px 20px} .cols-agents.has-b > .pm-cell, .cols-skills.has-b > span{min-width:0} /* Hinweis «n Agenten haben noch keinen Skill» mit Knopf rechts */ .pm-note.pm-ag-new{align-items:center} .pm-note.pm-ag-new > div{flex:1} .pm-note.pm-ag-new .ic{margin-top:0} /* Werkzeugleiste: senkrechter Trennstrich zwischen Abteilungen und «Ohne Skills» */ .pm-ag-sep{width:1px; height:20px; background:var(--border); align-self:center; margin:0 6px; flex:none} /* Zeile: Name mit Kennzeichen «2 vorgemerkt», Zahlen tabellarisch */ .pm-ag-nm{display:flex; align-items:center; gap:8px; min-width:0} .pm-ag-nm .pm-clip{min-width:0; flex:0 1 auto} .pm-ag-nm .pm-tag{flex:none} .pm-ag-num{font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums} .pm-row .pm-s.pm-ag-lc{margin:0} .pm-ag-lempty .pm-ag-empty-t{color:var(--ink-2); font-size:14px} .pm-ag-lempty p.pm-s{margin-top:4px} .pm-ag-lempty .pm-ag-sync{margin-top:16px} /* ===================================================================== Agentenseite ===================================================================== */ /* Kopf wie die Personenseite im User Manager; Knöpfe oben rechts */ .pm-head.pm-ag-head{align-items:flex-start} .pm-ag-head .pm-hero{min-width:0} .pm-ag-head .pm-ag-who{min-width:0} .pm-ag-head .acts{flex:none; padding-top:4px} .pm-ag-head .acts a.cui-btn:hover{text-decoration:none} /* Leser: rechts nichts, darum einspaltig */ .pm-detail.pm-ag-one{grid-template-columns:minmax(0,1fr)} /* ---------- Karte «Skills» ---------- */ .pm-ag-skills .pm-card-b{padding-top:2px} /* Skills nicht gelesen und nichts vorgemerkt: Karte ohne Inhalt, Kopf mit gleichem Abstand oben und unten */ .pm-ag-skills .pm-card-h:has(+ .pm-card-b[hidden]){padding-bottom:18px} .pm-ag-skq{width:220px; flex:none} .pm-ag-skq input{padding-top:7px; padding-bottom:7px} /* Tabelle: feste Spalten (table-layout:fixed aus .pm-table.dense). Breiten so, dass auch vorgemerkte Zeilen (alt → neu, «Aufheben») bei 1366 px nicht überlaufen; fehlt eine Spalte, bekommt «Skill» ihre Breite. */ .pm-ag-tbl.l-ha .c-sk{width:43%} .pm-ag-tbl.l-ha .c-lv{width:16%} .pm-ag-tbl.l-ha .c-ch{width:22%} .pm-ag-tbl.l-ha .c-ac{width:19%} .pm-ag-tbl.l-h .c-sk{width:62%} .pm-ag-tbl.l-h .c-lv{width:16%} .pm-ag-tbl.l-h .c-ch{width:22%} .pm-ag-tbl.l-a .c-sk{width:65%} .pm-ag-tbl.l-a .c-lv{width:16%} .pm-ag-tbl.l-a .c-ac{width:19%} .pm-ag-tbl.l-r .c-sk{width:86%} .pm-ag-tbl.l-r .c-lv{width:14%} .pm-ag-tbl tbody td{vertical-align:middle} .pm-ag-tbl tbody tr{scroll-margin:76px 0 104px} /* nach dem Vormerken über der Speicherleiste zeigen */ /* Gruppenzeile je Attribut */ .pm-ag-tbl tr.pm-grp > td{background:var(--surface-2); padding:8px 10px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:700; border-bottom:1px solid var(--line)} .pm-ag-tbl tr.pm-grp .pm-grp-t{vertical-align:middle} .pm-ag-tbl tr.pm-grp .pm-pill{margin-left:10px; text-transform:none; letter-spacing:0; padding:1px 9px; font-size:11.5px; vertical-align:middle} /* Zelle «Skill»: Wert als Link, dahinter Pille/Kennzeichen (bricht bei Platzmangel in die zweite Zeile) */ .pm-ag-sk{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0} .pm-ag-val{font-size:14px; font-weight:600; color:var(--ink); min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .pm-ag-val:hover{color:var(--ink); text-decoration:underline} /* Projekt neben dem Wert, wo der Wertname es nicht sagt (Abfragen_Techniker · kmu); «Ohne Projekt» wie in der Matrix ruhig */ .pm-ag-prj{flex:none; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap} .pm-ag-prj.ohne{font-weight:500} .pm-ag-sk .pm-pill{font-size:11.5px; padding:1px 9px; flex:none} .pm-ag-sk .pm-tag{flex:none} /* Zelle «Geändert»: zwei Zeilen */ .pm-ag-when{font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4} .pm-ag-by{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4} /* Aktionen: Stift, Papierkorb, «Aufheben», «Behalten» (immer sichtbar). Der Kanon setzt bei .cui-ic keinen Hintergrund; als