/* ========================================
   Fontes - Geist (variável, via jsDelivr)
   ======================================== */
@font-face {
    font-family: "Geist";
    src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   Variáveis de Cores - Weduu Theme
   ======================================== */
:root {
    /* Fontes: Geist para tudo, Geist Mono só para códigos (SKU, EAN) */
    --font-sans: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Aliases dos tokens (tokens.css): os skins por empresa redefinem estes nomes e vencem */
    --weduu-primary: var(--brand-600);
    --weduu-primary-dark: var(--brand-700);
    --weduu-primary-light: var(--brand-500);
    --weduu-secondary: var(--stone-700);
    --weduu-secondary-light: var(--stone-600);
    --weduu-light: var(--stone-100);
    --weduu-white: var(--white);
    --weduu-dark: var(--stone-900);
    --weduu-gradient-primary: var(--weduu-primary); /* cor sólida; o skin da empresa pode redefinir como gradiente */

    /* Bootstrap CSS Variables Override */
    --bs-body-font-family: var(--font-sans);
    --bs-font-sans-serif: var(--font-sans);
    --bs-font-monospace: var(--font-mono);
    --bs-body-color: var(--text-body);
    --bs-body-bg: var(--surface-card);
    --bs-border-color: var(--border-subtle);
    --bs-link-color: var(--weduu-primary);
    --bs-link-hover-color: var(--weduu-primary-dark);
    --bs-primary: var(--weduu-primary);
    --bs-primary-rgb: var(--brand-600-rgb);
    --bs-secondary: var(--weduu-secondary);
    --bs-secondary-rgb: var(--stone-500-rgb);
    --bs-secondary-color: var(--text-muted);
    --bs-light: var(--weduu-light);
    --bs-light-rgb: var(--stone-50-rgb);
    --bs-secondary-bg: var(--surface-sunken);
    --bs-tertiary-bg: var(--surface-app);
    --bs-dark-rgb: var(--stone-900-rgb);

    /* Status do Bootstrap: success, warning, danger e info nas cores do documento (info = brand-700) */
    --bs-success: var(--green-700);
    --bs-success-rgb: var(--green-700-rgb);
    --bs-success-text-emphasis: var(--green-700);
    --bs-success-bg-subtle: color-mix(in srgb, var(--green-700) 15%, var(--white));
    --bs-success-border-subtle: color-mix(in srgb, var(--green-700) 30%, var(--white));
    --bs-warning: var(--yellow-500);
    --bs-warning-rgb: var(--yellow-500-rgb);
    --bs-warning-text-emphasis: var(--yellow-800);
    --bs-warning-bg-subtle: var(--yellow-300);
    --bs-warning-border-subtle: var(--yellow-500);
    --bs-danger: var(--red-700);
    --bs-danger-rgb: var(--red-700-rgb);
    --bs-danger-text-emphasis: var(--red-900);
    --bs-danger-bg-subtle: var(--red-300);
    --bs-danger-border-subtle: var(--red-500);
    --bs-info: var(--brand-700);
    --bs-info-rgb: var(--brand-700-rgb);
    --bs-info-text-emphasis: var(--brand-800);
    --bs-info-bg-subtle: var(--brand-200);
    --bs-info-border-subtle: var(--brand-300);
}

body {
    background: var(--surface-app);
}

/* Fundo de card (navbar, rodapé, seletor, painel de debug) */
.bg-surface-card {
    background-color: var(--surface-card) !important;
}

.bg-surface-raised {
    background-color: var(--surface-raised) !important;
}

/* Logo da empresa na navbar: anel e sombra na cor da marca, cresce ao passar o mouse no link */
.unidade-logo-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid var(--brand-500);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--brand-500) 10%, transparent);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

a:hover > .unidade-logo-container {
    transform: scale(1.1);
    box-shadow: 0 8px 15px color-mix(in srgb, var(--brand-500) 20%, transparent);
}

