/* =============================================================
   NFe Cloud — Tema Fiori 3 LIGHT com tokens próprios pra
   melhorar contraste, alinhamento e padronização.

   Princípios:
   - Fundo claro (#f4f4f4 estilo SAP)
   - Textos DARK reforçados (#1a2733 títulos, #32363a corpo)
   - Largura de campo padronizada (380px nos forms)
   - Espaçamento consistente (sistema 8px)
   - Cards/panels brancos com sombra discreta
   ============================================================= */

/* ---- Tokens próprios sobrescrevendo Fiori onde precisamos mais contraste ---- */
:root {
    /* Paleta Notta Hub: azul-SAP + teal/ciano */
    --app-bg: #f4f6fa;
    --app-surface: #ffffff;
    --app-surface-alt: #f8fafc;
    --app-border: #e6eaf0;
    --app-border-strong: #c8d0da;

    --app-title: #0b1a2c;        /* títulos: navy ultra-escuro */
    --app-text: #2a3a4c;         /* corpo: navy médio */
    --app-text-muted: #6a7785;   /* texto secundário azulado */
    --app-text-disabled: #9aa4af;

    --app-primary: #11a2b8;          /* teal Notta Hub (links/info) */
    --app-primary-hover: #0b7e8f;
    --app-accent: #0f6ad0;           /* azul-SAP (CTA) */
    --app-accent-hover: #0a50a8;
    --app-success: #00a878;
    --app-warning: #e8911c;          /* âmbar — semântico, fora da marca */
    --app-error: #c5293d;

    --app-shell-bg: #0a2a66;         /* sidebar navy azul-SAP */
    --app-shell-text: #ffffff;
    --app-shell-hover: rgba(255,255,255,0.10);
    --app-shell-active: rgba(43,196,201,0.20); /* highlight ciano Notta Hub */
    --app-shell-active-border: #2bc4c9;

    /* --- Sistema de escala moderna (radius / sombras / transições) --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Sombras em camadas — mais suaves que shadow chapado */
    --shadow-xs: 0 1px 2px rgba(11,26,44,0.04);
    --shadow-sm: 0 1px 2px rgba(11,26,44,0.04), 0 1px 3px rgba(11,26,44,0.06);
    --shadow-md: 0 4px 12px rgba(11,26,44,0.06), 0 2px 4px rgba(11,26,44,0.04);
    --shadow-lg: 0 12px 32px rgba(11,26,44,0.10), 0 4px 8px rgba(11,26,44,0.05);
    --shadow-focus: 0 0 0 3px rgba(17,162,184,0.22);

    /* Transições padronizadas — cubic-bezier suave dá sensação de app moderno */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;

    /* Sombra dos cards de KPI, espelhada do painel do Agent junto com o bloco .card.
       Sem esta variavel o card ficava chapado, sem elevacao. */
    --app-shadow-md: 0 4px 12px rgba(11,26,44,0.06), 0 2px 4px rgba(11,26,44,0.04);

    /* Tipografia */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============ Tema ESCURO — identidade Notta Hub (azul-SAP/teal) ============
   Ativado por data-theme="dark" no <html> (toggle na sidebar, persistido em localStorage).
   Como o painel inteiro usa as variáveis --app-*, basta sobrescrevê-las aqui. */
:root[data-theme="dark"] {
    /* No escuro a sombra precisa ser mais densa pra continuar lendo como elevacao. */
    --app-shadow-md: 0 8px 22px rgba(0,0,0,0.45);
    --app-bg: #0b1420;
    --app-surface: #141f2c;
    --app-surface-alt: #1a2634;
    --app-border: #24313f;
    --app-border-strong: #3a4b5c;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.28);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.18);
    --shadow-lg: 0 14px 36px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.25);
    --shadow-focus: 0 0 0 3px rgba(63,201,224,0.28);

    --app-title: #eef4f9;
    --app-text: #c3d0db;
    --app-text-muted: #8a98a6;
    --app-text-disabled: #5d6c7a;

    --app-primary: #3fc9e0;
    --app-primary-hover: #6fdcee;
    --app-accent: #3f92e8;
    --app-accent-hover: #6fb0f0;
    --app-success: #2fc99a;
    --app-warning: #f5a01e;
    --app-error: #e2566a;

    --app-shell-bg: #0a1420;
    --app-shell-active: rgba(63,201,224,0.22);
}

/* Fundamental Styles (fd-table) é tema-claro fixo — sobrescreve no escuro
   pra que as tabelas que usam essas classes acompanhem. */
:root[data-theme="dark"] .fd-table {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
:root[data-theme="dark"] .fd-table__header,
:root[data-theme="dark"] .fd-table thead {
    background: var(--app-surface-alt);
}
:root[data-theme="dark"] .fd-table__cell,
:root[data-theme="dark"] .fd-table th,
:root[data-theme="dark"] .fd-table td {
    color: var(--app-text);
    border-color: var(--app-border);
    background: transparent;
}
:root[data-theme="dark"] .fd-table__row:hover .fd-table__cell,
:root[data-theme="dark"] .fd-table tbody tr:hover td {
    background: var(--app-surface-alt);
}

/* Pills de status no tema escuro — chips mais escuros e legíveis */
:root[data-theme="dark"] .fiori-pill,
:root[data-theme="dark"] .badge { background: #243140; color: var(--app-text); }
:root[data-theme="dark"] .fiori-pill--success, :root[data-theme="dark"] .badge-ok { background: #163a2c; color: #5fe0b0; }
:root[data-theme="dark"] .fiori-pill--warning, :root[data-theme="dark"] .badge-warn { background: #3d2f12; color: #f5c97a; }
:root[data-theme="dark"] .fiori-pill--error, :root[data-theme="dark"] .badge-err { background: #3d1c22; color: #f59aa6; }

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

a {
    color: var(--app-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--app-primary-hover); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 { color: var(--app-title); font-weight: 600; letter-spacing: -0.011em; }
h1 { margin: 0 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.022em; }
h2 { margin: 0.25rem 0 0.5rem; font-size: 1.125rem; letter-spacing: -0.014em; }
h3 { margin: 0.25rem 0 0.5rem; font-size: 1rem; }

p { margin: 0 0 0.75rem; }
hr { border: none; border-top: 1px solid var(--app-border); margin: 1rem 0; }
code { font-family: var(--font-mono); background: var(--app-surface-alt); padding: 0.05rem 0.35rem; border-radius: var(--radius-sm); font-size: 0.85em; }

::selection { background: rgba(17,162,184,0.25); color: var(--app-title); }
:root[data-theme="dark"] ::selection { background: rgba(63,201,224,0.30); color: var(--app-title); }

/* ============ App Shell: sidebar fixa + main area ============ */
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    transition: grid-template-columns var(--dur-slow) var(--ease);
}
/* Sidebar recolhida — só ícones (largura reduzida) */
:root[data-sidebar="collapsed"] .app-shell {
    grid-template-columns: 64px 1fr;
}
:root[data-sidebar="collapsed"] .app-brand__title,
:root[data-sidebar="collapsed"] .app-brand__sub,
:root[data-sidebar="collapsed"] .app-nav__item span,
:root[data-sidebar="collapsed"] .app-nav__group-label,
:root[data-sidebar="collapsed"] .app-user__info,
:root[data-sidebar="collapsed"] .app-env-badge {
    display: none;
}
:root[data-sidebar="collapsed"] .app-brand {
    justify-content: center;
    padding: 1.15rem 0.5rem;
}
:root[data-sidebar="collapsed"] .app-nav {
    padding: 0.5rem 0.35rem;
}
:root[data-sidebar="collapsed"] .app-nav__item {
    justify-content: center;
    padding: 0.6rem 0;
}
:root[data-sidebar="collapsed"] .app-nav > *:not(.app-nav__item):not(.app-nav__group-label):first-child,
:root[data-sidebar="collapsed"] .app-nav__item:first-of-type { margin-top: 0.5rem; }
/* Separadores entre grupos quando não há label visível */
:root[data-sidebar="collapsed"] .app-nav__item + .app-nav__group-label + .app-nav__item {
    margin-top: 0.5rem;
    position: relative;
}
:root[data-sidebar="collapsed"] .app-nav__item + .app-nav__group-label + .app-nav__item::after {
    content: "";
    position: absolute;
    top: -0.35rem;
    left: 20%; right: 20%;
    height: 1px;
    background: rgba(255,255,255,0.10);
}
:root[data-sidebar="collapsed"] .app-user {
    justify-content: center;
    padding: 0.4rem;
}
:root[data-sidebar="collapsed"] .app-sidebar__actions {
    flex-direction: column;
    padding: 0;
}
:root[data-sidebar="collapsed"] .app-nav__item.active::before {
    left: -0.35rem;
}

/* Botão flutuante de recolher/fixar — meia esfera na borda direita da sidebar */
.app-sidebar__collapse-btn {
    position: absolute;
    top: 60px;
    right: -12px;
    z-index: 20;
    width: 24px;
    height: 24px;
    background: var(--app-surface);
    color: var(--app-text-muted);
    border: 1px solid var(--app-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: var(--shadow-sm);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.app-sidebar__collapse-btn:hover {
    color: var(--app-primary);
    background: var(--app-surface-alt);
    transform: scale(1.08);
}

/* ----- Sidebar (navy profundo, full-height) ----- */
.app-sidebar {
    background:
        radial-gradient(ellipse at top left, rgba(43,196,201,0.08), transparent 60%),
        linear-gradient(180deg, var(--app-shell-bg) 0%, #071e4d 100%);
    color: rgba(255,255,255,0.92);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    box-shadow: 1px 0 0 rgba(255,255,255,0.04), 4px 0 24px rgba(11,26,44,0.06);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.15rem 1rem;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background var(--dur-fast) var(--ease);
}
.app-brand:hover { text-decoration: none; background: rgba(255,255,255,0.03); }
.app-brand__logo {
    font-size: 1.5rem;
    background: rgba(255,255,255,0.08);
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.app-brand__title { display: flex; flex-direction: column; line-height: 1.15; }
.app-brand__name { font-size: 0.95rem; font-weight: 700; }
.app-brand__hub { color: var(--app-primary); }
.app-brand__sub { font-size: 0.7rem; color: rgba(255,255,255,0.6); }

.app-nav {
    flex: 1;
    padding: 0.5rem 0.5rem;
    overflow-y: auto;
}
.app-nav__group-label {
    padding: 0.9rem 0.75rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
}
.app-nav__group-label:first-child { padding-top: 0.5rem; }
/* Aviso no lugar do menu, para quem esta logado e ainda nao tem perfil de acesso. */
.app-nav__aviso {
    margin: 0.5rem 0.25rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.62);
}
.app-nav__aviso strong { color: rgba(255,255,255,0.85); }
.app-nav {
    padding: 0.5rem 0.5rem;
}
.app-nav__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    margin: 1px 0;
    color: rgba(255,255,255,0.78);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    border-left: 0;
    position: relative;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.app-nav__item i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    opacity: 0.85;
}
.app-nav__item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
}
.app-nav__item.active {
    background: linear-gradient(135deg, rgba(43,196,201,0.22), rgba(43,196,201,0.10));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(43,196,201,0.30);
}
.app-nav__item.active::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--app-shell-active-border);
    border-radius: 0 3px 3px 0;
}
.app-nav__item.active svg, .app-nav__item.active i { opacity: 1; color: var(--app-shell-active-border); }
.app-nav__item svg { width: 18px; height: 18px; opacity: 0.85; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.app-nav__item:hover svg { transform: scale(1.08); }

.app-sidebar__footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.app-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease);
}
.app-user:hover { background: rgba(255,255,255,0.06); }
.app-user__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--app-accent), var(--app-primary));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.app-sidebar__actions {
    display: flex;
    gap: 0.35rem;
    padding: 0 0.5rem;
}
.app-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.app-icon-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.20);
}
.app-user__info { line-height: 1.2; overflow: hidden; min-width: 0; }
.app-user__name {
    font-size: 0.825rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-user__email {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-logout-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: none;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.825rem;
    text-align: left;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.app-logout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-logout-btn i { font-size: 0.9rem; }

/* ----- Main content area ----- */
.app-main {
    padding: 0;
    max-width: none;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.app-main__content {
    padding: 1.5rem 2rem 3rem;
    max-width: 1280px;
    width: 100%;
}

/* Topbar — faixa fina no topo do main com a rota atual + espaço p/ ações */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 2rem;
    background: color-mix(in srgb, var(--app-bg) 85%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--app-border);
    min-height: 48px;
}
.app-topbar__crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--app-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
}
.app-topbar__crumb span {
    color: var(--app-title);
    font-weight: 600;
}
.app-topbar__crumb svg {
    color: var(--app-primary);
    opacity: 0.85;
}
.app-topbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.app-topbar__hint {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    padding: 0.25rem 0.6rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-pill);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile / narrow viewports: collapse sidebar to top */
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar { position: relative; height: auto; }
    .app-topbar { padding: 0.6rem 1rem; }
    .app-main__content { padding: 1.25rem 1rem 2rem; }
}

