/* Formulare - geteiltes Vokabular fuer Tabelle, Textfeld, Dialog und Rollen-Chip */
/* im Pergament/Gold-Stil des Kampagnenbogens. Ergaenzt campaign-sheet.css.     */
/* Genutzt von /users; Editor und EventEditor bekommen dieselbe Ebene spaeter. */
/* MudBlazor wird ueber seine eigenen CSS-Variablen umgestellt, nicht ueber    */
/* Spezifitaet - daher kein !important, ausser bei .campaign-icon-button:      */
/* .mud-secondary-text/.mud-error-text setzen color selbst mit !important.     */
/* Kontrastangaben sind WCAG-2.1-Werte gegen den jeweils genannten Grund.      */

/* Tabelle */

/* MudTable liest all diese Variablen selbst; .campaign-sheet setzt die         */
/* Schriftfamilie bereits, hier nur die Farb- und Formwerte der Zellen.        */
.campaign-table {
    --mud-palette-surface: #1e160e;
    --mud-palette-table-lines: rgba(217, 164, 65, 0.18);
    --mud-palette-table-hover: rgba(217, 164, 65, 0.07);
    --mud-palette-table-striped: rgba(232, 213, 163, 0.03);
    --mud-palette-text-primary: #e8d5a3;
    --mud-palette-text-secondary: #9a825a;
    --mud-default-borderradius: 0px;
    box-shadow: none;
    border: 1px solid rgba(217, 164, 65, 0.18);
}

/* Kopfzelle in Kapitaelchen wie .campaign-label - #9a825a auf #1e160e = 4,86:1 */
.campaign-table .mud-table-head .mud-table-cell {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Fliesstext der Zellen im Blattfont - #e8d5a3 auf #1e160e = 11,4:1 */
.campaign-table .mud-table-body .mud-table-cell {
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    font-size: 16px;
}

/* Letzte Zeile behaelt trotzdem eine Konturlinie - der Rahmen der Tabelle      */
/* traegt sonst allein die untere Kante, was neben der oberen ungleich wirkt.  */
.campaign-table .mud-table-root > .mud-table-body:last-child > .mud-table-row:last-child > .mud-table-cell {
    border-bottom: 1px solid rgba(217, 164, 65, 0.18);
}

/* Textfeld */

/* MudTextField liest --mud-palette-lines-inputs fuer die Outline-Kontur und   */
/* --mud-default-borderradius fuer die abgerundeten Ecken. Fokusfarbe bleibt   */
/* das globale Primary (#D4A017) aus MainLayout, wird hier nicht angefasst.    */
.campaign-field {
    --mud-palette-lines-inputs: rgba(217, 164, 65, 0.35);
    --mud-palette-text-primary: #e8d5a3;
    --mud-palette-text-secondary: #9a825a;
    --mud-default-borderradius: 0px;
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
}

.campaign-field input,
.campaign-field textarea {
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
}

/* Markdown-Vorschau (MarkdownField) */

/* Gleiche Kontur/Untergrund wie .campaign-field/.campaign-dialog, damit die   */
/* Vorschau-Box nicht mehr wie eine generische graue MudPaper-Flaeche neben    */
/* dem bereits eingefaerbten Eingabefeld wirkt. .mud-paper-outlined liest die  */
/* Randfarbe aus --mud-palette-lines-default, daher hier keine !important-     */
/* Ausnahme noetig (Konvention siehe Dateikopf). */
.campaign-markdown-preview {
    --mud-palette-lines-default: rgba(217, 164, 65, 0.28);
    background-color: #1e160e;
    color: #c9b587;
}

/* Rumpf des Markdown-Baums - #c9b587 auf #1e160e = 8,88:1 */
.campaign-markdown-preview .mud-markdown-body {
    color: #c9b587;
    overflow-wrap: anywhere;
}

/* MudBlazor.Markdown rendert Absaetze/Listen als eigene <p>/<li> mit fixer     */
/* Material-Typografie (Roboto) - Vererbung vom Rumpf reicht daher nicht,       */
/* die Werte muessen direkt auf die Elemente. */
.campaign-markdown-preview .mud-markdown-body p,
.campaign-markdown-preview .mud-markdown-body li {
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.6;
}

.campaign-markdown-preview .mud-markdown-body p {
    margin: 0 0 10px;
}

.campaign-markdown-preview .mud-markdown-body p:last-child {
    margin-bottom: 0;
}

/* Ueberschriften in gedaempftem Gold-Kapitaelchen statt app.css's Roboto-Gold  */
/* - #D4A017 auf #1e160e = 8,10:1 */
.campaign-markdown-preview .mud-markdown-body h1,
.campaign-markdown-preview .mud-markdown-body h2,
.campaign-markdown-preview .mud-markdown-body h3 {
    margin: 14px 0 8px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4A017;
}

.campaign-markdown-preview .mud-markdown-body > :first-child {
    margin-top: 0;
}

/* Sienna-Kante wie in app.css/campaign-drawer.css - background: none, da       */
/* MudBlazor.Markdown dem Zitat sonst einen Hover-Grund unterlegt. */
.campaign-markdown-preview .mud-markdown-body blockquote {
    margin: 0 0 10px;
    padding: 2px 0 2px 14px;
    background: none;
    border-left: 3px solid #A0522D;
    font-style: italic;
    color: #c0a878;
}

.campaign-markdown-preview .mud-markdown-body strong {
    color: #e8d5a3;
}

.campaign-markdown-preview .mud-markdown-body ul,
.campaign-markdown-preview .mud-markdown-body ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.campaign-markdown-preview .mud-markdown-body a {
    color: #D4A017;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.campaign-markdown-preview .mud-markdown-body a:hover {
    color: #F0B820;
}

/* Leerzustand (CampaignEmptyState) */

/* Ersetzt die generische blaue MudAlert-Info-Box, die sonst als einziger      */
/* ungestylter Fleck in einem sonst durchgehend Pergament/Gold-gestalteten     */
/* .campaign-panel auffaellt. Dezente Kontur statt Panel-Optik, da sie meist   */
/* bereits innerhalb eines .campaign-panel liegt. #c9b587 auf #1e160e = 8,88:1 */
.campaign-empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background-color: rgba(232, 213, 163, 0.03);
    border: 1px solid rgba(217, 164, 65, 0.22);
}

