/* ==========================================================================
   OmegaGestor - Tema de Navegação DistribuiPro (v17)
   Sidebar Retrátil e Navbar Moderna
   ========================================================================== */

:root {
    --dp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --dp-sidebar-width: 240px;
    --dp-sidebar-collapsed: 76px;
    --dp-accent: #6366f1;
    --dp-accent-hover: #4f46e5;
    --dp-accent-light: #eef2ff;
    --dp-text-primary: #1e293b;
    --dp-text-secondary: #64748b;
    --dp-text-muted: #94a3b8;
    --dp-border: #e2e8f0;
    --dp-bg-sidebar: #ffffff;
    --dp-bg-sidebar-hover: #f8fafc;
    --dp-brand-bg: #ffffff;
    --dp-radius-md: 10px;
    --dp-radius-lg: 14px;
    --dp-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── APLICAÇÃO GLOBAL DA TIPOGRAFIA MODERNA (PLUS JAKARTA SANS & JETBRAINS MONO) ─── */
html, body,
.content-wrapper,
.main-header,
.main-sidebar,
.box,
.modal,
.table,
input, button, select, textarea,
.btn,
.form-control,
.select2,
.select2-container,
.dataTables_wrapper,
.dropdown-menu,
.tw-font-sans {
    font-family: var(--dp-font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

body {
    font-feature-settings: "cv11", "ss01", "tnum";
}

/* Títulos modernos com tracking elegante (-0.02em) */
h1, h2, h3, h4, h5, h6,
.content-header h1,
.box-title,
.modal-title,
.dp-brand-name {
    font-family: var(--dp-font-body) !important;
    letter-spacing: -0.02em !important;
}

/* Números de indicadores, valores monetários e códigos com JetBrains Mono */
.display_currency,
.dp-currency-value,
.font-mono,
.tw-font-mono {
    font-family: var(--dp-font-mono) !important;
    font-feature-settings: "tnum" 1 !important;
    font-variant-numeric: tabular-nums !important;
}

/* ─── CONTAINER DA SIDEBAR FLUTUANTE (PADRÃO DISTRIBUIPRO) ──── */
aside.side-bar,
.sidebar-distribuipro {
    width: var(--dp-sidebar-width) !important;
    min-width: var(--dp-sidebar-width) !important;
    margin: 12px 0 12px 14px !important;
    height: auto !important;
    min-height: calc(100vh - 24px) !important;
    max-height: none !important;
    background: var(--dp-bg-sidebar) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: var(--dp-transition) !important;
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
}

/* ─── TOPO DA SIDEBAR (BRAND / LOGO - PADRÃO DISTRIBUIPRO) ──── */
.dp-sidebar-brand {
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

.dp-brand-card {
    background: #ffffff;
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    height: 76px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--dp-border, #e2e8f0);
    transition: var(--dp-transition);
    box-sizing: border-box;
}

.dp-brand-card.dp-brand-has-logo {
    padding: 0;
    background: #ffffff;
}

.dp-brand-card.dp-brand-text-only {
    justify-content: flex-start;
    padding: 12px 16px;
    background: #ffffff;
}

/* Logo padrão (fundo branco ou transparente): proporções preservadas e visual limpo */
.dp-brand-card img.dp-logo-full {
    width: 100%;
    height: 100%;
    max-height: 70px;
    max-width: 100%;
    padding: 6px 14px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    transition: var(--dp-transition);
}

/* Logo com fundo colorido próprio (ex: banner azul/escuro): preenche o espaço COMPLETO sem margens */
.dp-brand-card.dp-logo-colored-bg img.dp-logo-full {
    width: 100%;
    height: 100%;
    max-height: 76px;
    padding: 0 !important;
    object-fit: cover;
}

.dp-brand-card .dp-logo-icon {
    display: none;
    max-height: 38px;
    max-width: 38px;
    object-fit: contain;
}

/* ─── MODO SEM LOGO: NOME DA EMPRESA (PADRÃO DISTRIBUIPRO) ──── */
.dp-brand-text-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.dp-brand-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    flex-shrink: 0;
    text-transform: uppercase;
}

.dp-brand-text-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-align: left;
}

.dp-brand-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dp-text-primary, #1e293b);
    letter-spacing: -0.3px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.dp-brand-subtitle {
    font-size: 10px;
    color: var(--dp-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── ÁREA DE BUSCA NO MENU ─────────────────────────────────── */
.dp-sidebar-search {
    padding: 6px 10px 8px !important;
    flex-shrink: 0 !important;
}

.dp-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius-md);
    padding: 6px 10px;
    transition: var(--dp-transition);
}

.dp-search-box:focus-within {
    border-color: var(--dp-accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.dp-search-box input {
    border: none;
    background: transparent;
    font-size: 12.5px;
    color: var(--dp-text-primary);
    outline: none;
    width: 100%;
}

.dp-search-box input::placeholder {
    color: var(--dp-text-muted);
}

/* ─── NAVEGAÇÃO / ITENS DO MENU (ALTURA TOTAL / SEM ROLAGEM INTERNA) ─── */
#side-bar,
.dp-menu-container {
    flex: 1 0 auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 4px 8px !important;
    height: auto !important;
    max-height: none !important;
}

/* Rolagem fluida da página completa */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
}

.thetop {
    min-height: 100vh !important;
    height: auto !important;
    align-items: flex-start !important;
}

@media (min-width: 1025px) {
    body:not(.lockscreen) main.tw-flex-col {
        min-height: 100vh !important;
        height: auto !important;
        width: calc(100% - var(--dp-sidebar-width) - 26px) !important;
    }
}

@media (max-width: 1024px) {
    main.tw-flex-col {
        width: 100% !important;
        max-width: 100% !important;
    }
}

body.lockscreen main.tw-flex-col {
    width: 100% !important;
    max-width: 100% !important;
}

@media print {
    main,
    main.tw-flex-col,
    .thetop,
    #scrollable-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

#scrollable-container {
    height: auto !important;
    min-height: calc(100vh - 76px) !important;
    overflow-y: visible !important;
}

/* Seções de Categorias (Principal, Operações, Cadastros...) */
.dp-menu-header,
#side-bar > div.tw-text-xs {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--dp-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    padding: 14px 12px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    opacity: 0.9 !important;
}

/* Itens de menu raiz (Padrão Studio Inter) */
#side-bar a.theme-sidebar-hover,
#side-bar .drop_down {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    margin: 2px 0 !important;
    border-radius: 12px !important;
    color: #5b6170 !important;
    font-size: 13.5px !important;
    font-weight: 550 !important;
    text-decoration: none !important;
    transition: var(--dp-transition) !important;
    position: relative !important;
    letter-spacing: -0.006em !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#side-bar a.theme-sidebar-hover:hover,
#side-bar .drop_down:hover {
    background: #f1f5f9 !important;
    color: #18181b !important;
}

#side-bar a.theme-sidebar-hover:hover svg,
#side-bar a.theme-sidebar-hover:hover i,
#side-bar .drop_down:hover svg,
#side-bar .drop_down:hover i {
    color: #18181b !important;
    transform: scale(1.12);
}

