@font-face {
    font-family: 'StreamLineIconsLight';
    src: url('../fonts/streamline/fonts/StreamLineIconsLight.ttf') format('truetype'), url('../fonts/streamline/fonts/StreamLineIconsLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: dmsans;
    src: url(../fonts/DMSans.ttf);
}


:root {
    --corner-radius-small: 2px;
    --corner-radius-medium: 4px;
    --corner-radius-default: var(--corner-radius-medium);
    --corner-radius-large: 8px;
    --corner-radius-xlarge: 12px;
    --font-size-caption: 12px;
    --font-size-default: 18px;
    --font-size-h1: 68px;
    --font-size-h2: 54px;
    --font-size-h3: 40px;
    --font-size-h4: 32px;
    --font-size-h5: 28px;
    --font-size-h6: 24px;
    --padding-default: 12px;
}

html, body {
    font-family: var(--DefaultFontFamily);
}

body {
    background: white !important;
}

.sl-icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'StreamLineIconsLight' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 18px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.loginlogo {
    max-width: 75%;
    margin: 0 auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
}
/* SoundX-Verlauf (Pink -> Lila -> Blau), Werte aus BissMauiApp/Resources/Styles/StyColorsApp.xaml */
:root {
    --ColorGradientStart: #FE60BE;
    --ColorGradientMiddle: #AB55F6;
    --ColorGradientEnd: #4982FD;
    --SoundXGradient: linear-gradient(135deg, var(--ColorGradientStart) 0%, var(--ColorGradientMiddle) 50%, var(--ColorGradientEnd) 100%);
}

/* Dark-Mode: .dark wird am body gesetzt. Verlauf neu definieren, da var() bereits an :root aufgeloest wird */
.dark {
    --ColorGradientStart: #FD22AE;
    --ColorGradientMiddle: #8C2CE7;
    --ColorGradientEnd: #1E69FE;
    --SoundXGradient: linear-gradient(135deg, var(--ColorGradientStart) 0%, var(--ColorGradientMiddle) 50%, var(--ColorGradientEnd) 100%);
}

/* Inhalt nur in einem Theme zeigen (z.B. Logo). Biss setzt .dark per JS am body, auch beim Start-Theme */
body:not(.dark) .theme-dark-only,
.dark .theme-light-only {
    display: none !important;
}

/* Primary-Farben aus BissMauiApp/Resources/Styles/StyColorsApp.xaml.
   :root:root, weil _StyColorsBase.css (Biss) nach app.css geladen wird und sonst gewinnt */
:root:root {
    --ColorPrimary: #9A2AF7;
    --ColorPrimaryLight: #BB70FA;
    --ColorPrimaryLighter: #DCB5FC;
    --ColorPrimaryDark: #7608D1;
    --ColorPrimaryDarker: #4E058B;
}

/* BxButton mit SoundX-Verlauf: <BxButton class="soundx-gradient-btn" ... /> */
.rz-button.bx-button.soundx-gradient-btn {
    border-color: transparent;
    /* !important: Radzen (Standard-Theme) setzt background-size 100% 0% und bei :hover/:focus-visible/:active eigene background-image */
    background-image: var(--SoundXGradient) !important;
    background-size: 100% 100% !important;
    color: white !important;
    transition: filter .15s ease;
}

/* Biss-Hover (grau, opacity .7) aufheben; Verlauf bleibt, nur etwas heller */
.rz-button.bx-button.soundx-gradient-btn:hover {
    opacity: 1;
    filter: brightness(1.1);
}

.rz-button.bx-button.soundx-gradient-btn:disabled {
    opacity: .5;
    filter: none;
}

/* Benutzerverwaltung */
.usermgmt-list .rz-data-row {
    transition: background-color .15s ease;
}

.usermgmt-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usermgmt-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    /* Verlaufsring: Fuellung innen (auch fuer transparente Default-Silhouette), Verlauf im Rand */
    border: 2px solid transparent;
    background: linear-gradient(var(--ColorBase300), var(--ColorBase300)) padding-box, var(--SoundXGradient) border-box;
}

.usermgmt-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(var(--ColorPrimaryLighter), var(--ColorPrimaryLighter)) padding-box, var(--SoundXGradient) border-box;
    color: var(--ColorPrimaryDarker);
    font-weight: 600;
    font-size: 15px;
}

.usermgmt-name {
    font-weight: 600;
}

.usermgmt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.usermgmt-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.usermgmt-chip-investor {
    background: var(--ColorPrimaryLighter);
    color: var(--ColorPrimaryDarker);
}

.usermgmt-chip-musician {
    background: var(--ColorSecondaryLighter);
    color: var(--ColorSecondaryDarker);
}

.usermgmt-kyc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.usermgmt-kyc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

.usermgmt-kyc-pending {
    color: var(--ColorWarningDark);
}