/* ---------- Compatibilidade com classes antigas (.fiori-main, .fd-shellbar) ---------- */
.fiori-main { padding: 1.5rem 2rem 3rem; max-width: 1280px; }
.fd-shellbar { display: none; } /* legacy — substituído pela sidebar */
.fiori-topnav, .fiori-user-menu { display: none; }

.fiori-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--app-title);
    margin: 0 0 0.25rem;
}
.fiori-page-subtitle {
    color: var(--app-text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

/* ============ Object Header (cabeçalho do tenant) ============ */
.fiori-object-header {
    background: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-alt) 100%);
    padding: 1.35rem 1.6rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-xs);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.fiori-object-header::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--app-primary), var(--app-accent));
}
.fiori-object-header .label {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.fiori-object-header .name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--app-title);
    margin-bottom: 0.15rem;
}
.fiori-object-header .subline {
    color: var(--app-text-muted);
    font-size: 0.875rem;
}
.fiori-object-header .meta {
    display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap;
}

/* ============ Tiles (KPI cards, estilo Aster) ============ */
.fiori-tiles, .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.fiori-tile, .card {
    background: var(--app-surface);
    padding: 1.15rem 1.3rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.fiori-tile:hover, .card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--app-border-strong);
}
.fiori-tile .tile-label, .card .label {
    color: var(--app-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
    font-weight: 500;
}
.fiori-tile .tile-value, .card .kpi {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--app-title);
    line-height: 1.1;
}
.fiori-tile .tile-detail {
    color: var(--app-text-muted);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}
.fiori-tile--success { border-top: 3px solid var(--app-success); }
.fiori-tile--warning { border-top: 3px solid var(--app-warning); }
.fiori-tile--error { border-top: 3px solid var(--app-error); }
.fiori-tile .tile-value { font-variant-numeric: tabular-nums; }

/* ============ KPI cards analíticos (Matching, Uso de IA) ============
   As páginas de análise referenciam .fiori-card* (que faltavam no CSS, então
   os KPIs renderizavam sem estilo). Visual de dashboard: faixa de acento no topo
   conforme o tom semântico, rótulo discreto, número grande tabular, sub-linha. */
.fiori-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.fiori-card {
    position: relative;
    background: var(--app-surface);
    padding: 1.2rem 1.35rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
    overflow: hidden;
}
.fiori-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, transparent);
}
.fiori-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--app-border-strong);
}
.fiori-card__label {
    color: var(--app-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.45rem;
}
.fiori-card__kpi {
    font-size: 2rem;
    font-weight: 700;
    color: var(--app-title);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.fiori-card__sub {
    color: var(--app-text-muted);
    font-size: 0.75rem;
    margin-top: 0.4rem;
}
.fiori-card--primary { --card-accent: var(--app-primary); }
.fiori-card--success { --card-accent: var(--app-success); }
.fiori-card--warning { --card-accent: var(--app-warning); }
.fiori-card--error   { --card-accent: var(--app-error); }

/* Título de seção: rótulo curto + linha de apoio que ocupa o resto da largura */
.fiori-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
    margin: 1.75rem 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fiori-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--app-border);
}

/* ============ Barra de filtros + paginação (Matching, Documentos) ============ */
.fiori-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.fiori-filter-bar__item { display: flex; flex-direction: column; min-width: 0; }
.fiori-filter-bar__item > label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
    font-weight: 600;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fiori-filter-bar__item input,
.fiori-filter-bar__item select {
    max-width: none;
    width: 100%;
    height: 36px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}
.fiori-filter-bar__action { display: flex; align-items: end; justify-content: flex-end; }
.fiori-filter-bar__action button { height: 36px; white-space: nowrap; }

.fiori-pagination {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.85rem;
    color: var(--app-text-muted);
}

/* ============ Panel (card com header) ============ */
.fiori-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.fiori-panel__header {
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    font-weight: 600;
    font-size: 1rem;
    color: var(--app-title);
}
.fiori-panel__body { padding: 1.25rem 1.5rem; }