/* Item Ativo (Tom Roxo/Lilás Moderno conforme DistribuiPro Studio) */
#side-bar a.theme-sidebar-active,
#side-bar a.active,
#side-bar .drop_down.theme-sidebar-active {
    background: rgba(99, 102, 241, 0.10) !important;
    color: #6366f1 !important;
    font-weight: 600 !important;
}

#side-bar a.theme-sidebar-active:hover,
#side-bar a.active:hover,
#side-bar .drop_down.theme-sidebar-active:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #4f46e5 !important;
}

#side-bar a.theme-sidebar-active svg,
#side-bar a.theme-sidebar-active i,
#side-bar a.active svg,
#side-bar a.active i,
#side-bar .drop_down.theme-sidebar-active svg,
#side-bar .drop_down.theme-sidebar-active i {
    color: #6366f1 !important;
    transform: scale(1.05);
}

/* Ícones dos itens */
#side-bar a svg,
#side-bar a i {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 15px !important;
    color: #5b6170 !important;
    text-align: center !important;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease !important;
}

/* Seta do Dropdown sutil */
#side-bar a .svg.tw-ml-auto,
#side-bar .drop_down .svg.tw-ml-auto {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    color: #94a3b8 !important;
    opacity: 0.55 !important;
    transition: transform 0.2s ease !important;
}

