/* Shared Component Styles - InpactInsurancePlatform.Shared.UI */

/* Status Chip Colors */
.mud-chip.chip-color-success {
    color: #2DAF18;
    background-color: #EDF9EB;
    border: 1px solid rgba(45, 175, 24, 0.27);
}

.mud-chip.chip-color-info {
    color: #2B50CC;
    background-color: rgba(43, 80, 204, 0.08);
    border: 1px solid rgba(43, 80, 204, 0.33);
}

.mud-chip.chip-color-error {
    color: #E30C0C;
    background-color: #FBEEEE;
    border: 1px solid rgba(204, 43, 43, 0.33);
}

.mud-chip.chip-color-unknown {
    color: #000000;
    background-color: #F8F8F8;
    border: 1px solid rgba(0, 0, 0, 0.23);
}

.mud-chip.chip-color-warning {
    color: #F57C00;
    background-color: #FFF3E0;
    border: 1px solid rgba(245, 124, 0, 0.3);
}

.mud-chip.chip-color-prospect {
    color: #F57C00;
    background-color: #FFF3E0;
    border: 1px solid rgba(245, 124, 0, 0.3);
}

/* Calculation Status Chip */
.calculation-status-chip {
    font-weight: 500;
}

/* Business activity status chip — premium availability variants */
#app .business-activity-status .mud-icon-root {
    font-size: 14px;
    letter-spacing: 0px;
    margin-right: 7px;
}

#app .business-activity-status.premium-availability--available {
    background-color: #FFF9F3;
    border: 1px solid rgba(45, 175, 24, 0.24);
    color: #41875B;
}

#app .business-activity-status.premium-availability--conditional {
    background-color: #FFF9F3;
    border: 1px solid rgba(229, 117, 4, 0.33);
    color: #E57504
}

#app .business-activity-status.premium-availability--not-available {
    background-color: #FFFDFD;
    border: 1px solid rgba(200, 12, 12, 0.25);
    color: #C80C0C
}

#app .business-activity-status.premium-availability--unknown {
    background-color: #F8F8F8;
    border: 1px solid rgba(0, 0, 0, 0.23);
    color: #000000;
}

/* Business activity dialog — title + table styling used by the picker */
#app .business-activity-dialog-title h6 {
    font-family: NotoSans-Semi;
}

#app .mud-table-row:has(.premium-availability--not-available) .mud-table-cell {
    color: #C80C0C;
}

#app .mud-table .custom-column-header-text {
    font-family: NotoSans-Semi;
    color: #000000;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0;
}

#app .mud-table .table-content-text {
    font-family: NotoSans;
    width: 100%;
}

/* Notification centre (meldingencentrum) — bell badge + dropdown */

/* MudBadge's overlap offset (12px) only reaches the icon button's padding edge, leaving the badge floating
   next to the bell. Pull it further down-left so it sits on the glyph's top-right corner.
   Assumes the badge keeps MudBadge's default top-right origin with Overlap="true". */
#app .notification-bell-badge {
    inset: auto auto calc(100% - 18px) calc(100% - 18px);
    /* The badge span is a sibling of the icon button, not a child, and MudBlazor gives it pointer-events auto,
       so clicks on the number would go nowhere. Let them fall through to the bell button that opens the menu. */
    pointer-events: none;
}

.notification-panel {
    width: 380px;
    max-width: 90vw;
}

.notification-list {
    max-height: 60vh;
    overflow-y: auto;
}

.notification-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* The transparent left border is the unread marker's column: it keeps titles aligned
       whether or not the row is unread. */
    padding: 10px 16px 10px 13px;
    border-left: 3px solid transparent;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* "Thrown away": only a row that's actually being cleared animates out — the unread rows staying behind
   are never touched. The transition sits here, not on the base rule, so it plays entering this state but
   the row is gone from the DOM entirely by the time it would leave it — no reverse "phase in" to animate. */
.notification-row-discarded {
    transition: transform 240ms ease-in, opacity 240ms ease-in;
    transform: translateX(-16%) rotate(-1.5deg);
    opacity: 0;
    pointer-events: none;
}

.notification-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.notification-row:last-child {
    border-bottom: none;
}

/* Unmapped link type: nothing to open, so don't promise a click. */
.notification-row-static {
    cursor: default;
}

.notification-row-unread {
    background-color: var(--mud-palette-action-default-hover);
    border-left-color: var(--mud-palette-primary);
}

.notification-row-unread .mud-typography-body2 {
    font-family: NotoSans-Semi;
}

/* Fixed leading column: a long title has to wrap rather than squeeze the type icon. */
.notification-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Trailing column, mirroring .notification-icon: the action keeps its width whatever the title does. */
.notification-row-action {
    flex-shrink: 0;
    margin-left: auto;
}

/* The archive's second line: long enough to be worth reading, short enough not to push the next row away. */
.notification-detail {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.notification-archive {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
}

.news-list {
    padding: 0;
}

.news-item {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.news-item:last-child {
    border-bottom: none;
}

/* Sanitized HTML from MessagingService: keep its own flow, only stop images from breaking the column. */
.news-body img {
    max-width: 100%;
    height: auto;
}

/* Organization switcher popover — sized like the shared React OrganizationSwitcher. Lives here
   because MudBlazor renders the popover outside the component subtree, so scoped CSS cannot
   reach the PopoverClass element. */
.org-switcher-popover {
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 560px;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

/* Identity group: the organization pill attaches to the account avatar the way the shared React
   OrganizationSwitcher does in IdentityHub/DMS — a thin pill whose flat right edge disappears
   under a larger, overlapping avatar circle. Without a pill (logged out, no organization) the
   avatar simply stands alone. */
.appbar-identity-group {
    display: inline-flex;
    align-items: center;
}

.appbar-identity-group .mud-menu,
.appbar-identity-group .mud-menu-activator,
.appbar-identity-group .mud-tooltip-root {
    display: flex;
    align-items: center;
}

/* 44px avatar with a divider ring, IdentityHub's exact navbar spec. */
.login-avatar-button {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    background: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: filter 150ms;
}

.login-avatar-button:hover {
    filter: brightness(0.95);
}

.login-avatar-button .login-avatar {
    width: 100%;
    height: 100%;
    font-size: 1rem;
}

/* The overlap: the avatar rides over the pill's flat right edge, so the only visible seams are
   the pill's top and bottom edges. */
.appbar-identity-group:has(.org-switcher-pill) .login-avatar-button {
    margin-left: -14px;
    z-index: 1;
}