|
|
@@ -0,0 +1,1181 @@
|
|
|
+:root {
|
|
|
+ --gc-bg: #f4f6fb;
|
|
|
+ --gc-surface: #ffffff;
|
|
|
+ --gc-surface-soft: #f8fafc;
|
|
|
+ --gc-border: #e5e7eb;
|
|
|
+ --gc-text: #111827;
|
|
|
+ --gc-muted: #6b7280;
|
|
|
+ --gc-primary: #475569;
|
|
|
+ --gc-primary-dark: #334155;
|
|
|
+ --gc-primary-soft: #eef2f7;
|
|
|
+ --gc-danger: #dc2626;
|
|
|
+ --gc-warning: #d97706;
|
|
|
+ --gc-success: #16a34a;
|
|
|
+ --gc-radius-sm: 10px;
|
|
|
+ --gc-radius-md: 16px;
|
|
|
+ --gc-radius-lg: 22px;
|
|
|
+ --gc-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
|
|
|
+ --gc-shadow-md: 0 18px 45px rgba(15, 23, 42, .10);
|
|
|
+ --gc-topbar-height: 72px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Basis */
|
|
|
+
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ min-height: 100%;
|
|
|
+ background: var(--gc-bg);
|
|
|
+ color: var(--gc-text);
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+ font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* App Shell */
|
|
|
+
|
|
|
+ .gc-shell {
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at top left, rgba(100, 116, 139, .10), transparent 34rem),
|
|
|
+ linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-topbar {
|
|
|
+ height: var(--gc-topbar-height);
|
|
|
+ flex: 0 0 var(--gc-topbar-height);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 1.5rem;
|
|
|
+ background: rgba(255, 255, 255, .86);
|
|
|
+ backdrop-filter: blur(18px);
|
|
|
+ border-bottom: 1px solid rgba(226, 232, 240, .9);
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-logo {
|
|
|
+ height: 38px;
|
|
|
+ width: auto;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-brand {
|
|
|
+ font-size: 1rem;
|
|
|
+ font-weight: 800;
|
|
|
+ letter-spacing: -.02em;
|
|
|
+ color: var(--gc-text);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-nav-link {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 38px;
|
|
|
+ padding: .45rem .8rem;
|
|
|
+ border-radius: 999px;
|
|
|
+ color: var(--gc-muted);
|
|
|
+ font-weight: 700;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: all .18s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-nav-link:hover {
|
|
|
+ color: #334155;
|
|
|
+ background: #eef2f7;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-page {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1840px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 1.25rem;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Cards */
|
|
|
+
|
|
|
+ .gc-card {
|
|
|
+ background: rgba(255, 255, 255, .95);
|
|
|
+ border: 1px solid rgba(226, 232, 240, .95);
|
|
|
+ border-radius: var(--gc-radius-lg);
|
|
|
+ box-shadow: var(--gc-shadow-sm);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Filter */
|
|
|
+
|
|
|
+ .gc-filterbar {
|
|
|
+ padding: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-filterbar .form-label {
|
|
|
+ font-size: .74rem;
|
|
|
+ font-weight: 800;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: var(--gc-muted);
|
|
|
+ letter-spacing: .04em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-filterbar .form-control,
|
|
|
+ .gc-filterbar .form-select {
|
|
|
+ border-radius: 12px;
|
|
|
+ border-color: var(--gc-border);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-filterbar .form-control:focus,
|
|
|
+ .gc-filterbar .form-select:focus {
|
|
|
+ border-color: #94a3b8;
|
|
|
+ box-shadow: 0 0 0 .2rem rgba(100, 116, 139, .12);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Tabelle */
|
|
|
+
|
|
|
+ .gc-table-wrap {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ border-radius: var(--gc-radius-lg);
|
|
|
+ padding-top: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 1450px;
|
|
|
+ margin: 0 !important;
|
|
|
+ border-collapse: separate !important;
|
|
|
+ border-spacing: 0 !important;
|
|
|
+ table-layout: auto !important;
|
|
|
+ font-size: .88rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table thead {
|
|
|
+ position: static !important;
|
|
|
+ z-index: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table thead th {
|
|
|
+ position: static !important;
|
|
|
+ top: auto !important;
|
|
|
+ z-index: auto !important;
|
|
|
+ background: #f3f4f6 !important;
|
|
|
+ color: #667085;
|
|
|
+ font-size: .7rem;
|
|
|
+ font-weight: 900;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: .055em;
|
|
|
+ padding: .85rem .8rem !important;
|
|
|
+ border-top: 0 !important;
|
|
|
+ border-bottom: 1px solid #d7dde5 !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ white-space: nowrap;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table tbody td {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: .85rem .8rem !important;
|
|
|
+ border-top: 1px solid #edf2f7;
|
|
|
+ vertical-align: top;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table tbody tr {
|
|
|
+ transition: background .15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table tbody tr:hover td {
|
|
|
+ background: #fafbfc;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Spalten */
|
|
|
+
|
|
|
+ .gc-table th:nth-child(2),
|
|
|
+ .gc-table td:nth-child(2) {
|
|
|
+ width: 120px;
|
|
|
+ white-space: normal !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table th:nth-child(3),
|
|
|
+ .gc-table td:nth-child(3) {
|
|
|
+ padding-left: 14px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table th:nth-child(8),
|
|
|
+ .gc-table td:nth-child(8),
|
|
|
+ .gc-table td:nth-child(8) *,
|
|
|
+ .gc-table th:nth-child(9),
|
|
|
+ .gc-table td:nth-child(9),
|
|
|
+ .gc-table td:nth-child(9) * {
|
|
|
+ white-space: nowrap !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Tabellenlinks neutral/grau */
|
|
|
+
|
|
|
+ .gc-table a {
|
|
|
+ color: #4b5563 !important;
|
|
|
+ text-decoration: none;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table a:hover {
|
|
|
+ color: #1f2937 !important;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Typografie */
|
|
|
+
|
|
|
+ .gc-title {
|
|
|
+ color: var(--gc-text);
|
|
|
+ font-weight: 750;
|
|
|
+ line-height: 1.25;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-subtitle {
|
|
|
+ margin-top: .15rem;
|
|
|
+ color: var(--gc-muted);
|
|
|
+ font-size: .78rem;
|
|
|
+ line-height: 1.35;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-main-cell {
|
|
|
+ min-width: 290px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-money {
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+ font-weight: 400;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ /* Offen / Kunde ges. weiterhin fett */
|
|
|
+.gc-table td:nth-child(8) .gc-money {
|
|
|
+ font-weight: 800 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Buttons */
|
|
|
+
|
|
|
+ .gc-action-btn {
|
|
|
+ border-radius: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: #7b8ea3 !important;
|
|
|
+ border-color: #7b8ea3 !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-action-btn:hover {
|
|
|
+ background: #66788c !important;
|
|
|
+ border-color: #66788c !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Badges */
|
|
|
+
|
|
|
+ .gc-badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: .3rem;
|
|
|
+ min-height: 24px;
|
|
|
+ padding: .22rem .55rem;
|
|
|
+ border-radius: 999px;
|
|
|
+ font-size: .7rem;
|
|
|
+ font-weight: 800;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-badge-info {
|
|
|
+ background: #edf2f7;
|
|
|
+ color: #475569;
|
|
|
+ border-color: #dbe3ee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-badge-warning {
|
|
|
+ background: #f6ecd2;
|
|
|
+ color: #8a6a1f;
|
|
|
+ border-color: #ead9a7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-badge-danger {
|
|
|
+ background: #fee2e2;
|
|
|
+ color: #991b1b;
|
|
|
+ border-color: #fecaca;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-badge-success {
|
|
|
+ background: #dcfce7;
|
|
|
+ color: #166534;
|
|
|
+ border-color: #bbf7d0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Mahnstufen */
|
|
|
+
|
|
|
+ .gc-mahnstufe-1 {
|
|
|
+ background: #fee2e2 !important;
|
|
|
+ color: #991b1b !important;
|
|
|
+ border-color: #fecaca !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-mahnstufe-2 {
|
|
|
+ background: #fecaca !important;
|
|
|
+ color: #7f1d1d !important;
|
|
|
+ border-color: #fca5a5 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-mahnstufe-3 {
|
|
|
+ background: #dc2626 !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ border-color: #991b1b !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Wiedervorlage */
|
|
|
+
|
|
|
+ .gc-wv-overdue {
|
|
|
+ background: #fee2e2 !important;
|
|
|
+ color: #991b1b !important;
|
|
|
+ border-color: #fecaca !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-wv-today {
|
|
|
+ background: #f6ecd2 !important;
|
|
|
+ color: #8a6a1f !important;
|
|
|
+ border-color: #ead9a7 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-wv-future {
|
|
|
+ background: #dcfce7 !important;
|
|
|
+ color: #166534 !important;
|
|
|
+ border-color: #bbf7d0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Infinite Scroll */
|
|
|
+
|
|
|
+ .gc-load-sentinel,
|
|
|
+ .gc-load-sentinel td {
|
|
|
+ height: 1px !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ border: 0 !important;
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Detailseite Layout */
|
|
|
+
|
|
|
+ .gc-case-header,
|
|
|
+ .gc-panel,
|
|
|
+ .gc-case-summary {
|
|
|
+ padding: 1.25rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-case-summary .gc-panel-title {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ font-size: .85rem;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #334155;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-summary-section {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-summary-label {
|
|
|
+ font-size: .72rem;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #64748b;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: .05em;
|
|
|
+ margin-bottom: .15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-summary-main {
|
|
|
+ font-size: .98rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #172033;
|
|
|
+ line-height: 1.25;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-summary-sub {
|
|
|
+ font-size: .85rem;
|
|
|
+ color: #64748b;
|
|
|
+ margin-top: .15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-summary-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: .75rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-summary-value {
|
|
|
+ font-size: .98rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #172033;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-case-summary hr {
|
|
|
+ margin: 1.25rem 0;
|
|
|
+ border-color: #e6eaf0;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-grid {
|
|
|
+ display: grid !important;
|
|
|
+ grid-template-columns: 320px minmax(600px, 1fr) 360px !important;
|
|
|
+ gap: 1rem !important;
|
|
|
+ align-items: start !important;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-grid > .gc-case-summary {
|
|
|
+ grid-column: 1 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-grid > .gc-detail-main {
|
|
|
+ grid-column: 2 !important;
|
|
|
+ min-width: 0 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-grid > .gc-action-panel {
|
|
|
+ grid-column: 3 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ position: sticky !important;
|
|
|
+ top: calc(var(--gc-topbar-height) + 1rem) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-accordion-clean .accordion-item {
|
|
|
+ border: 1px solid var(--gc-border);
|
|
|
+ border-radius: var(--gc-radius-md) !important;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: .75rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Chat / Timeline */
|
|
|
+
|
|
|
+ .gc-detail-main .chat-container {
|
|
|
+ height: calc(100vh - var(--gc-topbar-height) - 15rem);
|
|
|
+ max-height: 620px;
|
|
|
+ min-height: 420px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(226, 232, 240, .95);
|
|
|
+ border-radius: var(--gc-radius-lg);
|
|
|
+ box-shadow: var(--gc-shadow-sm);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .header {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: .85rem 1rem;
|
|
|
+ background: #ffffff;
|
|
|
+ border-bottom: 1px solid #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: .75rem;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .avatar {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ flex: 0 0 32px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: #e5e7eb;
|
|
|
+ color: #ffffff;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: .72rem;
|
|
|
+ font-weight: 900;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .course-title {
|
|
|
+ font-size: .95rem;
|
|
|
+ font-weight: 850;
|
|
|
+ color: #111827;
|
|
|
+ line-height: 1.25;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .course-participants {
|
|
|
+ margin-top: .1rem;
|
|
|
+ font-size: .76rem;
|
|
|
+ color: #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .header-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: .35rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .icon-button {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #f8fafc;
|
|
|
+ color: #64748b;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .icon-button:hover {
|
|
|
+ background: #eef2f7;
|
|
|
+ color: #334155;
|
|
|
+ border-color: #cbd5e1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .tabs {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ display: flex;
|
|
|
+ gap: .35rem;
|
|
|
+ padding: .65rem .85rem;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-bottom: 1px solid #e5e7eb;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .tab {
|
|
|
+ padding: .38rem .65rem;
|
|
|
+ border-radius: 999px;
|
|
|
+ font-size: .75rem;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #64748b;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .tab.active {
|
|
|
+ background: #64748b;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .chat-content {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 1rem;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .date-divider {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: .75rem;
|
|
|
+ margin: .4rem 0 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .divider-line {
|
|
|
+ flex: 1;
|
|
|
+ height: 1px;
|
|
|
+ background: #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .divider-text {
|
|
|
+ font-size: .7rem;
|
|
|
+ font-weight: 850;
|
|
|
+ color: #64748b;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: .04em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message {
|
|
|
+ max-width: 78%;
|
|
|
+ margin-bottom: .85rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message.teacher,
|
|
|
+ .chat-container .message.Fibu,
|
|
|
+ .chat-container .message.fibu {
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message.student,
|
|
|
+ .chat-container .message.Abteilung,
|
|
|
+ .chat-container .message.abteilung {
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: .45rem;
|
|
|
+ margin-bottom: .3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .sender-name {
|
|
|
+ font-size: .76rem;
|
|
|
+ font-weight: 850;
|
|
|
+ color: #334155;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .timestamp {
|
|
|
+ font-size: .7rem;
|
|
|
+ color: #94a3b8;
|
|
|
+ margin-left: .25rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message-bubble {
|
|
|
+ display: inline-block;
|
|
|
+ padding: .65rem .85rem;
|
|
|
+ border-radius: 15px;
|
|
|
+ font-size: .86rem;
|
|
|
+ line-height: 1.42;
|
|
|
+ background: #f1f5f9;
|
|
|
+ color: #172033;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message.student .message-bubble,
|
|
|
+ .chat-container .message.Abteilung .message-bubble,
|
|
|
+ .chat-container .message.abteilung .message-bubble {
|
|
|
+ background: #f8fafc;
|
|
|
+ color: #172033;
|
|
|
+ border-color: #cbd5e1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message.teacher .message-bubble,
|
|
|
+ .chat-container .message.Fibu .message-bubble,
|
|
|
+ .chat-container .message.fibu .message-bubble {
|
|
|
+ background: #ffffff;
|
|
|
+ color: #172033;
|
|
|
+ border-color: #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .input-area {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ min-height: 46px;
|
|
|
+ padding: .6rem .85rem;
|
|
|
+ background: #ffffff;
|
|
|
+ border-top: 1px solid #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .toolbar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: .5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .tool-button {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px dashed #cbd5e1;
|
|
|
+ background: #f8fafc;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Responsive */
|
|
|
+
|
|
|
+ @media (max-width: 1200px) {
|
|
|
+ .gc-detail-grid {
|
|
|
+ grid-template-columns: 1fr !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-grid > .gc-case-summary,
|
|
|
+ .gc-detail-grid > .gc-detail-main,
|
|
|
+ .gc-detail-grid > .gc-action-panel {
|
|
|
+ grid-column: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-grid > .gc-action-panel {
|
|
|
+ position: static !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-main .chat-container {
|
|
|
+ height: auto;
|
|
|
+ min-height: 520px;
|
|
|
+ max-height: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 992px) {
|
|
|
+ body {
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-shell {
|
|
|
+ min-height: 100vh;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-page {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-table-wrap {
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* =========================================================
|
|
|
+ HAUPTSEITE: SINNVOLLERE SPALTENBREITEN
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+.gc-table {
|
|
|
+ min-width: 1380px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Aktion */
|
|
|
+ .gc-table th:nth-child(1),
|
|
|
+ .gc-table td:nth-child(1) {
|
|
|
+ width: 54px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Filiale / Bereich */
|
|
|
+ .gc-table th:nth-child(2),
|
|
|
+ .gc-table td:nth-child(2) {
|
|
|
+ width: 115px;
|
|
|
+ max-width: 115px;
|
|
|
+ white-space: normal !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Kunde */
|
|
|
+ .gc-table th:nth-child(3),
|
|
|
+ .gc-table td:nth-child(3) {
|
|
|
+ width: 230px;
|
|
|
+ min-width: 230px;
|
|
|
+ padding-left: 8px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Verursacher */
|
|
|
+ .gc-table th:nth-child(4),
|
|
|
+ .gc-table td:nth-child(4) {
|
|
|
+ width: 145px;
|
|
|
+ min-width: 145px;
|
|
|
+ padding-left: 6px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* RG-Nr. */
|
|
|
+ .gc-table th:nth-child(5),
|
|
|
+ .gc-table td:nth-child(5) {
|
|
|
+ width: 118px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* RG-Datum / Fällig */
|
|
|
+ .gc-table th:nth-child(6),
|
|
|
+ .gc-table td:nth-child(6) {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* RG-Betrag */
|
|
|
+ .gc-table th:nth-child(7),
|
|
|
+ .gc-table td:nth-child(7) {
|
|
|
+ width: 105px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* offen / Kunde ges. */
|
|
|
+ .gc-table th:nth-child(8),
|
|
|
+ .gc-table td:nth-child(8) {
|
|
|
+ width: 155px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Mahnstufe / Staffel */
|
|
|
+ .gc-table th:nth-child(9),
|
|
|
+ .gc-table td:nth-child(9) {
|
|
|
+ width: 125px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Abw. */
|
|
|
+ .gc-table th:nth-child(10),
|
|
|
+ .gc-table td:nth-child(10) {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Kommentar Fibu */
|
|
|
+ .gc-table th:nth-child(11),
|
|
|
+ .gc-table td:nth-child(11) {
|
|
|
+ width: 165px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Kommentar Abteilung */
|
|
|
+ .gc-table th:nth-child(12),
|
|
|
+ .gc-table td:nth-child(12) {
|
|
|
+ width: 165px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Wiedervorlage */
|
|
|
+ .gc-table th:nth-child(13),
|
|
|
+ .gc-table td:nth-child(13) {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Abw. wieder im alten Gelb */
|
|
|
+ .gc-table td:nth-child(10) .gc-badge-warning {
|
|
|
+ background: #fef3c7 !important;
|
|
|
+ color: #92400e !important;
|
|
|
+ border-color: #fde68a !important;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ /* =========================================================
|
|
|
+ EDIT BUTTON LINKS HELLER
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+.gc-table td:first-child button,
|
|
|
+.gc-table td:first-child .btn,
|
|
|
+.gc-table td:first-child a {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 12px !important;
|
|
|
+ border: 1px solid #d6dee8 !important;
|
|
|
+
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ #9db0c2 0%,
|
|
|
+ #879caf 100%
|
|
|
+ ) !important;
|
|
|
+
|
|
|
+ color: #ffffff !important;
|
|
|
+
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgba(255,255,255,.28),
|
|
|
+ 0 2px 6px rgba(15,23,42,.08);
|
|
|
+
|
|
|
+ transition: all .18s ease;
|
|
|
+}
|
|
|
+
|
|
|
+/* Hover */
|
|
|
+.gc-table td:first-child button:hover,
|
|
|
+.gc-table td:first-child .btn:hover,
|
|
|
+.gc-table td:first-child a:hover {
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ #a8b9c9 0%,
|
|
|
+ #92a6b8 100%
|
|
|
+ ) !important;
|
|
|
+
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+/* Icon */
|
|
|
+.gc-table td:first-child i,
|
|
|
+.gc-table td:first-child svg {
|
|
|
+ color: #ffffff !important;
|
|
|
+ font-size: .9rem;
|
|
|
+}
|
|
|
+/* =========================================================
|
|
|
+ DETAILSEITE: CHATVERLAUF OPTISCH AUFWERTEN
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+.chat-container {
|
|
|
+ background: #ffffff !important;
|
|
|
+ border-radius: 22px !important;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .chat-content {
|
|
|
+ background:
|
|
|
+ radial-gradient(circle at top left, rgba(148, 163, 184, .16), transparent 22rem),
|
|
|
+ linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
|
|
|
+ padding: 1.25rem 1.5rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .date-divider {
|
|
|
+ margin: 1.25rem 0 1.5rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .divider-line {
|
|
|
+ background: #cbd5e1 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .divider-text {
|
|
|
+ color: #64748b !important;
|
|
|
+ font-weight: 900 !important;
|
|
|
+ font-size: .76rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message {
|
|
|
+ margin-bottom: 1.15rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message-header {
|
|
|
+ margin-bottom: .4rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message-header .avatar {
|
|
|
+ width: 34px !important;
|
|
|
+ height: 34px !important;
|
|
|
+ min-width: 34px !important;
|
|
|
+ background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%) !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ border: 2px solid #ffffff !important;
|
|
|
+ box-shadow: 0 3px 10px rgba(15, 23, 42, .10) !important;
|
|
|
+ font-size: .68rem !important;
|
|
|
+ text-transform: uppercase;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .sender-name {
|
|
|
+ color: #172033 !important;
|
|
|
+ font-weight: 850 !important;
|
|
|
+ font-size: .86rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .timestamp {
|
|
|
+ color: #94a3b8 !important;
|
|
|
+ font-size: .72rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message-bubble {
|
|
|
+ background: #ffffff !important;
|
|
|
+ color: #1e293b !important;
|
|
|
+ border: 1px solid #dbe3ee !important;
|
|
|
+ border-radius: 16px 16px 16px 6px !important;
|
|
|
+ padding: .72rem .95rem !important;
|
|
|
+ box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important;
|
|
|
+ line-height: 1.45 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .message-bubble:hover {
|
|
|
+ border-color: #cbd5e1 !important;
|
|
|
+ box-shadow: 0 8px 22px rgba(15, 23, 42, .09) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Nachrichten rechts / Abteilung etwas anders einfärben */
|
|
|
+ .chat-container .message.student .message-bubble,
|
|
|
+ .chat-container .message.Abteilung .message-bubble,
|
|
|
+ .chat-container .message.abteilung .message-bubble {
|
|
|
+ background: #f8fafc;
|
|
|
+ border-color: #e2e8f0;
|
|
|
+ border-radius: 16px 16px 6px 16px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Fibu / Standard links */
|
|
|
+ .chat-container .message.teacher .message-bubble,
|
|
|
+ .chat-container .message.Fibu .message-bubble,
|
|
|
+ .chat-container .message.fibu .message-bubble {
|
|
|
+ background: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Tabs schöner */
|
|
|
+ .chat-container .tabs {
|
|
|
+ background: #f8fafc !important;
|
|
|
+ border-bottom: 1px solid #e2e8f0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .tab {
|
|
|
+ color: #64748b !important;
|
|
|
+ font-weight: 850 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container .tab.active {
|
|
|
+ background: #64748b !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ box-shadow: 0 4px 10px rgba(15, 23, 42, .10) !important;
|
|
|
+ }
|
|
|
+ /* =========================================================
|
|
|
+ BUTTONS: KEIN ZEILENUMBRUCH
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+.gc-action-btn,
|
|
|
+.gc-action-btn span,
|
|
|
+.gc-action-btn button,
|
|
|
+.btn {
|
|
|
+ white-space: nowrap !important;
|
|
|
+}
|
|
|
+/* =========================================================
|
|
|
+ RECHTE WORKFLOW-SPALTE:
|
|
|
+ KEINE ZEILENUMBRÜCHE
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+.gc-action-panel button,
|
|
|
+.gc-action-panel .btn,
|
|
|
+.gc-action-panel .gc-badge,
|
|
|
+.gc-action-panel label,
|
|
|
+.gc-action-panel .form-label,
|
|
|
+.gc-action-panel .form-check-label,
|
|
|
+.gc-action-panel select,
|
|
|
+.gc-action-panel option {
|
|
|
+ white-space: nowrap !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* Buttons breiter */
|
|
|
+.gc-action-panel .btn {
|
|
|
+ min-width: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Labels links etwas breiter */
|
|
|
+.gc-action-panel .row > div:first-child,
|
|
|
+.gc-action-panel .col-form-label {
|
|
|
+ min-width: 125px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Eingabefelder sauber ausrichten */
|
|
|
+.gc-action-panel .form-control,
|
|
|
+.gc-action-panel .form-select {
|
|
|
+ min-width: 110px;
|
|
|
+}
|
|
|
+.gc-action-panel .btn:last-child {
|
|
|
+ min-width: auto !important;
|
|
|
+ width: auto !important;
|
|
|
+ padding: .45rem .8rem !important;
|
|
|
+ font-size: .92rem !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* =========================================================
|
|
|
+ BETRAGS-BUTTON RECHTS – EDLER
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+.gc-action-panel .btn-primary,
|
|
|
+.gc-action-panel .btn-success,
|
|
|
+.gc-action-panel .btn-purple {
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ #64748b 0%,
|
|
|
+ #475569 100%
|
|
|
+ ) !important;
|
|
|
+
|
|
|
+ border: 1px solid #475569 !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+
|
|
|
+ box-shadow:
|
|
|
+ 0 4px 12px rgba(15,23,42,.12),
|
|
|
+ inset 0 1px 0 rgba(255,255,255,.12);
|
|
|
+
|
|
|
+ min-width: auto !important;
|
|
|
+ width: auto !important;
|
|
|
+
|
|
|
+ padding: .45rem .8rem !important;
|
|
|
+ font-size: .92rem !important;
|
|
|
+ border-radius: 10px !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* Hover */
|
|
|
+.gc-action-panel .btn-primary:hover,
|
|
|
+.gc-action-panel .btn-success:hover,
|
|
|
+.gc-action-panel .btn-purple:hover {
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ #718197 0%,
|
|
|
+ #526174 100%
|
|
|
+ ) !important;
|
|
|
+
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+/* =========================================================
|
|
|
+ DETAILSEITE: SEITE BEI AUFGEKLAPPTEN BOXEN SCROLLBAR
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+body {
|
|
|
+ overflow-y: auto !important;
|
|
|
+ overflow-x: hidden !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-shell {
|
|
|
+ min-height: 100vh !important;
|
|
|
+ height: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-page {
|
|
|
+ min-height: calc(100vh - var(--gc-topbar-height)) !important;
|
|
|
+ height: auto !important;
|
|
|
+ overflow: visible !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-grid {
|
|
|
+ align-items: start !important;
|
|
|
+ overflow: visible !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-main,
|
|
|
+ .gc-case-summary,
|
|
|
+ .gc-action-panel {
|
|
|
+ overflow: visible !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Falls Accordion/Boxen innen abgeschnitten werden */
|
|
|
+ .accordion,
|
|
|
+ .accordion-item,
|
|
|
+ .accordion-collapse,
|
|
|
+ .accordion-body,
|
|
|
+ .collapse,
|
|
|
+ .show {
|
|
|
+ overflow: visible !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Chat bleibt trotzdem intern scrollbar */
|
|
|
+ .gc-detail-main .chat-container {
|
|
|
+ overflow: hidden !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gc-detail-main .chat-content {
|
|
|
+ overflow-y: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+/* =========================================================
|
|
|
+ DETAILSEITE – ALLE AUFKLAPPBAREN BOXEN WIE "MAHNUNGEN"
|
|
|
+ Inhalt bleibt in der Box, horizontaler Scroll erlaubt
|
|
|
+========================================================= */
|
|
|
+
|
|
|
+.gc-detail-main .accordion-item,
|
|
|
+.gc-detail-main .accordion-collapse,
|
|
|
+.gc-detail-main .accordion-body {
|
|
|
+ max-width: 100% !important;
|
|
|
+ overflow: hidden !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gc-detail-main .accordion-body {
|
|
|
+ overflow-x: auto !important;
|
|
|
+ overflow-y: visible !important;
|
|
|
+ padding: 1rem !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* Tabellen dürfen breiter sein, aber sprengen nicht mehr die Box */
|
|
|
+.gc-detail-main .accordion-body table {
|
|
|
+ width: max-content !important;
|
|
|
+ min-width: 100% !important;
|
|
|
+ max-width: none !important;
|
|
|
+ table-layout: auto !important;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* Zellen kompakt */
|
|
|
+.gc-detail-main .accordion-body table th,
|
|
|
+.gc-detail-main .accordion-body table td {
|
|
|
+ padding: .55rem .65rem !important;
|
|
|
+ vertical-align: top !important;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+/* Lange Beschreibungen dürfen umbrechen */
|
|
|
+.gc-detail-main .accordion-body table td:nth-child(4) {
|
|
|
+ white-space: normal !important;
|
|
|
+ min-width: 180px;
|
|
|
+ max-width: 260px;
|
|
|
+}
|
|
|
+
|
|
|
+/* Horizontaler Scroll optisch sauber */
|
|
|
+.gc-detail-main .accordion-body::-webkit-scrollbar {
|
|
|
+ height: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.gc-detail-main .accordion-body::-webkit-scrollbar-track {
|
|
|
+ background: #eef2f7;
|
|
|
+ border-radius: 999px;
|
|
|
+}
|
|
|
+
|
|
|
+.gc-detail-main .accordion-body::-webkit-scrollbar-thumb {
|
|
|
+ background: #cbd5e1;
|
|
|
+ border-radius: 999px;
|
|
|
+}
|
|
|
+
|
|
|
+.gc-detail-main .accordion-body::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #94a3b8;
|
|
|
+}
|
gc-server3