/* Submenu Filhos (Árvore Sanfona) */
#side-bar .chiled {
    padding-left: 28px !important;
    margin: 2px 0 4px !important;
    position: relative !important;
}

#side-bar .chiled::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 4px;
    bottom: 6px;
    width: 1px;
    background: #e2e8f0;
}

#side-bar .chiled a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    margin: 1px 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    color: var(--dp-text-secondary) !important;
    font-weight: 500 !important;
    transition: var(--dp-transition) !important;
    letter-spacing: -0.01em !important;
}

#side-bar .chiled a:hover {
    color: var(--dp-text-primary) !important;
    background: #f8fafc !important;
}

#side-bar .chiled a.theme-sidebar-child-active {
    color: var(--dp-accent) !important;
    font-weight: 600 !important;
    background: rgba(99, 102, 241, 0.08) !important;
}

/* ─── CARD DO USUÁRIO NO RODAPÉ ────────────────────────────── */
.dp-user-card {
    margin: 8px 10px 6px !important;
    padding: 8px 10px !important;
    background: #f8fafc !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: var(--dp-radius-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    transition: var(--dp-transition) !important;
}

.dp-user-avatar {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--dp-accent), #8b5cf6) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: grid !important;
    place-items: center !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

.dp-user-info {
    min-width: 0 !important;
    flex: 1 !important;
    line-height: 1.25 !important;
}