/* ============ Tabelas (modernizadas — cabeçalho leve, sem uppercase pesado) ============ */
.fd-table {
    width: 100%;
    background: var(--app-surface);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
}
.fd-table__cell, .fd-table th, .fd-table td {
    font-size: 0.875rem;
    color: var(--app-text);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--app-border);
    vertical-align: middle;
}
.fd-table th, .fd-table__header .fd-table__cell {
    background: transparent;
    color: var(--app-text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
}
.fd-table tr:hover td, .fd-table .fd-table__row:hover .fd-table__cell {
    background: var(--app-surface-alt);
}
.fd-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.fd-table tbody tr:last-child td { border-bottom: 0; }

/* tabelas "soltas" sem fd-table */
/* O :not(.d-itens) tira a DANFE daqui.
   Motivo: `table:not(.fd-table) th` pesa (0,1,2) -- o :not() conta como classe -- e
   por isso vencia `.d-itens th`, que pesa (0,1,1). O cabecalho da tabela de itens saia
   com 11px em vez de 5pt, as colunas nao cabiam e o texto virava reticencias. Nao era
   ordem no arquivo: era especificidade, e mover o bloco nao resolvia.
   O painel do Agent nao tem este problema porque la a regra generica e `table th`,
   que pesa (0,0,2) e perde para a DANFE. */
table:not(.fd-table):not(.d-itens) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
table:not(.fd-table):not(.d-itens) th, table:not(.fd-table):not(.d-itens) td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--app-border);
    font-size: 0.875rem;
    vertical-align: middle;
}
table:not(.fd-table):not(.d-itens) th {
    background: var(--app-surface-alt);
    color: var(--app-text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
}
table:not(.fd-table):not(.d-itens) tbody tr { transition: background var(--dur-fast) var(--ease); }
table:not(.fd-table):not(.d-itens) tbody tr:hover td { background: var(--app-surface-alt); }
table:not(.fd-table):not(.d-itens) tbody tr:last-child td { border-bottom: 0; }

/* ============ Forms — alinhamento padronizado ============ */
.fiori-form-card {
    background: var(--app-surface);
    max-width: 460px;
    margin: 3rem auto;
    padding: 2rem 2.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-lg);
}
.fiori-form-card h1 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    color: var(--app-title);
    font-weight: 700;
}
.fiori-form-card .subtitle {
    color: var(--app-text-muted);
    font-size: 0.875rem;
    margin: 0 0 1.5rem;
}

.fd-form-item {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}
.fd-form-label {
    display: block;
    font-size: 0.825rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--app-title);
}

/* TODOS os inputs do projeto seguem o mesmo padrão visual */
.fd-input, .fd-textarea, .fd-select__control,
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], textarea, select {
    width: 100%;
    max-width: 380px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 0.9rem;
    background: var(--app-surface);
    color: var(--app-text);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.fd-input:hover, input:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled) {
    border-color: var(--app-text-muted);
}
.fd-input:focus, .fd-textarea:focus, .fd-select__control:focus,
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: var(--shadow-focus);
}
.fd-input:disabled, input:disabled {
    background: var(--app-surface-alt);
    color: var(--app-text-disabled);
    cursor: not-allowed;
}

/* Inputs em uma grade 2-colunas pra forms maiores */
.fiori-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.25rem;
    max-width: 800px;
}
.fiori-form-grid .fd-form-item--full { grid-column: 1 / -1; }

/* Quando o input está dentro de uma grade, ele ocupa 100% do espaço da coluna */
.fiori-form-grid .fd-input,
.fiori-form-grid input[type=text],
.fiori-form-grid input[type=email],
.fiori-form-grid input[type=number],
.fiori-form-grid input[type=date],
.fiori-form-grid select,
.fiori-form-grid textarea {
    max-width: 100%;
}

.help-text, .text-muted {
    color: var(--app-text-muted);
    font-size: 0.78rem;
    margin-top: 0.25rem;
}

