/* =====================================================================
   ux-refresh.css  —  Camada GLOBAL de refinamento de UX/UI (Terman OS)
   ---------------------------------------------------------------------
   Carregada por ULTIMO em base.html (publico) e base_admin.html (admin),
   portanto vence o cascade sem precisar editar cada template.

   Identidade: mangueiras hidraulicas para agro / caminhoes / industria.
   Marca verde Terman + acabamento industrial. Foco em:
     - acessibilidade (foco visivel consistente por teclado)
     - consistencia de micro-interacoes (botoes, cards, inputs, links)
     - detalhes de marca (selecao de texto, scrollbar)

   REGRA DE SEGURANCA: nada aqui altera dimensoes/box (sem mudar width,
   height, margin, padding, display) para evitar regressao de layout.
   E uma camada puramente aditiva e facil de reverter (remover os 2 links).
   ===================================================================== */

:root {
    --tx-brand: #3DBE4A;
    --tx-brand-dark: #2E9E3A;
    --tx-ring: rgba(61, 190, 74, 0.45);
}

/* ---------------------------------------------------------------------
   1) Acessibilidade: foco visivel consistente em tudo que e interativo.
   Mostra o anel apenas no foco por teclado (:focus-visible), nao no clique.
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.sf-btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid var(--tx-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Evita o contorno "feio" no clique de mouse, preservando o de teclado */
:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------------
   2) Detalhe de marca: selecao de texto na cor verde Terman.
   --------------------------------------------------------------------- */
::selection {
    background: rgba(61, 190, 74, 0.22);
    color: inherit;
}

/* ---------------------------------------------------------------------
   3) Rolagem suave (respeitando quem prefere menos movimento).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---------------------------------------------------------------------
   4) Micro-interacao consistente em botoes (sem alterar o tamanho).
   --------------------------------------------------------------------- */
.btn,
.sf-btn {
    transition: transform .15s ease, box-shadow .15s ease,
                background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover,
.sf-btn:hover {
    transform: translateY(-1px);
}

.btn:active,
.sf-btn:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .sf-btn:hover,
    .btn:active,
    .sf-btn:active {
        transform: none;
    }
}

/* ---------------------------------------------------------------------
   5) Inputs com foco na cor da marca (sobrescreve o azul do Bootstrap).
   --------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--tx-brand);
    box-shadow: 0 0 0 .2rem var(--tx-ring);
}

/* ---------------------------------------------------------------------
   6) Transicao suave de hover em cards (sem mudar layout).
   --------------------------------------------------------------------- */
.card,
.sf-card {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

/* ---------------------------------------------------------------------
   7) Links: deslocamento de sublinhado mais elegante.
   --------------------------------------------------------------------- */
a {
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
   8) Scrollbar discreta no desktop (cosmetico).
   --------------------------------------------------------------------- */
@media (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #c7ccd1 transparent;
    }
    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    *::-webkit-scrollbar-thumb {
        background: #c7ccd1;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    *::-webkit-scrollbar-thumb:hover {
        background: #aab0b6;
        background-clip: content-box;
    }
}

/* ---------------------------------------------------------------------
   9) Alinhamento de controles agrupados e barras de busca.
   Evita desalinho de altura entre input e botao em input-group/search
   (problema comum em barras de pesquisa). Escopo restrito a esses grupos.
   --------------------------------------------------------------------- */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
    min-height: 44px;
}

.sf-search {
    align-items: stretch;
}

.sf-search__input,
.sf-search__button {
    min-height: 44px;
}

/* ---------------------------------------------------------------------
   10) Padronizacao de tamanho de botoes e campos (consistencia global).
   Harmoniza controles Bootstrap (.btn/.form-control/.form-select) com o
   alvo de toque do StorefrontUI (~44px). Exclui variantes -sm/-lg e
   botoes especiais (close/link) para nao quebrar toolbars e tabelas.
   Nao altera border-radius (evita cantos errados em input-group).
   --------------------------------------------------------------------- */
.btn:not(.btn-sm):not(.btn-lg):not(.btn-close):not(.btn-link) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    line-height: 1.2;
}

.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
    min-height: 44px;
}

/* Botao apenas com icone (sem texto) nao deve abrir gap interno */
.btn.btn-icon,
.btn.btn-square {
    gap: 0;
}

/* ---------------------------------------------------------------------
   11) Contraste (WCAG AA) — reforca textos secundarios, placeholders e
   badges de fundo claro. Cobre TODAS as paginas (publicas e admin).
   --------------------------------------------------------------------- */
