/* ========================================
   Logistikk - Global Styles
   Linguagem visual portada do Segla ERP (Fluent 2):
   claro por padrão, dark via `body.e-dark-mode`.
   ======================================== */

/* ─────────────────────────────────────────────────────────────────────
   Os dois temas saem das MESMAS variáveis do Fluent 2 que o Segla ERP usa:
   fluent2.css (claro, default) e fluent2-dark.css (escuro). Os valores são
   literais aqui — e não `var(--color-sf-*)` — porque o Segla sobrescreve
   parte dessas variáveis (ver bloco "Base do Segla" adiante) e a indireção
   viraria referência circular. O nome da variável de origem está em cada
   linha, então dá pra conferir contra o tema a qualquer momento.
   ───────────────────────────────────────────────────────────────────── */

/* Tema CLARO — default (Syncfusion fluent2.css) */
:root {
    /* Primária interativa: --color-sf-primary / --color-sf-primary-dark */
    --accent: #0f6cbd;
    --accent-hover: #0f548c;

    /* Cor do módulo/sistema — mesma mecânica do --sys-color do Segla.
       Só o rótulo "LOGISTIKK" da AppBar consome. */
    --sys-color: #84cc16;
    --sys-color-dark: #65a30d;

    /* Superfícies
       --bg-primary: branco puro, como o `body` do Segla no claro (--bs-white).
       As demais vêm da escala --color-sf-content-bg-color*. */
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;                    /* --color-sf-content-bg-color */
    --bg-card: #ffffff;                         /* --color-sf-content-bg-color-alt1 */
    --bg-input: #ffffff;                        /* --color-sf-content-bg-color-alt1 */
    --bg-hover: #f0f0f0;                        /* --color-sf-content-bg-color-hover */

    --border: #e0e0e0;                          /* --color-sf-border-light */
    --border-focus: #0f6cbd;                    /* --color-sf-primary */

    /* Texto — escala --color-sf-content-text-color* */
    --text-heading: #242424;                    /* --color-sf-content-text-color */
    --text-primary: #242424;                    /* --color-sf-content-text-color */
    --text-secondary: #616161;                  /* --color-sf-content-text-color-alt2 */
    --text-muted: #707070;                      /* --color-sf-content-text-color-alt3 */

    /* Semânticas — escala --color-sf-*-bg-color.
       --info fica no azul da primária (e não no ciano do Fluent) porque nas
       páginas ele sempre significou "destaque informativo azul". */
    --success: #107c10;                         /* --color-sf-success-bg-color */
    --warning: #f7630c;                         /* --color-sf-warning-bg-color */
    --danger: #c50f1f;                          /* --color-sf-danger-bg-color */
    --info: #0f6cbd;                            /* --color-sf-primary */

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);

    --font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Métrica do shell — igual ao Segla (appbar 50px, rail 220/52) */
    --sidebar-width: 220px;
    --sidebar-collapsed: 52px;
    --header-height: 50px;

    color-scheme: light;
}

