/* Identidade visual Sigmam Brasil no admin do Django.
   Cores e fonte: docs/IDENTIDADE_VISUAL.md
   Verde #009873 · Preto #0B0B0C · Cinza #C2C4C6 · Branco #FFFFFF · Plus Jakarta Sans
   Direção "Grafite Técnico": cabeçalho preto com o logo para fundo escuro. */

/* Fonte oficial da marca, servida localmente (static/fonts, licença OFL) */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url(../fonts/plus-jakarta-sans/PlusJakartaSans-VariableFont_wght.ttf) format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url(../fonts/plus-jakarta-sans/PlusJakartaSans-Italic-VariableFont_wght.ttf) format("truetype");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

/* Tema claro: textos em preto, cabeçalho e botões em verde, barra de navegação em preto */
html[data-theme="light"],
:root {
    --sigmam-verde: #009873;
    --sigmam-verde-escuro: #007a5c;  /* links e hover: mais contraste sobre branco */
    --sigmam-preto: #0B0B0C;
    --sigmam-cinza: #C2C4C6;
    --sigmam-branco: #FFFFFF;
    --sigmam-ativo: #16211E;      /* item ativo / barra sob o cabeçalho */
    --sigmam-fundo: #F3F4F4;      /* fundo da área de conteúdo */
    --sigmam-cartao: #FFFFFF;
    --sigmam-borda-cartao: #E3E5E6;

    --primary: var(--sigmam-verde);
    --secondary: var(--sigmam-verde);
    --accent: var(--sigmam-branco);
    --primary-fg: var(--sigmam-branco);

    --body-fg: var(--sigmam-preto);
    --body-bg: var(--sigmam-branco);
    --body-quiet-color: #5c5e60;
    --body-medium-color: #2b2b2d;
    --body-loud-color: var(--sigmam-preto);

    --header-color: var(--sigmam-branco);
    --header-branding-color: var(--sigmam-branco);
    --header-bg: var(--sigmam-preto);
    --header-link-color: var(--sigmam-branco);

    --breadcrumbs-fg: var(--sigmam-cinza);
    --breadcrumbs-link-fg: var(--sigmam-branco);
    --breadcrumbs-bg: var(--sigmam-ativo);

    --link-fg: var(--sigmam-verde-escuro);
    --link-hover-color: var(--sigmam-preto);
    --link-selected-fg: var(--sigmam-verde);

    --hairline-color: #e6e7e8;
    --border-color: var(--sigmam-cinza);

    --darkened-bg: #f5f6f6;
    --selected-bg: #e9eaeb;
    --selected-row: #e6f5f1;

    --button-fg: var(--sigmam-branco);
    --button-bg: var(--sigmam-verde);
    --button-hover-bg: var(--sigmam-verde-escuro);
    --default-button-bg: var(--sigmam-verde-escuro);
    --default-button-hover-bg: var(--sigmam-verde);
    --close-button-bg: #5c5e60;
    --close-button-hover-bg: var(--sigmam-preto);
    --delete-button-bg: #5c5e60;
    --delete-button-hover-bg: var(--sigmam-preto);

    --message-success-bg: #e6f5f1;
    --message-warning-bg: #f2f3f3;

    --object-tools-fg: var(--sigmam-branco);
    --object-tools-bg: var(--sigmam-preto);
    --object-tools-hover-bg: var(--sigmam-verde);

    --font-family-primary: "Plus Jakarta Sans", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tema escuro: fundo preto, textos claros, cabeçalho continua verde */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: var(--sigmam-verde);
        --primary-fg: var(--sigmam-branco);

        --body-fg: #f2f2f2;
        --body-bg: var(--sigmam-preto);
        --body-quiet-color: var(--sigmam-cinza);
        --body-medium-color: #e0e0e0;
        --body-loud-color: var(--sigmam-branco);

        --breadcrumbs-link-fg: var(--sigmam-branco);
        --breadcrumbs-bg: #18191b;

        --link-fg: #3cc59f;
        --link-hover-color: #7fdcc2;
        --link-selected-fg: #3cc59f;

        --hairline-color: #232426;
        --border-color: #3a3b3d;

        --darkened-bg: #141516;
        --selected-bg: #1d1e20;
        --selected-row: #003d2e;

        --close-button-bg: #2a2b2d;
        --close-button-hover-bg: #555759;
        --delete-button-bg: #3a3b3d;
        --delete-button-hover-bg: #555759;
        --message-success-bg: #003d2e;
        --message-warning-bg: #232426;
        --sigmam-fundo: #0B0B0C;
        --sigmam-cartao: #141516;
        --sigmam-borda-cartao: #232426;
    }
}