/* ============ Buttons ============ */
.fd-button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--app-border-strong);
    background: var(--app-surface);
    color: var(--app-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.fd-button:hover, .btn:hover {
    background: var(--app-surface-alt);
    border-color: var(--app-text-muted);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
}
.fd-button:active, .btn:active { transform: translateY(1px); }
.fd-button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fd-button--emphasized, .btn-primary {
    background: var(--app-accent);
    color: #fff;
    border-color: var(--app-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15,106,208,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
}
.fd-button--emphasized:hover, .btn-primary:hover {
    background: var(--app-accent-hover);
    color: #fff;
    border-color: var(--app-accent-hover);
    box-shadow: 0 4px 12px rgba(15,106,208,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
}
.fd-button--negative, .btn-danger {
    background: var(--app-error);
    color: #fff;
    border-color: var(--app-error);
}
.fd-button--negative:hover, .btn-danger:hover {
    background: #8a0000;
}
.fd-button--transparent {
    background: transparent;
    border-color: transparent;
    color: var(--app-primary);
}
.fd-button--transparent:hover {
    background: rgba(10,110,209,0.08);
}
.fd-button--compact {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}
.fd-button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ Badges / Pills / Status ============ */
.fiori-pill, .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    background: #eef1f4;
    color: var(--app-text);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    border: 1px solid transparent;
}
.fiori-pill::before, .badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}
.fiori-pill--success, .badge-ok { background: #e6f7ee; color: #157a4b; border-color: #c7ecd6; }
.fiori-pill--warning, .badge-warn { background: #fff4d9; color: #8b5a10; border-color: #ffe4a3; }
.fiori-pill--error, .badge-err { background: #ffe5e8; color: #a01e2f; border-color: #ffcbd2; }
.fiori-pill.neutral, .badge-neutral { background: #eef1f4; color: var(--app-text-muted); border-color: var(--app-border); }
/* Variante sem dot pra rótulos puros (planos, tags de metadados) */
.fiori-pill--tag, .badge--tag { padding-left: 0.65rem; }
.fiori-pill--tag::before, .badge--tag::before { display: none; }

:root[data-theme="dark"] .fiori-pill--success, :root[data-theme="dark"] .badge-ok { background: #0f2c22; color: #5fe0b0; border-color: #1c4536; }
:root[data-theme="dark"] .fiori-pill--warning, :root[data-theme="dark"] .badge-warn { background: #33260d; color: #f5c97a; border-color: #4d3b1a; }
:root[data-theme="dark"] .fiori-pill--error, :root[data-theme="dark"] .badge-err { background: #34161b; color: #f59aa6; border-color: #4d2129; }

.fiori-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.fiori-status::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
    flex-shrink: 0;
}
.fiori-status--success { color: var(--app-success); }
.fiori-status--warning { color: var(--app-warning); }
.fiori-status--error { color: var(--app-error); }
.fiori-status--neutral { color: var(--app-text-muted); }
/* Pulso sutil para status "ao vivo" (agente online) */
.fiori-status--live::before {
    animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 10%, transparent); }
}

/* ============ Empty state ============ */
.fiori-empty, .empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--app-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.fiori-empty .emoji { font-size: 2.5rem; margin-bottom: 0.35rem; opacity: 0.55; filter: grayscale(30%); }
.fiori-empty svg, .empty-state svg {
    width: 56px; height: 56px;
    color: var(--app-text-muted);
    opacity: 0.5;
    margin-bottom: 0.35rem;
    padding: 12px;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: 50%;
    box-sizing: content-box;
}
.fiori-empty__title, .empty-state__title {
    color: var(--app-title);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.fiori-empty__hint, .empty-state__hint {
    color: var(--app-text-muted);
    font-size: 0.85rem;
    max-width: 380px;
    margin: 0;
}

/* ============ Code/token displays ============ */
.code-token {
    font-family: var(--font-mono);
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-md);
    user-select: all;
    display: inline-block;
    word-break: break-all;
    font-size: 0.85rem;
    color: var(--app-text);
}

/* ============ Message banners ============ */
.fiori-message {
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin-bottom: 1rem;
    background: var(--app-surface);
    box-shadow: var(--shadow-xs);
    color: var(--app-text);
}
.fiori-message--success { background: #f3f9e8; border-color: var(--app-success); }
.fiori-message--warning { background: #fef7e2; border-color: var(--app-warning); }
.fiori-message--error   { background: #ffeded; border-color: var(--app-error); }
.fiori-message--info    { background: #ebf5fe; border-color: var(--app-primary); }

/* ============ Validation errors ============ */
.text-danger, .field-validation-error, .validation-summary-errors {
    color: var(--app-error);
    font-size: 0.825rem;
}
.validation-summary-errors {
    background: #ffeded;
    border-left: 3px solid var(--app-error);
    padding: 0.6rem 0.85rem;
    border-radius: 0 4px 4px 0;
    margin: 0.5rem 0;
}
.validation-summary-errors ul { list-style: none; padding: 0; margin: 0; }

/* ============ Login split-screen (inspirado no Aster) ============ */
.login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 100vh garante que o hero azul vá até o fim da viewport — sem isso
       sobra uma faixa branca no rodapé (caso histórico: tinha um header
       de 44px que foi removido mas o cálculo ficou). */
    min-height: 100vh;
}
.login-split__hero {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(43,196,201,0.30), transparent 55%),
        linear-gradient(135deg, #0a2540 0%, #0f6ad0 70%, #1486c9 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.login-split__hero h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    letter-spacing: -0.02em;
}
.login-split__hero p {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    max-width: 380px;
    text-align: center;
    margin: 0.5rem 0;
}
.compass-hero {
    width: min(60%, 320px);
    height: auto;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.3));
}
.login-split__hero h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.login-split__hero p {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    max-width: 420px;
}
.login-split__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.login-split__form .fiori-form-card {
    margin: 0;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--app-border);
    backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
    .login-split { grid-template-columns: 1fr; }
    .login-split__hero { padding: 2rem; }
}

/* ============ Blazor error UI ============ */
#blazor-error-ui {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--app-error); color: #fff;
    padding: 0.75rem 1rem; display: none; z-index: 1000;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.15);
}
#blazor-error-ui.show { display: block; animation: slideUpIn var(--dur-slow) var(--ease); }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: 1rem; cursor: pointer; }

/* ============ Blazor SignalR reconnect overlay — some visual love ============ */
#components-reconnect-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
#components-reconnect-modal::before {
    content: "Reconectando...";
    padding: 1rem 1.5rem;
    background: var(--app-surface);
    color: var(--app-title);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-weight: 600;
}

/* =====================================================================
   EIXO 4 — Fluidez percebida: skeletons, animações, transições, toast
   ===================================================================== */

/* ---- Scroll behavior global ---- */
html { scroll-behavior: smooth; }

/* ---- Barra de scroll customizada (mais discreta que a padrão) ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--app-border-strong);
    border-radius: var(--radius-pill);
    border: 2px solid var(--app-bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--app-text-muted); }

/* ---- Skeleton loaders ---- */
.skeleton {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--app-surface-alt) 0%,
        color-mix(in srgb, var(--app-surface-alt) 60%, var(--app-border) 40%) 50%,
        var(--app-surface-alt) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.skeleton-text {
    height: 0.85em;
    width: 100%;
    border-radius: var(--radius-sm);
    margin: 0.25em 0;
}
.skeleton-text--short { width: 40%; }
.skeleton-text--medium { width: 65%; }
.skeleton-title {
    height: 1.4em;
    width: 55%;
    border-radius: var(--radius-sm);
    margin-bottom: 0.6em;
}
.skeleton-card {
    height: 120px;
    width: 100%;
    border-radius: var(--radius-lg);
}
.skeleton-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-block;
}
.skeleton-row {
    height: 44px;
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Fade-in de entrada (aplicar em cards/tiles/main content) ---- */
@keyframes appearUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

.app-main__content > * {
    animation: appearUp var(--dur-slow) var(--ease) both;
}

/* Stagger leve nos primeiros N filhos (dá sensação de cascata) */
.app-main__content > *:nth-child(1) { animation-delay: 0ms; }
.app-main__content > *:nth-child(2) { animation-delay: 40ms; }
.app-main__content > *:nth-child(3) { animation-delay: 80ms; }
.app-main__content > *:nth-child(4) { animation-delay: 120ms; }
.app-main__content > *:nth-child(5) { animation-delay: 160ms; }
.app-main__content > *:nth-child(6) { animation-delay: 200ms; }
.app-main__content > *:nth-child(n+7) { animation-delay: 240ms; }

/* Cards em grid aparecem em sequência dentro do próprio container */
.fiori-cards > *, .fiori-tiles > *, .cards > * {
    animation: appearUp var(--dur-slow) var(--ease) both;
}
.fiori-cards > *:nth-child(2), .fiori-tiles > *:nth-child(2), .cards > *:nth-child(2) { animation-delay: 60ms; }
.fiori-cards > *:nth-child(3), .fiori-tiles > *:nth-child(3), .cards > *:nth-child(3) { animation-delay: 120ms; }
.fiori-cards > *:nth-child(4), .fiori-tiles > *:nth-child(4), .cards > *:nth-child(4) { animation-delay: 180ms; }
.fiori-cards > *:nth-child(n+5), .fiori-tiles > *:nth-child(n+5), .cards > *:nth-child(n+5) { animation-delay: 240ms; }

/* Topbar não anima — deve estar pronta imediatamente ao trocar rota */
.app-topbar { animation: none !important; }

/* ---- Toast / notificação (bottom-right, empilhamento vertical) ---- */
.app-toast-host {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}
.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--app-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slideInRight var(--dur-slow) var(--ease) both;
    pointer-events: auto;
    font-size: 0.875rem;
}
.app-toast--success { border-left-color: var(--app-success); }
.app-toast--warning { border-left-color: var(--app-warning); }
.app-toast--error   { border-left-color: var(--app-error); }
.app-toast__icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    color: var(--app-primary);
}
.app-toast--success .app-toast__icon { color: var(--app-success); }
.app-toast--warning .app-toast__icon { color: var(--app-warning); }
.app-toast--error   .app-toast__icon { color: var(--app-error); }
.app-toast__body { flex: 1; min-width: 0; }
.app-toast__title { font-weight: 600; color: var(--app-title); margin-bottom: 0.15rem; }
.app-toast__msg { color: var(--app-text-muted); }
.app-toast__close {
    background: transparent;
    border: none;
    color: var(--app-text-muted);
    cursor: pointer;
    padding: 0.15rem;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.app-toast__close:hover { background: var(--app-surface-alt); color: var(--app-title); }
.app-toast.is-leaving { animation: fadeIn var(--dur-base) var(--ease) reverse both; }

/* ---- Ripple/pressed-state para links de navegação ---- */
.app-nav__item:active { transform: scale(0.98); }

/* ---- Respeitar preferência de menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   RESPONSIVO — adapta o shell e os componentes à largura da tela.

   Breakpoints:
     <= 1280px  desktop estreito  — reduz respiros laterais
     <= 1024px  tablet            — grids mais densos, tabelas rolam
     <=  900px  mobile            — sidebar vira drawer off-canvas
     <=  560px  celular pequeno   — tudo em coluna única

   O drawer é controlado por data-drawer no <html> (window.bsDrawer, theme.js).
   ===================================================================== */

/* ---------- Wrapper de rolagem para tabelas ----------
   Toda <table> das páginas fica dentro de .bs-table-wrap. A tabela mantém
   uma largura mínima legível e o wrapper rola na horizontal, em vez de
   espremer as colunas ou estourar a largura da página. */
.bs-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.bs-table-wrap > table { margin-bottom: 1rem; }

/* Sombra sutil indicando que há conteúdo rolável à direita */
.bs-table-wrap {
    background:
        linear-gradient(to right, var(--app-surface) 30%, transparent),
        linear-gradient(to left, var(--app-surface) 30%, transparent) 100% 0,
        linear-gradient(to right, rgba(0,0,0,0.08), transparent 12px),
        linear-gradient(to left, rgba(0,0,0,0.08), transparent 12px) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Agrupa hambúrguer + breadcrumb à esquerda da topbar (o space-between da
   .app-topbar precisa de dois filhos, não três). */
.app-topbar__left {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

/* ---------- Botão hambúrguer + backdrop do drawer ---------- */
.app-drawer-toggle {
    display: none;             /* só aparece no mobile */
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
}
.app-drawer-toggle:hover { background: var(--app-surface-alt); }

.app-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(8, 15, 30, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 0;
    padding: 0;
}

/* =========================== <= 1280px =========================== */
@media (max-width: 1280px) {
    .app-main__content { padding: 1.35rem 1.5rem 2.5rem; }
    .app-topbar { padding: 0.7rem 1.5rem; }
}

/* =========================== <= 1024px =========================== */
@media (max-width: 1024px) {
    .cards {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
        gap: 0.75rem;
        margin-bottom: 1.15rem;
    }
    .card { padding: 1rem 1.05rem; }

    .bs-filter-bar { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

    /* Tabela nunca fica ilegível: abaixo disso o wrapper rola */
    .bs-table-wrap > table { min-width: 760px; }

    .bs-modal { width: 100% !important; max-width: 640px; }
}

/* =========================== <= 900px (mobile) =========================== */
@media (max-width: 900px) {

    /* ----- Shell vira coluna única; a sidebar sai do fluxo ----- */
    .app-shell,
    :root[data-sidebar="collapsed"] .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(284px, 84vw);
        height: 100vh;
        height: 100dvh;
        z-index: 1200;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease);
        box-shadow: 0 0 40px rgba(8, 15, 30, 0.35);
    }
    :root[data-drawer="open"] .app-sidebar { transform: translateX(0); }

    .app-drawer-toggle { display: inline-flex; }
    :root[data-drawer="open"] .app-drawer-backdrop { display: block; }

    /* O modo "só ícones" é exclusivo do desktop — dentro do drawer o menu
       aparece sempre por extenso, senão viraria uma tira de ícones sem rótulo. */
    .app-sidebar__collapse-btn { display: none; }
    :root[data-sidebar="collapsed"] .app-brand__title { display: flex; }
    :root[data-sidebar="collapsed"] .app-brand__sub,
    :root[data-sidebar="collapsed"] .app-nav__item span { display: inline; }
    :root[data-sidebar="collapsed"] .app-nav__group-label,
    :root[data-sidebar="collapsed"] .app-user__info,
    :root[data-sidebar="collapsed"] .app-env-badge { display: block; }
    :root[data-sidebar="collapsed"] .app-brand { justify-content: flex-start; padding: 1rem; }
    :root[data-sidebar="collapsed"] .app-nav { padding: 0.5rem 0.6rem; }
    :root[data-sidebar="collapsed"] .app-nav__item { justify-content: flex-start; padding: 0.55rem 0.8rem; }
    :root[data-sidebar="collapsed"] .app-user { justify-content: flex-start; padding: 0.4rem 0.5rem; }
    :root[data-sidebar="collapsed"] .app-sidebar__actions { flex-direction: row; }

    /* ----- Topbar e conteúdo ----- */
    .app-topbar {
        padding: 0.55rem 0.9rem;
        gap: 0.6rem;
    }
    .app-topbar__hint { display: none; }
    .app-main__content { padding: 1.15rem 0.9rem 2rem; }

    /* Alvos de toque maiores */
    .app-nav__item { padding: 0.7rem 0.8rem; }
    .btn, .fd-button { min-height: 38px; }

    /* ----- Tipografia ----- */
    h1 { font-size: 1.35rem; }
    h2, .bs-section-title { font-size: 1.05rem; }

    /* ----- Grids que eram fixos ----- */
    .setup-grid2 { grid-template-columns: 1fr; max-width: none; }
    .setup-grid-inline { max-width: none; }
    .setup-nav { gap: 0.5rem; }

    /* Itens de filtro que ocupavam 2 colunas voltam a ocupar 1 */
    .bs-filter-bar__item[style*="span 2"] { grid-column: span 1 !important; }
    .bs-filter-bar { grid-template-columns: 1fr 1fr; gap: 0.6rem 0.75rem; }
    .bs-filter-bar__action { grid-column: 1 / -1; }
    .bs-filter-bar__action .btn { width: 100%; }

    /* Paginação centralizada e sem apertar */
    .bs-pagination { justify-content: center; flex-wrap: wrap; }

    /* Abas roláveis em vez de quebrar em várias linhas */
    .bs-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bs-tabs::-webkit-scrollbar { display: none; }
    .bs-tabs__tab { white-space: nowrap; padding: 0.7rem 0.9rem; }

    /* Modais ocupam quase a tela toda */
    .bs-modal-overlay { padding: 0.5rem; }
    .bs-modal { width: 100% !important; max-width: none; max-height: 92vh; }

    /* Inputs em 16px evitam o zoom automático do iOS ao focar */
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=date], input[type=url], input[type=search], textarea, select {
        font-size: 16px;
    }
}

/* =========================== <= 560px =========================== */
@media (max-width: 560px) {
    .cards { grid-template-columns: 1fr; }
    .bs-filter-bar { grid-template-columns: 1fr; }
    .bs-filter-bar__item[style*="span 2"] { grid-column: span 1 !important; }

    .app-main__content { padding: 1rem 0.7rem 1.75rem; }
    .app-topbar { padding: 0.5rem 0.7rem; }

    h1 { font-size: 1.2rem; }

    .bs-table-wrap > table { min-width: 680px; }

    /* Barras de ação empilham e ocupam a largura toda */
    .setup-nav { flex-direction: column-reverse; }
    .setup-nav .btn { width: 100%; }
    .bs-modal-footer { flex-wrap: wrap; }
    .bs-modal-footer .btn { flex: 1 1 auto; }
}

/* Telas curtas e deitadas (celular na horizontal): sidebar precisa rolar */
@media (max-height: 520px) and (max-width: 900px) {
    .app-sidebar { overflow-y: auto; }
    .app-env-badge { display: none; }
}

/* Impressão: sem sidebar, sem topbar, tabela inteira na folha */
@media print {
    .app-sidebar, .app-topbar, .app-drawer-toggle, .app-drawer-backdrop,
    .bs-filter-bar, .bs-pagination { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .app-main__content { padding: 0; max-width: none; }
    .bs-table-wrap { overflow: visible; background: none; }
    .bs-table-wrap > table { min-width: 0; }
}

/* ---------- Telas largas ----------
   O conteudo acompanhava um teto fixo de 1280px, o que deixava uma faixa vazia
   grande a direita em monitores de 1600px+. Como as telas aqui sao densas em
   tabela, o conteudo passa a ser fluido e so os respiros laterais crescem. */
.app-main__content { max-width: none; }

@media (min-width: 1600px) {
    .app-main__content { padding-left: 2.5rem; padding-right: 2.5rem; }
    .app-topbar { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 2200px) {
    .app-main__content { padding-left: 3.5rem; padding-right: 3.5rem; }
    .app-topbar { padding-left: 3.5rem; padding-right: 3.5rem; }
}

/* =====================================================================
   Telas de documento espelhadas do painel do Agent.
   O analista sai do agente e entra na web: mesma tela, mesmo lugar das
   coisas. Divergir o leiaute entre os dois obrigaria a pessoa a reaprender
   a mesma informacao duas vezes.
   ===================================================================== */
/* ---------- Painel + barra de filtros + empty state + paginacao ---------- */
/* ============ Painel + Barra de Filtros (Notta Hub) ============
   Padronização das telas /nfes /ctes /nfses /uploads — todas têm a mesma
   estrutura: header curto, filtros responsivos no topo, tabela, paginação.
   Esse bloco substitui o mix solto de "fiori-form-grid" + estilos inline. */

.bs-panel {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.bs-panel__body { padding: 1.25rem 1.5rem; }

/* Linha de filtros: grid responsivo com colunas de tamanho mínimo, todas com
   mesma altura visual (label em cima, input embaixo). Em viewports estreitos
   quebra naturalmente em mais linhas. */
.bs-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
}
.bs-filter-bar__item {
    display: flex;
    flex-direction: column;
    min-width: 0; /* permite shrinking dentro do grid */
}
.bs-filter-bar__item > label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
    font-weight: 500;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Inputs dentro da barra de filtros ocupam 100% da célula do grid
   (anula o max-width:380px global). */
.bs-filter-bar__item input[type=text],
.bs-filter-bar__item input[type=search],
.bs-filter-bar__item input[type=date],
.bs-filter-bar__item input[type=number],
.bs-filter-bar__item select {
    max-width: none;
    width: 100%;
    height: 36px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}
/* A célula do botão Buscar fica "auto" no width e alinhada ao final do grid. */
.bs-filter-bar__action {
    display: flex;
    align-items: end;
    justify-content: flex-end;
}
.bs-filter-bar__action button {
    height: 36px;
    white-space: nowrap;
}

/* Empty state padronizado das listas */
.bs-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--app-text-muted);
}
.bs-empty__emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }
.bs-empty__title { font-size: 1rem; font-weight: 500; margin: 0; color: var(--app-text); }
.bs-empty__hint  { margin: 0.5rem 0 0; font-size: 0.85rem; }

