/* ── CCTable — gemeinsame Tabellen-Komponente (Admin + öffentlich) ──────────
   Neutral gehalten (graue Chrome-Elemente), nutzt var(--cc-primary) für Akzente,
   damit sie sich automatisch an den jeweiligen Kontext (Admin-Grau vs. Public-
   Rot) anpasst, ohne dass diese Datei zwei Varianten braucht. */

.cct-root { font-size: 13px; }

.cct-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cct-search {
    flex: 0 1 280px; padding:7px 11px; border:1px solid var(--cc-gray-200,#e5e7eb);
    border-radius:6px; font-size:13px;
}
.cct-reset {
    padding:6px 12px; font-size:12px; font-weight:600; border-radius:6px; cursor:pointer;
    background:#fff; border:1px solid var(--cc-primary,#6b7280); color:var(--cc-primary,#6b7280);
}
.cct-spacer { flex:1; }
.cct-btn {
    padding:7px 14px; font-size:12.5px; font-weight:600; border-radius:6px; cursor:pointer;
    background:#fff; border:1px solid var(--cc-gray-200,#e5e7eb); color:var(--cc-gray-700,#374151);
}
.cct-btn:hover { border-color:var(--cc-primary,#9ca3af); }
.cct-add { background:var(--cc-primary,#374151); color:#fff; border-color:var(--cc-primary,#374151); }

.cct-bulk-bar {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 12px;
    background:color-mix(in srgb, var(--cc-primary,#6b7280) 8%, white);
    border:1px solid color-mix(in srgb, var(--cc-primary,#6b7280) 25%, white);
    border-radius:6px; margin-bottom:6px; font-size:12.5px;
}
.cct-bulk-cnt { font-weight:700; color:var(--cc-primary,#374151); }

.cct-scrolltop { overflow-x:auto; overflow-y:hidden; height:14px; margin-bottom:2px; }
.cct-scrolltop-inner { height:1px; }

.cct-wrap {
    overflow-x:auto; border:1px solid var(--cc-gray-200,#e5e7eb); border-radius:8px; background:#fff;
    scrollbar-width:thin; scrollbar-color:var(--cc-gray-300,#d1d5db) transparent;
}
.cct-wrap::-webkit-scrollbar { height:5px; }
.cct-wrap::-webkit-scrollbar-track { background:transparent; }
.cct-wrap::-webkit-scrollbar-thumb { background:var(--cc-gray-300,#d1d5db); border-radius:3px; }

.cct-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13px; }
.cct-table th {
    background:var(--cc-gray-50,#f9fafb); padding:7px 10px; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; color:var(--cc-gray-500,#6b7280);
    border-bottom:2px solid var(--cc-gray-200,#e5e7eb); text-align:left; white-space:nowrap;
}
.cct-table th.cct-sort { cursor:pointer; }
.cct-table th.cct-sort:hover { color:var(--cc-gray-800,#1f2937); }
.cct-sort-ind { display:inline-block; width:9px; }
.cct-table td {
    padding:6px 10px; border-bottom:1px solid var(--cc-gray-100,#f1f1f1); vertical-align:middle;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cct-table tbody tr:nth-child(even) td { background:var(--cc-gray-50,#fafafa); }
.cct-table tbody tr.cct-clickable { cursor:pointer; }
.cct-table tbody tr.cct-clickable:hover td { background:color-mix(in srgb, var(--cc-primary,#6b7280) 6%, white); }
.cct-empty { text-align:center; color:var(--cc-gray-400,#9ca3af); padding:16px; }
.cct-check-col { width:28px; text-align:center; }
.cct-muted { color:var(--cc-gray-400,#9ca3af); font-variant-numeric:tabular-nums; }
.cct-strong { font-weight:600; color:var(--cc-gray-800,#1f2937); }

.cct-frozen-thead { position:fixed; z-index:95; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.cct-frozen-thead th { cursor:default; }

.cct-page-bar { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12.5px; }
.cct-page-bar button {
    width:26px; height:26px; border-radius:6px; border:1px solid var(--cc-gray-200,#e5e7eb);
    background:#fff; cursor:pointer;
}
.cct-page-bar button:disabled { opacity:.4; cursor:default; }
.cct-page-info { color:var(--cc-gray-500,#6b7280); }
.cct-page-size { padding:5px 8px; border:1px solid var(--cc-gray-200,#e5e7eb); border-radius:6px; font-size:12.5px; }

.cct-sortsel {
    display:none; padding:7px 10px; border:1px solid var(--cc-gray-200,#e5e7eb);
    border-radius:6px; font-size:13px; background:#fff;
}

.cct-detail-btn {
    padding:3px 10px; font-size:11px; font-weight:600; border-radius:6px; cursor:pointer;
    background:#fff; border:1px solid var(--cc-gray-200,#e5e7eb); color:var(--cc-primary,#374151); white-space:nowrap;
}
.cct-detail-btn:hover { border-color:var(--cc-primary,#9ca3af); }
.cct-detail-btn.open { background:var(--cc-primary,#374151); color:#fff; border-color:var(--cc-primary,#374151); }
.cct-table tbody tr.cct-detail-row > td {
    background:var(--cc-gray-50,#f9fafb); padding:12px 14px; white-space:normal; overflow:visible;
}
.cct-detail-box { overflow-x:auto; }

/* Aufgeklappter Block deutlich abgesetzt: Rahmen in der Akzentfarbe, geoeffnete Zeile getoent */
.cct-table tbody tr.cct-open td { background:color-mix(in srgb, var(--cc-primary,#6b7280) 8%, white); }
.cct-table tbody tr.cct-open td:first-child { box-shadow:inset 3px 0 0 var(--cc-primary,#6b7280); }
.cct-detail-frame {
    border:2px solid var(--cc-primary,#6b7280); border-radius:8px; background:#fff; padding:10px 12px;
}
.cct-detail-box .cct-wrap { border:none; background:transparent; }
/* Verschachtelte Detailtabelle: Spaltenbreite nach Inhalt statt gleichmaessig, Text umbrechen
   statt mit "…" abzuschneiden; schmale Spalten (th.cct-fit) bleiben so schmal wie ihr Inhalt. */
.cct-detail-box .cct-table { table-layout:auto; }
.cct-detail-box .cct-table td { white-space:normal; overflow:visible; text-overflow:clip; }
.cct-detail-box .cct-table th.cct-fit, .cct-detail-box .cct-table td.cct-fit { width:1%; white-space:nowrap; }
.cct-detail-foot { text-align:right; margin-top:6px; }
.cct-detail-close {
    padding:4px 12px; font-size:11.5px; font-weight:600; border-radius:6px; cursor:pointer;
    background:#fff; border:1px solid var(--cc-primary,#6b7280); color:var(--cc-primary,#374151);
}
.cct-detail-close:hover { background:var(--cc-primary,#374151); color:#fff; }

/* Ein Layout fuer Laptop und Handy: unter 640px wird jede Zeile automatisch zu
   einer kompakten Karte (Beschriftung links, Wert rechts) — kein Seitwaertswischen,
   nichts ausgeblendet. Sortierung ueber die Auswahlliste statt Spaltenkopf. */
@media (max-width: 640px) {
    .cct-toolbar { flex-direction:column; align-items:stretch; }
    .cct-search { flex:1 1 auto; }
    .cct-sortsel { display:block; }
    .cct-scrolltop { display:none; }

    .cct-table, .cct-table tbody { display:block; min-width:0; }
    .cct-table thead { display:none; }
    .cct-table tbody tr { display:block; padding:8px 12px; border-bottom:1px solid var(--cc-gray-200,#e5e7eb); }
    .cct-table tbody tr:nth-child(even) { background:var(--cc-gray-50,#fafafa); }
    /* Einheitlich: "Beschriftung:" in fester Spalte, Werte alle darunter buendig linksbuendig */
    .cct-table tbody tr td,
    .cct-table tbody tr:nth-child(even) td {
        display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:8px; align-items:baseline;
        padding:2px 0; border:none; background:transparent; white-space:normal; text-align:left;
    }
    .cct-table td[data-label]:not([data-label=""])::before {
        content:attr(data-label) ":";
        font-weight:400; color:var(--cc-gray-500,#6b7280);
    }
    .cct-table tbody tr td[data-label=""],
    .cct-table tbody tr:nth-child(even) td[data-label=""] { display:block; }
    .cct-table tbody tr td.cct-blank { display:none; }
    .cct-table td.cct-detail-td { justify-content:flex-start; padding-bottom:6px; }
    .cct-table tbody tr.cct-detail-row { padding:0; }
    .cct-table tbody tr.cct-detail-row > td { display:block; text-align:left; padding:10px 12px; }
    .cct-table td.cct-empty { display:block; text-align:center; }

    /* Geoeffnete Karte: Akzent-Streifen links statt Zellen-Tint (Zellen sind hier transparent) */
    .cct-table tbody tr.cct-open { background:color-mix(in srgb, var(--cc-primary,#6b7280) 8%, white); box-shadow:inset 3px 0 0 var(--cc-primary,#6b7280); }
    .cct-table tbody tr.cct-open td:first-child { box-shadow:none; }
    .cct-detail-frame { padding:6px 8px; }

    /* Einzelspiel-Kacheln (verschachtelt in der Detailzeile) so kompakt wie die Listenkarten */
    .cct-table tbody tr.cct-detail-row > td { padding:6px 8px; }
    .cct-detail-box .cct-table tbody tr { padding:5px 10px; }
    .cct-detail-box .cct-table tbody tr td,
    .cct-detail-box .cct-table tbody tr:nth-child(even) td { padding:1px 0; line-height:1.3; }
}