/* Tema ESCURO — classe no body, igual ao Segla (Syncfusion fluent2-dark.css) */
body.e-dark-mode {
    /* No escuro o Fluent 2 inverte os papéis: --color-sf-primary (#115ea3) é o
       PREENCHIMENTO do botão primário, e --color-sf-primary-dark (#62abf5) é o
       azul claro usado em texto/ícone/link. Como --accent é majoritariamente
       foreground nas páginas, ele recebe o #62abf5. */
    --accent: #62abf5;                          /* --color-sf-primary-dark */
    --accent-hover: #115ea3;                    /* --color-sf-primary */

    --bg-primary: #1f1f1f;                      /* --color-sf-content-bg-color */
    --bg-secondary: #292929;                    /* --color-sf-content-bg-color-alt1 */
    --bg-card: #292929;                         /* --color-sf-content-bg-color-alt1 */
    --bg-input: #1f1f1f;                        /* --color-sf-content-bg-color */
    --bg-hover: #333333;                        /* --color-sf-content-bg-color-alt3 */

    --border: #525252;                          /* --color-sf-border-light */
    --border-focus: #62abf5;                    /* --color-sf-primary-dark */

    /* Texto: o Segla desce o branco puro do Fluent 2 dark (#fff) para o
       #adadad da escala, porque o contraste default é agressivo demais. */
    --text-heading: #d6d6d6;                    /* --color-sf-content-text-color-alt1 */
    --text-primary: #adadad;                    /* --color-sf-content-text-color-alt2 */
    --text-secondary: #999999;                  /* --color-sf-content-text-color-alt3 */
    --text-muted: #808080;

    --success: #218c21;                         /* --color-sf-success-bg-color */
    --warning: #f87528;                         /* --color-sf-warning-bg-color */
    --danger: #cc2635;                          /* --color-sf-danger-bg-color */
    --info: #62abf5;                            /* --color-sf-primary-dark */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}

/* ========================================
   Base do Segla — body + suavização do texto no dark
   ======================================== */

/* No dark, o Fluent 2 usa branco quase puro (#fff/#f3f2f1), contraste agressivo
   sobre o fundo escuro. O Segla sobrescreve a variável principal do Syncfusion e
   força a cor nos containers onde o tema hard-codeou branco. Mesmo tratamento aqui. */
body.e-dark-mode {
    --color-sf-content-text-color: #adadad;
    --color-sf-content-text-color-alt1: #adadad;
}

body.e-dark-mode .e-control,
body.e-dark-mode .e-control *:not([class*="icon-"]):not(.e-icons),
body.e-dark-mode .e-grid .e-rowcell,
body.e-dark-mode .e-grid .e-headercelldiv,
body.e-dark-mode .e-grid .e-headertext,
body.e-dark-mode .e-grid .e-summarycell,
body.e-dark-mode .e-toolbar .e-tbar-btn-text,
body.e-dark-mode .e-menu-item,
body.e-dark-mode .e-list-item,
body.e-dark-mode .e-list-text,
body.e-dark-mode .e-input,
body.e-dark-mode .e-input-group input,
body.e-dark-mode .e-float-text,
body.e-dark-mode .e-tab .e-tab-text,
body.e-dark-mode .e-pager,
body.e-dark-mode .e-appbar,
body.e-dark-mode .e-appbar *:not([class*="icon-"]):not(.e-icons),
body.e-dark-mode .e-treeview .e-list-text,
body.e-dark-mode label {
    color: #adadad;
}

/* ========================================
   SHELL — portado do Segla ERP
   AppBar sticky no topo (SfAppBar) + rail lateral recolhível.
   ======================================== */

.lk-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-primary);
}

.lk-wrapper {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-primary);
}

/* ── AppBar ──
   Flat: sem border-radius nem box-shadow, e com o MESMO fundo do body para
   fundir sem faixa — igual ao Segla. O prefixo `body` eleva a especificidade
   para vencer as regras !important do fluent2.css. */
body .e-appbar {
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important; /* senão o popup da busca é clipado */
    min-height: var(--header-height);
    padding-right: 16px;
    gap: 2px;
    flex-shrink: 0;
    z-index: 60;
}

body .e-appbar.e-light {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border) !important;
}

.lk-appbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 6px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lk-appbar-toggle:hover { background: var(--bg-hover); }
.lk-appbar-toggle span { font-size: 20px !important; color: inherit !important; }
.lk-appbar-toggle span::before { color: inherit !important; }

/* ── Logo + rótulo do sistema + título da página ── */
.sg-navbar-logo { height: 22px; margin-right: 6px; flex-shrink: 0; }

.sg-navbar-system {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    color: var(--sys-color-dark);
    white-space: nowrap;
}

body.e-dark-mode .sg-navbar-system { color: var(--sys-color); }

.sg-navbar-sep {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 2px;
    font-weight: 300;
}

.lk-navbar-page {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
}

.lk-navbar-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: 8px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Pesquisa global ──
   O wrapper cresce ocupando o espaço entre o título e os botões (papel do
   AppBarSpacer); o input fica limitado a 640px e centralizado. */
.sg-navbar-search-wrap {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 24px;
    position: relative;
    min-width: 0;
}