/* Paginação consistente */
.bs-pagination {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.85rem;
    color: var(--app-text-muted);
}


/* ---------- Botao de acao dentro da linha da tabela ---------- */
/* ---------- Botao de acao dentro da linha da tabela ----------
   Usado na coluna "Acoes" da tela de Manifestacoes. Ghost por padrao, ganha a cor
   primaria quando o painel da linha esta aberto; o chevron gira 180deg junto. */
.bs-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.bs-row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.6rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--app-text);
    background: var(--app-surface);
    border: 1px solid var(--app-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.bs-row-toggle:hover:not(:disabled) {
    background: var(--app-surface-alt);
    border-color: var(--app-primary);
    color: var(--app-primary);
}
.bs-row-toggle:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.bs-row-toggle:disabled { opacity: 0.5; cursor: not-allowed; }

/* Estado aberto: vira solido na cor primaria */
.bs-row-toggle.is-open {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #fff;
}
.bs-row-toggle.is-open:hover { background: var(--app-primary-hover); border-color: var(--app-primary-hover); color: #fff; }

.bs-row-toggle__chevron {
    transition: transform var(--dur-base) var(--ease);
    opacity: 0.75;
}
.bs-row-toggle.is-open .bs-row-toggle__chevron { transform: rotate(180deg); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .bs-row-toggle, .bs-row-toggle__chevron { transition: none; }
}

/* ---------- Detalhe da NF-e: listas de definicao e colunas ---------- */
/* =====================================================================
   Tela de detalhes da NF-e — listas de definicao e colunas
   ===================================================================== */
.bs-def-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.5rem 1.25rem;
    margin: 0;
}
.bs-def-list > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--app-border);
    min-width: 0;
}
.bs-def-list dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
    font-weight: 600;
}
.bs-def-list dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--app-text);
    word-break: break-word;
}
.bs-def-list > div.is-destaque dd { font-size: 1.05rem; color: var(--app-title); }

.bs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .bs-two-col { grid-template-columns: 1fr; gap: 1rem; }
    .bs-def-list { grid-template-columns: 1fr; }
}

/* Texto livre vindo do XML (infCpl costuma ser um paragrafo longo) */
.bs-texto-livre {
    white-space: pre-wrap;
    font-size: 0.85rem;
    line-height: 1.6;
    background: var(--app-surface-alt);
    border-left: 3px solid var(--app-border-strong);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    margin: 0 0 0.75rem;
}



/* ---------- Detalhe da NF-e: cabecalho do documento e realces ---------- */
/* =====================================================================
   Tela de detalhes da NF-e — cabeçalho de documento e realces
   ===================================================================== */

