/* QuACX-Branding.
   Farben, Titelleiste und Menue folgen dem QuACX SopManager (sop.quacx.org),
   Schrift und Wortmarke dem Auftritt auf quacx.eu. Die Werte liegen in
   QuacxTheme.cs; hier stehen nur die Feinheiten, die das MudBlazor-Theme
   nicht abdeckt. */

:root {
    --quacx-cyan: #00AFD7;
    --quacx-petrol: #1E698C;
    --quacx-petrol-dark: #10556F;
    --quacx-orange: #FAA500;
}

/* ---------------------------------------------------------- Titelleiste */

/* Feine helle Kante nach unten, wie im SopManager */
.mud-appbar {
    border-bottom: 0.8px solid rgba(255, 255, 255, 0.12);
}

.quacx-appbar-title {
    color: #FFFFFF;
    letter-spacing: 0.02em;
    font-weight: 400;
}

/* --------------------------------------------------------------- Menue */
/* Das Menue ist dunkler als die Titelleiste; Schrift und Symbole sind leicht
   gedaempft. Beides kommt aus dem Theme, hier folgen Groessen und Zustaende. */

.mud-drawer .mud-nav-link {
    font-size: 0.9rem;
    font-weight: 400;
    padding: 8px 16px;
}

.mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

/* Aktiver Eintrag: heller abgesetzt und links mit dem Akzent markiert */
.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.14);
    border-left: 3px solid var(--quacx-orange);
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--quacx-orange);
}

/* Produktgruppen kraeftiger als ihre Untereintraege */
.mud-drawer .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    color: #FFFFFF;
}

/* Der Logout-Knopf ist ein echtes Formular und erbt das Mud-Styling nicht */
.mud-drawer form button.mud-nav-link {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
}

.mud-drawer form button.mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.mud-drawer form button.mud-nav-link .mud-icon-root {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* ------------------------------------------------------------- Inhalte */

/* Gefuellte Schaltflaechen: ruhig und flach wie im SopManager. Form und
   Schreibweise kommen aus dem Theme (6px Radius, keine Versalien). */
.mud-button-filled {
    box-shadow: none;
}

.mud-button-filled:hover {
    box-shadow: 0 2px 8px rgba(0, 175, 215, 0.30);
}

/* Tabellenkoepfe in der Leitfarbe absetzen */
.mud-table-head .mud-table-cell {
    color: var(--quacx-petrol);
    font-weight: 600;
}