.sg-navbar-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 640px;
    height: 34px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.sg-navbar-search:hover { background: rgba(0, 0, 0, 0.06); }

.sg-navbar-search--open,
.sg-navbar-search:focus-within {
    background: var(--bg-card);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

body.e-dark-mode .sg-navbar-search { background: rgba(255, 255, 255, 0.06); }
body.e-dark-mode .sg-navbar-search:hover { background: rgba(255, 255, 255, 0.10); }

body.e-dark-mode .sg-navbar-search--open,
body.e-dark-mode .sg-navbar-search:focus-within {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--accent);
}

.sg-navbar-search-icon {
    font-size: 16px !important;
    color: var(--text-secondary) !important;
    margin-right: 8px;
    flex-shrink: 0;
}

.sg-navbar-search-icon::before { color: inherit !important; }

.sg-navbar-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-primary);
    height: 30px;
}

.sg-navbar-search-input::placeholder { color: var(--text-muted); }

.sg-navbar-search-clear {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
}

.sg-navbar-search-clear:hover { background: var(--bg-hover); color: var(--text-primary); }
.sg-navbar-search-clear span::before { color: inherit !important; }

/* Overlay fecha o popup ao clicar fora. z-index alto p/ ficar acima dos cards
   do dashboard, que têm position:relative e z-index próprio. */
.sg-navbar-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.sg-navbar-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    max-height: 60vh;
    overflow-y: auto;
}

.sg-navbar-search-count {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.sg-navbar-search-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent);
}

.sg-navbar-search-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.sg-navbar-search-empty span[class*="icon-"] { font-size: 18px; }

.sg-navbar-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background .1s;
}

.sg-navbar-search-item:hover { background: var(--bg-hover); }
.sg-navbar-search-item-icon { font-size: 16px !important; color: var(--text-secondary) !important; flex-shrink: 0; }
.sg-navbar-search-item-icon::before { color: inherit !important; }
.sg-navbar-search-item-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sg-navbar-search-item-grupo {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    flex-shrink: 0;
}

.sg-navbar-search-item-arrow { font-size: 14px !important; color: var(--text-muted) !important; flex-shrink: 0; }
.sg-navbar-search-item-arrow::before { color: inherit !important; }

@media (max-width: 1400px) {
    .lk-navbar-sub { display: none; }
}

@media (max-width: 1100px) {
    .sg-navbar-search { max-width: 360px; }
    .sg-navbar-search-wrap { margin: 0 12px; }
    .sg-appbar-kpi-lbl { display: none; }
}

@media (max-width: 900px) {
    .sg-navbar-search { max-width: 220px; }
    .sg-navbar-search-wrap { margin: 0 8px; }
    .sg-appbar-btn span:not([class*="icon-"]) { display: none; }
    .sg-user-btn-name { display: none; }
}

@media (max-width: 768px) {
    .sg-appbar-kpi-group { display: none; }
}

/* ── Botões do AppBar ── */
.sg-appbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background .12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.sg-appbar-btn:hover { background: var(--bg-hover); }
.sg-appbar-btn span[class*="icon-"] { font-size: 16px !important; color: inherit !important; }
.sg-appbar-btn span[class*="icon-"]::before { color: inherit !important; }

/* ── Grupo de KPIs (badges fiscais) ── */
.sg-appbar-kpi-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    flex-shrink: 0;
}

.sg-appbar-kpi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.sg-appbar-kpi span[class*="icon-"] { font-size: 15px !important; color: inherit !important; }
.sg-appbar-kpi span[class*="icon-"]::before { color: inherit !important; }

.sg-appbar-kpi-lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sg-appbar-kpi-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.sg-appbar-kpi-val--time { min-width: 74px; text-align: right; color: var(--info); }
.sg-appbar-kpi--info { border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--info); }
.sg-appbar-kpi--ok { border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); }
.sg-appbar-kpi--ok .sg-appbar-kpi-val { color: var(--success); }