html[data-theme="dark"] {
    --primary: var(--sigmam-verde);
    --primary-fg: var(--sigmam-branco);

    --body-fg: #f2f2f2;
    --body-bg: var(--sigmam-preto);
    --body-quiet-color: var(--sigmam-cinza);
    --body-medium-color: #e0e0e0;
    --body-loud-color: var(--sigmam-branco);

    --breadcrumbs-link-fg: var(--sigmam-branco);
    --breadcrumbs-bg: #18191b;

    --link-fg: #3cc59f;
    --link-hover-color: #7fdcc2;
    --link-selected-fg: #3cc59f;

    --hairline-color: #232426;
    --border-color: #3a3b3d;

    --darkened-bg: #141516;
    --selected-bg: #1d1e20;
    --selected-row: #003d2e;

    --close-button-bg: #2a2b2d;
    --close-button-hover-bg: #555759;
    --delete-button-bg: #3a3b3d;
    --delete-button-hover-bg: #555759;
    --message-success-bg: #003d2e;
    --message-warning-bg: #232426;
    --sigmam-fundo: #0B0B0C;
    --sigmam-cartao: #141516;
    --sigmam-borda-cartao: #232426;
}

/* Cabeçalho preto com o logo (versão para fundo escuro) e filete verde */
#header {
    border-bottom: 2px solid var(--sigmam-verde);
}

#site-name .sigmam-marca {
    display: inline-flex;
    align-items: center;
}

#site-name .sigmam-logo {
    display: block;
    width: auto;
    height: 36px;
}

/* O nome continua no HTML (leitores de tela e busca), escondido porque o logo já o mostra */
#site-name .sigmam-titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Tela de login: logo maior no topo da caixa */
.login #header {
    justify-content: center;
    padding: 24px 16px 20px;
}

.login #site-name .sigmam-logo {
    height: 48px;
}

#user-tools,
#user-tools a,
#user-tools button {
    color: var(--sigmam-branco);
}

/* Projetos Especiais (linha PE): etiqueta na lista e aviso na tela do item */
.sigmam-etiqueta-pe {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--sigmam-cinza);
    border-radius: 3px;
    background: var(--sigmam-preto);
    color: var(--sigmam-branco);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sigmam-aviso-pe {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 4px solid var(--body-loud-color);
    background: var(--darkened-bg);
    color: var(--body-fg);
    font-weight: 600;
}

/* Atalhos por tipo de item (lista de Itens) */
.sigmam-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.sigmam-atalhos a {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--body-fg);
    font-size: 0.8125rem;
}

.sigmam-atalhos a:hover,
.sigmam-atalhos a.ativo {
    border-color: var(--sigmam-verde);
    background: var(--sigmam-verde);
    color: var(--sigmam-branco);
}

/* Campos largos (Nome, Características, textos da Ficha Técnica): sem cortar o texto */
.sigmam-largo {
    width: 100%;
    max-width: 60em;
    box-sizing: border-box;
}

textarea.sigmam-largo {
    min-height: 2.6em;
    resize: vertical;
}

.inline-group .tabular td.field-texto,
.inline-group .tabular td.field-valor_texto {
    width: 100%;
}

.inline-group .tabular td.field-texto .sigmam-largo,
.inline-group .tabular td.field-valor_texto .sigmam-largo {
    max-width: none;
    min-width: 24em;
}

/* Dinheiro e números alinhados à direita nos campos */
input.sigmam-moeda,
input.sigmam-numero {
    text-align: right;
    min-width: 10em;
}

/* ------------------------------------------------------------------
   Ícones monocromáticos (padrão sóbrio, CLAUDE.md)
   Normal: cinza claro #C2C4C6 (static/admin/img/, gerado por
   scripts/gerar_icones_admin.py). Hover: verde da marca #009873.
   ------------------------------------------------------------------ */

