/* Inbox: privacy notice vertical padding */
.inbox .privacy-notice {
padding-top: 11px;
padding-bottom: 11px;
}
/* Wizard: Bibliotheksauswahl – aktive Zeile hellblau hervorheben */
.pm-list__row.is-active{
background:#e6f0ff;
}
/* reused styling (same as editor-style header + chips/badges) */
.date-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f0f9ff;border:1px solid #bae6fd;color:#075985;font-weight:600;font-size:12px;}
.urgency-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid transparent}
.urgency--low{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.urgency--normal{background:#f3f4f6;border-color:#e5e7eb;color:#374151}
.urgency--high{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.big-check{width:42px;height:42px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.big-check .fa-circle{color:#cbd5e1;font-size:18px}
.big-check .fa-check{color:#10b981;font-size:20px}
.mini-hero{border:1px solid #eef2f7;border-radius:12px;overflow:hidden;background:#fff;}
.mini-hero__banner{height:88px;background:#f8fafc;background-size:cover;background-position:center;position:relative;}
.mini-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.45));display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:8px 10px;}
.mini-hero__title{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800}
.mini-hero__title .truncate{max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pm-btn--xs{padding:4px 8px;font-size:12px;border-radius:8px}
.action-hero__banner{height:160px;background:#f8fafc;background-size:cover;background-position:center;border-radius:12px;}
.action-hero__content{padding:10px;}
.action-hero__title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px}
.action-hero__rich{margin-top:6px}
.mgr-subtitle{font-size:12px;opacity:.7;margin:8px 0 6px;display:flex;align-items:center;gap:6px}
.mgr-sub-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.todo-check{width:16px;height:16px;appearance:none;-webkit-appearance:none;outline:none;border:2px solid #cbd5e1;border-radius:4px;background:#fff;margin:0;flex:0 0 auto;}
.tlt-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;}
.tlt-title{display:flex;align-items:center;gap:8px;font-weight:800}
.tlt-inline{display:flex;align-items:center;gap:10px}
.todo-bullet{width:8px;height:8px;border-radius:50%;background:#d1d5db;display:inline-block;margin-right:6px}
.todo-bullet.is-overdue{background:#ef4444}
.todo-desc{margin:6px 0 2px;}
.todo-thread {
border: 1px dashed #e5e7eb;
margin-top: 8px;
padding-top: 8px;
display: grid;
gap: 8px;
}
.todo-post{display:flex;gap:8px;align-items:flex-start}
.todo-avatar{width:28px;height:28px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.todo-post-body{min-width:0;flex:1}
.todo-post-meta{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.todo-post-text{white-space:pre-wrap;line-height:1.35;color:#374151}
.todo-reply{margin-top:8px;border-top:1px dashed #e5e7eb;padding-top:8px}
.todo-reply-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;font-size:12px}
.tag--done{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.tag--due{background:#f0f9ff;border-color:#bae6fd;color:#075985}
.type-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid #e5e7eb;font-weight:700;font-size:12px;background:#fff}
.chip--measure{background:#f5f3ff;border-color:#e9d5ff;color:#6b21a8}
.chip--external{background:#eff6ff;border-color:#dbeafe;color:#1d4ed8}
.chip--request{background:#fff7ed;border-color:#ffedd5;color:#c2410c}
.chip--participant{background:#ecfeff;border-color:#cffafe;color:#155e75}
/* badges (reuse editor styles) */
.date-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f0f9ff;border:1px solid #bae6fd;color:#075985;font-weight:600;font-size:12px;}
.urgency-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid transparent}
.urgency--low{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.urgency--normal{background:#f3f4f6;border-color:#e5e7eb;color:#374151}
.urgency--high{background:#fef2f2;border-color:#fecaca;color:#991b1b}
/* todo layout */
.todo-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
.todo-title{display:flex;align-items:center;gap:8px;font-weight:700}
.todo-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.todo-filter{display:flex;align-items:center;gap:6px;font-size:12px;color:#555}
.todo-card{border:1px solid #eef2f7;border-radius:12px;background:#fff;padding:10px 12px;margin-bottom:10px;}
.todo-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.todo-name{display:flex;align-items:center;gap:8px}
.todo-bullet{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.todo-bullet.is-overdue{background:#ef4444}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;font-size:12px;color:#374151}
.tag--done{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.tag--due{background:#f0f9ff;border-color:#bae6fd;color:#075985}
.tag--link{background:#faf5ff;border-color:#e9d8fd;color:#6b21a8}
.tag .chip-x{margin-left:6px;border:none;background:transparent;cursor:pointer;font-weight:700}
.todo-desc{margin:8px 0 0;color:#374151}
.todo-subtitle{font-size:12px;opacity:.7;margin:8px 0 6px;display:flex;align-items:center;gap:6px}
.todo-subtasks{padding:8px 0}
.todo-subtask-row{display:flex;align-items:center;gap:8px;margin:4px 0}
/* thread + reply (discrete) */
.todo-thread{border-top:1px dashed #e5e7eb;margin-top:8px;padding-top:8px;display:grid;gap:8px}
.todo-post{display:flex;gap:8px;align-items:flex-start}
.todo-avatar{width:28px;height:28px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.todo-post-body{min-width:0;flex:1}
.todo-post-meta{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.todo-post-text{white-space:pre-wrap;line-height:1.35;color:#374151}
.todo-time{font-size:12px;color:#6b7280}
.todo-reply{margin-top:8px;border-top:1px dashed #e5e7eb;padding-top:8px}
.todo-reply-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.todo-type{max-width:160px}
/* mini hero reused */
.mini-hero{border:1px solid #eef2f7;border-radius:12px;overflow:hidden;background:#fff;margin-top:8px;}
.mini-hero__banner{height:88px;background:#f8fafc;background-size:cover;background-position:center;position:relative;}
.mini-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.45));display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:8px 10px;}
.mini-hero__title{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800}
.mini-hero__title .truncate{max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pm-btn--xs{padding:4px 8px;font-size:12px;border-radius:8px}
/* read-only checkbox */
.todo-check{width:16px;height:16px;appearance:none;-webkit-appearance:none;outline:none;border:2px solid #cbd5e1;border-radius:4px;background:#fff;margin:0;flex:0 0 auto;}
.todo-check:disabled{opacity:1}
/* Richtext */
.rt-inline-editor .ck-editor__editable{min-height:160px}
.rt-fallback:empty:before{content:attr(data-placeholder); color:#9ca3af}
.date-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#f0f9ff;border:1px solid #bae6fd;color:#075985;font-weight:600;font-size:12px;}
/* urgency pill */
.urgency-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid transparent}
.urgency--low{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.urgency--normal{background:#f3f4f6;border-color:#e5e7eb;color:#374151}
.urgency--high{background:#fef2f2;border-color:#fecaca;color:#991b1b}
/* checkbox look for subtasks (read-only) */
#limesurvey .todo-check {
width: 16px;
height: 16px;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: default;
border: 2px solid #cbd5e1;
border-radius: 4px;
background: #fff;
margin: 0 6px 0 0;
flex: 0 0 auto;
}
.todo-check:disabled{opacity:1}
/* inline mini hero */
.mini-hero{border:1px solid #eef2f7;border-radius:12px;overflow:hidden;background:#fff;margin-top:8px;}
.mini-hero__banner{height:72px;background:#f8fafc;background-size:cover;background-position:center;}
.mini-hero__row{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px;}
.mini-hero__title{display:flex;align-items:center;gap:8px;font-weight:700}
.mini-hero__actions{display:flex;gap:6px}
.pm-btn--xs{padding:4px 8px;font-size:12px;border-radius:8px}
.mini-hero__rt{padding:8px 10px;border-top:1px dashed #e5e7eb;background:#fcfcfd}
/* Type chips */
.type-chip{display:inline-flex;align-items:center;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid transparent}
.type-chip i{font-size:12px}
.chip--participant{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.chip--external{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.chip--request{background:#fef3c7;border-color:#fde68a;color:#92400e}
.chip--measure{background:#f5d0fe;border-color:#f0abfc;color:#6b21a8}
.participant-hint{display:inline-block;margin-left:6px;font-size:10px;padding:2px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a}
/* Assignees */
.assignee-button{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;cursor:pointer}
.assignee-label{font-size:12px;color:#374151;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assignee-stack{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.avatar--xs{width:24px;height:24px;font-size:11px;background:#f3f4f6;color:#111827;border:1px solid #e5e7eb}
.avatar--empty{background:#fff;color:#9ca3af;border:1px dashed #e5e7eb}
/* Manager subtasks & action view */
.mgr-subtasks{margin-top:8px;padding:8px 10px;border:1px dashed #e5e7eb;border-radius:10px;background:#fcfcff}
.mgr-subtitle{font-weight:700;color:#111827;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mgr-sub-row{display:flex;gap:8px;align-items:center}
.action-hero__banner{height:140px;border-radius:12px;background:#f3f4f6;background-size:cover;background-position:center}
.action-hero__content{padding:10px 2px}
.action-hero__title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin:8px 0}
.action-hero__rich{margin:8px 0;color:#374151}
/* ===== Type picker / Wizard – Grundlayout ===== */
.type-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:12px;
}
.type-card{
display:flex;
flex-direction:column;
gap:8px;
align-items:flex-start;
padding:12px;
border:1px solid #e5e7eb;
background:#fff;
border-radius:12px;
cursor:pointer;
text-align:left;
transition:transform .12s ease, box-shadow .12s ease;
}
.hover-pop{ transition:transform .06s ease, box-shadow .15s ease; }
.hover-pop:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.06); }
.type-title{ font-weight:800; }
.type-sub{ font-size:12px; color:#6b7280; opacity:.75; margin-top:2px; }
/* ===== Illustration – Basis (KEIN Hintergrund mehr) ===== */
.type-illus{
width:100%;
height:84px; /* konsistent */
border-radius:10px;
margin-bottom:8px;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
position:relative; /* für ::before-Badge/Emoji */
/* kein background hier – Verursacher des grauen BG entfernt */
}
/* Einheitliche Positionierung des Badges/Emojis */
.type-illus::before{
position:absolute;
top:8px;
left:8px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
content:""; /* wird in Varianten überschrieben */
}
/* ===== Varianten mit Farbflächen / Emojis ===== */
/* Program – nummeriertes Badge (Kreis) */
.type-illus--program{
background:#FEF3C7;
color:#D97706;
}
.type-illus--program::before{
content:"1";
width:32px; height:32px; border-radius:50%;
background:#D97706; color:#fff;
font-weight:bold; font-size:18px;
}
/* Emoji-/Icon-Varianten */
.type-illus--recurring{ background:#DBEAFE; color:#1E40AF; }
.type-illus--recurring::before{ content:"🔄"; font-size:28px; }
.type-illus--external{ background:#DBEAFE; color:#1E40AF; }
.type-illus--external::before{ content:"👤"; font-size:28px; }
.type-illus--request{ background:#FED7AA; color:#EA580C; }
.type-illus--request::before{ content:"❓"; font-size:28px; }
.type-illus--meeting{ background:#F9FAFB; color:#6B7280; }
.type-illus--meeting::before{ content:"📅"; font-size:28px; }
.type-illus--measurement{ background:#FCE7F3; color:#DB2777; }
.type-illus--measurement::before{ content:"📚"; font-size:28px; }
.type-illus--inline{ background:#CCFBF1; color:#0D9488; }
.type-illus--inline::before{ content:"🔗"; font-size:28px; }
/* ===== “Muster”-Varianten (nur dort, wo wirklich gebraucht) =====
Hinweis: Rahmen jetzt NUR hier, nicht mehr global auf .type-illus */
.type-illus--page{
border:1px dashed #e5e7eb;
background-image:repeating-linear-gradient(0deg,#f0f3fa 0,#f0f3fa 6px,transparent 6px,transparent 14px);
}
.type-illus--guide{
border:1px dashed #e5e7eb;
background-image:linear-gradient(135deg,#f0f7ff 0,#f7fbff 100%);
}
.type-illus--question{
border:1px dashed #e5e7eb;
background-image:radial-gradient(#ffe8f4 2px,transparent 2px);
background-size:12px 12px;
}
.type-illus--finding{
border:1px dashed #e5e7eb;
background-image:linear-gradient(90deg,#e9f9ef 0,#f7fffb 100%);
}
.type-illus--idea{
border:1px dashed #e5e7eb;
background-image:radial-gradient(#fff2d8 2px,transparent 2px);
background-size:14px 14px;
}
.type-illus--comment{
border:1px dashed #e5e7eb;
background:#f6f7fb;
}
.wizard .pm-modal__header{gap:10px}
.wizard-body{max-height:72vh;overflow:auto}
.wizard-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.w-step{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.w-step.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.wizard-actions{display:flex;justify-content:space-between}
.wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.form-col--full{grid-column:1/-1}
.label{font-size:12px;color:#6b7280;margin-bottom:4px;display:block}
.picked-title{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.picked-box{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a}
.participant-banner{margin-top:8px;background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a;padding:8px;border-radius:10px}
/* Assign picker shared */
.pm-seg{display:flex;gap:8px;align-items:center;margin:6px 0}
.flex-spacer{flex:1}
.pm-chip-toggle{padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:12px}
.pm-chip-toggle.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.assign-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gridbox{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;cursor:pointer}
.gridbox-head{display:flex;justify-content:space-between;align-items:center}
.gridbox-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.pm-badge{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.pm-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700}
.small{font-size:12px}
.text-muted{color:#6b7280}
/* Modal + table base */
.pm-modal--overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.pm-modal__box{background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22);width:100%}
.pm-modal__box--lg{max-width:1000px}
.pm-modal__box--md{max-width:720px}
.pm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6}
.pm-modal__title{font-weight:700}
.pm-modal__body{padding:12px 14px}
.pm-modal__actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6;justify-content:flex-end}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px}
.pm-assign-inline{display:block}
.pm-table{width:100%;border-collapse:separate;border-spacing:0}
.pm-table thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;text-align:left;padding:10px}
.pm-table tbody td{border-bottom:1px solid #f3f4f6;padding:10px;vertical-align:top}
.tlt-title {
display: flex;
gap: 8px;
align-items: center;
font-weight: 700;
font-size: 26px;
}
.tlt-inline{display:flex;gap:8px;align-items:center}
.rt-preview{margin-top:6px;color:#374151}
.pm-list__empty{text-align:center;color:#6b7280;padding:16px 0}
/* Richtext inline */
.rt-inline-editor .ck-editor__editable{min-height:160px}
.rt-fallback:empty:before{content:attr(data-placeholder); color:#9ca3af}
/* Colored type chips + icons (unchanged) */
.type-chip{display:inline-flex;align-items:center;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid transparent}
.type-chip i{font-size:12px}
.chip--participant{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.chip--external{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.chip--request{background:#fef3c7;border-color:#fde68a;color:#92400e}
.chip--measure{background:#f5d0fe;border-color:#f0abfc;color:#6b21a8}
.participant-hint{display:inline-block;margin-left:6px;font-size:10px;padding:2px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a}
/* Assignees */
.assignee-button{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;cursor:pointer}
.assignee-label{font-size:12px;color:#374151;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assignee-stack{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* Manager subtasks & action view */
.mgr-subtasks{margin-top:8px;padding:8px 10px;border:1px dashed #e5e7eb;border-radius:10px;background:#fcfcff}
.mgr-subtitle{font-weight:700;color:#111827;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mgr-sub-row{display:flex;gap:8px;align-items:center}
.action-hero__banner{height:140px;border-radius:12px;background:#f3f4f6;background-size:cover;background-position:center}
.action-hero__content{padding:10px 2px}
.action-hero__title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin:8px 0}
.action-hero__rich{margin:8px 0;color:#374151}
/* Picker grids */
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:8px}
.is-selected-btn{outline:2px solid #4f46e5}
.ml-6{margin-left:6px}
/* Wizard / modal / base */
.wizard .pm-modal__header{gap:10px}
.wizard-body{max-height:72vh;overflow:auto}
.wizard-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.w-step{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.w-step.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.wizard-actions{display:flex;justify-content:space-between}
.wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.form-col--full{grid-column:1/-1}
.label{font-size:12px;color:#6b7280;margin-bottom:4px;display:block}
.picked-title{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.picked-box{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff}
/* Assignment modal */
.pm-seg{display:flex;gap:8px;align-items:center;margin:6px 0}
.flex-spacer{flex:1}
.pm-chip-toggle{padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:12px}
.pm-chip-toggle.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.assign-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gridbox{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;cursor:pointer}
.gridbox-head{display:flex;justify-content:space-between;align-items:center}
.gridbox-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.pm-badge{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.pm-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700}
.small{font-size:12px}
.text-muted{color:#6b7280}
/* Table/Base UI */
.pm-modal--overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.pm-modal__box{background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22);width:100%}
.pm-modal__box--lg{max-width:1000px}
.pm-modal__box--md{max-width:720px}
.pm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6}
.pm-modal__title{font-weight:700}
.pm-modal__body{padding:12px 14px}
.pm-modal__actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6;justify-content:flex-end}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px}
.pm-table{width:100%;border-collapse:separate;border-spacing:0}
.pm-table thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;text-align:left;padding:10px}
.pm-table tbody td{border-bottom:1px solid #f3f4f6;padding:10px;vertical-align:top}
.tlt-inline{display:flex;gap:8px;align-items:center}
.rt-preview{margin-top:6px;color:#374151}
.pm-list__empty{text-align:center;color:#6b7280;padding:16px 0}
.pm-input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.pm-input--search{padding-left:36px;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:10px center}
.pm-btn{border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.pm-btn--primary{background:#4f46e5;color:#fff}
.pm-btn--ghost{background:transparent;border:1px solid #e5e7eb;color:#374151}
.tlt-btn{background:transparent;border:0;padding:6px;cursor:pointer;border-radius:8px}
.tlt-btn:hover{background:#f3f4f6}
/* ===== Colored type chips + icons ===== */
.type-chip {
display: inline-flex;
align-items: center;
font-size: 12px;
padding: 4px 10px;
border-radius: 8px;
border: 0px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
font-weight: 700;
}
.type-chip i{font-size:12px}
.chip--participant{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.chip--external{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.chip--request{background:#fef3c7;border-color:#fde68a;color:#92400e}
.chip--measure{background:#f5d0fe;border-color:#f0abfc;color:#6b21a8}
.participant-hint{display:inline-block;margin-left:6px;font-size:10px;padding:2px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a}
/* ===== Assignees ===== */
.assignee-button {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 0px solid #e5e7eb;
border-radius: 999px;
padding: 0px 0px;
cursor: pointer;
font-weight: 700;
}
.assignee-label{font-size:12px;color:#374151;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assignee-stack{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.avatar--xs {
width: 30px;
height: 30px;
font-size: 11px;
background: #f3f4f6;
color: #111827;
border: 0px solid #e5e7eb;
}
.avatar--org {
border-radius: 8px;
width: 32px;
height: 28px;
font-size: 10px;
font-weight: 800;
background: #eef2ff;
color: #3730a3;
border: 1px solid #dbe6ff;
}
.avatar--empty{background:#fff;color:#9ca3af;border:1px dashed #e5e7eb}
/* ===== Manager subtasks & action view ===== */
.mgr-subtasks{margin-top:8px;padding:8px 10px;border:1px dashed #e5e7eb;border-radius:10px;background:#fcfcff}
.mgr-subtitle{font-weight:700;color:#111827;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mgr-sub-row{display:flex;gap:8px;align-items:center}
.action-hero__banner{height:140px;border-radius:12px;background:#f3f4f6;background-size:cover;background-position:center}
.action-hero__content{padding:10px 2px}
.action-hero__title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin:8px 0}
.action-hero__rich{margin:8px 0;color:#374151}
/* ===== Picker grids ===== */
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:8px}
.is-selected-btn{outline:2px solid #4f46e5}
.ml-6{margin-left:6px}
/* ===== Wizard / modal / base UI ===== */
.wizard .pm-modal__header{gap:10px}
.wizard-body{max-height:72vh;overflow:auto}
.wizard-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.w-step{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.w-step.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.wizard-actions{display:flex;justify-content:space-between}
.wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.form-col--full{grid-column:1/-1}
.label{font-size:12px;color:#6b7280;margin-bottom:4px;display:block}
.picked-title{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.picked-box{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff}
/* ===== Assignment modal re-use ===== */
.pm-seg{display:flex;gap:8px;align-items:center;margin:6px 0}
.flex-spacer{flex:1}
.pm-chip-toggle{padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:12px}
.pm-chip-toggle.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.assign-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gridbox{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;cursor:pointer}
.gridbox-head{display:flex;justify-content:space-between;align-items:center}
.gridbox-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.pm-badge{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.pm-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700}
.small{font-size:12px}
.text-muted{color:#6b7280}
/* ===== Table/Base UI ===== */
.pm-modal--overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.pm-modal__box{background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22);width:100%}
.pm-modal__box--lg{max-width:1000px}
.pm-modal__box--md{max-width:720px}
.pm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6}
.pm-modal__title{font-weight:700}
.pm-modal__body{padding:12px 14px}
.pm-modal__actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6;justify-content:flex-end}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px}
.pm-table{width:100%;border-collapse:separate;border-spacing:0}
.pm-table thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;text-align:left;padding:10px}
.pm-table tbody td{border-bottom:1px solid #f3f4f6;padding:10px;vertical-align:top}
.tlt-inline{display:flex;gap:8px;align-items:center}
.rt-preview{margin-top:6px;color:#374151}
.pm-list__empty{text-align:center;color:#6b7280;padding:16px 0}
.pm-input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.pm-input--search{padding-left:36px;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:10px center}
.pm-btn{border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.pm-btn--primary{background:#4f46e5;color:#fff}
.pm-btn--ghost{background:transparent;border:1px solid #e5e7eb;color:#374151}
.tlt-btn{background:transparent;border:0;padding:6px;cursor:pointer;border-radius:8px}
.tlt-btn:hover{background:#f3f4f6}
/* ===== Inspiring labels, participant hint, inline desc edit support ===== */
.participant-banner{grid-column:1/-1;margin-top:8px;padding:10px 12px;border:1px solid #e9f0ff;background:#f5f8ff;border-radius:12px;display:flex;gap:8px;align-items:center}
.participant-hint{display:inline-block;margin-left:6px;font-size:12px;padding:2px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a}
/* ===== Manager subtasks & action view ===== */
.mgr-subtasks{margin-top:8px;padding:8px 10px;border:1px dashed #e5e7eb;border-radius:10px;background:#fcfcff}
.mgr-subtitle{font-weight:700;color:#111827;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mgr-sub-row{display:flex;gap:8px;align-items:center}
.action-hero__banner{height:140px;border-radius:12px;background:#f3f4f6;background-size:cover;background-position:center}
.action-hero__content{padding:10px 2px}
.action-hero__title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin:8px 0}
.action-hero__rich{margin:8px 0;color:#374151}
/* ===== Wizard / modal ===== */
.wizard .pm-modal__header{gap:10px}
.wizard-body{max-height:72vh;overflow:auto}
.wizard-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.w-step{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.w-step.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.wizard-actions{display:flex;justify-content:space-between}
.wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.form-col--full{grid-column:1/-1}
.label{font-size:12px;color:#6b7280;margin-bottom:4px;display:block}
.picked-title{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.picked-box{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff}
/* ===== Assignment page ===== */
.pm-seg{display:flex;gap:8px;align-items:center;margin:6px 0}
.flex-spacer{flex:1}
.pm-chip-toggle{padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:12px}
.pm-chip-toggle.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.assign-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gridbox{border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff;cursor:pointer}
.gridbox-head{display:flex;justify-content:space-between;align-items:center}
.gridbox-row{display:flex;align-items:center;gap:10px;margin-top:6px}
.pm-badge{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.pm-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700}
.small{font-size:12px}
.text-muted{color:#6b7280}
/* ===== Action picker grids (pm-action-card) ===== */
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:8px}
.is-selected-btn{outline:2px solid #4f46e5}
.ml-6{margin-left:6px}
.picked-hint{margin-top:8px}
/* ===== Base UI (reuse) ===== */
.pm-modal--overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.pm-modal__box{background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22);width:100%}
.pm-modal__box--lg{max-width:1000px}
.pm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6}
.pm-modal__title{font-weight:700}
.pm-modal__body{padding:12px 14px}
.pm-modal__actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6;justify-content:flex-end}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px}
.pm-table{width:100%;border-collapse:separate;border-spacing:0}
.pm-table thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;text-align:left;padding:10px}
.pm-table tbody td{border-bottom:1px solid #f3f4f6;padding:10px;vertical-align:top}
.tlt-inline{display:flex;gap:8px;align-items:center}
.rt-preview{margin-top:6px;color:#374151}
.pm-list__empty{text-align:center;color:#6b7280;padding:16px 0}
.pm-input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.pm-input--search{padding-left:36px;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:10px center}
.pm-btn{border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.pm-btn--primary{background:#4f46e5;color:#fff}
.pm-btn--ghost{background:transparent;border:1px solid #e5e7eb;color:#374151}
.tlt-btn{background:transparent;border:0;padding:6px;cursor:pointer;border-radius:8px}
.tlt-btn:hover{background:#f3f4f6}
/* ===== Wizard modal + picker (nice flow) ===== */
.wizard .pm-modal__header{gap:10px}
.wizard-body{max-height:70vh;overflow:auto}
.wizard-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.w-step{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.w-step.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.wizard-actions{display:flex;justify-content:space-between}
.wizard-pane{display:block}
.wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:8px}
.form-col--full{grid-column:1/-1}
.label{font-size:12px;color:#6b7280;margin-bottom:4px;display:block}
/* Picked action summary */
.picked-action{grid-column:1/-1;margin-top:4px}
.picked-title{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.picked-box{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff}
/* Picker grid using pm-action-card */
.picker-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.is-selected-btn{outline:2px solid #4f46e5}
.ml-6{margin-left:6px}
/* General modal + tokens (reuse if already present) */
.pm-modal--overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.pm-modal__box{background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22);width:100%}
.pm-modal__box--lg{max-width:1000px}
.pm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6}
.pm-modal__title{font-weight:700}
.pm-modal__body{padding:12px 14px}
.pm-modal__actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6;justify-content:flex-end}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px}
/* Buttons / inputs (shared) */
.pm-btn{border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.pm-btn--primary{background:#4f46e5;color:#fff}
.pm-btn--ghost{background:transparent;border:1px solid #e5e7eb;color:#374151}
.pm-input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.pm-input--search{padding-left:36px;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:10px center}
/* Table + common small bits (if not already in your CSS) */
.tlt-inline{display:flex;gap:8px;align-items:center}
.pm-table{width:100%;border-collapse:separate;border-spacing:0}
.pm-table thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;text-align:left;padding:10px}
.pm-table tbody td{border-bottom:1px solid #f3f4f6;padding:10px;vertical-align:top}
.tlt-mt-4{margin-top:4px}
.rt-preview{margin-top:6px;color:#374151}
.as-help{color:#6b7280;font-size:12px}
.pm-list__empty{text-align:center;color:#6b7280;padding:16px 0}
.tlt-btn{background:transparent;border:0;padding:6px;cursor:pointer;border-radius:8px}
.tlt-btn:hover{background:#f3f4f6}
/* ===== Fancy wizard modal ===== */
.wizard .pm-modal__header{gap:10px}
.wizard-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.w-step{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151}
.w-step.is-active{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a}
.wizard-pane{display:block}
.wizard-actions{display:flex;justify-content:space-between}
.wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.label{font-size:12px;color:#6b7280;margin-bottom:4px;display:block}
.picked-action{grid-column:1/-1}
.picked-title{font-weight:700;display:flex;align-items:center;gap:8px;margin-top:4px;margin-bottom:6px}
.picked-box{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff}
/* Card view + hover */
.grid-cards{margin-top:10px}
.action-card{position:relative;transition:transform .12s ease, box-shadow .12s ease}
.hover-pop:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.action-card.is-selected{outline:2px solid #4f46e5}
.action-subinfo{margin-top:8px;display:grid;gap:6px}
.mini-list{display:grid;gap:4px}
.mini-row{display:flex;gap:6px;align-items:center}
.small{font-size:12px}
/* Reuse base tokens (if ikke allerede i dit CSS) */
.pm-modal--overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.pm-modal__box{background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.22);width:100%}
.pm-modal__box--lg{max-width:980px}
.pm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6}
.pm-modal__title{font-weight:700}
.pm-modal__body{padding:12px 14px}
.pm-modal__actions{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6;justify-content:flex-end}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px}
.as-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.as-card{border:1px solid #e5e7eb;border-radius:12px;padding:10px;text-align:left;background:#fff;cursor:pointer}
.as-row{display:flex;align-items:center;gap:8px}
.card-row{gap:8px;align-items:center}
.tlt-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.card-note{margin-top:6px;color:#6b7280;font-size:12px;line-height:1.3}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-size:12px;border:1px solid #c7d2fe}
.pm-input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.pm-input--search{padding-left:36px;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:10px center}
.pm-btn{border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.pm-btn--primary{background:#4f46e5;color:#fff}
.pm-btn--ghost{background:transparent;border:1px solid #e5e7eb;color:#374151}
/* ===== Editor / common ===== */
.tlt-inline{display:flex;gap:8px;align-items:center;}
.tlt-btn{background:transparent;border:0;padding:6px;cursor:pointer;border-radius:8px;}
.tlt-btn:hover{background:#f3f4f6;}
.tlt-form-grid{display:grid;grid-template-columns:160px 1fr;gap:8px;align-items:center;}
.tlt-mt-4{margin-top:4px;}
.as-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.as-card{border:1px solid #e5e7eb;border-radius:12px;padding:10px;text-align:left;background:#fff;cursor:pointer;}
.as-card.is-selected{outline:2px solid #4f46e5;}
.as-row{display:flex;align-items:center;gap:8px;}
.as-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#eef2ff;color:#1e3a8a;}
.tlt-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;}
.card-row{gap:8px;align-items:center;}
.pm-list__empty{text-align:center;color:#6b7280;padding:16px 0;}
.pm-chip{display:inline-block;font-size:12px;padding:4px 6px;border-radius:6px;background:#f3f4f6;color:#374151;}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1;padding:6px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151;}
.tag--due{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.tag--urgency{background:#eef2ff;border-color:#c7d2fe;color:#1e3a8a;text-transform:capitalize;}
.tag--done{background:#ecfdf5;border-color:#a7f3d0;color:#065f46;}
.pm-table-wrap {
overflow: auto;
border-radius: 0px;
border: 0px;
border-left-width: 0px;
border-left-style: none;
border-left-color: currentcolor;
border-left: 5px solid #d4d4d4;
}
.pm-table{width:100%;border-collapse:separate;border-spacing:0;}
#outerframeContainer .pm-table thead th {
background: transparent;
text-align: left;
padding: 15px 15px;
border: 0px solid;
border-bottom-width: 0px;
border-bottom-style: solid;
border-bottom-color: currentcolor;
border-bottom: 0px solid #e5e7eb;
font-size: 13px;
}
.pm-table tbody td{border-bottom:1px solid #f3f4f6;padding:10px;vertical-align:top;}
.rt-preview{margin-top:6px;color:#374151;}
.as-help{color:#6b7280;font-size:12px;}
.pm-modal--overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:50;}
.pm-modal__box{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);max-width:720px;width:100%;}
.pm-modal__box--md{max-width:720px;}
.pm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6;}
.pm-modal__title{font-weight:700;}
.pm-modal__body{padding:12px 14px;}
.pm-modal__actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid #f3f4f6;}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:8px;}
.pm-input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;}
.pm-input--search{padding-left:36px;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:10px center;}
.pm-textarea{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;resize:vertical;}
.pm-btn{border:0;border-radius:10px;padding:8px 12px;cursor:pointer;}
.pm-btn--primary{background:#4f46e5;color:#fff;}
.pm-btn--ghost{background:transparent;border:1px solid #e5e7eb;color:#374151;}
/* ===== ToDo "social wall" ===== */
.todo{display:block;}
.todo-toolbar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px;}
.todo-title{display:flex;align-items:center;gap:8px;font-weight:700;}
.todo-controls{display:flex;align-items:center;gap:10px;}
.todo-search{max-width:260px;}
.todo-filter{display:flex;align-items:center;gap:6px;color:#374151;font-size:14px;}
.todo-card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin-bottom:12px;}
.todo-head{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #f3f4f6;}
.todo-name{display:flex;align-items:center;gap:8px;}
.todo-bullet{width:10px;height:10px;border-radius:50%;background:#d1d5db;display:inline-block;}
.todo-bullet.is-overdue{background:#ef4444;}
.todo-meta{display:flex;align-items:center;gap:8px;}
.todo-desc{padding:10px 14px;color:#374151;border-bottom:1px solid #f3f4f6;}
.todo-thread{padding:10px 14px;display:grid;gap:10px;}
.todo-post{display:flex;gap:10px;align-items:flex-start;}
.todo-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.todo-post-body{min-width:0;flex:1;}
.todo-post-meta{display:flex;align-items:center;gap:8px;}
.todo-time{font-size:12px;color:#6b7280;}
.todo-post-text {
white-space: pre-wrap;
margin-top: 4px;
font-size: 11px;
}
.todo-reply{border:1px dashed #e5e7eb;border-radius:10px;padding:8px;}
.todo-reply-row{display:flex;align-items:center;gap:8px;margin-top:6px;}
.todo-type{max-width:160px;}
/* new-standard-collaborators util classes moved from scoped styles */
/* Activities Wall – layout helpers */
.aw-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.aw-count{color:#678;}
.aw-spacer{flex:1;}
.aw-search{max-width:220px;}
.aw-card{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:12px;}
.aw-card-grid{display:grid;grid-template-columns:1fr 180px;gap:8px;align-items:start;}
.aw-actions{text-align:right;}
.aw-item{display:flex;gap:10px;align-items:flex-start;}
.aw-avatar{width:36px;height:36px;border-radius:50%;background:#eef;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.aw-content{min-width:0;flex:1;}
.aw-row{display:flex;align-items:center;gap:8px;}
.aw-title{font-weight:700;}
.aw-desc{white-space:pre-wrap;margin-top:6px;}
.aw-actions-row{display:flex;gap:10px;align-items:center;margin-top:8px;}
.aw-reply{margin-top:10px;}
.aw-reply-grid{display:grid;grid-template-columns:1fr 160px;gap:8px;}
.aw-replies{margin-top:12px;padding-left:12px;border-left:3px solid #f3f4f6;display:grid;gap:10px;}
.aw-reply-item{display:flex;gap:10px;align-items:flex-start;}
.aw-reply-avatar{width:28px;height:28px;border-radius:50%;background:#eef;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.aw-reply-content{min-width:0;flex:1;}
.aw-reply-text{white-space:pre-wrap;margin-top:4px;}
/* Cards grid used in pickers */
.grid-cards{margin-top:8px;}
.card-row{gap:8px; align-items:center;}
.card-note{margin-top:6px; color:#6b7280; font-size:12px; line-height:1.3;}
/* Simple link-like button */
.link-btn{background:transparent;border:0;color:#2563eb;cursor:pointer;padding:4px 6px;border-radius:6px;}
.link-btn:hover{background:#eff6ff;}
/* Tag / pill labels */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1;padding:6px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;color:#374151;}
.tag .tag-text{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tag--link{border-color:#c7d2fe;background:#eef2ff;color:#1e3a8a;}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-size:12px;border:1px solid #c7d2fe;margin-left:6px;}
/* Tasks table tweaks */
.tlt-activities{white-space:nowrap;}
.tlt-mt-4{margin-top:4px;}
.tlt-mt-6{margin-top:6px;}
.tlt-subrow{gap:6px;align-items:center;}
/* Avatars used in pickers */
.tlt-avatar{width:32px;height:32px;border-radius:50%;background:#eef2ff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;}
/* header + chips/badges */
.tlt-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;}
.tlt-title{display:flex;align-items:center;gap:8px;font-weight:800}
.tlt-inline{display:flex;align-items:center;gap:10px}
.date-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f0f9ff;border:1px solid #bae6fd;color:#075985;font-weight:600;font-size:12px;}
.urgency-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid transparent}
.urgency--low{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.urgency--normal{background:#f3f4f6;border-color:#e5e7eb;color:#374151}
.urgency--high{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.type-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid #e5e7eb;font-weight:700;font-size:12px;background:#fff}
.chip--measure{background:#f5f3ff;border-color:#e9d5ff;color:#6b21a8}
.chip--external{background:#eff6ff;border-color:#dbeafe;color:#1d4ed8}
.chip--request{background:#fff7ed;border-color:#ffedd5;color:#c2410c}
.chip--participant{background:#ecfeff;border-color:#cffafe;color:#155e75}
/* todo body */
.todo-bullet{width:8px;height:8px;border-radius:50%;background:#d1d5db;display:inline-block;margin-right:6px}
.todo-bullet.is-overdue{background:#ef4444}
.todo-desc{margin:6px 0 2px;}
.todo-thread{border-top:1px dashed #e5e7eb;margin-top:8px;padding-top:8px;display:grid;gap:8px}
.todo-post {
display: flex;
gap: 10px;
align-items: flex-start;
border-left: 2px solid;
background-color: #fff;
padding: 9px;
}
.todo-avatar{width:28px;height:28px;border-radius:50%;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.todo-post-body{min-width:0;flex:1}
.todo-post-meta{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.todo-post-text{white-space:pre-wrap;line-height:1.35;color:#374151}
.todo-reply{margin-top:8px;border-top:1px dashed #e5e7eb;padding-top:8px}
.todo-reply-row{display:flex;align-items:center;gap:8px;margin-top:6px}
/* action viewer */
.action-hero__banner{height:160px;background:#f8fafc;background-size:cover;background-position:center;border-radius:12px;}
.action-hero__content{padding:10px;}
.action-hero__title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px}
.action-hero__rich{margin-top:6px}
.mgr-subtitle{font-size:12px;opacity:.7;margin:8px 0 6px;display:flex;align-items:center;gap:6px}
.mgr-sub-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.todo-check{width:16px;height:16px;appearance:none;-webkit-appearance:none;outline:none;border:2px solid #cbd5e1;border-radius:4px;background:#fff;margin:0;flex:0 0 auto;}
/* last-column checkbox (input) */
#limesurvey .big-input-check {
width: 18px;
height: 50px;
appearance: checkbox;
cursor: pointer;
}
/* Completed rows: subtle grey, keep controls usable */
.todo-row.is-done {
opacity: 1;
filter: grayscale(25%);
}
.todo-row.is-done .pm-btn,
.todo-row.is-done input,
.todo-row.is-done .rt-preview {
opacity: 1; /* ensure controls readable */
filter: none;
}
/* Non-blocking row overlay for request type */
.row-overlay {
position: absolute;
inset: 6px auto auto 6px;
pointer-events: none; /* don't block clicks */
}
.overlay-chip {
display: inline-flex; align-items:center; gap:6px;
font-size: 12px; line-height: 1;
padding: 6px 8px;
border-radius: 999px;
background: rgba(253,126,20,.08);
color: #b35b00;
border: 1px solid rgba(253,126,20,.25);
backdrop-filter: blur(2px);
}
/* funky native checkbox (same as before) */
.funky-check {
transform: scale(1.35);
inline-size: 22px;
block-size: 22px;
border-radius: 6px;
appearance: none;
border: 2px solid #d0d3ff;
background: #fff;
cursor: pointer;
vertical-align: middle;
transition: transform .1s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
outline: none;
}
/* Layout */
.dash-grid{
display:grid; gap:12px;
grid-template-columns: repeat(12, minmax(0,1fr));
}
.dash-span-2{ grid-column: span 6 / span 6; }
@media (max-width: 1024px){ .dash-span-2{ grid-column: span 12 / span 12; } }
/* Cards */
.dash-card{
grid-column: span 3 / span 3;
background:#fff; border:1px solid #e5e7eb; border-radius:16px;
box-shadow:0 1px 2px rgba(0,0,0,.04);
display:flex; flex-direction:column;
}
.dash-card__head{
padding:12px 14px; font-weight:700; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:8px;
}
.dash-card__body{ padding:14px; }
/* KPI */
.dash-kpi{ display:flex; align-items:center; gap:12px; }
.dash-kpi__icon{
width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
background:#f8fafc; color:#111827; font-size:20px; border:1px solid #eef2f7;
margin:12px 0 12px 12px;
}
.dash-kpi__body{ padding:12px 14px; flex:1; }
.dash-kpi__label{ font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; }
.dash-kpi__value{ font-size:24px; font-weight:800; line-height:1.1; margin-top:2px; }
.dash-kpi__bar{ margin-top:8px; height:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.dash-kpi__barfill{ height:100%; background:#111827; }
/* Coverage list */
.cover-list{ display:flex; flex-direction:column; gap:8px; }
.cover-row{ display:grid; grid-template-columns: 1fr auto 40px; gap:10px; align-items:center; }
.cover-bar{ height:8px; background:#f3f4f6; border-radius:999px; overflow:hidden; }
.cover-fill{ height:100%; background:#111827; min-width:6px; }
/* Lists */
.dash-list li{ display:flex; align-items:center; gap:8px; padding:4px 0; }
.dash-dot{ width:8px; height:8px; border-radius:50%; background:#111827; opacity:.25; }
.dash-date{ margin-left:auto; color:#6b7280; font-size:12px; }
.order-badge{
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:50%;
font-weight:700; font-size:13px;
background:#f3f4f6; color:#111827; border:1px solid #e5e7eb;
}
.todo-row.is-done .order-badge{
background:#f5f5f5; color:#9ca3af; border-color:#eee;
}
.pm-astack{ display:flex; align-items:center; gap:6px; --size:28px; }
.pm-astack__item {
width: 37px;
height: 37px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
color: #111827;
border: 1px solid #fff;
box-shadow: 0 0 0 1px #e5e7eb inset;
margin-left: -10px;
}
.pm-astack__item.avatar--org {
width: 42px;
height: 32px;
border-radius: 8px;
font-size: 11px;
/* background comes from inline style (pastel color) */
color: #1e293b;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: none;
}
.pm-astack__more{ background:#f3f4f6; color:#6b7280; }
.funky-check:focus { box-shadow: 0 0 0 6px rgba(108,92,231,.12); }
.funky-check:checked {
background: linear-gradient(135deg,#6c5ce7,#a66cff);
border-color: #6c5ce7;
transform: scale(1.38);
}
.funky-check:checked::after {
content: "";
position: absolute; inset: 0;
mask: url('data:image/svg+xml;utf8,') center/70% no-repeat;
background: white;
}
.funky-check:not(:checked):hover { border-color:#b6bbff; box-shadow: 0 2px 10px rgba(108,92,231,.08) inset; }
/* funky native checkbox: bigger, bouncy, colorful */
.funky-check {
transform: scale(1.35);
inline-size: 22px;
block-size: 22px;
border-radius: 6px;
appearance: none;
border: 2px solid #d0d3ff;
background: #fff;
cursor: pointer;
vertical-align: middle;
transition: transform .1s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
outline: none;
}
.funky-check:focus { box-shadow: 0 0 0 6px rgba(108,92,231,.12); }
.funky-check:checked {
background: linear-gradient(135deg,#6c5ce7,#a66cff);
border-color: #6c5ce7;
transform: scale(1.38);
}
.funky-check:checked::after {
content: "";
position: absolute; inset: 0;
mask: url('data:image/svg+xml;utf8,') center/70% no-repeat;
background: white;
}
.funky-check:not(:checked):hover { border-color:#b6bbff; box-shadow: 0 2px 10px rgba(108,92,231,.08) inset; }
/* optional: small spacing for comments area */
.todo-thread .todo-post { display:flex; gap:10px; padding:8px 0; border-top:1px dashed #eee; }
.todo-thread .todo-post:first-child { border-top:0; }
.todo-reply { margin-top:10px; }
.switch{ position:relative; width:44px; height:24px; display:inline-block; }
.switch input{ display:none; }
.slider{ position:absolute; cursor:pointer; inset:0; background:#e5e7eb; border-radius:999px; transition:background .2s; }
.slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
input:checked + .slider{ background:#10b981; }
input:checked + .slider:before{ transform:translateX(20px); }
.pill{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:6px 10px; background:#f3f4f6; border:1px solid #e5e7eb; cursor:pointer; }
.pill .av{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.tabbtn{ padding:6px 10px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.tabbtn.is-active{ background:#111827; color:#fff; border-color:#111827; }
.selcard{ border:1px solid #e5e7eb; border-radius:10px; padding:10px; display:flex; align-items:center; justify-content:space-between; }
.selcard + .selcard{ margin-top:8px; }
.selleft{ display:flex; align-items:center; gap:10px; min-width:0; }
.selname{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.smallmuted{ font-size:12px; color:#6b7280; }
.hero-wrap{ position:relative; border-radius:12px; overflow:hidden; border:1px solid #e9ecef; margin-bottom:10px; }
.hero-wrap.is-modal-open{ overflow:visible; z-index:2147483500; position:relative; }
.hero-cover{ transition:200ms; background-size:cover; background-position:center; }
.hero-gradient{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); }
.hero-topbar{ position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.hero-topbtn{ display:inline-flex; align-items:center; gap:6px; color:#000; border-radius:999px; padding:8px 12px; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.95); backdrop-filter:blur(6px); cursor:pointer; font-size:13px; font-weight:500; transition: all 0.2s; }
.hero-topbtn:hover{ background:rgba(255,255,255,1); border-color:rgba(0,0,0,.15); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
/* Publish/Unpublish Action Button Styles */
.hero-topbtn--action{ font-weight:600; }
.hero-topbtn--publish{ background:rgba(79,70,229,.95); color:#fff; border-color:rgba(79,70,229,.2); }
.hero-topbtn--publish:hover{ background:rgba(79,70,229,1); box-shadow: 0 2px 12px rgba(79,70,229,.3); }
.hero-topbtn--unpublish{ background:rgba(220,38,38,.95); color:#fff; border-color:rgba(220,38,38,.2); }
.hero-topbtn--unpublish:hover{ background:rgba(220,38,38,1); box-shadow: 0 2px 12px rgba(220,38,38,.3); }
/* PM-Chip angleichen an hero-topbtn */
.hero-topbar .pm-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.95); backdrop-filter:blur(6px); }
.hero-topbar .pm-chip--public{ background:rgba(16,185,129,.95); color:#fff; border-color:rgba(16,185,129,.2); }
.hero-topbar .pm-chip--draft{ background:rgba(251,146,60,.95); color:#fff; border-color:rgba(251,146,60,.2); }
.hero-bottom{ position:absolute; left:12px; right:12px; bottom:12px; color:#fff; }
.hero-bottomrow{ display:flex; align-items:flex-end; gap:10px; min-width:0; }
.hero-avatar{ display:inline-flex; align-items:center; justify-content:center; width:65px; height:65px; border-radius:50%; font-weight:700; font-size:24px; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.5); }
.hero-avatar--fa{ font-size:24px; }
.hero-avatar--emoji{ font-size:25px; }
.hero-subtitle{ font-size:11px; letter-spacing:.08em; opacity:.9; text-transform:uppercase; }
.hero-title{ font-size:22px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modal-overlay{ position:fixed; inset:0; z-index:2147483600; display:flex; align-items:center; justify-content:center; background:rgba(16,18,27,.45); }
.modal-box{ width:min(1000px,96vw); max-height:90vh; background:#fff; border:1px solid #ececec; border-radius:12px; box-shadow:0 16px 44px rgba(0,0,0,.22); display:flex; flex-direction:column; }
.modal-head{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#fafafa; border-bottom:1px solid #eee; }
.modal-title{ font-size:14px; font-weight:700; }
.modal-actions{ display:flex; gap:8px; align-items:center; }
.modal-apply{ border:1px solid #2563eb; border-radius:8px; padding:8px 14px; background:#3b82f6; color:#fff; cursor:pointer; }
.modal-close{ width:32px; height:32px; border-radius:8px; border:1px solid #e6e6e6; background:#fff; cursor:pointer; padding:3px 8px; }
.modal-body{ display:grid; grid-template-columns:280px 1fr; gap:12px; padding:12px; overflow:auto; }
.modal-aside{ border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fafafa; }
.modal-aside-preview{ height:180px; background:#f2f3f5; position:relative; }
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.img-fallback{ position:absolute; inset:0; background:linear-gradient(120deg,#f5f7fb,#e9edf3); }
.p-10{ padding:10px; }
.fw-800{ font-weight:800; }
.modal-searchrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.modal-search{ min-width:200px; border:1px solid #e3e3e3; border-radius:8px; padding:6px 8px; }
.modal-btn{ border:1px solid #e5e7eb; border-radius:10px; padding:10px; background:#fff; display:flex; align-items:center; gap:10px; cursor:pointer; }
.modal-badge{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:#f1f5f9; }
.grid-icons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.grid-images{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.btn-upload{ border:1px solid #e6f0ff; border-radius:8px; padding:6px 10px; background:#eef5ff; color:#2563eb; cursor:pointer; }
.btn-clear{ border:1px solid #ffd5d5; border-radius:8px; padding:6px 10px; background:#fff5f5; color:#b00020; cursor:pointer; }
.min-w-220{ min-width:220px; }
.m-0{ margin:0; }
.text-sm{ font-size:16px; }
/* Moved to admin_theme scss */
/* Moved to admin_theme scss */
/* Moved to admin_theme scss */
/* Toolbar */
/* Toolbar, tabs, hero */
/* ===== Toolbar & tabs ===== */
#main {
display: flex;
row-gap: 1em;
flex-wrap: wrap;
column-gap: 2em;
justify-content: space-between;
hyphens: none;
margin-top: 9px;
}
/* tasks-list-standard.table.css (modal edit/add) */
.tlt-toolbar {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
margin-top: 15px;
padding: 15px;
}
.tlt-inline{display:flex;gap:8px;align-items:center}
.tlt-type{display:inline-block;font-size:12px;background:#eef2ff;color:#3730a3;padding:2px 8px;border-radius:999px}
.tlt-type[data-type="external"]{background:#ecfeff;color:#155e75}
.tlt-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#f8fafc;color:#334155;padding:4px 8px;border-radius:999px}
.tlt-unsaved{font-weight:400;color:#9ca3af;margin-left:6px}
.tlt-btn{background:transparent;border:none;padding:6px;cursor:pointer;color:#475569;border-radius:8px}
.tlt-btn:hover{color:#111827;background:#f1f5f9}
.tlt-assign-btn{display:inline-flex;align-items:center;gap:8px}
.tlt-avatar{width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.tlt-form-grid{display:grid;grid-template-columns:100px 1fr;gap:10px}
.tlt-row{display:flex;gap:8px;align-items:center}
.tlt-due-opt{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tlt-launch-hint{font-size:12px;color:#64748b}
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:10px}
.user-pick{display:flex;gap:10px;align-items:center;border:1px solid #e5e7eb;border-radius:10px;padding:8px;background:#fff;cursor:pointer}
.user-pick:hover{border-color:#d1d5db}
/* --- Pretty Type Settings (PTS) --- */
.pts-card{
border:1px solid #e5e7eb; border-radius:16px; background:#fff;
overflow:hidden;
}
.pts-head{
display:flex; align-items:center; gap:12px; padding:14px 14px 0 14px; flex-wrap:wrap;
}
.pts-title{
display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px;
}
.pts-controls{ display:flex; gap:10px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.pts-search{ min-width:220px; height:42px; font-size:14px; }
.pts-add{ padding:10px 14px; border-radius:10px; font-weight:700; }
.pts-grid{
display:grid; gap:12px; padding:14px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Card button */
.pts-card-btn{
text-align:left; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
cursor:pointer; transition: box-shadow .14s ease, transform .06s ease, border-color .14s ease;
display:flex; flex-direction:column; gap:10px;
}
.pts-card-btn:hover{ box-shadow:0 8px 26px rgba(0,0,0,.06); transform: translateY(-1px); }
.pts-card-btn.is-selected{
border-color:#4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.pts-card-btn--ghost{
background:linear-gradient(180deg,#fafafa,#fff);
border-style:dashed;
}
/* Little status chip inside card */
.pts-chip{
display:inline-flex; align-items:center; gap:8px;
padding:6px 10px; border-radius:999px; font-size:12px;
background:#f3f4f6; color:#4b5563; font-weight:600; width:max-content;
}
.pts-chip--active{ background:#eef2ff; color:#4338ca; }
/* Avatar */
.pts-avatar{
width:48px; height:48px; border-radius:12px;
background:#eef2ff; color:#3730a3; display:inline-flex; align-items:center; justify-content:center; font-weight:800;
box-shadow: inset 0 0 0 1px rgba(67,56,202,.12);
}
.pts-avatar--ghost{
background:#f8fafc; color:#334155;
}
.pts-row{ display:flex; align-items:center; gap:12px; }
.pts-muted{ color:#6b7280; font-size:12px; }
/* Modal form */
.pm-input--lg{ height:44px; font-size:15px; }
.pts-form{ display:flex; flex-direction:column; gap:12px; }
.pts-form-row{
display:grid; gap:12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pts-col{ min-width:0; }
.pts-hint{ display:flex; align-items:center; gap:8px; color:#6b7280; font-size:12px; }
.ml-6{ margin-left:6px; }
.tlt-badges{display:inline-flex;gap:6px;align-items:center}
.tlt-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#f8fafc;color:#334155;padding:4px 8px;border-radius:999px}
.tlt-badge i{opacity:.8}
.tlt-type{display:inline-block;font-size:12px;background:#eef2ff;color:#3730a3;padding:2px 8px;border-radius:999px}
.tlt-type[data-type="external"]{background:#ecfeff;color:#155e75}
.tlt-btn{background:transparent;border:none;padding:6px;cursor:pointer;color:#475569;border-radius:8px}
.tlt-btn:hover{color:#111827;background:#f1f5f9}
.tlt-step {
font-size: 22px;
background: #fff;
color: #334155;
border-radius: 999px;
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: 700;
padding: 0px;
}
.tlt-unsaved{font-weight:400;color:#9ca3af;margin-left:6px}
.tlt-assign-btn{display:inline-flex;align-items:center;gap:8px}
.tlt-avatar{width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.tlt-edit-grid{display:grid;grid-template-columns:80px 1fr 160px 150px 140px 140px;gap:6px}
.tlt-inline{display:flex;gap:6px;align-items:center}
.tlt-due-opt{display:flex;gap:8px;align-items:center}
.tlt-launch-hint{font-size:12px;color:#64748b}
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:10px}
.user-pick{display:flex;gap:10px;align-items:center;border:1px solid #e5e7eb;border-radius:10px;padding:8px;background:#fff;cursor:pointer}
.user-pick:hover{border-color:#d1d5db}
/* tasks-list-standard.css — nicer, responsive cards */
.tl-wrap{display:flex;flex-direction:column;gap:12px}
.tl-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between}
.tl-title{display:flex;gap:8px;align-items:center;font-weight:700;font-size:16px}
.tl-actions{display:flex;gap:8px;align-items:center}
.tl-toggle{display:flex;gap:6px;align-items:center;font-size:12px;color:#475569}
.tl-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.tl-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.tl-grid{grid-template-columns:1fr 1fr 1fr}}
.tl-card{
position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px 14px 12px;
box-shadow:0 1px 2px rgba(2,6,23,.06);transition:box-shadow .2s,transform .2s,border-color .2s
}
.tl-card:hover{box-shadow:0 6px 16px rgba(2,6,23,.08);transform:translateY(-1px);border-color:#d1d5db}
.tl-card::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:14px 0 0 14px;
background:linear-gradient(180deg,#93c5fd,#6366f1)
}
.tl-card[data-urgency="high"]::before{background:linear-gradient(180deg,#fecaca,#ef4444)}
.tl-card[data-urgency="low"]::before{background:linear-gradient(180deg,#bbf7d0,#16a34a)}
.tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tl-step{font-size:12px;background:#f1f5f9;color:#334155;padding:2px 8px;border-radius:999px}
.tl-type{font-size:12px;background:#eef2ff;color:#3730a3;padding:2px 8px;border-radius:999px}
.tl-type[data-type="external"]{background:#ecfeff;color:#155e75}
.tl-name{font-weight:700;line-height:1.25}
.tl-unsaved{font-weight:400;color:#9ca3af;margin-left:6px}
.tl-desc{margin-top:6px}
.tl-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:#f8fafc;color:#334155;padding:4px 8px;border-radius:999px}
.badge i{opacity:.8}
.tl-buttons{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.btn-transparent{background:transparent;border:none;padding:6px;cursor:pointer;color:#475569;border-radius:8px}
.btn-transparent:hover{color:#111827;background:#f1f5f9}
.tl-edit-grid{display:grid;grid-template-columns:84px 1fr 200px;gap:8px;margin-bottom:8px;align-items:center}
.tl-due{display:grid;grid-template-columns:auto 170px auto 140px auto;gap:8px;align-items:center;margin-bottom:8px}
.tl-due-mode{display:flex;align-items:center;gap:6px;font-size:12px;color:#475569;white-space:nowrap}
.tl-launch-hint{font-size:12px;color:#64748b}
.tl-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.tl-assign{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.tl-actions-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.atv .tabs {
display:flex; align-items:center; gap:8px; padding:6px; background:linear-gradient(180deg,#fff,#fafafa);
border-bottom:1px solid #eee; border-radius:12px 12px 0 0;
}
.as-side .team-chip {
display: none
}
.atv .tab-btn{
border:none; background:transparent; padding:8px 14px; border-radius:999px; cursor:pointer;
font-weight:600; color:#678;
}
.atv .tab-btn.is-active{ background:#111; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.atv .toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px; }
.atv .pill{ background:#f4f5f7; border:1px solid #e6e8eb; padding:6px 10px; border-radius:10px; }
.atv .grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; padding:14px;
}
.atv .card{
background:#fff; border:1px solid #eaeaea; border-radius:16px; overflow:hidden;
box-shadow:0 6px 14px rgba(0,0,0,.05); transition:transform .12s ease, box-shadow .12s ease;
}
.atv .card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08); }
.atv .card .head{
padding:14px 14px 10px; display:flex; gap:10px; align-items:center; border-bottom:1px dashed #f0f0f0;
}
.atv .avatar{
width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center; font-weight:700;
background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff;
}
.atv .title{ font-weight:700; }
.atv .muted{ color:#6b7280; }
.atv .chips{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px 0; }
.atv .chip{
font-size:12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:999px; padding:5px 10px; color:#374151;
}
.atv .chip.link{ cursor:pointer; user-select:none; }
.atv .foot{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; }
.atv .assign-chip{
background:#0ea5e9; color:#fff; border:none; border-radius:999px; padding:6px 10px; cursor:pointer;
box-shadow:0 2px 6px rgba(14,165,233,.25);
}
.atv .assign-chip:hover{ filter:brightness(.95); }
.atv .expand{
padding:6px 14px 14px; border-top:1px solid #f3f4f6; background:linear-gradient(180deg,#fff,#fcfcfc);
}
.atv .exp-table{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.atv .exp-row{
background:#fff; border:1px solid #eee; border-radius:10px; overflow:hidden;
display:grid; grid-template-columns:46px 1fr 110px 80px; align-items:center;
}
.atv .exp-cell{ padding:8px 10px; }
.atv .badge{ font-size:11px; padding:4px 8px; border-radius:999px; }
.atv .badge.open{ background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.atv .badge.done{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.atv .entity-chip{
background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff;
}
.transparent.linklike {
font-size: 12px;
line-height: 14px;
color: blue;
}
/* === DRILL PIVOT (All only) ============================================= */
.dpivot {
display: flex;
flex-direction: column;
gap: 12px;
}
/* toolbar chips */
.dpivot .chip-toggle {
padding: 6px 10px;
border: 1px solid #dcdcdc;
background: #fff;
border-radius: 10px;
cursor: pointer;
transition: box-shadow .15s ease, border-color .15s ease;
}
.dpivot .chip-toggle.is-active {
border-color: #111;
box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset;
font-weight: 700;
}
/* table shell */
.dpivot-table {
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
overflow: auto;
box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.dpivot-table table {
min-width: 100%;
border-collapse: collapse;
}
.dpivot-table thead {
position: sticky;
top: 0;
z-index: 1;
background: linear-gradient(180deg,#fafafa,#f5f5f5);
}
.dpivot-table thead th {
padding: 10px 10px;
border-bottom: 1px solid #eaeaea;
font-weight: 700;
font-size: 13px;
color: #222;
text-align: center;
white-space: nowrap;
}
.dpivot-table thead th:first-child,
.dpivot-table tbody td:first-child {
width: 42px;
text-align: center;
}
.dpivot-table tbody td {
padding: 8px 10px;
border-top: 1px solid #f6f6f6;
vertical-align: middle;
}
.dpivot-row:hover td {
background: #fcfcff;
}
/* expander button */
.dpivot-expander {
width: 28px;
height: 28px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
cursor: pointer;
display: grid;
place-items: center;
}
/* scope column + indentation */
.scope-cell {
text-align: left !important;
}
.scope-cell .scope-text {
all: unset;
cursor: pointer;
display: inline-block;
}
.indent-0 { padding-left: 0; }
.indent-1 { padding-left: 22px; }
.indent-2 { padding-left: 44px; }
.indent-3 { padding-left: 66px; }
/* level markers (T/C/F/Q) */
.lvl-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
font-weight: 700;
font-size: 12px;
margin-right: 8px;
border: 1px solid transparent;
}
.lvl-T { color:#111; background:#eef2ff; border-color:#e0e7ff; }
.lvl-C { color:#1f2937; background:#e5f3ff; border-color:#dbeafe; }
.lvl-F { color:#374151; background:#ecfdf5; border-color:#d1fae5; }
.lvl-Q { color:#6b7280; background:#f3f4f6; border-color:#e5e7eb; }
/* font sizing per row type */
.row--topic .scope-cell .scope-text { font-size: 16px; font-weight: 800; letter-spacing:.2px; }
.row--chapter .scope-cell .scope-text { font-size: 15px; font-weight: 700; }
.row--factor .scope-cell .scope-text { font-size: 14px; font-weight: 700; }
.row--question .scope-cell .scope-text { font-size: 13px; font-weight: 500; }
/* KPI text */
.kpi { font-variant-numeric: tabular-nums; font-weight: 600; }
/* happiness chip with smiley */
/* Root causes list transitions */
.rc-list-move {
transition: transform 250ms ease, opacity 200ms ease;
}
.rc-list-enter-active, .rc-list-leave-active {
transition: all 250ms ease;
}
.rc-list-enter, .rc-list-leave-to {
opacity: 0;
transform: scale(0.98);
}
/* ===== Program shell layout ===== */
.pm-panel.pm-panel--tall {
background: transparent;
padding: 0px 30px;
width: 100%;
}
.mt-14 {
margin-top: 0px;
padding: 10px 0px;
background-color: transparent;
}
.prog-shell {
display: grid;
grid-template-columns: 330px 1fr;
gap: 16px;
align-items: start;
}
@media (max-width: 1100px){ .prog-shell{ grid-template-columns: 1fr; } }
/* ===== Header row (title + actions + avatar stacks) ===== */
.prog-head{
display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.prog-head .prog-back-btn {
border: 0px solid #e5e7eb;
border-radius: 12px;
padding: 8px 10px;
background: transparent;
box-shadow: none;
}
.prog-head__title{
font-weight:800; font-size:18px; letter-spacing:.2px;
}
.prog-head__spacer{ flex:1; }
.prog-head__avatars {
display: flex;
align-items: center;
gap: 24px;
background: transparent;
border: 0px solid #e5e7eb;
border-radius: 14px;
padding: 0px;
box-shadow: none;
}
.prog-head__avatar-group {
display: flex;
align-items: center;
gap: 8px;
}
.prog-head__avatar-group label{
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
}
/* ===== Content surface ===== */
.prog-shell{ min-width: 0; }
.prog-surface{
background:#fff; border:1px solid #e5e7eb; border-radius:16px;
box-shadow:0 1px 2px rgba(0,0,0,.04);
padding: 0px;
min-width: 0; max-width: 100%; overflow-x: hidden;
}
.prog-surface--full{ padding:0; overflow:hidden; }
.prog-section{ display:block; padding:0 15px; min-width: 0; max-width: 100%; overflow-x: hidden; }
/* ===== Sidebar ===== */
.prog-side{ top:10px;
display:flex; flex-direction:column; gap:8px;
}
.prog-menu{
background:#fff; border:1px solid #e5e7eb; border-radius:16px;
box-shadow:0 1px 2px rgba(0,0,0,.04);
padding:8px;
}
.prog-menu__group{ padding:6px 6px 2px; }
/* Task sidebar with scrollbar after 10 items */
.prog-menu__group {
max-height: 550px;
overflow-y: auto;
overflow-x: hidden;
}
/* Custom scrollbar styling for task list */
.prog-menu__group::-webkit-scrollbar {
width: 6px;
}
.prog-menu__group::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
.prog-menu__group::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.prog-menu__group:hover::-webkit-scrollbar-thumb {
background: #94a3b8;
}
.prog-menu__label{
font-size:11px; color:#6b7280; padding:4px 8px 6px; text-transform:uppercase; letter-spacing:.06em;
}
.prog-item{
width:100%; display:flex; align-items:center; gap:10px;
padding:8px 10px; border-radius:12px; border:1px solid transparent;
color:#111827; background:transparent; cursor:pointer;
}
.prog-item:hover{ background:#f8fafc; border-color:#eef2f7; }
.prog-item.is-active{
background:#111827; color:#fff; border-color:#111827;
box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.prog-item i{ width:18px; text-align:center; }
.prog-badge{
margin-left:auto; font-weight:700; font-size:12px; line-height:1;
background:#f3f4f6; color:#111827; border-radius:999px; padding:4px 8px;
}
.is-active .prog-badge{ background:rgba(255,255,255,.2); color:#fff; }
/* ===== Small helpers ===== */
.text-muted{ color:#6b7280; }
.min-w-0{ min-width:0; }
.pm-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Chips group for factor filters in Root Causes */
.rc-filters { display:flex; flex-wrap:wrap; gap:6px; }
.rc-filters .chip-toggle { padding:6px 10px; border:1px solid #dcdcdc; background:#fff; border-radius:10px; cursor:pointer; }
.rc-filters .chip-toggle.is-active { border-color:#111; box-shadow:0 0 0 2px rgba(0,0,0,.06) inset; font-weight:700; }
.happy-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 700;
font-size: 12px;
}
.happy--red { color:#b91c1c; background:#fee2e2; border-color:#fecaca; }
.happy--yellow { color:#92400e; background:#fef3c7; border-color:#fde68a; }
.happy--green { color:#065f46; background:#d1fae5; border-color:#a7f3d0; }
.happy--muted { color:#4b5563; background:#f3f4f6; border-color:#e5e7eb; }
/* smiley icons */
.ico { display:inline-flex; width: 16px; height: 16px; }
.face-head { fill: var(--face-fill, transparent); stroke: currentColor; stroke-width: 2; }
.face-eye { fill: currentColor; }
.face-mouth { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.ico--red { color:#ef4444; --face-fill:#fee2e2; }
.ico--amber { color:#f59e0b; --face-fill:#fef3c7; }
.ico--green { color:#10b981; --face-fill:#d1fae5; }
/* header icon alignment */
.header-face { display:inline-flex; align-items:center; gap:6px; justify-content:center; }
/* small helper for empty state */
.table-empty {
padding: 12px;
opacity: .7;
text-align: center;
}
/* container */
.dpivot { display:flex; flex-direction:column; gap:12px; }
/* toolbar chips */
.chip-toggle {
padding:6px 10px; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer;
font-size:13px;
}
.chip-toggle.is-active { border-color:#999; font-weight:700; }
/* table */
.dpivot-table table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.dpivot-table thead tr { background:#fafafa; }
.dpivot-table th, .dpivot-table td { padding:8px; border-bottom:1px solid #eee; }
.dpivot-table th.scope-cell, .dpivot-table td.scope-cell { text-align:left; }
.dpivot-table td.kpi { text-align:center; white-space:nowrap; cursor:pointer; }
.dpivot-table .table-empty { padding:10px; opacity:.7; text-align:center; }
/* header faces */
.header-face { display:inline-flex; align-items:center; gap:8px; }
.header-face .ico { width:22px; height:22px; display:inline-flex; }
.header-face .ico svg { width:100%; height:100%; }
.face-head { fill:#fff; stroke:#ddd; }
.face-eye { fill:#444; }
.ico--red .face-head { stroke:#ff8a80; fill:#ffecec; }
.ico--amber .face-head { stroke:#ffd166; fill:#fff7e6; }
.ico--green .face-head { stroke:#8bd18b; fill:#ecfbec; }
.ico--red .face-mouth { stroke:#d22; fill:none; stroke-width:1.6; }
.ico--amber .face-mouth { stroke:#c99a00; fill:none; stroke-width:1.6; }
.ico--green .face-mouth { stroke:#1b7d1b; fill:none; stroke-width:1.6; }
/* expand/collapse */
.dpivot-expander {
width:26px; height:26px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.dpivot-expander .fa-solid { font-size:14px; color:#444; }
/* level badges + indents */
.lvl-badge {
display:inline-flex; align-items:center; justify-content:center;
width:20px; height:20px; border-radius:6px; font-weight:700; font-size:12px; margin-right:8px;
border:1px solid #ddd; background:#f7f7f7; color:#444;
}
.lvl-T { background:#eef3ff; border-color:#c9d6ff; }
.lvl-C { background:#f5f0ff; border-color:#d9cdf9; }
.lvl-F { background:#eafcf3; border-color:#c8edd9; }
.lvl-Q { background:#fff8e8; border-color:#ffe1a6; }
.indent-0 { padding-left: 6px; }
.indent-1 { padding-left: 26px; }
.indent-2 { padding-left: 46px; }
.indent-3 { padding-left: 66px; }
.scope-text { all:unset; cursor:pointer; color:#111; font-weight:600; }
/* row emphasis by type */
.dpivot-row.row--topic .scope-text { font-size:15px; }
.dpivot-row.row--chapter .scope-text { font-size:14px; font-weight:600; }
.dpivot-row.row--factor .scope-text { font-size:13px; font-weight:600; }
.dpivot-row.row--question .scope-text { font-size:12px; font-weight:500; }
/* red alert icon in "1–3" column */
.red-flags { color:#d22; margin-left:6px; font-size:12px; vertical-align:middle; }
/* ===== Sidebar metrics ===== */
.as-metric-card .as-kpi {
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:6px 0; border-bottom:1px dashed #eee;
}
.as-metric-card .as-kpi:last-child { border-bottom:none; }
.as-metric-card .as-kpi .label { opacity:.7; }
.as-metric-card .as-kpi .value { font-weight:700; }
/* Compact smiley in the sidebar */
.as-happy .happy-chip { padding:2px 8px; }
.as-happy .happy-chip .ico { width:16px; height:16px; }
/* ===== Sidebar team picker (concerning-like) ===== */
.as-team-topbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.as-team-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.as-chip-btn {
padding:6px 10px; border:1px solid #ddd; border-radius:999px; background:#fff; cursor:pointer; font-size:12px;
}
.as-chip-btn--active { border-color:#111; font-weight:700; }
.pm-list__header { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.pm-input--search { max-width:220px; }
.pm-badge { display:inline-block; padding:2px 6px; background:#f4f4f5; border:1px solid #e6e6e7; border-radius:999px; }
.pm-avatar { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.gridbox {
border:1px solid #eee; border-radius:10px; padding:8px; background:#fff;
}
.pm-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border: 0px solid #ddd;
border-radius: 10px;
background: #c4bbe5;
font-size: 12px;
background: #eef2ff;
color: #1e3a8a;
font-weight: 700;
}
.pm-chip__x { background:none; border:none; cursor:pointer; font-size:12px; opacity:.7; }
.pm-empty { color:#777; font-size:12px; }
.pm-hint { color:#555; }
.pm-hint--error { color:#b10000; }
/* ============= Drill Pivot (All only) ============= */
.dpivot { display:flex; flex-direction:column; gap:12px; }
/* toolbar */
.chip-toggle {
padding:6px 10px; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer;
font-size:13px;
}
.chip-toggle.is-active { border-color:#999; font-weight:700; }
/* table wrapper */
.dpivot-table table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.dpivot-table thead tr { background:#fafafa; }
.dpivot-table th, .dpivot-table td { padding:8px; border-bottom:1px solid #eee; }
.dpivot-table th.scope-cell, .dpivot-table td.scope-cell { text-align:left; }
.dpivot-table td.kpi { text-align:center; white-space:nowrap; cursor:pointer; }
.dpivot-table td.actions-cell { text-align:right; width:42px; }
.dpivot-table .table-empty { padding:10px; opacity:.7; text-align:center; }
/* header faces */
.header-face { display:inline-flex; align-items:center; gap:8px; }
.header-face .ico { width:22px; height:22px; display:inline-flex; }
.header-face .ico svg { width:100%; height:100%; }
.face-head { fill:#fff; stroke:#ddd; }
.face-eye { fill:#444; }
.ico--red .face-head { stroke:#ff8a80; fill:#ffecec; }
.ico--amber .face-head { stroke:#ffd166; fill:#fff7e6; }
.ico--green .face-head { stroke:#8bd18b; fill:#ecfbec; }
.ico--red .face-mouth { stroke:#d22; fill:none; stroke-width:1.6; }
.ico--amber .face-mouth { stroke:#c99a00; fill:none; stroke-width:1.6; }
.ico--green .face-mouth { stroke:#1b7d1b; fill:none; stroke-width:1.6; }
/* expand/collapse */
.dpivot-expander {
width:26px; height:26px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.dpivot-expander .fa-solid { font-size:14px; color:#444; }
/* level badges + indents */
.lvl-badge {
display:inline-flex; align-items:center; justify-content:center;
width:20px; height:20px; border-radius:6px; font-weight:700; font-size:12px; margin-right:8px;
border:1px solid #ddd; background:#f7f7f7; color:#444;
}
.lvl-T { background:#eef3ff; border-color:#c9d6ff; }
.lvl-C { background:#f5f0ff; border-color:#d9cdf9; }
.lvl-F { background:#eafcf3; border-color:#c8edd9; }
.lvl-Q { background:#fff8e8; border-color:#ffe1a6; }
.indent-0 { padding-left: 6px; }
.indent-1 { padding-left: 26px; }
.indent-2 { padding-left: 46px; }
.indent-3 { padding-left: 66px; }
.scope-text { all:unset; cursor:pointer; color:#111; font-weight:600; }
/* row emphasis by type */
.dpivot-row.row--topic .scope-text { font-size:15px; }
.dpivot-row.row--chapter .scope-text { font-size:14px; font-weight:600; }
.dpivot-row.row--factor .scope-text { font-size:13px; font-weight:600; }
.dpivot-row.row--question .scope-text { font-size:12px; font-weight:500; }
/* red alert icon + label in "1–3" column */
.red-flags { color:#d22; margin-left:6px; font-size:12px; vertical-align:middle; }
.label { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; line-height:1; margin-left:6px; }
.label--alert { background:#ffe5e5; color:#b10000; border:1px solid #ffb1b1; }
/* happiness chip (with smiley) */
.happy-chip {
display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px;
border:1px solid #e5e7eb; background:#fafafa;
}
.happy--red { background:#ffecec; border-color:#ffb8b8; color:#9a1111; }
.happy--yellow { background:#fff7e6; border-color:#ffd68a; color:#8a6a00; }
.happy--green { background:#ecfbec; border-color:#bfe7bf; color:#156d15; }
.happy--muted { opacity:.7; }
.happy-chip .ico { width:18px; height:18px; display:inline-flex; }
.happy-chip .ico svg { width:100%; height:100%; }
/* actions */
.icon-btn {
width:28px; height:28px; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn:hover { background:#f7f7f7; }
/* ============= Modal (Workshop Picker & Note) ============= */
.pm-modal {
position:fixed; inset:0; background:rgba(0,0,0,.25);
display:flex; align-items:center; justify-content:center; z-index:1000;
}
.pm-modal__panel {
width:920px; max-width:92vw; background:#fff; border-radius:12px; border:1px solid #e5e7eb;
box-shadow:0 16px 48px rgba(0,0,0,.15); overflow:hidden;
}
.pm-modal__head, .pm-modal__foot {
padding:10px 12px; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pm-modal__foot { border-top:1px solid #eee; border-bottom:none; }
.pm-modal__body { padding:12px; max-height:70vh; overflow:auto; }
.pm-input, .pm-textarea, .pm-select {
width:100%; border:1px solid #ddd; border-radius:8px; padding:8px 10px; font-size:14px; background:#fff;
}
.pm-textarea { min-height:140px; }
.pm-btn { border-radius:10px; padding:8px 12px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.pm-btn--primary { background:#111; color:#fff; border-color:#111; }
.pm-btn--ghost { background:#fff; }
.pm-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(var(--pm-min,260px), 1fr)); }
.workshop-list { display:grid; gap:8px; }
.workshop-item {
border:1px solid #eee; border-radius:10px; padding:8px; display:flex; align-items:flex-start; gap:10px; background:#fff;
}
.workshop-item.is-selected { border-color:#111; box-shadow:0 0 0 2px #111 inset; }
.workshop-item h4 { margin:0; font-size:14px; }
.workshop-item p { margin:4px 0 0; font-size:12px; opacity:.8; }
/* helpers */
.flex { display:flex; }
.items-center { align-items:center; }
/* Minimal section (no hero) */
.cu-minimal{ display:flex; flex-direction:column; gap:14px; }
/* Controls */
.cu-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; }
.cu-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.cu-search{ display:flex; gap:8px; align-items:center; }
/* Grid wrapper so overlay can be scoped to cards only */
.cu-grid-wrap{ position:relative; }
/* Grid & cards */
.cu-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:12px;
}
.cu-card{
background:#fff; border:1px solid #e5e7eb; border-radius:14px;
padding:12px; display:flex; flex-direction:column; gap:10px;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cu-card.is-dimmed{ opacity:.55; filter:saturate(.85); pointer-events:none; }
.cu-card-head{ display:flex; align-items:center; gap:10px; }
.cu-logo{
width:34px; height:34px; border-radius:8px; border:1px solid rgba(0,0,0,.06);
background:#fff; object-fit:contain; padding:4px;
}
.cu-meta{ min-width:0; }
.cu-name{ font-weight:700; }
.cu-cat{ font-size:12px; color:#6b7280; }
.cu-desc{ color:#374151; font-size:14px; min-height:38px; }
.cu-how{ display:flex; gap:8px; align-items:flex-start; font-size:12px; color:#6b7280; }
.cu-how i{ margin-top:2px; }
.cu-how-text{ line-height:1.4; }
.cu-actions{ display:flex; gap:8px; margin-top:2px; }
/* Hover microinteraction */
.hover-pop{ transition: transform .08s ease, box-shadow .12s ease; }
.hover-pop:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
/* Pills */
.cu-pill{
display:inline-block; padding:4px 10px; border-radius:999px;
font-size:12px; font-weight:600; letter-spacing:.2px;
background:#eef2ff; color:#3730a3; border:1px solid #e5e7eb;
}
/* Grid-only overlay */
.cu-grid-overlay{
position:absolute; inset:0; z-index:5;
background:rgba(15,23,42,.55); /* transparent grey */
backdrop-filter: blur(2px);
display:flex; align-items:center; justify-content:center;
padding:24px;
}
.cu-overlay__panel{
width:min(720px, 96vw);
background:#fff; border-radius:20px;
box-shadow: 0 30px 80px rgba(0,0,0,.35);
padding:28px; text-align:center;
border:1px solid rgba(0,0,0,.06);
}
.cu-overlay__title{ margin:8px 0 6px; font-size:26px; line-height:1.25; }
.cu-overlay__text{ margin:0 0 14px; color:#5b6472; }
.cu-overlay__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.cu-overlay__note{ margin-top:8px; font-size:12px; color:#6b7280; }
/* Optional: keep page scroll intact since overlay is local to grid */
.justify-between { justify-content:space-between; }
.justify-end { justify-content:flex-end; }
.gap-6 { gap:6px; }
.gap-8 { gap:8px; }
.gap-10 { gap:10px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.text-xs { font-size:12px; }
.opacity-70 { opacity:.7; }
.opacity-60 { opacity:.6; }
.min-w-0 { min-width:0; }
.mt-6 { margin-top:6px; }
.mb-8 { margin-bottom:8px; }
.ml-6 { margin-left:6px; }
.rounded-12 { border-radius:12px; }
.rounded-full { border-radius:999px; }
.shadow-soft { box-shadow: 0 1px 0 rgba(16,24,40,0.04); }
.border { border:1px solid #e5e7eb; }
.bg-white { background:#fff; }
.gap-8 { gap:8px; }
.mt-8 { margin-top:8px; }
.transparent { background:none; border:none; cursor:pointer; }
/* Red zone highlight in KPI row */
.as-alert {
color:#7f1d1d;
}
.as-alert .fa-triangle-exclamation {
margin-right:6px;
}
/* ====== Sidebar header & layout ====== */
.as-side {
width:260px; min-width:260px;
}
.as-side .pm-card + .pm-card {
margin-top: 0px;
}
.as-side button.transparent {
background-color: transparent;
color: #606060;
padding: 5px 8px;
font-size: 14px;
}
.as-sidehdr {
display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.as-sidehdr__title { font-weight:700; font-size:14px; }
.as-sidehdr__btn { display:inline-flex; align-items:center; gap:8px; }
/* small pill for counts */
.as-pill {
display:inline-flex; align-items:center; gap:6px;
padding:2px 8px; border:1px solid #e5e7eb; border-radius:999px; background:#fff;
font-size:12px;
}
/* selected team chips */
.as-chips { display:flex; flex-wrap:wrap; gap:6px; }
.as-chip {
display:inline-flex; align-items:center; gap:6px;
padding:4px 8px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-size:12px;
}
.as-chip__x { background:none; border:none; cursor:pointer; font-size:12px; opacity:.7; }
/* ====== KPI card (Happiness + Employees) ====== */
.as-metric-card .as-kpi {
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:6px 0; border-bottom:1px dashed #eee;
}
.as-metric-card .as-kpi:last-child { border-bottom:none; }
.as-metric-card .as-kpi .label { opacity:.75; }
.as-metric-card .as-kpi .value { font-weight:700; }
/* Smileys (same style family you used) */
.happy-chip {
display:inline-flex; align-items:center; gap:6px;
padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; font-weight:600;
}
.happy-chip .ico { width:18px; height:18px; display:inline-block; }
.happy-chip .ico svg { width:100%; height:100%; display:block; }
.happy-chip .face-head { fill:none; stroke:#cbd5e1; stroke-width:1.2; }
.happy-chip .face-eye { fill:#334155; }
.happy-chip .face-mouth{ fill:none; stroke:#334155; stroke-width:1.5; stroke-linecap:round; }
.happy--red { background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }
.happy--yellow { background:#fef9c3; border-color:#fde68a; color:#713f12; }
.happy--green { background:#dcfce7; border-color:#bbf7d0; color:#14532d; }
.happy--muted { background:#f8fafc; border-color:#e2e8f0; color:#334155; }
/* ====== Modal ====== */
.as-modal {
position:fixed; inset:0; background:rgba(15,23,42,.45);
display:flex; align-items:center; justify-content:center; z-index:1000;
}
.as-modal__panel {
width:min(920px, 92vw); max-height:88vh; overflow:auto;
background:#fff; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.25);
border:1px solid #e5e7eb;
}
.as-modal__head, .as-modal__foot {
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:12px 14px; border-bottom:1px solid #f1f5f9;
}
.as-modal__foot { border-top:1px solid #f1f5f9; border-bottom:none; }
.as-modal__body { padding:14px; }
.as-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.as-tab {
padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; cursor:pointer; font-size:12px;
}
.as-tab.is-active { border-color:#0f172a; font-weight:700; }
.as-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.as-card {
border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:8px;
}
.as-card__top { display:flex; align-items:center; justify-content:space-between; gap:8px !important;}
.as-badge { display:inline-block; padding:2px 6px; border:1px solid #e5e7eb; border-radius:999px; background:#f8fafc; font-size:12px; }
.as-row { display:flex; align-items:center; gap:10px; margin-top:6px; }
.as-avatar { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; background:#f1f5f9; }
.as-muted { color:#64748b; font-size:12px; }
/* Buttons (reuse your pm-btn palette) */
.pm-btn { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.pm-btn--primary { background:#111827; color:#fff; border-color:#111827; }
.pm-btn--ghost { background:#fff; color:#111827; }
.pm-input { border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; }
.pm-input--search { max-width:220px; }
/* minimalist styles—tilpas efter behov */
.chip-toggle{ border:1px solid #ccc; padding:4px 8px; border-radius:14px; background:#fff; cursor:pointer; }
.chip-toggle.is-active{ background:#111; color:#fff; border-color:#111; }
.kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:10px; margin:8px 0 16px; }
.kpi-card{ border:1px solid #eee; border-radius:12px; padding:12px; background:#fff; }
.kpi-card .kpi-title{ font-size:12px; opacity:.7; margin-bottom:6px; }
.kpi-card .kpi-value{ font-size:20px; font-weight:700; }
.kpi-red .kpi-title{ color:#b3261e; } .kpi-yellow .kpi-title{ color:#ad6800; } .kpi-green .kpi-title{ color:#0b7a3a; } .kpi-happy .kpi-title{ color:#0b5fa4; }
.tables-grid{ display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:14px; }
.kpi-table{ border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.kpi-table__header{ padding:10px 12px; font-weight:700; border-bottom:1px solid #eee; }
.kpi-table__title{ font-size:14px; }
.kpi-table__body table{ width:100%; border-collapse:collapse; }
.kpi-table__body thead th{ text-align:left; font-size:12px; opacity:.8; padding:8px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.kpi-table__body tbody td{ padding:8px 10px; border-bottom:1px solid #f7f7f7; }
.col-level{ white-space:nowrap; }
.lvl-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:800; margin-right:6px; background:#eee; }
.lvl-T{ background:#e8f5ff; color:#0369a1; } .lvl-C{ background:#fff8e1; color:#ad6800; } .lvl-F{ background:#e8faef; color:#0b7a3a; }
.col-kpi{ text-align:right; font-variant-numeric:tabular-nums; }
.table-empty{ text-align:center; padding:16px; color:#777; }
.red-flags{ color:#b3261e; margin-left:6px; }
@media (max-width: 1024px){
.kpi-grid{ grid-template-columns:repeat(2,minmax(120px,1fr)); }
.tables-grid{ grid-template-columns:1fr; }
}
/* Controls */
.ov-sub{ font-size:12px; opacity:.75; }
.ov-controls{ display:flex; align-items:center; gap:8px; }
.chip-toggle{ border:1px solid #ccc; padding:4px 8px; border-radius:14px; background:#fff; cursor:pointer; }
.chip-toggle.is-active{ background:#111; color:#fff; border-color:#111; }
/* KPI cards */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:10px; margin:8px 0 16px; }
.kpi-card{ border:1px solid #eee; border-radius:12px; padding:12px; background:#fff; }
.kpi-title{ font-size:12px; opacity:.7; margin-bottom:6px; }
.kpi-row{ display:flex; align-items:center; gap:8px; }
.kpi-value{ font-size:20px; font-weight:700; }
.kpi-red .kpi-title{ color:#b3261e; } .kpi-yellow .kpi-title{ color:#ad6800; } .kpi-green .kpi-title{ color:#0b7a3a; } .kpi-happy .kpi-title{ color:#0b5fa4; }
/* Tables */
.tables-grid{ display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:14px; }
.kpi-table{ border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.kpi-table__header{ padding:10px 12px; font-weight:700; border-bottom:1px solid #eee; }
.kpi-table__title{ font-size:14px; }
.kpi-table__body table{ width:100%; border-collapse:collapse; }
.kpi-table__body thead th{ text-align:left; font-size:12px; opacity:.8; padding:8px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.kpi-table__body tbody td{ padding:8px 10px; border-bottom:1px solid #f7f7f7; }
.col-level{ white-space:nowrap; }
.lvl-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:800; margin-right:6px; background:#eee; }
.lvl-T{ background:#e8f5ff; color:#0369a1; } .lvl-C{ background:#fff8e1; color:#ad6800; } .lvl-F{ background:#e8faef; color:#0b7a3a; }
.col-kpi{ text-align:right; font-variant-numeric:tabular-nums; }
.table-empty{ text-align:center; padding:16px; color:#777; }
.red-flags{ color:#b3261e; margin-left:6px; }
/* Smileys */
.ico{ display:inline-block; width:22px; height:22px; }
.ico svg{ width:100%; height:100%; }
.ico--red .face-head{ fill:#fde7e7; stroke:#b3261e; }
.ico--amber .face-head{ fill:#fff5e6; stroke:#ad6800; }
.ico--green .face-head{ fill:#e8faef; stroke:#0b7a3a; }
.ico--muted .face-head{ fill:#f3f4f6; stroke:#9ca3af; }
.face-eye{ fill:#111; }
.face-mouth{ fill:none; stroke:#111; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.happy-chip{ display:inline-flex; align-items:center; gap:8px; padding:2px 8px; border-radius:14px; }
.happy--red{ background:#fff1f1; color:#b3261e; }
.happy--yellow{ background:#fff7e8; color:#ad6800; }
.happy--green{ background:#eefcf2; color:#0b7a3a; }
.happy--muted{ background:#f3f4f6; color:#6b7280; }
@media (max-width:1024px){
.kpi-grid{ grid-template-columns:repeat(2,minmax(120px,1fr)); }
.tables-grid{ grid-template-columns:1fr; }
}
.as-side .as-minigrid {
grid-template-columns: none;
}
.as-side {
width: 300px;
min-width: 260px;
display: flex;
flex-direction: column;
gap: 12px;
background-color: #fff;
padding: 0px 10px;
border-right: 1px solid #d4d4d4;
min-height: 100vh;
}
.pm-card {
border: 1px solid #e5e7eb;
border-radius: 15px;
background: #fff;
overflow: hidden;
padding: 10px;
}
.as-side .pm-card {
border: 1px solid #e5e7eb;
border-radius: 0px;
background: transparent;
overflow: hidden;
box-shadow: none;
border: 0px;
border-bottom-width: 0px;
border-bottom-style: none;
border-bottom-color: currentcolor;
padding: 10px 0px;
border-bottom: 1px solid #c6c6c6;
}
.pm-card-body { padding:10px; }
.as-sidehdr { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.as-sidehdr__title { font-weight:700; letter-spacing:.2px; }
.as-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:999px; padding:4px 8px; font-size:12px; background:#fafafa; }
/* ===== "context" header line ===== */
.as-context { font-weight:600; padding:10px; border-top:1px solid #f3f4f6; color:#111827; background:#fafafa; }
/* ===== Selected mini cards ===== */
.as-minigrid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(270px,1fr));
gap: 8px;
}
.as-minicard { border:1px solid #e5e7eb; border-radius:8px; padding:6px; background:#fff; display:flex; align-items:center; gap:8px; }
.as-minicard .mc-avatar { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.as-minicard .mc-main { min-width:0; }
.as-minicard .mc-label { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-minicard .mc-sub { font-size:10px; color:#6b7280; text-transform:uppercase; letter-spacing:.3px; }
.as-minicard .mc-x { margin-left:auto; border:none; background:transparent; cursor:pointer; color:#6b7280; }
.as-minicard .mc-x:hover { color:#111827; }
/* ===== KPI cards ===== */
.kpi-grid { display:grid; grid-template-columns:1fr; gap:10px; padding:10px; }
.kpi-card { border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:10px; }
.kpi-title { font-size:12px; opacity:.75; margin-bottom:6px; }
.kpi-row { display:flex; align-items:center; gap:8px; font-weight:700; }
.kpi-value { font-variant-numeric: tabular-nums; }
.kpi-red .ico--red .face-head { fill:#fee2e2; stroke:#ef4444; }
.kpi-emp .kpi-value, .kpi-teams .kpi-value { font-weight:700; }
/* ===== Happy chip (face + band) ===== */
.happy-chip { display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:3px 8px; border:1px solid #e5e7eb; background:#fafafa; font-weight:600; }
.happy--red { background:#fef2f2; border-color:#fecaca; }
.happy--yellow { background:#fffbeb; border-color:#fde68a; }
.happy--green { background:#ecfdf5; border-color:#a7f3d0; }
.happy--muted { opacity:.6; }
.ico { width:20px; height:20px; display:inline-flex; }
.ico svg { width:100%; height:100%; }
.face-head { fill:#fff; stroke:#9ca3af; }
.face-eye { fill:#111; }
.face-mouth { fill:none; stroke:#111; stroke-linecap:round; stroke-width:1.5; }
.ico--red .face-head { fill:#fee2e2; stroke:#ef4444; }
.ico--amber .face-head { fill:#fef3c7; stroke:#f59e0b; }
.ico--green .face-head { fill:#d1fae5; stroke:#10b981; }
/* red-zone alert */
.as-alert { color:#b91c1c; font-weight:700; }
.as-alert .fa-triangle-exclamation { color:#ef4444; margin-right:6px; }
/* ===== Modal ===== */
.as-modal { position:fixed; inset:0; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; z-index:1000; }
.as-modal__panel { width:min(920px,95vw); max-height:90vh; background:#fff; border-radius:12px; border:1px solid #e5e7eb; display:flex; flex-direction:column; overflow:hidden; }
.as-modal__head, .as-modal__foot { display:flex; align-items:center; justify-content:space-between; padding:10px; border-bottom:1px solid #f3f4f6; }
.as-modal__foot { border-top:1px solid #f3f4f6; border-bottom:none; }
.as-modal__body { padding:10px; overflow:auto; }
.as-tabs { display:flex; gap:6px; flex-wrap:wrap; padding:6px 0; }
.as-tab { border:1px solid #e5e7eb; background:#fff; border-radius:999px; padding:4px 10px; cursor:pointer; font-size:13px; }
.as-tab.is-active { background:#111827; color:#fff; border-color:#111827; }
.as-tab .tab-badge { margin-left:6px; padding:1px 6px; border-radius:999px; font-size:12px; background:#f3f4f6; }
.as-tab.is-active .tab-badge { background:rgba(255,255,255,.25); }
.as-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.as-card { border:1px solid #e5e7eb; border-radius:10px; padding:8px; background:#fff; }
.as-card.is-selected { border-color:#111827; box-shadow:0 0 0 2px rgba(17,24,39,.08) inset; }
.as-card__top { display:flex; justify-content:space-between; align-items:center !important;}
.as-badge { display:inline-flex; align-items:center; font-size:10px; letter-spacing:.3px; text-transform:uppercase; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:999px; padding:2px 6px; }
.as-row { display:flex; gap:10px; align-items:center; margin-top:6px; }
.as-avatar { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.as-muted { color:#6b7280; font-size:12px; }
/* ===== DESCRIPTIONS STYLING ===== */
.collab-wrap .descriptions {
font-size: 14px !important;
margin-bottom: 20px !important;
line-height: 1.4 !important;
color: black !important;
}
/* ===== PROGRAM MENU BUTTONS ALIGNMENT ===== */
.prog-item {
text-align: left !important;
justify-content: flex-start !important;
}
.prog-item .prog-badge {
margin-left: auto !important;
background-color: #dc2626;
color: white !important;
font-weight: 600 !important;
}
/* ===== PROGRAM MENU BUTTON SELECTED STATE ===== */
.prog-item.is-active {
background-color: #f3f4f6 !important;
color: #374151 !important;
font-weight: 500 !important;
}
.prog-item.is-active:hover {
background-color: #e5e7eb !important;
}
/* ===== BUTTON STYLING ===== */
.pm-btn--ghost {
background-color: #f3f4f6 !important;
color: #374151 !important;
border: 1px solid #d1d5db !important;
}
.pm-btn--ghost:hover {
background-color: #e5e7eb !important;
border-color: #9ca3af !important;
color: #111827 !important;
}
.pm-btn--primary {
background-color: #3b82f6 !important;
color: white !important;
border: 1px solid #3b82f6 !important;
}
.pm-btn--primary:hover {
background-color: #2563eb !important;
border-color: #2563eb !important;
color: white !important;
}
.pm-btn--danger {
background-color: #6b7280 !important;
color: white !important;
border: 1px solid #6b7280 !important;
}
.pm-btn--danger:hover {
background-color: #dc2626 !important;
border-color: #dc2626 !important;
color: white !important;
}
.pm-btn--danger:disabled {
background-color: #9ca3af !important;
border-color: #9ca3af !important;
color: #d1d5db !important;
cursor: not-allowed !important;
}
/* ===== SEARCH INPUT FIXES ===== */
.pm-input--search {
padding-left: 36px !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: 10px center !important;
}
.pm-input.pm-input--search {
padding: 6px 10px 6px 36px !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
}
.pm-btn {
border-radius: 8px;
border: none;
padding: 6px 10px;
background: #fff;
cursor: pointer;
box-shadow: none;
}
/* ===== Modern layout scaffolding ===== */
.wrap-modern{ --brand:#4f46e5; --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; }
.dash{ display:flex; flex-direction:column; gap:14px; }
.dash-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 4px; }
.dash-hl{ display:flex; align-items:center; gap:12px; }
.dash-logo{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--brand),#7c3aed); box-shadow:0 6px 24px rgba(79,70,229,.35); }
.dash-title{ font-weight:900; font-size:18px; color:var(--ink); }
.dash-sub{ color:var(--muted); font-size:12px; }
.dash-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-ghost{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-weight:700; color:#111827; }
.btn-primary{ background:var(--brand); color:#fff; border:0; border-radius:12px; padding:8px 12px; font-weight:800; }
.btn-ghost i, .btn-primary i{ margin-right:6px; }
/* ===== Grid ===== */
.grid{ display:grid; gap:12px; }
.grid.kpi-grid{ grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.grid.two{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* ===== Tiles / Cards ===== */
.tile{
border:1px solid var(--line); border-radius:16px; background:#fff;
box-shadow: 0 4px 20px rgba(2,6,23,.04);
}
.tile-head{
padding:12px 14px; border-bottom:1px solid var(--line); font-weight:800; display:flex; align-items:center; gap:8px;
}
.tile-body{ padding:12px 14px; }
.tile-sub{ padding:0 14px 14px 14px; }
/* ===== KPI tiles ===== */
.kpi{ display:flex; align-items:center; gap:12px; padding:12px; }
.kpi .kpi-icon{
width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
background:#f5f7ff; color:var(--brand);
}
.kpi .kpi-main{ flex:1; min-width:0; }
.kpi .kpi-label{ color:var(--muted); font-size:12px; font-weight:700; }
.kpi .kpi-value{ font-size:26px; font-weight:900; color:var(--ink); }
.kpi.warn .kpi-icon{ background:#fff7f5; color:#ef4444; }
.kpi-ring{ align-items:center; }
.ring{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ring-hole{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:var(--ink); border:1px solid var(--line); }
.kpi-sub{ color:var(--muted); font-weight:700; }
/* loading shimmer */
.is-loading{ position:relative; overflow:hidden; }
.is-loading::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.045) 50%, rgba(0,0,0,0) 100%);
animation: shimmer 1.2s infinite; opacity:.25;
}
@keyframes shimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }
/* ===== Avatar Row ===== */
.avr{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.avr-dot{
border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:900; color:#1f2937;
border:1px solid rgba(0,0,0,.06);
}
.avr-more{ padding:0 8px; border-radius:999px; background:#f1f5f9; color:#0f172a; font-weight:800; font-size:12px; }
/* ===== Coverage ===== */
.cover{ display:flex; flex-direction:column; gap:10px; }
.cover-row{ display:grid; grid-template-columns: 1fr 1fr auto; align-items:center; gap:10px; }
.cover-name{ font-weight:700; }
.cover-bar{ height:10px; background:#f3f4f6; border-radius:999px; overflow:hidden; border:1px solid #eaecef; }
.cover-fill{ height:100%; background:linear-gradient(90deg,var(--brand),#7c3aed); }
/* ===== Sparkline ===== */
.spark{ display:flex; align-items:flex-end; gap:6px; min-height:90px; position:relative; }
.spark .bar{ width:10px; background:#e5e7eb; border-radius:6px; }
.spark .bar{ background: linear-gradient(180deg, #c7d2fe, #818cf8); box-shadow: 0 2px 6px rgba(79,70,229,.25); }
/* ===== Urgency bars / legend ===== */
.legend{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:700; margin:8px 0; }
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; background:#cbd5e1; margin-right:6px; }
.dot-high{ background:#fecaca; }
.dot-normal{ background:#c7d2fe; }
.dot-low{ background:#bbf7d0; }
.urg-wrap{ display:grid; gap:10px; }
.urg-top{ display:flex; align-items:center; justify-content:space-between; font-weight:800; }
.urg-bar{ height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden; border:1px solid #e2e8f0; }
.urg-fill{ height:100%; }
.urg-high{ background:#ef4444; }
.urg-normal{ background:#4f46e5; }
.urg-low{ background:#16a34a; }
/* Container card */
.pte-card{ border:1px solid #e5e7eb; border-radius:16px; background:#fff; overflow:hidden; }
.pte-head{ display:flex; align-items:center; gap:12px; padding:14px; flex-wrap:wrap; }
.pte-title{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; }
.pte-controls{ display:flex; gap:10px; align-items:center; margin-left:auto; flex-wrap:wrap; }
.pte-search{ min-width:240px; height:42px; font-size:14px; }
.pte-add{ padding:10px 16px; border-radius:10px; font-weight:700; }
/* Selected chips row */
.pte-selected{ padding:0 14px 8px 14px; display:flex; flex-wrap:wrap; gap:8px; }
.pte-help{ color:#6b7280; font-size:13px; }
.pte-chip{
display:inline-flex; align-items:center; gap:8px; background:#eef2ff; color:#4338ca;
border:1px solid rgba(67,56,202,.15); padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
}
.pte-chip__txt{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pte-chip__x{ border:none; background:transparent; color:#4338ca; cursor:pointer; font-weight:800; }
/* Grid of big cards */
.pte-grid{
display:grid; gap:12px; padding:14px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.pte-card-btn{
text-align:left; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px;
cursor:pointer; transition: box-shadow .14s ease, transform .06s ease, border-color .14s ease;
display:flex; flex-direction:column; gap:12px; min-height:120px;
}
.pte-card-btn:hover{ box-shadow:0 10px 28px rgba(0,0,0,.06); transform: translateY(-1px); }
.pte-card-btn.is-selected{ border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
/* Ghost “Add” card */
.pte-card-btn--ghost{ background:linear-gradient(180deg,#fafafa,#fff); border-style:dashed; }
/* Pill inside card */
.pte-pill{
display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
font-size:12px; background:#f3f4f6; color:#4b5563; font-weight:700; width:max-content;
}
.pte-pill--active{ background:#eef2ff; color:#4338ca; }
/* Avatar and rows */
.pte-row{ display:flex; align-items:center; gap:12px; }
.pte-avatar{
width:54px; height:54px; border-radius:14px; background:#eef2ff; color:#3730a3;
display:inline-flex; align-items:center; justify-content:center; font-weight:800;
box-shadow: inset 0 0 0 1px rgba(67,56,202,.12);
}
/* Layout */
.cu-wrap{ display:flex; flex-direction:column; gap:12px; }
.cu-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cu-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.cu-search{ margin-left:auto; display:flex; gap:8px; align-items:center; }
/* Grid */
.cu-grid-wrap{ position:relative; }
.cu-grid{
display:grid; gap:12px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Card */
.cu-card{
position:relative;
border:1px solid #e5e7eb; border-radius:16px; background:#fff;
box-shadow: 0 4px 20px rgba(2,6,23,.04);
padding:12px;
display:flex; flex-direction:column; gap:10px;
}
.cu-card-head{ display:flex; gap:10px; align-items:center; }
.cu-logo{
width:36px; height:36px; object-fit:contain; border-radius:8px;
background:#f8fafc; border:1px solid #eef2f7; padding:4px;
}
.cu-meta{ min-width:0; }
.cu-name{ font-weight:900; color:#0f172a; }
.cu-cat{ font-size:12px; color:#64748b; font-weight:700; }
.cu-desc{ color:#0f172a; font-weight:600; font-size:13px; }
.cu-how{ display:flex; gap:8px; align-items:flex-start; color:#475569; font-size:12px; }
.cu-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
/* Per-card ribbon when overlayVisible */
.cu-ribbon{
position:absolute; top:10px; right:-8px;
background: linear-gradient(90deg, #111827, #334155);
color:#fff; font-weight:800; font-size:11px;
padding:6px 10px; border-top-left-radius:8px; border-bottom-left-radius:8px;
box-shadow:0 4px 14px rgba(15,23,42,.25);
}
/* Grid-only overlay */
.cu-grid-overlay {
position: absolute;
inset: 0;
background: rgba(39, 70, 144, 0.55);
backdrop-filter: none;
display: flex;
align-items: baseline;
justify-content: center;
z-index: 3;
padding-top: 100px;
}
.cu-grid-overlay__panel{
width:min(720px, 92%);
background: rgba(255,255,255,.94);
border:1px solid #e5e7eb; border-radius:16px;
padding:20px;
text-align:center;
box-shadow: 0 12px 40px rgba(2,6,23,.32);
}
.cu-pill{
display:inline-block; padding:6px 10px; font-weight:900; font-size:11px;
background:#eef2ff; color:#4f46e5; border-radius:999px; border:1px solid #e0e7ff; margin-bottom:6px;
}
.cu-overlay__title{ font-size:22px; font-weight:900; color:#0f172a; margin:6px 0; }
.cu-overlay__text{ color:#334155; font-weight:700; margin-bottom:10px; }
.cu-overlay__actions{ display:flex; gap:10px; justify-content:center; margin:8px 0 2px; }
.cu-overlay__note{ color:#64748b; font-size:12px; margin-top:8px; }
/* Hover microinteraction */
.hover-pop{ transition: transform .08s ease, box-shadow .12s ease; }
.hover-pop:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(2,6,23,.08);}
.pte-avatar--ghost{ background:#f8fafc; color:#334155; }
.pte-muted{ color:#6b7280; font-size:12px; }
/* Add modal form */
.pte-add-form{ display:flex; flex-direction:column; gap:10px; position:relative; }
.pte-add-row{ display:grid; grid-template-columns: 1fr auto; gap:10px; }
/* Suggestions dropdown in modal */
.pte-dropdown{
position:absolute; z-index:60; top:92px; left:0; right:0;
background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.12);
max-height:220px; overflow:auto;
}
.pte-sug{
width:100%; text-align:left; padding:10px 12px; border:0; background:#fff; cursor:pointer;
display:flex; align-items:center; gap:8px; font-size:14px;
}
.pbs-head{ display:flex; align-items:center; justify-content:space-between; }
.pbs-title{ display:flex; align-items:center; gap:10px; font-weight:900; }
.pbs-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.pbs-block__title{ font-weight:900; color:#0f172a; margin-bottom:8px; }
.pbs-subhint{ color:#475569; font-size:12px; margin-top:8px; }
.tile-grid{
display:grid;
gap:12px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tile:hover{ transform:none; box-shadow:none; background:#f4f9ff; border-color:#2a7bd3; }
.tile.is-active{ border:3px solid #2a7bd3; box-shadow:none; background:#e9f3ff; }
.tile.is-active .tile__check{ opacity:1; transform:scale(1); }
.tile.is-disabled{ opacity:.65; cursor:not-allowed; }
.tile.is-disabled:hover{ transform:none; box-shadow: 0 6px 24px rgba(15,23,42,.06); }
.tile__icon-wrap{
flex:0 0 auto;
width:54px; height:54px; border-radius:12px;
background:#f1f5ff; color:#4f46e5;
display:flex; align-items:center; justify-content:center;
border:1px solid #e0e7ff;
}
.tile__icon{ font-size:24px; }
.tile__content{ min-width:0; flex:1; }
.tile__title{ font-weight:900; color:#0f172a; }
.tile__desc{ color:#334155; margin-top:4px; font-weight:600; }
.tile__bullets{ margin:8px 0 0; padding-left:18px; color:#475569; font-size:13px; }
.tile__bullets li{ margin:2px 0; }
.tile__right{ display:flex; align-items:flex-start; gap:8px; }
.tile__check{
position:absolute; top:10px; right:10px;
width:26px; height:26px; border-radius:999px;
background:#4f46e5; color:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 4px 12px rgba(79,70,229,.35);
opacity:0; transform: scale(.6);
transition: opacity .12s ease, transform .12s ease;
}
.pill{
display:inline-block;
padding:6px 10px;
font-size:11px; font-weight:900;
border-radius:999px; border:1px solid #e5e7eb;
background:#f8fafc; color:#0f172a;
}
.pill--hint{ background:#eef2ff; color:#4f46e5; border-color:#e0e7ff; }
.pill--soft{ background:#f1f5f9; color:#475569; }
.note{ display:flex; gap:10px; align-items:center; }
.note--line{ padding:10px; border:1px dashed #e5e7eb; border-radius:10px; background:#fafafa; }
.pbs-date-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pbs-date-quick{ display:flex; gap:6px; flex-wrap:wrap; }
.pbs-chip{
padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; background:#fff;
font-weight:800; font-size:12px; color:#0f172a;
}
.pbs-chip.danger{ color:#b91c1c; border-color:#fecaca; background:#fff5f5; }
.pbs-date-hint{ margin-top:6px; color:#334155; display:flex; gap:8px; align-items:center; font-size:13px; }
.pbs-cta{
margin-top:4px;
display:flex; align-items:center; justify-content:space-between;
padding:12px; border:1px solid #e5e7eb; border-radius:14px; background:#fcfcff;
}
.pbs-cta-left{ display:flex; gap:10px; align-items:center; color:#4f46e5; font-weight:400; }
.pbs-cta-left i{ font-size:18px; }
/* small utility */
.small{ font-size:12px; }
.fw-700{ font-weight:700; }
.pte-sug:hover{ background:#f8fafc; }
.list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.row .dot{ width:8px; height:8px; border-radius:50%; background:#4f46e5; }
.row .name{ font-weight:700; color:#0f172a; }
.row .date{ color:#64748b; font-weight:700; font-size:12px; }
.empty{ color:#64748b; font-size:12px; padding:8px 0; }
.pm-btn--primary { background:#111827; color:#fff; border-color:#111827; }
.pm-btn--ghost { background:transparent; }
.ov-sub{ font-size:12px; opacity:.75; }
.kpi-chip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:10px 0 16px; }
.kpi-chip{ display:flex; align-items:center; gap:10px; border:1px solid #eee; border-radius:12px; padding:10px 12px; background:#fff; }
.kpi-chip__text{ display:flex; flex-direction:column; }
.kpi-chip__label{ font-size:12px; opacity:.75; }
.kpi-chip__value{ font-size:18px; font-weight:700; }
.happy--red{ background:#fff1f1; } .happy--yellow{ background:#fff7e8; } .happy--green{ background:#eefcf2; } .happy--muted{ background:#f3f4f6; }
.tables-grid{ display:grid; grid-template-columns:repeat(2,minmax(300px,1fr)); gap:14px; }
.kpi-table{ border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.kpi-table__header{ padding:10px 12px; font-weight:700; border-bottom:1px solid #eee; }
.kpi-table__title{ font-size:14px; }
.kpi-table__body table{ width:100%; border-collapse:collapse; }
.kpi-table__body thead th{ text-align:left; font-size:12px; opacity:.8; padding:8px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.kpi-table__body tbody td{ padding:8px 10px; border-bottom:1px solid #f7f7f7; }
.col-level{ white-space:nowrap; }
.lvl-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:800; margin-right:6px; background:#eee; }
.lvl-T{ background:#e8f5ff; color:#0369a1; } .lvl-C{ background:#fff8e1; color:#ad6800; } .lvl-F{ background:#e8faef; color:#0b7a3a; }
.col-kpi{ text-align:right; font-variant-numeric:tabular-nums; }
.table-empty{ text-align:center; padding:16px; color:#777; }
.actions-cell .icon-btn{ border:1px solid #ddd; background:#fff; padding:4px 6px; border-radius:8px; cursor:pointer; }
.icon-btn i{ pointer-events:none; }
.ico{ display:inline-block; width:22px; height:22px; }
.ico svg{ width:100%; height:100%; }
.ico--red .face-head{ fill:#fde7e7; stroke:#b3261e; }
.ico--amber .face-head{ fill:#fff5e6; stroke:#ad6800; }
.ico--green .face-head{ fill:#e8faef; stroke:#0b7a3a; }
.ico--muted .face-head{ fill:#f3f4f6; stroke:#9ca3af; }
.face-eye{ fill:#111; }
.face-mouth{ fill:none; stroke:#111; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1024px){
.tables-grid{ grid-template-columns:1fr; }
}
/* Header + controls */
.ov-title {
font-weight: 400;
letter-spacing: .2px;
font-size: 25px;
}
/* Inline container so it doesn't collapse inside forms/grids */
.pm-assign-inline__box{
border:1px solid #e5e7eb;
border-radius:12px;
padding:12px;
background:#fff;
}
.ov-sub{ font-size:12px; opacity:.75; }
.ov-subtitle{ margin:10px 0 8px; font-weight:700; }
/* Toggle */
.chip-toggle{ border:1px solid #ccc; padding:4px 8px; border-radius:14px; background:#fff; cursor:pointer; }
.chip-toggle.is-active{ background:#111; color:#fff; border-color:#111; }
.ov-controls{ display:flex; align-items:center; gap:8px; }
/* Overall KPI cards */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:10px; margin:8px 0 16px; }
.kpi-card{ border:1px solid #eee; border-radius:12px; padding:12px; background:#fff; }
.kpi-title{ font-size:12px; opacity:.7; margin-bottom:6px; }
.kpi-row{ display:flex; align-items:center; gap:8px; }
.kpi-value{ font-size:20px; font-weight:700; }
.kpi-red .kpi-title{ color:#b3261e; } .kpi-yellow .kpi-title{ color:#ad6800; } .kpi-green .kpi-title{ color:#0b7a3a; } .kpi-happy .kpi-title{ color:#0b5fa4; }
/* KPI chips */
.kpi-chip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:6px 0 16px; }
.kpi-chip{ display:flex; align-items:center; gap:10px; border:1px solid #eee; border-radius:12px; padding:10px 12px; background:#fff; }
.kpi-chip__text{ display:flex; flex-direction:column; text-align:left; }
.kpi-chip__label{ font-size:12px; opacity:.75; }
.kpi-chip__value{ font-size:18px; font-weight:700; }
.chip-btn{ cursor:pointer; text-align:left; }
.chip-active{ outline:2px solid #111; }
.chip-muted{ opacity:.5; }
/* Tables */
.tables-grid{ display:grid; grid-template-columns:repeat(2,minmax(300px,1fr)); gap:14px; }
.kpi-table{ border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.kpi-table__header{ padding:10px 12px; font-weight:700; border-bottom:1px solid #eee; }
.kpi-table__title{ font-size:14px; }
.kpi-table__body table{ width:100%; border-collapse:collapse; }
.kpi-table__body thead th{ text-align:left; font-size:12px; opacity:.8; padding:8px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.kpi-table__body tbody td{ padding:8px 10px; border-bottom:1px solid #f7f7f7; }
.col-level{ white-space:nowrap; }
.lvl-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:800; margin-right:6px; background:#eee; }
.lvl-T{ background:#e8f5ff; color:#0369a1; } .lvl-C{ background:#fff8e1; color:#ad6800; } .lvl-F{ background:#e8faef; color:#0b7a3a; }
.col-kpi{ text-align:right; font-variant-numeric:tabular-nums; }
.table-empty{ text-align:center; padding:16px; color:#777; }
.actions-cell .icon-btn{ border:1px solid #ddd; background:#fff; padding:4px 6px; border-radius:8px; cursor:pointer; }
.icon-btn i{ pointer-events:none; }
/* Smileys */
.ico{ display:inline-block; width:22px; height:22px; }
.ico svg{ width:100%; height:100%; }
.ico--red .face-head{ fill:#fde7e7; stroke:#b3261e; }
.ico--amber .face-head{ fill:#fff5e6; stroke:#ad6800; }
.ico--green .face-head{ fill:#e8faef; stroke:#0b7a3a; }
.ico--muted .face-head{ fill:#f3f4f6; stroke:#9ca3af; }
.face-eye{ fill:#111; }
.face-mouth{ fill:none; stroke:#111; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1024px){
.kpi-grid{ grid-template-columns:repeat(2,minmax(120px,1fr)); }
.tables-grid{ grid-template-columns:1fr; }
}
/* Header + sort controls */
.tp-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.tp-title{ font-weight:800; letter-spacing:.2px; }
.tp-sub{ font-size:12px; opacity:.75; }
.tp-controls{ display:flex; align-items:center; gap:8px; }
.chip-toggle{ border:1px solid #ccc; padding:4px 8px; border-radius:14px; background:#fff; cursor:pointer; }
.chip-toggle.is-active{ background:#111; color:#fff; border-color:#111; }
/* Grid + Cards (samme vibe som topics/chapters chips, men som kort) */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.team-card{ border:1px solid #eee; border-radius:12px; background:#fff; display:flex; flex-direction:column; transition:transform .05s; cursor:pointer; }
.team-card:hover{ transform:translateY(-1px); }
.team-card.card-active{ outline:2px solid #111; }
.team-card.card-muted{ opacity:.55; }
.team-card.happy--red{ background:#fff1f1; }
.team-card.happy--yellow{ background:#fff7e8; }
.team-card.happy--green{ background:#eefcf2; }
.team-card.happy--muted{ background:#f3f4f6; }
/* ===== Add Program UI styles (prog-*) ===== */
#limesurvey .programs-board input {
width: auto;
}
.prog-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.prog-kpi{ border:1px solid #e5e7eb; border-radius:10px; padding:8px; background:#fff; display:flex; align-items:center; justify-content:space-between; }
.prog-kpi__label{ display:inline-flex; align-items:center; gap:8px; font-size:12px; opacity:.8; }
.prog-kpi__value{ font-weight:800; font-variant-numeric:tabular-nums; }
.prog-menu-btn{ display:flex; align-items:center; justify-content:space-between; }
.prog-badge{ margin-left:8px; background:#111827; color:#fff; padding:2px 8px; border-radius:999px; font-size:12px; }
.prog-hero-kpis{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin:10px 0 14px; }
.prog-hero-card{ padding:12px; border-radius:12px; box-shadow: 0 6px 12px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04); border:1px solid #e5e7eb; background:linear-gradient(180deg, #ffffff, #fafbff); }
.prog-hero-card__label{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; display:flex; align-items:center; gap:6px; }
.prog-hero-card__value{ font-weight:800; font-size:24px; line-height:1.2; color:#111827; margin-top:6px; }
.prog-hero-card__avatars{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.pm-avatar-cloud{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.pm-actions-row{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.prog-surface--full{ grid-column: 1 / -1; }
.prog-headrow{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.prog-back-btn{ box-shadow:none; color:#4f4f4f; font-size:20px; }
.as-card__head--bar{ gap:10px; align-items:center; }
.as-form-grid{ display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:center; }
.as-gap-16{ gap:16px; }
/* KPI count bump animation */
.kpi-bump-enter-active, .kpi-bump-leave-active { transition: transform .18s ease, opacity .18s ease; display:inline-block; }
.kpi-bump-enter { transform: translateY(6px); opacity: 0.01; }
.kpi-bump-enter-to { transform: translateY(0); opacity: 1; }
.kpi-bump-leave { transform: translateY(0); opacity: 1; position:absolute; }
.kpi-bump-leave-to { transform: translateY(-6px); opacity: 0.01; }
/* ===== Editor surface (soft gradient + shadow) ===== */
.prog-surface {
background: #fff;
border: 1px solid #e7e9f0;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
padding: 12px;
min-height: 600px;
}
.prog-menu__label-btn{margin-left:8px;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.prog-menu__label-btn:hover{background:#f1f5f9}
.prog-item__meta{margin-left:auto;display:flex;align-items:center;gap:6px}
.prog-item i{width:18px;text-align:center;margin-right:8px}
.pm-modal__box--md{max-width:640px;width:100%}
:root{
--ink-1:#0f172a; --ink-2:#475569; --ink-3:#64748b;
--bg-1:#ffffff; --bg-2:#f8fafc; --line:#eef2f7;
--pri:#4f46e5; --pri-2:#eef2ff;
--soft:#f3f4f6; --chip:#e2e8f0;
--radius:14px;
}
/* ===== HTML-Formatted Descriptions (Presets, Explanations) ===== */
/* Base class for info/hint boxes with HTML content */
.pm-hint, .pm-alert {
padding: 12px;
border-radius: 8px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-2, #475569);
}
.pm-hint--info, .pm-alert--info {
background: #eff6ff;
border: 1px solid #bae6fd;
color: var(--ink-2, #475569);
}
/* HTML elements within descriptions */
.pm-hint strong, .pm-alert strong,
.pm-hint--info strong, .pm-alert--info strong {
color: var(--ink-1, #0f172a);
font-weight: 600;
}
.pm-hint em, .pm-alert em,
.pm-hint--info em, .pm-alert--info em {
color: var(--ink-1, #0f172a);
font-style: italic;
}
.pm-hint ul, .pm-alert ul,
.pm-hint--info ul, .pm-alert--info ul {
margin: 8px 0 0 0;
padding-left: 20px;
list-style-type: disc;
}
.pm-hint li, .pm-alert li,
.pm-hint--info li, .pm-alert--info li {
margin: 4px 0;
color: var(--ink-2, #475569);
}
.pm-hint p, .pm-alert p,
.pm-hint--info p, .pm-alert--info p {
margin: 0 0 8px 0;
color: var(--ink-2, #475569);
}
.pm-hint p:last-child, .pm-alert p:last-child,
.pm-hint--info p:last-child, .pm-alert--info p:last-child {
margin-bottom: 0;
}
/* ---------- Viewer shell ---------- */
.matv-shell{ display:flex; flex-direction:column; gap:14px; }
.matv-header{ display:flex; align-items:center; justify-content:space-between; padding:8px 6px; }
.matv-title{ font-weight:700; font-size:20px; display:flex; align-items:center; gap:10px; color:var(--ink-1); }
.matv-actions .pm-btn{ margin-left:6px; }
.matv-body {
gap: 22px;
}
@media (max-width: 980px){ .matv-body{ grid-template-columns: 1fr; } }
.matv-doc .doc-title{ font-size:36px; line-height:1.18; margin:6px 0 14px; color:var(--ink-1); }
.docx--paper{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:0 6px 24px rgba(2,6,23,.06); }
.doc-empty{ padding:28px; border:1px dashed var(--line); border-radius:var(--radius); color:var(--ink-3); }
.doc-input-title{ font-size:22px; font-weight:700; padding:10px 12px; margin-bottom:12px; }
/* ---------- Comments ---------- */
.matv-comments{ position:relative; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.cmt-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cmt-title{ font-weight:700; color:var(--ink-1); }
.cmt-count{ font-size:12px; background:var(--soft); padding:2px 8px; border-radius:999px; }
.cmt-list{ display:flex; flex-direction:column; gap:14px; max-height:48vh; overflow:auto; padding-right:4px; }
.cmt-item{ display:flex; gap:10px; }
.cmt-avatar{ width:32px; height:32px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#334155; }
.cmt-avatar.small{ width:24px; height:24px; font-size:12px; }
.cmt-main{ flex:1; }
.cmt-meta{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-2); }
.cmt-time{ font-size:12px; opacity:.7; }
.cmt-text{ margin-top:6px; }
.cmt-reply{ display:flex; gap:8px; margin:10px 0 0 0; }
.cmt-replybox{ display:flex; gap:8px; margin-top:10px; }
.cmt-empty{ color:var(--ink-3); font-size:13px; text-align:center; padding:12px 0; }
.cmt-new{ border-top:1px solid var(--line); padding-top:10px; margin-top:12px; display:flex; gap:8px; flex-direction:column; }
/* ---------- Side menu ---------- */
.pmenu{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); }
.pmenu__head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); }
.pmenu__title{ font-weight:700; color:var(--ink-1); display:flex; align-items:center; gap:8px; }
.pmenu__add{ border:none; background:var(--pri); color:white; padding:6px 10px; border-radius:10px; font-weight:600; cursor:pointer; }
.pmenu__groups{ padding:8px; display:flex; flex-direction:column; gap:10px; }
.pmenu__group{ display:flex; flex-direction:column; gap:6px; }
.pmenu__label{ font-size:12px; letter-spacing:.02em; color:var(--ink-3); padding:2px 6px; text-transform:uppercase; }
.pmenu__item{ display:grid; grid-template-columns: 12px 1fr auto; align-items:center; gap:8px;
padding:8px 10px; border-radius:10px; border:1px solid transparent; background:transparent; cursor:pointer; text-align:left; }
.pmenu__item:hover{ background:var(--pri-2); border-color:#dfe3ff; }
.pmenu__item.is-active{ background:var(--pri-2); border-color:#cdd4ff; }
.pmenu__dot{ width:8px; height:8px; border-radius:999px; background:#94a3b8; }
.pmenu__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-1); }
.pmenu__meta{ font-size:12px; color:var(--ink-3); }
.pmenu__empty{ padding:12px; color:var(--ink-3); text-align:center; }
/* ---------------- Activities Wall (task-manager style) ---------------- */
/* wrapper + header */
.tm-wrap{margin-top:8px}
.tm-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tm-title{font-weight:800;font-size:24px;letter-spacing:.2px}
.tm-spacer{flex:1}
/* table shell */
.tm-table{border:1px solid #e9edf2;border-radius:12px;overflow:hidden;background:#fff}
.tm-row{display:grid;align-items:center;grid-template-columns:56px 1fr 160px 220px 140px 180px 120px;gap:8px;padding:14px 14px;border-bottom:1px solid #eef2f6}
.tm-row:last-child{border-bottom:none}
.tm-row:hover{background:#fbfdff}
.tm-row--head{background:#f7fafc;color:#657187;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:12px 14px}
.tm-row--child{background:#fcfdfd}
.tm-row--reply{background:#f8fafc}
/* columns */
.tm-col{min-width:0}
.tm-col--idx{text-align:center;color:#6b7280;font-weight:700}
.tm-col--main{min-width:200px}
.tm-col--type,.tm-col--when,.tm-col--link,.tm-col--assignee{color:#374151}
/* main title line + subtext */
.tm-titleline{display:flex;align-items:center;gap:8px}
.tm-task-title{font-weight:700}
.tm-subtext{font-size:13px;color:#6b7280;margin-top:2px}
/* assignee cell */
.tm-assignee{display:flex;align-items:center;gap:8px}
.pm-avatar{width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:#e9f0ff;color:#1f3b8f}
/* chips (fallback if your design system doesn't provide pm-chip) */
.pm-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#eef3ff;color:#1f3b8f;border:1px solid #dbe6ff}
.pm-chip--ghost{background:#fff;color:#374151;border:1px solid #e5e7eb}
.pm-chip--soft{background:#f5f3ff;color:#5b21b6;border:1px solid #e9d5ff}
/* actions */
.tm-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid #e9edf2;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f7faff;border-color:#cfe1ff}
.pm-btn--sm{height:30px;padding:0 10px}
/* inline composer */
.as-form-grid{display:grid;grid-template-columns:1fr 220px;gap:12px}
.pm-textarea{width:100%;border:1px solid #e5e7eb;border-radius:10px;padding:10px;min-height:72px}
.pm-input{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;height:36px;width:100%}
.pm-input--search{background:#fff url('data:image/svg+xml;utf8,') no-repeat 10px center;padding-left:36px}
/* misc */
.label{font-size:12px;color:#6b7280;margin-bottom:6px;display:block}
.min-w-0{min-width:0}
/* Brand area */
.cu-card__brand{
height:96px;
background:color-mix(in srgb, var(--brand, #e5ecff) 16%, #fff);
display:flex;align-items:center;justify-content:center;
border-bottom:1px solid #eef2f7
}
/* Logo container */
.cu-logo{
width:56px;height:56px;border-radius:14px;background:#fff;
display:flex;align-items:center;justify-content:center;
border:1px solid rgba(0,0,0,.06); overflow:hidden
}
.cu-logo img{
width:80%; height:80%; object-fit:contain; display:block;
image-rendering:auto; -webkit-user-drag:none
}
/* If image fails, we show a letter */
.cu-logo.cu-logo--fallback{
font-weight:800; font-size:22px; color:#1f2937
}
/* Body text refinements */
.cu-card__body{padding:10px}
.cu-desc{margin-top:6px;font-size:12px;color:#5b6472;line-height:1.45}
/* Coming Up – hero */
.cu-wrap{position:relative;border:1px solid #e9edf2;background:#fff;border-radius:16px;overflow:hidden}
.cu-hero{position:relative;background:linear-gradient(120deg,#0ea5e9 0%,#6366f1 55%,#8b5cf6 100%);color:#fff}
.cu-hero__content{padding:26px 20px}
.cu-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);font-weight:700}
.cu-title{margin:8px 0 4px;font-size:22px;font-weight:800}
.cu-sub{opacity:.95;margin:0}
.cu-cta{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.cu-note{opacity:.9;font-size:12px}
/* Controls */
.cu-controls{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #eef2f7;flex-wrap:wrap}
.cu-controls__left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cu-select{min-width:160px}
.cu-search{min-width:260px}
/* Grid */
.cu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:12px}
.cu-card{position:relative;display:flex;flex-direction:column;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff}
.cu-card__ribbon{position:absolute;top:10px;right:-12px;transform:rotate(35deg);background:#0f172a;color:#fff;font-size:11px;padding:4px 12px;border-radius:6px}
.cu-card__brand{height:84px;background:color-mix(in srgb, var(--brand) 14%, #fff);display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eef2f7}
.cu-logo{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;border:1px solid rgba(0,0,0,.06)}
.cu-card__body{padding:10px}
.cu-name{font-weight:800}
.cu-cat{font-size:12px;color:#64748b;margin-top:2px}
.cu-card__actions{display:flex;gap:8px;align-items:center;padding:10px;border-top:1px solid #eef2f7}
.cu-card .pm-btn[disabled]{opacity:.7;cursor:not-allowed}
/* polish */
.hover-pop{transition:transform .06s ease, box-shadow .15s ease}
.hover-pop:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(2,6,23,.06)}
.pm-modal__box--md{max-width:720px}
/* Form helpers (optional if you already have) */
.as-form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.as-form-grid>div{grid-column:span 6}
.as-form-grid .form-col--full, .as-form-grid>div.form-col--full{grid-column:1 / -1}
/* ====== Layout ====== */
.cu-wrap{ display:flex; flex-direction:column; gap:14px; }
/* Hero */
.cu-hero{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; }
.cu-hero-right{ display:flex; gap:8px; flex-wrap:wrap; }
.cu-title{ font-size:26px; font-weight:800; margin:6px 0 4px; }
.cu-sub{ color:#6b7280; max-width:780px; }
/* Pills & chips */
.cu-pill{
display:inline-block; padding:4px 10px; border-radius:999px;
font-size:12px; font-weight:600; letter-spacing:.2px;
background:#eef2ff; color:#3730a3; border:1px solid #e5e7eb;
}
/* Controls */
.cu-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; }
.cu-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.cu-search{ display:flex; gap:8px; align-items:center; }
/* Grid & cards */
.cu-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
gap:12px;
}
.cu-card{
background:#fff; border:1px solid #e5e7eb; border-radius:14px;
padding:12px; display:flex; flex-direction:column; gap:10px;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cu-card-head{ display:flex; align-items:center; gap:10px; }
.cu-logo{
width:34px; height:34px; border-radius:8px; border:1px solid rgba(0,0,0,.06); background:#fff; object-fit:contain; padding:4px;
}
.cu-meta{ min-width:0; }
.cu-name{ font-weight:700; }
.cu-cat{ font-size:12px; color:#6b7280; }
.cu-desc{ color:#374151; font-size:14px; min-height:38px; }
.cu-how{ display:flex; gap:8px; align-items:flex-start; font-size:12px; color:#6b7280; }
.cu-how i{ margin-top:2px; }
.cu-how-text{ line-height:1.4; }
.cu-actions{ display:flex; gap:8px; margin-top:2px; }
/* Hover microinteraction */
.hover-pop{ transition: transform .08s ease, box-shadow .12s ease; }
.hover-pop:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
/* ====== Full page overlay ====== */
.cu-overlay{
position:fixed; inset:0; z-index:2147483000;
background:rgba(15,23,42,.55); /* transparent grey */
backdrop-filter: blur(2px);
display:flex; align-items:center; justify-content:center;
padding:24px;
}
.cu-overlay__panel{
width:min(720px, 96vw);
background:#fff; border-radius:20px;
box-shadow: 0 30px 80px rgba(0,0,0,.35);
padding:28px; text-align:center;
border:1px solid rgba(0,0,0,.06);
}
.cu-overlay__title{ margin:8px 0 6px; font-size:28px; line-height:1.2; }
.cu-overlay__text{ margin:0 0 14px; color:#5b6472; }
.cu-overlay__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.cu-overlay__note{ margin-top:8px; font-size:12px; color:#6b7280; }
.as-row{display:flex;align-items:center}
.as-gap-8{gap:8px}
.as-gap-12{gap:12px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.card-row{align-items:center;gap:10px}
.tlt-avatar{width:28px;height:28px;border-radius:8px;background:#eef2ff;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
/* modal (fallback minimal) */
.pm-modal--overlay{position:fixed;inset:0;background:rgba(16,24,40,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.pm-modal__box{background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(2,6,23,.15);width:min(720px,92vw);max-height:85vh;display:flex;flex-direction:column}
.pm-modal__box--md{width:min(680px,92vw)}
.pm-modal__header,.pm-modal__actions{padding:12px 16px;border-bottom:1px solid #eef2f6}
.pm-modal__actions{border-top:1px solid #eef2f6;border-bottom:0}
.pm-modal__title{font-weight:800}
.pm-modal__body{padding:16px;overflow:auto}
.pm-modal__close{background:transparent;border:0;font-size:18px;cursor:pointer}
/* responsive */
@media (max-width: 1024px){
.tm-row{grid-template-columns:44px 1fr 140px 160px 120px 140px 96px}
}
@media (max-width: 768px){
.tm-row,.tm-row--head{grid-template-columns:36px 1fr 120px 0 90px 0 96px}
.tm-col--assignee,.tm-col--link{display:none}
}
.pbs .as-card__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eef2f6}
.pbs-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.pbs-actions .pm-btn{height:36px}
.pbs-grid{display:grid;gap:18px;padding:14px 16px}
.pbs-block{background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:14px}
.pbs-block__title{font-weight:700;color:#111827;margin-bottom:10px}
.pbs-seg{display:flex;flex-wrap:wrap;gap:10px}
.pbs-modes .pbs-pill{min-width:180px;justify-content:flex-start}
.pbs-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font-weight:700}
.pbs-pill:hover{background:#f7fbff;border-color:#cfe1ff}
.pbs-pill.active{background:#eef4ff;border-color:#cfe1ff;color:#153e75}
.pbs-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-weight:700;font-size:13px}
.pbs-chip:hover{background:#f8fafc}
.pbs-chip.active{background:#eef3ff;border-color:#dbe6ff;color:#1f3b8f}
.pbs-chip.danger{border-color:#ffe0e0;color:#a50018;background:#fff5f5}
.pbs-chip.danger:hover{background:#ffecec}
.pbs-hidden-select{position:absolute;opacity:0;pointer-events:none;height:0;width:0}
.pbs-date-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pbs-date-quick{display:flex;gap:8px;flex-wrap:wrap}
.pbs-date-hint{margin-top:8px;color:#374151;display:flex;align-items:center;gap:8px}
.pbs-cta{margin-top:6px;display:flex;align-items:center;justify-content:space-between;border:1px dashed #e5e7eb;border-radius:14px;padding:12px 14px;background:#fcfeff}
.pbs-cta-left{display:flex;align-items:center;gap:12px}
.pbs-cta-right .pm-btn{height:38px}
@media (max-width:720px){
.pbs .as-card__head{flex-direction:column;align-items:flex-start;gap:8px}
.pbs-modes .pbs-pill{min-width:unset}
.pbs-cta{flex-direction:column;gap:10px;align-items:flex-start}
}
/* -------- Collaborators (inspired task-manager look) -------- */
.collab-wrap{margin-top:6px}
.collab-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.collab-title{font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px}
.collab-spacer{flex:1}
.descriptions{
font-size:14px !important;
line-height:1.4 !important;
color:#000000 !important;
margin:12px 0;
}
.descriptions *{ line-height:1.4 !important; }
.descriptions strong{ color:var(--ink-1, #0f172a); font-weight:600; }
.descriptions em{ color:var(--ink-1, #0f172a); font-style:italic; }
.descriptions ul{ margin:8px 0 0 0 !important; padding-left:20px !important; list-style-type:disc !important; }
.descriptions li{ margin:4px 0 !important; color:#000000 !important; }
.descriptions p{ margin:0 0 8px 0; color:#000000 !important; }
.descriptions p:last-child{ margin-bottom:0; }
.collab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.collab-card{border:1px solid #e9edf2;background:#faf9f6;border-radius:14px;padding:12px}
.collab-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.collab-card__row{display:flex;align-items:center;gap:10px}
.collab-org-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.req-hint{font-size:12px;color:#b91c1c}
.pm-avatar{width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:#eef2ff}
.pm-avatar--sm{width:24px;height:24px}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid #e9edf2;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f7faff;border-color:#cfe1ff}
.switchline{display:inline-flex;align-items:center;gap:8px}
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#e5e7eb;border-radius:999px;transition:.2s}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.switch input:checked + .slider{background:#2563eb}
.switch input:checked + .slider:before{transform:translateX(18px)}
.collab-tabs{margin:8px 0}
.collab-add-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.collab-add-card{border:1px solid #e9edf2;background:#fff;border-radius:12px;padding:10px}
.collab-add-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.collab-footer{margin-top:12px;display:flex;justify-content:flex-end}
.smallmuted{font-size:12px;color:#6b7280}
.text-muted{color:#6b7280}
.small{font-size:12px}
/* responsive */
@media (max-width:720px){
.collab-grid{grid-template-columns:1fr}
}
.prog-surface .pm-card { border: 1px solid #eef0f5; box-shadow: 0 2px 10px rgba(2,6,23,.05); }
.autosave-hint{ font-size:12px; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:999px; padding:4px 8px; display:inline-flex; align-items:center; gap:6px; }
.autosave-hint--error{ color:#7f1d1d; background:#fee2e2; border-color:#fecaca; }
.team-card__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 0 12px; }
.team-card__title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-card__actions{ display:flex; align-items:center; gap:8px; }
.team-card__body{ display:grid; grid-template-columns:auto 1fr; gap:10px 12px; align-items:center; padding:8px 12px 12px 12px; }
.team-card__metric{ display:flex; flex-direction:column; }
.team-card__label{ font-size:12px; opacity:.7; }
.team-card__value{ font-size:20px; font-weight:800; }
.team-card__meta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.team-chip{ border:1px solid #ddd; border-radius:999px; padding:2px 8px; font-size:12px; background:#fff; }
.icon-btn{ border:1px solid #ddd; background:#fff; padding:4px 6px; border-radius:8px; cursor:pointer; }
.tp-flag{ color:#b3261e; }
/* Smileys (samme stil som tidligere) */
.ico{ display:inline-block; width:28px; height:28px; }
.ico svg{ width:100%; height:100%; }
.ico--red .face-head{ fill:#fde7e7; stroke:#b3261e; }
.ico--amber .face-head{ fill:#fff5e6; stroke:#ad6800; }
.ico--green .face-head{ fill:#e8faef; stroke:#0b7a3a; }
.ico--muted .face-head{ fill:#f3f4f6; stroke:#9ca3af; }
.face-eye{ fill:#111; }
.face-mouth{ fill:none; stroke:#111; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.table-empty{ text-align:center; padding:16px; color:#777; }
@media (max-width: 640px){
.ico{ width:24px; height:24px; }
}
/* Header + sort */
.tp-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.tp-title{ font-weight:800; letter-spacing:.2px; }
.tp-sub{ font-size:12px; opacity:.75; }
.tp-controls{ display:flex; align-items:center; gap:8px; }
.chip-toggle{ border:1px solid #ccc; padding:4px 8px; border-radius:14px; background:#fff; cursor:pointer; }
.chip-toggle.is-active{ background:#111; color:#fff; border-color:#111; }
/* Tabs */
.tp-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.tp-tab{ border:1px solid #ddd; background:#fff; padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px; }
.tp-tab.is-active{ background:#111; color:#fff; border-color:#111; }
/* Selected chips */
.tp-selected{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; align-items:center; }
.tp-chip{ border:1px solid #ddd; border-radius:999px; padding:2px 8px; font-size:12px; background:#fff; }
.tp-chip__x{ margin-left:6px; border:none; background:transparent; cursor:pointer; }
/* Grid + Cards */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.team-card{ border:1px solid #eee; border-radius:12px; background:#fff; display:flex; flex-direction:column; transition:transform .05s; cursor:pointer; }
.team-card:hover{ transform:translateY(-1px); }
.team-card.card-active{ outline:2px solid #111; }
.team-card.card-muted{ opacity:.55; }
.team-card.happy--red{ background:#fff1f1; }
.team-card.happy--yellow{ background:#fff7e8; }
.team-card.happy--green{ background:#eefcf2; }
.team-card.happy--muted{ background:#f3f4f6; }
/* ---------- Participants (task-manager look) ---------- */
.part-wrap{margin-top:6px}
.part-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.part-title{font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px}
.flex-spacer{flex:1}
.part-search{margin-bottom:8px}
.part-section-head{display:flex;align-items:center;gap:8px;margin:10px 0 6px}
.part-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.part-grid--modal{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.part-card{border:1px solid #e9edf2;background:#f0fdf4;border-radius:12px;padding:10px}
.part-card--pick{cursor:pointer;text-align:left}
.part-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.part-card__row{display:flex;align-items:center;gap:10px}
.part-owner{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pm-avatar{width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:#eef2ff}
.pm-avatar--sm{width:24px;height:24px}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid #e9edf2;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f7faff;border-color:#cfe1ff}
.smallmuted{font-size:12px;color:#6b7280}
.text-muted{color:#6b7280}
.small{font-size:12px}
/* responsive */
@media (max-width:720px){
.part-grid{grid-template-columns:1fr}
}
/* --- Publication banner (reusing CTA look, now at the top) --- */
.pbs-cta{
margin-bottom:12px;
display:flex; align-items:center; justify-content:space-between;
padding:12px 14px; border:1px solid #e5e7eb; border-radius:14px; background:#fff;
}
.pbs-cta--banner.is-draft{ border-style:dashed; }
.pbs-cta--banner.is-live { border-color:#111827; }
.pbs-cta-left{ display:flex; gap:12px; align-items:center; color:#111827; }
.pbs-cta-left .fa-solid{ font-size:18px; }
.pbs-cta-title{ font-weight:400; line-height:1.1; }
.pbs-cta-sub{ color:#4b5563; font-size:14px; }
.pbs-cta-copy{ display:flex; flex-direction:column; gap:2px; }
/* --- Layout + sections --- */
.pbs-head{ display:flex; align-items:center; justify-content:space-between; }
.pbs-title{ display:flex; align-items:center; gap:10px; font-weight:900; }
.pbs-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.pbs-block__title{ font-weight:400; color:#0a0a0a; margin-bottom:10px; }
.pbs-subhint{ color:#6b7280; font-size:12px; margin-top:8px; }
/* --- Tiles (black & white centered cards) --- */
.tile-grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }
.tile-grid--bw .tile {
background: #fff;
display: block;
}
.tile{
border:3px solid transparent;
border-radius:16px;
padding:15px;
text-align:left;
transition: border-color .12s ease, background .12s ease;
cursor:pointer;
min-height:420px;
display:flex;
flex-direction:column;
align-items:stretch;
}
.tile:hover{ background:#f4f9ff; border-color:#2a7bd3; }
.tile.is-active{ border-color:#2a7bd3; background:#e9f3ff; }
.tile.is-disabled{ opacity:.6; cursor:not-allowed; }
.tile.is-disabled:hover{ transform:none; background:#fff; }
.tile__icon-wrap{
width:64px; height:64px; margin:0 auto 10px auto;
border-radius:12px; display:flex; align-items:center; justify-content:center;
font-size:28px;
}
.tile__icon-wrap--bw{
border:1.5px solid #111827; color:#111827; background:#fff;
}
.tile__title{ font-weight:600; color:#111827; text-align:left; }
.tile__desc{ color:var(--ink-2, #475569); margin-top:6px; font-size:13px; line-height:1.5; text-align:left; font-weight:400; }
/* HTML-Formatierung für Preset-Beschreibungen in Tiles - nutzt globale .pm-hint Regeln */
.tile__desc ul {
margin: 8px 0 0 0;
padding-left: 20px;
list-style-type: disc;
}
.tile__desc li {
margin: 4px 0;
color: var(--ink-2, #475569);
}
.tile__desc strong {
color: var(--ink-1, #0f172a);
font-weight: 600;
}
.tile__desc em {
color: var(--ink-1, #0f172a);
font-style: italic;
}
/* --- Date row --- */
.pbs-date-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pbs-date-quick{ display:flex; gap:6px; flex-wrap:wrap; }
.pbs-chip{
padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; background:#fff;
font-weight:800; font-size:12px; color:#111827;
}
.pbs-chip.danger{ color:#b91c1c; border-color:#eabfbf; background:#fff5f5; }
.pbs-date-hint{ margin-top:6px; color:#374151; display:flex; gap:8px; align-items:center; font-size:13px; }
/* --- Lock overlay when published --- */
.pbs-lock-wrap{ position:relative; }
.pbs-lock{
position:absolute; inset:0;
background: rgba(255,255,255,.6);
backdrop-filter: blur(1px);
z-index: 2;
display:flex; align-items:center; justify-content:center;
pointer-events: auto;
}
.pbs-lock__panel{
display:flex; gap:10px; align-items:center;
padding:8px 12px; border:1px solid #111827; border-radius:999px; background:#fff; color:#111827; font-weight:800;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.pbs-lock__panel .fa-lock{ font-size:14px; }
.pbs-lock__text{ font-size:13px; }
/* Utility */
.small{ font-size:12px; }
.fw-700{ font-weight:700; }
/* ===== Program Log (task-manager look) ===== */
.log-wrap{border:1px solid #e9edf2;background:#fff;border-radius:12px}
.log-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.log-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.log-seg{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.log-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#374151}
.log-list{padding:8px 12px 12px}
.log-item{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:10px;border:1px solid #eef2f7;border-radius:10px;background:#fff;margin-top:8px}
.log-item:hover{border-color:#dbe7ff;background:#f9fbff}
.log-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;border:1px solid rgba(0,0,0,.06)}
.log-body{min-width:0}
.log-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.log-title{font-weight:700}
.log-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.log-meta{margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pm-dot{opacity:.6}
.pm-hint{opacity:.7;font-size:12px}
.log-msg{margin-top:8px}
.log-pre{margin:0;padding:8px;border:1px solid #eee;border-radius:8px;background:#fafafa;max-height:220px;overflow:auto;font-size:12px;line-height:1.35}
.as-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;font-size:11px}
.as-badge--ok{border-color:#c7f1d0;background:#ecfdf5}
.as-badge--danger{border-color:#ffd6d6;background:#fff1f1}
/* ===== Activities (wiki + comments) styled like task manager/editor ===== */
.docs-wrap{border:1px solid #e9edf2;background:#fff;border-radius:12px}
.docs-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid #eef2f7}
.docs-title{font-weight:800}
.docs-spacer{flex:1}
.doc-list{padding:8px 10px 14px}
.doc-item{border:1px solid #eef2f7;background:#fff;border-radius:12px;margin-top:10px}
.doc-row{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px}
.doc-left{display:flex;align-items:center;gap:8px}
.icon-btn{background:transparent;border:none;cursor:pointer;padding:6px;border-radius:8px}
.icon-btn:hover{background:#f5f7fb}
.badge-type{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border:1px solid #e5e7eb;border-radius:999px;font-size:11px}
.badge-type[data-kind="page"], .badge-type[data-kind="guideline"]{background:#f5f8ff;border-color:#dbe7ff}
.badge-type[data-kind="idea"]{background:#fff7ed;border-color:#fde2c3}
.badge-type[data-kind="finding"]{background:#f0fdf4;border-color:#c7f1d0}
.badge-type[data-kind="comment"]{background:#eef2f7;border-color:#e5e7eb}
.badge-type[data-kind="question"]{background:#fdf2f8;border-color:#f5c2e7}
.doc-main{min-width:0}
.doc-title{font-weight:800;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.doc-sub{opacity:.8}
.doc-rich{border:1px solid #eef2f7;background:#fafcff;border-radius:10px;padding:10px;margin-bottom:6px;max-height:360px;overflow:auto}
.doc-meta{display:grid;grid-template-columns: 1fr auto auto auto;gap:10px;align-items:center}
.doc-user{display:flex;align-items:center;gap:8px}
.doc-when{opacity:.7;font-size:12px}
.doc-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.doc-actions{display:flex;gap:6px;justify-content:flex-end}
.doc-reply{padding:12px;border-top:1px dashed #eef2f7}
.doc-children{border-top:1px solid #f1f5fb;padding:8px 12px 12px}
.child-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:8px;border:1px solid #f3f4f6;border-radius:10px;background:#fff;margin-top:8px}
.child-left{display:flex;align-items:center;gap:8px}
.child-sub{opacity:.8}
.child-meta{opacity:.7;font-size:12px}
.child-actions{display:flex;gap:6px;justify-content:flex-end}
/* Avatars & chips reused from task manager */
.pm-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:800;border:1px solid rgba(0,0,0,.06);background:#eef2f7}
.tlt-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid #e5e7eb;background:#f8fafc;font-weight:800}
.pm-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;font-size:11px}
.pm-chip--soft{background:#f8fafc}
.wizard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.form-col{grid-column:span 6}
.form-col--full{grid-column:1 / -1}
.flex-spacer{flex:1}
/* Table/Task-manager look */
/* Expanded area / replies */
.row-acts td{background:#fcfdff}
.docx{padding:12px 6px}
.docx-rich{border:1px solid #eef2f7;background:#fafcff;border-radius:10px;padding:10px;margin-bottom:12px;max-height:360px;overflow:auto}
.todo-thread{display:flex;flex-direction:column;gap:10px}
.todo-post{display:flex;gap:10px;border:1px solid #f3f4f6;border-radius:10px;background:#fff;padding:8px}
.todo-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef2f7;border:1px solid rgba(0,0,0,.06);font-weight:800}
.todo-post-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.todo-time{opacity:.6;font-size:12px}
/* Richtext inline (fallback styling provided by component) */
.rt-inline-editor{width:100%}
/* responsive */
@media (max-width:720px){
.log-top{flex-direction:column;align-items:flex-start}
}
/* ===== Docs/Questions/Guidelines wall (wiki + comments feel) ===== */
.docs-wrap{border:1px solid #e9edf2;background:#fff;border-radius:12px}
.docs-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid #eef2f7}
.docs-title{font-weight:800}
.docs-spacer{flex:1}
.doc-list{padding:8px 10px 14px}
.doc-item{border:1px solid #eef2f7;background:#fff;border-radius:12px;margin-top:10px}
.doc-row{display:grid;grid-template-columns: auto 1fr;gap:12px;padding:12px}
.doc-left{display:flex;align-items:center;gap:8px}
.icon-btn{background:transparent;border:none;cursor:pointer;padding:4px;border-radius:8px}
.icon-btn:hover{background:#f5f7fb}
.badge-type{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border:1px solid #e5e7eb;border-radius:999px;font-size:11px}
.badge-type[data-kind="page"], .badge-type[data-kind="guideline"]{background:#f5f8ff;border-color:#dbe7ff}
.badge-type[data-kind="idea"]{background:#fff7ed;border-color:#fde2c3}
.badge-type[data-kind="finding"]{background:#f0fdf4;border-color:#c7f1d0}
.badge-type[data-kind="comment"]{background:#eef2f7;border-color:#e5e7eb}
.badge-type[data-kind="question"]{background:#fdf2f8;border-color:#f5c2e7}
.doc-main{min-width:0}
.doc-title{font-weight:800;margin-bottom:6px;display:flex;gap:8px;align-items:center}
.doc-sub{opacity:.8}
.doc-rich{border:1px solid #eef2f7;background:#fafcff;border-radius:10px;padding:10px;margin-bottom:6px;max-height:360px;overflow:auto}
.doc-meta{display:grid;grid-template-columns: 1fr auto auto auto;gap:10px;align-items:center}
.doc-user{display:flex;align-items:center;gap:8px}
.doc-when{opacity:.7;font-size:12px}
.doc-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.doc-actions{display:flex;gap:6px;justify-content:flex-end}
/* plain header in modal */
.plain-header{display:flex;align-items:center;gap:10px;border-bottom:1px dashed var(--pm-br, #e6e6e6);padding-bottom:8px;margin-bottom:6px;}
.plain-ico{font-size:18px;margin-right:4px;}
.plain-title{font-weight:700;}
.plain-hint{font-size:12px;color:#678;margin-left:auto;}
/* hide richtext toolbar when plain */
.rt-wrap--plain .pm-rt-toolbar{display:none !important;}
.rt-wrap--plain .pm-rt{border-top-left-radius:10px;border-top-right-radius:10px;}
.doc-reply{padding:12px;border-top:1px dashed #eef2f7}
.doc-children{border-top:1px solid #f1f5fb;padding:8px 12px 12px}
.child-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:8px;border:1px solid #f3f4f6;border-radius:10px;background:#fff;margin-top:8px}
.child-left{display:flex;align-items:center;gap:8px}
.child-sub{opacity:.8}
.child-meta{opacity:.7;font-size:12px}
.child-actions{display:flex;gap:6px;justify-content:flex-end}
.pm-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:800;border:1px solid rgba(0,0,0,.06);background:#eef2f7}
.tlt-avatar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid #e5e7eb;background:#f8fafc;font-weight:800}
.pm-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;font-size:11px}
.pm-chip--soft{background:#f8fafc}
.pm-chip--ghost{background:#fff}
.pm-modal__box--lg{max-width:980px}
/* ===== TOPIC BUTTONS (for old report compatibility) ===== */
.topicbuttons button {
color: #000;
font-size: 14px;
font-weight: normal;
padding: 5px 15px;
background-color: transparent !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer;
}
.topicbuttons button:hover {
background-color: #f0f0f0 !important;
}
.topicbuttons button.active {
background-color: #e0e0e0 !important;
font-weight: bold;
}
button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
cursor: pointer;
}
.topicbuttons button:focus {
outline: 2px solid #007cba;
outline-offset: 2px;
}
/* ===== TOPMENU BUTTONS (for old report compatibility) ===== */
.topmenu button {
color: #000;
font-size: 14px;
font-weight: normal;
padding: 5px 15px;
background-color: transparent !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer;
}
.topmenu button:hover {
background-color: #f0f0f0 !important;
}
.topmenu button.active {
background-color: #e0e0e0 !important;
font-weight: bold;
}
.topmenu button:focus {
outline: 2px solid #007cba;
outline-offset: 2px;
}
/* ===== REDFLAGS COLUMN WIDTH (from main.css) ===== */
.question .frequencyheader .redflags {
width: 62px;
border: 0px solid;
padding: 0px;
line-height: 19px;
height: 45px;
background-color: #fff0;
font-size: 22px;
font-weight: 300;
}
td.redflags {
width: 62px;
min-width: 62px;
max-width: 62px;
text-align: center;
}
/* ===== RED-FLAG MODERN STYLING (2026-01-30) move=4 / main.css + style2.css ===== */
/* Abgerundete Ecken, Abstand, 3D-Effekt für Dashboard-Tabellen (Hauptbericht) */
#outerframeContainer .filtertable,
#outerframeContainer .overalltable table,
#outerframeContainer table.filtertable {
border-collapse: separate !important;
border-spacing: 0 1px !important;
}
#outerframeContainer td.redflags,
#outerframeContainer .redflags[red-flag],
#outerframeContainer .filtertable td.redflags {
border-radius: 8px !important;
box-shadow:
inset 0 2px 1px rgba(255,255,255,0.35),
inset 0 -2px 1px rgba(0,0,0,0.2),
0 1px 3px rgba(0,0,0,0.12) !important;
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
#outerframeContainer td.redflags:hover,
#outerframeContainer .redflags[red-flag]:hover,
#outerframeContainer .filtertable td.redflags:hover {
transform: scale(1.03) !important;
box-shadow:
inset 0 2px 2px rgba(255,255,255,0.45),
inset 0 -2px 2px rgba(0,0,0,0.25),
0 3px 6px rgba(0,0,0,0.18) !important;
}
#outerframeContainer .filtertable tbody tr,
#outerframeContainer .overalltable tbody tr {
transition: background-color 0.15s ease !important;
}
#outerframeContainer .filtertable tbody tr:hover,
#outerframeContainer .overalltable tbody tr:hover {
background-color: rgba(0, 20, 114, 0.03) !important;
}
/* ===== SELECTED ROW HIGHLIGHTING (2026-02-02) ===== */
/* Ausgewählte Zeilen: Orange Border auf allen td (auch Red-Flags) */
#outerframeContainer .filtertable tbody tr.selected td,
#outerframeContainer .overalltable tbody tr.selected td {
border-top: 2px solid #ffa900 !important;
border-bottom: 2px solid #ffa900 !important;
}
/* Nur NICHT-RedFlag Zellen bekommen den orangen Hintergrund */
#outerframeContainer .filtertable tbody tr.selected td:not(.redflags):not([red-flag]),
#outerframeContainer .overalltable tbody tr.selected td:not(.redflags):not([red-flag]) {
background-color: rgba(255, 169, 0, 0.08) !important;
}
/* RED-FLAGS: Hintergrundfarbe wird NICHT geändert - keine Regel hier, damit Original-Farben aus main.css wirken */
#outerframeContainer .filtertable tbody tr.selected td:first-child,
#outerframeContainer .overalltable tbody tr.selected td:first-child {
border-left: 2px solid #ffa900 !important;
border-radius: 6px 0 0 6px !important;
}
#outerframeContainer .filtertable tbody tr.selected td:last-child,
#outerframeContainer .overalltable tbody tr.selected td:last-child {
border-right: 2px solid #ffa900 !important;
border-radius: 0 6px 6px 0 !important;
}
/* ===== RED-FLAG KONTRAST-FIX (2026-02-02) ===== */
/* Dunkle Red-Flags (20-100%): Weiße Schrift für besseren Kontrast */
#outerframeContainer .redflags[red-flag="100"],
#outerframeContainer .redflags[red-flag="100"] *,
#outerframeContainer .redflags[red-flag="99"],
#outerframeContainer .redflags[red-flag="99"] *,
#outerframeContainer .redflags[red-flag="98"],
#outerframeContainer .redflags[red-flag="98"] *,
#outerframeContainer .redflags[red-flag="97"],
#outerframeContainer .redflags[red-flag="97"] *,
#outerframeContainer .redflags[red-flag="96"],
#outerframeContainer .redflags[red-flag="96"] *,
#outerframeContainer .redflags[red-flag="95"],
#outerframeContainer .redflags[red-flag="95"] *,
#outerframeContainer .redflags[red-flag="94"],
#outerframeContainer .redflags[red-flag="94"] *,
#outerframeContainer .redflags[red-flag="93"],
#outerframeContainer .redflags[red-flag="93"] *,
#outerframeContainer .redflags[red-flag="92"],
#outerframeContainer .redflags[red-flag="92"] *,
#outerframeContainer .redflags[red-flag="91"],
#outerframeContainer .redflags[red-flag="91"] *,
#outerframeContainer .redflags[red-flag="90"],
#outerframeContainer .redflags[red-flag="90"] *,
#outerframeContainer .redflags[red-flag="89"],
#outerframeContainer .redflags[red-flag="89"] *,
#outerframeContainer .redflags[red-flag="88"],
#outerframeContainer .redflags[red-flag="88"] *,
#outerframeContainer .redflags[red-flag="87"],
#outerframeContainer .redflags[red-flag="87"] *,
#outerframeContainer .redflags[red-flag="86"],
#outerframeContainer .redflags[red-flag="86"] *,
#outerframeContainer .redflags[red-flag="85"],
#outerframeContainer .redflags[red-flag="85"] *,
#outerframeContainer .redflags[red-flag="84"],
#outerframeContainer .redflags[red-flag="84"] *,
#outerframeContainer .redflags[red-flag="83"],
#outerframeContainer .redflags[red-flag="83"] *,
#outerframeContainer .redflags[red-flag="82"],
#outerframeContainer .redflags[red-flag="82"] *,
#outerframeContainer .redflags[red-flag="81"],
#outerframeContainer .redflags[red-flag="81"] *,
#outerframeContainer .redflags[red-flag="80"],
#outerframeContainer .redflags[red-flag="80"] *,
#outerframeContainer .redflags[red-flag="79"],
#outerframeContainer .redflags[red-flag="79"] *,
#outerframeContainer .redflags[red-flag="78"],
#outerframeContainer .redflags[red-flag="78"] *,
#outerframeContainer .redflags[red-flag="77"],
#outerframeContainer .redflags[red-flag="77"] *,
#outerframeContainer .redflags[red-flag="76"],
#outerframeContainer .redflags[red-flag="76"] *,
#outerframeContainer .redflags[red-flag="75"],
#outerframeContainer .redflags[red-flag="75"] *,
#outerframeContainer .redflags[red-flag="74"],
#outerframeContainer .redflags[red-flag="74"] *,
#outerframeContainer .redflags[red-flag="73"],
#outerframeContainer .redflags[red-flag="73"] *,
#outerframeContainer .redflags[red-flag="72"],
#outerframeContainer .redflags[red-flag="72"] *,
#outerframeContainer .redflags[red-flag="71"],
#outerframeContainer .redflags[red-flag="71"] *,
#outerframeContainer .redflags[red-flag="70"],
#outerframeContainer .redflags[red-flag="70"] *,
#outerframeContainer .redflags[red-flag="69"],
#outerframeContainer .redflags[red-flag="69"] *,
#outerframeContainer .redflags[red-flag="68"],
#outerframeContainer .redflags[red-flag="68"] *,
#outerframeContainer .redflags[red-flag="67"],
#outerframeContainer .redflags[red-flag="67"] *,
#outerframeContainer .redflags[red-flag="66"],
#outerframeContainer .redflags[red-flag="66"] *,
#outerframeContainer .redflags[red-flag="65"],
#outerframeContainer .redflags[red-flag="65"] *,
#outerframeContainer .redflags[red-flag="64"],
#outerframeContainer .redflags[red-flag="64"] *,
#outerframeContainer .redflags[red-flag="63"],
#outerframeContainer .redflags[red-flag="63"] *,
#outerframeContainer .redflags[red-flag="62"],
#outerframeContainer .redflags[red-flag="62"] *,
#outerframeContainer .redflags[red-flag="61"],
#outerframeContainer .redflags[red-flag="61"] *,
#outerframeContainer .redflags[red-flag="60"],
#outerframeContainer .redflags[red-flag="60"] *,
#outerframeContainer .redflags[red-flag="59"],
#outerframeContainer .redflags[red-flag="59"] *,
#outerframeContainer .redflags[red-flag="58"],
#outerframeContainer .redflags[red-flag="58"] *,
#outerframeContainer .redflags[red-flag="57"],
#outerframeContainer .redflags[red-flag="57"] *,
#outerframeContainer .redflags[red-flag="56"],
#outerframeContainer .redflags[red-flag="56"] *,
#outerframeContainer .redflags[red-flag="55"],
#outerframeContainer .redflags[red-flag="55"] *,
#outerframeContainer .redflags[red-flag="54"],
#outerframeContainer .redflags[red-flag="54"] *,
#outerframeContainer .redflags[red-flag="53"],
#outerframeContainer .redflags[red-flag="53"] *,
#outerframeContainer .redflags[red-flag="52"],
#outerframeContainer .redflags[red-flag="52"] *,
#outerframeContainer .redflags[red-flag="51"],
#outerframeContainer .redflags[red-flag="51"] *,
#outerframeContainer .redflags[red-flag="50"],
#outerframeContainer .redflags[red-flag="50"] *,
#outerframeContainer .redflags[red-flag="49"],
#outerframeContainer .redflags[red-flag="49"] *,
#outerframeContainer .redflags[red-flag="48"],
#outerframeContainer .redflags[red-flag="48"] *,
#outerframeContainer .redflags[red-flag="47"],
#outerframeContainer .redflags[red-flag="47"] *,
#outerframeContainer .redflags[red-flag="46"],
#outerframeContainer .redflags[red-flag="46"] *,
#outerframeContainer .redflags[red-flag="45"],
#outerframeContainer .redflags[red-flag="45"] *,
#outerframeContainer .redflags[red-flag="44"],
#outerframeContainer .redflags[red-flag="44"] *,
#outerframeContainer .redflags[red-flag="43"],
#outerframeContainer .redflags[red-flag="43"] *,
#outerframeContainer .redflags[red-flag="42"],
#outerframeContainer .redflags[red-flag="42"] *,
#outerframeContainer .redflags[red-flag="41"],
#outerframeContainer .redflags[red-flag="41"] *,
#outerframeContainer .redflags[red-flag="40"],
#outerframeContainer .redflags[red-flag="40"] *,
#outerframeContainer .redflags[red-flag="39"],
#outerframeContainer .redflags[red-flag="39"] *,
#outerframeContainer .redflags[red-flag="38"],
#outerframeContainer .redflags[red-flag="38"] *,
#outerframeContainer .redflags[red-flag="37"],
#outerframeContainer .redflags[red-flag="37"] *,
#outerframeContainer .redflags[red-flag="36"],
#outerframeContainer .redflags[red-flag="36"] *,
#outerframeContainer .redflags[red-flag="35"],
#outerframeContainer .redflags[red-flag="35"] *,
#outerframeContainer .redflags[red-flag="34"],
#outerframeContainer .redflags[red-flag="34"] *,
#outerframeContainer .redflags[red-flag="33"],
#outerframeContainer .redflags[red-flag="33"] *,
#outerframeContainer .redflags[red-flag="32"],
#outerframeContainer .redflags[red-flag="32"] *,
#outerframeContainer .redflags[red-flag="31"],
#outerframeContainer .redflags[red-flag="31"] *,
#outerframeContainer .redflags[red-flag="30"],
#outerframeContainer .redflags[red-flag="30"] *,
#outerframeContainer .redflags[red-flag="29"],
#outerframeContainer .redflags[red-flag="29"] *,
#outerframeContainer .redflags[red-flag="28"],
#outerframeContainer .redflags[red-flag="28"] *,
#outerframeContainer .redflags[red-flag="27"],
#outerframeContainer .redflags[red-flag="27"] *,
#outerframeContainer .redflags[red-flag="26"],
#outerframeContainer .redflags[red-flag="26"] *,
#outerframeContainer .redflags[red-flag="25"],
#outerframeContainer .redflags[red-flag="25"] *,
#outerframeContainer .redflags[red-flag="24"],
#outerframeContainer .redflags[red-flag="24"] *,
#outerframeContainer .redflags[red-flag="23"],
#outerframeContainer .redflags[red-flag="23"] *,
#outerframeContainer .redflags[red-flag="22"],
#outerframeContainer .redflags[red-flag="22"] *,
#outerframeContainer .redflags[red-flag="21"],
#outerframeContainer .redflags[red-flag="21"] *,
#outerframeContainer .redflags[red-flag="20"],
#outerframeContainer .redflags[red-flag="20"] * {
color: #fff !important;
}
/* Helle Red-Flags (10-19%): Schwarze Schrift für besseren Kontrast */
#outerframeContainer .redflags[red-flag="19"],
#outerframeContainer .redflags[red-flag="19"] *,
#outerframeContainer .redflags[red-flag="18"],
#outerframeContainer .redflags[red-flag="18"] *,
#outerframeContainer .redflags[red-flag="17"],
#outerframeContainer .redflags[red-flag="17"] *,
#outerframeContainer .redflags[red-flag="16"],
#outerframeContainer .redflags[red-flag="16"] *,
#outerframeContainer .redflags[red-flag="15"],
#outerframeContainer .redflags[red-flag="15"] *,
#outerframeContainer .redflags[red-flag="14"],
#outerframeContainer .redflags[red-flag="14"] *,
#outerframeContainer .redflags[red-flag="13"],
#outerframeContainer .redflags[red-flag="13"] *,
#outerframeContainer .redflags[red-flag="12"],
#outerframeContainer .redflags[red-flag="12"] *,
#outerframeContainer .redflags[red-flag="11"],
#outerframeContainer .redflags[red-flag="11"] *,
#outerframeContainer .redflags[red-flag="10"],
#outerframeContainer .redflags[red-flag="10"] * {
color: #000 !important;
}
/* Grüne Red-Flags (0-9%): Weiße Schrift */
#outerframeContainer .redflags[red-flag="9"],
#outerframeContainer .redflags[red-flag="9"] *,
#outerframeContainer .redflags[red-flag="8"],
#outerframeContainer .redflags[red-flag="8"] *,
#outerframeContainer .redflags[red-flag="7"],
#outerframeContainer .redflags[red-flag="7"] *,
#outerframeContainer .redflags[red-flag="6"],
#outerframeContainer .redflags[red-flag="6"] *,
#outerframeContainer .redflags[red-flag="5"],
#outerframeContainer .redflags[red-flag="5"] *,
#outerframeContainer .redflags[red-flag="4"],
#outerframeContainer .redflags[red-flag="4"] *,
#outerframeContainer .redflags[red-flag="3"],
#outerframeContainer .redflags[red-flag="3"] *,
#outerframeContainer .redflags[red-flag="2"],
#outerframeContainer .redflags[red-flag="2"] *,
#outerframeContainer .redflags[red-flag="1"],
#outerframeContainer .redflags[red-flag="1"] *,
#outerframeContainer .redflags[red-flag="0"],
#outerframeContainer .redflags[red-flag="0"] * {
color: #fff !important;
}
#outerframeContainer .filtertable td:first-child,
#outerframeContainer .overalltable td:first-child {
border-radius: 6px 0 0 6px !important;
}
#outerframeContainer .filtertable td:last-child,
#outerframeContainer .overalltable td:last-child {
border-radius: 0 6px 6px 0 !important;
}
/* ===== RED-FLAG CONTRAST FIX (2026-01-27 - CORRECTED) ===== */
/* Die Hintergrundfarben kommen aus main.css - wir schützen NUR die Textfarbe! */
/* Problem: Tenant style.css überschreibt mit 'color: #001472 !important' */
/* Lösung: Alle Kind-Elemente erben die Farbe vom .redflags[red-flag] Element */
/* ===== DESCRIPTION STYLING (override main.css) ===== */
.chapter .description {
color: #000 !important;
}
.factor .description {
margin-left: 20px !important;
color: #000 !important;
line-height: 1.4 !important;
}
.heading p.description {
color: #000 !important;
}
/* ===== CHAPTER DESCRIPTION SPECIFIC ===== */
.chapter .description,
.chapter p.description,
.chapter div.description {
color: #000 !important;
font-weight: normal !important;
}
/* Harmonische Styles für CKEditor */
.richtext-editor .ck-editor__editable {
min-height: 180px;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
font-family: inherit;
font-size: 15px;
color: #000 !important;
box-shadow: none !important;
padding: 0 !important;
outline: none !important;
}
/* CKEditor Container komplett anpassen */
.richtext-editor .ck.ck-editor__main {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.richtext-editor .ck.ck-editor__main > .ck-editor__editable {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
outline: none !important;
}
/* Toolbar anpassen */
.ck.ck-toolbar {
border-radius: 0 !important;
background: #f5f6fa !important;
border: none !important;
border-bottom: 1px solid #e0e0e0 !important;
margin-bottom: 0 !important;
}
.ck.ck-toolbar .ck-button {
color: #336eff;
}
.ck.ck-toolbar .ck-button.ck-on {
background: #e6f0ff;
}
/* Container-Abstände harmonisieren */
.edit-container {
padding: 5px 15px 0 15px !important;
}
/* Einheitliche Schriftart für alle Elemente */
.ck-editor__editable *,
.richtext-preview * {
font-family: inherit !important;
color: #000 !important;
}
/* Überschriften-Hierarchie korrekt definieren */
.ck-editor__editable h1,
.richtext-preview h1 {
font-size: 28px !important;
font-weight: 600 !important;
margin: 16px 0 8px 0;
line-height: 1.3;
color: #000 !important;
text-align: left !important;
}
.ck-editor__editable h2,
.richtext-preview h2 {
font-size: 24px !important;
font-weight: 600 !important;
margin: 16px 0 8px 0;
line-height: 1.3;
color: #000 !important;
text-align: left !important;
}
.ck-editor__editable h3,
.richtext-preview h3 {
font-size: 15px !important;
font-weight: 600 !important;
margin: 16px 0 8px 0;
line-height: 1.3;
color: #000 !important;
text-align: left !important;
}
.ck-editor__editable h4,
.ck-editor__editable h5,
.ck-editor__editable h6,
.richtext-preview h4,
.richtext-preview h5,
.richtext-preview h6 {
font-size: 15px !important;
font-weight: 600 !important;
margin: 16px 0 8px 0;
line-height: 1.3;
color: #000 !important;
text-align: left !important;
}
/* Listen und Aufzählungspunkte korrekt ausrichten - für Editor */
.ck-editor__editable ul,
.ck-editor__editable ol {
padding-left: 20px !important;
margin: 8px 0;
}
.ck-editor__editable ul li,
.ck-editor__editable ol li {
margin: 4px 0;
line-height: 1.5;
color: #000 !important;
}
/* Spezifische Anpassungen für Aufzählungspunkte - für Editor */
.ck-editor__editable ul li::marker {
color: #000 !important;
}
/* Zusätzliche Abstände für bessere Lesbarkeit - für Editor */
.ck-editor__editable p {
margin: 8px 0;
line-height: 1.5;
color: #000 !important;
text-align: left !important;
}
/* Styles für Vorschau-Anzeige (gespeicherter Zustand) */
.richtext-preview {
min-height: 180px;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
font-family: inherit;
font-size: 15px;
color: #000 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Listen und Aufzählungspunkte korrekt ausrichten - für Vorschau */
.richtext-preview ul,
.richtext-preview ol {
padding-left: 20px !important;
margin: 8px 0;
}
.richtext-preview ul li,
.richtext-preview ol li {
margin: 4px 0;
line-height: 1.5;
color: #000 !important;
}
/* Spezifische Anpassungen für Aufzählungspunkte - für Vorschau */
.richtext-preview ul li::marker {
color: #000 !important;
}
/* Zusätzliche Abstände für bessere Lesbarkeit - für Vorschau */
.richtext-preview p {
margin: 8px 0;
line-height: 1.5;
color: #000 !important;
text-align: left !important;
}
/* Spalten 4 (Owner) und 5 (Due) in Template/Global ausblenden */
.pm-panel[data-entity="template"] .pm-table thead tr > th:nth-child(4),
.pm-panel[data-entity="template"] .pm-table thead tr > th:nth-child(5),
.pm-panel[data-entity="template"] .pm-table tbody tr > td:nth-child(4),
.pm-panel[data-entity="template"] .pm-table tbody tr > td:nth-child(5),
.pm-panel[data-entity="global"] .pm-table thead tr > th:nth-child(4),
.pm-panel[data-entity="global"] .pm-table thead tr > th:nth-child(5),
.pm-panel[data-entity="global"] .pm-table tbody tr > td:nth-child(4),
.pm-panel[data-entity="global"] .pm-table tbody tr > td:nth-child(5) {
display: none !important;
}
/* ========== Grid/Flex-Container: Abstände immer hier steuern ========== */
.pm-cards {
display: grid; /* oder flex; beides ok */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px; /* ersetzt margin-top auf .pm-card */
}
/* ========== Base Card ========== */
.pm-card {
--pm-border: 1px solid #e5e7eb;
--pm-radius: 15px;
--pm-bg: #fff;
--pm-padding: 10px;
border: var(--pm-border);
border-radius: var(--pm-radius);
background: var(--pm-bg);
overflow: hidden;
box-shadow: none;
}
/* Seite/Sidebar-Variante */
.as-side .pm-card {
--pm-border: 0;
--pm-radius: 0;
--pm-bg: transparent;
--pm-padding: 10px 0;
border: var(--pm-border);
border-bottom: 1px solid #c6c6c6;
background: var(--pm-bg);
box-shadow: none;
}
/* ========== Bildbereich mit Titel-Overlay ========== */
.pm-card-thumb {
position: relative; /* Referenz für Overlay & Titel */
height: 180px; /* fixe Höhe für konsistente Karten */
overflow: hidden;
border-radius: 12px; /* opt. eigene Rundung */
padding: 0;
}
/* Bild skaliert sauber */
.pm-card-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Vollflächiger Gradient über dem gesamten Bild (ohne Rand) */
.pm-card-thumb::after {
content: "";
position: absolute;
inset: 0; /* top/right/bottom/left = 0 */
pointer-events: none;
z-index: 1;
background: linear-gradient(
to top,
rgba(0,0,0,0.72) 0%,
rgba(0,0,0,0.45) 35%,
rgba(0,0,0,0.18) 60%,
rgba(0,0,0,0.00) 100%
);
}
/* Titel als Overlay: unten andocken, nach oben wachsen, max. 4 Zeilen */
.pm-card .pm-title {
position: absolute;
left: 33px;
right: 0;
bottom: 0;
z-index: 2; /* über dem Gradient */
padding: 7px 7px 0px 7px;
font-weight: 600;
font-size: 13px;
line-height: 1.1;
color: #fff;
/* Multiline Clamp (max. 4 Zeilen) */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
/* kein eigener Hintergrund mehr */
background: none;
}
/* Untertitel ausblenden (nicht mehr im Datenmodell) */
.pm-card .pm-subtitle {
display: none !important;
}
/* ========== Card-Body unter dem Bild ========== */
.pm-card-body {
padding: var(--pm-padding);
background: #fff;
}
/* ========== TASK VIEWER - INSPIRING DESIGN ========== */
.task-status-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.task-status-indicator.completed {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
border-color: rgba(16, 185, 129, 0.3);
}
.task-status-indicator.in-progress {
background: rgba(245, 158, 11, 0.2);
color: #f59e0b;
border-color: rgba(245, 158, 11, 0.3);
}
.task-status-indicator i {
font-size: 16px;
}
.task-header .matv-title {
color: #000;
font-size: 28px;
font-weight: 800;
text-shadow: none;
}
.task-header .matv-title i {
font-size: 32px;
margin-right: 12px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.task-header .matv-actions {
position: relative;
z-index: 2;
}
.task-header-content {
display: flex;
gap: 30px;
justify-content: center;
}
.task-header .pm-btn {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.task-header .pm-btn:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.task-header .pm-btn--primary {
background: rgba(16, 185, 129, 0.8);
border-color: rgba(16, 185, 129, 0.9);
}
.task-header .pm-btn--primary:hover {
background: rgba(16, 185, 129, 1);
border-color: #10b981;
}
/* Task Summary Section */
.task-summary {
margin-bottom: 32px;
}
.summary-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.summary-header {
margin-bottom: 24px;
}
.summary-title {
font-size: 32px;
font-weight: 800;
color: #1f2937;
margin: 0 0 16px 0;
line-height: 1.2;
}
.summary-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.summary-badges .type-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border: 1px solid #cbd5e1;
color: #475569;
transition: all 0.3s ease;
}
.summary-badges .type-chip:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.summary-badges .type-chip i {
font-size: 16px;
}
.summary-badges .date-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
border: 1px solid #93c5fd;
color: #1e40af;
font-weight: 600;
font-size: 14px;
}
.summary-badges .urgency-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
border: 1px solid transparent;
}
.summary-badges .urgency--low {
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
color: #166534;
border-color: #86efac;
}
.summary-badges .urgency--normal {
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
color: #374151;
border-color: #d1d5db;
}
.summary-badges .urgency--high {
background: linear-gradient(135deg, #fef2f2, #fecaca);
color: #991b1b;
border-color: #fca5a5;
}
/* Summary Statistics */
.summary-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 24px;
margin: 24px 0;
padding: 24px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.stat-item {
text-align: center;
padding: 16px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.stat-value {
font-size: 32px;
font-weight: 800;
color: #1f2937;
margin-bottom: 4px;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 14px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Summary Description */
.summary-description {
margin-top: 24px;
padding: 24px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.summary-description .rt-preview--summary {
font-size: 16px;
line-height: 1.6;
color: #374151;
}
.summary-empty {
display: flex;
align-items: center;
gap: 12px;
padding: 24px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 16px;
border: 1px solid #e2e8f0;
color: #6b7280;
font-style: italic;
}
.summary-empty i {
font-size: 20px;
color: #9ca3af;
}
.matv-body {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Responsive Design */
@media (max-width: 768px) {
.task-header {
padding: 20px;
margin-bottom: 20px;
}
.task-header .matv-title {
font-size: 24px;
}
.task-header .matv-title i {
font-size: 28px;
}
.summary-card {
padding: 24px;
}
.summary-title {
font-size: 28px;
}
.summary-stats {
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
}
.stat-value {
font-size: 28px;
}
.matv-shell.is-viewer {
padding: 16px;
}
.matv-doc {
padding: 24px;
}
.summary-badges {
flex-direction: column;
align-items: flex-start;
}
.task-header .matv-actions {
flex-wrap: wrap;
gap: 8px;
}
.task-header .pm-btn {
font-size: 14px;
padding: 8px 12px;
}
}
@media (max-width: 480px) {
.task-header {
padding: 16px;
}
.task-header .matv-title {
font-size: 20px;
}
.summary-card {
padding: 20px;
}
.summary-title {
font-size: 24px;
}
.summary-stats {
padding: 16px;
}
.stat-value {
font-size: 24px;
}
.matv-shell.is-viewer {
padding: 12px;
}
.matv-doc {
padding: 20px;
}
}
/* ========== TOP MENU & NAVIGATION STYLING ========== */
/* simple tabs */
.twz-tabs{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.twz-tab{ border:1px solid var(--pm-border,#e5e7eb); padding:6px 10px; border-radius:999px; background:#fff; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.twz-tab.is-active{ background:#111; color:#fff; border-color:#111; }
.twz-tab__count{ font-size:12px; opacity:.8; }
/* reuse existing grid styles; add category illus variants */
.type-illus--oneclick{ background:linear-gradient(135deg,#e0f7ff,#fff); }
.type-illus--standard{ background:linear-gradient(135deg,#eef2ff,#fff); }
.type-illus--custom{ background:linear-gradient(135deg,#fff7ed,#fff); }
.type-illus--advanced{ background:linear-gradient(135deg,#fef2f2,#fff); }
.pm-list__empty {
text-align: center;
padding: 40px 20px;
color: #9ca3af;
font-style: italic;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
margin: 20px;
}
/* Enhanced Form Elements */
.twz-label {
display: block;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
font-size: 14px;
}
.twz-label--required::after {
content: ' *';
color: #ef4444;
}
.twz-radio-group {
margin-bottom: 16px;
}
.pm-radio {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 8px;
}
.pm-radio:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.pm-radio input[type="radio"] {
margin: 0;
width: 18px;
height: 18px;
accent-color: #667eea;
}
.pm-radio input[type="radio"]:checked + span {
font-weight: 600;
color: #667eea;
}
.pm-radio span {
font-weight: 500;
color: #374151;
}
.small.as-muted {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
padding-left: 0px;
}
/* Enhanced Wizard Grid */
.wizard-grid {
background: white;
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.form-col {
margin-bottom: 24px;
}
.form-col--full {
width: 100%;
}
/* Enhanced Picked Boxes */
.picked-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #374151;
margin-bottom: 12px;
font-size: 14px;
}
.picked-title i {
color: #667eea;
font-size: 16px;
}
.picked-box {
padding: 16px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.picked-box .fw-700 {
font-weight: 700;
color: #667eea;
font-size: 16px;
}
/* Enhanced Modal Actions */
.pm-modal__actions {
display: flex;
gap: 12px;
justify-content: flex-end;
padding: 24px 0 0 0;
border-top: 1px solid #e5e7eb;
margin-top: 24px;
}
.wizard-actions {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
padding: 24px 0 0 0;
border-top: 1px solid #e5e7eb;
margin-top: 24px;
}
/* Enhanced Subhead */
.pm-subhead {
font-size: 18px;
font-weight: 700;
color: #1f2937;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid #e5e7eb;
}
/* Enhanced Document Styling */
.doc-title {
font-size: 36px;
font-weight: 800;
color: #1f2937;
margin: 0 0 20px 0;
line-height: 1.2;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.doc-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 24px;
padding: 16px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.doc-empty {
text-align: center;
padding: 40px 20px;
color: #9ca3af;
font-style: italic;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
border: 1px dashed #d1d5db;
}
/* Enhanced TLT (Task List Toolbar) Elements */
.tlt-mt-3 {
margin-top: 24px;
}
/* Enhanced Responsive Design for Navigation */
@media (max-width: 768px) {
.matv-actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.matv-actions .pm-btn {
width: 100%;
justify-content: center;
}
.wizard-actions {
flex-direction: column;
gap: 12px;
}
.wizard-actions .pm-btn {
width: 100%;
}
.tlt-toolbar {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.tlt-inline {
justify-content: center;
}
.pm-table-wrap {
overflow-x: auto;
}
.pm-table {
min-width: 600px;
}
}
@media (max-width: 480px) {
.pm-btn {
padding: 10px 16px;
font-size: 13px;
}
.wizard-grid {
padding: 24px;
}
.summary-card {
padding: 20px;
}
.doc-title {
font-size: 28px;
}
}
/* ========== FORM BUILDER - ENHANCED DESIGN ========== */
/* Form Builder Container */
.form-builder-container {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Form Builder Header */
.form-builder-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-bottom: 1px solid #e2e8f0;
}
.builder-mode-toggle {
display: flex;
background: white;
border-radius: 12px;
padding: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
}
.mode-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: none;
background: transparent;
color: #6b7280;
font-weight: 600;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.mode-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.5s ease;
}
.mode-btn:hover::before {
left: 100%;
}
.mode-btn:hover {
color: #374151;
background: rgba(102, 126, 234, 0.05);
}
.mode-btn.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.mode-btn i {
font-size: 16px;
}
.builder-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* Code Editor Panel */
.code-editor-panel {
background: white;
}
.code-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background: linear-gradient(135deg, #1f2937, #374151);
color: white;
border-bottom: 1px solid #4b5563;
}
.code-editor-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 16px;
}
.code-editor-title i {
color: #10b981;
}
.code-editor-actions {
display: flex;
gap: 8px;
}
.code-editor-wrapper {
position: relative;
padding: 24px;
}
.code-editor {
width: 100%;
min-height: 300px;
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 14px;
line-height: 1.5;
background: #f8fafc;
color: #1f2937;
resize: vertical;
transition: all 0.3s ease;
}
.code-editor:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
background: white;
}
.code-error {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 12px 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #dc2626;
font-size: 14px;
font-weight: 500;
}
.code-error i {
color: #ef4444;
}
/* Form Preview Panel */
.form-preview-panel {
margin-top: 24px;
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
overflow: hidden;
}
.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-bottom: 1px solid #bae6fd;
}
.preview-header h4 {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: #0369a1;
font-weight: 600;
}
.preview-content {
padding: 24px;
}
/* Form Builder Main Component */
.form-builder {
display: grid;
grid-template-columns: 320px 1fr;
gap: 32px;
padding: 32px;
min-height: 600px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.form-builder::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.form-builder > * {
position: relative;
z-index: 2;
}
/* Field Palette */
.field-palette {
background: white;
border-radius: 16px;
padding: 24px;
border: 1px solid #e2e8f0;
height: fit-content;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.field-palette::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
.palette-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px 0;
color: #1f2937;
font-weight: 800;
font-size: 18px;
padding-bottom: 12px;
border-bottom: 2px solid #e2e8f0;
}
.palette-title i {
color: #667eea;
font-size: 20px;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.field-types {
display: grid;
gap: 12px;
}
.field-type-btn {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border: 2px solid #e5e7eb;
border-radius: 12px;
background: white;
color: #374151;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.field-type-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.6s ease;
}
.field-type-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #667eea, #764ba2);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 10px;
}
.field-type-btn:hover::before {
left: 100%;
}
.field-type-btn:hover {
border-color: #667eea;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
color: #1e40af;
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}
.field-type-btn:hover::after {
opacity: 0.05;
}
.field-type-btn:active {
transform: translateY(-2px) scale(1.01);
}
.field-type-btn i {
font-size: 18px;
color: #667eea;
width: 24px;
text-align: center;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.field-type-btn:hover i {
color: #1e40af;
transform: scale(1.1);
}
.field-type-btn span {
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
/* Form Fields */
.form-fields {
background: white;
border-radius: 16px;
border: 1px solid #e2e8f0;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
position: relative;
}
.form-fields::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #10b981, #059669, #047857);
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
.fields-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 24px 28px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-bottom: 1px solid #e2e8f0;
color: #1f2937;
font-weight: 800;
font-size: 18px;
position: relative;
z-index: 2;
}
.fields-title i {
color: #10b981;
font-size: 20px;
background: linear-gradient(135deg, #10b981, #059669);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.field-count {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
padding: 6px 12px;
border-radius: 16px;
font-size: 13px;
font-weight: 700;
margin-left: auto;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
color: #6b7280;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
position: relative;
overflow: hidden;
}
.empty-state::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
transform: translate(-50%, -50%);
border-radius: 50%;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
.empty-state i {
font-size: 64px;
color: #cbd5e1;
margin-bottom: 20px;
position: relative;
z-index: 2;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.empty-state p {
margin: 0;
font-size: 18px;
font-weight: 600;
position: relative;
z-index: 2;
max-width: 300px;
line-height: 1.5;
}
/* Fields List */
.fields-list {
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}
.field-item {
background: white;
border: 2px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.field-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
opacity: 0;
transition: opacity 0.3s ease;
}
.field-item:hover {
border-color: #667eea;
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
transform: translateY(-4px) scale(1.01);
}
.field-item:hover::before {
opacity: 1;
}
.field-item:active {
transform: translateY(-2px) scale(1.005);
}
.field-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.field-info {
display: flex;
align-items: center;
gap: 16px;
}
.field-info i {
font-size: 20px;
color: #667eea;
width: 24px;
text-align: center;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.field-label {
font-weight: 700;
color: #1f2937;
font-size: 17px;
}
.required-badge {
background: linear-gradient(135deg, #fef2f2, #fecaca);
color: #dc2626;
padding: 4px 10px;
border-radius: 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
animation: pulse 2s infinite;
}
.field-actions {
display: flex;
gap: 8px;
align-items: center;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 2px solid #e5e7eb;
border-radius: 10px;
background: white;
color: #6b7280;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.action-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.5s ease;
}
.action-btn:hover::before {
left: 100%;
}
.action-btn:hover {
background: #f3f4f6;
color: #374151;
border-color: #d1d5db;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.action-btn.danger:hover {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}
.drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 2px solid #e5e7eb;
border-radius: 10px;
background: white;
color: #9ca3af;
cursor: grab;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.drag-handle::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.5s ease;
}
.drag-handle:hover::before {
left: 100%;
}
.drag-handle:hover {
background: #f3f4f6;
color: #6b7280;
border-color: #d1d5db;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.drag-handle:active {
cursor: grabbing;
transform: translateY(0) scale(0.95);
}
/* Field Editor */
.field-editor {
padding: 24px;
background: white;
position: relative;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.field-col {
display: flex;
flex-direction: column;
}
.field-label-input {
display: flex;
flex-direction: column;
gap: 8px;
}
.field-label-input span {
font-weight: 700;
color: #374151;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.field-label-input input {
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #f8fafc;
color: #374151;
}
.field-label-input input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
background: white;
transform: translateY(-1px);
}
.field-label-input input:hover {
border-color: #cbd5e1;
background: #f1f5f9;
}
.field-checkbox {
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
}
.field-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #667eea;
}
.field-checkbox span {
font-weight: 500;
color: #374151;
font-size: 14px;
}
/* Field Options */
.field-options {
margin-top: 24px;
padding: 20px;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-radius: 12px;
border: 2px solid #bae6fd;
position: relative;
overflow: hidden;
}
.field-options::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #0ea5e9, #0284c7, #0369a1);
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
.options-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.options-header span {
font-weight: 700;
color: #0369a1;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.options-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.option-item {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
align-items: center;
padding: 12px;
background: white;
border-radius: 8px;
border: 1px solid #bae6fd;
transition: all 0.3s ease;
}
.option-item:hover {
border-color: #0ea5e9;
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
}
.option-item input {
padding: 10px 14px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
background: #f8fafc;
transition: all 0.3s ease;
}
.option-item input:focus {
outline: none;
border-color: #0ea5e9;
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
background: white;
}
.remove-option-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: white;
color: #6b7280;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.remove-option-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.1), transparent);
transition: left 0.5s ease;
}
.remove-option-btn:hover::before {
left: 100%;
}
.remove-option-btn:hover:not(:disabled) {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}
.remove-option-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 1024px) {
.form-builder {
grid-template-columns: 1fr;
gap: 16px;
}
.field-palette {
order: 2;
}
.form-fields {
order: 1;
}
}
@media (max-width: 768px) {
.form-builder-container {
margin: 0 -16px;
border-radius: 0;
}
.form-builder {
padding: 16px;
}
.field-row {
grid-template-columns: 1fr;
gap: 12px;
}
.builder-mode-toggle {
flex-direction: column;
width: 100%;
}
.mode-btn {
justify-content: center;
}
.form-builder-header {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.builder-actions {
justify-content: center;
}
}
@media (max-width: 480px) {
.form-builder {
padding: 12px;
}
.field-palette {
padding: 16px;
}
.fields-list {
padding: 16px;
}
.field-editor {
padding: 16px;
}
.option-item {
grid-template-columns: 1fr;
gap: 8px;
}
.remove-option-btn {
width: 100%;
height: 40px;
}
}
/* Gradient Shift Animation */
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ========== TASK VIEWER - EDITOR CONTAINER ========== */
/* Editor Container */
.editor-container {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
}
.editor-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
/* Override task-wizard styling when used in editor */
.editor-container .task-wizard {
box-shadow: none;
border: none;
border-radius: 0;
}
.editor-container .task-wizard .matv-shell {
border-radius: 0;
box-shadow: none;
}
/* ========== TASK VIEWER - TASK SUMMARY SECTION ========== */
/* Task Summary Section */
.task-summary-section {
margin-bottom: 32px;
}
.task-summary-section .summary-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 300% 100%;
animation: gradientShift 3s ease infinite;
}
.task-summary-section .summary-header {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 2px solid #f1f5f9;
}
.task-summary-section .summary-title {
font-size: 32px;
font-weight: 800;
color: #1f2937;
margin: 0 0 16px 0;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.task-summary-section .summary-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.task-summary-section .summary-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 24px;
margin: 24px 0;
padding: 24px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.task-summary-section .summary-description {
margin-top: 24px;
padding: 20px;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-radius: 12px;
border: 1px solid #bae6fd;
}
.task-summary-section .summary-empty {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
border: 1px solid #e2e8f0;
color: #6b7280;
font-style: italic;
}
.task-summary-section .summary-empty i {
font-size: 20px;
color: #cbd5e1;
}
/* ========== TASK SIDEMENU - CHECKLIST STYLING ========== */
/* ========== TASK VIEWER - EXTERNAL PROGRAM AND SUBTASKS ========== */
/* External Program Section */
.tv-external-program {
margin: 32px 0;
background: white;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.tv-external-program__header {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
padding: 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tv-external-program__info {
display: flex;
align-items: flex-start;
gap: 16px;
}
.tv-external-program__icon {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
}
.tv-external-program__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tv-external-program__icon-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.tv-external-program__details {
flex: 1;
min-width: 0;
}
.tv-external-program__title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
line-height: 1.3;
}
.tv-external-program__description {
color: #64748b;
margin: 0 0 12px 0;
line-height: 1.5;
}
.tv-external-program__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.tv-external-program__type {
background: #667eea;
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tv-external-program__step-count {
background: #f1f5f9;
color: #475569;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
/* Subtasks Section */
.tv-subtasks {
padding: 24px;
}
.tv-subtasks__title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 8px;
}
.tv-subtasks__title i {
color: #667eea;
}
.tv-subtasks__list {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Subtask Cards */
.tv-subtask-card {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.tv-subtask-card:hover {
border-color: #667eea;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
transform: translateY(-1px);
}
.tv-subtask-card__header {
display: flex;
gap: 16px;
flex: 1;
min-width: 0;
}
.tv-subtask-card__step {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
}
.tv-subtask-card__step-number {
line-height: 1;
}
.tv-subtask-card__info {
flex: 1;
min-width: 0;
}
.tv-subtask-card__title {
font-size: 16px;
font-weight: 600;
color: #1e293b;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 8px;
line-height: 1.4;
}
.tv-subtask-card__title i {
color: #667eea;
font-size: 14px;
}
.tv-subtask-card__description {
color: #64748b;
margin: 0 0 12px 0;
line-height: 1.5;
font-size: 14px;
}
.tv-subtask-card__meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tv-subtask-card__type {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.tv-subtask-card__date {
font-size: 11px;
color: #64748b;
display: flex;
align-items: center;
gap: 4px;
}
.tv-subtask-card__urgency {
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.tv-subtask-card__actions {
flex-shrink: 0;
display: flex;
align-items: center;
}
/* Responsive Design */
@media (max-width: 768px) {
.tv-external-program__info {
flex-direction: column;
text-align: center;
}
.tv-external-program__icon {
align-self: center;
}
.tv-subtask-card {
flex-direction: column;
align-items: stretch;
}
.tv-subtask-card__header {
margin-bottom: 16px;
}
.tv-subtask-card__actions {
align-self: stretch;
}
.tv-subtask-card__actions .pm-btn {
width: 100%;
}
}
/* ========== TASK RESPONSES TABLE ========== */
/* User Initials */
.user-initials-cell {
display: flex;
align-items: center;
justify-content: center;
}
.user-initials {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
cursor: help;
transition: all 0.3s ease;
}
.user-initials:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
/* Target Group Labels in Table */
.target-group-labels {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.target-group-tag {
background: #f1f5f9;
color: #475569;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
/* Status Badges */
.status-badge {
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.status-completed {
background: #f0f9ff;
color: #0369a1;
border: 1px solid #bae6fd;
}
.status-response {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}
/* Panel Centering and Styling */
.tv-panel-centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100%;
padding: 2rem;
}
.panel-content {
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.panel-header {
margin-bottom: 1.5rem;
text-align: center;
}
.panel-title {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin: 0 0 0.5rem 0;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.panel-subtitle {
color: #6b7280;
font-size: 0.95rem;
margin: 0;
line-height: 1.5;
}
.panel-search {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.panel-empty {
text-align: center;
color: #9ca3af;
font-style: italic;
padding: 2rem;
}
.panel-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
/* Selectable Target Group Chips */
.tg-chips--selectable {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
align-items: center;
}
.tg-chip--selectable {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 200px;
justify-content: space-between;
}
.tg-chip--selectable:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}
.tg-chip--selectable.is-selected {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: #667eea;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.tg-chip--selectable.is-selected .tg-badge {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.tg-chip--selectable.is-selected .tg-label {
color: white;
}
.tg-chip--selectable.is-selected .tg-count {
color: white;
font-weight: 600;
}
.tg-chip-check {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tg-chip__status {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.tg-checkmark {
color: #10b981;
font-size: 16px;
animation: pulse 2s infinite;
}
.tg-badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #f3f4f6;
color: #6b7280;
padding: 2px 6px;
border-radius: 4px;
}
.tg-label {
flex: 1;
font-weight: 500;
color: #374151;
text-align: left;
}
.tg-count {
font-size: 0.875rem;
font-weight: 600;
color: #6b7280;
background: #f9fafb;
padding: 2px 8px;
border-radius: 6px;
}
/* Subtask Progress Bars */
.tv-subtask-card__progress {
margin: 1rem 0;
}
.progress-bar {
width: 100%;
height: 22px;
background: #f3f4f6;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #34d399);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-bar__label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
}
.progress-bar__text {
color: #6b7280;
font-weight: 500;
}
.progress-bar__percentage {
color: #10b981;
font-weight: 600;
}
/* Completed subtask styling */
.tv-subtask-card.is-completed {
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
border-color: #10b981;
}
.tv-subtask-card.is-completed .tv-subtask-card__title {
color: #059669;
}
.tv-subtask-card__completed-icon {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
background: #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.tv-subtask-card__step {
position: relative;
}
/* Progress bar states */
.progress-bar__fill {
background: linear-gradient(90deg, #10b981, #34d399);
}
.tv-subtask-card.is-completed .progress-bar__fill {
background: linear-gradient(90deg, #059669, #10b981);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}
/* Responsive adjustments for panels */
@media (max-width: 768px) {
.tv-panel-centered {
padding: 1rem;
}
.panel-content {
max-width: 100%;
}
.tg-chip--selectable {
min-width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.tg-chips--selectable {
width: 100%;
}
.panel-actions {
flex-direction: column;
max-width: 100%;
}
.progress-bar__label {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.progress-bar__percentage {
align-self: flex-end;
}
}
/* Process Overview Component */
.process-overview {
padding: 0;
}
.tv-external-program__progress {
margin: 1.5rem 0;
padding: 0 1rem;
}
.overall-progress {
background: #f8fafc;
border-radius: 12px;
padding: 1rem;
border: 1px solid #e2e8f0;
}
.overall-progress__bar {
width: 100%;
height: 12px;
background: #e2e8f0;
border-radius: 6px;
overflow: hidden;
margin-bottom: 0.75rem;
}
.overall-progress__fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 6px;
transition: width 0.3s ease;
}
.overall-progress__label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
}
.overall-progress__text {
color: #475569;
font-weight: 600;
}
.overall-progress__percentage {
color: #667eea;
font-weight: 700;
font-size: 1rem;
}
/* Responsive adjustments for process overview */
@media (max-width: 768px) {
.overall-progress {
padding: 0.75rem;
}
.overall-progress__label {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.overall-progress__percentage {
align-self: flex-end;
}
}
/* Table Enhancements */
.pm-table .target-group-labels {
max-width: 200px;
}
.pm-table td {
vertical-align: top;
padding: 8px 12px;
}
.pm-table th {
font-weight: 600;
color: #374151;
background: #f9fafb;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.target-group-labels {
flex-direction: column;
gap: 2px;
}
.target-group-tag {
font-size: 10px;
padding: 1px 4px;
}
}
/* ========== TASK VIEWER - TARGET GROUP COMPLETION STATUS ========== */
/* Target Group Chips with Completion Status */
.tg-chip {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.tg-chip.is-completed {
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
border-color: #4ade80;
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
}
.tg-chip__status {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.tg-checkmark {
color: #4ade80;
font-size: 16px;
animation: checkmarkPulse 2s ease-in-out infinite;
}
.tg-progress {
color: #f59e0b;
font-size: 14px;
animation: progressPulse 1.5s ease-in-out infinite;
}
.tg-badge {
background: #667eea;
color: white;
padding: 2px 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tg-label {
font-weight: 500;
color: #374151;
flex: 1;
min-width: 0;
}
.tg-count {
font-size: 12px;
color: #6b7280;
font-weight: 500;
}
.tg-completed {
color: #4ade80;
font-weight: 600;
}
.tg-partial {
color: #f59e0b;
font-weight: 600;
}
/* Animations */
@keyframes checkmarkPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
@keyframes progressPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Hover effects */
.tg-chip:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tg-chip.is-completed:hover {
box-shadow: 0 6px 16px rgba(74, 222, 128, 0.3);
}
/* Go to Task Button in Process Overview */
.todo .pm-btn--primary {
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.todo .pm-btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
background: linear-gradient(135deg, #5a67d8, #6b46c1);
}
.todo .pm-btn--primary i {
margin-right: 6px;
}
.process-overview-item.is-active {
background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important;
}
.process-overview-item i {
color: white !important;
margin-right: 8px !important;
}
.task-checklist-item {
display: flex;
flex-direction: column;
padding: 8px 10px;
margin: 2px 8px;
border-radius: 8px;
border: 2px solid transparent;
background: white;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
z-index: 1;
}
.task-checklist-item:hover {
border-color: #e2e8f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.task-checklist-item.is-active {
border-color: #667eea;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
box-shadow: 0 3px 12px rgba(102, 126, 234, 0.15);
}
.task-checklist-item.is-complete {
background: #f9fafb;
}
.task-checklist-item.is-overdue {
background: #fef2f2;
}
/* Task Checklist Header */
.task-checklist-header {
display: flex;
align-items: center;
gap: 8px;
}
/* Task Type Image (27x27px square) */
.task-type-image {
flex-shrink: 0;
width: 27px;
height: 27px;
border-radius: 4px;
overflow: hidden;
background: #f3f4f6;
}
.task-type-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Status Bubble with Step Number */
.task-status-bubble {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #93c5fd;
color: white;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
transition: background 0.2s ease;
}
.task-status-bubble.is-complete {
background: #10b981;
}
.task-status-bubble.is-overdue {
background: #ef4444;
}
/* Task Content */
.task-content {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
.task-feedback-icon {
color: #667eea;
font-size: 12px;
flex-shrink: 0;
}
.task-name {
font-size: 13px;
font-weight: 500;
color: #374151;
line-height: 1.4;
}
/* Task Progress */
.task-progress {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
margin-left: 35px;
}
.task-progress-bar {
flex: 1;
height: 5px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
}
.task-progress-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 3px;
transition: width 0.3s ease;
}
.task-progress-text {
font-size: 10px;
color: #6b7280;
font-weight: 500;
flex-shrink: 0;
}
/* ========== TASK VIEWER - SECTION MANAGEMENT ========== */
/* Section Headers */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-bottom: 1px solid #e2e8f0;
margin-bottom: 20px;
border-radius: 12px 12px 0 0;
}
.section-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: #374151;
font-weight: 700;
font-size: 18px;
}
.section-title i {
color: #667eea;
font-size: 20px;
}
/* Default View */
.default-view {
padding: 40px 20px;
text-align: center;
}
.default-message {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 40px;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 16px;
border: 1px solid #e2e8f0;
color: #6b7280;
}
.default-message i {
font-size: 48px;
color: #cbd5e1;
}
.default-message p {
margin: 0;
font-size: 16px;
font-weight: 500;
max-width: 400px;
line-height: 1.5;
}
/* Enhanced Section Styling */
.matv-doc .tlt-mt-3 {
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
overflow: hidden;
}
/* Section-specific styling */
.matv-doc .tlt-mt-3 .section-header + * {
padding: 0 20px 20px 20px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.section-header {
flex-direction: column;
gap: 12px;
align-items: stretch;
text-align: center;
}
.section-title {
justify-content: center;
}
.default-message {
padding: 30px 20px;
}
.default-message i {
font-size: 40px;
}
.default-message p {
font-size: 14px;
}
}
@media (max-width: 480px) {
.section-header {
padding: 12px 16px;
}
.section-title {
font-size: 16px;
}
.default-message {
padding: 24px 16px;
}
.default-message i {
font-size: 36px;
}
}
/* Steps */
.twz-steps { display:flex; flex-wrap:wrap; gap:6px; }
.twz-step { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:var(--pm-soft-bg, #f6f7fb); font-size:12px; }
.twz-step__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.5; }
/* Inputs */
.twz-input--xl{ font-size:18px; padding:12px 14px; border-radius:10px; }
/* Sections */
.twz-section-head {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
margin: 6px 0px 25px 0px;
margin-top: 6px;
padding-top: 17px;
font-size: 17px;
}
.twz-content-menu {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
}
.twz-content-menu .pm-context-menu__item {
border-radius: 999px;
border: 1px solid #d1d5db;
padding: 6px 14px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.twz-content-menu .pm-context-menu__item:hover {
background: #eef2ff;
border-color: #6366f1;
color: #4338ca;
}
/* Progress */
.twz-actions{ display:flex; align-items:center; gap:8px; }
.twz-progress{ flex:1; height:6px; background:#eef1f7; border-radius:999px; overflow:hidden; }
.twz-progress__bar{ height:100%; width:0; background:linear-gradient(90deg,#22d3ee,#a78bfa,#fb7185); transition:width .25s ease; }
/* Cards/buttons polish */
.hover-pop{ transition:transform .12s ease, box-shadow .12s ease; }
.hover-pop:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.07); }
/* Rich text preview (start-panel) */
.twz-rt{ background:#fff; border-radius:12px; padding:12px; box-shadow:0 2px 12px rgba(0,0,0,.04); }
/* Small helpers */
.twz-label--required::after{ content:" *"; color:#f97316; }
.twz-radio-group{ margin:6px 0 8px; }
.twz-picked .twz-pill{ display:inline-block; padding:4px 8px; border-radius:999px; background:#eef1f7; }/* ===== Avatar Cropper Modal ===== */
/* Hartes Popup ins Viewport-Zentrum */
.avt-backdrop {
position: fixed !important;
inset: 0 !important;
background: rgba(0, 0, 0, .75) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 2147483000 !important;
}
.tv-hero__subtitle .rt-preview {
text-align: center !important;
}
.avt-dialog {
width: min(940px, 96vw) !important;
max-height: 94vh !important;
background: #fff !important;
border-radius: 12px !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, .55) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.avt-hdr, .avt-ftr {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 12px 16px !important;
background: #fff !important;
}
.avt-hdr {
border-bottom: 1px solid #e5e7eb !important;
}
.avt-ftr {
border-top: 1px solid #e5e7eb !important;
justify-content: flex-end !important;
}
.avt-body {
background: #000 !important;
padding: 0 !important;
}
/* Arbeitsbühne für den Cropper – HIER passiert die Magie */
.avt-stage {
width: 100% !important;
height: clamp(560px, 64vh, 800px) !important;
position: relative !important;
}
/* Cropper zwingend vollflächig in die Stage */
.avt-stage .cropper-container,
.avt-stage .cropper-wrap-box,
.avt-stage .cropper-canvas,
.avt-stage .cropper-drag-box {
width: 100% !important;
height: 100% !important;
}
.avt-stage img {
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 auto !important;
}
/* Runde Auswahl (optisch) */
.cropper-view-box, .cropper-face {
border-radius: 50% !important;
}
.cropper-view-box {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55) !important;
outline: 0 !important;
}
.cropper-modal {
background: rgba(0, 0, 0, .6) !important;
}
.cropper-bg {
background: none !important;
}
/* Griffe dezent */
.cropper-point {
width: 8px !important;
height: 8px !important;
opacity: .95 !important;
}
.cropper-point.point-se {
width: 12px !important;
height: 12px !important;
}
.cropper-face {
cursor: move !important;
}
/* target-group pick grid */
.tg-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.tg-pick-card{
border:1px solid #eee; border-radius:14px; padding:10px 12px;
background:#fff; cursor:pointer; display:flex; flex-direction:column; gap:6px;
transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}
.tg-pick-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.05); border-color:#e5e7eb; }
.tg-pick-check{ margin-right:8px; accent-color:#4f46e5; }
.tg-head{ display:flex; align-items:center; justify-content:space-between; }
.tg-count{ font-size:12px; color:#9ca3af; }
.tg-label{ font-weight:700; color:#111827; line-height:1.2; }
/* generic panel wrapper to harmonize with viewer */
.tv-panel{ background:#fff; border:1px solid #eee; border-radius:16px; padding:14px; }
/* tokens */
.tv-shell { --brand: #4f46e5; --muted:#6b7280; --ink:#111827; --soft:#f3f4f6; }
/* top bar */
.tv-topbar{ display:grid; grid-template-columns: 1fr auto 1fr; gap:12px; align-items:center;
padding:12px 16px; border-bottom:1px solid #eee; background:#fff; position:sticky; top:0; z-index:5; }
.tv-top-left{ overflow:hidden; }
.tg-chips{ display:flex; gap:8px; overflow:auto; padding-bottom:4px; }
.tg-chip{ display:flex; align-items:center; gap:6px; background:#fafafa; border:1px solid #eee; border-radius:999px; padding:6px 10px; white-space:nowrap; }
.tg-badge{ font-size:10px; font-weight:700; color:#6b7280; background:#eef2ff; border-radius:6px; padding:2px 6px; }
.tg-label{ font-weight:600; color:#374151; }
.tg-count{ color:#9ca3af; }
.tv-top-center{ display:flex; justify-content:center; }
.tv-progress{ display:flex; align-items:center; gap:10px; }
.tv-progress__ring{ width:28px; height:28px; border-radius:50%; }
.tv-progress__meta{ line-height:1.1; }
.tv-progress__primary{ font-weight:700; }
.tv-progress__sub{ font-size:12px; color:var(--muted); }
.tv-top-right .tv-actions{ display:flex; gap:8px; justify-content:flex-end; }
/* hero */
.tv-hero{ text-align:center; padding:42px 16px 28px; }
.tv-hero__art{ display:flex; justify-content:center; margin-bottom:18px; }
.tv-hero__img{ max-width:200px; border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.tv-hero__icon{ width:120px; height:120px; border-radius:24px; background:#fff; border:1px solid #eee; display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--brand); }
.tv-hero__title{ font-size:34px; font-weight:800; letter-spacing:.2px; margin:8px 0; color:var(--ink); }
.tv-hero__subtitle{ max-width:740px; margin:8px auto 0; color:#374151; }
.tv-hero__subtitle--muted{ color:var(--muted); font-style:italic; }
.tv-hero__ctas{ display:flex; gap:12px; justify-content:center; margin:18px 0 6px; }
.tv-cta{ font-size:18px; padding:12px 20px; border-radius:12px; }
.tv-hero__hint{ color:#9ca3af; font-size:12px; }
.tv-hint-enter{ opacity:.9; }
/* sections */
.tv-sections{ max-width:1000px; margin:0 auto 64px; padding:0 16px; }
.tv-section{ margin-top:16px; }
.tv-section__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
/* modal sizing */
.tv-modal{ width:min(1100px, 96vw); }
/* small helpers */
.rt-preview p{ margin:0 0 8px 0; }
.tv-hero__inline{ width:100%; max-width:820px; margin:16px auto 0; }
.tg-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.tg-pick-card{ border:1px solid #eee; border-radius:14px; padding:10px 12px; background:#fff; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease; }
.tg-pick-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.05); border-color:#e5e7eb; }
.tg-head{ display:flex; align-items:center; justify-content:space-between; }
.tg-count{ font-size:12px; color:#9ca3af; }
.tg-label{ font-weight:700; color:#111827; line-height:1.2; }
.tg-pick-check{ margin-right:8px; accent-color:#4f46e5; }
/* Filter badge with forced white text */
.pm-filter-badge{
background:#d00000;
color:#fff !important;
border-radius:999px;
padding:0 8px;
font-size:12px;
line-height:18px;
}
.pm-badge--success{ background:#eafaf0; color:#166534; border:1px solid #b7e2c3; }