/* ===========================================================
   pg-system.css - Pangea Verwaltungs-/Tool-System
   ===========================================================
   Geteilte Styles für Internal-Pages (M-V01-V0n).
   Eingeführt 2026-05-21 nach Felix-Feedback (Tabellen Excel-Stil,
   Section-Labels schwarz, kein Galerie-Look).

   Pflege:
   - Daten-Tabellen IMMER mit .pg-table (statt deprecated .int-table)
   - Section-Labels IMMER mit .pg-section-label (statt grauer Uppercase-h4)
   - Sticky Tab-Bars mit .pg-tabs[data-sticky]

   Palette: A3 Muted Navy
     #0D1117 Charcoal  | #253749 Slate     | #6B8EAD Muted Blue
     #E0E7EE Cloud     | #F4F5F4 Stone     | #FFFFFF White
     #0D1117 Body      | #555    Secondary | #888    Disabled

   Body war bis zum 06.08.2026 #1A1A1A, also ein zweites Schwarz neben
   Charcoal. In einer pg-Tabelle standen dadurch beide nebeneinander: die
   Namensspalte in #0D1117, die Zahlenspalte in #1A1A1A. Der Unterschied ist
   mit blossem Auge nicht zu sehen, aber er zaehlt als eigene Textfarbe und
   traegt zu genau der Unruhe bei, die Felix an den Modulseiten stoerte.
   Body ist jetzt Charcoal - eine Neutralfarbe weniger, ohne sichtbaren
   Bruch. Neue Regel: kein zweites Schwarz, siehe Rollen-Vertrag in
   public/styles/customer-dashboard.css.

   Cache-Bust beim Ändern: ?v=Datum hochzaehlen.
   =========================================================== */

/* ----- Page-Shell (Wrap unter dem Header) ----- */
.pg-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}
@media (max-width: 768px) {
    .pg-shell { padding: 24px 16px 64px; }
}

/* ----- Sticky Tab-Bar ----- */
.pg-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid #E0E7EE;
    background: #F4F5F4;
    margin: 0 -24px 24px;
    padding: 0 24px;
}
.pg-tabs[data-sticky="true"] {
    position: sticky;
    top: 0;
    z-index: 50;
}
.pg-tab {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 14px 13px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #555;
    cursor: pointer;
    margin-bottom: -1px;
}
.pg-tab:hover { color: #0D1117; }
.pg-tab[aria-current="true"],
.pg-tab.is-active {
    color: #0D1117;
    border-bottom-color: #253749;
}
@media (max-width: 768px) {
    .pg-tabs { margin: 0 -16px 18px; padding: 0 16px; }
    .pg-tab { padding: 10px 10px 11px; font-size: 11px; }
}

/* ----- Excel-Style-Tabelle ----- */
/* Felix-Feedback 2026-05-21: Daten-Tabellen brauchen Gitter, dichte Zeilen,
   schwarze Header in Mixed-Case. Galerie-Optik (graue Uppercase-Header,
   16-20px Padding, kein Gitter) ist deprecated. */
.pg-table-wrap {
    background: #fff;
    border: 1px solid #E0E7EE;
    border-radius: 3px;
    overflow-x: auto;
}
.pg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: #0D1117;
}
.pg-table thead th {
    background: #253749;
    color: #FFFFFF;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    border-right: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid #1A2832;
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    position: sticky;
    top: 0;
    z-index: 1;
}
.pg-table thead th:last-child { border-right: none; }
.pg-table tbody td {
    padding: 8px 12px;
    border-right: 1px solid #E0E7EE;
    border-bottom: 1px solid #E0E7EE;
    vertical-align: middle;
}
.pg-table tbody td:last-child { border-right: none; }
.pg-table tbody tr:last-child td { border-bottom: none; }
.pg-table tbody tr.pg-row { cursor: pointer; }
.pg-table tbody tr.pg-row:hover { background: #F8FAFB; }
.pg-table tbody tr.pg-row:focus-visible {
    outline: 2px solid #253749;
    outline-offset: -2px;
}

/* Spalten-Modifier */
.pg-table .pg-col-id {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #555;
    white-space: nowrap;
    width: 1%;
}
.pg-table .pg-col-name {
    font-weight: 600;
    color: #0D1117;
}
.pg-table .pg-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: 1%;
    white-space: nowrap;
}
.pg-table .pg-col-muted { color: #555; }
.pg-table .pg-col-trunc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-table-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    color: #555;
    margin: 10px 2px 0;
}

/* ----- Excel-Style-Spaltenfilter (Dropdown im Header) ----- */
/* Felix-Feedback 2026-05-21: Filter wie Excel - Pfeil im Spaltenheader,
   Klick öffnet Popover mit Multi-Select Checkboxen. AND-Verknuepfung
   über alle Spalten. */
