{{ t.saving || 'Speichern' }}...
STATE: data() { return { saving: false } }
VERWENDUNG:
async myMethod() {
this.saving = true;
try {
await API.save(...);
await API.reload(...);
} catch(e) {
console.error(e);
} finally {
this.saving = false; // IMMER in finally!
}
}
============================================================================ */
/* Overlay Background */
.pm-saving-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(2px);
}
/* Spinner Box */
.pm-saving-spinner {
background: white;
padding: 24px 32px;
border-radius: 8px;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
display: flex;
align-items: center;
gap: 16px;
font-size: 16px;
font-weight: 500;
color: #374151;
}
/* Spinner Icon (rotierendes Icon) */
.pm-saving-spinner i {
font-size: 24px;
color: #0ea5e9;
animation: pm-saving-spin 1s linear infinite;
}
@keyframes pm-saving-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Loading Overlay (Application Startup) */
.pm-loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(2px);
}
.pm-loading-spinner {
background: white;
padding: 32px 40px;
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
min-width: 280px;
}
.pm-loading-text {
font-size: 16px;
font-weight: 500;
color: #374151;
text-align: center;
line-height: 1.4;
}
.pm-loading-icon {
font-size: 28px;
color: #0ea5e9;
animation: spin 1s linear infinite;
margin-top: 4px;
}
/* ======================================================================
ADMIN VIEW STYLES
====================================================================== */
/* Container */
.admin-view {
width: 100%;
min-height: 100vh;
padding: 0;
margin: 0;
background: var(--bg-1, #f8fafc);
}
.admin-view__content {
max-width: 100%;
padding: 20px;
}
/* Loading Spinner */
.pm-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 16px;
color: var(--ink-3, #64748b);
}
.pm-loading i {
font-size: 32px;
}
/* Header */
.admin-view__header {
background: white;
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.admin-view__header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.admin-view__title {
font-size: 24px;
font-weight: 600;
color: var(--ink-1, #0f172a);
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.admin-view__title i {
color: var(--primary, #3b82f6);
}
.admin-view__actions {
display: flex;
gap: 12px;
align-items: center;
}
.admin-view__view-toggle {
display: flex;
gap: 4px;
border: 1px solid var(--border-1, #e2e8f0);
border-radius: 6px;
padding: 2px;
}
/* Filters */
.admin-view__filters {
border-top: 1px solid var(--border-1, #e2e8f0);
padding-top: 24px;
}
.admin-view__filters-row {
display: flex;
gap: 16px;
align-items: flex-end;
margin-bottom: 16px;
flex-wrap: wrap;
}
.admin-view__filter-item {
flex: 1;
min-width: 200px;
max-width: 300px;
}
.admin-view__filter-item--checkbox {
flex: 0 0 auto;
min-width: auto;
max-width: none;
display: flex;
align-items: center;
}
.admin-view__filter-item--search {
flex: 2;
min-width: 300px;
}
.admin-view__filter-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--ink-2, #475569);
margin-bottom: 6px;
}
.admin-view__checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--ink-2, #475569);
cursor: pointer;
user-select: none;
}
.admin-view__checkbox {
width: 18px;
height: 18px;
cursor: pointer;
}
.admin-view__search {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-1, #e2e8f0);
border-radius: 6px;
font-size: 14px;
color: var(--ink-1, #0f172a);
transition: all 0.2s;
}
.admin-view__search:focus {
outline: none;
border-color: var(--primary, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.admin-view__results-count {
font-size: 13px;
color: var(--ink-3, #64748b);
padding-top: 8px;
}
/* Multi-Check-Dropdown */
.multi-check-dropdown {
position: relative;
width: 100%;
}
.multi-check-dropdown__trigger {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-1, #e2e8f0);
border-radius: 6px;
background: white;
font-size: 14px;
color: var(--ink-2, #475569);
text-align: left;
cursor: pointer;
transition: all 0.2s;
display: flex;
justify-content: space-between;
align-items: center;
}
.multi-check-dropdown__trigger:hover {
border-color: var(--border-2, #cbd5e1);
}
.multi-check-dropdown__trigger--active {
border-color: var(--primary, #3b82f6);
color: var(--ink-1, #0f172a);
font-weight: 500;
}
.multi-check-dropdown__text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Programs board: Org-Units (data1>data2>...) dropdown */
.pm-filters__org-units{
flex: 1 1 360px;
min-width: 240px;
max-width: 520px;
}
.pm-org-units-dropdown .multi-check-dropdown__text{
min-width: 0;
display: block;
overflow-x: auto;
overflow-y: hidden;
text-overflow: clip;
white-space: nowrap;
scrollbar-width: thin;
}
.pm-org-units-dropdown .multi-check-dropdown__options{
overflow-x: hidden;
}
.pm-org-units-dropdown .multi-check-dropdown__label{
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
}
.pm-org-units-dropdown .multi-check-dropdown__option{
min-width: 0;
}
.pm-org-units-dropdown .multi-check-dropdown__menu{
/* widen menu, but keep it inside viewport (right edge) */
left: 0;
right: auto;
width: clamp(360px, 60vw, 860px);
max-width: calc(100vw - 24px);
box-sizing: border-box;
}
.multi-check-dropdown__icon {
font-size: 12px;
transition: transform 0.2s;
margin-left: 8px;
}
.multi-check-dropdown--open .multi-check-dropdown__icon {
transform: rotate(180deg);
}
.multi-check-dropdown__menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: white;
border: 1px solid var(--border-1, #e2e8f0);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
max-height: 320px;
display: flex;
flex-direction: column;
min-width: 0;
}
.multi-check-dropdown__actions {
display: flex;
gap: 8px;
padding: 8px;
border-bottom: 1px solid var(--border-1, #e2e8f0);
flex-shrink: 0;
}
.multi-check-dropdown__action-btn {
flex: 1;
padding: 6px 12px;
border: none;
background: var(--bg-2, #f1f5f9);
color: var(--ink-2, #475569);
font-size: 12px;
font-weight: 500;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.multi-check-dropdown__action-btn:hover {
background: var(--bg-3, #e2e8f0);
color: var(--ink-1, #0f172a);
}
.multi-check-dropdown__options {
overflow-y: auto;
overflow-x: hidden;
max-height: 240px;
min-width: 0;
}
.multi-check-dropdown__option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
transition: background 0.15s;
}
.multi-check-dropdown__option:hover {
background: var(--bg-2, #f1f5f9);
}
.multi-check-dropdown__checkbox {
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: pointer;
}
.multi-check-dropdown__label {
flex: 1;
font-size: 14px;
line-height: 1.4;
}
.multi-check-dropdown__badge {
display: inline-block;
padding: 2px 8px;
background: var(--bg-3, #e2e8f0);
color: var(--ink-2, #475569);
border-radius: 12px;
font-size: 11px;
font-weight: 500;
}
.multi-check-dropdown__empty {
padding: 20px;
text-align: center;
color: var(--ink-3, #64748b);
font-size: 13px;
}
/* Spezifische Overrides für mögliche globale Regeln */
.multi-check-dropdown
.multi-check-dropdown__options
.multi-check-dropdown__option
> input[type="checkbox"].multi-check-dropdown__checkbox {
display: inline-block; /* verhindert block-volle Breite */
width: 16px !important; /* feste Breite */
height: 16px !important;
min-width: 16px !important; /* schützt vor Dehnen */
max-width: 16px !important;
flex: 0 0 16px !important; /* verhindert Skalierung im flex-layout */
margin: 0; /* Browser-Default-Abstände entfernen */
padding: 0;
box-sizing: border-box;
-webkit-appearance: checkbox;
appearance: checkbox;
vertical-align: middle;
align-self: center;
}
/* Sicherstellen, dass Label-Container nicht die Checkbox streckt */
.multi-check-dropdown__option {
display: flex;
align-items: center; /* oder flex-start wenn Text mehrzeilig ist */
gap: 8px;
}
/* Label/Text darf nicht weggedrückt werden */
.multi-check-dropdown__label {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Table View */
.admin-view__table {
width: 100%;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-collapse: collapse;
}
.admin-view__table thead {
background: var(--bg-2, #f1f5f9);
}
.admin-view__table th {
padding: 12px 16px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--ink-2, #475569);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-view__table-row {
cursor: pointer;
transition: background 0.15s;
border-bottom: 1px solid var(--border-1, #e2e8f0);
}
.admin-view__table-row:hover {
background: var(--bg-1, #f8fafc);
}
.admin-view__table td {
padding: 14px 16px;
font-size: 14px;
color: var(--ink-2, #475569);
}
.admin-view__table td strong {
color: var(--ink-1, #0f172a);
font-weight: 500;
}
.admin-view__empty {
text-align: center;
padding: 40px 20px;
color: var(--ink-3, #64748b);
font-size: 14px;
}
/* Chips */
.admin-view__chip {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-view__chip--active {
background: #dcfce7;
color: #166534;
}
.admin-view__chip--library {
background: #dbeafe;
color: #1e40af;
}
.admin-view__chip--draft {
background: #fef3c7;
color: #92400e;
}
.admin-view__chip--published {
background: #d1fae5;
color: #065f46;
}
/* Grid View */
.admin-view__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.admin-view__card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s;
display: flex;
flex-direction: column;
gap: 16px;
}
.admin-view__card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.admin-view__card-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.admin-view__card-content {
flex: 1;
}
.admin-view__card-title {
font-size: 16px;
font-weight: 600;
color: var(--ink-1, #0f172a);
margin: 0 0 8px 0;
}
.admin-view__card-type {
font-size: 13px;
color: var(--ink-3, #64748b);
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-view__card-creator,
.admin-view__card-participants {
font-size: 13px;
color: var(--ink-2, #475569);
margin: 4px 0;
}
.admin-view__card-actions {
border-top: 1px solid var(--border-1, #e2e8f0);
padding-top: 16px;
display: flex;
justify-content: flex-end;
}
/* Modal */
.admin-view__modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.admin-view__modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.admin-view__modal-content {
position: relative;
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
padding: 32px;
}
.admin-view__modal-content--wide {
max-width: 1200px;
}
.admin-view__modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border: none;
background: var(--bg-2, #f1f5f9);
color: var(--ink-2, #475569);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.admin-view__modal-close:hover {
background: var(--bg-3, #e2e8f0);
color: var(--ink-1, #0f172a);
}
/* Responsive */
@media (max-width: 768px) {
.admin-view__header-top {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.admin-view__actions {
width: 100%;
justify-content: space-between;
}
.admin-view__filters-row {
flex-direction: column;
align-items: stretch;
}
.admin-view__filter-item {
max-width: none;
}
.admin-view__grid {
grid-template-columns: 1fr;
}
.admin-view__table {
display: block;
overflow-x: auto;
}
}
/* Override: Report Template Preview Bilder - keine Rundung */
.pm-modal__body td img,
.pm-table td img {
border-radius: 0 !important;
}
/* ============================================
Org-Structure Admin: Add Child Button
============================================ */
.org-add-child-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: #9ca3af;
font-size: 10px;
cursor: pointer;
transition: all 0.15s ease;
position: relative;
}
.org-add-child-btn:hover {
background: #e5e7eb;
color: #374151;
}
.org-add-child-btn:active {
background: #d1d5db;
}
/* Modern Tooltip */
.org-add-child-btn::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
padding: 8px 12px;
background: #1f2937;
color: #fff;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
pointer-events: none;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.org-add-child-btn::before {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% + 2px);
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1f2937;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
pointer-events: none;
z-index: 9999;
}
.org-add-child-btn:hover::after,
.org-add-child-btn:hover::before {
opacity: 1;
visibility: visible;
}
/* Responsive: Tooltip links positionieren wenn zu weit rechts */
@media (max-width: 768px) {
.org-add-child-btn::after {
left: 0;
transform: translateX(0);
}
.org-add-child-btn::before {
left: 10px;
transform: translateX(0);
}
}
/* Org-Structure Admin: Pending Changes State */
.part-tree__node--pending {
background: #fef3c7 !important;
border-left: 3px solid #f59e0b;
}
.part-tree__node--pending:hover {
background: #fde68a !important;
}
/* Org-Structure Admin: Inline Add/Rename */
.part-tree__node--new {
background: #f0fdf4 !important;
border: 1px dashed #22c55e;
border-radius: 6px;
animation: pulse-green 1s ease-in-out infinite;
}
@keyframes pulse-green {
0%, 100% { border-color: #22c55e; }
50% { border-color: #86efac; }
}
/* Inline Actions Container (Stift + Plus) */
.org-inline-actions {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 12px;
opacity: 0;
transition: opacity 0.15s ease;
}
.part-tree__row:hover .org-inline-actions {
opacity: 1;
}
.org-rename-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: #9ca3af;
font-size: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.org-rename-btn:hover {
background: #e5e7eb;
color: #374151;
}
.org-rename-btn:hover {
background: #e5e7eb;
color: #374151;
}
.org-inline-add-input,
.org-inline-rename-input {
border: 1px solid #3b82f6 !important;
border-radius: 4px;
outline: none;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.org-inline-add-input:focus,
.org-inline-rename-input:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
/* Org-Structure Admin: Missing Node Styles */
.part-tree__node--missing {
background: #fef2f2 !important;
border-left: 3px solid #dc2626;
}
.part-tree__node--missing:hover {
background: #fee2e2 !important;
}
.part-tree__level-badge--missing {
background: #dc2626 !important;
color: #fff !important;
}
.part-tree__label--missing {
color: #991b1b;
font-style: italic;
}
/* Warning Button Style */
.pm-btn--warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
border: none;
font-weight: 500;
}
.pm-btn--warning:hover {
background: linear-gradient(135deg, #d97706, #b45309);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
/* Org-Structure Admin: Add Root Element Button */
.org-add-root-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px dashed #d1d5db;
border-radius: 6px;
background: transparent;
color: #6b7280;
font-size: 13px;
cursor: pointer;
transition: all 0.15s ease;
}
.org-add-root-btn:hover {
border-color: #9ca3af;
background: #f9fafb;
color: #374151;
}
.org-add-root-btn i {
font-size: 11px;
}
/* Org-Structure Admin: Duplicate Node Styles */
.part-tree__node--duplicate {
background: #fff7ed !important;
border-left: 3px solid #fb923c;
}
.part-tree__node--duplicate:hover {
background: #ffedd5 !important;
}
/* Org-Structure Admin: Drag & Drop Styles */
.part-tree__node[draggable="true"] {
cursor: grab;
}
.part-tree__node[draggable="true"]:active {
cursor: grabbing;
}
.part-tree__node--drag-over {
background: #dbeafe !important;
border: 2px dashed #3b82f6 !important;
border-radius: 8px;
}
.org-drop-zone {
min-height: 8px;
margin: 4px 0;
border-radius: 4px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #6b7280;
}
.org-drop-zone--root {
border: 2px dashed transparent;
min-height: 32px;
margin-bottom: 8px;
}
.org-drop-zone--active {
border-color: #3b82f6 !important;
background: #eff6ff;
min-height: 40px;
}
.org-drop-zone--active span {
color: #3b82f6;
font-weight: 500;
}
/* ============================================================================
STARTPAGE DASHBOARD STYLES
Modern, Tailwind-inspired design for the new dashboard (move=16)
============================================================================ */
.startpage {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 24px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Loading State */
.startpage-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 400px;
gap: 16px;
color: #64748b;
}
.startpage-spinner {
width: 40px;
height: 40px;
border: 3px solid #e2e8f0;
border-top-color: var(--menu-bg-color, #3b82f6);
border-radius: 50%;
animation: startpage-spin 0.8s linear infinite;
}
@keyframes startpage-spin {
to { transform: rotate(360deg); }
}
/* Error State */
.startpage-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
gap: 16px;
color: #ef4444;
text-align: center;
}
.startpage-error i {
font-size: 48px;
opacity: 0.6;
}
/* Mobile Tabs */
.startpage-tabs {
display: none;
gap: 4px;
background: #f1f5f9;
padding: 4px;
border-radius: 12px;
margin-bottom: 20px;
}
.startpage-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
border: none;
background: transparent;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #64748b;
cursor: pointer;
transition: all 180ms ease;
}
.startpage-tab:hover {
background: rgba(0, 0, 0, 0.04);
color: #1e293b;
}
.startpage-tab--active {
background: #fff !important;
color: #0f172a !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Grid Layout */
.startpage-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
}
.startpage-main {
display: flex;
flex-direction: column;
gap: 24px;
}
.startpage-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Sections */
.startpage-section {
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
padding: 20px;
border: 1px solid #e2e8f0;
}
.startpage-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f1f5f9;
}
.startpage-section-header h3 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 16px;
font-weight: 600;
color: #0f172a;
}
.startpage-section-header h3 i {
color: var(--menu-bg-color, #3b82f6);
font-size: 18px;
}
.startpage-header {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 12px;
}
.startpage-handbook-btn,
.startpage-chatbot-btn,
.startpage-support-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #0f172a;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 150ms ease;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.startpage-handbook-btn i,
.startpage-chatbot-btn i,
.startpage-support-btn i {
color: var(--menu-bg-color, #3b82f6);
}
.startpage-handbook-btn:hover,
.startpage-chatbot-btn:hover,
.startpage-support-btn:hover {
border-color: #cbd5e1;
background: #f8fafc;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.startpage-chatbot-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.startpage-chatbot-modal {
width: min(980px, 96vw);
height: min(720px, 90vh);
background: #fff;
border-radius: 18px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.startpage-chatbot-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.startpage-chatbot-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #0f172a;
}
.startpage-chatbot-close {
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #fff;
color: #334155;
cursor: pointer;
}
.startpage-chatbot-body {
flex: 1;
background: #fff;
}
.startpage-chatbot-body iframe {
width: 100%;
height: 100%;
border: 0;
}
.startpage-support-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.25);
z-index: 100000;
}
.startpage-support-panel {
position: absolute;
top: 0;
right: 0;
width: min(520px, 92vw);
height: 100%;
background: #fff;
box-shadow: -10px 0 30px rgba(15, 23, 42, 0.2);
display: flex;
flex-direction: column;
animation: startpageSlideIn 180ms ease-out;
}
.startpage-support-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.startpage-support-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #0f172a;
}
.startpage-support-close {
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #fff;
color: #334155;
cursor: pointer;
}
.startpage-support-body {
flex: 1;
background: #fff;
}
.startpage-support-body iframe {
width: 100%;
height: 100%;
border: 0;
}
.startpage-support-body {
overflow-y: auto;
overflow-x: hidden;
}
@keyframes startpageSlideIn {
from { transform: translateX(8%); opacity: 0.6; }
to { transform: translateX(0); opacity: 1; }
}
.startpage-link-btn {
background: none;
border: none;
color: var(--menu-bg-color, #3b82f6);
font-size: 13px;
font-weight: 500;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: all 150ms ease;
}
.startpage-link-btn:hover {
background: rgba(59, 130, 246, 0.08);
}
/* Empty State */
.startpage-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: #94a3b8;
text-align: center;
}
.startpage-empty-state i {
font-size: 40px;
margin-bottom: 12px;
opacity: 0.5;
}
.startpage-empty-state p {
margin: 0;
font-size: 14px;
}
/* Compact empty state (single-line row) */
.startpage-empty-compact {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 16px;
background: #f8fafc;
border: 1px solid #e5e7eb;
color: #475569;
min-height: 48px;
}
.startpage-empty-compact__label {
font-weight: 600;
color: #1f2937;
}
.startpage-empty-compact__spacer {
flex: 1;
height: 1px;
background: #e5e7eb;
margin: 0 8px;
}
.startpage-empty-compact__overdue {
font-size: 13px;
color: #475569;
white-space: nowrap;
}
.startpage-empty-compact__count {
margin-left: 6px;
font-weight: 700;
color: #0f172a;
}
.startpage-empty-compact__count.is-alert {
color: #b91c1c;
}
/* Badges */
.startpage-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.startpage-badge--danger {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
color: #dc2626;
}
.startpage-badge--warning {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
color: #d97706;
}
.startpage-badge--new {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
color: #059669;
}
.startpage-badge--pinned {
background: #f8fafc;
color: #64748b;
padding: 2px 6px;
}
.startpage-badge--unread {
width: 8px;
height: 8px;
padding: 0;
background: var(--menu-bg-color, #3b82f6);
border-radius: 50%;
}
/* Task Group */
.startpage-task-group {
margin-bottom: 20px;
}
.startpage-task-group:last-child {
margin-bottom: 0;
}
.startpage-task-group-header {
margin-bottom: 12px;
}
.startpage-task-list {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Task Item */
.startpage-task-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #f8fafc;
border-radius: 12px;
cursor: pointer;
transition: all 180ms ease;
border: 1px solid transparent;
}
.startpage-task-item:hover {
background: #fff;
border-color: #e2e8f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transform: translateX(4px);
}
.startpage-task-item--overdue {
background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
border-left: 3px solid #ef4444;
}
.startpage-task-item--overdue:hover {
background: #fff;
border-left-color: #ef4444;
}
.startpage-task-item--soon {
background: linear-gradient(135deg, #fffbeb 0%, #fffef5 100%);
border-left: 3px solid #f59e0b;
}
.startpage-task-item--soon:hover {
background: #fff;
border-left-color: #f59e0b;
}
.startpage-task-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
flex-shrink: 0;
}
.startpage-task-item--overdue .startpage-task-icon {
background: #fee2e2;
color: #dc2626;
}
.startpage-task-item--soon .startpage-task-icon {
background: #fef3c7;
color: #d97706;
}
.startpage-task-content {
flex: 1;
min-width: 0;
}
.startpage-task-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 8px;
}
.startpage-task-ids {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
background: #e2e8f0;
color: #334155;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
white-space: nowrap;
flex-shrink: 0;
}
.startpage-task-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 12px;
color: #64748b;
}
.startpage-task-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.startpage-task-meta i {
font-size: 11px;
opacity: 0.7;
}
.startpage-overdue-days,
.startpage-days-left {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.2px;
background: #e2e8f0;
color: #0f172a;
}
.startpage-task-item--overdue .startpage-overdue-days {
background: #fee2e2;
color: #b91c1c;
}
.startpage-task-item--soon .startpage-days-left {
background: #fef3c7;
color: #b45309;
}
.startpage-task-arrow {
color: #cbd5e1;
transition: color 150ms ease;
}
.startpage-task-item:hover .startpage-task-arrow {
color: var(--menu-bg-color, #3b82f6);
}
/* ============================================================================
Decisions Section - Pending Request Decisions
============================================================================ */
.startpage-decisions {
display: flex;
flex-direction: column;
gap: 16px;
}
.startpage-decisions-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.startpage-decisions-group-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.startpage-decisions-list {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Decision Card */
.startpage-decision-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fffbeb;
border: 1px solid #fef3c7;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.startpage-decision-card:hover {
background: #fff;
border-color: #fcd34d;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
transform: translateX(4px);
}
.startpage-decision-card--pending {
border-left: 3px solid #f59e0b;
}
.startpage-decision-card--pending:hover {
border-left-color: #d97706;
}
/* Decision Icon */
.startpage-decision-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #fef3c7;
color: #d97706;
font-size: 16px;
flex-shrink: 0;
}
/* Decision Content */
.startpage-decision-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.startpage-decision-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 14px;
color: #1f2937;
line-height: 1.3;
}
.startpage-decision-ids {
font-size: 11px;
font-weight: 500;
color: #9ca3af;
flex-shrink: 0;
}
.startpage-decision-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 12px;
color: #6b7280;
}
.startpage-decision-program {
display: flex;
align-items: center;
gap: 4px;
}
.startpage-decision-program i {
font-size: 10px;
color: #9ca3af;
}
.startpage-decision-type {
display: flex;
align-items: center;
gap: 4px;
color: #f59e0b;
}
.startpage-decision-type i {
font-size: 10px;
}
.startpage-decision-creator {
display: flex;
align-items: center;
gap: 6px;
}
.startpage-decision-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #fff;
font-size: 9px;
font-weight: 600;
}
/* Decision Action Button */
.startpage-decision-action {
flex-shrink: 0;
}
.startpage-decision-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #fff;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.startpage-decision-btn:hover {
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
transform: translateY(-1px);
}
.startpage-decision-btn i {
font-size: 11px;
}
/* Warning Badge for Decisions */
.startpage-badge--warning {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #92400e;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
}
.startpage-badge--warning i {
font-size: 11px;
}
/* Responsive Decisions */
@media (max-width: 768px) {
.startpage-decision-card {
padding: 12px;
flex-wrap: wrap;
}
.startpage-decision-content {
flex-basis: calc(100% - 52px);
}
.startpage-decision-action {
width: 100%;
margin-top: 8px;
}
.startpage-decision-btn {
width: 100%;
justify-content: center;
}
.startpage-decision-meta {
gap: 8px;
}
}
/* Programs Section - Clean Marketing Style with Hero Images */
.startpage-programs {
display: flex;
flex-direction: column;
gap: 16px;
}
.startpage-programs .startpage-section-header h3 {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin: 0;
}
/* Programs Grid */
.startpage-programs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
}
/* Program Card */
.startpage-program-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: 1px solid #f1f5f9;
}
.startpage-program-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
/* Square Hero Image */
.startpage-program-card__image {
width: 100%;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
}
.startpage-program-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 300ms ease;
}
.startpage-program-card:hover .startpage-program-card__image img {
transform: scale(1.05);
}
/* Placeholder if no hero image */
.startpage-program-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: rgba(255, 255, 255, 0.8);
}
/* New Badge */
.startpage-program-card__badge {
position: absolute;
top: 10px;
right: 10px;
background: #10b981;
color: #fff;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
/* Card Body */
.startpage-program-card__body {
padding: 14px 16px;
}
.startpage-program-card__title {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0 0 4px 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.startpage-program-card__type {
font-size: 12px;
color: #9ca3af;
margin: 0;
}
/* News Section - Clean Marketing Style */
.startpage-news {
display: flex;
flex-direction: column;
gap: 16px;
}
.startpage-news .startpage-section-header h3 {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.startpage-news--admin .startpage-section-header h3 {
color: #7c3aed;
}
/* Unread News Counter */
.startpage-news-header-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.startpage-news-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
background: #ef4444;
color: #fff;
font-size: 12px;
font-weight: 600;
border-radius: 12px;
margin-left: 0;
line-height: 1;
}
/* News Cards Container - Inline scroll for max 1.5 items visible */
.startpage-news-cards {
display: flex;
flex-direction: column;
gap: 12px;
height: calc(1.5 * (180px + 120px + 12px)); /* 1.5 * (image height + body height + gap) */
min-height: calc(1.5 * (180px + 120px + 12px));
overflow-y: auto;
overflow-x: hidden;
padding: 0 0 6px 0;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.startpage-news-cards::-webkit-scrollbar {
width: 6px;
}
.startpage-news-cards::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
.startpage-news-cards::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.startpage-news-cards:hover::-webkit-scrollbar-thumb {
background: #94a3b8;
}
/* Individual News Card - Large Marketing Style */
.startpage-news-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: 1px solid #f1f5f9;
min-height: calc(180px + 120px); /* image height + body height */
flex: 0 0 auto; /* Don't shrink */
}
.startpage-news-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
/* Visual/Image Area */
.startpage-news-card__visual {
width: 100%;
height: 180px;
position: relative;
overflow: hidden;
}
.startpage-news-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.startpage-news-card__gradient {
width: 100%;
height: 100%;
}
.startpage-news-card__type-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
color: #fff;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 12px;
border-radius: 6px;
z-index: 2;
}
/* Toggle Read News Button */
.startpage-news-toggle-read {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #64748b;
cursor: pointer;
transition: all 150ms ease;
padding: 0;
font-size: 14px;
flex-shrink: 0;
line-height: 1;
}
.startpage-news-toggle-read:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #475569;
}
.startpage-news-toggle-read:active {
transform: scale(0.95);
}
/* Search Toggle Button */
.startpage-news-search-toggle {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #64748b;
cursor: pointer;
transition: all 150ms ease;
padding: 0;
font-size: 14px;
flex-shrink: 0;
line-height: 1;
}
.startpage-news-search-toggle:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #475569;
}
.startpage-news-search-toggle.active {
background: var(--menu-bg-color, #3b82f6);
border-color: var(--menu-bg-color, #3b82f6);
color: #fff;
}
/* News Search Field */
.startpage-news-search {
padding: 0 16px 12px 16px;
}
.startpage-news-search__wrapper {
position: relative;
display: flex;
align-items: center;
}
.startpage-news-search__icon {
position: absolute;
left: 12px;
color: #94a3b8;
font-size: 14px;
pointer-events: none;
}
.startpage-news-search__input {
width: 100%;
padding: 10px 36px 10px 36px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
color: #1f2937;
background: #f8fafc;
transition: all 150ms ease;
}
.startpage-news-search__input:focus {
outline: none;
border-color: var(--menu-bg-color, #3b82f6);
background: #fff;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.startpage-news-search__input::placeholder {
color: #94a3b8;
}
.startpage-news-search__clear {
position: absolute;
right: 8px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #e2e8f0;
border: none;
border-radius: 50%;
color: #64748b;
cursor: pointer;
transition: all 150ms ease;
font-size: 11px;
}
.startpage-news-search__clear:hover {
background: #cbd5e1;
color: #475569;
}
.startpage-news-search__no-results {
padding: 12px 0 0 0;
text-align: center;
color: #94a3b8;
font-size: 13px;
}
/* View Toggle Button */
.startpage-news-view-toggle {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #64748b;
cursor: pointer;
transition: all 150ms ease;
padding: 0;
font-size: 14px;
flex-shrink: 0;
line-height: 1;
}
.startpage-news-view-toggle:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #475569;
}
/* News List View */
.startpage-news-list {
display: flex;
flex-direction: column;
gap: 3px;
max-height: 280px;
overflow-y: auto;
padding: 0 0 6px 0;
}
.startpage-news-list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition: all 150ms ease;
}
.startpage-news-list-item:hover {
background: #f8fafc;
border-color: #cbd5e1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.startpage-news-list-item__thumb {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
}
.startpage-news-list-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.startpage-news-list-item__thumb-placeholder {
width: 100%;
height: 100%;
}
.startpage-news-list-item__content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.startpage-news-list-item__title {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0;
/* Mehrzeilige Überschriften mit Line-Clamp (max 2 Zeilen) */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
word-break: break-word;
}
.startpage-news-list-item__date {
font-size: 12px;
color: #94a3b8;
}
.startpage-news-list-item__mark-read {
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #64748b;
cursor: pointer;
transition: all 150ms ease;
padding: 0;
font-size: 14px;
}
.startpage-news-list-item__mark-read:hover {
background: #22c55e;
border-color: #22c55e;
color: #fff;
}
.startpage-news-card__type-badge--info { background: #3b82f6; }
.startpage-news-card__mark-read {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
cursor: pointer;
transition: all 200ms ease;
z-index: 3;
padding: 0;
font-size: 16px;
}
.startpage-news-card__mark-read:hover {
background: rgba(34, 197, 94, 0.8);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.05);
}
.startpage-news-card__mark-read:active {
transform: scale(0.95);
}
.startpage-news-card__type-badge--update { background: #8b5cf6; }
.startpage-news-card__type-badge--feature { background: #f59e0b; }
.startpage-news-card__type-badge--technical { background: #06b6d4; }
.startpage-news-card__type-badge--important { background: #ef4444; }
/* News Detail Modal */
.startpage-news-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(4px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.startpage-news-modal {
width: 100%;
max-width: 700px;
max-height: 90vh;
background: #fff;
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
overflow: hidden;
display: flex;
flex-direction: column;
}
.startpage-news-modal__header {
position: relative;
height: 250px;
flex-shrink: 0;
}
.startpage-news-modal__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.startpage-news-modal__gradient {
width: 100%;
height: 100%;
}
.startpage-news-modal__type-badge {
position: absolute;
top: 16px;
left: 16px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 8px 14px;
border-radius: 8px;
}
.startpage-news-modal__type-badge--info { background: #3b82f6; }
.startpage-news-modal__type-badge--update { background: #8b5cf6; }
.startpage-news-modal__type-badge--feature { background: #f59e0b; }
.startpage-news-modal__type-badge--technical { background: #06b6d4; }
.startpage-news-modal__type-badge--important { background: #ef4444; }
.startpage-news-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 150ms ease;
}
.startpage-news-modal__close:hover {
background: rgba(0, 0, 0, 0.8);
}
.startpage-news-modal__body {
padding: 28px;
overflow-y: auto;
flex: 1;
}
.startpage-news-modal__title {
font-size: 24px;
font-weight: 700;
color: #0f172a;
margin: 0 0 12px 0;
line-height: 1.3;
}
.startpage-news-modal__meta {
display: flex;
gap: 16px;
font-size: 14px;
color: #64748b;
margin-bottom: 20px;
}
.startpage-news-modal__meta i {
margin-right: 6px;
}
.startpage-news-modal__content {
font-size: 15px;
line-height: 1.7;
color: #374151;
}
.startpage-news-modal__content p {
margin: 0 0 16px 0;
}
.startpage-news-modal__content h1,
.startpage-news-modal__content h2,
.startpage-news-modal__content h3 {
margin: 24px 0 12px 0;
color: #0f172a;
}
.startpage-news-modal__content ul,
.startpage-news-modal__content ol {
margin: 0 0 16px 24px;
}
.startpage-news-modal__content a {
color: var(--menu-bg-color, #3b82f6);
}
.startpage-news-modal__footer {
padding: 16px 28px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
display: flex;
justify-content: flex-end;
gap: 12px;
border-radius: 0 0 16px 16px;
}
.startpage-news-modal__mark-read-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 150ms ease;
}
.startpage-news-modal__mark-read-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.startpage-news-modal__mark-read-btn i {
font-size: 16px;
}
@media (max-width: 768px) {
.startpage-news-modal {
max-height: 100vh;
border-radius: 0;
}
.startpage-news-modal-overlay {
padding: 0;
}
.startpage-news-modal__header {
height: 180px;
}
.startpage-news-modal__body {
padding: 20px;
}
.startpage-news-modal__title {
font-size: 20px;
}
}
/* Content Body */
.startpage-news-card__body {
padding: 20px;
}
.startpage-news-card__title {
font-size: 17px;
font-weight: 700;
color: #1f2937;
margin: 0 0 10px 0;
line-height: 1.4;
}
.startpage-news-card__text {
font-size: 14px;
color: #6b7280;
line-height: 1.65;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.startpage-news-card__text p {
margin: 0;
}
.startpage-news-card__footer {
display: flex;
align-items: center;
justify-content: flex-start;
}
.startpage-news-card__date {
font-size: 13px;
color: #9ca3af;
font-weight: 500;
}
/* Empty State Large */
.startpage-empty-state--large {
padding: 60px 24px;
text-align: center;
}
.startpage-empty-state--large i {
font-size: 48px;
color: #d1d5db;
margin-bottom: 16px;
}
.startpage-empty-state--large p {
font-size: 15px;
color: #9ca3af;
}
/* Modal */
.startpage-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
.startpage-modal {
background: #fff;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
max-width: 500px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.startpage-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
}
.startpage-modal-header h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #0f172a;
}
.startpage-modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: none;
border-radius: 8px;
color: #64748b;
cursor: pointer;
transition: all 150ms ease;
}
.startpage-modal-close:hover {
background: #e2e8f0;
color: #0f172a;
}
.startpage-modal-body {
padding: 24px;
overflow-y: auto;
}
.startpage-modal-info {
display: flex;
flex-direction: column;
gap: 16px;
}
.startpage-modal-row {
display: flex;
gap: 12px;
}
.startpage-modal-row--full {
flex-direction: column;
}
.startpage-modal-label {
font-size: 13px;
font-weight: 500;
color: #64748b;
min-width: 100px;
}
.startpage-modal-value {
font-size: 14px;
color: #0f172a;
}
.startpage-modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
/* Buttons */
.startpage-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 180ms ease;
border: none;
}
.startpage-btn--primary {
background: var(--menu-bg-color, #3b82f6);
color: #fff;
}
.startpage-btn--primary:hover {
filter: brightness(1.1);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.startpage-btn--secondary {
background: #f1f5f9;
color: #475569;
}
.startpage-btn--secondary:hover {
background: #e2e8f0;
color: #0f172a;
}
/* Responsive */
@media (max-width: 1024px) {
.startpage-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.startpage {
padding: 16px;
}
.startpage-tabs {
display: flex;
}
.startpage-main--hidden,
.startpage-sidebar--hidden,
.startpage-section--hidden {
display: none;
}
.startpage-section {
padding: 16px;
}
.startpage-task-item {
padding: 12px;
}
/* Responsive Program Grid */
.startpage-programs-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.startpage-program-card__body {
padding: 12px;
}
.startpage-program-card__title {
font-size: 13px;
}
/* Responsive News Cards */
.startpage-news-card__visual {
height: 140px;
}
.startpage-news-card__body {
padding: 16px;
}
.startpage-news-card__title {
font-size: 15px;
}
.startpage-news-card__text {
font-size: 13px;
-webkit-line-clamp: 2;
}
.startpage-task-meta {
flex-direction: column;
gap: 4px;
}
}
/* ============================================================================
NEWS COMPOSER STYLES (Admin Tool)
============================================================================ */
.news-composer {
max-width: 1400px;
margin: 0 auto;
padding: 24px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.news-composer__header {
margin-bottom: 24px;
}
.news-composer__header h2 {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 8px 0;
font-size: 24px;
font-weight: 700;
color: #0f172a;
}
.news-composer__header h2 i {
color: var(--menu-bg-color, #3b82f6);
}
.news-composer__subtitle {
margin: 0;
font-size: 14px;
color: #64748b;
}
/* Alerts */
.news-composer__alert {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 14px;
}
.news-composer__alert--error {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
}
.news-composer__alert--success {
background: #f0fdf4;
color: #16a34a;
border: 1px solid #bbf7d0;
}
.news-composer__alert button {
margin-left: auto;
background: none;
border: none;
color: inherit;
opacity: 0.6;
cursor: pointer;
}
.news-composer__alert button:hover {
opacity: 1;
}
/* Grid Layout */
.news-composer__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
/* Card */
.news-composer__card {
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
overflow: hidden;
}
.news-composer__card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
background: #f8fafc;
}
.news-composer__card-header h3 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 15px;
font-weight: 600;
color: #0f172a;
}
.news-composer__card-header h3 i {
color: var(--menu-bg-color, #3b82f6);
}
.news-composer__count {
font-weight: 400;
color: #64748b;
}
/* Form */
.news-composer__form {
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.news-composer__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.news-composer__field label {
font-size: 13px;
font-weight: 500;
color: #374151;
}
.news-composer__input,
.news-composer__select,
.news-composer__textarea {
padding: 10px 14px;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
background: #fff;
color: #0f172a;
transition: all 150ms ease;
}
.news-composer__input:focus,
.news-composer__select:focus,
.news-composer__textarea:focus {
outline: none;
border-color: var(--menu-bg-color, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.news-composer__textarea {
resize: vertical;
min-height: 150px;
}
.news-composer__select--multi {
min-height: 100px;
}
.news-composer__editor {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
min-height: 200px;
}
.news-composer__editor .ck-editor__editable {
min-height: 150px;
}
/* Type Options */
.news-composer__type-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.news-composer__type-option {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 999px;
font-size: 13px;
cursor: pointer;
transition: all 150ms ease;
}
.news-composer__type-option input {
display: none;
}
.news-composer__type-option:hover {
background: #f1f5f9;
}
.news-composer__type-option--active {
background: var(--menu-bg-color, #3b82f6) !important;
border-color: var(--menu-bg-color, #3b82f6) !important;
color: #fff !important;
}
/* Options Row */
.news-composer__options-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.news-composer__checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.news-composer__checkbox input {
width: 16px;
height: 16px;
accent-color: var(--menu-bg-color, #3b82f6);
}
.news-composer__checkbox span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #475569;
}
/* Buttons */
.news-composer__actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.news-composer__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 180ms ease;
border: none;
}
.news-composer__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.news-composer__btn--primary {
background: var(--menu-bg-color, #3b82f6);
color: #fff;
}
.news-composer__btn--primary:hover:not(:disabled) {
filter: brightness(1.1);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.news-composer__btn--ghost {
background: transparent;
color: #64748b;
}
.news-composer__btn--ghost:hover {
background: #f1f5f9;
color: #0f172a;
}
/* Loading & Empty */
.news-composer__loading,
.news-composer__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: #94a3b8;
}
.news-composer__loading i,
.news-composer__empty i {
font-size: 32px;
margin-bottom: 12px;
}
/* News List */
.news-composer__news-list {
max-height: 600px;
overflow-y: auto;
}
.news-composer__news-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
transition: all 150ms ease;
}
.news-composer__news-item:hover {
background: #f8fafc;
}
.news-composer__news-item--selected {
background: #eff6ff;
border-left: 3px solid var(--menu-bg-color, #3b82f6);
}
.news-composer__news-item--pinned {
background: #fefce8;
}
.news-composer__news-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
flex-shrink: 0;
font-size: 14px;
}
.news-composer__news-icon--info { background: #e0f2fe; color: #0284c7; }
.news-composer__news-icon--update { background: #dbeafe; color: #2563eb; }
.news-composer__news-icon--feature { background: #fef3c7; color: #d97706; }
.news-composer__news-icon--technical { background: #f3e8ff; color: #7c3aed; }
.news-composer__news-icon--important { background: #fee2e2; color: #dc2626; }
.news-composer__news-content {
flex: 1;
min-width: 0;
}
.news-composer__news-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.news-composer__news-title {
font-size: 14px;
font-weight: 600;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-composer__news-badges {
display: flex;
gap: 4px;
}
.news-composer__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
font-size: 10px;
}
.news-composer__badge--pinned {
background: #fef3c7;
color: #d97706;
}
.news-composer__badge--admin {
background: #f3e8ff;
color: #7c3aed;
}
.news-composer__news-meta {
display: flex;
gap: 12px;
font-size: 11px;
color: #94a3b8;
}
.news-composer__news-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.news-composer__news-actions {
display: flex;
gap: 4px;
}
.news-composer__icon-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 8px;
color: #94a3b8;
cursor: pointer;
transition: all 150ms ease;
}
.news-composer__icon-btn:hover {
background: #f1f5f9;
color: #0f172a;
}
.news-composer__icon-btn--active {
color: #d97706 !important;
}
.news-composer__icon-btn--danger:hover {
background: #fef2f2;
color: #dc2626;
}
/* Responsive */
@media (max-width: 1024px) {
.news-composer__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.news-composer {
padding: 16px;
}
.news-composer__options-row {
flex-direction: column;
gap: 12px;
}
}
/* News Composer - Toolbar */
.news-composer__toolbar {
margin-bottom: 24px;
}
.news-composer__btn--large {
padding: 14px 24px;
font-size: 15px;
}
/* News Composer - Thumbnail */
.news-composer__news-thumb {
width: 48px;
height: 48px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.news-composer__news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* News Composer - Fullscreen Modal */
.news-composer__modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(4px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.news-composer__modal {
width: 100%;
max-width: 900px;
max-height: 90vh;
background: #fff;
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.news-composer__modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.news-composer__modal-header h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 600;
margin: 0;
color: #0f172a;
}
.news-composer__modal-header h3 i {
color: var(--menu-bg-color, #3b82f6);
}
.news-composer__modal-actions {
display: flex;
align-items: center;
gap: 12px;
}
.news-composer__draft-saved {
font-size: 13px;
color: #16a34a;
display: flex;
align-items: center;
gap: 6px;
}
.news-composer__modal-body {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.news-composer__modal-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.news-composer__modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
}
/* Image Upload */
.news-composer__image-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.news-composer__image-upload {
position: relative;
}
.news-composer__image-preview {
position: relative;
width: 100%;
height: 200px;
border-radius: 12px;
overflow: hidden;
border: 2px solid #e2e8f0;
}
.news-composer__image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-composer__image-remove {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 150ms ease;
}
.news-composer__image-remove:hover {
background: #dc2626;
}
.news-composer__image-placeholder {
width: 100%;
height: 160px;
border: 2px dashed #e2e8f0;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
background: #f8fafc;
color: #64748b;
transition: all 200ms ease;
}
.news-composer__image-placeholder:hover {
border-color: var(--menu-bg-color, #3b82f6);
background: #eff6ff;
color: var(--menu-bg-color, #3b82f6);
}
.news-composer__image-placeholder i {
font-size: 32px;
}
.news-composer__image-placeholder span {
font-size: 14px;
font-weight: 500;
}
/* Options Grid */
.news-composer__options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Field grow */
.news-composer__field--grow {
flex: 1;
}
.news-composer__field--grow .news-composer__editor,
.news-composer__field--grow .news-composer__textarea {
flex: 1;
min-height: 200px;
}
/* Large input */
.news-composer__input--large {
font-size: 18px;
padding: 14px 16px;
}
/* Modal responsive */
@media (max-width: 768px) {
.news-composer__modal {
max-height: 100vh;
border-radius: 0;
}
.news-composer__modal-overlay {
padding: 0;
}
.news-composer__options-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
NEWS COMPOSER - VIEW MODAL (Read-only news display)
============================================================ */
.news-composer__view-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
.news-composer__view-modal {
background: #fff;
border-radius: 16px;
max-width: 700px;
width: 100%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.news-composer__view-header {
position: relative;
height: 220px;
overflow: hidden;
}
.news-composer__view-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-composer__view-gradient {
width: 100%;
height: 100%;
}
.news-composer__view-type-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.news-composer__view-type-badge--info { background: #3b82f6; }
.news-composer__view-type-badge--update { background: #8b5cf6; }
.news-composer__view-type-badge--feature { background: #f59e0b; }
.news-composer__view-type-badge--technical { background: #06b6d4; }
.news-composer__view-type-badge--important { background: #ef4444; }
.news-composer__view-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background 0.2s;
}
.news-composer__view-close:hover {
background: rgba(0, 0, 0, 0.7);
}
.news-composer__view-body {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.news-composer__view-title {
font-size: 24px;
font-weight: 700;
color: var(--heading-color, #1f2937);
margin: 0 0 12px 0;
line-height: 1.3;
}
.news-composer__view-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: #6b7280;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #e5e7eb;
}
.news-composer__view-meta i {
margin-right: 6px;
}
.news-composer__view-content {
font-size: 15px;
line-height: 1.7;
color: #374151;
}
.news-composer__view-content p {
margin: 0 0 16px 0;
}
.news-composer__view-content h1,
.news-composer__view-content h2,
.news-composer__view-content h3 {
color: var(--heading-color, #1f2937);
margin: 24px 0 12px 0;
}
.news-composer__view-content ul,
.news-composer__view-content ol {
padding-left: 24px;
}
.news-composer__view-content a {
color: #2563eb;
}
.news-composer__view-footer {
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: flex-end;
gap: 12px;
background: #f9fafb;
}
/* View Modal responsive */
@media (max-width: 768px) {
.news-composer__view-modal {
max-height: 100vh;
border-radius: 0;
max-width: 100%;
}
.news-composer__view-overlay {
padding: 0;
}
.news-composer__view-header {
height: 180px;
}
.news-composer__view-body {
padding: 16px;
}
.news-composer__view-title {
font-size: 20px;
}
}
/* ============================================================
PROGRAM DETAIL (form.js) - RESPONSIVE MOBILE STYLES
============================================================ */
/* Mobile toggle button for sidebar */
.prog-mobile-menu-toggle {
display: none;
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--menu-bg-color, #3b82f6);
color: white;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
cursor: pointer;
font-size: 20px;
transition: transform 0.2s, background 0.2s;
}
.prog-mobile-menu-toggle:hover {
transform: scale(1.05);
}
.prog-mobile-menu-toggle.is-open {
background: #1e293b;
}
/* Mobile sidebar overlay */
.prog-mobile-sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
backdrop-filter: blur(4px);
}
.prog-mobile-sidebar-overlay.is-open {
display: block;
}
/* Program view: content area bündig mit Herobild – lange Org-Unit-Namen dürfen nicht nach rechts schieben */
.prog-shell {
min-width: 0;
}
.prog-surface {
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
.prog-section {
min-width: 0;
max-width: 100%;
overflow-x: hidden;
}
/* Responsive adjustments */
@media (max-width: 900px) {
/* Show mobile toggle */
.prog-mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
}
/* Hide desktop sidebar */
.prog-shell {
display: block !important;
}
.prog-side {
position: fixed;
top: 0;
left: 0;
width: 280px;
max-width: 85vw;
height: 100vh;
z-index: 1000;
background: #fff;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
transform: translateX(-100%);
transition: transform 0.3s ease;
overflow-y: auto;
padding-top: 20px;
}
.prog-side.is-open {
transform: translateX(0);
}
/* Make main content full width */
.prog-main {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hero adjustments */
.prog-hero-wrap {
margin: 0 -16px;
width: calc(100% + 32px);
}
.programs-hero-simple,
.prog-hero {
border-radius: 0 !important;
min-height: 180px !important;
}
/* Section padding */
.prog-section {
padding: 16px !important;
}
/* Task cards mobile-friendly */
.task-card,
.program-tasks-sidemenu__item {
padding: 12px !important;
}
/* Process overview grid */
.process-overview__grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Page editor mobile */
.prog-page-section {
padding: 16px !important;
}
/* PM Panel full height on mobile */
.pm-panel--tall {
min-height: auto !important;
}
}
/* Task Viewer as Modal on Mobile */
@media (max-width: 900px) {
.prog-section[class*="tasksviewer"] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
background: #fff;
overflow-y: auto;
padding: 0 !important;
margin: 0 !important;
}
/* Add close button styling for task viewer */
.task-viewer-mobile-header {
position: sticky;
top: 0;
z-index: 10;
background: #fff;
padding: 16px;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 12px;
}
.task-viewer-mobile-close {
width: 40px;
height: 40px;
border-radius: 10px;
background: #f1f5f9;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 18px;
}
.task-viewer-mobile-close:hover {
background: #e2e8f0;
color: #1e293b;
}
}
/* Smaller screens - even more compact */
@media (max-width: 480px) {
.prog-hero-wrap {
margin: 0 -12px;
width: calc(100% + 24px);
}
.programs-hero-simple,
.prog-hero {
min-height: 140px !important;
}
.prog-section {
padding: 12px !important;
}
.prog-mobile-menu-toggle {
width: 48px;
height: 48px;
font-size: 18px;
bottom: 16px;
left: 16px;
}
/* Smaller text on mobile */
.prog-menu__label {
font-size: 11px !important;
}
.prog-item {
font-size: 13px !important;
padding: 10px 12px !important;
}
}
/* ============================================================================
SUPPORT FORM STYLES
============================================================================ */
.support-form {
padding: 24px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.support-form__header {
margin-bottom: 32px;
}
.support-form__title {
font-size: 24px;
font-weight: 700;
color: #0f172a;
margin: 0 0 16px 0;
}
.support-form__description {
font-size: 15px;
line-height: 1.7;
color: #475569;
margin: 0 0 16px 0;
}
.support-form__description strong {
color: #1f2937;
font-weight: 600;
}
.support-form__form-intro {
font-size: 14px;
line-height: 1.6;
color: #64748b;
margin: 0 0 16px 0;
padding: 12px 16px;
background: #f8fafc;
border-left: 3px solid #3b82f6;
border-radius: 4px;
}
.support-form__form-intro strong {
color: #1f2937;
font-weight: 600;
}
.support-form__hint {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 8px;
font-size: 13px;
line-height: 1.5;
color: #0369a1;
}
.support-form__hint i {
margin-top: 2px;
flex-shrink: 0;
}
.support-form__success {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #dcfce7;
border: 1px solid #86efac;
border-radius: 8px;
color: #166534;
font-size: 14px;
margin-bottom: 20px;
}
.support-form__success i {
color: #16a34a;
}
.support-form__error {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: #fee2e2;
border: 1px solid #fca5a5;
border-radius: 8px;
color: #991b1b;
font-size: 14px;
margin-bottom: 20px;
}
.support-form__error i {
color: #dc2626;
}
.support-form__form {
display: flex;
flex-direction: column;
gap: 20px;
}
.support-form__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.support-form__label {
font-size: 14px;
font-weight: 500;
color: #1f2937;
display: flex;
align-items: center;
gap: 4px;
}
.support-form__required {
color: #ef4444;
font-weight: 600;
}
.support-form__input,
.support-form__select,
.support-form__textarea {
width: 100%;
padding: 10px 14px;
font-size: 14px;
line-height: 1.5;
color: #1f2937;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
transition: all 150ms ease;
font-family: inherit;
}
.support-form__input:focus,
.support-form__select:focus,
.support-form__textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.support-form__input:disabled,
.support-form__select:disabled,
.support-form__textarea:disabled {
background: #f9fafb;
color: #9ca3af;
cursor: not-allowed;
}
.support-form__input--error,
.support-form__select--error,
.support-form__textarea--error {
border-color: #ef4444;
}
.support-form__input--error:focus,
.support-form__select--error:focus,
.support-form__textarea--error:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.support-form__select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.support-form__textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.support-form__actions {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.support-form__submit {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #3b82f6;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 150ms ease;
font-family: inherit;
}
.support-form__submit:hover:not(:disabled) {
background: #2563eb;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.support-form__submit:disabled {
background: #9ca3af;
cursor: not-allowed;
opacity: 0.6;
}
.support-form__submit--loading {
pointer-events: none;
}
.support-form__submit i {
font-size: 14px;
}
/* Support Form Footer */
.support-form__footer {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 24px;
}
.support-form__footer-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.support-form__footer-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.support-form__footer-text {
font-size: 14px;
line-height: 1.6;
color: #64748b;
margin: 0;
}
.support-form__footer-text strong {
color: #1f2937;
font-weight: 600;
}
/* Responsive Support Form */
@media (max-width: 768px) {
.support-form {
padding: 16px;
}
.support-form__header {
margin-bottom: 24px;
}
.support-form__title {
font-size: 20px;
}
.support-form__description,
.support-form__form-intro {
font-size: 14px;
}
.support-form__form {
gap: 16px;
}
.support-form__actions {
margin-top: 4px;
}
.support-form__submit {
width: 100%;
justify-content: center;
}
.support-form__footer {
margin-top: 32px;
padding-top: 24px;
gap: 20px;
}
}
/* ============================================================================
HANDBOOK WIDGET (Resizable & Draggable)
============================================================================ */
.startpage-handbook-widget {
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 100001;
background: #fff;
border-radius: 0;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
border: none;
border-left: 1px solid #e2e8f0;
min-width: 300px;
width: 500px;
max-width: 90vw;
height: 100vh;
animation: slideInFromRight 300ms ease;
}
@keyframes slideInFromRight {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.startpage-handbook-widget__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
user-select: none;
flex-shrink: 0;
}
.startpage-handbook-widget__title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #1f2937;
font-size: 14px;
}
.startpage-handbook-widget__close {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #64748b;
cursor: pointer;
transition: all 150ms ease;
padding: 0;
font-size: 12px;
flex-shrink: 0;
}
.startpage-handbook-widget__close:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #dc2626;
}
.startpage-handbook-widget__body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
position: relative;
min-height: 0;
-webkit-overflow-scrolling: touch;
}
.startpage-handbook-widget__body iframe {
width: 100%;
min-height: 100%;
border: none;
display: block;
/* Docusaurus ist responsiv, iframe passt sich an */
}
.startpage-handbook-widget__resize-handle {
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 24px;
background: #3b82f6;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: nesw-resize;
border-radius: 0 6px 0 0;
font-size: 10px;
z-index: 10;
transition: background 150ms ease;
}
.startpage-handbook-widget__resize-handle:hover {
background: #2563eb;
}
.startpage-handbook-widget__resize-handle:active {
background: #1d4ed8;
}
/* Responsive */
@media (max-width: 768px) {
.startpage-handbook-widget {
width: 100vw !important;
max-width: 100vw !important;
}
}
/* ============================================================================
CHATBOT MODAL
============================================================================ */
.startpage-chatbot-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 100002;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: fadeIn 200ms ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.startpage-chatbot-modal {
background: #fff;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 500px;
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #e2e8f0;
animation: slideUp 300ms ease;
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.startpage-chatbot-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-bottom: 1px solid #e2e8f0;
}
.startpage-chatbot-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #fff;
font-size: 16px;
}
.startpage-chatbot-title i {
font-size: 18px;
}
.startpage-chatbot-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: #fff;
cursor: pointer;
transition: all 150ms ease;
padding: 0;
font-size: 14px;
flex-shrink: 0;
}
.startpage-chatbot-close:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
}
.startpage-chatbot-body {
flex: 1;
overflow: hidden;
position: relative;
min-height: 400px;
max-height: calc(85vh - 73px);
}
.startpage-chatbot-body iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* Chatbot Button */
.startpage-chatbot-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 200ms ease;
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.startpage-chatbot-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.startpage-chatbot-btn:active {
transform: translateY(0);
}
.startpage-chatbot-btn i {
font-size: 16px;
}
/* Responsive */
@media (max-width: 768px) {
.startpage-chatbot-modal {
max-width: 100%;
max-height: 90vh;
border-radius: 16px 16px 0 0;
margin: 0;
}
.startpage-chatbot-overlay {
padding: 0;
align-items: flex-end;
}
.startpage-chatbot-body {
min-height: 300px;
max-height: calc(90vh - 73px);
}
}
/* ============================================================================
N8N CHATBOT BADGES (Verbosity Selection)
============================================================================ */
/* Container für Badge-Gruppe */
.n8n-chat-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
/* Einzelner Badge-Button */
.n8n-chat-badges__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid #e5e7eb;
border-radius: 20px;
background: #fff;
color: #374151;
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.n8n-chat-badges__btn:hover {
background: #f9fafb;
border-color: #d1d5db;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.n8n-chat-badges__btn:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.n8n-chat-badges__btn:active {
transform: translateY(0);
}
/* Aktiver Zustand */
.n8n-chat-badges__btn--active {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
border-color: #2563eb;
color: #fff;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.n8n-chat-badges__btn--active:hover {
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
border-color: #1d4ed8;
transform: translateY(-1px);
}
.n8n-chat-badges__btn--active:focus {
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3), 0 2px 8px rgba(37, 99, 235, 0.35);
}
/* Icon im Badge */
.n8n-chat-badges__icon {
font-size: 14px;
line-height: 1;
}
/* Label im Badge */
.n8n-chat-badges__label {
white-space: nowrap;
}
/* Badge-Message im Chat */
.n8n-message-badges {
align-self: flex-start;
max-width: 100%;
margin: 8px 0;
}
.n8n-badges-wrapper {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 12px 16px;
}
.n8n-badges-label {
font-size: 13px;
font-weight: 500;
color: #64748b;
margin-bottom: 8px;
}
/* Responsive: Badges stapeln auf kleinen Screens */
@media (max-width: 400px) {
.n8n-chat-badges {
flex-direction: column;
}
.n8n-chat-badges__btn {
justify-content: center;
}
}
/* ===== SURVEY GROUPING ADMIN ===== */
.sg-admin {
display: flex;
flex-direction: column;
min-height: calc(100vh - 120px);
padding: 24px;
}
.sg-admin__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.sg-admin__title {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
font-weight: 700;
margin: 0;
color: #1f2937;
}
.sg-admin__title i {
color: #6366f1;
}
.sg-admin__actions {
display: flex;
gap: 12px;
}
.sg-admin__loading,
.sg-admin__error {
padding: 24px;
text-align: center;
font-size: 16px;
}
.sg-admin__error {
color: #dc2626;
background: #fef2f2;
border-radius: 8px;
}
.sg-admin__content {
display: flex;
gap: 24px;
flex: 1;
}
/* Sidebar */
.sg-admin__sidebar {
width: 280px;
flex-shrink: 0;
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
height: fit-content;
}
.sg-admin__sidebar-title {
font-size: 14px;
font-weight: 600;
color: #6b7280;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sg-admin__survey-item {
padding: 12px;
border-radius: 8px;
cursor: pointer;
margin-bottom: 8px;
transition: background 150ms ease;
border: 1px solid transparent;
}
.sg-admin__survey-item:hover {
background: #f3f4f6;
}
.sg-admin__survey-item.is-active {
background: #eef2ff;
border-color: #6366f1;
}
.sg-admin__survey-item.is-inactive {
opacity: 0.6;
}
.sg-admin__survey-name {
font-weight: 500;
color: #1f2937;
margin-bottom: 4px;
}
.sg-admin__survey-meta {
display: flex;
gap: 6px;
font-size: 12px;
}
.sg-admin__empty {
padding: 24px;
text-align: center;
color: #9ca3af;
font-size: 14px;
}
/* Main */
.sg-admin__main {
flex: 1;
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.sg-admin__new-survey {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e5e7eb;
}
.sg-admin__new-survey h3 {
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
}
.sg-admin__hint {
font-size: 13px;
color: #6b7280;
margin: 12px 0 0 0;
}
.sg-admin__hint code {
background: #f3f4f6;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
}
/* Groups */
.sg-admin__groups {
flex: 1;
display: flex;
flex-direction: column;
}
.sg-admin__groups-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.sg-admin__groups-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.sg-admin__groups-stats {
display: flex;
gap: 16px;
font-size: 13px;
color: #6b7280;
}
.sg-admin__groups-actions {
margin-left: auto;
display: flex;
gap: 4px;
}
.sg-admin__merge-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #eef2ff;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
color: #4338ca;
}
.sg-admin__empty-main {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 200px;
color: #9ca3af;
font-size: 16px;
}
.sg-admin__footer {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
.sg-admin__footer-spacer {
flex: 1;
}
.sg-admin__dirty-indicator {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #f59e0b;
}
.sg-admin__dirty-indicator i {
font-size: 8px;
}
/* Tree */
.sg-tree {
flex: 1;
overflow-y: auto;
}
.sg-tree__branch {
margin-left: 0;
}
.sg-tree__children {
margin-left: 24px;
border-left: 1px solid #e5e7eb;
padding-left: 12px;
}
.sg-tree__node {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
margin-bottom: 4px;
transition: background 150ms ease;
}
.sg-tree__node:hover {
background: #f9fafb;
}
.sg-tree__node.is-merge-selected {
background: #eef2ff;
border: 1px solid #6366f1;
}
.sg-tree__expand {
width: 20px;
text-align: center;
color: #9ca3af;
cursor: pointer;
flex-shrink: 0;
}
.sg-tree__expand:hover {
color: #6366f1;
}
.sg-tree__merge-checkbox {
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
}
.sg-tree__name {
font-weight: 500;
color: #1f2937;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-tree__soll {
font-size: 13px;
color: #059669;
font-weight: 500;
white-space: nowrap;
}
.sg-tree__soll.is-empty {
color: #f59e0b;
}
.sg-tree__soll span {
font-size: 11px;
color: #9ca3af;
}
/* Badges */
.sg-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.sg-badge--blue { background: #dbeafe; color: #1d4ed8; }
.sg-badge--green { background: #dcfce7; color: #166534; }
.sg-badge--orange { background: #ffedd5; color: #c2410c; }
.sg-badge--purple { background: #f3e8ff; color: #7c3aed; }
.sg-badge--gray { background: #f3f4f6; color: #6b7280; }
.sg-badge--red { background: #fee2e2; color: #dc2626; }
/* Form */
.sg-form-row {
margin-bottom: 16px;
}
.sg-form-row label {
display: block;
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 6px;
}
.sg-form-row--checkbox label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.sg-form-row--checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
}
.sg-input {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sg-input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.sg-form-hint {
display: block;
font-size: 12px;
color: #9ca3af;
margin-top: 4px;
}
/* Buttons */
.sg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
transition: all 150ms ease;
}
.sg-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.sg-btn--primary {
background: #6366f1;
color: #fff;
}
.sg-btn--primary:hover:not(:disabled) {
background: #4f46e5;
}
.sg-btn--secondary {
background: #f3f4f6;
color: #374151;
}
.sg-btn--secondary:hover:not(:disabled) {
background: #e5e7eb;
}
.sg-btn--small {
padding: 4px 8px;
font-size: 12px;
}
.sg-btn--icon {
padding: 6px;
background: transparent;
color: #9ca3af;
}
.sg-btn--icon:hover:not(:disabled) {
background: #f3f4f6;
color: #6366f1;
}
/* Modal */
.sg-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.sg-modal {
background: #fff;
border-radius: 12px;
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.sg-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #e5e7eb;
}
.sg-modal__header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.sg-modal__close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
color: #6b7280;
}
.sg-modal__close:hover {
background: #f3f4f6;
color: #1f2937;
}
.sg-modal__body {
padding: 20px;
overflow-y: auto;
max-height: calc(90vh - 140px);
}
.sg-modal__footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 20px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
/* Text utilities */
.sg-text--warning {
color: #f59e0b;
}
/* Responsive */
@media (max-width: 768px) {
.sg-admin {
padding: 16px;
}
.sg-admin__content {
flex-direction: column;
}
.sg-admin__sidebar {
width: 100%;
}
.sg-admin__header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ===== PARTICIPATION RATE VIEW ===== */
.pr-view {
display: flex;
flex-direction: column;
min-height: calc(100vh - 120px);
padding: 24px;
}
.pr-view__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.pr-view__title {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
font-weight: 700;
margin: 0;
color: #1f2937;
}
.pr-view__title i {
color: #10b981;
}
.pr-view__actions {
display: flex;
gap: 12px;
}
.pr-view__loading,
.pr-view__error {
padding: 24px;
text-align: center;
font-size: 16px;
}
.pr-view__error {
color: #dc2626;
background: #fef2f2;
border-radius: 8px;
}
.pr-view__notice {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
margin-bottom: 24px;
}
.pr-view__notice i {
color: #f59e0b;
font-size: 20px;
flex-shrink: 0;
margin-top: 2px;
}
.pr-view__notice p {
margin: 8px 0 0 0;
font-size: 14px;
color: #92400e;
}
.pr-view__notice code {
background: rgba(0,0,0,0.1);
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
}
.pr-view__content {
display: flex;
gap: 24px;
flex: 1;
}
/* Sidebar */
.pr-view__sidebar {
width: 280px;
flex-shrink: 0;
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
height: fit-content;
}
.pr-view__sidebar-title {
font-size: 14px;
font-weight: 600;
color: #6b7280;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pr-view__survey-item {
padding: 12px;
border-radius: 8px;
cursor: pointer;
margin-bottom: 8px;
transition: background 150ms ease;
border: 1px solid transparent;
}
.pr-view__survey-item:hover {
background: #f3f4f6;
}
.pr-view__survey-item.is-active {
background: #ecfdf5;
border-color: #10b981;
}
.pr-view__survey-name {
font-weight: 500;
color: #1f2937;
margin-bottom: 4px;
}
.pr-view__survey-meta {
display: flex;
gap: 6px;
font-size: 12px;
}
.pr-view__empty {
padding: 24px;
text-align: center;
color: #9ca3af;
font-size: 14px;
}
/* Main */
.pr-view__main {
flex: 1;
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.pr-view__empty-main {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 200px;
color: #9ca3af;
font-size: 16px;
}
/* Total Stats */
.pr-view__total {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: #f9fafb;
border-radius: 8px;
margin-bottom: 20px;
}
.pr-view__total-label {
font-weight: 600;
color: #374151;
}
.pr-view__total-values {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
}
.pr-view__total-ist {
font-weight: 600;
color: #059669;
}
.pr-view__total-divider {
color: #9ca3af;
}
.pr-view__total-soll {
color: #6b7280;
}
.pr-view__total-percent {
margin-left: auto;
padding: 8px 16px;
border-radius: 8px;
font-size: 18px;
font-weight: 700;
}
/* Toolbar */
.pr-view__toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.pr-view__toolbar-info {
margin-left: auto;
font-size: 13px;
color: #9ca3af;
}
/* Tree */
.pr-tree {
flex: 1;
overflow-y: auto;
}
.pr-tree__branch {
margin-left: 0;
}
.pr-tree__children {
margin-left: 24px;
border-left: 1px solid #e5e7eb;
padding-left: 12px;
}
.pr-tree__node {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 6px;
margin-bottom: 4px;
transition: background 150ms ease;
background: #f9fafb;
}
.pr-tree__node:hover {
background: #f3f4f6;
}
.pr-tree__expand {
width: 20px;
text-align: center;
color: #9ca3af;
cursor: pointer;
flex-shrink: 0;
}
.pr-tree__expand:hover {
color: #10b981;
}
.pr-tree__name {
font-weight: 500;
color: #1f2937;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pr-tree__values {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
white-space: nowrap;
}
.pr-tree__ist {
font-weight: 600;
color: #059669;
}
.pr-tree__divider {
color: #d1d5db;
}
.pr-tree__soll {
color: #6b7280;
}
.pr-tree__percent {
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
min-width: 50px;
text-align: center;
}
/* Badges */
.pr-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.pr-badge--blue { background: #dbeafe; color: #1d4ed8; }
.pr-badge--green { background: #dcfce7; color: #166534; }
.pr-badge--orange { background: #ffedd5; color: #c2410c; }
.pr-badge--purple { background: #f3e8ff; color: #7c3aed; }
.pr-badge--gray { background: #f3f4f6; color: #6b7280; }
/* Buttons */
.pr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
transition: all 150ms ease;
}
.pr-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pr-btn--secondary {
background: #f3f4f6;
color: #374151;
}
.pr-btn--secondary:hover:not(:disabled) {
background: #e5e7eb;
}
.pr-btn--small {
padding: 4px 8px;
font-size: 12px;
}
/* Responsive */
@media (max-width: 768px) {
.pr-view {
padding: 16px;
}
.pr-view__content {
flex-direction: column;
}
.pr-view__sidebar {
width: 100%;
}
.pr-view__header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.pr-view__total {
flex-wrap: wrap;
}
.pr-view__total-percent {
margin-left: 0;
margin-top: 8px;
width: 100%;
text-align: center;
}
}
/* ===== SURVEY GROUPING - MATCHING SECTION ===== */
.sg-modal--wide {
max-width: 640px;
}
.sg-matching-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
}
.sg-matching-section > label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #4338ca;
}
.sg-matching-selected {
margin-top: 12px;
padding: 12px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 8px;
}
.sg-matching-selected__label {
font-size: 12px;
font-weight: 600;
color: #166534;
margin-bottom: 8px;
display: block;
}
.sg-matching-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sg-matching-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: #dcfce7;
border-radius: 6px;
font-size: 13px;
color: #166534;
}
.sg-matching-tag__remove {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #166534;
cursor: pointer;
border-radius: 4px;
padding: 0;
}
.sg-matching-tag__remove:hover {
background: #bbf7d0;
}
.sg-matching-suggestions {
margin-top: 16px;
}
.sg-matching-suggestions__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-size: 13px;
color: #6b7280;
}
.sg-matching-list {
max-height: 300px;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.sg-matching-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
transition: background 150ms ease;
border-bottom: 1px solid #f3f4f6;
}
.sg-matching-item:last-child {
border-bottom: none;
}
.sg-matching-item:hover {
background: #f9fafb;
}
.sg-matching-item.is-selected {
background: #eef2ff;
}
.sg-matching-item.is-high-score {
background: #fefce8;
}
.sg-matching-item.is-selected.is-high-score {
background: #ecfdf5;
}
.sg-matching-item input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.sg-matching-item__name {
flex: 1;
font-size: 14px;
color: #1f2937;
}
.sg-matching-item__score {
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
background: #f3f4f6;
color: #6b7280;
}
.sg-matching-item__score.is-good {
background: #dcfce7;
color: #166534;
}
.sg-matching-item__score.is-medium {
background: #fef3c7;
color: #92400e;
}
.sg-matching-empty {
margin-top: 12px;
padding: 16px;
background: #f9fafb;
border-radius: 8px;
text-align: center;
color: #9ca3af;
font-size: 14px;
}
.sg-matching-empty i {
margin-right: 8px;
}
/* Aggregierte SOLL-Werte (berechnet aus Kindern) */
.sg-tree__soll.is-computed {
font-style: italic;
color: #6b7280;
}
.sg-tree__soll-hint {
font-size: 10px;
color: #9ca3af;
margin-left: 2px;
}
/* Speicher-Fortschrittsanzeige */
.sg-admin__save-progress {
display: flex;
align-items: center;
gap: 10px;
margin-right: 12px;
}
.sg-admin__save-progress-bar {
width: 120px;
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}
.sg-admin__save-progress-fill {
height: 100%;
background: #3b82f6;
transition: width 0.2s ease;
}
.sg-admin__save-progress-text {
font-size: 13px;
color: #6b7280;
min-width: 60px;
}
/* Lösch-Button für Befragungen */
.sg-admin__survey-delete {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
border-radius: 4px;
padding: 0;
margin-left: auto;
opacity: 0;
transition: all 150ms ease;
}
.sg-admin__survey-item:hover .sg-admin__survey-delete {
opacity: 1;
}
.sg-admin__survey-delete:hover {
background: #fee2e2;
color: #dc2626;
}
.sg-admin__survey-delete:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================================================
Formular Module - Shared Styles
============================================================================ */
/* Shared Button Styles */
.formular-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 150ms ease;
border: none;
}
.formular-btn--primary {
background: #2563eb;
color: white;
}
.formular-btn--primary:hover {
background: #1d4ed8;
}
.formular-btn--secondary {
background: white;
color: #374151;
border: 1px solid #d1d5db;
}
.formular-btn--secondary:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.formular-btn--danger {
background: #fee2e2;
color: #dc2626;
}
.formular-btn--danger:hover {
background: #fecaca;
}
.formular-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Shared Modal Overlay */
.formular-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 24px;
}
.formular-modal {
background: white;
border-radius: 12px;
width: 100%;
max-width: 640px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.formular-modal--large {
max-width: 800px;
}
.formular-modal--small {
max-width: 480px;
}
.formular-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid #e5e7eb;
}
.formular-modal__header h3 {
font-size: 18px;
font-weight: 600;
color: var(--heading-color, #111827);
margin: 0;
}
.formular-modal__header button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
border-radius: 8px;
transition: all 150ms ease;
}
.formular-modal__header button:hover {
background: #f3f4f6;
color: #374151;
}
.formular-modal__body {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.formular-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
}
/* ============================================================================
Formular Admin - Template Management
============================================================================ */
.formular-admin {
padding: 40px 24px 24px 24px; /* Größerer oberer Abstand zum Topmenü */
max-width: 1200px;
margin: 0 auto;
}
.formular-admin__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.formular-admin__title h2 {
font-size: 24px;
font-weight: 700;
color: var(--heading-color, #111827);
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 12px;
}
.formular-admin__title h2 i {
color: #2563eb;
}
.formular-admin__subtitle {
font-size: 14px;
color: #6b7280;
margin: 0;
}
.formular-admin__create-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 150ms ease;
white-space: nowrap;
}
.formular-admin__create-btn:hover {
background: #1d4ed8;
}
.formular-admin__error {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #fee2e2;
color: #991b1b;
border-radius: 8px;
margin-bottom: 24px;
}
.formular-admin__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px;
color: #6b7280;
}
.formular-admin__spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 16px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.formular-admin__content {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Filters */
.formular-admin__filters {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.formular-admin__search {
position: relative;
flex: 1;
min-width: 200px;
max-width: 400px;
}
.formular-admin__search i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 14px;
}
.formular-admin__search input {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
transition: all 150ms ease;
}
.formular-admin__search input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.formular-admin__status-filter {
display: flex;
gap: 4px;
background: #f3f4f6;
padding: 4px;
border-radius: 8px;
}
.formular-admin__status-filter button {
padding: 8px 16px;
background: transparent;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #6b7280;
cursor: pointer;
transition: all 150ms ease;
}
.formular-admin__status-filter button.active {
background: white;
color: #111827;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Empty State */
.formular-admin__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
background: #f9fafb;
border: 2px dashed #e5e7eb;
border-radius: 12px;
text-align: center;
}
.formular-admin__empty i {
font-size: 48px;
color: #d1d5db;
margin-bottom: 16px;
}
.formular-admin__empty p {
font-size: 16px;
color: #6b7280;
margin: 0 0 24px 0;
}
.formular-admin__create-btn--small {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
/* Template List */
.formular-admin__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.formular-admin__item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
transition: all 150ms ease;
}
.formular-admin__item:hover {
border-color: #d1d5db;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.formular-admin__item--archived {
opacity: 0.6;
}
.formular-admin__item-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #dbeafe;
color: #2563eb;
border-radius: 10px;
font-size: 20px;
flex-shrink: 0;
}
.formular-admin__item-content {
flex: 1;
min-width: 0;
}
.formular-admin__item-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
.formular-admin__item-id {
font-size: 12px;
font-weight: 600;
color: #6b7280;
font-family: monospace;
background: #f3f4f6;
padding: 2px 8px;
border-radius: 4px;
}
.formular-admin__item-status {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
}
.formular-admin__item-status.status--active {
background: #dcfce7;
color: #166534;
}
.formular-admin__item-status.status--archived {
background: #f3f4f6;
color: #6b7280;
}
.formular-admin__item-name {
font-size: 16px;
font-weight: 600;
color: #111827;
margin: 0 0 4px 0;
}
.formular-admin__item-desc {
font-size: 14px;
color: #6b7280;
margin: 0 0 8px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.formular-admin__item-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
color: #9ca3af;
}
.formular-admin__item-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.formular-admin__item-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.formular-admin__item-actions button {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #6b7280;
cursor: pointer;
transition: all 150ms ease;
}
.formular-admin__item-actions button:hover {
background: #f3f4f6;
color: #374151;
}
.formular-admin__item-actions button.danger:hover {
background: #fee2e2;
color: #dc2626;
border-color: #fecaca;
}
/* Modal Overrides */
.formular-admin__modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 24px;
}
.formular-admin__modal {
background: white;
border-radius: 12px;
width: 100%;
max-width: 720px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.formular-admin__modal--small {
max-width: 480px;
}
.formular-admin__modal--confirm {
max-width: 400px;
}
.formular-admin__modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid #e5e7eb;
}
.formular-admin__modal-header h3 {
font-size: 18px;
font-weight: 600;
color: var(--heading-color, #111827);
margin: 0;
}
.formular-admin__modal-header button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
border-radius: 8px;
}
.formular-admin__modal-header button:hover {
background: #f3f4f6;
color: #374151;
}
.formular-admin__modal-body {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.formular-admin__modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
}
.formular-admin__modal-footer .btn-cancel,
.formular-admin__modal-footer .btn-close {
padding: 10px 20px;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 150ms ease;
}
.formular-admin__modal-footer .btn-cancel:hover,
.formular-admin__modal-footer .btn-close:hover {
background: #f9fafb;
}
.formular-admin__modal-footer .btn-save {
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 150ms ease;
}
.formular-admin__modal-footer .btn-save:hover {
background: #1d4ed8;
}
.formular-admin__modal-footer .btn-save:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.formular-admin__modal-footer .btn-delete {
padding: 10px 20px;
background: #dc2626;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.formular-admin__modal-footer .btn-delete:hover {
background: #b91c1c;
}
/* Form Sections */
.formular-admin__form-section {
margin-bottom: 24px;
}
.formular-admin__form-section:last-child {
margin-bottom: 0;
}
.formular-admin__form-section h4 {
font-size: 14px;
font-weight: 600;
color: #374151;
margin: 0 0 16px 0;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.formular-admin__section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.formular-admin__section-header h4 {
margin: 0;
padding: 0;
border: none;
}
.formular-admin__add-field-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #dbeafe;
color: #2563eb;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.formular-admin__add-field-btn:hover {
background: #bfdbfe;
}
.formular-admin__form-row {
margin-bottom: 16px;
}
.formular-admin__form-row:last-child {
margin-bottom: 0;
}
.formular-admin__form-row label {
display: block;
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 6px;
}
.formular-admin__form-row input,
.formular-admin__form-row select,
.formular-admin__form-row textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
transition: all 150ms ease;
}
.formular-admin__form-row input:focus,
.formular-admin__form-row select:focus,
.formular-admin__form-row textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.formular-admin__form-row input.error,
.formular-admin__form-row select.error {
border-color: #dc2626;
}
.formular-admin__error-text {
display: block;
font-size: 12px;
color: #dc2626;
margin-top: 4px;
}
.formular-admin__checkbox-row {
margin-bottom: 12px;
}
.formular-admin__checkbox-row label {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #374151;
cursor: pointer;
}
.formular-admin__checkbox-row input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.formular-admin__checkbox-row--highlight {
margin-top: 16px;
padding: 12px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border: 1px solid #a7f3d0;
border-radius: 8px;
}
.formular-admin__field-hint {
display: block;
margin-top: 6px;
margin-left: 28px;
font-size: 12px;
color: #059669;
line-height: 1.4;
}
/* Fields List */
.formular-admin__no-fields {
padding: 32px;
text-align: center;
background: #f9fafb;
border: 2px dashed #e5e7eb;
border-radius: 8px;
color: #6b7280;
}
.formular-admin__fields-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.formular-admin__field-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.formular-admin__field-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
color: #6b7280;
font-size: 14px;
}
.formular-admin__field-content {
flex: 1;
min-width: 0;
}
.formular-admin__field-label {
font-size: 14px;
font-weight: 500;
color: #111827;
}
.formular-admin__field-label .required-badge {
color: #dc2626;
margin-left: 2px;
}
.formular-admin__field-type {
font-size: 12px;
color: #6b7280;
}
.formular-admin__field-actions {
display: flex;
gap: 4px;
}
.formular-admin__field-actions button {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
color: #6b7280;
cursor: pointer;
font-size: 12px;
}
.formular-admin__field-actions button:hover {
background: #f3f4f6;
color: #374151;
}
.formular-admin__field-actions button.danger:hover {
background: #fee2e2;
color: #dc2626;
}
.formular-admin__field-actions button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* Options List */
.formular-admin__options-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.formular-admin__option-row {
display: flex;
gap: 8px;
}
.formular-admin__option-row input {
flex: 1;
}
.formular-admin__option-row button {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #fee2e2;
color: #dc2626;
border: none;
border-radius: 6px;
cursor: pointer;
}
.formular-admin__add-option-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #f3f4f6;
color: #6b7280;
border: none;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
width: fit-content;
}
.formular-admin__add-option-btn:hover {
background: #e5e7eb;
color: #374151;
}
/* Delete Confirmation */
.formular-admin__delete-name {
font-weight: 600;
color: #111827;
margin: 8px 0;
}
.formular-admin__warning {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: #fef3c7;
color: #92400e;
border-radius: 8px;
font-size: 13px;
margin-top: 16px;
}
/* ============================================================================
Formular Pool - Entry List
============================================================================ */
.formular-pool {
padding: 40px 24px 24px 24px; /* Größerer oberer Abstand zum Topmenü */
max-width: 1400px;
margin: 0 auto;
}
/* Verstecke LimeSurvey-Fragenfeld-Textareas auf Komponentenseiten */
/* Diese werden von LimeSurvey automatisch gerendert, sind aber nicht benötigt */
textarea.form-control[id^="answer"],
.formular-pool ~ textarea.form-control,
.formular-pool + textarea,
#limesurvey .question-container:has(.formular-pool) textarea {
display: none !important;
}
.formular-pool__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.formular-pool__title h2 {
font-size: 24px;
font-weight: 700;
color: var(--heading-color, #111827);
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 12px;
}
.formular-pool__title h2 i {
color: #2563eb;
}
.formular-pool__subtitle {
font-size: 14px;
color: #6b7280;
margin: 0;
}
.formular-pool__stats {
display: flex;
gap: 16px;
}
.formular-pool__stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 20px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
min-width: 80px;
}
.formular-pool__stat-value {
font-size: 24px;
font-weight: 700;
color: #111827;
}
.formular-pool__stat-label {
font-size: 12px;
color: #6b7280;
}
.formular-pool__stat--submitted {
border-color: #bfdbfe;
background: #eff6ff;
}
.formular-pool__stat--submitted .formular-pool__stat-value {
color: #2563eb;
}
.formular-pool__stat--processed {
border-color: #bbf7d0;
background: #f0fdf4;
}
.formular-pool__stat--processed .formular-pool__stat-value {
color: #16a34a;
}
.formular-pool__error {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #fee2e2;
color: #991b1b;
border-radius: 8px;
margin-bottom: 24px;
}
.formular-pool__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px;
color: #6b7280;
}
.formular-pool__spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 16px;
}
.formular-pool__content {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Filters */
.formular-pool__filters {
display: flex;
flex-direction: column;
gap: 12px;
}
.formular-pool__filter-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.formular-pool__search {
position: relative;
flex: 1;
min-width: 200px;
max-width: 300px;
}
.formular-pool__search i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 14px;
}
.formular-pool__search input {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
}
.formular-pool__search input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.formular-pool__filter-select {
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
background: white;
min-width: 150px;
}
.formular-pool__filter-select:focus {
outline: none;
border-color: #2563eb;
}
.formular-pool__reset-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #6b7280;
cursor: pointer;
}
.formular-pool__reset-btn:hover {
background: #e5e7eb;
color: #374151;
}
/* Selection Bar */
.formular-pool__selection-bar {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 8px;
}
.formular-pool__selection-bar span {
font-size: 14px;
font-weight: 500;
color: #1e40af;
}
.formular-pool__selection-bar button {
padding: 6px 12px;
background: white;
border: 1px solid #bfdbfe;
border-radius: 6px;
font-size: 13px;
color: #374151;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
}
.formular-pool__selection-bar button:hover {
background: #f9fafb;
}
.formular-pool__merge-btn {
background: #2563eb !important;
color: white !important;
border: none !important;
font-weight: 500;
}
.formular-pool__merge-btn:hover {
background: #1d4ed8 !important;
}
/* Empty State */
.formular-pool__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
background: #f9fafb;
border: 2px dashed #e5e7eb;
border-radius: 12px;
text-align: center;
}
.formular-pool__empty i {
font-size: 48px;
color: #d1d5db;
margin-bottom: 16px;
}
.formular-pool__empty p {
font-size: 16px;
color: #6b7280;
margin: 0;
}
/* Table */
.formular-pool__table-wrapper {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
}
.formular-pool__table {
width: 100%;
border-collapse: collapse;
}
.formular-pool__table th {
padding: 12px 16px;
background: #f9fafb;
text-align: left;
font-size: 12px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #e5e7eb;
}
.formular-pool__table th.formular-pool__th--checkbox {
width: 48px;
text-align: center;
}
.formular-pool__table th.formular-pool__th--actions {
width: 60px;
text-align: center;
}
.formular-pool__table td {
padding: 12px 16px;
font-size: 14px;
color: #374151;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
}
.formular-pool__table tbody tr:hover {
background: #f9fafb;
}
.formular-pool__table tbody tr:last-child td {
border-bottom: none;
}
.formular-pool__row--selected {
background: #eff6ff !important;
}
.formular-pool__row--processed {
opacity: 0.6;
}
.formular-pool__template-name {
font-weight: 500;
color: #111827;
}
.formular-pool__preview {
color: #6b7280;
font-size: 13px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.formular-pool__status {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.formular-pool__status.status--draft {
background: #f3f4f6;
color: #6b7280;
}
.formular-pool__status.status--submitted {
background: #dbeafe;
color: #1e40af;
}
.formular-pool__status.status--processed {
background: #dcfce7;
color: #166534;
}
.formular-pool__table td button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
color: #6b7280;
cursor: pointer;
margin: 0 auto;
}
.formular-pool__table td button:hover {
background: #f3f4f6;
color: #374151;
}
/* Pagination */
.formular-pool__pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
}
.formular-pool__pagination button {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #6b7280;
cursor: pointer;
}
.formular-pool__pagination button:hover:not(:disabled) {
background: #f9fafb;
color: #374151;
}
.formular-pool__pagination button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.formular-pool__page-info {
padding: 0 16px;
font-size: 14px;
color: #6b7280;
}
/* Modal */
.formular-pool__modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 24px;
}
.formular-pool__modal {
background: white;
border-radius: 12px;
width: 100%;
max-width: 600px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.formular-pool__modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid #e5e7eb;
}
.formular-pool__modal-header h3 {
font-size: 18px;
font-weight: 600;
color: var(--heading-color, #111827);
margin: 0;
}
.formular-pool__modal-header button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
border-radius: 8px;
}
.formular-pool__modal-header button:hover {
background: #f3f4f6;
color: #374151;
}
.formular-pool__modal-body {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.formular-pool__modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
}
.formular-pool__modal-footer .btn-close {
padding: 10px 20px;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.formular-pool__modal-footer .btn-select {
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
/* Entry Meta */
.formular-pool__entry-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #e5e7eb;
}
.formular-pool__entry-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.formular-pool__entry-meta-item strong {
font-size: 12px;
font-weight: 500;
color: #6b7280;
}
.formular-pool__entry-meta-item span {
font-size: 14px;
color: #111827;
}
/* Entry Answers */
.formular-pool__entry-answers h4 {
font-size: 14px;
font-weight: 600;
color: #374151;
margin: 0 0 16px 0;
}
.formular-pool__answer-item {
margin-bottom: 16px;
}
.formular-pool__answer-item label {
display: block;
font-size: 13px;
font-weight: 500;
color: #6b7280;
margin-bottom: 4px;
}
.formular-pool__answer-value {
font-size: 14px;
color: #111827;
padding: 10px 12px;
background: #f9fafb;
border-radius: 6px;
}
.formular-pool__raw-payload {
background: #f9fafb;
padding: 16px;
border-radius: 8px;
overflow-x: auto;
}
.formular-pool__raw-payload pre {
margin: 0;
font-size: 12px;
font-family: monospace;
color: #374151;
}
/* ============================================================================
Formular Entry Editor
============================================================================ */
.formular-entry-editor {
max-width: 640px;
margin: 0 auto;
padding: 40px 24px 24px 24px; /* Größerer oberer Abstand zum Topmenü */
}
.formular-entry-editor__loading,
.formular-entry-editor__error,
.formular-entry-editor__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
text-align: center;
}
.formular-entry-editor__spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 16px;
}
.formular-entry-editor__error {
background: #fee2e2;
color: #991b1b;
border-radius: 8px;
}
.formular-entry-editor__empty i {
font-size: 48px;
color: #d1d5db;
margin-bottom: 16px;
}
.formular-entry-editor__form {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
}
.formular-entry-editor__header {
padding: 24px;
border-bottom: 1px solid #e5e7eb;
}
.formular-entry-editor__header h3 {
font-size: 20px;
font-weight: 600;
color: var(--heading-color, #111827);
margin: 0 0 8px 0;
}
.formular-entry-editor__desc {
font-size: 14px;
color: #6b7280;
margin: 0;
}
.formular-entry-editor__field {
padding: 0 24px;
margin: 24px 0;
}
.formular-entry-editor__field label {
display: block;
font-size: 14px;
font-weight: 500;
color: #374151;
margin-bottom: 8px;
}
.formular-entry-editor__field label.required {
font-weight: 600;
}
.formular-entry-editor__field .required-mark {
color: #dc2626;
margin-left: 2px;
}
.formular-entry-editor__field input[type="text"],
.formular-entry-editor__field input[type="number"],
.formular-entry-editor__field input[type="date"],
.formular-entry-editor__field select,
.formular-entry-editor__field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
transition: all 150ms ease;
}
.formular-entry-editor__field input:focus,
.formular-entry-editor__field select:focus,
.formular-entry-editor__field textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.formular-entry-editor__field input.error,
.formular-entry-editor__field select.error,
.formular-entry-editor__field textarea.error {
border-color: #dc2626;
}
.formular-entry-editor__error-text {
display: block;
font-size: 12px;
color: #dc2626;
margin-top: 4px;
}
.formular-entry-editor__multiselect,
.formular-entry-editor__radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.formular-entry-editor__checkbox-label,
.formular-entry-editor__radio-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #374151;
cursor: pointer;
padding: 8px 12px;
background: #f9fafb;
border-radius: 6px;
}
.formular-entry-editor__checkbox-label:hover,
.formular-entry-editor__radio-label:hover {
background: #f3f4f6;
}
.formular-entry-editor__checkbox-single {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #374151;
cursor: pointer;
}
.formular-entry-editor__file {
padding: 24px;
background: #f9fafb;
border: 2px dashed #e5e7eb;
border-radius: 8px;
text-align: center;
}
.formular-entry-editor__file-hint {
font-size: 12px;
color: #6b7280;
margin: 8px 0 0 0;
}
.formular-entry-editor__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 24px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
.formular-entry-editor__actions .btn-cancel {
padding: 10px 20px;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.formular-entry-editor__actions .btn-draft {
padding: 10px 20px;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.formular-entry-editor__actions .btn-submit {
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.formular-entry-editor__actions .btn-submit:hover {
background: #1d4ed8;
}
.formular-entry-editor__actions button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================================================
Formular to 3M Wizard
============================================================================ */
.formular-to-3m {
max-width: 800px;
margin: 0 auto;
padding: 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.formular-to-3m__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 24px;
}
.formular-to-3m__header h2 {
font-size: 20px;
font-weight: 600;
color: var(--heading-color, #111827);
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.formular-to-3m__header h2 i {
color: #2563eb;
}
.formular-to-3m__close {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
border-radius: 8px;
}
.formular-to-3m__close:hover {
background: #f3f4f6;
color: #374151;
}
/* Progress Steps */
.formular-to-3m__progress {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 32px;
}
.formular-to-3m__step {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #f3f4f6;
border-radius: 20px;
cursor: pointer;
transition: all 150ms ease;
}
.formular-to-3m__step--active {
background: #dbeafe;
}
.formular-to-3m__step--completed {
background: #dcfce7;
}
.formular-to-3m__step-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
color: #6b7280;
}
.formular-to-3m__step--active .formular-to-3m__step-number {
background: #2563eb;
color: white;
}
.formular-to-3m__step--completed .formular-to-3m__step-number {
background: #16a34a;
color: white;
}
.formular-to-3m__step-label {
font-size: 13px;
font-weight: 500;
color: #6b7280;
}
.formular-to-3m__step--active .formular-to-3m__step-label {
color: #1e40af;
}
.formular-to-3m__step--completed .formular-to-3m__step-label {
color: #166534;
}
/* Error */
.formular-to-3m__error {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #fee2e2;
color: #991b1b;
border-radius: 8px;
margin-bottom: 24px;
}
/* Content */
.formular-to-3m__content {
min-height: 300px;
}
.formular-to-3m__content h3 {
font-size: 16px;
font-weight: 600;
color: #374151;
margin: 0 0 16px 0;
}
/* Empty */
.formular-to-3m__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px;
background: #f9fafb;
border: 2px dashed #e5e7eb;
border-radius: 8px;
text-align: center;
}
.formular-to-3m__empty i {
font-size: 48px;
color: #d1d5db;
margin-bottom: 16px;
}
.formular-to-3m__empty p {
font-size: 14px;
color: #6b7280;
margin: 0 0 8px 0;
}
/* Entries List */
.formular-to-3m__entries-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.formular-to-3m__entry-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.formular-to-3m__entry-content {
flex: 1;
min-width: 0;
}
.formular-to-3m__entry-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.formular-to-3m__entry-id {
font-size: 11px;
font-weight: 600;
color: #6b7280;
font-family: monospace;
}
.formular-to-3m__entry-template {
font-size: 12px;
color: #9ca3af;
}
.formular-to-3m__entry-preview {
font-size: 14px;
color: #374151;
margin-bottom: 8px;
}
.formular-to-3m__entry-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 12px;
color: #9ca3af;
}
.formular-to-3m__entry-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.formular-to-3m__entry-remove {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
color: #9ca3af;
cursor: pointer;
}
.formular-to-3m__entry-remove:hover {
background: #fee2e2;
border-color: #fecaca;
color: #dc2626;
}
/* Summary */
.formular-to-3m__summary {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
}
.formular-to-3m__summary h4 {
font-size: 13px;
font-weight: 600;
color: #6b7280;
margin: 0 0 12px 0;
}
.formular-to-3m__summary-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.formular-to-3m__summary-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #f3f4f6;
border-radius: 6px;
}
.formular-to-3m__summary-name {
font-size: 13px;
color: #374151;
}
.formular-to-3m__summary-count {
font-size: 12px;
font-weight: 600;
color: #2563eb;
background: #dbeafe;
padding: 2px 8px;
border-radius: 10px;
}
/* Type Selection */
.formular-to-3m__type-selection {
margin-bottom: 24px;
}
.formular-to-3m__type-selection label {
display: block;
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 12px;
}
.formular-to-3m__type-options {
display: flex;
gap: 12px;
}
.formular-to-3m__type-option {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
background: white;
border: 2px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
transition: all 150ms ease;
}
.formular-to-3m__type-option:hover {
border-color: #d1d5db;
}
.formular-to-3m__type-option.active {
border-color: var(--type-color, #2563eb);
background: color-mix(in srgb, var(--type-color, #2563eb) 5%, white);
}
.formular-to-3m__type-option i {
font-size: 24px;
color: var(--type-color, #6b7280);
}
.formular-to-3m__type-option span {
font-size: 13px;
font-weight: 500;
color: #374151;
}
/* Form Fields */
.formular-to-3m__field {
margin-bottom: 20px;
}
.formular-to-3m__field label {
display: block;
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 6px;
}
.formular-to-3m__field input,
.formular-to-3m__field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
}
.formular-to-3m__field input:focus,
.formular-to-3m__field textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Review */
.formular-to-3m__review {
display: flex;
flex-direction: column;
gap: 24px;
}
.formular-to-3m__review-section h4 {
font-size: 13px;
font-weight: 600;
color: #6b7280;
margin: 0 0 12px 0;
}
.formular-to-3m__review-card {
display: flex;
gap: 16px;
padding: 16px;
background: color-mix(in srgb, var(--type-color, #2563eb) 5%, white);
border: 1px solid color-mix(in srgb, var(--type-color, #2563eb) 20%, white);
border-radius: 10px;
}
.formular-to-3m__review-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 10px;
font-size: 20px;
color: var(--type-color, #2563eb);
}
.formular-to-3m__review-details {
flex: 1;
}
.formular-to-3m__review-type {
font-size: 11px;
font-weight: 600;
color: var(--type-color, #2563eb);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.formular-to-3m__review-details h5 {
font-size: 16px;
font-weight: 600;
color: #111827;
margin: 4px 0 8px 0;
}
.formular-to-3m__review-details p {
font-size: 14px;
color: #6b7280;
margin: 0;
}
.formular-to-3m__review-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.formular-to-3m__tag {
font-size: 11px;
padding: 4px 8px;
background: #e5e7eb;
color: #374151;
border-radius: 4px;
}
.formular-to-3m__review-entries {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.formular-to-3m__review-entries li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: #f9fafb;
border-radius: 6px;
font-size: 13px;
color: #374151;
}
.formular-to-3m__review-entry-id {
font-family: monospace;
font-size: 11px;
color: #6b7280;
}
/* Success */
.formular-to-3m__success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px;
text-align: center;
}
.formular-to-3m__success-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: #dcfce7;
border-radius: 50%;
margin-bottom: 24px;
}
.formular-to-3m__success-icon i {
font-size: 40px;
color: #16a34a;
}
.formular-to-3m__success h3 {
font-size: 20px;
font-weight: 600;
color: #111827;
margin: 0 0 8px 0;
}
.formular-to-3m__success p {
font-size: 14px;
color: #6b7280;
margin: 0 0 24px 0;
}
.formular-to-3m__success-actions {
display: flex;
gap: 12px;
}
.formular-to-3m__success-actions .btn-secondary {
padding: 10px 20px;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.formular-to-3m__success-actions .btn-primary {
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
/* Footer */
.formular-to-3m__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
margin-top: 24px;
}
.formular-to-3m__footer .btn-cancel {
padding: 10px 20px;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.formular-to-3m__footer .btn-next,
.formular-to-3m__footer .btn-submit {
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.formular-to-3m__footer .btn-next:hover,
.formular-to-3m__footer .btn-submit:hover {
background: #1d4ed8;
}
.formular-to-3m__footer button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================================================
Request Decision Admin
============================================================================ */
.request-decision-admin {
padding: 40px 24px 24px 24px; /* Größerer oberer Abstand zum Topmenü */
max-width: 1200px;
margin: 0 auto;
}
.request-decision-admin__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.request-decision-admin__title h2 {
font-size: 24px;
font-weight: 700;
color: var(--heading-color, #111827);
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 12px;
}
.request-decision-admin__title h2 i {
color: #f59e0b;
}
.request-decision-admin__subtitle {
font-size: 14px;
color: #6b7280;
margin: 0;
}
.request-decision-admin__stats {
display: flex;
gap: 12px;
}
.request-decision-admin__stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 20px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 10px;
min-width: 80px;
}
.request-decision-admin__stat-value {
font-size: 24px;
font-weight: 700;
color: #111827;
}
.request-decision-admin__stat-label {
font-size: 12px;
color: #6b7280;
}
.request-decision-admin__stat--pending {
border-color: #fde68a;
background: #fefce8;
}
.request-decision-admin__stat--pending .request-decision-admin__stat-value {
color: #d97706;
}
.request-decision-admin__stat--approved {
border-color: #bbf7d0;
background: #f0fdf4;
}
.request-decision-admin__stat--approved .request-decision-admin__stat-value {
color: #16a34a;
}
.request-decision-admin__stat--rejected {
border-color: #fecaca;
background: #fef2f2;
}
.request-decision-admin__stat--rejected .request-decision-admin__stat-value {
color: #dc2626;
}
.request-decision-admin__error {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #fee2e2;
color: #991b1b;
border-radius: 8px;
margin-bottom: 24px;
}
.request-decision-admin__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px;
color: #6b7280;
}
.request-decision-admin__spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #f59e0b;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 16px;
}
.request-decision-admin__content {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Filters */
.request-decision-admin__filters {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.request-decision-admin__search {
position: relative;
flex: 1;
min-width: 200px;
max-width: 300px;
}
.request-decision-admin__search i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 14px;
}
.request-decision-admin__search input {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
}
.request-decision-admin__search input:focus {
outline: none;
border-color: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.request-decision-admin__filter-buttons {
display: flex;
gap: 4px;
background: #f3f4f6;
padding: 4px;
border-radius: 8px;
}
.request-decision-admin__filter-buttons button {
padding: 8px 16px;
background: transparent;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #6b7280;
cursor: pointer;
transition: all 150ms ease;
}
.request-decision-admin__filter-buttons button.active {
background: white;
color: #111827;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Empty State */
.request-decision-admin__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
background: #f9fafb;
border: 2px dashed #e5e7eb;
border-radius: 12px;
text-align: center;
}
.request-decision-admin__empty i {
font-size: 48px;
color: #16a34a;
margin-bottom: 16px;
}
.request-decision-admin__empty p {
font-size: 16px;
color: #6b7280;
margin: 0;
}
/* Decision List */
.request-decision-admin__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.request-decision-admin__card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: all 150ms ease;
}
.request-decision-admin__card:hover {
border-color: #d1d5db;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.request-decision-admin__card--pending {
border-left: 4px solid #f59e0b;
}
.request-decision-admin__card--approved {
border-left: 4px solid #16a34a;
}
.request-decision-admin__card--rejected {
border-left: 4px solid #dc2626;
}
.request-decision-admin__card-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
border-radius: 10px;
font-size: 20px;
flex-shrink: 0;
}
.request-decision-admin__card-content {
flex: 1;
min-width: 0;
}
.request-decision-admin__card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
.request-decision-admin__card-id {
font-size: 12px;
font-weight: 600;
color: #6b7280;
font-family: monospace;
}
.request-decision-admin__card-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
color: white;
}
.request-decision-admin__card-title {
font-size: 16px;
font-weight: 600;
color: #111827;
margin: 0 0 4px 0;
}
.request-decision-admin__card-desc {
font-size: 14px;
color: #6b7280;
margin: 0 0 8px 0;
}
.request-decision-admin__card-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
color: #9ca3af;
}
.request-decision-admin__card-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.request-decision-admin__card-action {
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
flex-shrink: 0;
}
/* Modal */
.request-decision-admin__modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 24px;
}
.request-decision-admin__modal {
background: white;
border-radius: 12px;
width: 100%;
max-width: 600px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.request-decision-admin__modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e5e7eb;
}
.request-decision-admin__modal-title {
flex: 1;
}
.request-decision-admin__modal-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
color: white;
margin-bottom: 8px;
}
.request-decision-admin__modal-title h3 {
font-size: 18px;
font-weight: 600;
color: var(--heading-color, #111827);
margin: 0;
}
.request-decision-admin__modal-header > button {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
border-radius: 8px;
}
.request-decision-admin__modal-header > button:hover {
background: #f3f4f6;
color: #374151;
}
.request-decision-admin__modal-body {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.request-decision-admin__modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
}
.request-decision-admin__modal-footer .btn-secondary {
padding: 10px 20px;
background: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.request-decision-admin__modal-footer .btn-close {
padding: 10px 20px;
background: #f3f4f6;
color: #374151;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
/* Detail Meta */
.request-decision-admin__detail-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.request-decision-admin__detail-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.request-decision-admin__detail-item label {
font-size: 12px;
font-weight: 500;
color: #6b7280;
}
.request-decision-admin__detail-item span {
font-size: 14px;
color: #111827;
display: flex;
align-items: center;
gap: 6px;
}
/* Description */
.request-decision-admin__detail-description {
margin-bottom: 24px;
}
.request-decision-admin__detail-description h4 {
font-size: 13px;
font-weight: 600;
color: #6b7280;
margin: 0 0 8px 0;
}
.request-decision-admin__detail-description p {
font-size: 14px;
color: #374151;
margin: 0;
padding: 12px;
background: #f9fafb;
border-radius: 8px;
}
/* Decision Actions */
.request-decision-admin__decision-actions {
background: #fefce8;
border: 1px solid #fde68a;
border-radius: 10px;
padding: 20px;
}
.request-decision-admin__decision-actions h4 {
font-size: 14px;
font-weight: 600;
color: #92400e;
margin: 0 0 16px 0;
}
.request-decision-admin__decision-notes {
margin-bottom: 16px;
}
.request-decision-admin__decision-notes label {
display: block;
font-size: 13px;
font-weight: 500;
color: #374151;
margin-bottom: 6px;
}
.request-decision-admin__decision-notes textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
resize: vertical;
}
.request-decision-admin__decision-notes textarea:focus {
outline: none;
border-color: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.request-decision-admin__decision-buttons {
display: flex;
gap: 12px;
}
.request-decision-admin__decision-buttons .btn-reject {
flex: 1;
padding: 12px 20px;
background: white;
color: #dc2626;
border: 1px solid #fecaca;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.request-decision-admin__decision-buttons .btn-reject:hover {
background: #fee2e2;
}
.request-decision-admin__decision-buttons .btn-approve {
flex: 1;
padding: 12px 20px;
background: #16a34a;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.request-decision-admin__decision-buttons .btn-approve:hover {
background: #15803d;
}
.request-decision-admin__decision-buttons button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Decision Result */
.request-decision-admin__decision-result {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 16px;
}
.request-decision-admin__decision-result h4 {
font-size: 13px;
font-weight: 600;
color: #6b7280;
margin: 0 0 12px 0;
}
.request-decision-admin__result-info {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: #374151;
}
/* Responsive */
@media (max-width: 768px) {
.formular-admin,
.formular-pool,
.formular-entry-editor,
.request-decision-admin {
padding: 32px 16px 16px 16px; /* Größerer oberer Abstand auch mobil */
}
.formular-admin__header,
.formular-pool__header,
.request-decision-admin__header {
flex-direction: column;
align-items: stretch;
}
.formular-pool__stats,
.request-decision-admin__stats {
justify-content: center;
}
.formular-pool__filter-row {
flex-direction: column;
}
.formular-pool__search,
.request-decision-admin__search {
max-width: none;
width: 100%;
}
.formular-pool__filter-select {
width: 100%;
}
.formular-pool__table-wrapper {
overflow-x: auto;
}
.formular-to-3m__type-options {
flex-direction: column;
}
.request-decision-admin__detail-meta {
grid-template-columns: 1fr;
}
}
/* ============================================================================
FORMULAR-TO-3M WIZARD (f3m-*)
Modal-basierter Wizard für 3M-Element-Erstellung aus Formular-Einträgen
============================================================================ */
.f3m-wizard {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
min-height: 0;
background: #fff;
overflow: hidden;
}
/* Fullscreen modal anpassung */
.pm-modal__box--fullscreen .f3m-wizard {
border-radius: 0;
}
/* Header */
.f3m-header {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: #fff;
flex-shrink: 0;
}
.f3m-header__title {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
flex: 1;
}
.f3m-header__stats {
display: flex;
gap: 16px;
}
.f3m-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
opacity: 0.9;
}
.f3m-close {
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
padding: 6px;
opacity: 0.8;
}
.f3m-close:hover { opacity: 1; }
/* Error */
.f3m-error {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: #fef2f2;
color: #dc2626;
font-size: 13px;
}
.f3m-error button {
margin-left: auto;
background: none;
border: none;
color: #dc2626;
cursor: pointer;
}
/* Success */
.f3m-success {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
text-align: center;
}
.f3m-success__icon {
font-size: 56px;
color: #10b981;
margin-bottom: 16px;
}
.f3m-success h3 {
font-size: 22px;
color: #1f2937;
margin: 0 0 10px 0;
}
.f3m-success p {
color: #6b7280;
margin: 0 0 6px 0;
}
.f3m-success__id {
font-family: monospace;
background: #f3f4f6;
padding: 6px 12px;
border-radius: 6px;
margin-top: 6px;
}
.f3m-success__actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
/* 3-Column Split View (mit KI-Chat) */
.f3m-splitview {
flex: 1 1 auto;
display: grid;
grid-template-columns: 320px 1fr 400px;
min-height: 0;
overflow: hidden;
}
/* 2-Column Split View (ohne KI-Chat) - 50/50 Layout */
.f3m-splitview--no-ai {
grid-template-columns: 1fr 1fr;
}
.f3m-splitview--no-ai .f3m-sources {
border-right: 1px solid #e5e7eb;
}
.f3m-splitview--no-ai .f3m-editor {
overflow-y: auto;
}
/* Sources Panel (Left) */
.f3m-sources {
display: flex;
flex-direction: column;
border-right: 1px solid #e5e7eb;
background: #f9fafb;
min-width: 0;
}
.f3m-sources__header {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
background: #fff;
}
.f3m-sources__header h3 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
.f3m-sources__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
color: #9ca3af;
font-size: 13px;
}
.f3m-sources__empty i {
font-size: 32px;
margin-bottom: 10px;
}
.f3m-sources__list {
flex: 1;
overflow-y: auto;
padding: 10px;
}
/* Section headers for edit mode */
.f3m-sources__section {
margin-bottom: 16px;
}
.f3m-sources__section-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f3f4f6;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #4b5563;
margin: 8px 10px;
}
.f3m-sources__section-header i {
color: #6b7280;
}
/* Linked entry style (already assigned) */
.f3m-entry--linked {
background: #f0fdf4;
border-color: #86efac;
}
.f3m-entry--linked .f3m-entry__header {
padding: 10px;
cursor: pointer;
}
.f3m-entry--linked.f3m-entry--expanded {
border-color: #22c55e;
}
.f3m-entry__preview {
padding: 0 10px 10px;
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
/* Linked Paragraphs Display */
.f3m-linked-paragraphs {
margin: 12px 0;
padding: 12px;
background: #ecfdf5;
border-radius: 6px;
border: 1px solid #a7f3d0;
}
.f3m-linked-paragraphs__title {
font-weight: 600;
color: #065f46;
margin-bottom: 8px;
font-size: 12px;
}
.f3m-linked-paragraph {
display: flex;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid #d1fae5;
font-size: 12px;
}
.f3m-linked-paragraph:last-child {
border-bottom: none;
}
.f3m-linked-paragraph__index {
flex-shrink: 0;
background: #10b981;
color: white;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
font-size: 11px;
}
.f3m-linked-paragraph__text {
color: #374151;
line-height: 1.4;
}
/* Splitfield Badge */
.f3m-field__splitfield-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 2px 6px;
background: #dbeafe;
color: #1e40af;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
}
/* Entry Card */
.f3m-entry {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
margin-bottom: 6px;
overflow: hidden;
font-size: 12px;
}
.f3m-entry--expanded {
border-color: #3b82f6;
}
.f3m-entry--split {
border-color: #f59e0b;
}
.f3m-entry__split-warning {
background: #fef3c7;
color: #92400e;
padding: 4px 10px;
font-size: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.f3m-entry__header {
display: flex;
align-items: center;
padding: 8px 10px;
cursor: pointer;
}
.f3m-entry__header:hover {
background: #f9fafb;
}
.f3m-entry__info {
flex: 1;
min-width: 0;
}
.f3m-entry__id {
font-weight: 600;
color: #3b82f6;
font-size: 11px;
margin-right: 6px;
}
.f3m-entry__org {
color: #374151;
font-size: 11px;
}
.f3m-entry__actions {
display: flex;
gap: 2px;
}
.f3m-entry__toggle,
.f3m-entry__remove {
background: none;
border: none;
padding: 4px;
color: #9ca3af;
cursor: pointer;
font-size: 11px;
}
.f3m-entry__toggle:hover,
.f3m-entry__remove:hover {
color: #374151;
}
.f3m-entry__body {
padding: 0 10px 10px 10px;
border-top: 1px solid #e5e7eb;
}
.f3m-entry__meta {
display: flex;
gap: 12px;
font-size: 10px;
color: #6b7280;
padding: 6px 0;
}
.f3m-entry__meta i {
margin-right: 3px;
}
.f3m-entry__fields {
display: flex;
flex-direction: column;
gap: 6px;
}
.f3m-field {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px;
padding: 6px;
background: #f9fafb;
border-radius: 4px;
}
.f3m-field__label {
font-size: 9px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
grid-column: 1 / -1;
}
.f3m-field__value {
font-size: 11px;
color: #1f2937;
line-height: 1.3;
white-space: pre-wrap;
word-break: break-word;
}
.f3m-field__copy {
background: none;
border: none;
color: #3b82f6;
cursor: pointer;
padding: 2px 4px;
font-size: 10px;
opacity: 0.7;
align-self: start;
}
.f3m-field__copy:hover {
opacity: 1;
}
/* Paragraph Selector (Splitfield) */
.f3m-paragraphs {
margin-top: 12px;
border-top: 1px solid #e5e7eb;
padding-top: 12px;
}
.f3m-paragraphs__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.f3m-paragraphs__title {
font-size: 12px;
font-weight: 600;
color: #374151;
}
.f3m-paragraphs__title i {
margin-right: 4px;
color: #6b7280;
}
.f3m-paragraphs__stats {
font-size: 11px;
color: #6b7280;
flex: 1;
}
/* Rich-Text-Anzeige: Listen-Einzug, Tabellen (Formular-Entries, Chunks) */
.f3m-richtext-content {
font-size: 12px;
color: #374151;
line-height: 1.6;
}
.f3m-richtext-content ul,
.f3m-richtext-content ol {
padding-left: 1.5em;
margin: 0.35em 0;
}
.f3m-richtext-content li {
margin-left: 0;
margin-bottom: 0.15em;
}
.f3m-richtext-content table {
border-collapse: collapse;
width: 100%;
margin: 0.5em 0;
font-size: 12px;
}
.f3m-richtext-content th,
.f3m-richtext-content td {
border: 1px solid #e5e7eb;
padding: 6px 10px;
text-align: left;
vertical-align: top;
}
.f3m-richtext-content th {
background: #f9fafb;
font-weight: 600;
color: #374151;
}
.f3m-richtext-content h1 { font-size: 1.25em; margin: 0.5em 0 0.25em; font-weight: 700; }
.f3m-richtext-content h2 { font-size: 1.15em; margin: 0.45em 0 0.2em; font-weight: 600; }
.f3m-richtext-content h3 { font-size: 1.05em; margin: 0.4em 0 0.2em; font-weight: 600; }
.f3m-richtext-content p { margin: 0.35em 0; }
.f3m-richtext-content blockquote {
margin: 0.5em 0;
padding-left: 1em;
border-left: 3px solid #d1d5db;
color: #6b7280;
}
.f3m-paragraphs__list {
display: flex;
flex-direction: column;
gap: 6px;
}
.f3m-para {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: #f9fafb;
border-radius: 6px;
border: 1px solid transparent;
transition: all 0.15s ease;
}
.f3m-para:hover {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.3);
}
.f3m-para--assigned {
background: rgba(34, 197, 94, 0.1);
border-left: 3px solid #22c55e;
}
.f3m-para--ignored {
background: #f3f4f6;
opacity: 0.6;
}
.f3m-para--ignored .f3m-para__text {
text-decoration: line-through;
color: #9ca3af;
}
.f3m-para__text {
flex: 1;
font-size: 12px;
line-height: 1.5;
color: #374151;
white-space: pre-wrap;
}
.f3m-para__actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.f3m-para__btn {
width: 26px;
height: 26px;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: all 0.15s ease;
}
.f3m-para__btn--assign {
background: #dcfce7;
color: #16a34a;
}
.f3m-para__btn--assign:hover {
background: #22c55e;
color: white;
}
.f3m-para__btn--assign.f3m-para__btn--active {
background: #22c55e;
color: white;
}
.f3m-para__btn--unassign {
background: #fee2e2;
color: #dc2626;
}
.f3m-para__btn--unassign:hover:not(:disabled) {
background: #ef4444;
color: white;
}
.f3m-para__btn--unassign:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.f3m-para__btn--ignore {
background: #f3f4f6;
color: #6b7280;
}
.f3m-para__btn--ignore:hover {
background: #9ca3af;
color: white;
}
.f3m-para__btn--ignore.f3m-para__btn--active {
background: #9ca3af;
color: white;
}
.f3m-para__btn--copy {
background: #dbeafe;
color: #2563eb;
}
.f3m-para__btn--copy:hover {
background: #2563eb;
color: white;
}
/* Split Parts */
.f3m-split-parts {
padding: 8px 0;
}
.f3m-split-parts__title {
font-size: 10px;
font-weight: 600;
color: #92400e;
margin-bottom: 6px;
}
.f3m-split-part {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 6px;
background: #fffbeb;
border-radius: 4px;
margin-bottom: 4px;
cursor: pointer;
font-size: 11px;
}
.f3m-split-part input {
margin-top: 2px;
}
.f3m-split-part__theme {
font-weight: 600;
color: #92400e;
}
.f3m-split-part__text {
color: #374151;
}
/* Chat Panel (Middle) */
.f3m-chat {
display: flex;
flex-direction: column;
border-right: 1px solid #e5e7eb;
background: #fff;
min-width: 0;
}
.f3m-chat__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: #fff;
}
.f3m-chat__header h3 {
margin: 0;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.f3m-chat__clear {
background: none;
border: none;
color: rgba(255,255,255,0.7);
cursor: pointer;
padding: 4px;
font-size: 12px;
}
.f3m-chat__clear:hover {
color: #fff;
}
.f3m-chat__error, .f3m-chat__no-webhook {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
font-size: 12px;
}
.f3m-chat__error {
background: #fef2f2;
color: #dc2626;
}
.f3m-chat__error button {
margin-left: auto;
background: none;
border: none;
color: #dc2626;
cursor: pointer;
}
.f3m-chat__no-webhook {
background: #fef3c7;
color: #92400e;
}
.f3m-chat__no-webhook code {
background: rgba(0,0,0,0.1);
padding: 2px 4px;
border-radius: 3px;
font-size: 11px;
}
/* Quick Actions */
.f3m-chat__quick {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.f3m-chat__quick-label {
font-size: 11px;
color: #6b7280;
width: 100%;
}
.f3m-quick-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 11px;
color: #374151;
cursor: pointer;
transition: all 0.15s;
}
.f3m-quick-btn:hover:not(:disabled) {
background: #e5e7eb;
border-color: #d1d5db;
}
.f3m-quick-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Chat Messages */
.f3m-chat__messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.f3m-chat__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #9ca3af;
padding: 20px;
}
.f3m-chat__empty i {
font-size: 40px;
margin-bottom: 12px;
color: #d1d5db;
}
.f3m-chat__empty p {
margin: 0;
font-size: 13px;
}
.f3m-chat__hint {
font-size: 11px !important;
margin-top: 6px !important;
}
/* Messages */
.f3m-message {
display: flex;
gap: 10px;
max-width: 90%;
}
.f3m-message--user {
align-self: flex-end;
flex-direction: row-reverse;
}
.f3m-message--assistant {
align-self: flex-start;
}
.f3m-message__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.f3m-message--user .f3m-message__avatar {
background: #3b82f6;
color: #fff;
}
.f3m-message--assistant .f3m-message__avatar {
background: #8b5cf6;
color: #fff;
}
.f3m-message__content {
background: #f3f4f6;
padding: 10px 14px;
border-radius: 12px;
max-width: 100%;
}
.f3m-message--user .f3m-message__content {
background: #3b82f6;
color: #fff;
border-bottom-right-radius: 4px;
}
.f3m-message--assistant .f3m-message__content {
border-bottom-left-radius: 4px;
}
.f3m-message__text {
font-size: 13px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.f3m-message__actions {
display: flex;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e5e7eb;
}
.f3m-message__actions button {
background: none;
border: none;
color: #6b7280;
cursor: pointer;
padding: 4px 8px;
font-size: 12px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.f3m-message__actions button:hover {
background: #e5e7eb;
color: #374151;
}
/* Typing indicator */
.f3m-message--loading .f3m-message__content {
padding: 12px 18px;
}
.f3m-typing {
display: flex;
gap: 4px;
}
.f3m-typing span {
width: 8px;
height: 8px;
background: #9ca3af;
border-radius: 50%;
animation: f3m-typing 1.4s infinite;
}
.f3m-typing span:nth-child(2) { animation-delay: 0.2s; }
.f3m-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes f3m-typing {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-4px); }
}
/* Chat Input */
.f3m-chat__input {
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
.f3m-chat__input textarea {
flex: 1;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 13px;
resize: none;
font-family: inherit;
}
.f3m-chat__input textarea:focus {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.f3m-chat__input textarea:disabled {
background: #f3f4f6;
cursor: not-allowed;
}
.f3m-chat__input button {
width: 44px;
height: 44px;
background: #8b5cf6;
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background 0.2s;
}
.f3m-chat__input button:hover:not(:disabled) {
background: #7c3aed;
}
.f3m-chat__input button:disabled {
background: #d1d5db;
cursor: not-allowed;
}
/* Transfer Buttons */
.f3m-chat__transfer {
display: flex;
gap: 8px;
padding: 10px 16px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
/* Editor Panel (Right) */
.f3m-editor {
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
background: #fff;
}
/* Manueller Modus Hinweis (ohne KI) */
.f3m-editor__hint {
padding: 12px 16px;
background: #f0f9ff;
border-bottom: 1px solid #bae6fd;
display: flex;
align-items: flex-start;
gap: 10px;
flex-shrink: 0;
}
.f3m-editor__hint i {
color: #0284c7;
margin-top: 2px;
}
.f3m-editor__hint-text {
font-size: 12px;
color: #0369a1;
}
.f3m-editor__hint-text strong {
font-weight: 600;
}
.f3m-editor__header {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
.f3m-editor__header h3 {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #374151;
display: flex;
align-items: center;
gap: 8px;
}
.f3m-editor__form {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Form Groups */
.f3m-form-group {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Hero + Typ Row */
.f3m-form-row {
display: flex;
gap: 16px;
margin-bottom: 8px;
}
.f3m-form-group--hero {
flex: 0 0 140px;
}
.f3m-form-group--type {
flex: 1;
}
.f3m-hero-picker {
display: flex;
flex-direction: column;
gap: 8px;
}
.f3m-hero-preview {
width: 100%;
height: 80px;
border: 2px dashed #d1d5db;
border-radius: 8px;
background-color: #f9fafb;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.f3m-hero-preview i {
font-size: 24px;
color: #9ca3af;
}
.f3m-hero-actions {
display: flex;
gap: 4px;
}
.f3m-type-options--compact {
display: flex;
flex-direction: column;
gap: 4px;
}
.f3m-type-btn--compact {
padding: 6px 10px;
font-size: 12px;
}
.f3m-type-btn--compact i {
font-size: 12px;
}
/* AccessRights */
.f3m-form-group--accessrights {
border-top: 1px solid #e5e7eb;
padding-top: 16px;
margin-top: 8px;
}
.f3m-form-group--accessrights label {
display: flex;
align-items: center;
gap: 6px;
}
.f3m-accessrights-hint {
font-size: 11px;
color: #6b7280;
margin-bottom: 8px;
}
.f3m-accessrights-selector {
max-height: 150px;
overflow-y: auto;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 8px;
background: #f9fafb;
}
.f3m-accessrights-item {
padding: 4px 8px;
border-radius: 4px;
transition: background 0.15s;
}
.f3m-accessrights-item:hover {
background: #e5e7eb;
}
.f3m-accessrights-item--selected {
background: #dbeafe;
}
.f3m-accessrights-item label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 13px;
}
.f3m-accessrights-item input[type="checkbox"] {
width: 14px;
height: 14px;
}
.f3m-accessrights-empty {
font-size: 12px;
color: #9ca3af;
text-align: center;
padding: 12px;
}
.f3m-btn--danger {
color: #dc2626;
}
.f3m-btn--danger:hover {
background: #fef2f2;
}
/* Visibility Buttons (Grün/Rot) */
.f3m-visibility-buttons {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.f3m-visibility-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 16px;
border: 2px solid #d1d5db;
border-radius: 8px;
background: #f9fafb;
color: #6b7280;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.f3m-visibility-btn i {
font-size: 18px;
}
/* Public Button (helles Blau/Slate – offen, neutral) */
.f3m-visibility-btn--public:hover {
border-color: #64748b;
background: #f1f5f9;
color: #475569;
}
.f3m-visibility-btn--public.f3m-visibility-btn--active {
border-color: #64748b;
background: #e2e8f0;
color: #334155;
box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
}
.f3m-visibility-btn--public.f3m-visibility-btn--active i {
color: #475569;
}
/* Restricted Button (Indigo/Blau – geschützt, sicher) */
.f3m-visibility-btn--restricted:hover {
border-color: #6366f1;
background: #eef2ff;
color: #4f46e5;
}
.f3m-visibility-btn--restricted.f3m-visibility-btn--active {
border-color: #6366f1;
background: #e0e7ff;
color: #4338ca;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.f3m-visibility-btn--restricted.f3m-visibility-btn--active i {
color: #4f46e5;
}
/* Entscheidungsstatus (Noch nicht entschieden / Genehmigt / Abgelehnt) */
.f3m-decision-status {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.f3m-decision-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
border: 2px solid #e5e7eb;
background: #fff;
color: #6b7280;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.f3m-decision-btn:hover {
border-color: #d1d5db;
background: #f9fafb;
}
.f3m-decision-btn--pending { border-color: #fcd34d; color: #b45309; background: #fffbeb; }
.f3m-decision-btn--pending:hover { border-color: #f59e0b; background: #fef3c7; }
.f3m-decision-btn--pending.f3m-decision-btn--active { border-color: #d97706; background: #fef3c7; color: #92400e; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2); }
.f3m-decision-btn--approved { border-color: #86efac; color: #166534; background: #f0fdf4; }
.f3m-decision-btn--approved:hover { border-color: #22c55e; background: #dcfce7; }
.f3m-decision-btn--approved.f3m-decision-btn--active { border-color: #16a34a; background: #dcfce7; color: #15803d; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); }
.f3m-decision-btn--rejected { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.f3m-decision-btn--rejected:hover { border-color: #ef4444; background: #fee2e2; }
.f3m-decision-btn--rejected.f3m-decision-btn--active { border-color: #dc2626; background: #fee2e2; color: #b91c1c; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }
.f3m-decision-btn i { font-size: 14px; }
/* Platzhalter "Im Entscheidungsprozess" (taskviewer/taskeditor) */
.f3m-decision-pending {
padding: 16px;
text-align: center;
color: #b45309;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 8px;
font-size: 14px;
}
.f3m-decision-pending i { margin-right: 8px; color: #d97706; }
/* Adminview2: Entscheidungsstatus-Icon in Tabelle */
.f3m-admin-decision-icon { font-size: 16px; }
/* AccessRights Panel (wenn aktiv) — neutral grau, grüner Inhalt wenn ausgewählt */
.f3m-accessrights-panel {
margin-top: 12px;
padding: 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.f3m-accessrights-hint--required {
color: #dc2626;
font-weight: 500;
background: #fef2f2;
padding: 8px 12px;
border-radius: 6px;
margin-bottom: 12px;
}
.f3m-accessrights-hint--required i {
color: #dc2626;
margin-right: 6px;
}
.f3m-accessrights-selector--error {
border-color: #dc2626;
animation: f3m-pulse-error 1s ease-in-out;
}
@keyframes f3m-pulse-error {
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2); }
}
/* Access Tree Header */
.f3m-access-tree-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.f3m-access-tree-count {
font-size: 12px;
font-weight: 500;
color: #0369a1;
}
.f3m-access-tree-actions {
display: flex;
gap: 4px;
}
/* Access Tree Container */
.f3m-access-tree {
max-height: 300px;
overflow-y: auto;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 8px;
}
.f3m-access-tree.part-tree--error {
border-color: #dc2626;
}
.f3m-access-tree .part-tree__row {
display: flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 4px 8px;
border-radius: 6px;
margin: 2px 0;
transition: background 0.15s;
}
.f3m-access-tree .part-tree__row:hover {
background: #f3f4f6;
}
.f3m-access-tree .part-tree__row--selected {
background: #dbeafe;
}
.f3m-access-tree .part-tree__toggle {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: #6b7280;
font-size: 12px;
}
.f3m-access-tree .part-tree__toggle-placeholder {
width: 20px;
}
.f3m-access-tree .part-tree__content {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
cursor: pointer;
}
.f3m-access-tree .part-tree__level-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 20px;
padding: 0 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
background: #e0f2fe;
color: #0369a1;
}
.f3m-access-tree .part-tree__label {
font-size: 13px;
color: #374151;
}
.f3m-access-tree .part-tree__label--selected {
font-weight: 600;
color: #0369a1;
}
.f3m-access-tree .part-tree__buttons {
display: flex;
gap: 6px;
margin-left: auto;
}
.f3m-access-tree .part-tree__buttons button {
font-size: 11px;
padding: 4px 8px;
white-space: nowrap;
}
.f3m-access-tree .part-tree__buttons button i {
margin-right: 4px;
}
.f3m-form-group label {
font-size: 11px;
font-weight: 600;
color: #374151;
}
.f3m-input,
.f3m-textarea {
padding: 8px 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
}
.f3m-input:focus,
.f3m-textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.f3m-textarea {
flex: 1;
min-height: 80px;
resize: vertical;
font-family: inherit;
}
.f3m-textarea--small {
min-height: 50px;
flex: none;
}
/* Type Options */
.f3m-type-options {
display: flex;
gap: 4px;
}
.f3m-type-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
border: 2px solid #e5e7eb;
border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: 10px;
font-weight: 500;
color: #6b7280;
}
.f3m-type-btn i {
font-size: 14px;
}
.f3m-type-btn:hover {
border-color: var(--type-color, #3b82f6);
color: var(--type-color, #3b82f6);
}
.f3m-type-btn--active {
border-color: var(--type-color, #3b82f6);
background: var(--type-color, #3b82f6);
color: #fff;
}
/* Buttons */
.f3m-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
}
.f3m-btn--sm {
padding: 6px 10px;
font-size: 11px;
}
.f3m-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.f3m-btn--primary {
background: #3b82f6;
color: #fff;
}
.f3m-btn--primary:hover:not(:disabled) {
background: #2563eb;
}
.f3m-btn--secondary {
background: #e5e7eb;
color: #374151;
}
.f3m-btn--secondary:hover:not(:disabled) {
background: #d1d5db;
}
.f3m-btn--ghost {
background: transparent;
color: #6b7280;
border: 1px solid #d1d5db;
}
.f3m-btn--ghost:hover:not(:disabled) {
background: #f9fafb;
}
/* Footer */
.f3m-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
flex-shrink: 0;
}
/* Mode Toggle (3M vs Direkte Aufgabe) */
.f3m-mode-toggle {
display: flex;
gap: 4px;
padding: 6px 12px;
background: #f1f5f9;
border-bottom: 1px solid #e2e8f0;
flex-shrink: 0;
}
.f3m-mode-toggle__btn {
flex: 1;
height: 32px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 12px;
transition: all 0.15s;
}
.f3m-mode-toggle__btn--active {
font-weight: 600;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Program Selector (Direkte Aufgabe) */
.f3m-program-selector {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.f3m-program-card {
transition: all 0.15s;
}
.f3m-program-card:hover {
border-color: #cbd5e1;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.f3m-program-card--suggested {
border-width: 2px;
border-color: #bbf7d0;
}
.f3m-program-card--suggested:hover {
border-color: #86efac;
box-shadow: 0 2px 8px rgba(22,163,74,0.15);
}
.f3m-program-card--selected {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}
/* Content Elements */
.f3m-content-elements {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
min-height: 0;
overflow-y: auto;
}
.f3m-content-add {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.f3m-content-list {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
overflow-y: auto;
}
.f3m-content-item {
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.f3m-content-item__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.f3m-content-item__type {
font-size: 12px;
font-weight: 500;
color: #374151;
display: flex;
align-items: center;
gap: 6px;
}
.f3m-content-item__type i {
color: #6b7280;
}
.f3m-content-item__actions {
display: flex;
gap: 4px;
}
.f3m-content-item__actions button {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.f3m-content-item__actions button:hover {
background: #e5e7eb;
color: #374151;
}
.f3m-content-item__actions button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.f3m-content-item__actions button:last-child:hover {
background: #fee2e2;
color: #dc2626;
}
.f3m-content-item__body {
padding: 12px;
}
/* File Upload */
.f3m-file-upload {
margin-bottom: 8px;
}
.f3m-file-upload__label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 2px dashed #d1d5db;
border-radius: 8px;
background: #f9fafb;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
}
.f3m-file-upload__label:hover {
border-color: #3b82f6;
background: #eff6ff;
color: #3b82f6;
}
.f3m-file-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.f3m-file-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: #f3f4f6;
border-radius: 6px;
font-size: 13px;
}
.f3m-file-item i {
color: #6b7280;
}
.f3m-file-item__name {
flex: 1;
color: #374151;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.f3m-file-item__size {
color: #9ca3af;
font-size: 11px;
}
.f3m-file-item button {
width: 20px;
height: 20px;
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.f3m-file-item button:hover {
background: #fee2e2;
color: #dc2626;
}
/* Link Row */
.f3m-link-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.f3m-link-row button {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
border-radius: 4px;
flex-shrink: 0;
}
.f3m-link-row button:hover {
background: #fee2e2;
color: #dc2626;
}
/* Content Empty State */
.f3m-content-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
color: #9ca3af;
text-align: center;
font-size: 13px;
}
.f3m-content-empty i {
font-size: 24px;
opacity: 0.5;
}
/* Input small variant */
.f3m-input--sm {
padding: 6px 10px;
font-size: 13px;
}
/* ============================================================================
* F3M Library Panel (v4.0.0)
* 3M-Bibliothek mit Accordion-Auswahl
* ============================================================================ */
/* Mode Toggle Buttons */
.f3m-editor__mode-toggle {
display: flex;
gap: 4px;
padding: 8px 12px;
background: #f3f4f6;
border-bottom: 1px solid #e5e7eb;
}
.f3m-mode-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: #6b7280;
cursor: pointer;
transition: all 0.15s ease;
}
.f3m-mode-btn:hover {
background: #fff;
color: #374151;
}
.f3m-mode-btn--active {
background: #fff;
border-color: #3b82f6;
color: #1d4ed8;
box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15);
}
.f3m-mode-btn i {
font-size: 11px;
}
/* Library Panel */
.f3m-library {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.f3m-library__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(135deg, #6d28d9, #4c1d95);
color: #fff;
}
.f3m-library__header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.f3m-library__count {
font-size: 11px;
opacity: 0.8;
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 10px;
}
/* Library Filters */
.f3m-library__filters {
display: flex;
gap: 8px;
padding: 10px 12px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.f3m-library__search {
flex: 1;
position: relative;
}
.f3m-library__search i {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 12px;
}
.f3m-library__search input {
width: 100%;
padding-left: 30px;
}
/* Library List */
.f3m-library__list {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.f3m-library__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 20px;
color: #9ca3af;
text-align: center;
}
.f3m-library__empty i {
font-size: 32px;
opacity: 0.5;
}
.f3m-library__empty p {
margin: 0;
font-size: 13px;
}
/* Library Item (Accordion Card) */
.f3m-library__item {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 8px;
overflow: hidden;
transition: all 0.2s ease;
}
.f3m-library__item:hover {
border-color: #c7d2fe;
}
.f3m-library__item--selected {
border-color: #6d28d9;
box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.15);
}
.f3m-library__item--expanded {
border-color: #a78bfa;
}
/* Item Header */
.f3m-library__item-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
transition: background 0.15s;
}
.f3m-library__item-header:hover {
background: #f9fafb;
}
.f3m-library__item-type {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
flex-shrink: 0;
}
.f3m-library__item-info {
flex: 1;
min-width: 0;
}
.f3m-library__item-title {
font-size: 13px;
font-weight: 600;
color: #374151;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.f3m-library__item-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #9ca3af;
margin-top: 2px;
}
.f3m-library__item-mappings {
display: flex;
align-items: center;
gap: 3px;
color: #6d28d9;
}
.f3m-library__item-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.f3m-library__item-selected {
color: #22c55e;
font-size: 16px;
}
/* Item Body (Expanded) */
.f3m-library__item-body {
padding: 12px 16px;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
}
.f3m-library__item-desc {
font-size: 12px;
color: #6b7280;
line-height: 1.5;
margin-bottom: 12px;
}
.f3m-library__item-footer {
display: flex;
justify-content: flex-end;
}
/* Editor Panel */
.f3m-editor__panel {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
.f3m-editor__panel .f3m-editor__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: #fff;
}
.f3m-editor__panel .f3m-editor__header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.f3m-editor__panel .f3m-editor__form {
flex: 1;
overflow-y: auto;
padding: 16px;
}
/* Sources Header (grün) */
.f3m-sources__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(135deg, #059669, #047857);
color: #fff;
}
.f3m-sources__header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.f3m-sources__count {
font-size: 11px;
opacity: 0.8;
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 10px;
}
/* Entry Status Badges */
.f3m-entry__status {
display: flex;
align-items: center;
gap: 6px;
margin-right: 8px;
}
.f3m-entry__linked-badge {
color: #22c55e;
font-size: 14px;
}
.f3m-entry__split-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: #fef3c7;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
color: #92400e;
}
/* Entry Card Variants */
.f3m-entry--linked {
border-left: 3px solid #22c55e;
}
/* Paragraph Stats mit Farben */
.f3m-paragraphs__stat {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
}
.f3m-paragraphs__stat--assigned {
background: #dcfce7;
color: #166534;
}
.f3m-paragraphs__stat--open {
background: #fef2f2;
color: #991b1b;
}
/* Paragraph Status Colors (rot/grün/grau) */
.f3m-para {
position: relative;
padding: 10px 12px;
margin-bottom: 8px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
border-left: 3px solid #d1d5db;
transition: all 0.2s ease;
}
.f3m-para--unassigned {
border-left-color: #fca5a5;
background: #fef2f2;
}
.f3m-para--assigned {
border-left-color: #22c55e;
background: #f0fdf4;
}
.f3m-para--ignored {
border-left-color: #9ca3af;
background: #f3f4f6;
opacity: 0.6;
}
.f3m-para--ignored .f3m-para__text {
text-decoration: line-through;
color: #9ca3af;
}
/* Paragraph Actions */
.f3m-para__actions {
display: flex;
gap: 4px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e5e7eb;
}
.f3m-para__btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: #fff;
color: #6b7280;
cursor: pointer;
transition: all 0.15s ease;
font-size: 12px;
}
.f3m-para__btn:hover:not(:disabled) {
border-color: #3b82f6;
color: #3b82f6;
}
.f3m-para__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.f3m-para__btn--assign {
background: #dbeafe;
border-color: #93c5fd;
color: #1d4ed8;
}
.f3m-para__btn--assign:hover:not(:disabled) {
background: #3b82f6;
color: #fff;
}
.f3m-para__btn--assign.f3m-para__btn--active {
background: #22c55e;
border-color: #22c55e;
color: #fff;
}
.f3m-para__btn--ignore.f3m-para__btn--active {
background: #6b7280;
border-color: #6b7280;
color: #fff;
}
/* Library Header (grün passend zu links) */
.f3m-library__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(135deg, #059669, #047857);
color: #fff;
}
/* ============================================
3M Form - Zugeordnete Protokolleinträge
============================================ */
.threemform-entries {
padding: 0;
}
.threemform-entries__title {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin: 0 0 8px 0;
}
.threemform-entries__title i {
color: #3b82f6;
}
.threemform-entries__count {
font-weight: 400;
color: #6b7280;
font-size: 14px;
}
.threemform-entries__desc {
color: #6b7280;
font-size: 14px;
margin: 0 0 20px 0;
}
.threemform-entries__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
color: #9ca3af;
text-align: center;
}
.threemform-entries__empty i {
font-size: 32px;
margin-bottom: 12px;
}
.threemform-entries__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.threemform-entry {
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
overflow: hidden;
transition: box-shadow 0.2s;
}
.threemform-entry:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.threemform-entry--expanded {
border-color: #3b82f6;
}
.threemform-entry__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
cursor: pointer;
background: #f9fafb;
gap: 12px;
}
.threemform-entry--expanded .threemform-entry__header {
background: #eff6ff;
border-bottom: 1px solid #e5e7eb;
}
.threemform-entry__info {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-width: 0;
}
.threemform-entry__id {
font-weight: 600;
color: #3b82f6;
font-size: 13px;
}
.threemform-entry__template {
font-weight: 500;
color: #374151;
font-size: 14px;
}
.threemform-entry__org {
display: flex;
align-items: center;
gap: 4px;
color: #6b7280;
font-size: 13px;
padding: 2px 8px;
background: #f3f4f6;
border-radius: 4px;
}
.threemform-entry__org i {
font-size: 11px;
}
.threemform-entry__meta {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.threemform-entry__date {
display: flex;
align-items: center;
gap: 4px;
color: #9ca3af;
font-size: 12px;
}
.threemform-entry__status {
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
}
.threemform-entry__status--processed {
background: #dcfce7;
color: #15803d;
}
.threemform-entry__status--submitted {
background: #dbeafe;
color: #1d4ed8;
}
.threemform-entry__status--draft {
background: #fef3c7;
color: #b45309;
}
.threemform-entry__toggle {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.threemform-entry__toggle:hover {
background: #e5e7eb;
}
.threemform-entry__content {
padding: 16px;
background: #fff;
}
.threemform-entry__fields {
display: flex;
flex-direction: column;
gap: 12px;
}
.threemform-entry__field {
display: flex;
flex-direction: column;
gap: 4px;
}
.threemform-entry__label {
font-weight: 500;
color: #374151;
font-size: 13px;
}
.threemform-entry__value {
color: #6b7280;
font-size: 14px;
line-height: 1.5;
}
.threemform-entry__value pre {
margin: 0;
white-space: pre-wrap;
font-family: inherit;
}
.threemform-entry__raw {
background: #f9fafb;
padding: 12px;
border-radius: 6px;
overflow-x: auto;
}
.threemform-entry__raw pre {
margin: 0;
font-size: 12px;
color: #374151;
}
.threemform-entry__notes {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e5e7eb;
font-size: 13px;
color: #6b7280;
}
/* Badge im Menü */
.prog-item__badge {
margin-left: auto;
padding: 2px 8px;
background: #3b82f6;
color: #fff;
font-size: 11px;
font-weight: 600;
border-radius: 10px;
}
/* Interne Anmerkungen */
.threemform-notes {
margin-top: 24px;
padding: 16px;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 8px;
}
.threemform-notes__title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #92400e;
margin: 0 0 8px 0;
}
.threemform-notes__title i {
color: #f59e0b;
}
.threemform-notes__content {
font-size: 14px;
color: #78350f;
line-height: 1.5;
white-space: pre-wrap;
}
/* Genehmigungs-Status */
.threemform-approval-status {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
margin-bottom: 12px;
}
.threemform-approval-status--pending {
background: #fef3c7;
color: #92400e;
}
.threemform-approval-status--pending i {
color: #f59e0b;
}
.threemform-approval-status--approved {
background: #dcfce7;
color: #166534;
}
.threemform-approval-status--approved i {
color: #22c55e;
}
.threemform-approval-status--rejected {
background: #fee2e2;
color: #991b1b;
}
.threemform-approval-status--rejected i {
color: #dc2626;
}
.threemform-approval-actions {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.threemform-approval-actions .pm-btn {
flex: 1;
}
.threemform-approval-info {
font-size: 12px;
color: #6b7280;
display: flex;
flex-direction: column;
gap: 4px;
}
.threemform-approval-info small {
display: flex;
align-items: center;
gap: 6px;
}
.threemform-approval-info i {
width: 14px;
text-align: center;
color: #9ca3af;
}
.threemform-rejection-reason {
margin-top: 8px;
padding: 8px 10px;
background: #fef2f2;
border-left: 3px solid #dc2626;
border-radius: 4px;
font-size: 12px;
color: #991b1b;
}
.threemform-rejection-reason i {
color: #dc2626;
margin-right: 6px;
}
/* ============================================
3M Page - Vereinheitlichtes Design (f3m-Stil)
============================================ */
/* three-m-page Komponente mit f3m-Stil */
.three-m-page {
margin-top: 24px;
}
.three-m-page .three-m-content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
.three-m-page .three-m-content-header h4 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
.three-m-page .three-m-add-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.three-m-page .three-m-content-elements {
display: flex;
flex-direction: column;
gap: 16px;
}
.three-m-page .three-m-content-element {
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.three-m-page .three-m-content-element:hover {
border-color: #3b82f6;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.three-m-page .three-m-content-element.drag-over {
border-color: #10b981;
background: #f0fdf4;
}
.three-m-page .three-m-element-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.three-m-page .three-m-element-type {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: #374151;
}
.three-m-page .three-m-element-type i {
color: #3b82f6;
font-size: 14px;
}
.three-m-page .three-m-element-controls {
display: flex;
gap: 4px;
}
.three-m-page .three-m-element-body {
padding: 16px;
}
.three-m-page .three-m-element-body .form-group {
margin-bottom: 12px;
}
.three-m-page .three-m-element-body .form-group:last-child {
margin-bottom: 0;
}
.three-m-page .three-m-element-body label {
display: block;
font-size: 12px;
font-weight: 500;
color: #374151;
margin-bottom: 4px;
}
.three-m-page .three-m-element-body .form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.three-m-page .three-m-element-body .form-control:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.three-m-page .three-m-element-body textarea.form-control {
resize: vertical;
min-height: 100px;
}
/* File Upload im f3m-Stil */
.three-m-page .file-drop-zone {
padding: 20px;
border: 2px dashed #d1d5db;
border-radius: 8px;
background: #f9fafb;
text-align: center;
transition: all 0.2s;
cursor: pointer;
}
.three-m-page .file-drop-zone:hover,
.three-m-page .file-drop-zone.drag-active {
border-color: #3b82f6;
background: #eff6ff;
}
.three-m-page .file-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f3f4f6;
border-radius: 6px;
margin-bottom: 8px;
}
.three-m-page .file-item i {
color: #3b82f6;
}
.three-m-page .file-item .file-name {
flex: 1;
font-weight: 500;
color: #374151;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.three-m-page .file-item .file-size {
color: #6b7280;
font-size: 12px;
}
/* Leerer Zustand */
.three-m-page .three-m-empty-state {
text-align: center;
padding: 40px 20px;
color: #9ca3af;
}
.three-m-page .three-m-empty-state i {
font-size: 32px;
margin-bottom: 12px;
color: #d1d5db;
}
.three-m-page .three-m-empty-state p {
margin: 0;
font-size: 14px;
}
/* Formular Pool - 3M Badge */
.fp-3m-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 4px;
margin-bottom: 2px;
}
.fp-3m-badge i {
font-size: 10px;
flex-shrink: 0;
}
.fp-3m-badge--measure {
background: #dbeafe;
color: #1d4ed8;
}
.fp-3m-badge--method {
background: #dcfce7;
color: #15803d;
}
.fp-3m-badge--material {
background: #fef3c7;
color: #b45309;
}
.fp-3m-badge--link {
text-decoration: none;
cursor: pointer;
transition: all 0.15s;
}
.fp-3m-badge--link:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.fp-3m-badge--link.fp-3m-badge--measure:hover {
background: #bfdbfe;
}
.fp-3m-badge--link.fp-3m-badge--method:hover {
background: #bbf7d0;
}
.fp-3m-badge--link.fp-3m-badge--material:hover {
background: #fde68a;
}
/* Absatz-Status Badge */
.fp-para-status {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 3px 8px;
font-size: 10px;
font-weight: 500;
background: #fef3c7;
color: #92400e;
border-radius: 10px;
}
.fp-para-status i {
font-size: 9px;
}
.fp-para-status--complete {
background: #dcfce7;
color: #166534;
}
.fp-para-status__open {
color: #dc2626;
font-weight: 600;
}
/* Responsive f3m */
@media (max-width: 1400px) {
.f3m-splitview {
grid-template-columns: 280px 1fr 350px;
}
.f3m-splitview--no-ai {
grid-template-columns: 1fr 1fr; /* 50/50 bleibt */
}
}
@media (max-width: 1100px) {
.f3m-splitview {
grid-template-columns: 250px 1fr 300px;
}
.f3m-splitview--no-ai {
grid-template-columns: 1fr 1fr; /* 50/50 bleibt */
}
}
@media (max-width: 900px) {
.f3m-splitview {
grid-template-columns: 1fr;
grid-template-rows: 250px 1fr auto;
}
.f3m-splitview--no-ai {
grid-template-rows: 250px 1fr;
}
.f3m-sources, .f3m-chat {
border-right: none;
border-bottom: 1px solid #e5e7eb;
}
}
/* ============================================
3M-EDITOR STYLES
Integriert aus 3m-editor.css am 2026-01-23
Angepasst an stylerules.md (BEM, Farben, Abstände)
============================================ */
/* Modal Backdrop */
.three-m-editor-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.three-m-editor-modal--fullscreen {
background: rgba(0, 0, 0, 0.8);
}
/* Modal Box */
.three-m-editor-modal .pm-modal__box {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 1000px;
max-height: 90vh;
width: 100%;
height: auto;
}
.three-m-editor-box--fullscreen {
max-width: 100% !important;
max-height: 100vh !important;
width: 100vw !important;
height: 100vh !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Modal Header */
.three-m-editor-modal .pm-modal__header {
padding: 0;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.three-m-editor-modal .pm-modal__header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
}
.three-m-editor-modal .pm-modal__close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #4b5563;
transition: color 0.2s;
}
.three-m-editor-modal .pm-modal__close:hover {
color: #111827;
}
/* Tabs */
.three-m-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid #e5e7eb;
background: #f9fafb;
}
.three-m-tab {
flex: 1;
padding: 8px 16px;
background: none;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #4b5563;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.three-m-tab:hover {
background: #f3f4f6;
color: #111827;
}
.three-m-tab.active {
background: #ffffff;
color: #2563eb;
border-bottom-color: #2563eb;
}
.three-m-tab i {
font-size: 1.1rem;
}
/* Content Area */
.three-m-content {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.three-m-section {
padding: 0;
}
/* Access Rights Section */
.three-m-access-group {
margin-bottom: 24px;
padding: 16px;
background: #f9fafb;
border-radius: 12px;
border: 1px solid #e5e7eb;
}
.three-m-access-group h4 {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 600;
color: #111827;
display: flex;
align-items: center;
gap: 8px;
}
.three-m-access-group .text-muted {
margin-bottom: 16px;
font-size: 14px;
color: #4b5563;
}
.three-m-access-group .alert {
margin: 0;
}
/* Content Elements Header */
.three-m-content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e7eb;
}
.three-m-content-header h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #111827;
}
/* Add Buttons */
.three-m-add-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
min-height: 32px !important;
}
.three-m-add-buttons .btn {
font-size: 13px;
padding: 6px 12px;
}
/* Content Elements Container */
.three-m-content-elements {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Single Content Element */
.three-m-content-element {
border: 2px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
background: #ffffff;
}
.three-m-content-element:hover {
border-color: #2563eb;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.three-m-content-element.drag-over {
border-color: #16a34a;
background: #f0fdf4;
}
/* Element Header */
.three-m-element-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
cursor: move;
}
.three-m-element-type {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #374151;
}
.three-m-element-type i {
color: #2563eb;
}
/* Element Controls */
.three-m-element-controls {
display: flex;
gap: 4px;
}
.three-m-element-controls .btn-icon {
padding: 4px 8px;
background: none;
border: 1px solid #d1d5db;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
color: #4b5563;
}
.three-m-element-controls .btn-icon:hover:not(:disabled) {
background: #2563eb;
border-color: #2563eb;
color: #ffffff;
}
.three-m-element-controls .btn-icon.btn-danger:hover {
background: #dc2626;
border-color: #dc2626;
}
.three-m-element-controls .btn-icon:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Element Body */
.three-m-element-body {
padding: 16px;
}
/* Resource Items */
.three-m-resource-item {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.three-m-resource-item .form-control {
flex: 1;
}
.three-m-resource-item .btn {
flex-shrink: 0;
}
/* File Items */
.three-m-file-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 8px;
}
.three-m-file-item i {
color: #2563eb;
font-size: 1.2rem;
}
.three-m-file-item__name {
flex: 1;
font-weight: 500;
color: #111827;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.three-m-file-item__size {
color: #4b5563;
font-size: 13px;
}
.three-m-file-upload-area label {
cursor: pointer;
margin: 0;
}
/* Empty State */
.three-m-empty-state {
text-align: center;
padding: 48px 24px;
color: #9ca3af;
}
.three-m-empty-state i {
font-size: 3rem;
margin-bottom: 16px;
color: #d1d5db;
}
.three-m-empty-state p {
margin: 0;
font-size: 14px;
}
/* Modal Footer */
.three-m-editor-modal .pm-modal__footer {
padding: 8px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
display: flex;
justify-content: space-between;
align-items: center;
}
.three-m-footer-left {
flex: 1;
}
.three-m-footer-right {
display: flex;
gap: 12px;
}
/* Upload Progress */
.three-m-upload-progress {
display: flex;
align-items: center;
gap: 8px;
color: #2563eb;
font-size: 14px;
}
.three-m-upload-progress i {
font-size: 1rem;
}
/* 3M Editor Buttons (scoped) */
.three-m-editor-modal .btn {
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px !important;
}
.three-m-editor-modal .btn-primary {
background: #2563eb;
color: #ffffff;
}
.three-m-editor-modal .btn-primary:hover:not(:disabled) {
background: #1d4ed8;
}
.three-m-editor-modal .btn-secondary {
background: #4b5563;
color: #ffffff;
}
.three-m-editor-modal .btn-secondary:hover:not(:disabled) {
background: #374151;
}
.three-m-editor-modal .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.three-m-editor-modal .btn-sm {
padding: 6px 12px;
font-size: 13px;
}
.three-m-editor-modal .btn-outline-primary {
background: #ffffff;
border: 1px solid #2563eb;
color: #2563eb;
}
.three-m-editor-modal .btn-outline-primary:hover {
background: #2563eb;
color: #ffffff;
}
.three-m-editor-modal .btn-danger {
background: #dc2626;
color: #ffffff;
}
.three-m-editor-modal .btn-danger:hover {
background: #b91c1c;
}
/* Alert Styles (scoped) */
.three-m-editor-modal .alert {
padding: 16px;
border-radius: 8px;
margin-bottom: 16px;
}
.three-m-editor-modal .alert-info {
background: #dbeafe;
border: 1px solid #bfdbfe;
color: #1e40af;
}
.three-m-editor-modal .alert i {
margin-right: 8px;
}
/* Form Controls (scoped) */
.three-m-editor-modal .form-group {
margin-bottom: 16px;
}
.three-m-editor-modal .form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #111827;
font-size: 14px;
}
.three-m-editor-modal .form-control {
width: 100%;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.three-m-editor-modal .form-control:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.three-m-editor-modal .form-row {
display: flex;
gap: 16px;
margin: 0;
}
.three-m-editor-modal .form-row .form-group {
flex: 1;
margin-bottom: 16px;
}
/* Fullscreen Adjustments */
.three-m-editor-modal--fullscreen .three-m-editor-box--fullscreen .pm-modal__content {
padding: 24px;
}
/* Responsive */
@media (max-width: 768px) {
.three-m-editor-modal:not(.three-m-editor-modal--fullscreen) .pm-modal__box {
max-width: 95% !important;
max-height: 95vh !important;
}
.three-m-tabs {
flex-wrap: wrap;
}
.three-m-tab {
flex: 1 1 50%;
font-size: 13px;
padding: 12px 16px;
}
.three-m-add-buttons {
flex-direction: column;
}
.three-m-add-buttons .btn {
width: 100%;
}
.three-m-editor-modal .form-row {
flex-direction: column;
gap: 0;
}
.three-m-editor-modal .form-row .form-group {
margin: 0 0 16px 0;
}
}
/* ============================================================================
CKEditor SVG Fix - Verhindert, dass .ico svg Regeln CKEditor-Icons beeinflussen
============================================================================ */
.ck svg,
.ck-editor svg,
.ck-toolbar svg,
.ck-button svg,
.ck-dropdown svg,
.ck-dropdown__arrow svg,
.ck-icon svg,
.ck .ck-icon svg,
.ck .ck-button__icon svg,
.ck-reset_all svg {
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
}
/* Spezifischer Fix für Dropdown-Pfeile */
.ck-dropdown__arrow {
width: 10px !important;
height: 10px !important;
}
.ck-dropdown__arrow svg {
width: 10px !important;
height: 10px !important;
}
/* Fix für Toolbar-Icons */
.ck-toolbar .ck-button .ck-icon,
.ck-toolbar .ck-button .ck-button__icon {
width: 20px !important;
height: 20px !important;
}
.ck-toolbar .ck-button .ck-icon svg,
.ck-toolbar .ck-button .ck-button__icon svg {
width: 100% !important;
height: 100% !important;
max-width: 20px !important;
max-height: 20px !important;
}
/* ============================================================================
Traffic Analysis Component (admin/trafficanalysis.js)
============================================================================ */
.traffic-analysis {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
max-width: 1400px;
margin: 0 auto;
}
.traffic-analysis__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 12px;
}
.traffic-analysis__title {
font-size: 20px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
}
.traffic-analysis__actions {
display: flex;
gap: 8px;
}
.traffic-analysis__btn {
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.traffic-analysis__btn--primary {
background: #2563eb;
color: #fff;
border: none;
}
.traffic-analysis__btn--primary:hover {
background: #1d4ed8;
}
.traffic-analysis__btn--secondary {
background: #fff;
color: #374151;
border: 1px solid #d1d5db;
}
.traffic-analysis__btn--secondary:hover {
background: #f9fafb;
border-color: #9ca3af;
}
.traffic-analysis__btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Stats Summary */
.traffic-analysis__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.traffic-analysis__stat {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 16px;
text-align: center;
}
.traffic-analysis__stat--active {
background: #dcfce7;
border-color: #bbf7d0;
}
.traffic-analysis__stat--recent {
background: #dbeafe;
border-color: #bfdbfe;
}
.traffic-analysis__stat--today {
background: #fef3c7;
border-color: #fde68a;
}
.traffic-analysis__stat--total {
background: #f3f4f6;
border-color: #d1d5db;
}
/* Online stat - prominent styling */
.traffic-analysis__stat--online {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
border-color: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
.traffic-analysis__stat--online .traffic-analysis__stat-value {
color: #15803d;
font-size: 36px;
}
/* Maintenance alerts */
.traffic-analysis__maintenance-ok {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
margin-bottom: 20px;
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
border: 2px solid #22c55e;
border-radius: 12px;
color: #166534;
font-size: 16px;
}
.traffic-analysis__maintenance-ok i {
font-size: 24px;
color: #22c55e;
}
.traffic-analysis__maintenance-warn {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
margin-bottom: 20px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #f59e0b;
border-radius: 12px;
color: #92400e;
font-size: 16px;
}
.traffic-analysis__maintenance-warn i {
font-size: 24px;
color: #f59e0b;
}
/* Maintenance Control Panel */
.traffic-analysis__maintenance-panel {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.traffic-analysis__maintenance-panel--active {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border-color: #ef4444;
}
.traffic-analysis__maintenance-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.traffic-analysis__maintenance-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 600;
color: #1e293b;
}
.traffic-analysis__maintenance-title i {
font-size: 24px;
color: #64748b;
}
.traffic-analysis__maintenance-panel--active .traffic-analysis__maintenance-title i {
color: #ef4444;
}
.traffic-analysis__maintenance-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.traffic-analysis__maintenance-badge--active {
background: #ef4444;
color: #fff;
animation: maintenance-pulse 2s infinite;
}
.traffic-analysis__maintenance-badge--inactive {
background: #e2e8f0;
color: #64748b;
}
@keyframes maintenance-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.traffic-analysis__maintenance-actions {
display: flex;
gap: 12px;
}
.traffic-analysis__btn--danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.traffic-analysis__btn--danger:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
transform: translateY(-1px);
}
.traffic-analysis__btn--danger:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.traffic-analysis__btn--success {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.traffic-analysis__btn--success:hover {
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
transform: translateY(-1px);
}
.traffic-analysis__btn--success:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.traffic-analysis__maintenance-info {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #fecaca;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.traffic-analysis__maintenance-info p {
margin: 0;
font-size: 14px;
color: #7f1d1d;
}
.traffic-analysis__maintenance-info strong {
color: #991b1b;
}
.traffic-analysis__maintenance-hint {
margin-top: 12px;
padding: 12px 16px;
background: #f1f5f9;
border-radius: 8px;
font-size: 14px;
color: #64748b;
display: flex;
align-items: flex-start;
gap: 10px;
}
.traffic-analysis__maintenance-hint i {
color: #3b82f6;
margin-top: 2px;
}
.traffic-analysis__stat-value {
font-size: 32px;
font-weight: 700;
color: #111827;
line-height: 1;
}
.traffic-analysis__stat--active .traffic-analysis__stat-value { color: #166534; }
.traffic-analysis__stat--recent .traffic-analysis__stat-value { color: #1e40af; }
.traffic-analysis__stat--today .traffic-analysis__stat-value { color: #92400e; }
.traffic-analysis__stat-label {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-top: 4px;
}
.traffic-analysis__stat-desc {
font-size: 11px;
color: #6b7280;
margin-top: 2px;
}
/* Filters */
.traffic-analysis__filters {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
margin-bottom: 16px;
padding: 12px 16px;
background: #f9fafb;
border-radius: 8px;
}
.traffic-analysis__filter-group {
display: flex;
align-items: center;
gap: 8px;
}
.traffic-analysis__filter-label {
font-size: 13px;
font-weight: 500;
color: #374151;
}
.traffic-analysis__select {
height: 32px;
padding: 0 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
background: #fff;
min-width: 100px;
}
.traffic-analysis__select--small {
min-width: 60px;
}
.traffic-analysis__input {
height: 32px;
padding: 0 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
min-width: 200px;
}
.traffic-analysis__input:focus,
.traffic-analysis__select:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.traffic-analysis__count {
font-size: 13px;
color: #6b7280;
margin-left: auto;
}
/* Loading & Error */
.traffic-analysis__loading,
.traffic-analysis__error {
padding: 48px;
text-align: center;
color: #6b7280;
font-size: 14px;
}
.traffic-analysis__loading i,
.traffic-analysis__error i {
margin-right: 8px;
}
.traffic-analysis__error {
color: #dc2626;
background: #fee2e2;
border-radius: 8px;
}
/* Table */
.traffic-analysis__table-container {
overflow-x: auto;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.traffic-analysis__table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.traffic-analysis__th {
background: #f9fafb;
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
color: #6b7280;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
.traffic-analysis__th--sortable {
cursor: pointer;
user-select: none;
}
.traffic-analysis__th--sortable:hover {
background: #f3f4f6;
color: #111827;
}
.traffic-analysis__th i {
margin-left: 4px;
font-size: 10px;
}
.traffic-analysis__row {
transition: background 0.1s ease;
}
.traffic-analysis__row:hover {
background: #f9fafb;
}
.traffic-analysis__td {
padding: 12px 16px;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
}
.traffic-analysis__td--email {
color: #6b7280;
font-size: 12px;
}
.traffic-analysis__td--empty {
text-align: center;
padding: 32px;
color: #9ca3af;
}
/* Status Badge */
.traffic-analysis__status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.traffic-analysis__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.traffic-analysis__status-badge--active {
background: #dcfce7;
color: #166534;
}
.traffic-analysis__status-badge--active .traffic-analysis__status-dot {
background: #22c55e;
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.2); }
}
.traffic-analysis__status-badge--recent {
background: #dbeafe;
color: #1e40af;
}
.traffic-analysis__status-badge--today {
background: #fef3c7;
color: #92400e;
}
.traffic-analysis__status-badge--week {
background: #f3f4f6;
color: #6b7280;
}
.traffic-analysis__status-badge--inactive,
.traffic-analysis__status-badge--unknown {
background: #f3f4f6;
color: #9ca3af;
}
/* Online Badge */
.traffic-analysis__online-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.traffic-analysis__online-badge--online {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #166534;
border: 1px solid #22c55e;
}
.traffic-analysis__online-badge--offline {
background: #f3f4f6;
color: #9ca3af;
border: 1px solid #d1d5db;
}
.traffic-analysis__online-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.traffic-analysis__online-dot--pulse {
background: #22c55e;
animation: online-pulse 1.5s ease-in-out infinite;
}
@keyframes online-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
50% {
opacity: 0.8;
transform: scale(1.1);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
}
}
/* Row highlight for online users */
.traffic-analysis__row--online {
background: rgba(220, 252, 231, 0.3) !important;
}
.traffic-analysis__row--online:hover {
background: rgba(220, 252, 231, 0.5) !important;
}
/* Table cell alignment */
.traffic-analysis__th--center,
.traffic-analysis__td--center {
text-align: center;
}
/* Session active indicator */
.traffic-analysis__session-active {
color: #166534;
font-weight: 500;
}
.traffic-analysis__session-active i {
margin-right: 4px;
color: #22c55e;
}
/* User info in name column */
.traffic-analysis__user-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.traffic-analysis__user-info .traffic-analysis__status-badge {
font-size: 10px;
padding: 2px 6px;
}
/* User Cell */
.traffic-analysis__user {
display: flex;
align-items: center;
gap: 10px;
}
.traffic-analysis__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.traffic-analysis__name {
font-weight: 500;
color: #111827;
}
/* Role Badge */
.traffic-analysis__role-badge {
display: inline-block;
padding: 2px 8px;
background: #e0f2fe;
color: #0369a1;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
.traffic-analysis__muted {
color: #9ca3af;
}
.traffic-analysis__highlight {
color: #166534;
font-weight: 600;
}
.traffic-analysis__warn {
color: #dc2626;
}
.traffic-analysis__sub {
font-size: 11px;
color: #9ca3af;
margin-top: 2px;
}
/* Pagination */
.traffic-analysis__pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
.traffic-analysis__page-btn {
width: 32px;
height: 32px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #374151;
transition: all 0.15s ease;
}
.traffic-analysis__page-btn:hover:not(:disabled) {
background: #f9fafb;
border-color: #9ca3af;
}
.traffic-analysis__page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.traffic-analysis__page-info {
font-size: 13px;
color: #6b7280;
}
/* Info Box */
.traffic-analysis__info {
margin-top: 24px;
padding: 12px 16px;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 8px;
font-size: 12px;
color: #0369a1;
}
.traffic-analysis__info i {
margin-right: 6px;
}
.traffic-analysis__info small {
display: block;
margin-top: 8px;
color: #6b7280;
}
/* Responsive */
@media (max-width: 768px) {
.traffic-analysis {
padding: 16px;
}
.traffic-analysis__header {
flex-direction: column;
align-items: flex-start;
}
.traffic-analysis__stats {
grid-template-columns: repeat(2, 1fr);
}
.traffic-analysis__filters {
flex-direction: column;
align-items: stretch;
}
.traffic-analysis__filter-group {
width: 100%;
}
.traffic-analysis__input {
min-width: 100%;
}
.traffic-analysis__count {
margin-left: 0;
text-align: center;
}
.traffic-analysis__table {
font-size: 12px;
}
.traffic-analysis__th,
.traffic-analysis__td {
padding: 8px 12px;
}
}
/* ===== SELECTED ROW HIGHLIGHTING FOR FILTERTABLE (2026-02-02) ===== */
/* Ausgewählte Zeilen: Orange Border auf allen td */
#outerframeContainer .filtertable tbody tr.selected td,
#outerframeContainer .overalltable tbody tr.selected td,
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]),
tr.selected td:not(.redflags):not([red-flag]) {
background-color: rgba(255, 169, 0, 0.08) !important;
}
#outerframeContainer .filtertable tbody tr.selected td:first-child,
#outerframeContainer .overalltable tbody tr.selected td:first-child,
tr.selected td:first-child {
border-left: 2px solid #ffa900 !important;
}
#outerframeContainer .filtertable tbody tr.selected td:last-child,
#outerframeContainer .overalltable tbody tr.selected td:last-child,
tr.selected td:last-child {
border-right: 2px solid #ffa900 !important;
}
/* ============================================
3M-Editor-Panel (three-m-editor-panel) Styles
Portiert aus inline