.usermgmt-kyc-approved {
    color: var(--ColorSuccessDark);
}

.usermgmt-kyc-declined {
    color: var(--ColorDangerDark);
}

/* Projektverwaltung */
.projectmgmt-image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

.projectmgmt-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.projectmgmt-phase,
.projectmgmt-section {
    display: block;
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.projectmgmt-phase {
    color: var(--ColorGradientStart);
}

.projectmgmt-section {
    margin: 20px 0 10px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.projectmgmt-text {
    font-weight: 400 !important;
    white-space: pre-line;
}

.projectmgmt-hint {
    padding: 12px 14px;
    border: 1px solid var(--ColorBase400);
    border-radius: var(--corner-radius-large, 12px);
    color: color-mix(in srgb, currentColor 80%, transparent);
}

.projectmgmt-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
}

.projectmgmt-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--ColorGradientMiddle);
}

.projectmgmt-media-title {
    display: block;
    margin-bottom: 6px;
}

.projectmgmt-audio {
    width: 100%;
    max-width: 420px;
    height: 36px;
}

.projectmgmt-review {
    position: sticky;
    top: 16px;
}

/* Projektart-Pille, Farben aus BissMauiApp/Controls/SoundXProjectBadges.xaml (Hintergrund Light 90 % / Dark 15 % Alpha) */
.projectmgmt-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--TypeColor);
    border-radius: var(--corner-radius-medium);
    background: color-mix(in srgb, var(--TypeColor) 90%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--TypeColor) 60%, transparent);
    color: white;
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.dark .projectmgmt-type {
    background: color-mix(in srgb, var(--TypeColor) 15%, transparent);
}

.projectmgmt-type .sl-icon {
    font-size: 14px;
    color: inherit;
}

/* Nur Icon als Kachel (Dashboard-Projektliste) */
.projectmgmt-type-icononly {
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--corner-radius-large);
}

.projectmgmt-type-icononly .sl-icon {
    font-size: 16px;
}

.projectmgmt-type-song {
    --TypeColor: #D63384;
}

.projectmgmt-type-albumep {
    --TypeColor: #43a3e1;
}

.projectmgmt-type-musicvideo {
    --TypeColor: #a548c3;
}

.projectmgmt-type-concert {
    --TypeColor: #2DD4BF;
}

/* Statusfarbe nach Verantwortung: Admin am Zug = Warning, Kuenstler am Zug = Info, abgeschlossen = neutral */
.projectmgmt-status-unknown,
.projectmgmt-status-submitted,
.projectmgmt-status-financialssubmitted {
    color: var(--ColorWarningDark);
}

.projectmgmt-status-basicapproved,
.projectmgmt-status-hold {
    color: var(--ColorInfoDark);
}

.projectmgmt-status-published {
    color: var(--ColorSuccessDark);
}

.projectmgmt-status-completed {
    color: var(--ColorBase600);
}

.projectmgmt-status-rejected {
    color: var(--ColorDangerDark);
}

/* Dark-Mode: Dark-Varianten haben auf dunklen Karten zu wenig Kontrast (ca. 1,6:1) - helle Toene (>= 3,8:1) */
.dark .projectmgmt-status-unknown,
.dark .projectmgmt-status-submitted,
.dark .projectmgmt-status-financialssubmitted {
    color: #FBBF24;
}

.dark .projectmgmt-status-basicapproved,
.dark .projectmgmt-status-hold {
    color: #38BDF8;
}

.dark .projectmgmt-status-published {
    color: #4ADE80;
}

.dark .projectmgmt-status-completed {
    color: #9CA3AF;
}

.dark .projectmgmt-status-rejected {
    color: #F87171;
}

.rz-card.usermgmt-card {
    padding: 24px;
    border-radius: var(--corner-radius-xlarge);
}

.usermgmt-card hr {
    margin: 20px 0;
}

.usermgmt-header {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.usermgmt-header-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usermgmt-avatar-large {
    width: 88px;
    height: 88px;
    font-size: 30px;
    border-width: 3px;
}

.usermgmt-details {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 10px 24px;
    margin: 0 0 16px 0;
}

.usermgmt-details dt {
    font-weight: 400;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.usermgmt-details dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .usermgmt-details {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .usermgmt-details dd {
        margin-bottom: 10px;
    }
}

.usermgmt-info {
    max-width: 1200px;
    margin: 0 auto;
}

/* Rahmen mit SoundX-Verlauf (Maske, damit der Karten-Hintergrund erhalten bleibt) */
.usermgmt-gradient-border {
    position: relative;
}

.usermgmt-gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--SoundXGradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.usermgmt-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.usermgmt-profile-subtitle {
    display: block;
    margin-top: 2px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.rz-button.usermgmt-edit-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
}

.usermgmt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-bottom: 20px;
}

.usermgmt-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 16px;
}

