/* ══════════════════════════════════════════════════════════════════════════
   Gemeinsame Kopfleiste (topbar.js).

   Eigener Namensraum .dws-topbar*, bewusst nicht .identity / .adminbar / .btn:
   projects.html und admin-users.html bringen unter diesen Namen ihre eigenen
   Regeln mit. Waeren die Klassennamen dieselben, saehe dieselbe Leiste je nach
   Seite anders aus — genau das, was eine gemeinsame Leiste abschaffen soll.

   Die Markenzeile selbst (#logoDiv, .flexible-column, .third-column) kommt
   weiterhin aus proj_style.css und bleibt unveraendert; hier steht nur, was
   neu dazukommt.
   ══════════════════════════════════════════════════════════════════════════ */

#logoDiv {
    /* KEIN padding. Der Bestand hatte padding:0, und ein padding-right liess
       rechts neben dem D-noise-Logo einen Streifen Mandantenfarbe stehen — im
       Bestand endet die farbige Flaeche buendig am Logo. */
    box-sizing: border-box;
    /* min-height statt height: index.html setzt 62px selbst, die uebrigen fuenf
       Seiten hatten gar keine Hoehe. Gibt den Logos zugleich die bestimmte
       Hoehe, an der ihr height:100% ueberhaupt erst rechnen kann. */
    min-height: 62px;
}

/* ── Die beiden Logos tragen die Leiste von oben bis unten ────────────────
   Ohne Groessenangabe erscheinen die Bilder in ihrer natuerlichen Groesse und
   wirken je nach Preset zufaellig gross oder klein.

   align-self: stretch gibt der Spalte die Hoehe der Flex-Zeile; erst dadurch
   ist die Hoehe bestimmt und height:100% darunter loesbar. object-fit
   bewahrt dabei das Seitenverhaeltnis, statt das Logo zu zerren. */
/* NUR align-self, KEIN flex. Die Logospalte bleibt flex:1 wie im Bestand:
   beide flexiblen Spalten teilen sich den Platz haelftig, und der Projektname
   steht dadurch etwa mittig in der farbigen Flaeche. Ein flex:0 0 auto hier
   gab der Textspalte den ganzen Rest und schob den Namen dicht ans Logo — eine
   Verschiebung, die mit dem Logoproblem nichts zu tun hatte.

   Das Schrumpfen war ohnehin nie hier das Problem: es kam von einem
   max-width:170px weiter unten, das ueber das Seitenverhaeltnis auch die Hoehe
   herunterzog. min-width:auto (Vorgabe fuer Flex-Elemente) haelt die Spalte
   schon von sich aus auf Inhaltsbreite. */
#logoDiv > .flexible-column:first-child,
#logoDiv #clientLogoColumn {
    align-self: stretch;
}

#logoDiv #dnoise_img {
    flex-shrink: 0;
}

#logoDiv #logo_link {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Kein max-width hier: die Spalte ist flex:0 0 auto, ihre Breite kommt also vom
   Bild — ein max-width:100% waere ein Verweis auf sich selbst und hat in der
   Messung genau die Breite festgeschrieben, die das Bild gerade zufaellig
   hatte. Hoehe fuehrt, Breite folgt dem Seitenverhaeltnis. */
#logoDiv #logo_img,
#logoDiv #dnoise_img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.dws-topbar__account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 14px;
    min-width: 0; /* damit die Mailadresse kuerzen darf statt zu druecken */
}

.dws-topbar__account[hidden] {
    display: none;
}

/* Navigation ------------------------------------------------------------- */

/* Die Bereiche stehen im aufklappenden Feld, nicht mehr in der Leiste: dort
   trug jeder Reiter dauerhaft Platz, obwohl er selten gebraucht wird. Im Feld
   untereinander, direkt ueber dem Abmelden. */
.dws-topbar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Genau die Umkehrung des Abmelden-Knopfes weiter unten: der ist aussen
   gezeichnet und innen leer, diese sind gefuellt. Gleiche Masse, gleicher
   Radius, gleicher Rahmen — nur Vorder- und Hintergrund getauscht. Damit lesen
   sich die Bereiche als das Angebot und Abmelden als der Ausstieg. */
