: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-container2 { 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-container2 .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-container2 .header-left { display: flex; align-items: center; gap: .75rem; min-width: 0; } .chat-container2 .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-container2 .course-title { font-size: .95rem; font-weight: 850; color: #111827; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-container2 .course-participants { margin-top: .1rem; font-size: .76rem; color: #64748b; } .chat-container2 .header-actions { display: flex; align-items: center; gap: .35rem; } .chat-container2 .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-container2 .icon-button:hover { background: #eef2f7; color: #334155; border-color: #cbd5e1; } .chat-container2 .tabs { flex: 0 0 auto; display: flex; gap: .35rem; padding: .65rem .85rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb; overflow-x: auto; } .chat-container2 .tab { padding: .38rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; color: #64748b; white-space: nowrap; } .chat-container2 .tab.active { background: #64748b; color: #ffffff; } .chat-container2 .chat-content { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .chat-container2 .date-divider { display: flex; align-items: center; gap: .75rem; margin: .4rem 0 1rem; } .chat-container2 .divider-line { flex: 1; height: 1px; background: #e5e7eb; } .chat-container2 .divider-text { font-size: .7rem; font-weight: 850; color: #64748b; text-transform: uppercase; letter-spacing: .04em; } .chat-container2 .message { max-width: 78%; margin-bottom: .85rem; } .chat-container2 .message.teacher, .chat-container2 .message.Fibu, .chat-container2 .message.fibu { margin-right: auto; } .chat-container2 .message.student, .chat-container2 .message.Abteilung, .chat-container2 .message.abteilung { margin-left: auto; } .chat-container2 .message-header { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; } .chat-container2 .sender-name { font-size: .76rem; font-weight: 850; color: #334155; } .chat-container2 .timestamp { font-size: .7rem; color: #94a3b8; margin-left: .25rem; } .chat-container2 .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-container2 .message.student .message-bubble, .chat-container2 .message.Abteilung .message-bubble, .chat-container2 .message.abteilung .message-bubble { background: #f8fafc; color: #172033; border-color: #cbd5e1; } .chat-container2 .message.teacher .message-bubble, .chat-container2 .message.Fibu .message-bubble, .chat-container2 .message.fibu .message-bubble { background: #ffffff; color: #172033; border-color: #e2e8f0; } .chat-container2 .input-area { flex: 0 0 auto; min-height: 46px; padding: .6rem .85rem; background: #ffffff; border-top: 1px solid #e5e7eb; } .chat-container2 .toolbar { display: flex; align-items: center; gap: .5rem; } .chat-container2 .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-container2 { 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-container2 { background: #ffffff !important; border-radius: 22px !important; overflow: hidden; } .chat-container2 .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-container2 .date-divider { margin: 1.25rem 0 1.5rem !important; } .chat-container2 .divider-line { background: #cbd5e1 !important; } .chat-container2 .divider-text { color: #64748b !important; font-weight: 900 !important; font-size: .76rem !important; } .chat-container2 .message { margin-bottom: 1.15rem !important; } .chat-container2 .message-header { margin-bottom: .4rem !important; } .chat-container2 .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-container2 .sender-name { color: #172033 !important; font-weight: 850 !important; font-size: .86rem !important; } .chat-container2 .timestamp { color: #94a3b8 !important; font-size: .72rem !important; } .chat-container2 .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-container2 .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-container2 .message.student .message-bubble, .chat-container2 .message.Abteilung .message-bubble, .chat-container2 .message.abteilung .message-bubble { background: #f8fafc; border-color: #e2e8f0; border-radius: 16px 16px 6px 16px !important; } /* Fibu / Standard links */ .chat-container2 .message.teacher .message-bubble, .chat-container2 .message.Fibu .message-bubble, .chat-container2 .message.fibu .message-bubble { background: #ffffff !important; } /* Tabs schöner */ .chat-container2 .tabs { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; } .chat-container2 .tab { color: #64748b !important; font-weight: 850 !important; } .chat-container2 .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-container2 { 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; }