.dp-user-name {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--dp-text-primary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dp-user-role {
    font-size: 11px !important;
    color: var(--dp-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ─── BOTÃO DE RECOLHER / EXPANDIR (TOGGLE « ») ─────────────── */
.dp-sidebar-toggle-wrapper {
    padding: 6px 10px 10px !important;
    flex-shrink: 0 !important;
}

.dp-toggle-btn {
    width: 100% !important;
    height: 34px !important;
    border-radius: var(--dp-radius-md) !important;
    border: 1px solid var(--dp-border) !important;
    background: #ffffff !important;
    color: var(--dp-text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: var(--dp-transition) !important;
    font-size: 13px !important;
}

.dp-toggle-btn:hover {
    background: #f1f5f9 !important;
    color: var(--dp-text-primary) !important;
    border-color: #cbd5e1 !important;
}

/* ─── ESTADO RECOLHIDO (COLLAPSED) ─────────────────────────── */
@media (min-width: 1025px) {
    aside.side-bar.dp-collapsed {
        width: var(--dp-sidebar-collapsed) !important;
        min-width: var(--dp-sidebar-collapsed) !important;
    }

    /* Ocultar elementos de texto na barra recolhida */
    aside.side-bar.dp-collapsed .dp-brand-card .dp-brand-text,
    aside.side-bar.dp-collapsed .dp-brand-card .dp-brand-text-card,
    aside.side-bar.dp-collapsed .dp-sidebar-search,
    aside.side-bar.dp-collapsed .dp-menu-header,
    aside.side-bar.dp-collapsed .dp-company-active-box,
    aside.side-bar.dp-collapsed #side-bar > div.tw-text-xs,
    aside.side-bar.dp-collapsed #side-bar a span,
    aside.side-bar.dp-collapsed #side-bar .drop_down span,
    aside.side-bar.dp-collapsed #side-bar .svg.tw-ml-auto,
    aside.side-bar.dp-collapsed #side-bar .chiled,
    aside.side-bar.dp-collapsed .dp-user-info {
        display: none !important;
    }

    aside.side-bar.dp-collapsed .dp-brand-card {
        padding: 6px !important;
        min-height: 56px !important;
        height: 56px !important;
        justify-content: center !important;
    }

    /* Na barra recolhida: exibe a logomarca da própria empresa ajustada ao tamanho compacto */
    aside.side-bar.dp-collapsed .dp-brand-card.dp-brand-has-logo img.dp-logo-full {
        display: block !important;
        max-height: 42px !important;
        max-width: 52px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* Na barra recolhida: se a empresa não tem logo, exibe o avatar com a inicial da empresa */
    aside.side-bar.dp-collapsed .dp-brand-card.dp-brand-text-only .dp-brand-avatar.dp-logo-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 auto !important;
    }

    aside.side-bar.dp-collapsed #side-bar a.theme-sidebar-hover,
    aside.side-bar.dp-collapsed #side-bar .drop_down {
        justify-content: center !important;
        padding: 9px 0 !important;
        gap: 0 !important;
    }

    aside.side-bar.dp-collapsed .dp-user-card {
        justify-content: center !important;
        padding: 6px 0 !important;
        background: transparent !important;
        border: none !important;
    }

    /* ─── EXPANSÃO AO PASSAR O MOUSE (HOVER OVERLAY) ────────── */
    aside.side-bar.dp-collapsed:hover {
        width: var(--dp-sidebar-width) !important;
        min-width: var(--dp-sidebar-width) !important;
        box-shadow: 12px 0 32px rgba(15, 23, 42, 0.12) !important;
    }

    aside.side-bar.dp-collapsed:hover .dp-brand-card .dp-brand-text,
    aside.side-bar.dp-collapsed:hover .dp-sidebar-search,
    aside.side-bar.dp-collapsed:hover .dp-menu-header,
    aside.side-bar.dp-collapsed:hover .dp-company-active-box,
    aside.side-bar.dp-collapsed:hover #side-bar > div.tw-text-xs,
    aside.side-bar.dp-collapsed:hover #side-bar a span,
    aside.side-bar.dp-collapsed:hover #side-bar .drop_down span,
    aside.side-bar.dp-collapsed:hover #side-bar .svg.tw-ml-auto,
    aside.side-bar.dp-collapsed:hover .dp-user-info {
        display: block !important;
    }

    aside.side-bar.dp-collapsed:hover .dp-brand-card {
        min-height: 76px !important;
        height: 76px !important;
        padding: 0 !important;
    }

    aside.side-bar.dp-collapsed:hover .dp-brand-card.dp-brand-has-logo img.dp-logo-full {
        display: block !important;
        max-height: 70px !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        padding: 6px 14px !important;
        object-fit: contain !important;
    }

    aside.side-bar.dp-collapsed:hover .dp-brand-card.dp-logo-colored-bg img.dp-logo-full {
        max-height: 76px !important;
        padding: 0 !important;
        object-fit: cover !important;
    }

    aside.side-bar.dp-collapsed:hover .dp-brand-card.dp-brand-text-only .dp-brand-text-card {
        display: flex !important;
    }

    aside.side-bar.dp-collapsed:hover .dp-brand-card.dp-brand-text-only .dp-brand-avatar.dp-logo-icon {
        display: none !important;
    }

    aside.side-bar.dp-collapsed:hover #side-bar .chiled {
        display: block;
    }

    aside.side-bar.dp-collapsed:hover #side-bar a.theme-sidebar-hover,
    aside.side-bar.dp-collapsed:hover #side-bar .drop_down {
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        gap: 12px !important;
    }

    aside.side-bar.dp-collapsed:hover .dp-user-card {
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        background: #f8fafc !important;
        border: 1px solid var(--dp-border) !important;
    }
}

/* ==========================================================================
   NAVBAR SUPERIOR FLUTUANTE (HEADER CARD CÁPSULA) - PADRÃO DISTRIBUIPRO
   ========================================================================== */

.dp-navbar {
    margin: 12px 18px 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(18px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    padding: 8px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 58px !important;
    position: sticky !important;
    top: 10px !important;
    z-index: 45 !important;
    transition: var(--dp-transition) !important;
}

/* Lado Esquerdo */
.dp-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 130px !important;
}

.dp-header-left h2 {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
}

.dp-header-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

.dp-header-breadcrumb i {
    font-size: 10px !important;
    color: #94a3b8 !important;
}

/* Centro: Barra de Busca de Telas (Ctrl+K) */
.dp-header-search {
    flex: 0 1 420px !important;
    max-width: 440px !important;
    position: relative !important;
}

.dp-search-capsule {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8fafc !important;
    border: 1px solid var(--dp-border) !important;
    border-radius: 13px !important;
    padding: 7px 14px !important;
    cursor: pointer !important;
    transition: var(--dp-transition) !important;
    width: 100% !important;
}

.dp-search-capsule:hover,
.dp-search-capsule:focus-within {
    background: #ffffff !important;
    border-color: var(--dp-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.dp-search-capsule i {
    font-size: 13px !important;
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
}

.dp-search-capsule input {
    border: none !important;
    background: transparent !important;
    font-size: 12.5px !important;
    color: #1e293b !important;
    width: 100% !important;
    outline: none !important;
}

.dp-search-capsule input::placeholder {
    color: #94a3b8 !important;
}

.dp-kbd {
    background: #e2e8f0 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    font-family: var(--dp-font-mono) !important;
}

/* Lado Direito: Ações Rápidas */
.dp-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* Botão PDV Verde */
.dp-btn-pdv {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 7px 15px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28) !important;
    transition: var(--dp-transition) !important;
}

.dp-btn-pdv:hover {
    background: #059669 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

/* Botão Reparar Azul */
.dp-btn-repair {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #004eeb !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 78, 235, 0.24) !important;
    transition: var(--dp-transition) !important;
}

.dp-btn-repair:hover {
    background: #0040c1 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 78, 235, 0.35) !important;
}

/* Botões Ícones Quadrados Arredondados */
.dp-header-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid var(--dp-border) !important;
    background: #ffffff !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: var(--dp-transition) !important;
    font-size: 14px !important;
    position: relative !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.dp-header-icon-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

/* Badge Contador de Notificações */
.dp-header-icon-btn .notifications_count,
.dp-header-icon-btn .label {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 1px 5px !important;
    line-height: 1 !important;
    border: 2px solid #ffffff !important;
}

/* Avatar do Usuário (Botão Gradiente) */
.dp-header-avatar-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--dp-accent), #a855f7) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    transition: var(--dp-transition) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28) !important;
}

.dp-header-avatar-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.38) !important;
}

