/* Nexus.Ui — CSS til de fælles komponenter (StatusBadge, InitialsAvatar, NexusAlert, ResponsiveTabs) og Lucide.
   Serveres som _content/Nexus.Ui/nexus-ui.css og indlæses før appens egen app.css.
   Variablerne er WebApps tokens (app.css :root); en app uden dem falder tilbage på MudBlazors palette,
   som DecuriaTheme sætter til de samme farver. */

.mud-chip.nexus-status-badge {
    color: var(--nexus-status-text);
    background-color: var(--nexus-status-surface);
    border: 1px solid color-mix(in srgb, var(--nexus-status-text) 35%, var(--border, var(--mud-palette-lines-default)));
    font-weight: 600;
}
.nexus-status-badge--success { --nexus-status-text: var(--status-success-text, var(--mud-palette-success)); --nexus-status-surface: color-mix(in srgb, var(--success, var(--mud-palette-success)) 14%, var(--surface, var(--mud-palette-surface))); }
.nexus-status-badge--error { --nexus-status-text: var(--status-error-text, var(--mud-palette-error)); --nexus-status-surface: color-mix(in srgb, var(--error, var(--mud-palette-error)) 14%, var(--surface, var(--mud-palette-surface))); }
.nexus-status-badge--warning { --nexus-status-text: var(--status-warning-text, var(--mud-palette-warning)); --nexus-status-surface: color-mix(in srgb, var(--warning, var(--mud-palette-warning)) 14%, var(--surface, var(--mud-palette-surface))); }
.nexus-status-badge--info { --nexus-status-text: var(--status-info-text, var(--mud-palette-info)); --nexus-status-surface: color-mix(in srgb, var(--accent, var(--mud-palette-primary)) 14%, var(--surface, var(--mud-palette-surface))); }
.nexus-status-badge--neutral { --nexus-status-text: var(--text, var(--mud-palette-text-primary)); --nexus-status-surface: color-mix(in srgb, var(--text-muted, var(--mud-palette-text-secondary)) 8%, var(--surface, var(--mud-palette-surface))); }
.nexus-status-icon { display: inline-flex; align-items: center; margin-right: .25rem; }

/* ── Initials-avatar (gruppe-editor, medlemsvælger) ── */
.initials-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 700; flex-shrink: 0;
    line-height: 1;
}

/* ── Nexus-notifikationer (NexusAlert) — Lucide-ikoner + tonet flade pr. severity ── */
.nexus-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .95rem;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid transparent;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text, var(--mud-palette-text-primary));
    animation: nexus-alert-in .18s ease-out;
}
.nexus-alert-dense { padding: .45rem .7rem; }

.nexus-alert-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: .12rem;
}
.nexus-alert-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nexus-alert-content a, .nexus-alert-content .mud-link { color: inherit; text-decoration: underline; }

.nexus-alert-close {
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    padding: .2rem;
    margin: -.05rem -.25rem 0 0;
    display: inline-flex;
    border-radius: 6px;
    transition: opacity .12s, background .12s;
}
.nexus-alert-close:hover { opacity: 1; background: rgba(255, 255, 255, .08); }

.nexus-alert-success {
    background: color-mix(in srgb, var(--success, var(--mud-palette-success)) 13%, transparent);
    border-color: color-mix(in srgb, var(--success, var(--mud-palette-success)) 38%, transparent);
}
.nexus-alert-success .nexus-alert-icon { color: #57C98B; }

.nexus-alert-error {
    background: color-mix(in srgb, var(--error, var(--mud-palette-error)) 13%, transparent);
    border-color: color-mix(in srgb, var(--error, var(--mud-palette-error)) 38%, transparent);
}
.nexus-alert-error .nexus-alert-icon { color: #F28B8B; }

.nexus-alert-warning {
    background: color-mix(in srgb, var(--warning, var(--mud-palette-warning)) 14%, transparent);
    border-color: color-mix(in srgb, var(--warning, var(--mud-palette-warning)) 40%, transparent);
}
.nexus-alert-warning .nexus-alert-icon { color: #E9BE5A; }

.nexus-alert-info {
    background: color-mix(in srgb, var(--accent, var(--mud-palette-primary)) 13%, transparent);
    border-color: color-mix(in srgb, var(--accent, var(--mud-palette-primary)) 38%, transparent);
}
.nexus-alert-info .nexus-alert-icon { color: var(--accent, var(--mud-palette-primary)); }

@keyframes nexus-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}


/* ── ResponsiveTabs — faner på desktop, chips på mobil ──────────────────────
   Begge rendres; grænsen er den samme som resten af mobil-CSS'en (599.98px). Chipsene
   ombrydes frem for at scrolle vandret, så alle valg står synligt på en telefon.
   Margen nedad, fordi indholdet ikke står i MudTabs' eget panel. */
.responsive-tabs { margin-bottom: 1rem; }
.responsive-tabs-mobile { display: none; }
.responsive-tabs-count {
    margin-left: .4rem;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
    .responsive-tabs-desktop { display: none; }
    .responsive-tabs-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }
    .responsive-tabs-mobile .mud-chip { margin: 0; }
}

/* ── Lucide-ikonfont ──
   Pipeline-ikoner tegnes med fontens egne glyffer i stedet for indlejrede SVG-stier, så alle
   ~1700 Lucide-ikoner virker uden en håndskrevet liste. LucideIcons.Glyph indsætter codepointet
   direkte (fx U+E10F for "mail") — ikke navnet — fordi WebKit ikke anvender fontens ligaturer. */
@font-face {
    font-family: 'Lucide';
    src: url('fonts/Lucide.ttf') format('truetype');
    font-display: block;
}

.lucide-glyph {
    font-family: 'Lucide';
    font-size: 1.125rem;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
}