/* =====================================================================
   Sidebar corporativo ODESA — fuente ÚNICA de estilos del menú lateral.

   Antes cada NavMenu*.razor.css repetía (con prefijos distintos: nc-, ni-)
   el mismo sidebar, y los acentos se desincronizaban: Ingeniería quedó en
   azul mientras el resto usaba el teal corporativo. Este archivo es global
   (no scoped) para que TODOS los menús compartan literalmente las mismas
   reglas; los .razor.css por rol ya no definen sidebar.

   Lo usan: NavMenuIngenieria, NavMenuPM, NavMenuCompra, NavMenuAlmacen,
   SidebarHeader. Los iconos son SVG monocromos (nada de emoji) para que el
   menú se vea igual en cualquier sistema operativo.
   ===================================================================== */

.sb-sidebar {
    /* Tokens del sidebar: cambiar el acento aquí lo cambia en todos los roles. */
    --sb-accent: #14b8a6;
    --sb-accent-soft: rgba(20, 184, 166, 0.12);
    --sb-accent-border: rgba(20, 184, 166, 0.2);
    --sb-accent-text: #5eead4;
    --sb-text: #94a3b8;
    --sb-text-hover: #f1f5f9;
    --sb-muted: #64748b;
    --sb-hairline: rgba(255, 255, 255, 0.06);
    --sb-icon: #94a3b8;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    user-select: none;
}

/* ===== Header / Logo ===== */
.sb-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--sb-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sb-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sb-logo-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sb-logo-text {
    color: white;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.sb-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ===== Área de scroll ===== */
.sb-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.sb-scroll::-webkit-scrollbar {
    width: 4px;
}

.sb-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sb-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.sb-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sb-nav {
    display: flex;
    flex-direction: column;
}

/* ===== Enlaces ===== */
.sb-item {
    margin: 0.1rem 0.75rem;
}

.sb-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--sb-text);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sb-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sb-text-hover);
}

.sb-link.active {
    background: var(--sb-accent-soft);
    color: var(--sb-accent-text);
}

.sb-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Iconos ===== */
.sb-icon {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.sb-link:hover .sb-icon {
    opacity: 1;
    transform: scale(1.05);
}

.sb-link.active .sb-icon {
    opacity: 1;
    filter: brightness(1.4) saturate(1.2);
}

/* ===== Separador ===== */
.sb-divider {
    height: 1px;
    background: var(--sb-hairline);
    margin: 0.5rem 1rem;
}

/* ===== Etiqueta de sección ===== */
.sb-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--sb-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sb-count {
    background: rgba(20, 184, 166, 0.15);
    color: var(--sb-accent);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ===== Botón de acción del menú =====
   Para las acciones que el rol dispara desde el propio menú (crear proyecto), no para navegar.
   Se distingue de los .sb-link por el borde punteado con el acento. */
.sb-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: calc(100% - 1.5rem);
    margin: 0.25rem 0.75rem 0.35rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--sb-accent-border);
    border-radius: 0.5rem;
    background: rgba(20, 184, 166, 0.08);
    color: var(--sb-accent-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.sb-action:hover {
    background: rgba(20, 184, 166, 0.16);
    border-color: var(--sb-accent);
}

.sb-action:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ===== Proyecto (lista de proyectos del rol) ===== */
.sb-project-item {
    margin: 0.15rem 0.75rem;
}

.sb-project-item .sb-link {
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.sb-project-item .sb-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border-color: var(--sb-hairline);
}

.sb-project-item.active .sb-link {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--sb-accent-border);
    color: var(--sb-accent-text);
}

.sb-proj-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sb-proj-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sb-proj-name {
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.sb-proj-client {
    font-size: 0.62rem;
    color: var(--sb-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-project-item.active .sb-proj-client {
    color: rgba(94, 234, 212, 0.6);
}

/* ===== Grupos plegables (proyectos categorizados por fase) =====
   Lo usa NavMenuIngenieria: cada fase del pipeline es un encabezado clickeable y los
   proyectos cuelgan de un riel con el color de esa fase. El color se inyecta por
   --sb-fase-color desde el .razor para no cablear la paleta de fases aquí. */
.sb-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(100% - 1.5rem);
    margin: 0.25rem 0.75rem 0.1rem;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--sb-muted);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.sb-group-header:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--sb-text-hover);
}

/* Triángulo CSS: apunta a la derecha plegado, rota al desplegar. */
.sb-group-caret {
    width: 0;
    height: 0;
    flex-shrink: 0;
    border-left: 4px solid currentColor;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    opacity: 0.7;
    transition: transform 0.18s ease;
}

.sb-group.open .sb-group-caret {
    transform: rotate(90deg);
}

.sb-group-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sb-group-name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-group-body {
    margin: 0 0.75rem 0.35rem 1.4rem;
    border-left: 2px solid var(--sb-fase-color, var(--sb-hairline));
    padding-left: 0.25rem;
    animation: sb-fade-in 0.15s ease;
}

.sb-group-body .sb-project-item {
    margin: 0.15rem 0 0.15rem 0.25rem;
}

/* ===== Badges ===== */
.sb-badge-alert {
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    flex-shrink: 0;
    animation: sb-pulse 2s infinite;
}

.sb-badge-ok {
    font-size: 0.6rem;
    color: #22c55e;
    flex-shrink: 0;
}

/* Fecha límite del proyecto (Ingeniería): mismo tamaño que los badges. */
.sb-deadline {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 28px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    white-space: nowrap;
}

.sb-urgency-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.sb-urgency-warn {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    animation: sb-pulse 2s infinite;
}

.sb-urgency-critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    animation: sb-pulse 1.5s infinite;
}