.campaign-empty-state__glyph {
    flex: 0 0 auto;
}

.campaign-empty-state__text {
    margin: 0;
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.5;
    color: #c9b587;
    font-style: italic;
}

/* Navigation (NavMenu) */

/* App-Bar/Drawer-Chrome (MainLayout) */

/* MudAppBar/MudDrawer lesen ihren Untergrund aus PaletteDark.AppbarBackground/ */
/* DrawerBackground (MainLayout.razor) - beide bereits auf den Bogen-Braunton   */
/* (#140e09) gesetzt. Hier nur die fehlende Trennlinie zum Content ergaenzt,    */
/* da MudBlazors Elevation-Schatten allein den Uebergang nicht bewusst wirken   */
/* liess (Chrome und Panels teilten sich sonst keine gemeinsame Kante). */
.campaign-appbar {
    border-bottom: 1px solid rgba(217, 164, 65, 0.22);
}

.campaign-drawer-chrome {
    border-inline-end: 1px solid rgba(217, 164, 65, 0.18);
}

/* MudNavMenu/MudNavLink lesen ihre Akzentfarbe aus --mud-palette-primary bzw.  */
/* -action-default-hover - hier lokal auf die Bogen-Palette gesetzt, damit die  */
/* Seitenleiste nicht wie unveraendertes Material-Chrome neben den Gold/        */
/* Pergament-Inhalten wirkt. Kein !important noetig (Konvention Dateikopf).    */
.campaign-navmenu {
    --mud-palette-primary: #D4A017;
    --mud-palette-primary-hover: rgba(217, 164, 65, 0.12);
    --mud-palette-action-default-hover: rgba(217, 164, 65, 0.08);
    --mud-palette-text-primary: #e8d5a3;
    --mud-palette-action-default: #c9b587;
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
}

.campaign-navmenu .mud-divider {
    border-color: rgba(217, 164, 65, 0.18);
}

/* Aktiver Link: MudBlazor setzt serienmaessig einen rechten Rand (2px) - hier  */
/* deaktiviert und durch einen linken Gold-Akzentstreifen ersetzt, damit nur    */
/* ein Indikator sichtbar ist (nicht Farbe allein, siehe WCAG-1.4.1-Prinzip     */
/* an anderer Stelle im Bogen). */
.campaign-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end-width: 0;
    border-inline-start: 2px solid #D4A017;
}

/* Admin-only Links - gedaempftes Gold-Braun statt des bisherigen Grau/Italic-  */
/* Inline-Styles, damit die Abgrenzung "nur fuer Admins" zur Bogen-Palette      */
/* passt statt wie ein deaktivierter Systemzustand zu wirken. Ersetzt das       */
/* bisherige Inline-Style vollstaendig, daher reicht Klassen-Spezifitaet ohne   */
/* !important. #9a825a auf #140e09 (Drawer-Grund) = 5,21:1 */
.campaign-nav-link--admin,
.campaign-nav-link--admin .mud-nav-link-icon {
    color: #9a825a;
    font-style: italic;
}