/* Links com ícone: Adicionar, Modificar, Visualizar, Remover (página inicial, listas, telas) */
a.addlink:not(.object-tools a):is(:hover, :focus) {
    background-image: url(../img/icones/icon-addlink-verde.svg);
}
a:is(.changelink, .inlinechangelink):is(:hover, :focus) {
    background-image: url(../img/icones/icon-changelink-verde.svg);
}
a:is(.viewlink, .inlineviewlink):is(:hover, :focus) {
    background-image: url(../img/icones/icon-viewlink-verde.svg);
}
a.hidelink:is(:hover, :focus) {
    background-image: url(../img/icones/icon-hidelink-verde.svg);
}
a.deletelink:not(.submit-row a):is(:link, :visited) {
    color: var(--link-fg);
}
a.deletelink:not(.submit-row a):is(:hover, :focus) {
    color: var(--link-hover-color);
    background-image: url(../img/icones/icon-deletelink-verde.svg);
}
.inline-deletelink:is(:hover, :focus) {
    background-image: url(../img/icones/inline-delete-verde.svg);
}

/* Ícones ao lado dos campos (editar, adicionar, remover, ver) */
.related-widget-wrapper-link {
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}
.related-widget-wrapper-link img {
    opacity: 0;  /* o ícone é desenhado pelo fundo do link, para poder mudar de cor */
}
.related-widget-wrapper-link.change-related { background-image: url(../admin/img/icon-changelink.svg); }
.related-widget-wrapper-link.add-related { background-image: url(../admin/img/icon-addlink.svg); }
.related-widget-wrapper-link.delete-related { background-image: url(../admin/img/icon-deletelink.svg); }
.related-widget-wrapper-link.view-related { background-image: url(../admin/img/icon-viewlink.svg); }
.related-widget-wrapper-link.change-related:link:is(:hover, :focus) { background-image: url(../img/icones/icon-changelink-verde.svg); }
.related-widget-wrapper-link.add-related:link:is(:hover, :focus) { background-image: url(../img/icones/icon-addlink-verde.svg); }
.related-widget-wrapper-link.delete-related:link:is(:hover, :focus) { background-image: url(../img/icones/icon-deletelink-verde.svg); }
.related-widget-wrapper-link.view-related:link:is(:hover, :focus) { background-image: url(../img/icones/icon-viewlink-verde.svg); }

/* Ficha Técnica: campo "Valor (texto)" largo, quebrando linha sem cortar */
.inline-group .tabular table {
    width: 100%;
}
.inline-group .tabular td.field-valor_numero input {
    width: 9em;
    min-width: 0;
}

/* Estrutura do Produto: botões de ação, aviso e tabelas da estrutura explodida */
.object-tools .sigmam-form-acao {
    display: inline;
    margin: 0;
}

.object-tools .sigmam-botao-acao {
    display: block;
    padding: 3px 12px;
    border: 0;
    border-radius: 15px;
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-family: var(--font-family-primary);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.25rem;
    text-transform: uppercase;
    cursor: pointer;
}

.object-tools .sigmam-botao-acao:hover,
.object-tools .sigmam-botao-acao:focus {
    background: var(--object-tools-hover-bg);
}

.sigmam-aviso {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 4px solid var(--sigmam-cinza);
    background: var(--darkened-bg);
    color: var(--body-fg);
}

.sigmam-explodida h2 {
    margin: 24px 0 8px;
}

.sigmam-filtro-explosao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px;
}

.sigmam-tabela {
    width: 100%;
}

.sigmam-tabela th.numero,
.sigmam-tabela td.numero {
    text-align: right;
    white-space: nowrap;
}

.sigmam-tabela .sigmam-nivel-1 {
    font-weight: 600;
}

/* Parceiros: etiquetas de papel e botão "Buscar pelo CNPJ" */
.sigmam-etiqueta-papel {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--body-fg);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.sigmam-botao-cnpj {
    margin-left: 8px;
}

.sigmam-aviso-cnpj {
    display: block;
    margin-top: 4px;
    color: var(--body-quiet-color);
    font-size: 0.8125rem;
}


/* ------------------------------------------------------------------
   Telas internas — "Grafite Técnico" (docs/IDENTIDADE_VISUAL.md)
   Menu lateral preto · conteúdo #F3F4F4 · cartões brancos 12px
   ------------------------------------------------------------------ */