/* ===== Carga y vacío ===== */
.sb-loading-dot {
    width: 6px;
    height: 6px;
    background: var(--sb-accent);
    border-radius: 50%;
    animation: sb-pulse 1s infinite;
}

.sb-empty {
    padding: 1rem;
    text-align: center;
    color: #475569;
    font-size: 0.72rem;
    font-style: italic;
}

@keyframes sb-fade-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sb-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* =====================================================================
   Catálogo de iconos (SVG monocromo, fill #94a3b8).
   Para agregar uno nuevo: copiar el patrón y usar el mismo fill.
   ===================================================================== */

.sb-ic-home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M12.71 2.29a1 1 0 0 0-1.42 0l-9 9a1 1 0 0 0 0 1.42A1 1 0 0 0 3 13h1v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7h1a1 1 0 0 0 .71-1.71zM9 20v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5zm9 0h-2v-5a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3v5H6v-7.59l6-6 6 6z'/%3E%3C/svg%3E");
}

.sb-ic-inbox {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H5V5h14v10z'/%3E%3C/svg%3E");
}

.sb-ic-cart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

.sb-ic-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.sb-ic-person-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M11 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-2 6.17V20H3v-2c0-2.66 5.33-4 8-4 .35 0 .73.02 1.13.07l-3.13 4.1zM20.6 12.5l1.4 1.41-5.57 5.59-2.83-2.82 1.41-1.41 1.42 1.41 4.17-4.18z'/%3E%3C/svg%3E");
}

.sb-ic-helmet {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-3.31 0-6 2.69-6 6v3H4v2h16v-2h-2V9c0-3.31-2.69-6-6-6zm0 2c2.21 0 4 1.79 4 4v3h-2V6.35A3.97 3.97 0 0 0 12 5zm-1 .35V12H8V9c0-1.48.81-2.77 2-3.45zM4 17h16v2H4z'/%3E%3C/svg%3E");
}

.sb-ic-clipboard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm6 16H6V8h2v2h2V8h4v2h2V8h2v12z'/%3E%3C/svg%3E");
}

.sb-ic-doc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm4 18H6V4h7v5h5zM8 13h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E");
}

.sb-ic-truck {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

.sb-ic-card {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
}

.sb-ic-bank {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z'/%3E%3C/svg%3E");
}

.sb-ic-coin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.88-2.24V19h-1.75v-1.29c-1.12-.23-2.08-.95-2.15-2.21h1.29c.07.68.53 1.21 1.73 1.21 1.29 0 1.58-.64 1.58-1.05 0-.55-.29-1.07-1.75-1.41-1.62-.39-2.73-1.06-2.73-2.4 0-1.12.9-1.85 2.03-2.09V8.24h1.75v1.53c1.22.3 1.83 1.22 1.87 2.22h-1.29c-.04-.72-.42-1.21-1.46-1.21-.99 0-1.58.45-1.58 1.08 0 .56.43.92 1.75 1.26 1.32.34 2.73.9 2.73 2.55-.01 1.19-.9 1.85-2.02 2.09z'/%3E%3C/svg%3E");
}

.sb-ic-note {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

.sb-ic-calendar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E");
}

.sb-ic-receipt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 3.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2v20l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5V2l-1.5 1.5zM18 19.09H6V4.91h12v14.18zM8 7h8v2H8zm0 4h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E");
}

.sb-ic-box {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-1 18H5V9h14v11zm1-13H4V4h16v3zM9 12h6v2H9z'/%3E%3C/svg%3E");
}

.sb-ic-cash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H3V6h18v12zm-9-9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM5 8h2v2H5zm12 6h2v2h-2z'/%3E%3C/svg%3E");
}

.sb-ic-building {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.sb-ic-book {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H6V4h2v8l2.5-1.5L13 12V4h5v16z'/%3E%3C/svg%3E");
}

.sb-ic-swap {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z'/%3E%3C/svg%3E");
}

.sb-ic-report {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z'/%3E%3C/svg%3E");
}

.sb-ic-trend-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M16 18l2.29-2.29-4.88-4.88-4 4L2 7.41 3.41 6l6 6 4-4 6.3 6.29L22 12v6z'/%3E%3C/svg%3E");
}

.sb-ic-calculator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 7h10v3H7zm0 5h2v2H7zm4 0h2v2h-2zm4 0h2v6h-2zm-8 4h2v2H7zm4 0h2v2h-2z'/%3E%3C/svg%3E");
}

.sb-ic-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

.sb-ic-vault {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 14H4V6h16v12zM11 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm0 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6-4h2v4h-2z'/%3E%3C/svg%3E");
}