/* =========================================================
   DESIGN TOKENS
   Cor principal a partir da identidade histórica do ERP: TColor Delphi
   $00BC750F (formato 0x00BBGGRR) -> RGB(0F,75,BC) -> #0F75BC.
   Mudar a identidade visual do produto é, na imensa maioria dos casos,
   mexer só nesta seção — o resto do CSS consome só estas variáveis.
   ========================================================= */

:root {
    /* Marca / ação primária */
    --color-primary: #0F75BC;
    --color-primary-hover: #0D639F;
    --color-primary-active: #0A4F80;
    --color-primary-light: #E7F1FA;
    --color-primary-lighter: #F3F8FC;
    --color-on-primary: #FFFFFF;

    /* Superfícies */
    --color-background: #F4F6F9;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F8FAFC;

    /* Texto */
    --color-text: #1B2430;
    --color-text-secondary: #566072;
    --color-text-muted: #8A93A3;

    /* Bordas */
    --color-border: #E2E6EC;
    --color-border-strong: #CBD2DC;

    /* Estado */
    --color-success: #16A34A;
    --color-success-hover: #128A3E;
    --color-success-light: #EAF8EF;

    --color-warning: #D97706;
    --color-warning-text: #9A5B0A;
    --color-warning-light: #FFF6E9;

    --color-danger: #DC2626;
    --color-danger-hover: #B91C1C;
    --color-danger-light: #FDECEC;

    /* Geometria */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Elevação */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.16);

    /* Layout */
    --navbar-height: 64px;

    /* Tipografia — fontes nativas do sistema operacional, sem dependência
       de rede (ver seção "Ícones/Fontes" do README). */
    --font-sans:
        -apple-system, "Segoe UI", "Segoe UI Variable", system-ui,
        Roboto, Helvetica, Arial, sans-serif;
}

/* Breakpoints de referência usados em todo o CSS deste projeto:
     Mobile   < 768px
     Tablet   768px – 1023px
     Desktop  >= 1024px
   Cada componente define sua própria responsividade perto da regra que
   ela afeta, em vez de um bloco único de @media no fim do arquivo. */


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;

    background-color: var(--color-background);

    color: var(--color-text);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

button {
    font: inherit;
}

img {
    max-width: 100%;
    display: block;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   NAVBAR (app shell)
   ========================================================= */

.navbar {
    background: var(--color-primary);

    color: var(--color-on-primary);

    position: sticky;
    top: 0;
    z-index: 200;

    box-shadow: var(--shadow-sm);
}

.navbar-inner {
    max-width: 1280px;

    margin: 0 auto;

    height: var(--navbar-height);

    padding: 0 16px;

    display: flex;

    align-items: center;

    gap: 12px;
}

.navbar-menu-btn {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.14);

    color: var(--color-on-primary);

    cursor: pointer;

    transition: background-color 0.15s ease;
}

.navbar-menu-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

.navbar-menu-btn svg {
    width: 20px;
    height: 20px;
}

/* .navbar-brand fica alinhado ao topo da barra (não centralizado) e acima
   dos demais itens: a imagem da logo (ver .navbar-logo) é propositalmente
   mais alta que --navbar-height e "desce" um pouco abaixo da barra azul —
   é o próprio cartão claro + sombra já embutidos na imagem aparecendo por
   cima do conteúdo da página. Nada aqui recorta a logo: nem .navbar, nem
   .navbar-inner, nem body definem overflow:hidden; e .navbar já tem
   position:sticky + z-index no CSS acima, então toda a parte que
   "transborda" da barra pinta por cima do <main> que vem a seguir — sem
   precisar de z-index extra na própria logo. */
.navbar-brand {
    display: flex;

    align-items: center;
    align-self: flex-start;

    text-decoration: none;
}

.navbar-logo {
    height: 52px;
    width: auto;
}

