/* =============================================================================
   INTEDATA — CSS da casa (complementa o IntedataTheme do MudBlazor)
   Só o que o tema do MudBlazor não cobre: rail navy fixo, splash, canvas,
   borda do topbar e a barra do item de navegação ativo.
   ============================================================================= */

/* =============================================================================
   FUNDAÇÃO DE TOKENS (espelha o styles.css do design system)
   O tema MudBlazor já cobre os componentes; estes tokens dão à CSS da casa o
   mesmo vocabulário do design (escalas, espaçamento, raio, elevação, superfícies).
   Claro em :root; escuro sob .mud-theme-dark (classe que o MudBlazor aplica ao
   <body>) e [data-theme="dark"] (compatibilidade com os mockups).
   ============================================================================= */
:root {
    /* App-specific: rail/login/splash sempre navy (não há token equivalente no design) */
    --id-navy: #0C1E2E;
    --id-navy-2: #071A28;

    /* ---------- Marca / primary (Intedata Blue) ---------- */
    --id-primary-50:  #EBF6FB;
    --id-primary-100: #D1EAF7;
    --id-primary-200: #A3D5EE;
    --id-primary-300: #6BBCE4;
    --id-primary-400: #33A2D9;
    --id-primary-500: #008BD0;
    --id-primary-600: #0178B5;
    --id-primary-700: #036699;
    --id-primary-800: #04527C;
    --id-primary-900: #053F60;
    --id-primary: var(--id-primary-500);
    --id-on-primary: #FFFFFF;

    /* ---------- Secondary (slate / graphite) ---------- */
    --id-secondary-50:  #F0F1F2;
    --id-secondary-100: #DCDFE1;
    --id-secondary-200: #BABEC4;
    --id-secondary-300: #8F97A0;
    --id-secondary-400: #656F7C;
    --id-secondary-500: #3E4B5B;
    --id-secondary-600: #35414F;
    --id-secondary-700: #2D3744;
    --id-secondary-800: #242D38;
    --id-secondary-900: #1A222C;
    --id-secondary: var(--id-secondary-500);
    --id-on-secondary: #FFFFFF;

    /* ---------- Neutros (cool gray) ---------- */
    --id-neutral-50:  #F3F4F6;
    --id-neutral-100: #E3E6EA;
    --id-neutral-200: #C7CDD5;
    --id-neutral-300: #A5AEBC;
    --id-neutral-400: #8390A2;
    --id-neutral-500: #64748B;
    --id-neutral-600: #546276;
    --id-neutral-700: #445060;
    --id-neutral-800: #333C4A;
    --id-neutral-900: #222933;

    /* ---------- Semânticos / feedback ---------- */
    --id-success-50: #EEF7F2; --id-success-100: #D9EDE1; --id-success-500: #2E9B5B; --id-success-600: #288A51; --id-success-700: #227846; --id-success: var(--id-success-500);
    --id-warning-50: #FDF7EB; --id-warning-100: #F9EED2; --id-warning-500: #E0A106; --id-warning-600: #C88F05; --id-warning-700: #B07E05; --id-warning: var(--id-warning-500);
    --id-error-50:   #FCF0F0; --id-error-100:   #F8DEDE; --id-error-500:   #D64545; --id-error-600:   #BD3C3C; --id-error-700:   #A43333; --id-error:   var(--id-error-500);
    --id-info-50:    #ECF8FB; --id-info-100:    #D4EFF5; --id-info-500:    #0EA5C9; --id-info-600:    #0C91B1; --id-info-700:    #0B7D99; --id-info:    var(--id-info-500);

    /* ---------- Paleta categórica (data viz / segmentos) ---------- */
    --id-cat-1: #008BD0; --id-cat-2: #15B5A6; --id-cat-3: #7C6BE6; --id-cat-4: #E8A33D;
    --id-cat-5: #E26D9B; --id-cat-6: #2FB57C; --id-cat-7: #5B74E0; --id-cat-8: #E76A5B;

    /* ---------- Superfícies & texto (claro) ---------- */
    --id-background:      #F5F7FA;
    --id-surface:         #FFFFFF;
    --id-surface-2:       #F8FAFC;
    --id-surface-inverse: #1A222C;
    --id-border:          #E2E7EC;
    --id-border-strong:   #CBD3DC;
    --id-divider:         #EDF0F3;

    --id-text-primary:    #1A222C;
    --id-text-secondary:  #51606F;
    --id-text-disabled:   #9AA6B2;
    --id-text-on-color:   #FFFFFF;

    --id-action-hover:    rgba(0, 139, 208, 0.08);
    --id-action-selected: rgba(0, 139, 208, 0.12);
    --id-action-disabled-bg: #EEF1F4;
    --id-overlay:         rgba(16, 26, 38, 0.48);

    --id-muted:            #F4F6F9;
    --id-muted-foreground: #6B7886;
    --id-ring:             rgba(0, 139, 208, 0.40);
    --id-card:             #FFFFFF;

    /* ---------- Espaçamento (base 4px) ---------- */
    --id-space-1: 4px;  --id-space-2: 8px;  --id-space-3: 12px; --id-space-4: 16px;
    --id-space-5: 20px; --id-space-6: 24px; --id-space-8: 32px; --id-space-10: 40px;
    --id-space-12: 48px; --id-space-16: 64px; --id-space-20: 80px;

    /* ---------- Raios ---------- */
    --id-radius-xs: 2px; --id-radius-sm: 4px; --id-radius-md: 6px; --id-radius-lg: 10px;
    --id-radius-xl: 16px; --id-radius-pill: 999px; --id-radius-card: 12px;
    --id-radius-default: var(--id-radius-md);

    /* ---------- Elevação ---------- */
    --id-elevation-none: none;
    --id-elevation-low:  0 1px 2px rgba(16, 24, 40, 0.05);
    --id-elevation-med:  0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px -1px rgba(16, 24, 40, 0.08);
    --id-elevation-high: 0 12px 28px rgba(16, 24, 40, 0.14), 0 8px 10px -6px rgba(16, 24, 40, 0.10);

    /* ---------- Tipografia ---------- */
    --id-font-sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
    --id-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
    --id-weight-light: 300; --id-weight-regular: 400; --id-weight-medium: 500;
    --id-weight-semibold: 600; --id-weight-bold: 700;

    /* ---------- Layout ---------- */
    --id-appbar-height: 64px;
    --id-drawer-width: 264px;
    --id-drawer-mini: 72px;
    --id-content-max: 1440px;
}