/* Code-/JSON-Block (CampaignCodeBlock) */

/* Ersetzt den bisher dreifach duplizierten <MudPaper Outlined Style=          */
/* "border-color: #D4A017;"><pre>-Block (Editor/ItemEditor/RuleGlossary-Export)*/
/* .mud-paper-outlined setzt border als Shorthand - volle Property noetig,     */
/* damit die Kontur greift, kein !important (Laderreihenfolge nach MudBlazor). */
.campaign-code-block {
    border: 1px solid rgba(217, 164, 65, 0.5);
}

.campaign-code-block__pre {
    margin: 0;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #e8d5a3;
}

/* Dialog */

/* MudDialog liest --mud-palette-surface fuer den Grund; Schatten und Rundung  */
/* werden durch eine Goldkontur ersetzt, analog zu .mud-dialog.campaign-drawer */
.mud-dialog.campaign-dialog {
    --mud-palette-surface: #1e160e;
    --mud-palette-text-primary: #e8d5a3;
    --mud-default-borderradius: 0px;
    border: 1px solid rgba(217, 164, 65, 0.28);
    box-shadow:
        inset 0 0 0 3px #1a130c,
        inset 0 0 0 4px rgba(217, 164, 65, 0.10),
        0 12px 34px -20px rgba(0, 0, 0, 0.9);
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
}

/* Titelstreifen im Wimpel-Verlauf, Titeltext in Cinzel-Kapitaelchen */
.mud-dialog.campaign-dialog .mud-dialog-title {
    padding: 16px 24px;
    background: linear-gradient(180deg, #241a11, #17110b);
    border-bottom: 1px solid rgba(217, 164, 65, 0.20);
}

.mud-dialog.campaign-dialog .campaign-caps {
    font-size: 17px;
}

.mud-dialog.campaign-dialog .mud-dialog-content {
    font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.6;
    color: #c9b587;
}

.mud-dialog.campaign-dialog .mud-dialog-actions {
    border-top: 1px solid rgba(217, 164, 65, 0.14);
}

/* Rollen-Chip */

/* Umgefaerbte MudChip-Varianten statt Color="Primary"/"Default". Admin fuellt */
/* Gold mit dunklem Text (wie .stat-seal__value auf hellem Grund gedacht),     */
/* Player bleibt eine dezente Pergament-Kontur - Zustand haengt zusaetzlich    */
/* an der Kontur (WCAG 1.4.1), nicht nur am Goldton.                          */
.campaign-chip--admin.mud-chip-filled {
    background-color: #D4A017;
    color: #17110b;
}

/* #c9b587 auf #1e160e = 8,88:1 */
.campaign-chip--player.mud-chip-outlined {
    color: #c9b587;
    border: 1px solid rgba(217, 164, 65, 0.35);
}

/* Neutrale Badge-Variante ohne Rollen-Semantik (z.B. "max. N× wählbar" bei      */
/* Verbesserungen, Kartenlevel bei Fertigkeitskarten) - gleiche Pergament-Kontur */
/* wie .campaign-chip--player, da derselbe Untergrund (#1e160e) gilt.           */
/* #c9b587 auf #1e160e = 8,88:1 */
.campaign-chip--neutral.mud-chip-outlined,
.campaign-chip--neutral.mud-chip-filled {
    color: #c9b587;
    background-color: rgba(232, 213, 163, 0.05);
    border: 1px solid rgba(217, 164, 65, 0.35);
}

/* Zeilenaktionen */

/* Reiner CSS-Hook, damit sich der Abstand der Icon-Buttons an einer Stelle    */
/* pflegen laesst statt an jeder Tabellenzeile per Klasse. */
.campaign-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

/* Buttons - "Wachssiegel" */

/* Radialer Verlauf plus innerer Schlagschatten/Glanzlinie ersetzen den         */
/* Material-Ripple und -Drop-Shadow (beide auf CampaignButton deaktiviert) -    */
/* der Button soll wie gepresstes Wachs wirken, nicht wie eine flache Flaeche. */
/* --campaign-seal-core/-edge tragen den Farbverlauf je Intent, damit Hover/    */
/* Active nur diese zwei Werte anheben muessen statt den ganzen Gradient.      */
.campaign-button {
    position: relative;
    padding: 8px 22px;
    border-radius: 999px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1), background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.campaign-button:not(.campaign-button--ghost) {
    background: radial-gradient(120% 140% at 50% 10%, var(--campaign-seal-core), var(--campaign-seal-edge));
    border: 1px solid var(--campaign-seal-rim);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.14),
        inset 0 -4px 8px rgba(0, 0, 0, 0.35),
        0 3px 8px -2px rgba(0, 0, 0, 0.6);
}