.dws-topbar__link {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 5px 12px;
    border: 1px solid var(--client-color, #0f05a0);
    border-radius: 3px;
    background: var(--client-color, #0f05a0);
    color: #ffffff;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Beim Ueberfahren werden ALLE drei Schaltflaechen des Feldes schwarz —
   Projekte, Administration und Abmelden gleich. Eine Farbe, die in keinem
   Mandanten-Preset vorkommt: die Rueckmeldung bleibt damit ueberall gleich
   deutlich, auch auf dunklen Mandantenfarben, wo ein Wechsel innerhalb der
   Markenfarbe kaum zu sehen waere. */
.dws-topbar__link:hover,
.dws-topbar__link:focus-visible {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

.dws-topbar__link[aria-current="page"] {
    font-weight: bold;
}

/* MUSS sein, und zwar wegen der Zeile darueber: display:inline-block aus einer
   Klassenregel schlaegt das display:none, das der Browser dem hidden-Attribut
   gibt. Ohne diese Regel blieb der Reiter «Benutzer» fuer JEDES Konto sichtbar,
   obwohl topbar.js ihn korrekt auf hidden setzte. */
.dws-topbar__link[hidden] {
    display: none;
}

/* Wer angemeldet ist ----------------------------------------------------- */

/* In der Leiste steht nur der NAME. Alles weitere — Firma, Mailadresse, ggf.
   Rolle, Abmelden — klappt beim Ueberfahren auf und nimmt so keinen Platz weg,
   den die Navigation braucht.

   :focus-within neben :hover ist nicht Zierrat: ohne das waere der
   Abmelde-Knopf mit der Tastatur nicht erreichbar. Dieselbe Bauform wie
   .help-hover in proj_style.css. */
.dws-topbar__user {
    position: relative;
    display: flex;
    align-items: center;
}

.dws-topbar__name {
    display: inline-block;
    max-width: 24ch;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.dws-topbar__user:hover .dws-topbar__name,
.dws-topbar__user:focus-within .dws-topbar__name {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.12);
}

.dws-topbar__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    display: none;
    min-width: 240px;
    padding: 10px 12px;
    /* Weiss auf weiss, nicht auf --client-color: die Leiste ist farbig, ein
       aufklappendes Feld in derselben Farbe verschwimmt mit ihr. */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    text-align: left;
}

.dws-topbar__user:hover .dws-topbar__panel,
.dws-topbar__user:focus-within .dws-topbar__panel {
    display: block;
}

.dws-topbar__panelname,
.dws-topbar__company,
.dws-topbar__mail {
    display: block;
    color: #333333;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    word-break: break-all;
}

/* Der Name traegt das Feld: er steht zuoberst und fett, darunter Adresse und
   Firma als die Angaben, die ihn ausmachen. */
.dws-topbar__panelname {
    font-size: 13px;
    font-weight: bold;
}

.dws-topbar__company {
    color: #666666;
}

.dws-topbar__company[hidden],
.dws-topbar__role[hidden] {
    display: none;
}

.dws-topbar__role {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 7px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    color: #333333;
    font-size: 11px;
    white-space: nowrap;
}

.dws-topbar__logout {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 5px 12px;
    border: 1px solid var(--client-color, #0f05a0);
    border-radius: 3px;
    background: transparent;
    color: var(--client-color, #0f05a0);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* Dieselbe Reaktion wie bei den beiden Bereichslinks darueber — siehe dort. */
.dws-topbar__logout:hover,
.dws-topbar__logout:focus-visible {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   PLATZORDNUNG — was zuerst weicht, wenn das Fenster schmal wird.

   Ohne sie weicht nichts: die Leiste umbricht in zwei Zeilen, das
   Mandantenlogo sprengt sie (logo_KtSG.png ist 300 px breit) und die
   Debug-Spalte legt sich ueber den Projektnamen.

   Reihenfolge, vom Verzichtbarsten zum Wichtigsten:
     1. Debug-Spalte   — nur mit &debug, reine Entwicklerangabe
     2. Projektname    — steht auch im Fenstertitel und in der Adresszeile
     3. beide Logos    — Schmuck; welcher Mandant, sagt die Farbe der Leiste
     4. Handbuch + Konto — bleiben IMMER: das eine ist die Hilfe, das andere
        sagt, wer man ist und wie man wieder herauskommt.
   ══════════════════════════════════════════════════════════════════════════ */

/* Die Logos fuellen die Leiste von oben bis unten.
   Beide Bilder sind von Natur aus GENAU 62 px hoch — so hoch wie die Leiste:
       Logo_dnoise_webservices_small.png   156 x 62
       presets/logo_KtSG.png               300 x 62
   Sie brauchen also keine Skalierung, nur die Erlaubnis, ihre Groesse zu
   behalten.

   KEINE max-width hier: eine Breitengrenze zieht ueber das Seitenverhaeltnis
   die Hoehe mit herunter, und das Logo saesse mit farbigem Rand ueber und unter
   sich in der Leiste.

   Die Breite kostet: das Mandantenlogo belegt jetzt wieder rund 300 px. Genau
   dafuer ist die Platzordnung darunter da — auf schmalen Fenstern fallen erst
   die Debug-Spalte, dann der Projektname und dann die Logos weg, statt dass
   alles gleichzeitig schrumpft. */
#logoDiv img {
    max-height: 100%;
    object-fit: contain;
}

/* Der Projektname darf NICHT umbrechen. Er traegt schon zwei Zeilen (Mandant
   und Projektname, durch <br> getrennt); bricht eine davon noch einmal um,
   entsteht eine dritte Zeile und die 62 px hohe Leiste platzt. Lieber kuerzen —
   der vollstaendige Name steht im Fenstertitel. */
#logoDiv #basicInfo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#logoDiv #basicInfoColumn {
    min-width: 0;
}

@media (max-width: 1100px) {
    #portalDebugColumn { display: none; }
}

@media (max-width: 900px) {
    #logoDiv #basicInfoColumn { display: none; }
}

/* Das D-noise-Logo geht VOR dem Mandantenlogo: wer das Werkzeug bedient, weiss
   welches es ist — aber nicht unbedingt, fuer welchen Mandanten er es gerade
   offen hat. */
@media (max-width: 760px) {
    #logoDiv #dnoise_img { display: none; }
}

@media (max-width: 620px) {
    #logoDiv #clientLogoColumn { display: none; }

    .dws-topbar__name { max-width: 14ch; }
}