/* ---------- Tema escuro (derivado da marca; sem preto puro, contraste AA) ---------- */
.mud-theme-dark,
[data-theme="dark"] {
    --id-background:      #051522;
    --id-surface:         #0A2030;
    --id-surface-2:       #0F2A3D;
    --id-surface-inverse: #EAF4FA;
    --id-border:          #163348;
    --id-border-strong:   #21455F;
    --id-divider:         #0E2536;

    --id-text-primary:    #EAF4FA;
    --id-text-secondary:  #93AFC2;
    --id-text-disabled:   #56707F;
    --id-text-on-color:   #FFFFFF;

    --id-primary:         #33A2D9;
    --id-on-primary:      #04253A;

    --id-action-hover:    rgba(51, 162, 217, 0.12);
    --id-action-selected: rgba(51, 162, 217, 0.18);
    --id-action-disabled-bg: #1C2630;
    --id-overlay:         rgba(6, 11, 16, 0.64);

    --id-muted:            #0E2536;
    --id-muted-foreground: #8AA6BA;
    --id-ring:             rgba(51, 162, 217, 0.45);
    --id-card:             #0A2030;

    --id-cat-1: #33A2D9; --id-cat-2: #2BC6B5; --id-cat-3: #9384EE; --id-cat-4: #EEB454;
    --id-cat-5: #ED85AC; --id-cat-6: #45C58C; --id-cat-7: #7B8FEA; --id-cat-8: #ED8273;

    --id-elevation-low:  0 1px 2px rgba(0, 0, 0, 0.40);
    --id-elevation-med:  0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
    --id-elevation-high: 0 12px 28px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

html, body {
    font-family: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
}

/* ---------- Splash (pré-boot, em index.html) ---------- */
.id-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--id-navy);
    color: #fff;
    z-index: 3000;
}
.id-splash-text { margin-top: 24px; opacity: .8; }

/* ---------- Loader da marca (design system: Loading · Marca) ----------
   Ícone iD envolto pelo anel de progresso concêntrico. Usado no splash
   pré-boot e, em runtime, pelo componente BrandLoader.razor. */
.brand-loader { display: inline-grid; place-items: center; }
.brand-loader > * { grid-area: 1 / 1; }
.brand-loader .bl-ring { display: block; width: 100%; height: 100%; animation: id-spin 1.15s linear infinite; }
.brand-loader .bl-ring circle.track { stroke: var(--mud-palette-lines-default, rgba(0, 0, 0, .12)); opacity: .6; }
.brand-loader .bl-ring circle.ind { stroke: var(--id-primary); stroke-linecap: round; stroke-dasharray: 150; stroke-dashoffset: 110; }
.brand-loader .bl-mark { width: 46%; height: 46%; object-fit: contain; }
.ld-94 { width: 94px; height: 94px; }
.ld-64 { width: 64px; height: 64px; }
.ld-40 { width: 40px; height: 40px; }
@keyframes id-spin { to { transform: rotate(360deg); } }
/* Ícone em rotação contínua reutilizável (ex.: status "Processando" da importação de acervo). */
.id-spin { animation: id-spin 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .brand-loader .bl-ring { animation-duration: 2.4s; } .id-spin { animation-duration: 2.4s; } }

/* Conteúdo centralizado do overlay (loader + rótulo). A cor do rótulo segue o tema
   (clara no tema escuro, escura no tema claro) para contrastar com o scrim correspondente. */