/* ─── MODAL PALETA DE COMANDOS (CTRL+K) ─────────────────────── */
.dp-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.dp-palette-backdrop.dp-open {
    opacity: 1;
    pointer-events: auto;
}

.dp-palette-dialog {
    width: 100%;
    max-width: 580px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.2s ease;
}

.dp-palette-backdrop.dp-open .dp-palette-dialog {
    transform: scale(1);
}

.dp-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.dp-palette-input-wrap i {
    font-size: 16px;
    color: var(--dp-accent);
}

.dp-palette-input-wrap input {
    border: none;
    background: transparent;
    font-size: 15px;
    color: #1e293b;
    width: 100%;
    outline: none;
}

.dp-palette-results {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px;
}

.dp-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #334155;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dp-palette-item:hover,
.dp-palette-item.dp-selected {
    background: #eef2ff;
    color: var(--dp-accent);
}

.dp-palette-item i {
    font-size: 15px;
    width: 20px;
    text-align: center;
    color: #64748b;
}

.dp-palette-item:hover i,
.dp-palette-item.dp-selected i {
    color: var(--dp-accent);
}

.dp-palette-footer {
    padding: 10px 18px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: #94a3b8;
}

/* ─── COMPONENTES MOBILE (PADRÃO DISTRIBUIPRO) ──────────────── */
.dp-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(5, 7, 12, 0.58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.dp-mobile-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.dp-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--dp-border, #e2e8f0);
    background: #ffffff;
    color: #334155;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--dp-transition);
}

.dp-mobile-menu-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.dp-mobile-close-btn {
    display: none;
    position: absolute;
    top: 18px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--dp-border, #e2e8f0);
    background: #f8fafc;
    color: #64748b;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: var(--dp-transition);
    z-index: 20;
}

.dp-mobile-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Scrollbar ultra-fino e elegante da Sidebar (elimina barra grossa cinza) */
aside.side-bar,
#side-bar,
.dp-menu-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

aside.side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar,
.dp-menu-container::-webkit-scrollbar {
    width: 4px !important;
}

aside.side-bar::-webkit-scrollbar-track,
#side-bar::-webkit-scrollbar-track,
.dp-menu-container::-webkit-scrollbar-track {
    background: transparent !important;
}

aside.side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-thumb,
.dp-menu-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25) !important;
    border-radius: 999px !important;
}

aside.side-bar::-webkit-scrollbar-thumb:hover,
#side-bar::-webkit-scrollbar-thumb:hover,
.dp-menu-container::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45) !important;
}