/* ── Badge de personificação ── */
.sg-trn-badge {
    display: inline-flex;
    align-items: stretch;
    margin-left: 8px;
    border-radius: 12px;
    background: #fff4ce;
    border: 1px solid #9d5d00;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

.sg-trn-badge-main,
.sg-trn-badge-close {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: #9d5d00;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.sg-trn-badge-main { gap: 6px; padding: 2px 10px 2px 12px; }
.sg-trn-badge-close { padding: 5px 9px; border-left: 1px solid rgba(157, 93, 0, 0.35); }
.sg-trn-badge-close:hover { background: rgba(157, 93, 0, 0.12); }
.sg-trn-badge span[class*="icon-"] { font-size: 14px !important; color: inherit !important; }
.sg-trn-badge span[class*="icon-"]::before { color: inherit !important; }

body.e-dark-mode .sg-trn-badge { background: rgba(250, 140, 22, 0.16); border-color: #fa8c16; }
body.e-dark-mode .sg-trn-badge-main,
body.e-dark-mode .sg-trn-badge-close { color: #fac37a; }
body.e-dark-mode .sg-trn-badge-close { border-left-color: rgba(250, 195, 122, 0.3); }

/* ── Botão de usuário ── */
.sg-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}

.sg-user-btn:hover { background: var(--bg-hover); }

.sg-user-btn-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sg-user-btn-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5B5FC7;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.sg-user-btn-name { font-weight: 500; white-space: nowrap; }
.sg-user-btn-arrow { font-size: 10px !important; opacity: .6; color: inherit !important; }
.sg-user-btn-arrow::before { color: inherit !important; }

/* ── Overlay + popover do usuário ── */
.sg-estab-overlay {
    position: fixed;
    inset: 0;
    z-index: 100010;
    background: transparent;
}

.sg-user-popover {
    position: fixed;
    top: 52px;
    right: 16px;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100011;
    overflow: hidden;
    animation: sg-pop-in .15s ease-out;
}

@keyframes sg-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sg-user-popover-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.sg-user-popover-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sg-user-popover-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5B5FC7;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.sg-user-popover-info { display: flex; flex-direction: column; min-width: 0; }
.sg-user-popover-name { font-weight: 600; font-size: 14px; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-user-popover-email { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-user-popover-list { padding: 6px 0; max-height: 400px; overflow-y: auto; }

.sg-user-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background .1s;
}

.sg-user-popover-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.sg-user-popover-item span[class*="icon-"] { font-size: 16px !important; color: var(--text-secondary) !important; width: 20px; text-align: center; }
.sg-user-popover-item span[class*="icon-"]::before { color: inherit !important; }
.sg-user-popover-item--logout { color: var(--danger); }
.sg-user-popover-item--logout span[class*="icon-"] { color: var(--danger) !important; }
.sg-user-popover-sep { height: 1px; background: var(--border); margin: 4px 16px; }

/* ══════════════════════════════════════════════════════════════════════
   RAIL LATERAL — pills do DesignLayout do Segla
   ══════════════════════════════════════════════════════════════════════ */

.dl-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease;
    width: 220px;
    min-width: 220px;
}

.dl-sidebar.dl--collapsed { width: 52px; min-width: 52px; }

.dl-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 12px 4px;
    flex-shrink: 0;
}

.dl-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dl-nav::-webkit-scrollbar { width: 4px; }
.dl-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.dl-nav::-webkit-scrollbar-track { background: transparent; }

.dl-nav-sep {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
    flex-shrink: 0;
}

.dl-pill {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    height: 36px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--text-secondary);
    text-decoration: none !important;
    padding: 0;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.dl-pill:hover { background: var(--bg-hover); color: var(--text-primary); }

.dl-pill.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.dl-pill.active:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.dl-pill.active .dl-pill-icon,
.dl-pill.active .dl-pill-icon::before { color: var(--accent) !important; }

.dl-pill-icon {
    min-width: 36px;
    width: 36px;
    text-align: center;
    font-size: 18px !important;
    color: var(--text-secondary) !important;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-pill-icon::before { color: inherit !important; }
.dl-pill:hover .dl-pill-icon,
.dl-pill:hover .dl-pill-icon::before { color: var(--text-primary) !important; }

.dl-pill-label {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    padding-right: 10px;
}

.dl-sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 8px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* ── Área de conteúdo ──
   Contrato mantido do shell antigo: coluna flex com min-height:0 para que
   `.page-container` das páginas (flex:1 + overflow interno) continue valendo. */
.dl-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    min-width: 0;
}

.dl-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-primary);
}

