/* Unified CRM shell: page headers + sidebar typography
 * Colors/sizes from tokens.css — do not hardcode brand hex here.
 * Loaded from base.html AFTER extra_css so page forks cannot recolor the bar.
 *
 * Cabinet scrollport is #mainContent. Navy .page-header (and document headers)
 * is sticky with its hdr-btn / .dn-app-tools. Do not set html/body overflow-y
 * in page CSS — that unsticks the bar.
 */

/* Logged-in cabinet: only #mainContent scrolls, so sticky headers work everywhere. */
html:has(#mainContent),
body:has(#mainContent) {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#mainContent.main-content {
    --dn-app-tools-pad: 34rem;
    height: 100vh;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Reports: chrome stays put; only .table-container scrolls. */
#mainContent.main-content:has(.reports-page),
#mainContent.main-content:has(.money-container) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden !important;
}

#mainContent.main-content:has(.money-container) .money-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

.page-header,
.income-header,
.sale-header,
.writeoff-header,
.inventory-header,
.transfer-header,
.shipment-header,
.wd-create-header,
.inventory-page .page-header,
.income-page .page-header,
.sale-page .page-header,
.inc-list-page .page-header,
.wo-list-page .page-header,
.tr-list-page .page-header,
.users-page .page-header,
.page-wrap .page-header,
.money-container .page-header,
.bonus-settings-page .page-header,
.dn-page .page-header,
.integ-page .page-header {
    background: linear-gradient(90deg, var(--color-shell) 0%, var(--color-shell-mid) 100%) !important;
    padding: 0 var(--dn-app-tools-pad, 24.5rem) 0 1.25rem !important;
    height: var(--page-header-height) !important;
    min-height: var(--page-header-height) !important;
    max-height: var(--page-header-height) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
    gap: 0.75rem;
    color: var(--color-on-brand) !important;
    overflow: visible !important;
    flex-shrink: 0;
    position: sticky !important;
    top: 0 !important;
    z-index: 200;
}

.page-header:has(.integration-status) {
    overflow: visible !important;
}

.page-header-actions,
.page-header > .hdr-btn,
.page-header > a.btn,
.page-header .header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.page-header--muted {
    background: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 100%) !important;
}

.page-header--brand-np,
.integ-page .page-header.is-np,
.page-header.is-np {
    background: linear-gradient(135deg, var(--color-np) 0%, var(--color-np-dark) 100%) !important;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.page-header h6,
.page-header .page-title,
.income-header h4 {
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    color: var(--color-on-brand) !important;
}

.ui-on-dark,
.ui-on-dark * {
    color: var(--color-on-brand, #fff) !important;
}

.page-header p,
.page-header .page-subtitle,
.income-header p,
.income-header small {
    margin: 0 !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.page-header i,
.income-header i {
    color: var(--color-on-brand) !important;
}

/* Unified header action buttons (ghost on brand/NP headers) — single source */
.page-header .btn,
.page-header .hdr-btn,
.income-header .hdr-btn,
.sale-header .hdr-btn,
.sale-header button.hdr-btn,
.writeoff-header .hdr-btn,
.inventory-header .hdr-btn,
.transfer-header .hdr-btn,
.shipment-header .hdr-btn,
.dn-app-tools .hdr-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.page-header .btn:hover,
.page-header .hdr-btn:hover,
.income-header .hdr-btn:hover,
.sale-header .hdr-btn:hover,
.writeoff-header .hdr-btn:hover,
.inventory-header .hdr-btn:hover,
.transfer-header .hdr-btn:hover,
.shipment-header .hdr-btn:hover,
.dn-app-tools .hdr-btn:hover {
    background: rgba(255, 255, 255, 0.34) !important;
    color: #ffffff !important;
    filter: none !important;
}

.page-header .btn i,
.page-header .hdr-btn i,
.income-header .hdr-btn i,
.sale-header .hdr-btn i,
.writeoff-header .hdr-btn i,
.inventory-header .hdr-btn i,
.transfer-header .hdr-btn i,
.shipment-header .hdr-btn i,
.dn-app-tools .hdr-btn i {
    color: #ffffff !important;
    background: transparent !important;
}

/* Sidebar — never inherit page body font overrides */
#sidebar.sidebar,
#sidebar.sidebar .sidebar-menu,
#sidebar.sidebar .sidebar-link,
#sidebar.sidebar .sidebar-text,
#sidebar.sidebar .sidebar-icon,
#sidebar.sidebar .sidebar-brand,
#sidebar.sidebar .sidebar-brand-img,
#sidebar.sidebar .sidebar-brand-name,
#sidebar.sidebar .sidebar-brand-tagline,
#sidebar.sidebar .sidebar-submenu .sidebar-link {
    font-family: var(--font-sans) !important;
}

#sidebar.sidebar .sidebar-text {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

#sidebar.sidebar .sidebar-submenu .sidebar-text,
#sidebar.sidebar .sidebar-submenu .sidebar-link {
    font-size: 0.72rem !important;
}

#sidebar.sidebar .sidebar-link {
    padding: 8px 10px !important;
    line-height: 1.25 !important;
    min-height: 36px;
    border-radius: 8px !important;
}