/* ─── RESPONSIVIDADE MOBILE (DRAWER OFF-CANVAS DISTRIBUIPRO) ─── */
@media (max-width: 1024px) {
    body.dp-mobile-nav-open {
        overflow: hidden !important;
    }

    .dp-mobile-menu-btn {
        display: inline-flex !important;
    }

    .dp-mobile-close-btn {
        display: flex !important;
    }

    aside.side-bar,
    .sidebar-distribuipro {
        margin: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        width: 285px !important;
        min-width: 285px !important;
        max-width: 85vw !important;
        border-radius: 0 20px 20px 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        box-shadow: none !important;
        transform: translateX(-105%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
        overflow: hidden !important;
    }

    aside.side-bar.dp-mobile-open,
    .sidebar-distribuipro.dp-mobile-open {
        transform: translateX(0) !important;
        box-shadow: 14px 0 45px rgba(0, 0, 0, 0.35) !important;
    }

    /* Ocultar botão de recolher desktop (« / ») no mobile */
    .dp-sidebar-toggle-wrapper {
        display: none !important;
    }

    #side-bar,
    .dp-menu-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        padding-bottom: 20px !important;
    }

    /* Header no Mobile - limpo, com espaço para botões */
    .dp-navbar {
        margin: 8px 10px 8px !important;
        padding: 6px 12px !important;
        gap: 8px !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
    }

    .dp-header-search {
        display: none !important;
    }

    .dp-header-mobile-title {
        display: flex !important;
        align-items: center !important;
        margin-right: auto !important;
    }

    .dp-header-mobile-title h2 {
        margin: 0 !important;
        font-size: 19px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        letter-spacing: -0.03em !important;
        line-height: 1.2 !important;
    }

    .dp-header-right {
        gap: 8px !important;
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    /* No mobile, oculta o botão PDV da navbar porque o botão central grande Vender fica no TabBar */
    .dp-navbar .dp-btn-pdv {
        display: none !important;
    }

    .dp-header-icon-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .dp-header-avatar-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    /* Padding inferior para o conteúdo nunca ficar escondido sob a tabbar */
    #scrollable-container,
    .content-wrapper,
    .dp-home-container {
        padding-bottom: 92px !important;
    }
}

/* ─── BARRA INFERIOR FLUTUANTE (TABBAR MOBILE PADRÃO DISTRIBUIPRO) ─── */
.st-tabbar,
.dp-tabbar {
    display: none;
}

@media (max-width: 1024px) {
    .st-tabbar,
    .dp-tabbar {
        display: flex !important;
        position: fixed !important;
        z-index: 2500 !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        height: 64px !important;
        padding: 6px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(226, 232, 240, 0.85) !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
        backdrop-filter: blur(20px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    }

    .st-tabbar a,
    .dp-tabbar a {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 14px !important;
        color: #64748b !important;
        text-decoration: none !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        transition: color 0.15s ease, background 0.15s ease !important;
    }

    .st-tabbar a i,
    .dp-tabbar a i {
        font-size: 17px !important;
    }

    .st-tabbar a.st-on,
    .dp-tabbar a.st-on {
        color: #6366f1 !important;
        background: rgba(99, 102, 241, 0.1) !important;
    }

    /* Botão Central Flutuante Elevado: Vender */
    .st-tabbar a.st-tab-pdv,
    .dp-tabbar a.st-tab-pdv {
        color: #475569 !important;
        position: relative !important;
    }

    .st-tabbar a.st-tab-pdv i,
    .dp-tabbar a.st-tab-pdv i {
        width: 50px !important;
        height: 50px !important;
        margin-top: -30px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        box-shadow: 0 10px 24px -4px rgba(99, 102, 241, 0.55) !important;
        font-size: 20px !important;
        color: #ffffff !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .st-tabbar a.st-tab-pdv:active i,
    .dp-tabbar a.st-tab-pdv:active i {
        transform: scale(0.95) !important;
    }

    .st-tabbar a.st-tab-pdv span,
    .dp-tabbar a.st-tab-pdv span {
        color: #475569 !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
    }
}

/* ==========================================================================
   SISTEMA DE NOTIFICAÇÕES (PADRÃO DISTRIBUIPRO)
   ========================================================================== */

/* ─── BOTÃO DO SINO (HEADER ICON) ───────────────────────────── */
.dp-notif-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid var(--dp-border, #e2e8f0) !important;
    background: #ffffff !important;
    color: #475569 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dp-notif-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

.dp-notif-btn i.fa-bell {
    font-size: 15px !important;
    display: inline-block !important;
    transform-origin: top center !important;
    transition: transform 0.2s ease !important;
}

/* Efeito de balanço suave do sino ao passar o mouse */
.dp-notif-btn:hover i.fa-bell {
    animation: dpBellRing 0.7s ease !important;
}

/* Efeito de balanço periódico quando há notificações não lidas */
.dp-notif-btn.has-unread i.fa-bell {
    animation: dpBellRing 3.5s ease infinite !important;
}

@keyframes dpBellRing {
    0% { transform: rotate(0); }
    12% { transform: rotate(14deg); }
    24% { transform: rotate(-14deg); }
    36% { transform: rotate(10deg); }
    48% { transform: rotate(-8deg); }
    60% { transform: rotate(5deg); }
    72% { transform: rotate(-3deg); }
    84% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

/* ─── PONTO VERMELHO COM PULSO RADAR (DISTRIBUIPRO) ────────── */
.dp-notif-btn .notif-dot {
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    width: 8px !important;
    height: 8px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7) !important;
    animation: dpNotifPulse 1.8s infinite cubic-bezier(0.66, 0, 0, 1) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

@keyframes dpNotifPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Ocultar badge numérico antigo no topo do botão para manter minimalismo idêntico ao DistribuiPro */
.dp-notif-btn .notifications_count {
    display: none !important;
}

/* ─── PAINEL DROPDOWN DE NOTIFICAÇÕES (DISTRIBUIPRO) ────────── */
.dp-notif-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: 360px !important;
    max-width: calc(100vw - 32px) !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.16), 0 8px 16px -4px rgba(15, 23, 42, 0.08) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 1050 !important;
    animation: dpNotifSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: top right !important;
}

@keyframes dpNotifSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Cabeçalho do Dropdown */
.dp-notif-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.dp-notif-title {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    letter-spacing: -0.2px !important;
}

.dp-notif-badge {
    background: #6366f1 !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}

.dp-notif-mark-read {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #6366f1 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    transition: all 0.15s ease !important;
}

.dp-notif-mark-read:hover {
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

/* Corpo e Lista */
.dp-notif-body {
    max-height: 380px !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
    background: #ffffff !important;
}

#notifications_list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

#notifications_list > li.notification-li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#notifications_list > li.notification-li > a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

#notifications_list > li.notification-li > a:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

#notifications_list > li.notification-li.unread > a {
    background: rgba(99, 102, 241, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
}

#notifications_list > li.notification-li.unread > a:hover {
    background: rgba(99, 102, 241, 0.09) !important;
}

.dp-notif-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    background: rgba(99, 102, 241, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6366f1 !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
}

.dp-notif-icon-wrap i {
    font-size: 13px !important;
}

.dp-notif-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.dp-notif-content .notif-info {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin-bottom: 3px !important;
}

.dp-notif-content .time {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
    display: block !important;
}

/* Loading State */
.dp-notif-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 34px 16px !important;
    color: #94a3b8 !important;
    font-size: 12.5px !important;
}

.dp-notif-loading i {
    font-size: 20px !important;
    color: #6366f1 !important;
}

/* Empty State (Tudo em dia! DistribuiPro) */
.dp-notif-empty {
    text-align: center !important;
    padding: 36px 18px !important;
    color: #64748b !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.dp-notif-empty i.fa-check-circle {
    font-size: 32px !important;
    color: #10b981 !important;
    margin-bottom: 4px !important;
}

.dp-notif-empty strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.dp-notif-empty span {
    font-size: 12px !important;
    color: #94a3b8 !important;
}

/* Rodapé do Dropdown */
.dp-notif-footer {
    padding: 10px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center !important;
}

.dp-notif-footer-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6366f1 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.dp-notif-footer-link:hover {
    color: #4f46e5 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   DASHBOARD HOME & KPIS (PADRÃO DISTRIBUIPRO)
   ========================================================================== */

/* ─── CONTAINER DA HOME ─────────────────────────────────────── */
.dp-home-container {
    padding: 10px 18px 24px;
}

/* ─── BANNER HERO ROXO / ÍNDIGO ────────────────────────────── */
.dp-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
    padding: 24px 28px;
    border-radius: 22px;
    background: linear-gradient(120deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%) !important;
    box-shadow: 0 20px 40px -20px rgba(49, 46, 129, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.dp-hero::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 65%);
    pointer-events: none;
}

.dp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: linear-gradient(90deg, transparent, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    opacity: 0.55;
    pointer-events: none;
}

.dp-hero-content {
    position: relative;
    z-index: 2;
}

.dp-hero-title {
    margin: 0 0 5px !important;
    font-size: clamp(22px, 2.5vw, 27px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.dp-hero-subtitle {
    margin: 0 !important;
    opacity: 0.9 !important;
    font-size: 13.5px !important;
    color: #e0e7ff !important;
}

.dp-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.dp-hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 15px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dp-hero-btn:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dp-hero-btn i {
    font-size: 13px !important;
    opacity: 0.9 !important;
}

/* ─── TOOLBAR SUB-HEADER (DATA + FILTRO) ────────────────────── */
.dp-home-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 20px;
}

.dp-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dp-toolbar-date {
    font-size: 13px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dp-toolbar-date i {
    color: #94a3b8;
    font-size: 14px;
}

.dp-toolbar-date strong {
    color: #0f172a;
    font-weight: 700;
}

.dp-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.22);
    font-size: 11.5px;
    font-weight: 600;
    color: #059669;
}

.dp-live-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: dpLivePulse 2s infinite;
}

@keyframes dpLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.dp-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.dp-date-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

html:not([data-theme="dark"]) .dp-date-filter-btn {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

html:not([data-theme="dark"]) .dp-date-filter-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

.dp-date-filter-btn i {
    font-size: 13px;
    color: #64748b;
}

/* Pílulas de Seleção Rápida de Período (Hoje | Semana | Mês - DistribuiPro) */
.dp-period-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dp-period-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    transition: var(--dp-transition);
}

.dp-period-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.dp-period-btn.active {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}

/* ─── GRID DE 6 KPIS (DISTRIBUIPRO) ────────────────────────── */
.dp-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 1180px) {
    .dp-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .dp-stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .dp-stat-card {
        padding: 13px 12px 10px !important;
        border-radius: 16px !important;
    }

    .dp-stat-value {
        font-size: 19px !important;
        margin: 2px 0 6px !important;
    }

    .dp-stat-label {
        font-size: 11.5px !important;
    }

    .dp-stat-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .dp-stat-tag {
        font-size: 10px !important;
        padding: 1px 5px !important;
    }

    .dp-stat-link {
        font-size: 10.5px !important;
    }
}

/* Card Individual de KPI */
.dp-stat-card {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 18px 20px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.dp-stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.dp-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-accent, #6366f1), transparent 75%);
    opacity: 0.85;
}

.dp-stat-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

.dp-stat-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    letter-spacing: -0.1px !important;
}