/* Foco: uma regra só, 2px de --ring com 2px de offset, em todo elemento interativo (§9 do documento) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: var(--ring-width) solid var(--ring) !important;
    outline-offset: var(--ring-offset);
}

/* Movimento mínimo: sem animação nem transição para quem pede (§6 do documento) */
@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;
    }
}

/* Fallback para cards de empresa sem skin próprio */
.skin-default {
    --card-accent: linear-gradient(90deg, var(--stone-500) 0%, var(--stone-400) 100%);
    --card-border-hover: var(--stone-500);
}

/* ========================================
   Botões Primários com Gradiente
   ======================================== */
.btn-primary {
    --bs-btn-color: var(--text-on-cta);
    --bs-btn-bg: var(--cta);
    --bs-btn-border-color: var(--cta);
    --bs-btn-hover-color: var(--text-on-cta-dark);
    --bs-btn-hover-bg: var(--cta-dark);
    --bs-btn-hover-border-color: var(--cta-dark);
    --bs-btn-active-color: var(--text-on-cta-dark);
    --bs-btn-active-bg: var(--cta-dark);
    --bs-btn-active-border-color: var(--cta-dark);
    --bs-btn-disabled-bg: var(--cta);
    --bs-btn-disabled-border-color: var(--cta);
    font-weight: 600; /* branco sobre --cta dá 3,7:1: só vale para rótulo em semibold (§3 do documento) */
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cta) 25%, transparent);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--cta) 35%, transparent);
}

.btn-primary:active {
    transform: translateY(-1px);
}

/* ========================================
   Botões Outline Primary
   ======================================== */
.btn-outline-primary {
    --bs-btn-color: var(--cta-dark);
    --bs-btn-border-color: var(--cta-dark);
    --bs-btn-hover-color: var(--text-on-cta-dark);
    --bs-btn-hover-bg: var(--cta-dark);
    --bs-btn-hover-border-color: var(--cta-dark);
    --bs-btn-active-color: var(--text-on-cta-dark);
    --bs-btn-active-bg: var(--cta-dark);
    --bs-btn-active-border-color: var(--cta-dark);
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cta) 30%, transparent);
}

/* ========================================
   Botões secundários (neutros: stone-500)
   ======================================== */
.btn-secondary {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--stone-500);
    --bs-btn-border-color: var(--stone-500);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--stone-600);
    --bs-btn-hover-border-color: var(--stone-600);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--stone-700);
    --bs-btn-active-border-color: var(--stone-700);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--stone-500);
    --bs-btn-disabled-border-color: var(--stone-500);
}

.btn-outline-secondary {
    --bs-btn-color: var(--stone-500);
    --bs-btn-border-color: var(--stone-500);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--stone-500);
    --bs-btn-hover-border-color: var(--stone-500);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--stone-500);
    --bs-btn-active-border-color: var(--stone-500);
    --bs-btn-disabled-color: var(--stone-500);
    --bs-btn-disabled-border-color: var(--stone-500);
}

.btn-dark {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--stone-900);
    --bs-btn-border-color: var(--stone-900);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--stone-800);
    --bs-btn-hover-border-color: var(--stone-800);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--stone-800);
    --bs-btn-active-border-color: var(--stone-800);
}

/* Cabeçalho de tabela claro */
.table-light {
    --bs-table-color: var(--text-strong);
    --bs-table-bg: var(--surface-card);
    --bs-table-border-color: var(--border-subtle);
}

.table-warning {
    --bs-table-color: var(--text-strong);
    --bs-table-bg: color-mix(in srgb, var(--yellow-300) 35%, var(--white));
    --bs-table-border-color: var(--yellow-300);
}