.pg-table thead th {
    position: sticky; /* Header bleibt beim Scrollen oben */
}
.pg-th {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pg-th-filter {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    padding: 2px 4px;
    border-radius: 2px;
    cursor: pointer;
    color: rgba(255,255,255,0.65);
    line-height: 1;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
}
.pg-th-filter:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
}
.pg-th-filter[data-active="true"] {
    color: #FFFFFF;
    background: #253749;
    border-color: #253749;
}
.pg-th-filter svg { width: 10px; height: 10px; display: block; }

.pg-th-menu {
    position: absolute;
    z-index: 200;
    background: #fff;
    border: 1px solid #B0B0B0;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 10px;
    min-width: 200px;
    max-width: 280px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
}
.pg-th-menu[hidden] { display: none; }
.pg-th-menu-search {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #E0E7EE;
    border-radius: 2px;
    margin-bottom: 8px;
    font: inherit;
    color: #0D1117;
    background: #fff;
}
.pg-th-menu-search:focus { outline: none; border-color: #253749; }
.pg-th-menu-actions {
    display: flex;
    justify-content: space-between;
    padding: 0 2px 8px;
    border-bottom: 1px solid #E0E7EE;
    margin-bottom: 6px;
}
.pg-th-menu-action {
    background: none;
    border: none;
    color: #253749;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 2px 4px;
}
.pg-th-menu-action:hover { color: #253749; }
.pg-th-menu-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.pg-th-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    cursor: pointer;
    color: #0D1117;
    border-radius: 2px;
    user-select: none;
}
.pg-th-menu-item:hover { background: #F4F5F4; }
.pg-th-menu-item input {
    margin: 0;
    accent-color: #253749;
}
.pg-th-menu-empty {
    padding: 10px 6px;
    color: #888;
    font-size: 12px;
    text-align: center;
}

/* ----- Heatmap-Zellen (G8) -----
   Vereinheitlicht zwei divergente Ad-hoc-Heatmaps (Confidence-Heatmap im
   Pangea-Module-Hub, Risikodimensionen-Heatmap im Kunden-Risk-Modul) auf ein
   Klassen-Set. Basisklasse .pg-heat auf der Zelle (meist ein <td>), IMMER
   kombiniert mit genau einer Intensitäts- ODER Risiko-Modifier-Klasse.
   Kombinierbar mit .pg-table UND .hf-table (Kunden-Dashboard).

   Sequenziell (Coverage-/Score-Eskalation, monochrome Rampe aus den
   --pg-viz-Tokens, s1 hell -> s4 dunkel):
     .pg-heat--s1  .pg-heat--s2  .pg-heat--s3  .pg-heat--s4  .pg-heat--none

   Risiko-Ampel (Tint-Hintergrund aus den --pg-risk-Tokens @ ~10%, Text in
   voller Risikofarbe):
     .pg-heat--rvlow  .pg-heat--rlow  .pg-heat--rmed  .pg-heat--rhigh  .pg-heat--rvhigh

   Modifier-Regeln sind bewusst an .pg-heat gekettet (`.pg-heat.pg-heat--s1`
   statt `.pg-heat--s1` allein) - das hebt die Spezifität über bestehende
   Tabellen-Regeln, die auf denselben Zellen schon eine Textfarbe setzen
   (z.B. `.hf-table td { color: ... }`), ganz ohne !important. Markup braucht
   deshalb immer BEIDE Klassen zusammen: `class="pg-heat pg-heat--s1"`. */
.pg-heat {
    padding: 6px 10px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.pg-heat.pg-heat--none {
    background: var(--pg-bg);
    color: var(--pg-text-muted);
}
.pg-heat.pg-heat--s1 { background: var(--pg-viz-5); color: var(--pg-text); }
.pg-heat.pg-heat--s2 { background: var(--pg-viz-4); color: var(--pg-text); }
.pg-heat.pg-heat--s3 { background: var(--pg-viz-2); color: var(--pg-on-dark); }
.pg-heat.pg-heat--s4 { background: var(--pg-viz-1); color: var(--pg-on-dark); }

.pg-heat.pg-heat--rvlow,
.pg-heat.pg-heat--rlow,
.pg-heat.pg-heat--rmed,
.pg-heat.pg-heat--rhigh,
.pg-heat.pg-heat--rvhigh {
    font-weight: 700;
}
.pg-heat.pg-heat--rvlow  { background: rgba(77,124,90,0.1);  color: var(--pg-risk-vlow); }
.pg-heat.pg-heat--rlow   { background: rgba(122,142,58,0.1); color: var(--pg-risk-low); }
.pg-heat.pg-heat--rmed   { background: rgba(176,117,5,0.1);  color: var(--pg-risk-med); }
.pg-heat.pg-heat--rhigh  { background: rgba(187,77,0,0.1);   color: var(--pg-risk-high); }
.pg-heat.pg-heat--rvhigh { background: rgba(155,34,38,0.1);  color: var(--pg-risk-vhigh); }

/* ----- Grid-Rows (G9) -----
   Pseudo-Tabelle über display:grid statt <table>, für Zeilen mit gemischten
   Inhalts-Typen (Balken, Badges, Icons), wo eine echte <table> unpraktisch
   wäre. Container .pg-rows (weißer Card-Rahmen), Zeilen .pg-row-line (Grid-
   Mechanik + Trennlinie zur Zeile davor).

   Spalten sind bewusst NICHT Teil der Primitive - jede Verwendung setzt ihre
   eigenen Breiten über die --cols Custom Property, z.B.:
     <div class="pg-row-line" style="--cols: 180px 1fr 80px;">...</div>
   oder per eigener lokaler Modifier-Klasse, die nur `--cols` deklariert.
   Responsive Kollaps-Stufen (Spalten ausblenden/umschichten) bleiben lokal
   bei der jeweiligen Verwendung, nicht Teil dieser Primitive. */
.pg-rows {
    background: var(--pg-surface, #FFFFFF);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius, 3px);
    padding: 0;
    overflow: hidden;
}
.pg-row-line {
    display: grid;
    grid-template-columns: var(--cols, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
}
.pg-row-line + .pg-row-line {
    border-top: 1px solid var(--pg-border);
}
.pg-row-line--head {
    background: var(--pg-accent);
    color: var(--pg-on-dark);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ----- Section-Labels (schwarz, normal-case) ----- */
/* Felix-Feedback 2026-05-21: Section-Labels in Modal/Karten in Schwarz,
   Outfit 600, normaler Schriftschnitt. Kein graues Uppercase-Letter-Spacing
   mehr - das war Marketing-Label-Optik. */
.pg-section-label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0D1117;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 6px;
}

/* ----- KPI-Strip (schlanker, kein Karten-Schatten) ----- */
.pg-kpis {
    display: flex;
    gap: 12px;
    margin: 0 0 20px;
    flex-wrap: wrap;
}
.pg-kpi {
    flex: 1;
    min-width: 110px;
    background: #fff;
    border: 1px solid #E0E7EE;
    border-radius: 3px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pg-kpi-val {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0D1117;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pg-kpi-lbl {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #555;
}

/* ----- Filter-Bar (schmaler, ohne Innen-Border-Trenner) ----- */
.pg-filter-bar {
    background: #fff;
    border: 1px solid #E0E7EE;
    border-radius: 3px;
    padding: 10px 14px;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pg-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pg-filter-label {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0D1117;
    min-width: 78px;
}
.pg-chip-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.pg-chip {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border: 1px solid #E0E7EE;
    border-radius: 2px;
    background: #fff;
    color: #555;
    cursor: pointer;
}
.pg-chip:hover { color: #0D1117; border-color: #B0B0B0; }
.pg-chip[aria-pressed="true"],
.pg-chip.is-active {
    background: #253749;
    color: #fff;
    border-color: #253749;
}
.pg-chip[aria-pressed="true"]:hover,
.pg-chip.is-active:hover { color: #fff; }
@media (max-width: 768px) {
    .pg-filter-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .pg-filter-label { min-width: auto; }
}

/* ----- Lead-Paragraph (Section-Intro statt grauer subtitle) ----- */
.pg-lead {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #0D1117;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 78ch;
}

/* ----- Cards-Grid (für Architektur/Roadmap) -----
   grid-auto-rows: 1fr hält eine zweite Reihe mit weniger Inhalt
   gleich hoch wie die erste - kein Höhen-Asymmetrie-Drift. */
.pg-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 14px;
}
.pg-cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pg-card {
    background: #fff;
    border: 1px solid #E0E7EE;
    border-radius: 3px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.pg-card-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin: 0 0 6px;
}
.pg-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #0D1117;
    margin: 0 0 10px;
}
.pg-card-text {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: #0D1117;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 1024px) {
    .pg-cards-grid, .pg-cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .pg-cards-grid, .pg-cards-grid--4 { grid-template-columns: 1fr; }
}

/* ----- Badges (Excel-Zellen-vertraeglich, kein Uppercase) ----- */
.pg-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}
.pg-badge-neutral { background: #F4F5F4; color: #555; }
.pg-badge-info    { background: #E0E7EE; color: #253749; }
.pg-badge-good    { background: #DCE9DF; color: #2F5238; }
.pg-badge-warn    { background: #FBEFD8; color: #8A5A06; }
.pg-badge-strong  { background: #253749; color: #fff; }
.pg-badge-accent  { background: #253749; color: #fff; }
.pg-badge-muted   { background: #F4F5F4; color: #888; }