Reisacher-Forderung/static/assets/css/redesign.css

: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: #008 !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, .gc-badge-1 {
    background: #f6ecd2;
    color: #8a6a1f;
    border-color: #ead9a7;
  }
  
  .gc-badge-danger, .gc-badge-2 {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
  }
  
  .gc-badge-success, .gc-badge-0 {
    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(12),
  .gc-table td:nth-child(12) {
    width: 54px;
  }
  
  /* Filiale / Bereich */
  .gc-table th:nth-child(1),
  .gc-table td:nth-child(1) {
    width: 115px;
    max-width: 115px;
    white-space: normal !important;
  }
  
  /* Verursacher */
  .gc-table th:nth-child(2),
  .gc-table td:nth-child(2) {
    width: 145px;
    min-width: 145px;
    padding-left: 6px !important;
  }
  
  /* RG-Nr. */
  .gc-table th:nth-child(3),
  .gc-table td:nth-child(3) {
    width: 118px;
  }
  
  /* RG-Datum / Fällig */
  .gc-table th:nth-child(4),
  .gc-table td:nth-child(4) {
    width: 120px;
  }
  
  /* Kunde */
  .gc-table th:nth-child(5),
  .gc-table td:nth-child(5) {
    width: 230px;
    min-width: 230px;
    padding-left: 8px !important;
  }  

  /* offen / Kunde ges. */
  .gc-table th:nth-child(6),
  .gc-table td:nth-child(6) {
    width: 155px;
  }
  
  /* Mahnstufe / Staffel */
  .gc-table th:nth-child(7),
  .gc-table td:nth-child(7) {
    width: 125px;
  }
  
  /* Abw. */
  .gc-table th:nth-child(8),
  .gc-table td:nth-child(8) {
    width: 80px;
  }
  
  /* Kommentar Fibu */
  .gc-table th:nth-child(9),
  .gc-table td:nth-child(9) {
    width: 165px;
  }
  
  /* Kommentar Abteilung */
  .gc-table th:nth-child(10),
  .gc-table td:nth-child(10) {
    width: 165px;
  }
  
  /* Wiedervorlage */
  .gc-table th:nth-child(11),
  .gc-table td:nth-child(11) {
    width: 120px;
  }
  
  /* Abw. wieder im alten Gelb */
  .gc-table td:nth-child(8) .gc-badge-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
    text-align: left;
  }
  /* =========================================================
   EDIT BUTTON LINKS HELLER
========================================================= */

.gc-table td:nth-child(12) button,
.gc-table td:nth-child(12) .btn,
.gc-table td:nth-child(12) 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:nth-child(12) button:hover,
.gc-table td:nth-child(12) .btn:hover,
.gc-table td:nth-child(12) a:hover {
  background: linear-gradient(
    180deg,
    #a8b9c9 0%,
    #92a6b8 100%
  ) !important;

  transform: translateY(-1px);
}

/* Icon */
.gc-table td:nth-child(12) i,
.gc-table td:nth-child(12) 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);
}

.btn-warning {
  background-color: #e80;
}

/* =========================================================
   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;
}

.gc-link {
  color: #008;
}