/* ============================================================
   ENAGIE VP-Portal — i18n-Layout-Kompensation (css/i18n-layout.css)
   Elastisches Kompensations-System fuer Fremdsprachen-Textexpansion.
   REGELWERK: docs/i18n-mehrsprachigkeit/i18n-design-rules.md (zementiert)
   AUDIT-BASIS: docs/i18n-mehrsprachigkeit/design-audit-2026-07-06.md

   AKTIVIERUNG: vollautomatisch ueber das html[lang]-Attribut — loader.js
   setzt document.documentElement.lang beim Boot UND beim Live-Umschalten
   (Flaggen-Wahl im Onboarding, „Mein Profil", Login-Schalter). Kein JS noetig.

   INVARIANTE: ALLE Regeln sind auf html:not([lang="de"]) bzw. html[lang="vi"]
   gescopet — die deutsche Ansicht bleibt beweisbar PIXEL-IDENTISCH.
   Neue Sprache mit starker Expansion (es/it/...): eigenen
   html[lang="xx"]-Block ergaenzen, KEINE Komponenten umbauen.

   NIE in portal.css verstreuen — diese Datei ist der EINE auditierbare Ort
   fuer alle sprachbedingten Layout-Regeln.
   ============================================================ */

/* ---------- Generische Schutzregeln (alle Nicht-DE-Sprachen) ---------- */

/* G1 · Buttons duerfen 2-zeilig wachsen statt ueberzulaufen (groesster
   Einzel-Hebel: .btn ist portalweit nowrap; bei <=480px width:100%).
   inline-flex + align-items:center halten den Text zentriert. */
html:not([lang="de"]) .btn:not(.btn-icon) { white-space: normal; }

/* G2 · Mindestabstand in space-between-Label/Wert-Paaren — verhindert
   Text-an-Text-Kollision, BEVOR der Umbruch greift. gap wirkt nur, wenn
   der Platz eng wird; sonst unsichtbar. */
html:not([lang="de"]) .detail-row { gap: 12px; }
html:not([lang="de"]) .card-header { gap: 12px; flex-wrap: wrap; }

/* G3 · Native Selects nie breiter als ihr Container (intrinsische Breite
   folgt sonst der laengsten Option, z. B. VI doc_type_jahresabrechnung
   41 Zeichen). Geschlossenes Select clippt nativ; die aufgeklappte
   Options-Liste rendert das OS in voller Breite. */
html:not([lang="de"]) select { max-width: 100%; min-width: 0; }

/* G4 · Fluid Typography an kritischen Kurz-Label-Traegern (Regel 1 des
   Regelwerks): Schrift skaliert mit dem Viewport, gedeckelt auf das
   DE-Design-Mass. */
html:not([lang="de"]) .kpi-label { font-size: clamp(9px, 1.6vw, 11px); }

/* ---------- Konkrete Audit-Hotspots 2026-07-06 ---------- */

/* H1 · PRIO HOCH — Bottom-Nav (mobile Hauptnavigation, fixe 64px-Bar):
   VI „Trang tổng quan" (15 Z.) wuerde 2-zeilig brechen und die Bar sprengen.
   Keine Media Query noetig: .bottom-nav ist >768px display:none. */
html:not([lang="de"]) .bottom-nav-item span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    padding: 0 2px;
}

/* H2 · Status-Pipeline-Card: Labels 2-zeilig statt Steps aufblaehen
   (analog zur bereits i18n-festen Pipeline-Variante .pipeline-label). */
html:not([lang="de"]) .pipeline-step-label {
    white-space: normal;
    max-width: 84px;
    line-height: 1.2;
}

/* H3 · Multi-Role-Einkommensstroeme: fester 70px-Label-Slot ist fuer VI
   „Khai thác khách hàng" (20 Z.) zu schmal. Klassen-Hook im JS gesetzt
   (multi-role-earnings.js), Inline-width bleibt fuer DE wirksam. */
html:not([lang="de"]) .earnings-role-label {
    width: auto !important;
    min-width: 70px;
    max-width: 120px;
}

/* H4 · Auth-Screens: Untertitel (uppercase, 33 Z. in VI) einzeilig in der
   340px-Login-Card halten — Erstkontakt-Qualitaet. */
html:not([lang="de"]) .login-subtitle { font-size: 12.5px; letter-spacing: 0.3px; }

/* H5 · Sidebar-Navigation: lange VI-Labels (bis 23 Z.) einzeilig in der
   240px-Mobil-Sidebar halten. */
html:not([lang="de"]) .sidebar .nav-item { font-size: 13px; }

/* H6 · Kundenmaske, Termin-Tab (Mobile): Formular-Grid 1fr 1fr ist fuer
   VI-Select-Optionen („Trực tiếp tại chỗ") zu schmal — Felder stacken.
   !important noetig: grid-template-columns ist inline gesetzt. */
@media (max-width: 480px) {
    html:not([lang="de"]) #termin-anfrage-form > div:first-child {
        grid-template-columns: 1fr !important;
    }
}

/* H7 · Kundenmaske, Metering-Kachel-Fusszeile (Count + Details-Link):
   darf bei Enge umbrechen statt zu kollidieren. Inline-Styles setzen kein
   flex-wrap — Regel greift ohne !important. */
html:not([lang="de"]) #customer-detail-content div[role="button"][title] > div:last-child {
    flex-wrap: wrap;
    row-gap: 2px;
}