#sidebar.sidebar .sidebar-submenu .sidebar-link {
    padding: 8px 10px 8px 16px !important;
    min-height: 36px;
}

#sidebar.sidebar .sidebar-icon {
    font-size: 0.9rem !important;
}

#sidebar.sidebar .sidebar-brand-name {
    display: block;
    width: 100%;
    font-family: Inter, var(--font-sans), sans-serif !important;
    font-size: 1.38rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

#sidebar.sidebar .sidebar-header {
    padding: 0 10px !important;
    overflow: hidden;
    justify-content: center !important;
    gap: 6px;
}

#sidebar.sidebar .sidebar-brand {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    justify-content: center;
}

#sidebar.sidebar .sidebar-brand-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 176px;
    object-fit: contain;
}

#sidebar.sidebar .sidebar-brand-text {
    width: 100%;
    max-width: 100%;
    align-items: center;
    margin-inline: auto;
}

#sidebar.sidebar .sidebar-brand-tagline {
    display: block !important;
    font-family: Inter, var(--font-sans), sans-serif !important;
    font-size: 0.5rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.07em !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* Product sidebars — same navy chrome as page header, rounded actions */
#productSidebar .psb-head,
#editProductSidebar .psb-head,
.add-product-sidebar .psb-head,
#storeDetailSidebar .psb-head,
.psb-head.ui-on-dark,
.crm-panel-header.ui-on-dark,
.crm-panel-header {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, var(--color-shell) 0%, var(--color-shell-mid) 100%) !important;
    color: var(--color-on-brand) !important;
    padding: 0 1.25rem !important;
    min-height: var(--page-header-height, 50px) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}
#productSidebar .psb-head h5,
#editProductSidebar .psb-head h5,
.add-product-sidebar .psb-head h5 {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    color: #fff !important;
    margin: 0 !important;
}
#productSidebar .psb-head h5 *,
#editProductSidebar .psb-head h5 *,
.add-product-sidebar .psb-head h5 *,
#editProductSidebar .psb-head p,
.add-product-sidebar .psb-head p {
    color: #fff !important;
    margin: 0 !important;
}
#productSidebar .psb-head .ds-btn-hdr,
#storeDetailSidebar .psb-head .ds-btn-hdr {
    border-radius: var(--radius-md) !important;
}

