{
"tool_response": {
"filePath": "\/var\/www\/dev.campus.systemische-tools.de\/public\/css\/admin.css",
"oldString": ".htmx-request .btn-text {\n display: none;\n}\n\n\/* ==================== Table Enhancements ==================== *\/",
"newString": ".htmx-request .btn-text {\n display: none;\n}\n\n\/* Chat Loading Animation (3 bouncing dots) *\/\n.chat-loading {\n display: none;\n}\n\n.htmx-request .chat-loading,\n.chat-loading.htmx-request {\n display: block;\n}\n\n.typing-indicator {\n display: flex;\n gap: 4px;\n padding: 8px 12px;\n}\n\n.typing-indicator span {\n width: 8px;\n height: 8px;\n background: var(--accent, #007bff);\n border-radius: 50%;\n animation: typing-bounce 1.4s infinite ease-in-out both;\n}\n\n.typing-indicator span:nth-child(1) {\n animation-delay: -0.32s;\n}\n\n.typing-indicator span:nth-child(2) {\n animation-delay: -0.16s;\n}\n\n.typing-indicator span:nth-child(3) {\n animation-delay: 0s;\n}\n\n@keyframes typing-bounce {\n 0%, 80%, 100% {\n transform: scale(0.6);\n opacity: 0.4;\n }\n 40% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n\/* ==================== Table Enhancements ==================== *\/",
"originalFile": "\/**\n * Admin CSS - Component Styles\n * Wiederverwendbare Komponenten für Admin-Bereiche\n *\/\n\n\/* ==================== Layout ==================== *\/\n\n.page-container {\n max-width: var(--max-width);\n margin: 0 auto;\n padding: var(--space-md);\n}\n\n.page-container--narrow {\n max-width: var(--max-width-narrow);\n}\n\n.page-container--wide {\n max-width: var(--max-width-wide);\n}\n\n.page-header {\n margin-bottom: var(--space-lg);\n}\n\n.page-header__back {\n color: var(--color-text-muted);\n text-decoration: none;\n font-size: var(--font-size-sm);\n}\n\n.page-header__back:hover {\n color: var(--color-primary);\n}\n\n.page-header__title {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n margin-top: var(--space-sm);\n}\n\n.page-header__title h1 {\n margin: 0;\n font-size: var(--font-size-xxl);\n}\n\n.page-header__row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: var(--space-md);\n border-bottom: 1px solid var(--color-border);\n}\n\n.page-header__info {\n text-align: center;\n}\n\n.page-header__info p {\n margin: var(--space-xs) 0 0;\n color: var(--color-text-muted);\n font-size: var(--font-size-sm);\n}\n\n\/* Grid Layouts *\/\n.grid-2 {\n display: grid;\n grid-template-columns: 1fr 320px;\n gap: var(--space-lg);\n}\n\n.grid-3 {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-md);\n}\n\n.grid-auto {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: var(--space-md);\n}\n\n@media (max-width: 900px) {\n .grid-2 {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 600px) {\n .grid-3 {\n grid-template-columns: 1fr;\n }\n}\n\n\/* ==================== Cards ==================== *\/\n\n.card {\n background: var(--color-bg);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-lg);\n padding: var(--space-lg);\n margin-bottom: var(--space-md);\n}\n\n.card__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-md);\n}\n\n.card__header h2 {\n margin: 0;\n font-size: var(--font-size-lg);\n color: var(--color-heading);\n}\n\n.card__title {\n margin: 0 0 var(--space-md);\n font-size: var(--font-size-lg);\n color: var(--color-heading);\n}\n\n\/* ==================== Stats ==================== *\/\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n gap: var(--space-md);\n margin: var(--space-md) 0;\n}\n\n.stat-card {\n background: var(--color-bg-light);\n padding: var(--space-md);\n border-radius: var(--radius-lg);\n text-align: center;\n}\n\n.stat-card--warning {\n background: var(--color-warning-bg);\n}\n\n.stat-card--info {\n background: var(--color-info-bg);\n}\n\n.stat-card--success {\n background: var(--color-success-bg);\n}\n\n.stat-card__value {\n display: block;\n font-size: var(--font-size-xl);\n font-weight: bold;\n color: var(--color-primary);\n}\n\n.stat-card__label {\n color: var(--color-text-muted);\n font-size: var(--font-size-sm);\n}\n\n\/* ==================== Badges ==================== *\/\n\n.badge {\n display: inline-block;\n padding: var(--space-xs) var(--space-sm);\n border-radius: var(--radius-pill);\n font-size: var(--font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.badge--default {\n background: var(--color-bg-muted);\n color: var(--color-text-muted);\n}\n\n.badge--draft {\n background: var(--color-bg-muted);\n color: var(--color-text-muted);\n}\n\n.badge--generating,\n.badge--pending {\n background: var(--color-warning-bg);\n color: var(--color-warning-text);\n}\n\n.badge--critique,\n.badge--in_progress {\n background: var(--color-info-bg);\n color: var(--color-info-text);\n}\n\n.badge--revision {\n background: var(--color-success-bg);\n color: var(--color-success-text);\n}\n\n.badge--validate {\n background: var(--color-danger-bg);\n color: var(--color-danger-text);\n}\n\n.badge--approved,\n.badge--success,\n.badge--completed {\n background: var(--color-success-bg);\n color: var(--color-success-text);\n}\n\n.badge--published,\n.badge--primary {\n background: var(--color-primary);\n color: white;\n}\n\n.badge--warning {\n background: var(--color-warning-bg);\n color: var(--color-warning-text);\n}\n\n.badge--failed {\n background: var(--color-danger-bg);\n color: var(--color-danger-text);\n}\n\n.badge--cancelled {\n background: #e2e3e5;\n color: #383d41;\n}\n\n\/* ==================== Buttons ==================== *\/\n\n.btn {\n display: inline-block;\n padding: var(--space-sm) var(--space-md);\n border-radius: var(--radius-md);\n text-decoration: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n border: none;\n transition: all var(--transition-normal);\n text-align: center;\n}\n\n.btn--primary {\n background: var(--color-primary);\n color: white;\n}\n\n.btn--primary:hover {\n background: var(--color-primary-hover);\n}\n\n.btn--secondary {\n background: var(--color-secondary);\n color: white;\n}\n\n.btn--secondary:hover {\n background: var(--color-secondary-hover);\n}\n\n.btn--success {\n background: var(--color-success);\n color: white;\n}\n\n.btn--success:hover {\n background: #218838;\n}\n\n.btn--danger {\n background: var(--color-danger);\n color: white;\n}\n\n.btn--danger:hover {\n background: #c82333;\n}\n\n.btn--info {\n background: var(--color-info);\n color: white;\n}\n\n.btn--info:hover {\n background: #138496;\n}\n\n.btn--light {\n background: var(--color-bg-light);\n color: var(--color-text);\n}\n\n.btn--light:hover {\n background: var(--color-border);\n}\n\n.btn--small {\n padding: var(--space-xs) var(--space-sm);\n font-size: var(--font-size-sm);\n}\n\n.btn--large {\n padding: var(--space-md) var(--space-xl);\n font-size: var(--font-size-md);\n}\n\n.btn--block {\n display: block;\n width: 100%;\n}\n\n.btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n\/* ==================== Forms ==================== *\/\n\n.form {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n}\n\n.form--inline {\n flex-direction: row;\n align-items: center;\n}\n\n.form-section {\n padding: var(--space-lg);\n border-bottom: 1px solid var(--color-border);\n}\n\n.form-section:last-of-type {\n border-bottom: none;\n}\n\n.form-section__title {\n margin: 0 0 var(--space-md);\n font-size: var(--font-size-lg);\n color: var(--color-heading);\n}\n\n.form-group {\n margin-bottom: var(--space-md);\n}\n\n.form-group:last-child {\n margin-bottom: 0;\n}\n\n.form-group__label {\n display: block;\n margin-bottom: var(--space-xs);\n font-weight: 500;\n color: var(--color-text);\n}\n\n.form-group__hint {\n display: block;\n margin-top: var(--space-xs);\n color: var(--color-text-light);\n font-size: var(--font-size-xs);\n}\n\n.form-row {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: var(--space-md);\n}\n\n.form-actions {\n display: flex;\n gap: var(--space-md);\n padding: var(--space-lg);\n background: var(--color-bg-light);\n}\n\n.form-input,\n.form-select,\n.form-textarea {\n width: 100%;\n padding: var(--space-sm) var(--space-md);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n font-size: var(--font-size-md);\n font-family: inherit;\n transition: border-color var(--transition-normal);\n box-sizing: border-box;\n}\n\n.form-input:focus,\n.form-select:focus,\n.form-textarea:focus {\n outline: none;\n border-color: var(--color-primary);\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 120px;\n}\n\n.form-select--inline {\n width: auto;\n padding: var(--space-xs) var(--space-sm);\n font-size: var(--font-size-sm);\n}\n\n\/* ==================== Lists ==================== *\/\n\n.list {\n display: flex;\n flex-direction: column;\n gap: var(--space-sm);\n}\n\n.list-item {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n padding: var(--space-md) var(--space-lg);\n background: var(--color-bg);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-lg);\n transition: box-shadow var(--transition-normal);\n}\n\n.list-item:hover {\n box-shadow: var(--shadow-md);\n}\n\n.list-item__main {\n flex: 1;\n}\n\n.list-item__title {\n margin: 0;\n font-size: var(--font-size-lg);\n}\n\n.list-item__title a {\n color: var(--color-text);\n text-decoration: none;\n}\n\n.list-item__title a:hover {\n color: var(--color-primary);\n}\n\n.list-item__meta {\n display: flex;\n gap: var(--space-sm);\n margin-top: var(--space-xs);\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n.list-item__meta span:not(:first-child)::before {\n content: '|';\n margin-right: var(--space-sm);\n color: var(--color-border);\n}\n\n\/* ==================== Version Display ==================== *\/\n\n.version {\n background: var(--color-bg-light);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n}\n\n.version__header {\n display: flex;\n justify-content: space-between;\n margin-bottom: var(--space-sm);\n padding-bottom: var(--space-sm);\n border-bottom: 1px solid var(--color-border);\n}\n\n.version__number {\n font-weight: 600;\n color: var(--color-primary);\n}\n\n.version__date {\n color: var(--color-text-light);\n font-size: var(--font-size-sm);\n}\n\n.version__content {\n line-height: 1.7;\n color: var(--color-text);\n white-space: pre-wrap;\n}\n\n\/* ==================== Critiques ==================== *\/\n\n.critique-round {\n margin-bottom: var(--space-md);\n}\n\n.critique-round h3 {\n margin: 0 0 var(--space-sm);\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n.critique-item {\n padding: var(--space-md);\n border-radius: var(--radius-md);\n margin-bottom: var(--space-sm);\n}\n\n.critique-item--passed {\n background: var(--color-success-bg);\n}\n\n.critique-item--failed {\n background: var(--color-warning-bg);\n}\n\n.critique-item__header {\n d... [TRUNCATED-a53e2bbfba8d4b7c]",
"structuredPatch": [
{
"oldStart": 757,
"oldLines": 6,
"newStart": 757,
"newLines": 53,
"lines": [
" display: none;",
" }",
" ",
"+\/* Chat Loading Animation (3 bouncing dots) *\/",
"+.chat-loading {",
"+ display: none;",
"+}",
"+",
"+.htmx-request .chat-loading,",
"+.chat-loading.htmx-request {",
"+ display: block;",
"+}",
"+",
"+.typing-indicator {",
"+ display: flex;",
"+ gap: 4px;",
"+ padding: 8px 12px;",
"+}",
"+",
"+.typing-indicator span {",
"+ width: 8px;",
"+ height: 8px;",
"+ background: var(--accent, #007bff);",
"+ border-radius: 50%;",
"+ animation: typing-bounce 1.4s infinite ease-in-out both;",
"+}",
"+",
"+.typing-indicator span:nth-child(1) {",
"+ animation-delay: -0.32s;",
"+}",
"+",
"+.typing-indicator span:nth-child(2) {",
"+ animation-delay: -0.16s;",
"+}",
"+",
"+.typing-indicator span:nth-child(3) {",
"+ animation-delay: 0s;",
"+}",
"+",
"+@keyframes typing-bounce {",
"+ 0%, 80%, 100% {",
"+ transform: scale(0.6);",
"+ opacity: 0.4;",
"+ }",
"+ 40% {",
"+ transform: scale(1);",
"+ opacity: 1;",
"+ }",
"+}",
"+",
" \/* ==================== Table Enhancements ==================== *\/",
" ",
" th[data-sort] {"
]
}
],
"userModified": false,
"replaceAll": false
}
}