.brand-loader-overlay { display: grid; place-items: center; }
.brand-loader-overlay .bl-label { margin-top: 16px; font-weight: 500; font-size: 13.5px; color: var(--mud-palette-text-primary); text-align: center; }

/* No splash (sobre o navy) o anel de fundo é branco translúcido */
.id-splash .brand-loader .bl-ring circle.track { stroke: rgba(255, 255, 255, .25); opacity: 1; }

/* ---------- Rail navy (MudDrawer Class="id-drawer") — sempre navy, claro e escuro ---------- */
.mud-drawer.id-drawer,
.mud-drawer.id-drawer .mud-drawer-content {
    background-color: var(--id-navy) !important;
    color: #9DB4C6;
}
/* Empurra o trocador de tenant para o rodapé do rail */
.id-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Barra do item de navegação ativo */
.id-drawer .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--id-primary-400);
}
.id-drawer .mud-nav-link { position: relative; }
.id-drawer .mud-nav-link { color: #9DB4C6; }
.id-drawer .mud-nav-link:hover { background-color: rgba(255, 255, 255, .06); color: #EAF3FA; }
.id-drawer .mud-nav-link.active {
    background-color: rgba(51, 162, 217, .18);
    color: #fff;
}
.id-drawer .mud-nav-link .mud-nav-link-icon { color: inherit; }
.id-drawer .mud-nav-group .mud-nav-link { color: #9DB4C6; }

/* Rótulo de seção do menu (Principal / Operação / Sistema) */
.id-nav-section {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #4F6B81;
    padding: 18px 16px 9px;
    white-space: nowrap;
    overflow: hidden;
}
/* Rail recolhido (mini): os rótulos de seção não cabem em 72px — viram um filete divisor */
.id-drawer.mud-drawer--closed .id-nav-section {
    height: 0;
    padding: 0;
    margin: 12px 18px;
    color: transparent;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

/* Cabeçalho da marca no topo do rail */
.id-brand {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 16px;
}
.id-brand img { height: 28px; }

/* ---------- Trocador de tenant (rodapé do rail) ---------- */
.id-tenant { padding: 12px; margin-top: auto; }
.id-tenant-current {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    transition: background .12s;
}
.id-tenant-current:hover { background: rgba(255, 255, 255, .10); }
/* Avatar redondo do tenant: a imagem preenche todo o avatar (object-fit: cover) */
.id-tenant-avatar { flex-shrink: 0; background: #fff; }
.id-tenant-avatar .mud-image { width: 100%; height: 100%; }
.id-brasao { background: #fff; border-radius: 4px; padding: 2px; flex-shrink: 0; }
.id-tenant-info { flex: 1; min-width: 0; }
.id-tenant-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #EAF3FA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.id-tenant-meta { font-size: 11px; color: #7F98AC; }
.id-tenant-mini .id-tenant-current { justify-content: center; padding: 6px; }

/* ---------- Topbar (MudAppBar Class="id-topbar") ---------- */
.mud-appbar.id-topbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* ---------- Canvas (largura máxima de conteúdo) ---------- */
.id-canvas {
    max-width: 1440px;
    margin-inline: auto;
    width: 100%;
}

/* ---------- Busca global no topbar (design: .tb-search — pílula) ---------- */
.id-search { max-width: 380px; }
.id-search.mud-input-control .mud-input-outlined-border { border-radius: var(--id-radius-pill); }
.id-search.mud-input-control .mud-input.mud-input-outlined { border-radius: var(--id-radius-pill); }

/* ---------- Texto digitado em inputs/selects: peso REGULAR ----------
   O mockup usa peso regular (400) no valor dos campos; sem esta regra o texto
   preenchido renderiza mais pesado ("negrito") em todos os formulários. */
.mud-input-slot,
.mud-input-root input,
.mud-input-root textarea,
.mud-select-input .mud-input-slot { font-weight: var(--id-weight-regular) !important; }

/* ---------- StatCard / KPI (design: .kpi) ---------- */
.id-statcard { border-radius: 12px; }
.id-statcard-icon { width: 40px; height: 40px; border-radius: var(--id-radius-md, 8px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.id-statcard-value { font-weight: 600; letter-spacing: -.4px; line-height: 1; }
.id-stat-primary { background: rgba(0, 139, 208, .12); color: var(--mud-palette-primary); }
.id-stat-success { background: rgba(46, 155, 91, .16); color: var(--mud-palette-success); }
.id-stat-warning { background: rgba(224, 161, 6, .18); color: var(--mud-palette-warning); }
.id-stat-error   { background: rgba(214, 69, 69, .14); color: var(--mud-palette-error); }
.id-stat-info    { background: rgba(2, 136, 209, .14); color: var(--mud-palette-info); }
.id-stat-secondary { background: rgba(143, 151, 160, .20); color: var(--mud-palette-secondary); }
.id-stat-default { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }

/* Chip de edição extraordinária: destaque em peso (o âmbar vem do Color.Warning). */
.id-chip-extra { font-weight: 600; }

/* ---------- Catálogo de relatórios (design: .rcard / .cat-empty) ----------
   O card inteiro é a âncora para a tela do relatório: o link não sublinha nem herda a cor de
   link, e o cartão ocupa toda a altura da coluna para os pares da grade ficarem alinhados. */
.id-cat-grid { max-width: 940px; }
.id-rcard-link, .id-rcard-link:hover { display: block; height: 100%; text-decoration: none; color: inherit; }
.id-rcard { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 12px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.id-rcard-link:hover .id-rcard { transform: translateY(-2px); box-shadow: var(--mud-elevation-4); border-color: var(--mud-palette-primary); }
.id-rcard-link:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 12px; }
.id-rcard-icon { width: 52px; height: 52px; }
.id-rcard-titulo { font-weight: 600; letter-spacing: -.2px; }
.id-rcard-descricao { flex: 1; }
/* O peso 600 precisa alcançar o <p> do MudText: a regra de tipografia do Mud fixa 400 nele e
   venceria a herança do contêiner. */
.id-rcard-abrir, .id-rcard-abrir .mud-typography { color: var(--mud-palette-primary); font-weight: 600; }
.id-rcard-link:hover .id-rcard-abrir .mud-icon-root { transform: translateX(2px); transition: transform .15s; }
.id-cat-vazio { max-width: 940px; border-style: dashed; border-radius: 12px; }

/* ---------- Runners de relatório (design: .runner-grid / .pcard / .result) ---------- */
.id-runner-grid { max-width: 1240px; }
.id-param-cartao { border-radius: 12px; overflow: hidden; position: sticky; top: 0; }
.id-param-cabecalho { padding: 16px 20px; border-bottom: 1px solid var(--mud-palette-divider); }
.id-param-cabecalho .id-statcard-icon { width: 38px; height: 38px; }
.id-param-corpo { padding: 20px; }
.id-param-acoes { padding: 16px 20px; border-top: 1px solid var(--mud-palette-divider); background: var(--mud-palette-background-grey); }
.id-res-painel { border-radius: 12px; overflow: hidden; }
.id-res-cabecalho { padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-divider); background: var(--mud-palette-background-grey); }
.id-res-painel .id-res-icone { width: 66px; height: 66px; background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }
.id-res-painel .id-res-icone-erro { background: rgba(214, 69, 69, .14); color: var(--mud-palette-error); }
.id-doc-escolhido { padding: 13px 14px; border-radius: 8px; border-color: var(--mud-palette-primary); background: var(--mud-palette-action-default-hover); }
/* Seletor descendente para vencer o .mud-avatar (mesma especificidade, ordem de folha a favor dele). */
.id-cat-vazio .id-cat-vazio-icone { width: 66px; height: 66px; background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }

/* ---------- Faixa de KPIs do painel (Edições/Documentos) ----------
   Colunas de largura igual que preenchem o card para qualquer quantidade
   (3 KPIs -> 33%, 4 KPIs -> 25%), resolvendo o "quadrante vazio" do grid de 12 colunas. */
.id-kpi-strip { display: flex; flex-wrap: wrap; }
.id-kpi { flex: 1 1 50%; box-sizing: border-box; padding: 16px; border-top: 1px solid var(--mud-palette-divider); border-right: 1px solid var(--mud-palette-divider); }
.id-kpi-strip > .id-kpi:last-child { border-right: none; }
@media (min-width: 600px) { .id-kpi { flex-basis: 0; min-width: 0; } }

/* ---------- Rosca de situação do painel (MudChart Donut) ---------- */
.id-donut-body { display: flex; align-items: center; justify-content: center; padding: 18px 16px; }
.id-donut-body .mud-chart-legend-item { padding: 4px 0; }
.id-donut-foot { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--mud-palette-divider); font: 500 13px/1.35 var(--id-font-sans); color: var(--mud-palette-text-secondary); }
.id-donut-foot b { font-weight: 700; color: var(--mud-palette-text-primary); }
.id-donut-foot .id-donut-foot-txt { flex: 1; min-width: 0; }

.id-rank-badge { width: 23px; height: 23px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 700 11.5px/1 var(--id-font-sans); background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }
.id-rank-badge-topo { background: rgba(2, 136, 209, .14); color: var(--mud-palette-info); }

/* ---------- Bolinha de severidade da pendência (design: .pdot) ---------- */
.id-pdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Linha do tempo da atividade (design: .act) ---------- */
.id-act { display: flex; gap: 13px; padding: 11px 18px; }
.id-act-rail { display: flex; flex-direction: column; align-items: center; width: 18px; flex-shrink: 0; }
.id-act-node { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--mud-palette-surface); box-shadow: 0 0 0 1.5px currentColor; margin-top: 4px; z-index: 1; }
.id-act-line { flex: 1; width: 2px; background: var(--mud-palette-lines-default); margin-top: 2px; }
.id-act:last-child .id-act-line { display: none; }
.id-act-body { flex: 1; min-width: 0; padding-bottom: 8px; }
.id-act-text { font: 500 13px/1.4 var(--id-font-sans); }
.id-act-text b { font-weight: 600; }
.id-act-time { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 3px; }

/* ---------- Seção de formulário com cabeçalho numerado (design: .sect) ---------- */
.id-formsection { border-radius: 12px; overflow: hidden; }
.id-formsection-head { display: flex; align-items: center; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--mud-palette-divider); }
.id-formsection-num { width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 139, 208, .12); color: var(--mud-palette-primary); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }
.id-formsection-title { font-weight: 600; font-size: 15px; line-height: 1.2; }
.id-formsection-sub { font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.id-formsection-body { padding: 20px; }

/* ---------- Grid de formulário (principal + aside) e action bar (design: .form-grid/.actionbar) ---------- */
.id-formgrid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.id-formgrid-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
.id-actionbar { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; box-shadow: var(--id-elevation-med); padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
@media (max-width: 1100px) { .id-formgrid { grid-template-columns: 1fr; } .id-formgrid-aside { position: static; } }

/* ---------- Célula de usuário (avatar + nome + e-mail) e telefone mono (design: .cust) ---------- */
.id-usercell { display: inline-flex; align-items: center; gap: 11px; }
.id-usercell-name { font-weight: 500; line-height: 1.25; }
.id-usercell-mail { font-size: 12px; color: var(--mud-palette-text-secondary); }
.id-mono { font-family: var(--id-font-mono); font-size: 12.5px; color: var(--mud-palette-text-secondary); }

/* ---------- Matriz de permissões por recurso (design: cards) ----------
   Um card por recurso, exibindo apenas as ações que existem para ele como chips-toggle
   que quebram linha — sem células "—" e sem estouro de largura da tabela recurso × ação. */
.id-matrix-ic { width: 26px; height: 26px; border-radius: var(--id-radius-sm, 6px); background: rgba(0, 139, 208, .12); color: var(--mud-palette-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.id-permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.id-permcard { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--id-radius-card, 12px); background: var(--mud-palette-surface); padding: 12px 14px 14px; }
.id-permcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.id-permcard-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.id-permcard-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.id-permcard-count { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.id-permchips { display: flex; flex-wrap: wrap; gap: 7px; }
.id-permchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--id-radius-pill, 999px); background: transparent; color: var(--mud-palette-text-secondary); font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.id-permchip:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.id-permchip .mud-icon-root { font-size: 15px; }
.id-permchip.is-on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text, #fff); }
.id-permchip.is-on:hover { color: var(--mud-palette-primary-text, #fff); opacity: .92; }

/* ---------- Linha de permissão avulsa (design: .prow) ---------- */
.id-prow { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--id-radius-md, 8px); margin-bottom: 7px; }
.id-prow-name { flex: 1; font-size: 13.5px; }
.id-pgroup-head { font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--mud-palette-text-secondary); padding: 14px 4px 8px; }

/* ---------- Login (split: arte à esquerda, formulário à direita) ---------- */
.id-login {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
}
.id-login-art {
    position: relative;
    /* Camada 1: imagem temática do produto (design). Camada 2 (fallback): gradiente navy
       — mostrado automaticamente caso a imagem não exista. */
    background:
        url("../images/produtos/login-diario-oficial.png") center / cover no-repeat,
        radial-gradient(120% 120% at 0% 0%, #0F2A3D 0%, var(--id-navy) 55%, var(--id-navy-2) 100%);
    background-color: var(--id-navy);
    display: flex;
    align-items: stretch;
    padding: 48px 52px;
    overflow: hidden;
}
.id-login-art::after {
    /* Scrim: escurece a base para dar contraste ao texto sobre a imagem (design: .scrim) */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 37, 58, .25) 0%, rgba(4, 37, 58, .05) 38%, rgba(4, 37, 58, .78) 100%);
    pointer-events: none;
}
/* marca no topo, discurso + rodapé na base (design: login mockup) */
.id-login-art-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.id-login-eyebrow { font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-bottom: 12px; text-shadow: 0 1px 8px rgba(4, 18, 30, .4); }
.id-login-product { font-weight: 600; font-size: 44px; line-height: 1.08; letter-spacing: -1px; color: #fff; text-shadow: 0 2px 14px rgba(4, 18, 30, .5); }
.id-login-description { max-width: 42ch; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .9); margin-top: 14px; text-shadow: 0 1px 8px rgba(4, 18, 30, .4); }
.id-login-foot { font-size: 12.5px; color: rgba(255, 255, 255, .78); margin-top: 24px; text-shadow: 0 1px 8px rgba(4, 18, 30, .4); }
.id-login-art .id-login-mark { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3)); }

/* Wordmark gov.br — clareia no tema escuro p/ contraste */
.id-gov-g { color: #1351B4; } .id-gov-b { color: #168821; }
.mud-theme-dark .id-gov-g, [data-theme="dark"] .id-gov-g { color: #5B8DEF; }
.mud-theme-dark .id-gov-b, [data-theme="dark"] .id-gov-b { color: #3FBF6A; }
.id-login-form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--mud-palette-background);
}
.id-login-toggle { position: absolute; top: 20px; right: 24px; z-index: 2; }
.id-login-card { padding: 8px 4px; background: transparent; }
.id-login-legal {
    text-align: center;
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
    margin-top: 26px;
    line-height: 1.5;
}
.id-login-or {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    margin: 20px 0;
    gap: 12px;
}
.id-login-or::before,
.id-login-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mud-palette-divider);
}

@media (max-width: 960px) {
    .id-login { grid-template-columns: 1fr; }
    .id-login-art { display: none; }
}

/* =============================================================================
   PORTAL PÚBLICO (vitrine anônima do Diário Oficial — mockup "Portal Publico")
   Cabeçalho de marca (faixa gov.br + barra do órgão), hero com marca d'água,
   lista de edições com widget de calendário e rodapé institucional. Espelha o
   mockup do Claude Design; usa os tokens da casa (claro/escuro via .mud-theme-dark).
   ============================================================================= */

/* faixa de acessibilidade gov.br */
.id-portal-acc { background: #0B2E13; color: #CDE9D3; font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 18px; padding: 7px 24px; }
.id-portal-acc .id-portal-acc-right { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.id-portal-acc .id-portal-gov { font-weight: 700; font-size: 13px; }
.id-portal-acc .id-portal-gov .g { color: #7FB0F2; } .id-portal-acc .id-portal-gov .b { color: #5FD07F; }

/* barra do órgão (brasão + nome + navegação) */
.id-portal-bar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--mud-palette-surface); border-bottom: 1px solid var(--mud-palette-lines-default); position: sticky; top: 0; z-index: 5; }
.id-portal-crest { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #2F7DBB, #1F5C8C); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex-shrink: 0; overflow: hidden; }
.id-portal-crest .mud-image, .id-portal-crest img { width: 100%; height: 100%; object-fit: cover; }

/* casca em coluna: fixa o rodapé na base do viewport mesmo com pouco conteúdo.
   O zoom (acessibilidade) é aplicado por uma variável CSS definida no <html>. */
.id-portal-shell { display: flex; flex-direction: column; min-height: 100vh; zoom: var(--id-portal-zoom, 1); }
.id-portal-shell .id-portal-main { flex: 1 0 auto; }

/* faixa gov.br: botões de acessibilidade / alto contraste / mapa do site */
.id-portal-acc-btn { border: none; background: none; color: inherit; font: 500 11px/1 var(--id-font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 4px; }
.id-portal-acc-btn:hover { background: rgba(255, 255, 255, .12); }
.id-portal-acc-btn.on { background: rgba(255, 255, 255, .18); color: #fff; }
.id-portal-acc-sm { position: relative; display: inline-flex; }
.id-portal-sitemap-scrim { position: fixed; inset: 0; z-index: 29; }
.id-portal-sitemap { position: absolute; right: 0; top: calc(100% + 6px); width: 290px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--id-radius-md); box-shadow: var(--id-elevation-high); overflow: hidden; z-index: 30; color: var(--mud-palette-text-primary); }
.id-portal-sitemap-h { padding: 11px 15px; border-bottom: 1px solid var(--mud-palette-divider); font: 600 11px/1 var(--id-font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.id-portal-sitemap a { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-bottom: 1px solid var(--mud-palette-divider); cursor: pointer; font: 500 13px/1.3 var(--id-font-sans); color: var(--mud-palette-text-primary); text-decoration: none; }
.id-portal-sitemap a:last-child { border-bottom: none; }
.id-portal-sitemap a:hover { background: var(--id-action-hover); }
.id-portal-sitemap a .mud-icon-root { color: var(--mud-palette-primary); }
.id-portal-sitemap a .sub { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 2px; font-weight: 400; }

/* página de Ajuda (central de ajuda) */
.id-help-hero { background: var(--id-primary-700); color: #fff; padding: 44px 24px 48px; position: relative; overflow: hidden; }
.id-help-hero::after { content: "help"; font-family: "Material Symbols Rounded"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 190px; opacity: .09; line-height: 1; pointer-events: none; }
.id-help-hero-in { position: relative; z-index: 1; }
/* breadcrumb sobre o hero azul: todos os itens/links/separadores em branco legível */
.id-portal-crumbs-light, .id-portal-crumbs-light * { color: rgba(255, 255, 255, .9) !important; }
.id-portal-crumbs-light a:hover { color: #fff !important; }
.id-help-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.id-help-num { width: 30px; height: 30px; border-radius: 50%; background: var(--mud-palette-primary); color: #fff; font: 700 14px/1 var(--id-font-sans); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.id-help-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .id-help-grid { grid-template-columns: 1fr; } .id-help-side { position: static; } }

/* hero / landing */
.id-portal-hero { background: var(--id-primary-700); color: #fff; padding: 54px 24px 64px; position: relative; overflow: hidden; }
.id-portal-hero::after { content: "menu_book"; font-family: "Material Symbols Rounded"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 230px; opacity: .09; line-height: 1; pointer-events: none; }
.id-portal-hero-in { position: relative; z-index: 1; }

/* hero: kicker (pílula) e CTAs em alto contraste sobre o fundo azul */
.id-portal-hero .id-portal-kicker.mud-chip { background: rgba(255, 255, 255, .16); color: #fff; }
.id-portal-hero .id-portal-kicker.mud-chip .mud-icon-root { color: #fff; }
.id-portal-hero .id-portal-cta-solid.mud-button-root { background: #fff; color: var(--id-primary-700); }
.id-portal-hero .id-portal-cta-solid.mud-button-root:hover { background: rgba(255, 255, 255, .9); }
.id-portal-hero .id-portal-cta-ghost.mud-button-root { background: rgba(255, 255, 255, .14); color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.id-portal-hero .id-portal-cta-ghost.mud-button-root:hover { background: rgba(255, 255, 255, .24); }

.id-ver-hero { background: var(--id-primary-700); color: #fff; padding: 38px 24px 44px; position: relative; overflow: hidden; }
.id-ver-hero::after { content: "qr_code_2"; font-family: "Material Symbols Rounded"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 210px; opacity: .10; line-height: 1; pointer-events: none; }
.id-ver-hero-in { position: relative; z-index: 1; }
.id-ver-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.id-ver-fact { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--id-radius-md); padding: 9px 13px; }
.id-ver-fact .mud-icon-root { opacity: .85; }
.id-ver-fact-l { display: block; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: rgba(255, 255, 255, .93); }
.id-ver-fact-v { display: block; font: 600 13px/1.2 var(--id-font-sans); margin-top: 3px; }
.id-ver-fact .id-mono { color: inherit; }
.id-ver-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin: 26px 0 44px; }
.id-ver-grid .mud-paper, .id-ver-grid .d-flex, .id-ver-grid .mud-stack { min-width: 0; }
@media (max-width: 900px) { .id-ver-grid { grid-template-columns: minmax(0, 1fr); } }

.id-sig-ver-link { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 11px 13px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); border-radius: var(--id-radius-md); font: 600 13px/1.2 var(--id-font-sans); color: var(--mud-palette-primary); text-decoration: none; }
.id-sig-ver-link:hover { background: var(--id-action-hover); text-decoration: none; }
.id-sig-ver-link .id-sig-ver-chev { margin-left: auto; color: var(--mud-palette-text-disabled); }
.id-sig-ver-link:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.id-alertas-sec { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: center; background: var(--id-primary-700); color: #fff; border-radius: var(--id-radius-lg); box-shadow: var(--id-elevation-med); padding: 30px 32px; margin: 24px 0 44px; position: relative; overflow: hidden; }
.id-alertas-sec::after { content: "notifications_active"; font-family: "Material Symbols Rounded"; position: absolute; left: 38%; top: 50%; transform: translateY(-50%); font-size: 180px; opacity: .09; line-height: 1; pointer-events: none; }
.id-alertas-in { position: relative; z-index: 1; }
.id-alertas-kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--id-font-sans); letter-spacing: .6px; text-transform: uppercase; background: rgba(255, 255, 255, .15); padding: 7px 12px; border-radius: var(--id-radius-pill); }
.id-alertas-titulo { font-weight: 700; letter-spacing: -.4px; margin: 14px 0 0; max-width: 22ch; }
.id-alertas-sub { color: rgba(255, 255, 255, .9); margin: 11px 0 0; max-width: 44ch; }
.id-alertas-pts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.id-alertas-pt { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); padding: 6px 11px; border-radius: var(--id-radius-pill); }
.id-alertas-card { position: relative; z-index: 1; border-radius: var(--id-radius-lg); box-shadow: var(--id-elevation-high); color: var(--mud-palette-text-primary); }
@media (max-width: 900px) {
    .id-alertas-sec { grid-template-columns: minmax(0, 1fr); padding: 24px; }
    .id-alertas-sec::after { display: none; }
}

.id-alerta-landing { display: flex; align-items: center; justify-content: center; padding: 62px 24px; min-height: 540px; }
.id-alerta-card { max-width: 560px; width: 100%; text-align: center; border-radius: var(--id-radius-lg); }
.id-alerta-ic { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.id-alerta-ic .mud-icon-root { font-size: 40px; }
.id-alerta-ic-ok { background: var(--id-success-50); color: var(--id-success-600); }
.id-alerta-ic-aviso { background: var(--id-warning-50); color: var(--id-warning-600); }
.id-alerta-ic-erro { background: var(--id-error-50); color: var(--id-error-600); }
.id-alerta-ic-neutro { background: var(--id-muted); color: var(--mud-palette-text-secondary); }
.id-alerta-spin { display: block; margin: 0 auto 22px; }
.id-alerta-titulo { font-weight: 700; letter-spacing: -.5px; font-size: 1.125rem; }
.id-alerta-sub { margin-top: 14px; line-height: 1.7; }
.id-alerta-acoes { margin-top: 26px; flex-wrap: wrap; }
.id-alerta-nota { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mud-palette-divider); line-height: 1.6; }

/* barra de filtros da lista: alinhamento dos campos + placeholder legível */
.id-portal-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
/* neutraliza margens verticais que o MudBlazor aplica de forma diferente entre
   TextField/DatePicker/NumericField — sem isso os campos desalinham alguns px */
.id-portal-filtros > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* o MudDatePicker embrulha o input num .mud-picker mais alto (52px) e dá margin-top:8px
   ao controle interno — isso o deixava ~2px abaixo dos demais. Igualamos a 40px. */
.id-portal-filtros .mud-picker { height: 40px; }
.id-portal-filtros .mud-picker .mud-input-control { margin-top: 0 !important; }
/* os campos crescem para ocupar toda a largura da linha (busca leva a maior fatia) */
.id-portal-filtros .id-portal-busca { flex: 2 1 240px; min-width: 220px; }
.id-portal-filtros .id-portal-fdata { flex: 1 1 170px; min-width: 150px; }
.id-portal-filtros .id-portal-fano { flex: 1 1 130px; min-width: 110px; }
.id-portal-filtros .id-portal-busca input::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }

/* widget de calendário (linha de edição) */
.id-portal-cal { width: 42px; height: 46px; border-radius: var(--id-radius-md); border: 1px solid var(--mud-palette-lines-default); overflow: hidden; text-align: center; flex-shrink: 0; background: var(--mud-palette-surface); }
.id-portal-cal .m { font-weight: 600; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; background: var(--mud-palette-primary); color: #fff; padding: 3px 0; }
.id-portal-cal .d { font-weight: 700; font-size: 18px; padding: 6px 0 0; display: block; line-height: 1; }

/* linha de edição (a lista usa um MudDataGrid de coluna única com cabeçalho oculto) */
.id-portal-row { display: flex; align-items: center; gap: 18px; padding: 4px 2px; }
.id-portal-grid thead { display: none; }

/* rodapé institucional */
.id-portal-foot { background: #08222F; color: #9DB4C6; margin-top: 48px; }
.id-portal-foot-in { padding: 30px 24px; display: flex; align-items: flex-start; gap: 16px; font-size: 12px; line-height: 1.7; }
.id-portal-foot-org { font-weight: 700; font-size: 13px; line-height: 1.3; color: #EAF3FA; }
.id-portal-foot-powered { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 10px; font-size: 11px; color: #6E879B; }
.id-portal-foot-powered img { height: 22px; opacity: .92; }

/* ---------- Páginas de erro (design: error-pages — 2 colunas) ---------- */
.id-error-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; }
.id-error-grid { display: grid; grid-template-columns: 1fr 0.9fr; align-items: center; gap: 32px; max-width: 920px; width: 100%; }
.id-error-grid--solo { grid-template-columns: minmax(0, 560px); justify-content: center; text-align: center; }
.id-error-illus { display: flex; align-items: center; justify-content: center; }
.id-error-illus img { width: 100%; max-width: 340px; height: auto; }
.id-error-code {
    font-family: var(--id-font-mono); font-weight: 700; font-size: 13px; letter-spacing: 1px;
    color: var(--id-primary); background: var(--id-primary-50); border: 1px solid var(--id-primary-100);
    padding: 5px 11px; border-radius: var(--id-radius-pill);
    display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase;
}
.mud-theme-dark .id-error-code, [data-theme="dark"] .id-error-code { background: rgba(51, 162, 217, .14); border-color: rgba(51, 162, 217, .28); color: #7CC4E8; }
.id-error-title { margin: 18px 0 12px !important; letter-spacing: -0.5px; }
.id-error-msg { margin-bottom: 26px !important; max-width: 42ch; }
.id-error-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.id-error-meta {
    margin-top: 22px; font-family: var(--id-font-mono); font-size: 11.5px;
    color: var(--mud-palette-text-disabled); display: flex; align-items: center; gap: 7px;
}
.id-error-grid--solo .id-error-msg { margin-inline: auto; }
.id-error-grid--solo .id-error-actions,
.id-error-grid--solo .id-error-meta { justify-content: center; }
/* No escuro, o botão secundário (outlined Default) precisa de contraste legível */
.mud-theme-dark .id-error-actions .mud-button-outlined,
[data-theme="dark"] .id-error-actions .mud-button-outlined {
    color: var(--id-text-primary);
    border-color: var(--id-border-strong);
}
@media (max-width: 760px) {
    .id-error-grid { grid-template-columns: 1fr; text-align: center; }
    .id-error-illus { order: -1; }
    .id-error-actions, .id-error-meta { justify-content: center; }
    .id-error-msg { margin-inline: auto; }
}

/* Evidência de assinatura (Portal Público): foco visível no link do Validador ITI (WCAG 2.4.7/2.4.11).
   O tema global zera o outline dos botões; aqui o reativamos só neste elemento da feature. */
.id-sig-validador:focus-visible {
    outline: 2px solid var(--mud-palette-success-darken);
    outline-offset: 2px;
}