body:not(.login):not(.popup) {
    background: var(--sigmam-fundo);
}

/* Menu lateral preto, item ativo #16211E com filete verde */
#nav-sidebar {
    background: var(--sigmam-preto);
    border-right: 1px solid #1d1f21;
    padding-top: 8px;
}

#nav-sidebar .module {
    margin-bottom: 12px;
    border: 0;
    background: transparent;
}

#nav-sidebar .module caption,
#nav-sidebar .module caption a.section:link,
#nav-sidebar .module caption a.section:visited {
    background: transparent;
    color: #8a8d90;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#nav-sidebar .current-app caption a.section:link,
#nav-sidebar .current-app caption a.section:visited {
    color: var(--sigmam-cinza);
}

#nav-sidebar tr,
#nav-sidebar .module th,
#nav-sidebar .module td {
    border-bottom: 0;
    background: transparent; /* sem o fundo branco e as listras do Django */
}

#nav-sidebar a:link,
#nav-sidebar a:visited {
    color: var(--sigmam-cinza);
}

#nav-sidebar a:hover,
#nav-sidebar a:focus {
    color: var(--sigmam-branco);
}

#nav-sidebar tr.current-model {
    background: var(--sigmam-ativo);
    box-shadow: inset 3px 0 0 var(--sigmam-verde);
}

#nav-sidebar tr.current-model th a:link,
#nav-sidebar tr.current-model th a:visited {
    color: var(--sigmam-branco);
    font-weight: 600;
}

#nav-filter {
    margin: 4px 12px 12px;
    width: calc(100% - 24px);
    border: 1px solid #2a2d30;
    border-radius: 8px;
    background: #141516;
    color: var(--sigmam-branco);
}

.toggle-nav-sidebar {
    border-right-color: #1d1f21;
    background-color: var(--sigmam-preto);
    color: var(--sigmam-cinza);
}

.toggle-nav-sidebar:hover,
.toggle-nav-sidebar:focus {
    background-color: var(--sigmam-ativo);
    color: var(--sigmam-verde);
}

/* Cartões brancos: blocos da página inicial, lista, filtros, formulários e barra de salvar */
#content .module,
#changelist .changelist-form-container,
#changelist-filter,
#content .inline-group,
#content .submit-row {
    border: 1px solid var(--sigmam-borda-cartao);
    border-radius: 12px;
    background: var(--sigmam-cartao);
}

#content-main > .module,
#content-related .module,
#changelist .changelist-form-container,
#changelist-filter {
    overflow: hidden; /* cantos arredondados nas tabelas */
}

#content .module,
#content .inline-group {
    margin-bottom: 16px;
}

/* Bloco dentro de outro bloco (ex.: tabela de um inline): sem cartão duplo */
#content .inline-group .module,
#content .module .module,
#changelist .changelist-form-container .module {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
}

/* Títulos dos blocos: texto escuro com linha fina (verde só em destaques) */
#content .module > h2,
#content .module > table > caption,
#content .inline-group > h2,
#content fieldset.module > h2 {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sigmam-borda-cartao);
    border-radius: 12px 12px 0 0;
    background: transparent;
    color: var(--body-loud-color);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#content .module > table > caption a:link,
#content .module > table > caption a:visited {
    color: var(--body-loud-color);
}

#content .module > table > caption a:hover {
    color: var(--sigmam-verde);
}

/* Relatórios do Comercial: "Exportar CSV" no título de cada quadro */
#content fieldset.module > h2 a.sigmam-csv:link,
#content fieldset.module > h2 a.sigmam-csv:visited {
    float: right;
    color: var(--body-quiet-color);
    font-weight: 400;
}

#content fieldset.module > h2 a.sigmam-csv:hover {
    color: var(--sigmam-verde);
}

#content .submit-row {
    padding: 12px 16px;
}

/* Lista: barra de busca e de ações dentro do cartão */
#changelist #toolbar,
#changelist .actions {
    border-bottom: 1px solid var(--sigmam-borda-cartao);
    background: transparent;
}

#changelist-filter h2 {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sigmam-borda-cartao);
    background: transparent;
    color: var(--body-loud-color);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Estoque: formulário de estorno */
.sigmam-form-estorno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--sigmam-borda-cartao);
    border-radius: 12px;
    background: var(--sigmam-cartao);
}