/* Faixa de topo com o que identifica a nota: número, emitente e valor. */
.bs-doc-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--app-surface) 0%, var(--app-surface-alt) 100%);
    border: 1px solid var(--app-border);
    border-left: 4px solid var(--app-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1.15rem 1.35rem;
    margin-bottom: 1.25rem;
}
.bs-doc-hero__main { min-width: 0; flex: 1 1 320px; }
.bs-doc-hero__eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-text-muted);
    font-weight: 600;
}
.bs-doc-hero__titulo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--app-title);
    letter-spacing: -0.02em;
    margin: 0.1rem 0 0.3rem;
    line-height: 1.15;
}
.bs-doc-hero__sub { color: var(--app-text); font-size: 0.9rem; }
.bs-doc-hero__chave {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--app-text-muted);
    word-break: break-all;
    margin-top: 0.45rem;
}
.bs-doc-hero__valor { text-align: right; flex: 0 0 auto; }
.bs-doc-hero__valor .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-muted);
    font-weight: 600;
}
.bs-doc-hero__valor .kpi {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--app-title);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.bs-doc-hero__pills { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }

@media (max-width: 700px) {
    .bs-doc-hero { flex-direction: column; }
    .bs-doc-hero__valor { text-align: left; }
}

/* Barra de ações fixa abaixo do hero */
.bs-doc-acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* Cabeçalho de painel com título e contador à direita */
.bs-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.bs-panel__head h2 { margin: 0; }
.bs-panel__head .bs-panel__hint {
    font-size: 0.78rem;
    color: var(--app-text-muted);
}

/* Chips de imposto dentro da tabela de itens — compactos e alinhados */
.bs-imposto {
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
}
.bs-imposto__cst {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    font-weight: 600;
    font-size: 0.68rem;
}
.bs-imposto__linha { color: var(--app-text-muted); }
.bs-imposto__valor { color: var(--app-text); font-variant-numeric: tabular-nums; }

/* Linha de total no rodapé da tabela de itens */
.bs-total-row td {
    background: var(--app-surface-alt) !important;
    font-weight: 700;
    color: var(--app-title);
}

/* Aviso grande de "só o resumo disponível" */
.bs-callout {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--app-warning) 10%, var(--app-surface));
    border: 1px solid color-mix(in srgb, var(--app-warning) 40%, var(--app-border));
    margin-bottom: 1rem;
}
.bs-callout__icone { font-size: 1.5rem; line-height: 1; }
.bs-callout__corpo { min-width: 0; }
.bs-callout__corpo p { margin: 0 0 0.5rem; font-size: 0.875rem; }
.bs-callout__corpo p:last-child { margin-bottom: 0; }


/* ---------- Cards por tipo / realces de card ---------- */
/* ============ Card por tipo de documento (Notta Hub) ============
   Usado na aba SEFAZ+Manifestação de /configuracoes — cada tipo (NF-e/CT-e/NFS-e)
   tem seu próprio card com borda esquerda colorida pelo ambiente daquele tipo. */
.bs-doctype-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-left: 4px solid var(--ambiente-cor, #e8911c);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.bs-doctype-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.bs-doctype-card__head h2 {
    font-size: 1.05rem;
    color: var(--app-title);
}


/* ---------- Empty state base ---------- */
/* ============ Empty state ============ */
.empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--app-text-muted);
}

/* ============ Code tokens ============ */
.code-token {
    font-family: "Courier New", Consolas, monospace;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    user-select: all;
    display: inline-block;
    word-break: break-all;
    font-size: 0.85rem;
}



/* ---------- Cards de KPI (topo das listas de documento) ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.card {
    position: relative;
    background: var(--app-surface);
    padding: 1.2rem 1.35rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--app-border);
    box-shadow: var(--shadow-xs);
    margin-bottom: 1rem;
    transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.card:hover {
    box-shadow: var(--app-shadow-md);
    transform: translateY(-2px);
    border-color: var(--app-border-strong);
}
.card .label {
    color: var(--app-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
    font-weight: 600;
}
.card .kpi {
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--app-title);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.card .kpi--success { color: var(--app-success); }
.card .kpi--warning { color: var(--app-warning); }
.card .kpi--error   { color: var(--app-error); }

/* Faixa de acento no topo — opcional, via modifier. Espelha .fiori-card do Cloud
   pra que páginas analíticas tenham o mesmo vocabulário visual nos dois apps. */
.card--accent::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, transparent);
}
.card--primary { --card-accent: var(--app-primary); }
.card--success { --card-accent: var(--app-success); }
.card--warning { --card-accent: var(--app-warning); }
.card--error   { --card-accent: var(--app-error); }
.card--accent { overflow: hidden; }


/* ---------- Impressão: some com o painel, sobra o documento ----------
   Sem isto a DANFE sai com a sidebar e a topbar do painel em volta, e a folha
   nasce estreita porque a grade do app-shell continua reservando a coluna do
   menu. As mesmas classes existem nos dois painéis, então o bloco veio do Agent
   sem alteração. */
@media print {
    .app-sidebar, .app-topbar, .app-drawer-toggle, .app-drawer-backdrop,
    .bs-filter-bar, .bs-pagination, .no-print { display: none !important; }
    .app-shell { grid-template-columns: 1fr; }
    .app-main__content { padding: 0; max-width: none; }
    .bs-table-wrap { overflow: visible; background: none; }
    .bs-table-wrap > table { min-width: 0; }
}




/* ---------- Listas em cartão, banners, stats e segmented ----------
   Vem do painel do Agent, usado pela tela de Recebimentos. Inserido ANTES do
   bloco da DANFE de propósito: ela precisa continuar sendo o último. */
/* ============================================================================
   Listas em cartão, banners e painel de conferência
   ----------------------------------------------------------------------------
   As classes .bs-list, .bs-list__row e .bs-banner eram usadas no markup desde a
   seção de Recebimentos da /matching, mas NUNCA tiveram regra — renderizavam
   como div cru. Daí a sensação de tela inacabada nas páginas que as herdaram.

   Tudo aqui usa só os tokens --app-*, então o tema escuro sai de graça.
   ========================================================================== */

.bs-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bs-list__row {
    position: relative;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    box-shadow: var(--app-shadow-sm);
    /* A faixa de status é desenhada como pseudo-elemento pra não ocupar uma
       coluna do flex do conteúdo — o texto encosta na borda do cartão. */
    overflow: hidden;
    transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.bs-list__row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--app-border-strong);
    transition: background 0.16s ease;
}
.bs-list__row:hover {
    box-shadow: var(--app-shadow-md);
    border-color: var(--app-border-strong);
    transform: translateY(-1px);
}
.bs-list__row:hover::before { background: var(--app-primary); }

/* Faixa por natureza da pendência — cor só na borda, nunca no fundo: fundo
   tingido em lista longa vira ruído e cansa antes da terceira linha. */
.bs-list__row--acao::before   { background: var(--app-accent); }
.bs-list__row--alerta::before { background: var(--app-warning); }
.bs-list__row--calmo::before  { background: var(--app-text-disabled); }

/* ---------------------------------------------------------------------------
   Banner de contexto
   -------------------------------------------------------------------------- */
.bs-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    font-size: 0.85rem;
    color: var(--app-text);
    line-height: 1.45;
}
.bs-banner > span:first-child {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}
.bs-banner strong { color: var(--app-title); }

/* color-mix mantém o tom coerente quando o tema troca — evita manter um par de
   hex por variante em claro e escuro. */
.bs-banner--ok {
    background: color-mix(in srgb, var(--app-success) 8%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-success) 30%, var(--app-border));
}
.bs-banner--warning {
    background: color-mix(in srgb, var(--app-warning) 9%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-warning) 32%, var(--app-border));
}
.bs-banner--error {
    background: color-mix(in srgb, var(--app-error) 8%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-error) 30%, var(--app-border));
}

/* ---------------------------------------------------------------------------
   Cabeçalho de página com métrica
   -------------------------------------------------------------------------- */
.bs-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.bs-page-head__texto { flex: 1; min-width: 260px; }
.bs-page-head__texto h1 { margin: 0 0 0.35rem; }
.bs-page-head__sub {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    max-width: 68ch;
}

.bs-stats { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bs-stat {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    min-width: 104px;
    box-shadow: var(--app-shadow-sm);
}
.bs-stat__valor {
    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1.1;
    color: var(--app-title);
    font-variant-numeric: tabular-nums;
}
.bs-stat__rotulo {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-muted);
    font-weight: 600;
    margin-top: 0.15rem;
}
.bs-stat--acao   .bs-stat__valor { color: var(--app-accent); }
.bs-stat--alerta .bs-stat__valor { color: var(--app-warning); }
.bs-stat--ok     .bs-stat__valor { color: var(--app-success); }

/* ---------------------------------------------------------------------------
   Controle segmentado (abas leves)
   -------------------------------------------------------------------------- */