/* List/content cards — 12px, no hover lift */
.dn-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}
.dn-card.is-overlay {
    overflow: visible;
    position: relative;
    z-index: 80;
}
.dn-page-body {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.dn-content {
    padding: 12px 16px 20px;
}
.inc-list-body,
.wo-list-body,
.tr-list-body {
    padding: 12px 16px 20px;
}
.inc-list-body .table-responsive,
.wo-list-body .table-responsive,
.tr-list-body .table-responsive,
.doc-stack,
.inc-empty,
.wo-empty {
    border-radius: var(--radius-lg, 12px) !important;
    overflow: hidden;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
}

/* Filter row: period / selects / actions on one baseline */
.dn-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
}
.dn-filter-row > .form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}
.dn-filter-row label {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-secondary, #374151);
}
.dn-filter-row select,
.dn-filter-row .date-range-trigger,
.dn-filter-row .dn-btn-sm {
    height: var(--btn-height-sm, 32px);
    min-height: var(--btn-height-sm, 32px);
    box-sizing: border-box;
}
.dn-filter-row select {
    border: 1px solid var(--border-input, #ced4da);
    border-radius: var(--radius-sm, 4px);
    padding: 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card, #fff);
    outline: none;
}
.dn-filter-row select:focus {
    border-color: var(--color-brand, #2b7a74);
}
.dn-filter-row .dn-btn-sm {
    display: inline-flex;
    align-items: center;
}
.dn-filter-actions {
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
}

/* Django flash: overlay, no layout shift above page-header */
.dn-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(480px, calc(100vw - 2rem));
    pointer-events: none;
    margin: 0;
    padding: 0;
}
.dn-flash-item {
    pointer-events: auto;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    opacity: 1;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.dn-flash-item.is-out {
    opacity: 0;
    transform: translateY(-6px);
}
.dn-flash-text {
    flex: 1;
    min-width: 0;
}
.dn-flash-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.55;
    color: inherit !important;
    padding: 0;
    line-height: 1;
}
.dn-flash-close:hover { opacity: 0.9; }
.dn-flash-success {
    background: var(--accent-success-soft) !important;
    color: var(--text-primary) !important;
    border-color: var(--status-completed-border, #86efac) !important;
}
.dn-flash-success i,
.dn-flash-success .dn-flash-close {
    color: var(--text-primary) !important;
}
.alert.alert-success {
    color: var(--text-primary) !important;
}
.alert.alert-success i,
.alert.alert-success .btn-close {
    color: var(--text-primary) !important;
}
.dn-flash-error {
    background: var(--accent-danger-soft) !important;
    color: var(--accent-danger-dark) !important;
    border-color: var(--status-cancelled-border) !important;
}
.dn-flash-warning {
    background: var(--status-processing-bg, #dbeafe) !important;
    color: var(--status-processing-fg, #1e40af) !important;
    border-color: var(--status-processing-border, #93c5fd) !important;
}
.dn-flash-info {
    background: var(--color-info-soft, #e3f2fd) !important;
    color: var(--text-ink) !important;
    border-color: var(--border-color) !important;
}

/* М’які тости в navy-шапці: .ui-on-dark * не має фарбувати текст у білий. */
.page-header .header-toast,
.page-header .header-toast *,
.income-header .header-toast,
.income-header .header-toast *,
.ui-on-dark .header-toast,
.ui-on-dark .header-toast *,
.dn-flash-item,
.dn-flash-item *,
.alert.alert-success,
.alert.alert-success *,
.alert.alert-warning,
.alert.alert-warning *,
.alert.alert-info,
.alert.alert-info * {
    color: var(--text-primary) !important;
}
.page-header .header-toast-error,
.page-header .header-toast-error *,
.ui-on-dark .header-toast-error,
.ui-on-dark .header-toast-error *,
.dn-flash-error,
.dn-flash-error *,
.alert.alert-danger,
.alert.alert-danger * {
    color: var(--accent-danger-dark) !important;
}
.page-header .header-toast-info,
.page-header .header-toast-info *,
.ui-on-dark .header-toast-info,
.ui-on-dark .header-toast-info *,
.dn-flash-info,
.dn-flash-info * {
    color: var(--status-processing-fg) !important;
}
.page-header .header-toast-warning,
.ui-on-dark .header-toast-warning {
    background: var(--status-pending-bg, #fef3c7) !important;
    border-color: var(--status-pending-border, #fcd34d) !important;
}

/* Soft badges — same rounded corners everywhere (page CSS cannot square them) */
.status-badge,
.dn-badge,
.dn-store-chip,
.role-badge,
.status-badge-chip,
.source-tag,
.dn-tag {
    border-radius: var(--badge-radius, 8px) !important;
}

/* UA / bell / POS / user — sit in the navy page header, no extra bar */

.dn-app-tools {
    position: fixed;
    top: 0;
    right: 10px;
    z-index: 210;
    height: var(--page-header-height, 50px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 8px;
    box-sizing: border-box;
    background: transparent;
}

/* Tools live inside the sticky navy header (not a separate viewport overlay). */
.page-header.has-dn-app-tools,
.income-header.has-dn-app-tools,
.sale-header.has-dn-app-tools,
.writeoff-header.has-dn-app-tools,
.inventory-header.has-dn-app-tools,
.transfer-header.has-dn-app-tools,
.shipment-header.has-dn-app-tools,
.wd-create-header.has-dn-app-tools {
    overflow: visible !important;
    padding-right: 10px !important;
}

.page-header.has-dn-app-tools .dn-app-tools,
.income-header.has-dn-app-tools .dn-app-tools,
.sale-header.has-dn-app-tools .dn-app-tools,
.writeoff-header.has-dn-app-tools .dn-app-tools,
.inventory-header.has-dn-app-tools .dn-app-tools,
.transfer-header.has-dn-app-tools .dn-app-tools,
.shipment-header.has-dn-app-tools .dn-app-tools,
.wd-create-header.has-dn-app-tools .dn-app-tools {
    position: static;
    top: auto;
    right: auto;
    margin-left: auto;
    height: 100%;
    z-index: 1;
    padding-right: 0;
}

.page-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools,
.income-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools,
.sale-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools,
.writeoff-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools,
.inventory-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools,
.transfer-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools,
.shipment-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools,
.wd-create-header.has-dn-app-tools .page-header-actions ~ .dn-app-tools {
    margin-left: 8px;
}

.dn-app-tools .sidebar-lang,
.dn-app-tools .sidebar-bell,
.dn-app-user-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.dn-app-pos {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: var(--color-on-brand, #fff);
    color: var(--color-shell) !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
}

.page-header .dn-app-pos,
.income-header .dn-app-pos,
.sale-header .dn-app-pos,
.writeoff-header .dn-app-pos,
.inventory-header .dn-app-pos,
.transfer-header .dn-app-pos,
.shipment-header .dn-app-pos,
.wd-create-header .dn-app-pos {
    color: var(--color-shell) !important;
    background: var(--color-on-brand, #fff) !important;
}

.dn-app-pos i,
.dn-app-pos .dn-app-pos-label,
.page-header .dn-app-pos i,
.page-header .dn-app-pos * {
    line-height: 1;
    color: var(--color-shell) !important;
}

.dn-app-pos i,
.page-header .dn-app-pos i {
    font-size: 0.95rem;
}

.dn-app-pos:hover {
    background: #fff;
    filter: brightness(0.96);
}

.dn-app-tools .sidebar-lang-btn,
.dn-app-tools .sidebar-bell-btn,
.dn-app-user {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-on-brand, #fff) !important;
    cursor: pointer;
    box-shadow: none;
}

.dn-app-tools .sidebar-lang-btn {
    min-width: 2.2rem;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    gap: 6px;
}

.dn-app-tools .sidebar-bell-btn {
    width: 32px;
}

.dn-app-tools .sidebar-bell-btn i,
.dn-app-user > i {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--color-on-brand, #fff) !important;
}

.dn-app-user > i {
    font-size: 1.35rem;
}

.dn-app-user-photo {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 50%;
    object-fit: cover !important;
    flex-shrink: 0;
    display: block;
}

.dn-app-tools .sidebar-lang-btn:hover,
.dn-app-tools .sidebar-bell-btn:hover,
.dn-app-user:hover {
    background: rgba(255, 255, 255, 0.08);
}

.dn-app-user {
    max-width: 12rem;
    min-width: 0;
    padding: 0 4px;
}

.dn-app-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
    text-align: left;
}

.dn-app-user-name,
.dn-app-user-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-on-brand, #fff) !important;
}

.dn-app-user-name {
    font-size: 0.78rem;
    font-weight: 600;
}

.dn-app-user-role {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.78;
}

.dn-app-tools .sidebar-bell-menu,
.dn-app-tools .sidebar-lang-menu,
.dn-app-user-menu {
    z-index: 1040;
}

.dn-app-user-menu {
    position: fixed;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    overflow: hidden;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
}

.dn-app-user-menu[hidden] {
    display: none !important;
}

.dn-app-user-menu a,
.dn-app-user-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary) !important;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.dn-app-user-menu a i,
.dn-app-user-menu button i {
    font-size: 1rem;
    line-height: 1;
    color: var(--text-secondary) !important;
    width: 1.1rem;
    text-align: center;
}

.dn-app-user-menu a:hover,
.dn-app-user-menu button:hover {
    background: var(--bg-primary);
}

.dn-app-user-menu form {
    margin: 0;
}

@media (max-width: 1200px) {
    #mainContent.main-content {
        --dn-app-tools-pad: 20rem;
    }
    .dn-app-user-text,
    .dn-app-ai-label {
        display: none;
    }
}

@media (max-width: 768px) {
    #mainContent.main-content {
        --dn-app-tools-pad: 16rem;
    }
    .dn-app-pos-label,
    .dn-app-ai-label {
        display: none;
    }
    .dn-app-pos,
    .dn-app-tools .dn-app-ai {
        padding: 0 8px;
        width: 32px;
        min-width: 32px;
    }
    .dn-app-tools {
        right: 8px;
        gap: 4px;
        padding-left: 4px;
    }
}

.dn-bell-toasts {
    position: fixed;
    z-index: 4200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(340px, calc(100vw - 24px));
    pointer-events: none;
}
.dn-bell-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    cursor: pointer;
}
.dn-bell-toast:hover {
    background: var(--bg-table-hover, var(--bg-card));
    color: var(--text-primary);
}
.dn-bell-toast i {
    color: var(--color-brand);
    font-size: 1.05rem;
    line-height: 1.2;
    flex-shrink: 0;
}
.dn-bell-toast-body {
    min-width: 0;
    flex: 1;
}
.dn-bell-toast-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}
.dn-bell-toast-text {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dn-app-tools .sidebar-bell-btn.is-ring i {
    animation: dn-bell-ring 0.55s ease-in-out 2;
}
@keyframes dn-bell-ring {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-14deg); }
    75% { transform: rotate(14deg); }
}