@media (max-width: 768px) {
    .dl-sidebar { width: 52px; min-width: 52px; }
    .dl-sidebar .dl-pill-label,
    .dl-sidebar .dl-section-label { display: none; }
}

/* ========================================
   Reset & Base
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

h1, h2, h3 {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

h1:focus, h2:focus, h3:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   Scrollbar
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ========================================
   Syncfusion Dark Theme Overrides
   ======================================== */

/* Grid */
.e-grid {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.e-grid .e-headercell {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-color: var(--border) !important;
}

.e-grid .e-rowcell {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    font-size: 14px !important;
}

.e-grid .e-row:hover .e-rowcell {
    background: var(--bg-hover) !important;
}

.e-grid .e-altrow .e-rowcell {
    background: var(--bg-secondary) !important;
}

.e-pager,
.e-grid .e-pager {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.e-pager .e-pagercontainer {
    background: transparent !important;
}

.e-pager .e-numericitem {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

.e-pager .e-numericitem:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.e-pager .e-currentitem {
    background: var(--accent) !important;
    color: #ffffff !important;
    border-color: var(--accent) !important;
    border-radius: var(--radius-sm) !important;
}

.e-pager .e-first,
.e-pager .e-prev,
.e-pager .e-next,
.e-pager .e-last,
.e-pager .e-pp,
.e-pager .e-np {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

.e-pager .e-first:hover,
.e-pager .e-prev:hover,
.e-pager .e-next:hover,
.e-pager .e-last:hover,
.e-pager .e-pp:hover,
.e-pager .e-np:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.e-pager .e-icons {
    color: var(--text-secondary) !important;
}

.e-pager .e-parentmsgbar {
    color: var(--text-muted) !important;
}

.e-pager .e-pagecountmsg,
.e-pager .e-pagerexternalmsg {
    color: var(--text-muted) !important;
}

.e-pager .e-disable {
    opacity: 0.4 !important;
}

/* Syncfusion Grid Filter Popup */
.e-excelfilter,
.e-checkboxfilter,
.e-filterpopup {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.e-excelfilter .e-dlg-content,
.e-checkboxfilter .e-dlg-content {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.e-excelfilter .e-ftrchk,
.e-checkboxfilter .e-ftrchk {
    color: var(--text-primary) !important;
}

.e-excelfilter .e-searchbox input,
.e-checkboxfilter .e-searchbox input,
.e-excelfilter .e-input,
.e-checkboxfilter .e-input {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

.e-excelfilter .e-searchbox .e-search-icon,
.e-checkboxfilter .e-searchbox .e-search-icon {
    color: var(--text-muted) !important;
}

/* Syncfusion Checkbox - accent color */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
    border-color: var(--border) !important;
    background-color: transparent !important;
}

.e-checkbox-wrapper .e-frame.e-check .e-icons,
.e-css.e-checkbox-wrapper .e-frame.e-check .e-icons {
    color: #ffffff !important;
}

.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label {
    color: var(--text-primary) !important;
}

/* Syncfusion Filter Popup Buttons */
.e-excelfilter .e-footer-content button.e-primary,
.e-checkboxfilter .e-footer-content button.e-primary,
.e-filterpopup .e-footer-content button.e-primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.e-excelfilter .e-footer-content button.e-primary:hover,
.e-checkboxfilter .e-footer-content button.e-primary:hover,
.e-filterpopup .e-footer-content button.e-primary:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.e-excelfilter .e-footer-content button:not(.e-primary),
.e-checkboxfilter .e-footer-content button:not(.e-primary),
.e-filterpopup .e-footer-content button:not(.e-primary) {
    background-color: transparent !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

.e-excelfilter .e-footer-content button:not(.e-primary):hover,
.e-checkboxfilter .e-footer-content button:not(.e-primary):hover,
.e-filterpopup .e-footer-content button:not(.e-primary):hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.e-excelfilter .e-footer-content,
.e-checkboxfilter .e-footer-content,
.e-filterpopup .e-footer-content {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}

/* Filter popup links and text */
.e-excelfilter .e-xlfl-ftrchk,
.e-excelfilter .e-xlfl-cust,
.e-excelfilter .e-xlfl-mainftr {
    color: var(--text-primary) !important;
}

.e-excelfilter .e-flmenu-valuecontent,
.e-excelfilter .e-xlfl-fieldset {
    border-color: var(--border) !important;
}

.e-excelfilter .e-filterdiv,
.e-checkboxfilter .e-filterdiv {
    border-color: var(--border) !important;
}

/* Filter clear link */
.e-excelfilter .e-xlfl-clrdiv .e-xlfl-clrbtn,
.e-excelfilter .e-xlfl-clrdiv span {
    color: var(--accent) !important;
}

/* Dialog */
.e-dialog {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.e-dialog .e-dlg-header-content {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

.e-dialog .e-dlg-header {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.e-dialog .e-dlg-content {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.e-dlg-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Sidebar Detail Dialog - slide from right */
.sidebar-detail.e-dialog {
    position: fixed !important;
    top: 20px !important;
    right: 0 !important;
    left: auto !important;
    width: 35% !important;
    margin: 0 !important;
    border-radius: 12px 0 0 12px !important;
    background: var(--bg-primary) !important;
    border-left: 1px solid var(--border) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4) !important;
    max-height: calc(100vh - 40px) !important;
    height: calc(100vh - 40px) !important;
}

.sidebar-detail .e-dlg-header-content {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 16px 20px !important;
    border-radius: 0 !important;
}

.sidebar-detail .e-dlg-header {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 15px;
}

.sidebar-detail .e-dlg-content {
    background: var(--bg-primary) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.sidebar-detail .e-btn.e-dlg-closeicon-btn {
    color: var(--text-secondary) !important;
}

.sidebar-detail .e-btn.e-dlg-closeicon-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-tabs .e-content {
    background: transparent !important;
    padding: 0 !important;
}

.sidebar-tabs .e-content .e-item {
    background: transparent !important;
    padding: 0 !important;
}

.tab-body {
    padding: 16px 20px;
}

.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.text-muted {
    color: var(--text-muted);
}

/* Toast */
.e-toast-container {
    z-index: 10000 !important;
}

/* Chart */
.e-chart {
    background: transparent !important;
}

/* ========================================
   Utility Classes
   ======================================== */
.text-accent { color: var(--accent); }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

.bg-card { background: var(--bg-card); }
.bg-primary { background: var(--bg-primary); }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* ========================================
   Blazor Error UI
   ======================================== */
#blazor-error-ui {
    background: var(--danger);
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10001;
    padding: 12px;
    text-align: center;
    display: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 16px;
}

/* Tooltip acao - botoes de grid */
.tooltip-acao.e-tooltip-wrap {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

.tooltip-acao.e-tooltip-wrap .e-tip-content {
    color: var(--text-primary) !important;
}

.tooltip-acao.e-tooltip-wrap .e-arrow-tip-inner.e-tip-left {
    color: var(--bg-card) !important;
}

.tooltip-acao.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-right-color: var(--border) !important;
}

/* Container de pagina - global */
.page-container {
    max-width: 100%;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Grid - scroll horizontal interno ao redimensionar colunas */
.e-grid .e-gridheader {
    overflow: hidden !important;
}

.e-grid .e-gridheader .e-headercontent {
    overflow: hidden !important;
}

.e-grid .e-gridcontent {
    overflow: hidden !important;
    width: 100% !important;
}

.e-grid .e-gridcontent .e-content {
    overflow: auto !important;
    width: 100% !important;
}

.e-grid.sf-grid .e-gridcontent .e-content.e-yscroll {
    overflow-y: scroll !important;
}

/* Badge contador de registros - global */
.total-badge {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}