/* Kern heller, Rand dunkler - Text bleibt dunkel wie Wachs mit Praegung.       */
/* #17110b auf #e8c25a (Kern) = 10,9:1 */
.campaign-button--primary {
    --campaign-seal-core: #e8c25a;
    --campaign-seal-edge: #a9770f;
    --campaign-seal-rim: rgba(255, 224, 158, 0.55);
    color: #17110b;
}

/* #f3e6d2 auf #6b2a20 (Rand) = 7,05:1 */
.campaign-button--danger {
    --campaign-seal-core: #c9634c;
    --campaign-seal-edge: #6b2a20;
    --campaign-seal-rim: rgba(233, 158, 138, 0.5);
    color: #f3e6d2;
}

/* Ghost traegt keinen Verlauf - reine Kontur, nachrangig zur gefuellten Handlung. */
/* #D4A017 auf #17110b (Dialoggrund) = 7,53:1 */
.campaign-button--ghost {
    background: rgba(232, 213, 163, 0.03);
    border: 1px solid rgba(217, 164, 65, 0.35);
    color: #D4A017;
}

/* Kern hellt auf, Siegel "atmet" leicht */
@media (hover: hover) and (pointer: fine) {
    .campaign-button:not(.campaign-button--ghost):hover:not(:disabled) {
        transform: scale(1.03);
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.2),
            inset 0 -4px 8px rgba(0, 0, 0, 0.3),
            0 4px 10px -2px rgba(0, 0, 0, 0.65);
    }

    .campaign-button--ghost:hover:not(:disabled) {
        background: rgba(217, 164, 65, 0.10);
        border-color: rgba(217, 164, 65, 0.55);
    }
}

/* Eingedrueckt - das Siegel sackt beim Klick minimal ab statt eine Ripple-Welle zu werfen */
.campaign-button:not(:disabled):active {
    transform: scale(0.97);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.campaign-button--ghost:not(:disabled):active {
    background: rgba(217, 164, 65, 0.16);
}

.campaign-button:focus-visible {
    outline: 2px solid #D4A017;
    outline-offset: 3px;
}

.campaign-button:disabled {
    opacity: 0.5;
    box-shadow: none;
}

/* Icon-Siegel - runde Mini-Variante fuer die Tabellenzeilen, gleiche Wölbung. */
/* MudIconButton setzt .mud-secondary-text bzw. .mud-error-text ueber Color;   */
/* die Grundflaeche kommt von hier, die Icon-Farbe bleibt hell auf dem Verlauf.*/
.campaign-icon-button {
    background-color: transparent;
    background-image: radial-gradient(120% 140% at 50% 15%, var(--campaign-seal-core, #6e6e6e), var(--campaign-seal-edge, #3a3a3a));
    border: 1px solid var(--campaign-seal-rim, rgba(232, 213, 163, 0.25));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 6px rgba(0, 0, 0, 0.35),
        0 2px 6px -2px rgba(0, 0, 0, 0.6);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Passwort zuruecksetzen - gedaempftes Gold/Sepia, dieselbe Zuordnung wie bisher (Color.Secondary) */
.campaign-icon-button.mud-secondary-text {
    --campaign-seal-core: #b08a2c;
    --campaign-seal-edge: #5c4514;
    --campaign-seal-rim: rgba(217, 164, 65, 0.4);
    color: #f3e6d2 !important;
}

/* Loeschen - Sienna/Rot, dieselbe Zuordnung wie bisher (Color.Error) */
.campaign-icon-button.mud-error-text {
    --campaign-seal-core: #c9634c;
    --campaign-seal-edge: #6b2a20;
    --campaign-seal-rim: rgba(233, 158, 138, 0.45);
    color: #f3e6d2 !important;
}

@media (hover: hover) and (pointer: fine) {
    .campaign-icon-button:hover:not(:disabled) {
        transform: scale(1.08);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -3px 6px rgba(0, 0, 0, 0.3),
            0 3px 8px -2px rgba(0, 0, 0, 0.65);
        background-color: transparent;
    }
}

.campaign-icon-button:not(:disabled):active {
    transform: scale(0.92);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.campaign-icon-button:focus-visible {
    outline: 2px solid #D4A017;
    outline-offset: 2px;
}

/* Tag-Eingabe (CampaignTagInput) */

/* Reiner Layout-Hook: Chip-Reihe ueber dem Eingabefeld, Abstand dazwischen. Die  */
/* Chips selbst nutzen die normale MudChip-Outlined-Optik (kein eigener Goldstil */
/* noetig, da bereits gut lesbar auf #1e160e); nur der Abstand zwischen den      */
/* Chips wird hier gesetzt, da MudChipSet selbst keinen setzt. */
.campaign-tag-input__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}