@media (max-width: 767px) {
    /* Fallback de telas muito estreitas: a logo maior do desktop
       (min-width: 768px, abaixo) não cabe com folga ao lado do botão de
       menu + área reservada sem risco de rolagem horizontal — então no
       mobile ela fica um pouco menor e contida dentro da barra, sem
       transbordar. */
    .navbar-brand {
        align-self: center;
    }
}

.navbar-spacer {
    flex: 1;
}

/* Ícone de atalho no navbar (hoje só Configurações) — link real, não mais
   decorativo. */
.navbar-icon-btn {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.14);

    color: var(--color-on-primary);

    text-decoration: none;

    transition: background-color 0.15s ease;
}

.navbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

.navbar-icon-btn svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   NAVBAR ACCOUNT (usuário / empresa ativa)
   <details>/<summary> nativos — sem JavaScript. Mostra "Empresa · Usuário"
   e, ao abrir, "Trocar empresa" e "Sair" (ver templates/layouts/base.html).
   ========================================================= */

.navbar-account {
    position: relative;
}

.navbar-account-summary {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.14);

    color: var(--color-on-primary);

    cursor: pointer;
    list-style: none;

    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.navbar-account-summary::-webkit-details-marker,
.navbar-account-summary::marker {
    display: none;
    content: "";
}

.navbar-account-summary:hover {
    background: rgba(255, 255, 255, 0.24);
}

.navbar-account-summary svg {
    width: 16px;
    height: 16px;

    flex-shrink: 0;
}

.navbar-account-summary svg:last-child {
    width: 14px;
    height: 14px;

    transition: transform 0.15s ease;
}

.navbar-account[open] .navbar-account-summary svg:last-child {
    transform: rotate(180deg);
}

.navbar-account-text strong {
    font-weight: 700;
}

.navbar-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;

    z-index: 250;

    min-width: 200px;

    padding: 6px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);
}

.navbar-account-menu a,
.navbar-account-menu button {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    border: none;
    border-radius: var(--radius-sm);

    background: none;

    color: var(--color-text);

    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.navbar-account-menu a:hover,
.navbar-account-menu button:hover {
    background: var(--color-surface-hover);
}

.navbar-account-menu svg {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    color: var(--color-text-secondary);
}

.navbar-account-menu form {
    margin: 0;
}

@media (max-width: 480px) {
    .navbar-account-text {
        display: none;
    }

    .navbar-account-summary {
        padding: 8px;
    }
}

@media (min-width: 768px) {
    .navbar-inner {
        padding: 0 24px;
    }

    /* --navbar-height é 64px: a logo fica com ~20px a mais e, alinhada ao
       topo (.navbar-brand acima), esses ~20px "descem" abaixo da barra —
       o efeito de cartão sobreposto descrito no pedido. */
    .navbar-logo {
        height: 84px;
    }
}


/* =========================================================
   MODULE DRAWER
   Navegação aberta a partir do botão de menu do navbar — mesmo drawer em
   desktop e mobile, disponível em qualquer página administrativa. Seções
   (ver templates/layouts/base.html):
     Início   -> link direto para a Home.
     Módulos  -> categoria única com todos os grupos expansíveis (accordion,
                 no máximo um aberto por vez): primeiro o núcleo do Gestor
                 iComercio (Cadastros, Consultas, Movimento...), vindo de
                 handlers.GestorGroups — ainda sem rota, só organização
                 visual — e depois os módulos especiais de hoje (Gerencial,
                 Exibição Digital), vindos de handlers.ModuleGroups, mesma
                 fonte usada pelo Acesso rápido da Home.
     Sistema  -> link direto para Configurações.
   ========================================================= */

.drawer-backdrop {
    position: fixed;
    inset: 0;

    z-index: 300;

    background: rgba(15, 23, 42, 0.45);

    opacity: 0;

    transition: opacity 0.2s ease;
}

.drawer-backdrop:not([hidden]) {
    opacity: 1;
}

.module-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    z-index: 301;

    width: min(300px, 84vw);

    background: var(--color-surface);

    box-shadow: var(--shadow-lg);

    display: flex;
    flex-direction: column;

    transform: translateX(-100%);

    transition: transform 0.2s ease;
}

