/* Barra de navegação/salvar e painel de sincronização das ferramentas públicas
   (Notificação, ACE). Externalizado (era <style>/style="" injetado via JS) porque
   a CSP das rotas /ferramentas/* não tem 'unsafe-inline' em style-src. */

:root {
    --vd-tb-bg: #111120;
    --vd-tb-fg: #e8e8f4;
    --vd-tb-accent: #047857;
    --vd-tb-blue: #2563eb;
    --vd-tb-radius: 8px;
    --vd-tb-border: rgba(255, 255, 255, .12);
}

body.vd-web-tool-active {
    padding-top: calc(var(--vd-web-toolbar-h, 52px) + env(safe-area-inset-top, 0px)) !important;
}

.vd-web-tool-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000005;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-touch, 8px);
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    background: var(--vd-tb-bg);
    border-bottom: 1px solid var(--vd-tb-border);
    font-family: var(--font, Segoe UI, system-ui, sans-serif);
    box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, .35));
}

.vd-web-tool-bar a,
.vd-web-tool-bar button {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--vd-tb-radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--vd-tb-border);
}

.vd-web-tool-bar .vd-tb-back { background: #1f1f3a; color: var(--vd-tb-fg); }
.vd-web-tool-bar .vd-tb-local { background: var(--vd-tb-blue); color: #fff; border: none; }
.vd-web-tool-bar .vd-tb-save { background: var(--vd-tb-accent); color: #fff; border: none; }
.vd-web-tool-bar .vd-tb-sync { background: #1f1f3a; color: var(--vd-tb-fg); position: relative; }

/* Celular: uma linha só, 5 botões de largura igual (antes a barra quebrava em
   2 linhas e ocupava ~109 px fixos no topo). Rótulo pode ir para 2 linhas,
   sem cortar palavra; o 1º botão ("← Ferramentas") ganha um pouco mais. */
@media (max-width: 600px) {
    .vd-web-tool-bar {
        flex-wrap: nowrap;
        gap: 6px;
        padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
    }
    .vd-web-tool-bar a,
    .vd-web-tool-bar button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
        padding: 4px;
        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .vd-web-tool-bar a:first-child { flex-grow: 1.35; }
}

.vd-tb-sync-badge {
    display: none;
    margin-left: 4px;
    background: #f59e0b;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
}

.vd-tb-sync-badge.is-open { display: inline-flex; }

#vd-field-sync-panel {
    bottom: 16px !important;
    top: auto !important;
    z-index: 1000006 !important;
}

.vd-boot-fail-banner {
    position: fixed;
    top: calc(var(--vd-web-toolbar-h, 52px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 1000010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #b91c1c;
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    font-family: var(--font, Segoe UI, system-ui, sans-serif);
}

.vd-boot-fail-banner button {
    background: #fff;
    color: #b91c1c;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Painel de registros de campo (field_sync.js) */
.vd-field-sync-panel {
    position: fixed;
    bottom: 72px;
    right: 16px;
    z-index: 1000006;
    width: min(360px, calc(100vw - 32px));
    max-height: min(420px, 50vh);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.vd-field-sync-panel.is-open { display: flex; }

.vd-fsp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .10));
}

.vd-fsp-title { font-size: 13px; color: var(--fg, #0f172a); }

.vd-fsp-close {
    background: none;
    border: none;
    color: var(--fg2, #475569);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.vd-fsp-status { padding: 8px 12px; font-size: 11px; color: var(--fg2, #475569); }

.vd-fsp-list { overflow-y: auto; padding: 8px 12px; flex: 1; font-size: 12px; color: var(--fg, #0f172a); }

.vd-fsp-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border, rgba(0, 0, 0, .10));
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vd-fsp-sync-btn {
    flex: 1;
    min-width: 120px;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: var(--vd-primary, #1351B4);
    color: var(--vd-on-primary, #fff);
    font-weight: 600;
    cursor: pointer;
}

.vd-fsp-label-pending { font-size: 10px; text-transform: uppercase; color: var(--vd-warning, #8a5a00); margin-bottom: 4px; }
.vd-fsp-label-server { font-size: 10px; text-transform: uppercase; color: var(--vd-success, #168821); margin: 8px 0 4px; }
.vd-fsp-label-history { font-size: 10px; color: var(--fg3, #64748b); margin-top: 8px; }
.vd-fsp-empty { color: var(--fg3, #64748b); padding: 8px 0; }

.vd-fsp-row { padding: 8px 0; border-bottom: 1px solid var(--border, rgba(0, 0, 0, .08)); }
.vd-fsp-row-title { font-weight: 600; font-size: 12px; color: var(--fg, #0f172a); }
.vd-fsp-row-meta { color: var(--fg2, #475569); font-size: 10px; margin-top: 2px; }
.vd-fsp-row-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

.vd-fsp-action-btn {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    background: var(--vd-hover, rgba(15, 23, 42, .05));
    color: var(--fg, #0f172a);
    border: 1px solid var(--border, rgba(0, 0, 0, .10));
}

.vd-fsp-action-btn.is-danger {
    background: var(--vd-tint-danger, rgba(200, 30, 30, .10));
    color: var(--vd-danger, #c81e1e);
    border: 1px solid var(--vd-tint-danger-border, rgba(200, 30, 30, .30));
}

.vd-field-sw-update {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000011;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px;
    border-radius: 10px;
    background: #173f35;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    font: 600 14px/1.4 var(--font, Segoe UI, system-ui, sans-serif);
}

.vd-field-sw-update__action {
    margin-top: 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #173f35;
    font: inherit;
    cursor: pointer;
}

.vd-field-sw-update__action:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 2px;
}

#vd-field-sw-status:not(.vd-field-sw-update) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.vd-field-sw-update__action + .vd-field-sw-update__action {
    margin-left: 8px;
}