/* Botão de contorno claro (voltar no cabeçalho colorido): branco do documento */
.btn-outline-light {
    --bs-btn-color: var(--white);
    --bs-btn-border-color: var(--white);
    --bs-btn-hover-color: var(--text-strong);
    --bs-btn-hover-bg: var(--white);
    --bs-btn-hover-border-color: var(--white);
    --bs-btn-active-color: var(--text-strong);
    --bs-btn-active-bg: var(--white);
    --bs-btn-active-border-color: var(--white);
}

/* Barra de progresso, paginação e pílulas do Bootstrap */
.progress {
    --bs-progress-bg: var(--stone-200);
    --bs-progress-bar-bg: var(--cta);
}

.pagination {
    --bs-pagination-color: var(--cta-dark);
    --bs-pagination-hover-color: var(--cta-dark);
    --bs-pagination-active-bg: var(--cta);
    --bs-pagination-active-border-color: var(--cta);
    --bs-pagination-focus-color: var(--cta-dark);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--cta);
}

/* Botão claro da barra de filtros */
.btn-light {
    --bs-btn-color: var(--text-strong);
    --bs-btn-bg: var(--stone-200);
    --bs-btn-border-color: var(--stone-200);
    --bs-btn-hover-color: var(--text-strong);
    --bs-btn-hover-bg: var(--stone-300);
    --bs-btn-hover-border-color: var(--stone-300);
    --bs-btn-active-color: var(--text-strong);
    --bs-btn-active-bg: var(--stone-300);
    --bs-btn-active-border-color: var(--stone-300);
}

/* ========================================
   Botões de status (success, warning, danger, info)
   ======================================== */
.btn-success, .btn-outline-success { --status: var(--green-700); }
.btn-warning, .btn-outline-warning { --status: var(--yellow-500); --status-text: var(--stone-900); }
.btn-danger, .btn-outline-danger { --status: var(--red-700); }
.btn-info, .btn-outline-info { --status: var(--brand-700); }

.btn-success, .btn-warning, .btn-danger, .btn-info {
    --bs-btn-color: var(--status-text, var(--white));
    --bs-btn-bg: var(--status);
    --bs-btn-border-color: var(--status);
    --bs-btn-hover-color: var(--status-text, var(--white));
    --bs-btn-hover-bg: color-mix(in srgb, var(--status) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--status) 85%, black);
    --bs-btn-active-color: var(--status-text, var(--white));
    --bs-btn-active-bg: color-mix(in srgb, var(--status) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--status) 80%, black);
    --bs-btn-disabled-color: var(--status-text, var(--white));
    --bs-btn-disabled-bg: var(--status);
    --bs-btn-disabled-border-color: var(--status);
}

.btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-info {
    --bs-btn-color: var(--status);
    --bs-btn-border-color: var(--status);
    --bs-btn-hover-color: var(--status-text, var(--white));
    --bs-btn-hover-bg: var(--status);
    --bs-btn-hover-border-color: var(--status);
    --bs-btn-active-color: var(--status-text, var(--white));
    --bs-btn-active-bg: var(--status);
    --bs-btn-active-border-color: var(--status);
    --bs-btn-disabled-color: var(--status);
    --bs-btn-disabled-border-color: var(--status);
}

/* ========================================
   Cards com Gradiente Primary
   ======================================== */
.card-header {
    border-radius: 12px 12px 0 0;
    background: var(--weduu-gradient-primary);
    border: none;
    padding: 1.25rem;
    font-weight: 600;
    color: var(--weduu-white);
}

/* Texto secundário sobre o cabeçalho colorido: branco translúcido, não o cinza do corpo */
.card-header .text-muted {
    color: color-mix(in srgb, var(--white) 85%, transparent) !important;
}

/* Selos de perfil no cabeçalho colorido: cinza escuro, para não sumir sobre a cor do cabeçalho */
.card-header .badge.bg-secondary,
.card-header .badge.bg-primary {
    background: var(--stone-800) !important;
    color: var(--white);
}

.card-header.bg-primary {
    background: var(--weduu-gradient-primary) !important;
}

.badge.bg-primary {
    background: var(--weduu-gradient-primary) !important;
}