.module-drawer.module-drawer-open {
    transform: translateX(0);
}

.module-drawer-header {
    height: var(--navbar-height);

    padding: 0 14px 0 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--color-border);

    font-weight: 700;

    color: var(--color-text);
}

.module-drawer-body {
    overflow-y: auto;
}

/* Seções do drawer (Gestor, Módulos, e futuras como Sistema) — cada uma só
   com um título discreto acima; uma borda sutil separa a seção seguinte,
   sem precisar de outro contêiner visual. */
.drawer-section {
    padding: 8px;
}

.drawer-section+.drawer-section {
    padding-top: 4px;
    margin-top: 4px;

    border-top: 1px solid var(--color-border);
}

.drawer-section-title {
    display: block;

    padding: 10px 12px 6px;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: var(--color-text-muted);
}

.drawer-accordion {
    list-style: none;
}

/* Início/Configurações — link direto de uma linha só, sem accordion. Mesmo
   visual de .drawer-group-toggle (ícone + texto, mesmo padding/hover),
   reaproveitado via seletor combinado para não duplicar as regras. */
.drawer-group-toggle,
.drawer-nav-link {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border: none;
    border-radius: var(--radius-md);

    background: none;

    color: var(--color-text);

    text-decoration: none;

    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    transition: background-color 0.15s ease;
}

.drawer-group-toggle:hover,
.drawer-nav-link:hover {
    background: var(--color-surface-hover);
}

.drawer-nav-link.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.drawer-group-toggle span,
.drawer-nav-link span {
    flex: 1;
}

.drawer-group-toggle svg:first-child,
.drawer-nav-link svg {
    width: 19px;
    height: 19px;

    flex-shrink: 0;

    color: var(--color-primary);
}

.drawer-group-arrow {
    width: 15px;
    height: 15px;

    flex-shrink: 0;

    color: var(--color-text-muted);

    transition: transform 0.15s ease;
}

.drawer-group-toggle[aria-expanded="true"] .drawer-group-arrow {
    transform: rotate(90deg);
}


/* =========================================================
   SEGUNDO NÍVEL — subitens de GestorGroup e ModuleGroup
   Os dois compartilham o mesmo espaçamento/indentação; o que muda é o
   elemento: <span aria-disabled> para "em breve" (Gestor inteiro, e
   Ofertas TV em Módulos) e <a> para quem já tem rota real (Gerencial,
   Exibição Digital) — ver handlers.GestorSubItem/handlers.ModuleGroup.
   ========================================================= */

/* Indentação alinhada ao texto do grupo acima (ícone 19px + gap 12px +
   padding 12px do toggle), para o segundo nível ficar visivelmente "dentro"
   do primeiro sem uma segunda borda/caixa. */
.drawer-group-items {
    list-style: none;

    padding: 2px 8px 6px 43px;
}

/* perm-pendente: item do drawer com CodFuncao mapeado (ver ModuleLink em
   web/handlers/home.go) — nasce OCULTO no HTML (evita o "flash" do item
   sem permissão enquanto GET /v1/icomercio/usuarios/permissoes ainda está
   em andamento) e só static/js/ic-permissoes.js (ICPermissoes.aplicarMenu)
   remove esta classe, depois de confirmar a permissão. Um item nunca marcado
   com esta classe (CodFuncao = 0, tela sem função mapeada no ERP) continua
   sempre visível, sem checagem. */
.perm-pendente {
    display: none !important;
}

a.drawer-subitem,
span.drawer-subitem {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 9px 10px;

    border-radius: var(--radius-sm);

    text-decoration: none;

    font-size: 0.85rem;
    font-weight: 600;
}

span.drawer-subitem {
    color: var(--color-text-muted);

    cursor: not-allowed;
}