.text-muted,
.text-secondary {
    color: #5b6573 !important;   /* mais escuro que o #6c757d padrao (AA folgado) */
}

::placeholder {
    color: #6b7280 !important;
    opacity: 1;                   /* Firefox reduz opacidade do placeholder */
}

/* Badges de fundo claro precisam de texto escuro para legibilidade */
.badge.bg-warning,
.badge.bg-info,
.badge.bg-light,
.badge.text-bg-warning,
.badge.text-bg-info,
.badge.text-bg-light {
    color: #1f2937 !important;
}

/* ---------------------------------------------------------------------
   12) Cards — consistencia global (borda/raio/sombra suaves + hover leve).
   Usa variaveis do Bootstrap para nao quebrar cantos de imagem do card.
   --------------------------------------------------------------------- */
.card {
    --bs-card-border-radius: 14px;
    --bs-card-inner-border-radius: 13px;
    --bs-card-border-color: #e6e8eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.card:hover {
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

/* =====================================================================
   13) ADMIN — densidade, cards, contraste e tabelas (todas as paginas
   de admin). Escopo: .sf-admin-page (nao afeta loja/landing).
   ===================================================================== */

/* 13.1 Densidade: conteudo respira e nao estica demais em telas largas */
.sf-admin-page .sf-admin-content {
    max-width: 1600px;
    margin-inline: auto;
    width: 100%;
}
@media (min-width: 1200px) {
    .sf-admin-page .sf-admin-content {
        padding: 2rem;
    }
}

/* 13.2 Cards do admin: borda/raio/sombra/padding consistentes */
.sf-admin-page .card {
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
    border-color: #e6e8eb;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.sf-admin-page .card > .card-header {
    background: transparent;
    border-bottom: 1px solid #eef0f2;
    padding: 1rem 1.5rem;
    font-weight: 600;
}

/* 13.3 Contraste: titulos e textos secundarios mais legiveis (WCAG AA) */
.sf-admin-page .sf-admin-topbar-subtitle,
.sf-admin-page .text-muted,
.sf-admin-page .text-secondary {
    color: #5b6573 !important;
}
.sf-admin-page h1, .sf-admin-page h2, .sf-admin-page h3,
.sf-admin-page h4, .sf-admin-page h5, .sf-admin-page h6 {
    color: #18212e;
}

/* 13.4 Tabelas e listas: cabecalho, altura de linha, alinhamento e hover */
.sf-admin-page .table {
    --bs-table-border-color: #eef0f2;
    margin-bottom: 0;
}
.sf-admin-page .table > thead th {
    background: #f7f8fa;
    color: #5b6573;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #e6e8eb;
    white-space: nowrap;
    padding: .75rem 1rem;
}
.sf-admin-page .table > tbody > tr > td {
    padding: .75rem 1rem;
    vertical-align: middle;
    border-bottom-color: #f0f2f4;
}
.sf-admin-page .table > tbody > tr:hover > td {
    background: #f6faf7;
}

/* 13.5 Aba ativa da sidebar: verde escuro para leitura sobre fundo claro */
.sf-admin-page .sf-sidebar-menu-link.active,
.sf-admin-page .sf-sidebar-menu-link.active i {
    color: #15803d;
}

/* =====================================================================
   14) ADMIN — padronizacao dos cards proprios do design system
   (sf-card, KPIs, stats, info) + contraste de rotulos/botoes.
   Escopo: .sf-admin-page (nao afeta loja/landing).
   ===================================================================== */

/* 14.1 Raio/sombra/transicao consistentes para todos os cards do admin */
.sf-admin-page .sf-card,
.sf-admin-page .sf-kpi-card,
.sf-admin-page .sf-info-card,
.sf-admin-page .kpi-card,
.sf-admin-page .stat-card,
.sf-admin-page .sf-stat-card,
.sf-admin-page .sf-metric-card {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: box-shadow .2s ease, transform .2s ease;
}

/* 14.2 Borda sutil apenas nos cards de conteudo claro (evita "borda" em KPIs coloridos) */
.sf-admin-page .sf-card,
.sf-admin-page .sf-info-card {
    border: 1px solid #e6e8eb;
}

/* 14.3 Leve elevacao no hover para cards de indicador (KPI/stat/metric) */
.sf-admin-page .sf-kpi-card:hover,
.sf-admin-page .kpi-card:hover,
.sf-admin-page .stat-card:hover,
.sf-admin-page .sf-stat-card:hover,
.sf-admin-page .sf-metric-card:hover {
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
}

/* 14.4 Contraste de rotulos secundarios dentro de cards (WCAG AA) */
.sf-admin-page .sf-card__subtitle,
.sf-admin-page .sf-card-subtitle,
.sf-admin-page .kpi-label,
.sf-admin-page .sf-kpi-label,
.sf-admin-page .stat-label,
.sf-admin-page .sf-stat-label,
.sf-admin-page .sf-muted,
.sf-admin-page .sf-text-muted {
    color: #5b6573;
}

/* 14.5 Botoes claros/secundarios: borda e texto legiveis ("Novo", "Nova regra", etc.) */
.sf-admin-page .sf-btn-secondary,
.sf-admin-page .sf-button--secondary {
    border: 1px solid #cbd2da;
    color: #18212e;
}
.sf-admin-page .sf-btn-secondary:hover,
.sf-admin-page .sf-button--secondary:hover {
    background: #f1f3f5;
    border-color: #b7c0ca;
    color: #18212e;
}

/* =====================================================================
   15) ADMIN — campos de formulario e busca consistentes (raio, borda,
   foco verde). Escopo: .sf-admin-page. Cobre filtros/buscas de todas as
   areas (dashboard, vendas, ERP, financeiro, fiscal, analytics).
   ===================================================================== */
.sf-admin-page .sf-input,
.sf-admin-page .sf-select,
.sf-admin-page .sf-textarea,
.sf-admin-page .form-control,
.sf-admin-page .form-select,
.sf-admin-page .sf-search__input {
    border-radius: 10px;
    border: 1px solid #cbd2da;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-admin-page .sf-input:focus,
.sf-admin-page .sf-select:focus,
.sf-admin-page .sf-textarea:focus,
.sf-admin-page .form-control:focus,
.sf-admin-page .form-select:focus,
.sf-admin-page .sf-search__input:focus {
    border-color: #3DBE4A;
    box-shadow: 0 0 0 3px rgba(61, 190, 74, 0.15);
    outline: none;
}

/* 15.1 Inputs desabilitados: aparencia clara de "bloqueado" */
.sf-admin-page .sf-input:disabled,
.sf-admin-page .sf-select:disabled,
.sf-admin-page .form-control:disabled {
    background: #f3f5f7;
    color: #8a93a0;
    cursor: not-allowed;
}

/* 15.2 Espacamento consistente do cabecalho de secao no admin */
.sf-admin-page .sf-section-title,
.sf-admin-page .sf-card__header h5,
.sf-admin-page .sf-card-header h5 {
    letter-spacing: .01em;
}

/* =====================================================================
   16) Paginacao admin (macro sf_admin_pagination) — estava sem CSS,
   ficava como links crus. Estilo objetivo: botoes, espacamento, estado
   ativo em verde, hover, desabilitado e reticencias.
   ===================================================================== */
.sf-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--surface-border, #E5E5EA);
}
.sf-admin-pagination__info { font-size: .85rem; }
.sf-admin-pagination__count { color: var(--text-secondary, #5b6573); }
.sf-admin-pagination__count strong { color: var(--text-primary, #1c1c1e); font-weight: 600; }
.sf-admin-pagination__controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.sf-admin-pagination__per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--text-secondary, #5b6573);
}
.sf-admin-pagination__select {
    padding: 6px 10px;
    border: 1px solid #cbd2da;
    border-radius: 10px;
    background: #fff;
    color: var(--text-primary, #1c1c1e);
    font-size: .85rem;
    cursor: pointer;
}
.sf-admin-pagination__select:focus {
    outline: none;
    border-color: var(--color-brand, #3DBE4A);
    box-shadow: 0 0 0 3px rgba(61, 190, 74, .18);
}
.sf-admin-pagination__nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sf-admin-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #cbd2da;
    border-radius: 10px;
    background: #fff;
    color: #18212e;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sf-admin-pagination__btn:hover:not(.sf-admin-pagination__btn--active):not(.sf-admin-pagination__btn--disabled):not(.sf-admin-pagination__btn--ellipsis) {
    border-color: var(--color-brand, #3DBE4A);
    color: var(--color-brand, #3DBE4A);
    background: rgba(61, 190, 74, .06);
}
.sf-admin-pagination__btn--active {
    background: var(--color-brand, #3DBE4A);
    border-color: var(--color-brand, #3DBE4A);
    color: #fff;
    cursor: default;
}
.sf-admin-pagination__btn--disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.sf-admin-pagination__btn--ellipsis {
    border: none;
    background: transparent;
    pointer-events: none;
    min-width: 24px;
}
@media (max-width: 640px) {
    .sf-admin-pagination { justify-content: center; }
    .sf-admin-pagination__controls { justify-content: center; width: 100%; }
}