/* ========================================
   Backgrounds Primários
   ======================================== */
.bg-primary {
    background: var(--weduu-gradient-primary) !important;
}

.text-bg-primary {
    background: var(--weduu-gradient-primary) !important;
}

/* ========================================
   Navbar Customizada
   ======================================== */
.navbar {
    box-shadow: var(--shadow);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--weduu-primary) !important;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    color: var(--weduu-primary-dark) !important;
    transform: scale(1.05);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--weduu-primary);
}

.dropdown-item:hover {
    background-color: var(--weduu-light);
    color: var(--weduu-primary);
}

/* ========================================
   Inputs e Forms
   ======================================== */
.form-control {
    border: 1px solid var(--border-input);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--focus-ring) 15%, transparent);
}

/* Marcação de checkbox, radio e switch: preenchimento --cta-dark (§3 do documento) */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--cta-dark);
    border-color: var(--cta-dark);
}

.form-label {
    font-weight: 500;
    color: var(--weduu-secondary);
    margin-bottom: 0.5rem;
}

/* ========================================
   Alerts
   ======================================== */
.alert {
    border: none;
    border-radius: 8px;
    border-left: 4px solid;
}

.alert-success {
    border-left-color: var(--green-700);
    background-color: color-mix(in srgb, var(--green-700) 10%, transparent);
}

.alert-danger {
    border-left-color: var(--red-700);
    background-color: color-mix(in srgb, var(--red-700) 10%, transparent);
}

.alert-warning {
    border-left-color: var(--yellow-500);
    background-color: color-mix(in srgb, var(--yellow-500) 10%, transparent);
}

.alert-info {
    border-left-color: var(--weduu-primary);
    background-color: color-mix(in srgb, var(--weduu-primary) 10%, transparent);
}

/* ========================================
   Badges
   ======================================== */
.badge {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
}

/* ========================================
   Links
   ======================================== */
a {
    color: var(--weduu-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--weduu-primary-dark);
    text-decoration: underline;
}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb {
    background-color: var(--weduu-light);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.breadcrumb-item.active {
    color: var(--weduu-primary);
    font-weight: 500;
}

.breadcrumb-item a {
    color: var(--weduu-primary);
}

.breadcrumb-item a:hover {
    color: var(--weduu-primary-dark);
}

/* ========================================
   Texto Customizado
   ======================================== */
.text-primary {
    color: var(--weduu-primary) !important;
}

.text-secondary {
    color: var(--weduu-secondary) !important;
}

/* ========================================
   Animações
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeInUp 0.4s ease-out;
}

/* ========================================
   Dashboard Cards — Hover
   ======================================== */
.dashboard-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

/* Cards de Processamentos: faixa lateral pelo status do carregamento */
[data-field="card_border"][data-load-status] { border-left: 4px solid var(--stone-500) !important; }
[data-field="card_border"][data-load-status="EM_ANDAMENTO"] { border-left-color: var(--brand-700) !important; }
[data-field="card_border"][data-load-status="FINALIZADO"] { border-left-color: var(--green-700) !important; }
[data-field="card_border"][data-load-status="FINALIZADO_COM_ERRO"] { border-left-color: var(--brand-300) !important; }
[data-field="card_border"][data-load-status="ERRO"] { border-left-color: var(--red-700) !important; }

/* Cards do dashboard: faixa lateral pelo status do card (data-status) */
.card.dashboard-card { border-left: 4px solid var(--stone-500); }
.card.dashboard-card[data-status="success"] { border-left-color: var(--green-700); }
.card.dashboard-card[data-status="warning"] { border-left-color: var(--yellow-500); }
.card.dashboard-card[data-status="danger"] { border-left-color: var(--red-700); }

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md) !important;
}

/* ========================================
   Borders
   ======================================== */
.border-primary {
    border-color: var(--weduu-primary) !important;
}