a.drawer-subitem {
    color: var(--color-text);

    cursor: pointer;

    transition: background-color 0.15s ease, color 0.15s ease;
}

a.drawer-subitem:hover {
    background: var(--color-surface-hover);
    color: var(--color-primary);
}

a.drawer-subitem.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* =========================================================
   TERCEIRO NÍVEL — só o grupo "Relatórios" (Relatórios > categoria >
   relatório, ver handlers.RelatorioCategorias). .drawer-subgroup-items já
   nasce dentro do padding-left:43px de .drawer-group-items (acima) — o
   padding aqui é só o indent ADICIONAL deste terceiro nível.
   ========================================================= */

.drawer-subgroup-toggle {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 9px 10px;

    border: none;
    border-radius: var(--radius-sm);

    background: none;

    color: var(--color-text);

    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    transition: background-color 0.15s ease;
}

.drawer-subgroup-toggle:hover {
    background: var(--color-surface-hover);
}

.drawer-subgroup-arrow {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    color: var(--color-text-muted);

    transition: transform 0.15s ease;
}

.drawer-subgroup-toggle[aria-expanded="true"] .drawer-subgroup-arrow {
    transform: rotate(90deg);
}

.drawer-subgroup-items {
    list-style: none;

    padding: 2px 0 6px 14px;
}

/* Badge "Em breve" — neutro e discreto, reaproveitado por todo subitem
   ainda não disponível, do Gestor inteiro a Ofertas (TV) em Módulos. */
.badge-soon {
    flex-shrink: 0;

    padding: 2px 7px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);

    background: var(--color-surface-hover);

    color: var(--color-text-muted);

    font-style: normal;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;

    white-space: nowrap;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {
    margin-bottom: 6px;
}

.breadcrumb ol {
    list-style: none;

    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    font-size: 0.8rem;

    color: var(--color-text-muted);
}

.breadcrumb li {
    display: flex;

    align-items: center;

    gap: 6px;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";

    color: var(--color-border-strong);
}

.breadcrumb a {
    color: var(--color-text-secondary);

    text-decoration: none;

    font-weight: 600;
}

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

.breadcrumb li[aria-current="page"] {
    color: var(--color-text);

    font-weight: 600;
}

/* Mobile: simplifica para "Início / Página atual" — some com os elos
   intermediários da trilha. */
@media (max-width: 767px) {
    .breadcrumb ol > li:not(:last-child):not(:first-child) {
        display: none;
    }
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 22px;
}

.page-header-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: var(--radius-md);

    background: var(--color-primary-light);

    color: var(--color-primary);
}

.page-header-icon svg {
    width: 22px;
    height: 22px;
}

.page-header h1 {
    font-size: 1.35rem;

    font-weight: 700;

    line-height: 1.25;
}

.page-header p {
    margin-top: 4px;

    color: var(--color-text-secondary);

    font-size: 0.88rem;
}


/* =========================================================
   SHELL / CONTAINERS
   Cada página escolhe a largura máxima adequada à sua finalidade:
   narrow  -> módulos mobile-first (Contagem de Estoque)
   medium  -> hubs simples (Estoque)
   wide    -> telas desktop-first / grids com muitos itens (Home, Scanntech)
   ========================================================= */

.shell-main {
    width: 100%;

    margin: 0 auto;

    /* padding-top com folga extra: no desktop a logo do navbar transborda
       ~20px abaixo da barra (ver .navbar-logo), então o conteúdo da
       página precisa de um respiro a mais aqui para não ficar colado
       nela — ver seção "NAVBAR" acima. */
    padding: 28px 16px 40px;
}

.shell-main--narrow {
    max-width: 720px;
}

.shell-main--medium {
    max-width: 960px;
}

.shell-main--wide {
    max-width: 1280px;
}

@media (min-width: 768px) {
    .shell-main {
        padding: 56px 24px 48px;
    }
}


/* =========================================================
   UTILITÁRIO
   ========================================================= */

.hidden {
    display: none !important;
}