.dp-stat-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* Paleta de Cores dos Ícones Pastel (DistribuiPro Claro) */
html:not([data-theme="dark"]) .dp-icon-blue   { background: #eff6ff !important; color: #2563eb !important; }
html:not([data-theme="dark"]) .dp-icon-green  { background: #ecfdf5 !important; color: #10b981 !important; }
html:not([data-theme="dark"]) .dp-icon-yellow { background: #fffbeb !important; color: #d97706 !important; }
html:not([data-theme="dark"]) .dp-icon-purple { background: #f5f3ff !important; color: #7c3aed !important; }
html:not([data-theme="dark"]) .dp-icon-red    { background: #fef2f2 !important; color: #ef4444 !important; }
html:not([data-theme="dark"]) .dp-icon-orange { background: #fff7ed !important; color: #ea580c !important; }

.dp-card-blue   { --card-accent: #2563eb; }
.dp-card-green  { --card-accent: #10b981; }
.dp-card-yellow { --card-accent: #d97706; }
.dp-card-purple { --card-accent: #7c3aed; }
.dp-card-red    { --card-accent: #ef4444; }
.dp-card-orange { --card-accent: #ea580c; }

.dp-stat-value {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin: 4px 0 12px !important;
    font-family: var(--dp-font-mono) !important;
    font-feature-settings: "tnum" 1 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dp-stat-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px solid #f8fafc !important;
}

.dp-stat-tag {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

html:not([data-theme="dark"]) .dp-stat-tag {
    color: #94a3b8 !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
}

.dp-stat-link {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #6366f1 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.15s ease !important;
}

.dp-stat-link:hover {
    color: #4f46e5 !important;
    text-decoration: underline !important;
}