.border-secondary {
    border-color: var(--weduu-secondary) !important;
}

/* ========================================
   Tabela de Validação — estilos inline
   ======================================== */

/* Grupos de colunas */
.col-group-1 { background-color: var(--stone-100); }
.col-group-2 { background-color: var(--stone-50); }

thead th.col-group-1 { background-color: var(--stone-200) !important; }
thead th.col-group-2 { background-color: var(--stone-100) !important; }

.table tbody tr:hover td.col-group-1 { background-color: var(--stone-200); }
.table tbody tr:hover td.col-group-2 { background-color: var(--stone-100); }

td.col-group-border-end,
th.col-group-border-end { box-shadow: 2px 0 0 0 var(--stone-300); }

/* Selos por significado: mesma cor em qualquer tela. Escolhidos em shared-badges.js; o texto do selo sempre diz o significado */
.badge-neutral,
.badge-status-running,
.badge-status-processing, .badge-status-applied, .badge-status-partial, .badge-status-error,
.badge-status-processed, .badge-status-pending, .badge-status-checked,
.badge-source-mass, .badge-source-portal,
.badge-channel-direct, .badge-channel-indirect, .badge-channel-scanntech, .badge-channel-not-informed,
.badge-channel-nielsen, .badge-channel-pharma, .badge-channel-ecommerce,
.badge-channel-all-scanntech, .badge-channel-direto {
    background-color: var(--badge-bg);
    color: var(--badge-fg, var(--white));
}

.badge-neutral { --badge-bg: var(--stone-500); }

.badge-status-processed { --badge-bg: var(--green-700); }
.badge-status-running { --badge-bg: var(--brand-700); }
.badge-status-processing { --badge-bg: var(--stone-500); }
.badge-status-applied { --badge-bg: var(--green-700); }
.badge-status-partial { --badge-bg: var(--brand-300); --badge-fg: var(--stone-900); }
.badge-status-error { --badge-bg: var(--red-700); }
.badge-status-pending { --badge-bg: var(--yellow-500); --badge-fg: var(--stone-900); }
.badge-status-checked { --badge-bg: var(--brand-700); }

.badge-source-mass { --badge-bg: var(--brand-700); }
.badge-source-portal { --badge-bg: var(--green-700); }

.badge-channel-direct { --badge-bg: var(--stone-800); }
.badge-channel-indirect { --badge-bg: var(--stone-500); }
.badge-channel-scanntech { --badge-bg: var(--red-700); }
.badge-channel-not-informed { --badge-bg: var(--yellow-500); --badge-fg: var(--stone-900); }
.badge-channel-nielsen { --badge-bg: var(--brand-700); }
.badge-channel-pharma { --badge-bg: var(--green-700); }
.badge-channel-ecommerce { --badge-bg: var(--stone-300); --badge-fg: var(--stone-900); }
.badge-channel-all-scanntech { --badge-bg: var(--red-300); --badge-fg: var(--red-900); }
.badge-channel-direto { --badge-bg: var(--brand-200); --badge-fg: var(--brand-800); }

/* Badge canal */
.badge-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 24px;
    padding: 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 50rem;
}

/* Badge de largura fixa (colunas Role e Status da listagem de usuários) */
.badge-fixed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    white-space: nowrap;
}

/* Linha desabilitada */
tr.row-disabled {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Scroll com cabeçalho fixo */
.validacao-table-wrapper {
    max-height: calc(100vh - 340px);
    min-height: 200px;
    overflow: auto;
    position: relative;
}

.validacao-table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Filtro inline por coluna */
.col-filter-icon {
    font-size: 0.72rem;
    margin-left: 5px;
    cursor: pointer;
    color: var(--text-faint);
    vertical-align: middle;
}
.col-filter-icon:hover,
.col-filter-icon.active { color: var(--brand-600); }

.col-filter-box {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 500;
    width: 200px;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 10px;
    box-shadow: var(--shadow-md);
}