@import '_content/Indx.Systm.Blazor/Indx.Systm.Blazor.kqnvy0n8z6.bundle.scp.css';

/* /Components/Subscription/Manage.razor.rz.scp.css */
/* Give the billing toggle a border so it reads against the card.
   Inset box-shadow draws a 1px outline WITHOUT changing the slider's box or the
   knob's absolute positioning (a real border shifts both). ::deep reaches into
   the child ToggleSwitch component. */
.billing-interval[b-z16w0p39s1]  .indx-toggle-slider {
    box-shadow: inset 0 0 0 1px var(--lv3);
}
/* /Components/Systm/NotificationPanel.razor.rz.scp.css */
.notif-wrapper[b-jh1bgq8v2s] {
    position: relative;
    display: inline-flex;
}

/* Bell trigger — override nav-bell so badge positioning works */
.notif-trigger[b-jh1bgq8v2s] {
    position: relative;
}

.notif-trigger--active[b-jh1bgq8v2s] {
    background: var(--lv2);
    color: var(--lv8);
}

.notif-badge[b-jh1bgq8v2s] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: var(--CSignal);
    pointer-events: none;
}

.notif-trigger--has-unread[b-jh1bgq8v2s] {
    color: var(--lv8);
}

/* Backdrop */
.notif-backdrop[b-jh1bgq8v2s] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Panel */
.notif-panel[b-jh1bgq8v2s] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--lv0);
    border: 1px solid var(--lv3);
    border-radius: var(--radius);
    z-index: 100;
    overflow: hidden;
}

.notif-panel-header[b-jh1bgq8v2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lv2);
}

.notif-panel-title[b-jh1bgq8v2s] {
    font: var(--text-xs);
    font-weight: var(--semi);
    color: var(--lv7);
}

.notif-mark-all[b-jh1bgq8v2s] {
    font: var(--text-xs);
    color: var(--lv5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-mark-all:hover[b-jh1bgq8v2s] {
    color: var(--lv7);
}

.notif-empty[b-jh1bgq8v2s] {
    font: var(--text-xs);
    color: var(--lv4);
    padding: 24px 16px;
    margin: 0;
    text-align: center;
}

.notif-list[b-jh1bgq8v2s] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.notif-row[b-jh1bgq8v2s] {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lv2);
    cursor: pointer;
    transition: background 80ms ease;
}

.notif-row:last-child[b-jh1bgq8v2s] {
    border-bottom: none;
}

.notif-row:hover[b-jh1bgq8v2s] {
    background: var(--lv1);
}

.notif-row--unread[b-jh1bgq8v2s] {
    background: var(--lv1);
}

.notif-dot-col[b-jh1bgq8v2s] {
    width: 8px;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
    flex-shrink: 0;
}

.notif-dot[b-jh1bgq8v2s] {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--CTeal);
    flex-shrink: 0;
}

.notif-content[b-jh1bgq8v2s] {
    flex: 1;
    min-width: 0;
}

.notif-title[b-jh1bgq8v2s] {
    font: var(--text-xs);
    font-weight: var(--med);
    color: var(--lv7);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-body[b-jh1bgq8v2s] {
    font: var(--text-xs);
    color: var(--lv5);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-time[b-jh1bgq8v2s] {
    font-size: 10px;
    color: var(--lv4);
    margin: 0;
}

.notif-panel-footer[b-jh1bgq8v2s] {
    padding: 10px 16px;
    border-top: 1px solid var(--lv2);
    text-align: center;
}

.notif-panel-footer a[b-jh1bgq8v2s] {
    font: var(--text-xs);
    color: var(--lv5);
    text-decoration: none;
}

.notif-panel-footer a:hover[b-jh1bgq8v2s] {
    color: var(--lv7);
}