.usermgmt-stat:first-child {
    padding-left: 0;
}

.usermgmt-stat + .usermgmt-stat {
    border-left: 1px solid color-mix(in srgb, var(--ColorBase500) 25%, transparent);
}

.usermgmt-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--SoundXGradient);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ColorGradientMiddle) 35%, transparent);
}

/* Weisser Glyph auf vollem Verlauf: duenne Light-Icons bleiben in Hell und Dunkel gut lesbar */
.usermgmt-stat-icon .sl-icon {
    font-size: 24px;
    color: white;
    -webkit-text-stroke: 0.4px white;
}

.usermgmt-stat-label {
    font-size: 14px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.usermgmt-stat-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.usermgmt-stat-detail {
    font-size: 14px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.usermgmt-positive {
    color: var(--ColorSuccessDark);
}

.usermgmt-negative {
    color: var(--ColorDangerDark);
}

@media (max-width: 480px) {
    .usermgmt-stats {
        grid-template-columns: 1fr;
    }

    .usermgmt-stat {
        padding: 8px 0;
    }

    .usermgmt-stat + .usermgmt-stat {
        border-left: none;
        border-top: 1px solid color-mix(in srgb, var(--ColorBase500) 25%, transparent);
    }
}

/* Kuenstler-Links als Kacheln mit Marken-Logo */
.musician-links-title {
    display: block;
    margin: 20px 0 8px;
    font-size: 14px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.musician-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.musician-link {
    --brand: var(--ColorGradientMiddle);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border: 1px solid color-mix(in srgb, var(--ColorBase500) 25%, transparent);
    border-radius: var(--corner-radius-large);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.musician-link:hover,
.musician-link:focus-visible {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    transform: translateY(-1px);
}

.musician-link-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
}

.musician-link-logo .sl-icon {
    font-size: 20px;
    color: white;
}

.musician-link-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.musician-link-label {
    font-weight: 600;
    line-height: 1.2;
}

.musician-link-label::after {
    content: " ↗";
    opacity: .5;
}

.musician-link-host {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.musician-link-spotify { --brand: #1DB954; }
.musician-link-apple { --brand: #FA243C; }
.musician-link-youtube { --brand: #FF0000; }
.musician-link-amazon { --brand: #00A8E1; }

.musician-link-web .musician-link-logo {
    background: var(--SoundXGradient);
}

.usermgmt-empty {
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-style: italic;
}

/* Admin-Dashboard */
.homeadmin {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.homeadmin-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.homeadmin-eyebrow {
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ColorGradientStart);
}

.homeadmin-muted {
    display: block;
    font-size: 14px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.homeadmin-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.rz-card.homeadmin-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.homeadmin-kpi-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.homeadmin-kpi-icon {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: var(--corner-radius-large);
}

.homeadmin-kpi-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.rz-card.homeadmin-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.homeadmin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.homeadmin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ColorGradientStart);
    cursor: pointer;
    text-decoration: none;
}

.homeadmin-link .sl-icon {
    font-size: 14px;
}

.homeadmin-project {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Status-Pille, Farbe kommt aus .projectmgmt-status-* */
.homeadmin-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
    border-radius: var(--corner-radius-medium);
    background: color-mix(in srgb, currentColor 18%, transparent);
    font-size: var(--font-size-caption);
    font-weight: 600;
    line-height: 20px;
}

.homeadmin-status .usermgmt-kyc-dot {
    width: 6px;
    height: 6px;
    box-shadow: none;
}

.homeadmin-footnote {
    margin-top: auto;
    font-size: var(--font-size-caption);
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.homeadmin-info {
    display: flex;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--ColorBase500) 30%, transparent);
    border-radius: var(--corner-radius-large);
    font-size: 14px;
}

.homeadmin-info .sl-icon {
    color: var(--ColorGradientMiddle);
}

.homeadmin-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.homeadmin-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.homeadmin-steps li + li {
    border-top: 1px solid color-mix(in srgb, var(--ColorBase500) 25%, transparent);
}

.homeadmin-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--ColorGradientStart) 40%, transparent);
    border-radius: var(--corner-radius-large);
    background: color-mix(in srgb, var(--ColorGradientStart) 12%, transparent);
    color: var(--ColorGradientStart);
    font-weight: 700;
}
/* Startseite fuer Gaeste und Nicht-SysAdmins */
.homeinfo {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.rz-card.homeinfo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    text-align: center;
}

.homeinfo-logo {
    max-height: 56px;
    margin-bottom: 1rem;
}

.homeinfo-text {
    margin: 8px 0 0;
}

.homeinfo-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    padding: 10px 24px;
    border-radius: var(--corner-radius-default);
    background-image: var(--SoundXGradient);
    color: white !important;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s ease;
}

.homeinfo-button:hover {
    filter: brightness(1.1);
}