.bs-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: 999px;
}
.bs-segmented__item {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--app-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.bs-segmented__item:hover { color: var(--app-title); }
.bs-segmented__item--on {
    background: var(--app-surface);
    color: var(--app-title);
    font-weight: 650;
    box-shadow: var(--app-shadow-sm);
}

/* ---------------------------------------------------------------------------
   Painel "dados do Notta Hub"
   Recuado e com fundo próprio pra deixar claro, à distância, que é conferência
   contra o XML capturado — e não mais um bloco de dados do ERP.
   -------------------------------------------------------------------------- */
.bs-conferencia {
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--app-primary);
    border-radius: 8px;
}
.bs-conferencia__selo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface));
    color: var(--app-primary-hover);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bs-conferencia__grupo {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--app-border);
}
.bs-conferencia__titulo {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--app-text-muted);
    margin-bottom: 0.35rem;
}

/* Nome do emitente: âncora visual do painel. */
.bs-conferencia__pn {
    font-size: 1rem;
    font-weight: 650;
    color: var(--app-title);
    line-height: 1.3;
}

/* Chave de acesso — monoespaçada e quebrável, sem estourar o cartão. */
.bs-chave {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: var(--app-text-muted);
    word-break: break-all;
    letter-spacing: -0.01em;
}

/* Botão discreto de expandir/recolher a conferência. */
.bs-toggle {
    border: 1px dashed var(--app-border-strong);
    background: transparent;
    color: var(--app-text-muted);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.bs-toggle:hover {
    color: var(--app-primary);
    border-color: var(--app-primary);
    background: color-mix(in srgb, var(--app-primary) 6%, transparent);
}

@media (max-width: 640px) {
    .bs-list__row { padding: 0.8rem 0.9rem; }
    .bs-stat { flex: 1 1 calc(50% - 0.3rem); min-width: 0; }
    .bs-page-head { gap: 0.9rem; }
}


/* Notas inline (ok / erro / atencao), espelhadas do Agent junto com a tela de
   manifestacoes. color-mix deriva do token de status, entao o tema escuro sai de graca. */
.bs-note {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
}
.bs-note--ok {
    background: color-mix(in srgb, var(--app-success) 14%, var(--app-surface));
    color: color-mix(in srgb, var(--app-success) 70%, var(--app-text));
}
.bs-note--err {
    background: color-mix(in srgb, var(--app-error) 14%, var(--app-surface));
    color: color-mix(in srgb, var(--app-error) 72%, var(--app-text));
}
.bs-note--warn {
    background: color-mix(in srgb, var(--app-warning) 16%, var(--app-surface));
    color: color-mix(in srgb, var(--app-warning) 70%, var(--app-text));
}

/* =====================================================================
   DANFE — POR ÚLTIMO, DE PROPÓSITO.
   No site.css do Agent este bloco é o último, e por isso vence qualquer
   regra de tabela ou painel que venha antes. Ao copiar, eu o coloquei no
   meio e anexei os blocos de painel depois — o que inverteu a cascata e
   deixou as colunas da tabela de itens espremidas, com os cabeçalhos
   quebrando na vertical e os valores virando reticências.
   Mexer daqui pra cima quebra a folha: mantenha este bloco no fim.
   ===================================================================== */

/* CSS da DANFE, espelhado do Agent — e copiado de novo para o React em
   src/web/src/pages/danfe.css (2026-10-06). Tres copias ate este Blazor sair.
   Mesmo leiaute fiscal nos tres: divergir aqui produziria DANFEs diferentes
   pro mesmo XML, e o cliente veria uma no agente e outra na web. */
/* =====================================================================
   DANFE — espelho da NF-e no leiaute do formulário padrão.
   Prefixo curto `d-` porque a folha tem MUITA célula e o HTML fica ilegível
   com nomes longos. Tudo em preto sobre branco, independente do tema.
   ===================================================================== */
.print-shell { padding: 1.25rem 1rem 2rem; background: var(--app-bg); min-height: 100vh; }

.danfe-acoes {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: 210mm;
    max-width: 100%;
    margin: 0 auto 0.9rem;
}
.danfe-dica { font-size: 0.78rem; color: var(--app-text-muted); }

.danfe {
    /* Folha A4 inteira: 210x297mm menos as margens de 5mm da @page.
       Flex em coluna para a caixa de itens esticar e ocupar o que sobrar. */
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 6.5pt;
    line-height: 1.2;
    padding: 5mm;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}
/* Nenhum bloco encolhe: quem estica é só a caixa de itens. */
.danfe > * { flex: 0 0 auto; }

/* ---------- Grade base ---------- */
.d-row {
    display: flex;
    border: 0.4mm solid #000;
    border-top: none;
    align-items: stretch;
}
.d-row:first-child { border-top: 0.4mm solid #000; }
.d-row--wrap { flex-wrap: wrap; }
.d-row--cresce { min-height: 28mm; }

.d-cell {
    flex: 1;
    padding: 0.6mm 1.2mm;
    border-left: 0.2mm solid #000;
    min-width: 0;
    overflow: hidden;
}
.d-cell:first-child { border-left: none; }
.d-cell--total { background: #ececec; }

.d-rot {
    font-size: 5pt;
    color: #222;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
}
.d-val {
    font-size: 7.5pt;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
    min-height: 3.6mm;
}
.d-val--bloco { font-weight: 400; font-size: 6.5pt; white-space: pre-wrap; }
.d-num { text-align: right; font-variant-numeric: tabular-nums; }

.d-secao {
    border: 0.4mm solid #000;
    border-top: none;
    padding: 0.7mm 1.2mm;
    font-size: 6pt;
    font-weight: 700;
    background: #ececec;
    letter-spacing: 0.06em;
}

/* ---------- Canhoto ---------- */
.d-canhoto .d-cell { padding: 1.2mm; }
.d-canhoto__nf {
    flex: 0 0 32mm;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.d-canhoto__sigla { font-size: 10pt; font-weight: 700; letter-spacing: 0.08em; }
.d-canhoto__num { font-size: 7.5pt; font-weight: 700; }

/* Linha pontilhada de destaque do canhoto, como no formulário impresso */
.d-serrilha {
    border-top: 0.3mm dashed #000;
    margin: 1.2mm 0;
}

/* ---------- Cabeçalho ---------- */
.d-emit { flex: 3; padding: 2mm 2mm 1.5mm; display: flex; flex-direction: column; justify-content: center; }
.d-emit__nome { font-size: 11pt; font-weight: 700; line-height: 1.1; margin-bottom: 1.2mm; }
.d-emit__end { font-size: 6.5pt; line-height: 1.35; }

.d-danfebox {
    flex: 0 0 38mm;
    text-align: center;
    padding: 1.5mm 1mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4mm;
}
.d-danfebox__nome { font-size: 16pt; font-weight: 700; letter-spacing: 0.08em; line-height: 1; }
.d-danfebox__sub { font-size: 5.5pt; line-height: 1.2; margin-bottom: 0.8mm; }
.d-danfebox__es {
    display: flex;
    align-items: center;
    gap: 1.2mm;
    font-size: 5.5pt;
    margin-bottom: 0.8mm;
}
.d-danfebox__esbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5mm;
    height: 4.5mm;
    border: 0.3mm solid #000;
    font-size: 7pt;
    font-weight: 700;
}
.d-danfebox__num { font-size: 8.5pt; font-weight: 700; }
.d-danfebox__fl { font-size: 6pt; }

/* ---------- Código de barras + chave ---------- */
.d-barras { flex: 3; padding: 1.2mm; display: flex; flex-direction: column; }
.d-barras__svg {
    /* O SVG é esticado na largura da célula; a altura fixa preserva a leitura óptica. */
    height: 12mm;
    margin: 0.8mm 0;
    display: block;
}
.d-barras__svg svg { display: block; width: 100%; height: 100%; }
.d-barras__rot { font-size: 5pt; text-transform: uppercase; color: #222; }
.d-barras__chave {
    font-family: "Courier New", monospace;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: -0.01em;
    word-spacing: 0.4mm;
    line-height: 1.3;
    word-break: break-all;
}
.d-barras__aviso { font-size: 5pt; margin-top: 0.8mm; line-height: 1.25; }

/* ---------- Tabela de itens ---------- */
/* Moldura elástica dos itens — é ela que empurra o rodapé para o pé da folha.
   A tabela fica encostada no topo e o vazio sobra dentro da moldura. */
.d-itens-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border: 0.4mm solid #000;
    border-top: none;
    background: #fff;
    min-height: 40mm;
}

.d-itens {
    width: 100%;
    border-collapse: collapse;
    border: none;
    background: #fff;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    table-layout: fixed;
    flex: 0 0 auto;
}
.d-itens th,
.d-itens td {
    border: 0.2mm solid #000;
    padding: 0.5mm 0.8mm;
    text-align: left;
    font-size: 5.8pt;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    background: #fff;
    color: #000;
    vertical-align: top;
    /* Só a descrição pode quebrar; as demais colunas têm largura pra caber inteiras. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d-itens th {
    background: #ececec;
    font-weight: 700;
    font-size: 5pt;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
}
.d-itens td.d-num, .d-itens th.d-num { text-align: right; }
.d-itens th.d-num { text-align: center; }
.d-itens tbody tr:hover td { background: #fff; }

/* Descrição é a única que pode ocupar mais de uma linha */
.d-itens__desc {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}
.d-itens__infad { font-size: 5.2pt; color: #444; margin-top: 0.4mm; white-space: normal; }
.d-nowrap { white-space: nowrap; }

.d-rodape {
    margin-top: 1.5mm;
    font-size: 5.5pt;
    color: #555;
    text-align: right;
}

/* ---------- Impressão ---------- */
@media print {
    @page { size: A4 portrait; margin: 5mm; }

    .print-shell { padding: 0; background: #fff; }
    .no-print, .danfe-acoes { display: none !important; }

    .danfe {
        /* A4 (297mm) menos as margens de 5mm em cima e embaixo. Preenche a folha toda:
           a moldura de itens estica e o rodapé encosta no pé da página. */
        width: auto;
        max-width: none;
        min-height: 287mm;
        margin: 0;
        padding: 0;
        box-shadow: none;
        font-size: 6.5pt;
    }

    /* Cabeçalho da tabela repete a cada folha e nenhuma linha é cortada ao meio */
    .d-itens { page-break-inside: auto; }
    .d-itens thead { display: table-header-group; }
    .d-itens tr { page-break-inside: avoid; page-break-after: auto; }

    /* Nota longa: a moldura deixa de esticar e vira altura natural, senão a última
       folha herdaria o min-height e sobraria uma página em branco. */
    .d-itens-box { min-height: 0; }

    /* Fundos cinza precisam de opt-in pra sair na impressão */
    .d-secao, .d-itens th, .d-cell--total {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* .bs-row-toggle tambem e usado em <a> (Detalhes / Manifestar) — tira o sublinhado. */
a.bs-row-toggle, a.bs-row-toggle:hover { text-decoration: none; }
a.bs-row-toggle { color: var(--app-text); }

/* =====================================================================
   DANFSe v2.0 — Documento Auxiliar da NFS-e
   Reaproveita a moldura .danfe (folha A4, sombra, impressao) e acrescenta
   a grade de campos rotulados propria do leiaute de servico.
   Copiado tambem para src/web/src/pages/danfe.css (2026-10-06): mexeu aqui,
   mexe la.
   ===================================================================== */
.danfse { font-size: 7pt; }

/* ---------- Cabecalho ---------- */
.ds-cab {
    display: flex;
    align-items: flex-start;
    gap: 3mm;
    border: 0.4mm solid #000;
    padding: 1.5mm 2mm;
}
/* Logo oficial da NFS-e. Altura fixa em mm: a impressao nao pode depender
   de como o navegador escala a imagem em px. */
.ds-cab__marca { flex: 0 0 44mm; display: flex; align-items: center; }
.ds-cab__marca img {
    height: 9mm;
    width: auto;
    max-width: 100%;
    display: block;
}
.ds-cab__titulo { flex: 1; text-align: center; }
.ds-cab__nome { font-size: 11pt; font-weight: 700; }
.ds-cab__sub { font-size: 8pt; font-weight: 600; }
.ds-cab__amb { flex: 0 0 62mm; font-size: 5.8pt; line-height: 1.45; }

/* ---------- Blocos e grade ---------- */
.ds-bloco { display: flex; border: 0.4mm solid #000; border-top: none; }
.ds-chave { flex: 1; padding: 1.5mm 2mm; min-width: 0; }
.ds-chave__num {
    font-family: "Courier New", monospace;
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 1.5mm;
    word-break: break-all;
}

.ds-qr {
    flex: 0 0 42mm;
    border-left: 0.2mm solid #000;
    padding: 1.5mm;
    text-align: center;
}
.ds-qr__box {
    width: 24mm; height: 24mm;
    margin: 0 auto 1mm;
    border: 0.3mm solid #000;
    display: flex; align-items: center; justify-content: center;
}
.ds-qr__vazio { font-size: 5pt; color: #666; line-height: 1.3; }
.ds-qr__vazio span { font-size: 4.5pt; }
.ds-qr__txt { font-size: 4.8pt; line-height: 1.3; color: #333; }

.ds-grid {
    display: grid;
    border: 0.4mm solid #000;
    border-top: none;
}
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); border: none; }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid > div {
    padding: 0.8mm 1.5mm;
    border-left: 0.2mm solid #000;
    border-top: 0.2mm solid #000;
    min-width: 0;
}
.ds-grid--3 > div { border-top: 0.2mm solid #ccc; }
.ds-grid > div:first-child,
.ds-grid--4 > div:nth-child(4n+1) { border-left: none; }

.ds-rot {
    font-size: 5.2pt;
    font-weight: 600;
    color: #1f4e79;
    line-height: 1.2;
    text-transform: none;
}
.ds-val {
    font-size: 6.8pt;
    line-height: 1.3;
    word-break: break-word;
    min-height: 3mm;
}
.ds-val--forte { font-weight: 700; font-size: 7.5pt; }
.ds-val--bloco { white-space: pre-wrap; }
.ds-destaque { background: #fff6d6; }

/* ---------- Secoes e faixas ---------- */
.ds-secao {
    border: 0.4mm solid #000;
    border-top: none;
    padding: 0.8mm 2mm;
    font-size: 6.5pt;
    font-weight: 700;
    color: #1f4e79;
    background: #eef2f7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ds-faixa {
    border: 0.4mm solid #000;
    border-top: none;
    padding: 0.9mm;
    text-align: center;
    font-size: 6pt;
    font-weight: 700;
    color: #1f4e79;
    text-transform: uppercase;
}

.ds-compl {
    border: 0.4mm solid #000;
    border-top: none;
    padding: 1.5mm 2mm;
    font-size: 6pt;
    line-height: 1.45;
    min-height: 14mm;
    white-space: pre-wrap;
}

.ds-rodape { margin-top: 1.5mm; font-size: 5.5pt; color: #555; text-align: right; }

@media print {
    .ds-secao, .ds-destaque {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* Campo que ignora o teto de largura dos inputs do formulario. Veio do Agent junto com a
   tela do Assistente Tributario, onde o textarea da pergunta ocupa a linha inteira. */
.input-wide,
input.input-wide,
textarea.input-wide {
    max-width: none;
}

/* Portado da /matching do Agent em 2026-08-13 junto com o card. Copiado e nao
   reescrito de proposito: o Alex pediu a MESMA tela, e leiaute igual pede regra
   igual -- duas versoes do card divergiriam na primeira alteracao de uma delas. */
/* =====================================================================
   Card de matching — resumo rico do documento
   Densidade alta de proposito: a ideia e o operador decidir sem abrir detalhes.
   ===================================================================== */
.mt-pn {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.55rem;
}
.mt-pn__nome {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-title);
    line-height: 1.2;
}
.mt-pn__fantasia { font-size: 0.82rem; color: var(--app-text-muted); }

/* Linha de dados separada por bullets, quebrando sozinha quando falta largura */
.mt-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--app-text);
}
.mt-linha > span { display: inline-flex; align-items: baseline; gap: 0.28rem; min-width: 0; }
.mt-linha strong {
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
}
.mt-linha--fraca { font-size: 0.78rem; color: var(--app-text-muted); }
.mt-linha--fraca > span { color: var(--app-text); }

/* ---- Itens ---- */
.mt-itens {
    margin-top: 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-sm);
    background: var(--app-surface-alt);
    overflow: hidden;
}
.mt-itens__cab {
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
}
.mt-item {
    display: grid;
    grid-template-columns: 6.5rem 1fr 5.5rem 6rem;
    gap: 0.5rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
    align-items: baseline;
    border-bottom: 1px solid var(--app-border);
}
.mt-item:last-child { border-bottom: none; }
.mt-item__qtd { color: var(--app-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-item__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-item__ncm { color: var(--app-text-muted); font-family: var(--font-mono); font-size: 0.7rem; }
.mt-item__val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mt-itens__mais {
    padding: 0.28rem 0.55rem;
    font-size: 0.74rem;
    color: var(--app-text-muted);
    font-style: italic;
}
@media (max-width: 760px) {
    .mt-item { grid-template-columns: 1fr auto; }
    .mt-item__ncm { display: none; }
}

/* ---- Pista de numero de pedido garimpada do texto livre ---- */
.mt-pedido {
    margin-top: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface));
    border: 1px solid color-mix(in srgb, var(--app-primary) 35%, var(--app-border));
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.mt-pedido__num {
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
}
.mt-pedido__nota { color: var(--app-text-muted); font-size: 0.72rem; }

/* ---- infCpl recolhido ---- */
.mt-infcpl { margin-top: 0.45rem; font-size: 0.78rem; }
.mt-infcpl > summary {
    cursor: pointer;
    color: var(--app-primary);
    font-size: 0.76rem;
    user-select: none;
}
.mt-infcpl__texto {
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem;
    background: var(--app-surface-alt);
    border-left: 3px solid var(--app-border-strong);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    font-size: 0.76rem;
    line-height: 1.5;
    max-height: 11rem;
    overflow-y: auto;
}
/* Acento roxo do AI Assist — precisa de par claro/escuro, senao no tema escuro
   o roxo fechado some no fundo. Usado no modal de detalhes e nos cards. */