/* Visual do admin alinhado ao dashboard (Bootstrap 5): mesma barra escura,
   mesmas cores e fonte. A primeira parte só redefine as variáveis de cor do
   próprio admin do Django; o resto ajusta os componentes (barra do topo,
   tabelas, filtros, formulários). */

html[data-theme="light"],
:root {
    --primary: #0d6efd;
    --secondary: #212529;
    --accent: #ffffff;
    --primary-fg: #fff;

    --body-fg: #212529;
    --body-bg: #ffffff;
    --body-quiet-color: #6c757d;
    --body-medium-color: #495057;
    --body-loud-color: #000;

    --header-color: #fff;
    --header-branding-color: #fff;
    --header-bg: #212529;
    --header-link-color: rgba(255, 255, 255, 0.72);

    --breadcrumbs-fg: #6c757d;
    --breadcrumbs-link-fg: #0d6efd;
    --breadcrumbs-bg: transparent;

    --link-fg: #0d6efd;
    --link-hover-color: #0a58ca;
    --link-selected-fg: #0a58ca;

    --hairline-color: #e9ecef;
    --border-color: #dee2e6;

    --error-fg: #dc3545;

    --message-success-bg: #d1e7dd;
    --message-warning-bg: #fff3cd;
    --message-error-bg: #f8d7da;

    --darkened-bg: #f8f9fa;
    --selected-bg: #e9ecef;
    --selected-row: #e7f1ff;

    --button-fg: #fff;
    --button-bg: #0d6efd;
    --button-hover-bg: #0b5ed7;
    --default-button-bg: #198754;
    --default-button-hover-bg: #157347;
    --close-button-bg: #6c757d;
    --close-button-hover-bg: #5c636a;
    --delete-button-bg: #dc3545;
    --delete-button-hover-bg: #bb2d3b;

    --object-tools-fg: #fff;
    --object-tools-bg: #0d6efd;
    --object-tools-hover-bg: #0b5ed7;

    --font-family-primary:
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", "Liberation Sans", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Próprias deste arquivo */
    --cartao-bg: #ffffff;
    --cartao-sombra: 0 1px 2px rgba(33, 37, 41, 0.06);
    --foco: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --raio: 0.5rem;
    --raio-pequeno: 0.375rem;
    --verde: #198754;
    --verde-texto: #0f5132;
    --verde-fundo: #d1e7dd;
    --vermelho: #dc3545;
    --vermelho-texto: #842029;
    --vermelho-fundo: #f8d7da;
    --amarelo-texto: #664d03;
    --amarelo-fundo: #fff3cd;
    --cinza-texto: #41464b;
    --cinza-fundo: #e2e3e5;

    color-scheme: light;
}

html[data-theme="dark"] {
    --primary: #6ea8fe;
    --secondary: #212529;
    --primary-fg: #fff;

    --body-fg: #dee2e6;
    --body-bg: #212529;
    --body-quiet-color: #9aa3ab;
    --body-medium-color: #ced4da;
    --body-loud-color: #fff;

    --header-bg: #1a1d20;
    --header-link-color: rgba(255, 255, 255, 0.72);

    --breadcrumbs-fg: #9aa3ab;
    --breadcrumbs-link-fg: #6ea8fe;
    --breadcrumbs-bg: transparent;

    --link-fg: #6ea8fe;
    --link-hover-color: #9ec5fe;
    --link-selected-fg: #9ec5fe;

    --hairline-color: #343a40;
    --border-color: #495057;

    --error-fg: #ea868f;

    --message-success-bg: #051b11;
    --message-warning-bg: #332701;
    --message-error-bg: #2c0b0e;

    --darkened-bg: #2b3035;
    --selected-bg: #343a40;
    --selected-row: #10243f;

    --button-bg: #0d6efd;
    --button-hover-bg: #0b5ed7;
    --close-button-bg: #495057;
    --close-button-hover-bg: #5c636a;

    --cartao-bg: #2b3035;
    --cartao-sombra: none;
    --verde-texto: #75b798;
    --verde-fundo: #051b11;
    --vermelho-texto: #ea868f;
    --vermelho-fundo: #2c0b0e;
    --amarelo-texto: #ffda6a;
    --amarelo-fundo: #332701;
    --cinza-texto: #ced4da;
    --cinza-fundo: #343a40;

    color-scheme: dark;
}

body {
    font-size: 0.9375rem;
    line-height: 1.5;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Barra do topo (igual à navbar do dashboard) ---------- */

#header.barra-topo {
    display: flex;
    flex-direction: row;
    flex-shrink: 0; /* #container é flex em coluna: sem isso a barra não cresce ao quebrar linha */
    justify-content: flex-start;
    align-items: center;
    gap: 8px 24px;
    flex-wrap: wrap;
    padding: 10px 32px;
    min-height: 56px;
    box-sizing: border-box;
    background: var(--header-bg);
    color: var(--header-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.barra-topo .marca {
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.barra-topo .marca:hover,
.barra-topo .marca:focus {
    color: #fff;
    text-decoration: none;
}

.barra-links,
.barra-usuario {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.barra-usuario {
    margin-left: auto;
}

.barra-topo a,
.barra-topo summary,
.barra-topo #botao-tema {
    color: var(--header-link-color);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: var(--raio-pequeno);
    font-size: 0.9375rem;
}

.barra-topo .barra-links > a:hover,
.barra-topo summary:hover,
.barra-topo #botao-tema:hover {
    color: #fff;
}

.barra-topo .barra-links > a.ativo {
    color: #fff;
}

.barra-topo #botao-tema {
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
}

/* Menus suspensos (Relatórios e usuário) feitos com <details> */
.menu-suspenso {
    position: relative;
}

.menu-suspenso summary {
    list-style: none;
    cursor: pointer;
    display: block;
}

.menu-suspenso summary::-webkit-details-marker {
    display: none;
}

.menu-suspenso summary::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    vertical-align: 0.2em;
    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.menu-suspenso[open] summary {
    color: #fff;
}

.menu-suspenso ul {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;
    min-width: 240px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--cartao-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.menu-suspenso.menu-direita ul {
    left: auto;
    right: 0;
}

.menu-suspenso li {
    list-style: none;
    padding: 0;
}

.barra-topo .menu-suspenso li a,
.barra-topo .menu-suspenso li button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    border-radius: 0;
    color: var(--body-fg);
    font-size: 0.9375rem;
    text-align: left;
    white-space: nowrap;
}

.barra-topo .menu-suspenso li a:hover,
.barra-topo .menu-suspenso li button:hover {
    background: var(--darkened-bg);
    color: var(--body-loud-color);
}

.barra-topo #logout-form {
    margin: 0;
    border-top: 1px solid var(--hairline-color);
    padding-top: 6px;
    margin-top: 6px;
}

.barra-topo #logout-form button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* ---------- Trilha (breadcrumbs) e títulos ---------- */

div.breadcrumbs {
    background: transparent;
    color: var(--breadcrumbs-fg);
    padding: 16px 32px 0;
    font-size: 0.875rem;
}

div.breadcrumbs a {
    color: var(--breadcrumbs-link-fg);
}

div.breadcrumbs a:focus,
div.breadcrumbs a:hover {
    color: var(--link-hover-color);
}

#content {
    padding: 16px 32px 40px;
}

#content h1 {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--body-loud-color);
    margin: 0 0 20px;
}

#content h2 {
    font-weight: 500;
}

/* ---------- Blocos (módulos) como cartões ---------- */

.module {
    background: var(--cartao-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    box-shadow: var(--cartao-sombra);
    overflow: hidden;
}

.module h2,
.module caption,
.inline-group h2 {
    background: var(--darkened-bg);
    color: var(--body-loud-color);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

/* ---------- Botões ---------- */

.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
    border-radius: var(--raio-pequeno);
    padding: 8px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    height: auto;
    line-height: 1.4;
}

.submit-row {
    background: transparent;
    border: 0;
    padding: 16px 0 0;
    gap: 8px;
}

.submit-row a.deletelink {
    border-radius: var(--raio-pequeno);
    padding: 8px 16px;
    height: auto;
    line-height: 1.4;
}

.submit-row a.closelink {
    border-radius: var(--raio-pequeno);
    padding: 8px 16px;
    height: auto;
    line-height: 1.4;
}

/* Botões do canto ("Adicionar cobrança", "Gerar cobranças do mês") */
.object-tools {
    margin-top: -60px;
}

.object-tools a:link,
.object-tools a:visited {
    border-radius: var(--raio-pequeno);
    padding: 8px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.object-tools a.addlink {
    background-image: none;
    padding-left: 14px;
}

.object-tools a.addlink::before {
    content: "+ ";
}

/* ---------- Campos de formulário ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="month"],
input[type="date"],
textarea,
select,
.vTextField {
    border: 1px solid var(--border-color);
    border-radius: var(--raio-pequeno);
    padding: 7px 10px;
    font-size: 0.9375rem;
    background-color: var(--body-bg);
    color: var(--body-fg);
    box-sizing: border-box;
}

select {
    height: auto;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #86b7fe;
    box-shadow: var(--foco);
    outline: none;
}

fieldset.module {
    margin-bottom: 20px;
}

.form-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline-color);
}

.aligned label,
.aligned .flex-container > label {
    color: var(--body-medium-color);
    font-weight: 500;
    padding-top: 8px;
}

.aligned label.required,
label.required {
    color: var(--body-fg);
    font-weight: 600;
}

div.help,
.help {
    color: var(--body-quiet-color);
}

.errornote {
    border: 1px solid var(--vermelho);
    border-radius: var(--raio-pequeno);
    background: var(--vermelho-fundo);
    color: var(--vermelho-texto);
    padding: 10px 14px;
    font-size: 0.9375rem;
}

ul.errorlist li {
    font-size: 0.875rem;
}

/* Autocomplete (select2) com a mesma cara dos outros campos */
.select2-container--admin-autocomplete .select2-selection--single,
.select2-container--admin-autocomplete .select2-selection--multiple {
    border-color: var(--border-color);
    border-radius: var(--raio-pequeno);
    min-height: 38px;
}

.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

/* ---------- Mensagens ---------- */

ul.messagelist {
    padding: 0;
    margin: 0 0 4px;
}

ul.messagelist li {
    margin: 0 0 8px;
    padding: 12px 16px 12px 44px;
    border-radius: var(--raio);
    border: 1px solid transparent;
    background-position: 16px 50%;
    font-size: 0.9375rem;
    color: var(--verde-texto);
    background-color: var(--verde-fundo);
}

ul.messagelist li.warning {
    color: var(--amarelo-texto);
    background-color: var(--amarelo-fundo);
}

ul.messagelist li.error {
    color: var(--vermelho-texto);
    background-color: var(--vermelho-fundo);
}

/* Mensagens ficam alinhadas ao conteúdo */
main.content > .messagelist {
    padding: 16px 32px 0;
}

/* ---------- Listas (change list) ---------- */

/* #changelist também tem a classe .module, mas não deve virar um cartão:
   só a tabela e o filtro são cartões. */
#changelist.module {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#changelist .changelist-form-container {
    gap: 20px;
}

#changelist #toolbar {
    background: transparent;
    border: 0;
    padding: 0 0 12px;
    margin: 0;
}

#changelist #toolbar form input[type="text"] {
    min-width: 280px;
    padding: 8px 12px;
}

#changelist-search img {
    display: none;
}

#changelist-search label {
    position: relative;
}

#changelist #toolbar form input[type="submit"] {
    padding: 8px 14px;
}

.quiet,
#changelist-search .small {
    color: var(--body-quiet-color);
}

#changelist .results {
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    background: var(--cartao-bg);
    box-shadow: var(--cartao-sombra);
}

#result_list {
    width: 100%;
}

#result_list thead th {
    background: var(--darkened-bg);
    color: var(--body-medium-color);
    border-bottom: 1px solid var(--border-color);
    border-left: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    padding: 0;
}

#result_list thead th .text a,
#result_list thead th .text span {
    padding: 10px 12px;
}

#result_list thead th.sorted {
    background: var(--selected-bg);
}

#result_list tbody td,
#result_list tbody th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--hairline-color);
    vertical-align: middle;
    font-size: 0.9375rem;
}

#result_list tbody tr:last-child td,
#result_list tbody tr:last-child th {
    border-bottom: 0;
}

#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background: var(--darkened-bg);
}

#result_list tbody tr.selected td,
#result_list tbody tr.selected th {
    background: var(--selected-row);
}

#result_list tbody th a {
    font-weight: 600;
}

/* Barra de ações em massa */
#changelist .actions {
    background: transparent;
    border: 0;
    padding: 0 0 12px;
    color: var(--body-medium-color);
}

#changelist .actions select {
    padding: 6px 10px;
}

#changelist .actions .button {
    padding: 6px 14px;
    background: var(--close-button-bg);
}

#changelist .actions .button:hover {
    background: var(--close-button-hover-bg);
}

/* Navegação por data (date_hierarchy) */
.xfull ul.toplinks,
#changelist .toplinks {
    border: 0;
    padding: 0 0 12px;
    background: transparent;
}

.toplinks li a {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.8125rem;
}

/* Paginação */
#changelist .paginator {
    border-top: 0;
    background: transparent;
    padding: 12px 0 0;
    color: var(--body-quiet-color);
    font-size: 0.875rem;
}

.paginator a:link,
.paginator a:visited,
.paginator .this-page {
    border-radius: var(--raio-pequeno);
    padding: 4px 10px;
}

.paginator a:link,
.paginator a:visited {
    background: var(--darkened-bg);
    color: var(--link-fg);
    border: 1px solid var(--border-color);
}

.paginator .this-page {
    background: var(--primary);
    color: #fff;
}

/* Filtros laterais */
#changelist-filter {
    background: var(--cartao-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    box-shadow: var(--cartao-sombra);
    overflow: hidden;
    flex: 0 0 220px;
}

#changelist-filter h2 {
    background: var(--darkened-bg);
    color: var(--body-loud-color);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

#changelist-filter h3,
#changelist-filter summary {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--body-medium-color);
    margin: 14px 16px 6px;
}

#changelist-filter details summary {
    margin: 0;
    padding: 14px 16px 6px;
}

#changelist-filter ul {
    padding: 0 8px 8px;
    margin: 0;
    border-bottom: 1px solid var(--hairline-color);
}

#changelist-filter li {
    padding: 0;
    margin: 0;
}

#changelist-filter li a {
    display: block;
    padding: 5px 10px;
    border-radius: var(--raio-pequeno);
    color: var(--body-fg);
    font-size: 0.875rem;
}

#changelist-filter li a:hover {
    background: var(--darkened-bg);
    color: var(--link-fg);
}

#changelist-filter li.selected {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}

#changelist-filter li.selected a {
    background: var(--selected-row);
    color: var(--link-fg);
    font-weight: 600;
}

#changelist-filter #changelist-filter-extra-actions {
    padding: 10px 16px;
    margin: 0;
    font-size: 0.8125rem;
}

/* ---------- Pagamentos dentro da cobrança (inline) ---------- */

.inline-group {
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--cartao-bg);
}

.inline-group .tabular {
    border: 0;
}

.inline-group .tabular thead th {
    background: var(--darkened-bg);
    color: var(--body-medium-color);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    padding: 8px 10px;
}

.inline-group .tabular td {
    padding: 8px 10px;
    vertical-align: middle;
}

.inline-group .tabular tr.add-row td {
    background: var(--darkened-bg);
    padding: 10px;
}

/* ---------- Sidebar dos modelos (telas internas) ---------- */

#nav-sidebar {
    background: var(--darkened-bg);
    border-right: 1px solid var(--border-color);
}

#nav-sidebar .module {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

#nav-sidebar .module caption,
#nav-sidebar .module h2 {
    background: transparent;
    border-bottom: 0;
    color: var(--body-quiet-color);
    font-size: 0.8125rem;
    padding: 16px 12px 6px;
}

#nav-sidebar .module caption a.section:link,
#nav-sidebar .module caption a.section:visited {
    color: var(--body-quiet-color);
}

#nav-sidebar .module th a {
    font-size: 0.9375rem;
    color: var(--body-fg);
}

#nav-sidebar .current-model {
    background: var(--selected-row);
}

#nav-sidebar .current-model th a {
    color: var(--link-fg);
    font-weight: 600;
}

#nav-sidebar #nav-filter {
    margin: 12px 8px 4px;
    width: calc(100% - 16px);
    border-radius: var(--raio-pequeno);
}

.toggle-nav-sidebar {
    background: var(--darkened-bg);
    border-right: 1px solid var(--border-color);
    color: var(--body-quiet-color);
}

/* ---------- Página inicial do admin ---------- */

.painel-admin #content {
    max-width: 1200px;
}

.atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.atalho {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 16px;
    background: var(--darkened-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    color: var(--body-fg);
    text-decoration: none;
}

a.atalho:link,
a.atalho:visited {
    color: var(--body-fg);
}

a.atalho:hover,
a.atalho:focus-visible {
    border-color: var(--primary);
    color: var(--body-fg);
    text-decoration: none;
}

.atalho-icone {
    grid-row: span 2;
    width: 26px;
    height: 26px;
    color: var(--body-medium-color);
}

.atalho-principal .atalho-icone,
.atalho-alerta .atalho-icone {
    color: #fff;
}

.atalho strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--body-loud-color);
}

.atalho span:not(.atalho-icone) {
    font-size: 0.8125rem;
    color: var(--body-quiet-color);
}

/* "Lançar pagamento" é a ação mais usada no dia a dia */
a.atalho.atalho-principal:link,
a.atalho.atalho-principal:visited {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

.atalho.atalho-principal strong,
.atalho.atalho-principal span:not(.atalho-icone) {
    color: #fff;
}

a.atalho.atalho-principal:hover {
    background: #157347;
    border-color: #157347;
}

/* Mesmo vermelho do cartão de inadimplência do dashboard */
a.atalho.atalho-alerta:link,
a.atalho.atalho-alerta:visited {
    background: var(--vermelho);
    border-color: var(--vermelho);
}

.atalho.atalho-alerta strong,
.atalho.atalho-alerta span:not(.atalho-icone) {
    color: #fff;
}

a.atalho.atalho-alerta:hover {
    background: #bb2d3b;
    border-color: #bb2d3b;
}

.painel-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.painel-admin #content h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--body-loud-color);
    margin: 0 0 12px;
    background: none;
    padding: 0;
    text-transform: none;
}

.grupo-cadastros + .grupo-cadastros {
    margin-top: 28px;
}

.cartoes-modelos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.cartao-modelo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--cartao-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    box-shadow: var(--cartao-sombra);
}

.cartao-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cartao-nome {
    font-size: 1rem;
    font-weight: 600;
}

a.cartao-nome:link,
a.cartao-nome:visited {
    color: var(--body-loud-color);
}

a.cartao-nome:hover {
    color: var(--link-fg);
}

.cartao-total {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--body-quiet-color);
    font-variant-numeric: tabular-nums;
}

.cartao-acoes {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.875rem;
}

.cartao-adicionar {
    font-weight: 600;
}

.painel-recentes {
    padding: 16px;
    background: var(--darkened-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
}

.painel-recentes .vazio {
    color: var(--body-quiet-color);
    font-size: 0.875rem;
    margin: 0;
}

.lista-recentes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-recentes li {
    list-style: none;
    padding: 8px 0 8px 14px;
    border-bottom: 1px solid var(--hairline-color);
    position: relative;
}

.lista-recentes li:last-child {
    border-bottom: 0;
}

/* Bolinha colorida indica o tipo: verde criou, azul editou, vermelho excluiu */
.lista-recentes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.lista-recentes li.adicao::before {
    background: var(--verde);
}

.lista-recentes li.exclusao::before {
    background: var(--vermelho);
}

.recente-nome {
    display: block;
    font-size: 0.875rem;
}

.lista-recentes li.exclusao .recente-nome {
    text-decoration: line-through;
    color: var(--body-quiet-color);
}

.recente-tipo {
    display: block;
    font-size: 0.75rem;
    color: var(--body-quiet-color);
}

/* ---------- Tela de login ---------- */

.login #container {
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.login #header.barra-topo {
    justify-content: center;
    padding: 16px;
}

.login #content {
    padding: 20px 24px 24px;
}

.login .submit-row input {
    width: 100%;
    background: var(--verde);
}

/* ---------- Telas pequenas ---------- */

@media (max-width: 1024px) {
    #header.barra-topo,
    div.breadcrumbs,
    #content,
    main.content > .messagelist {
        padding-left: 16px;
        padding-right: 16px;
    }

    .painel-colunas {
        grid-template-columns: minmax(0, 1fr);
    }

    .object-tools {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .barra-usuario {
        margin-left: 0;
    }

    #changelist #toolbar form input[type="text"] {
        min-width: 0;
        width: 100%;
    }
}

/* ---------- Ajustes finos ---------- */

/* O dashboard.css do Django fixa a página inicial em 600px */
.dashboard.painel-admin #content {
    width: auto;
    max-width: 1200px;
}

/* Sidebar um pouco mais estreita para sobrar espaço para as colunas da lista */
.main > #nav-sidebar {
    flex-basis: 220px;
    margin-left: -221px;
}

.main.shifted > #nav-sidebar {
    margin-left: 0;
}

#nav-sidebar .module tr,
#nav-sidebar .module th,
#nav-sidebar .module td {
    background: transparent;
}

#toolbar form #searchbar {
    height: auto;
}

#changelist .actions select,
#changelist .actions .button {
    height: auto;
    line-height: 1.4;
}

#changelist-filter #changelist-filter-extra-actions {
    text-align: left;
}

#result_list tbody td,
#result_list tbody th {
    padding: 10px 8px;
    font-size: 0.875rem;
}

/* Botão principal (Salvar) em destaque; os outros ficam discretos */
.submit-row input.default {
    text-transform: none;
}

.submit-row input:not(.default) {
    background: var(--close-button-bg);
}

.submit-row input:not(.default):hover {
    background: var(--close-button-hover-bg);
}

/* Pagamentos dentro da cobrança: linhas compactas */
.inline-group fieldset.module {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.inline-group .tabular tr.has_original td {
    padding-top: 30px;
}

.inline-group .tabular td.original p {
    font-size: 0.75rem;
    color: var(--body-quiet-color);
    padding-left: 10px;
}

.inline-group .tabular textarea {
    width: 100%;
    resize: vertical;
}

/* A etiqueta "Recibo #N" da linha fica na célula .original, que não deve
   receber o espaço extra do topo */
.inline-group .tabular tr.has_original td.original {
    padding: 2px 0 0;
}

.inline-group .tabular td.field-data_pagamento {
    white-space: nowrap;
}

.inline-group .tabular input.vDateField {
    width: 8.5em;
}

/* Deixa a coluna principal quebrar linha para as demais (status, vencimento)
   caberem sem rolagem lateral */
#result_list tbody th,
#result_list tbody td {
    white-space: normal;
}

#result_list tbody th {
    min-width: 160px;
}

#changelist-filter {
    flex-basis: 190px;
}

/* A etiqueta "Recibo #N" fica no topo da linha, acima dos campos */
.inline-group .tabular td.original {
    vertical-align: top;
}

/* Títulos das colunas podem quebrar linha ("Dia vencimento"), assim o espaço
   sobra para o conteúdo; links curtos ("Baixar PDF") ficam numa linha só */
#result_list thead th {
    white-space: normal;
    vertical-align: bottom;
}

#result_list tbody td a {
    white-space: nowrap;
}

#result_list tbody td.field-cobranca {
    min-width: 200px;
}

/* ---------- Botão "Voltar" (substitui a trilha; ver base_site.html) ---------- */

a.botao-voltar:link,
a.botao-voltar:visited {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--raio-pequeno);
    background: var(--cartao-bg);
    color: var(--body-medium-color);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

a.botao-voltar:hover,
a.botao-voltar:focus-visible {
    border-color: var(--primary);
    color: var(--link-fg);
    text-decoration: none;
}

/* Alinha o botão "Voltar" com o título: a trilha fica fora da área que
   tem o botão de abrir a sidebar (23px) */
div.breadcrumbs {
    padding-left: 55px;
}

@media (max-width: 1024px) {
    div.breadcrumbs {
        padding-left: 39px;
    }
}

@media (max-width: 767px) {
    div.breadcrumbs {
        padding-left: 16px;
    }
}

/* Títulos dos grupos do formulário ("Partes", "Prazo", "Pagamentos"):
   o admin desenha uma borda escura em volta; fica só a linha de baixo */
.module h2.fieldset-heading,
.inline-group h2 {
    border: 0;
    border-bottom: 1px solid var(--border-color);
}

/* ---------- Correções da revisão de usabilidade ---------- */

/* Links da barra do topo: o base.css do Django pinta "#header a:link" e
   sublinha no hover, passando por cima das regras da barra. Aqui o
   seletor tem o mesmo peso (#header) para valer o visual do dashboard. */
#header.barra-topo a:link,
#header.barra-topo a:visited {
    color: var(--header-link-color);
    text-decoration: none;
}

#header.barra-topo a:hover,
#header.barra-topo a:focus-visible,
#header.barra-topo .marca:link,
#header.barra-topo .marca:visited,
#header.barra-topo .barra-links > a.ativo {
    color: #fff;
    text-decoration: none;
}

#header.barra-topo .menu-suspenso li a:link,
#header.barra-topo .menu-suspenso li a:visited,
#header.barra-topo #logout-form button {
    color: var(--body-fg);
}

#header.barra-topo .menu-suspenso li a:hover,
#header.barra-topo #logout-form button:hover {
    color: var(--body-loud-color);
}

/* Botão "Acessar" do login: é o principal da tela, não um secundário */
.login .submit-row input:not(.default) {
    background: var(--verde);
}

.login .submit-row input:not(.default):hover {
    background: #157347;
}

/* Colunas de dinheiro alinhadas à direita, com algarismos de mesma largura */
#result_list th[class*="_brl"],
#result_list td[class*="_brl"],
#result_list th.column-saldo_devedor,
#result_list td.field-saldo_devedor {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* "Sair": o base.css do Django estiliza "#logout-form button" como texto
   miúdo em caixa-alta (pensado para a barra antiga); aqui volta a ser um
   item do menu igual aos outros */
#header.barra-topo #logout-form button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 0.9375rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
}

#header.barra-topo #logout-form {
    display: block;
}

/* ---------- Botão "Receber" na lista de cobranças ---------- */

#result_list a.botao-receber:link,
#result_list a.botao-receber:visited {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid var(--verde);
    border-radius: var(--raio-pequeno);
    color: var(--verde-texto);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

#result_list a.botao-receber:hover,
#result_list a.botao-receber:focus-visible {
    background: var(--verde);
    color: #fff;
}

/* ---------- Botão "Menu" (só no celular) ---------- */

#header.barra-topo #botao-menu {
    display: none;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--raio-pequeno);
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

/* ---------- Celular ---------- */

@media (max-width: 767px) {
    #header.barra-topo {
        padding: 10px 16px;
        gap: 8px;
    }

    .barra-topo .marca {
        font-size: 1.0625rem;
    }

    .barra-usuario {
        margin-left: auto;
        flex-wrap: nowrap;
    }

    #header.barra-topo #botao-menu {
        display: block;
    }

    /* Links recolhidos; abrem em coluna, ocupando a largura toda */
    .barra-links {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 6px;
    }

    #header.menu-aberto .barra-links {
        display: flex;
    }

    /* Relatórios abre embaixo do item, dentro do menu, e não por cima */
    .barra-links .menu-suspenso ul {
        position: static;
        box-shadow: none;
        margin: 4px 0 8px;
    }

    /* Listas: só as colunas essenciais; o resto aparece ao abrir o registro */
    #changelist .actions,
    #result_list .action-checkbox-column,
    #result_list .action-checkbox,
    #result_list .column-valor_brl,
    #result_list .field-valor_brl,
    #result_list .column-valor_pago_brl,
    #result_list .field-valor_pago_brl,
    #result_list .column-vencimento_curto,
    #result_list .field-vencimento_curto,
    #result_list .column-status_badge,
    #result_list .field-status_badge,
    #result_list .column-data_pagamento_curta,
    #result_list .field-data_pagamento_curta,
    #result_list .column-forma,
    #result_list .field-forma,
    #result_list .column-recibo_pdf_link,
    #result_list .field-recibo_pdf_link,
    #result_list .column-data_inicio_curta,
    #result_list .field-data_inicio_curta,
    #result_list .column-data_fim_curta,
    #result_list .field-data_fim_curta,
    #result_list .column-dia_vencimento,
    #result_list .field-dia_vencimento,
    #result_list .column-status,
    #result_list .field-status,
    #result_list .column-contrato_pdf_link,
    #result_list .field-contrato_pdf_link,
    #result_list .column-tipo_pessoa,
    #result_list .field-tipo_pessoa,
    #result_list .column-cpf_cnpj,
    #result_list .field-cpf_cnpj,
    #result_list .column-tipo,
    #result_list .field-tipo {
        display: none;
    }

    #result_list tbody th {
        min-width: 0;
    }

    #result_list tbody td,
    #result_list tbody th,
    #result_list thead th .text a,
    #result_list thead th .text span {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Pagamentos dentro da cobrança: rolagem lateral dentro do cartão */
    .inline-group fieldset.module {
        overflow-x: auto;
    }

    .object-tools {
        float: none;
        margin: 0 0 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .object-tools li {
        margin: 0;
    }
}

/* Celular, parte 2. O responsive.css do Django carrega depois deste
   arquivo, por isso alguns seletores começam com "body" (mais peso). */
@media (max-width: 767px) {
    body #changelist .actions {
        display: none;
    }

    body #changelist #toolbar form > div {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    body #changelist #toolbar form input[type="text"] {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    body #content .object-tools li {
        margin: 0;
    }

    .barra-topo a,
    .barra-topo summary,
    .barra-topo #botao-tema {
        padding: 6px 8px;
    }

    /* Cada linha da lista vira um cartão: o nome em cima e os valores
       numa linha embaixo. Assim nada fica espremido nem fora da tela. */
    #result_list thead {
        display: none;
    }

    #result_list,
    #result_list tbody {
        display: block;
        width: 100%;
    }

    #result_list tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
        padding: 12px;
        border-bottom: 1px solid var(--hairline-color);
    }

    #result_list tbody tr:last-child {
        border-bottom: 0;
    }

    #result_list tbody tr:hover td,
    #result_list tbody tr:hover th {
        background: transparent;
    }

    #result_list tbody th,
    #result_list tbody td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
    }

    #result_list tbody th {
        flex: 1 0 100%;
        font-size: 0.9375rem;
    }

    #result_list td.field-receber_link {
        margin-left: auto;
    }
}

/* ---------- Rodada 3 da revisão ---------- */

/* Botão secundário nos botões do canto (ex.: "Adicionar cobrança" à mão,
   ao lado de "Gerar cobranças do mês") */
.model-cobranca.change-list .object-tools a.addlink:link,
.model-cobranca.change-list .object-tools a.addlink:visited {
    background: var(--cartao-bg);
    border: 1px solid var(--border-color);
    color: var(--body-medium-color);
}

.model-cobranca.change-list .object-tools a.addlink:hover {
    border-color: var(--primary);
    color: var(--link-fg);
}

/* Ícones ao lado dos campos de escolha (imóvel, inquilino, cobrança):
   ficam o lápis (editar) e o + (cadastrar novo), discretos. O X abria a
   exclusão do registro escolhido e o olho repetia o lápis. */
.related-widget-wrapper-link.delete-related,
.related-widget-wrapper-link.view-related {
    display: none;
}

.related-widget-wrapper-link img {
    filter: grayscale(1);
    opacity: 0.55;
}

.related-widget-wrapper-link:hover img,
.related-widget-wrapper-link:focus-visible img {
    opacity: 1;
}

/* "Mostrar contagem" / "Limpar filtros" no topo do filtro: um link discreto */
#changelist-filter #changelist-filter-extra-actions {
    padding: 8px 16px;
    border-bottom: 1px solid var(--hairline-color);
}

#changelist-filter #changelist-filter-extra-actions h3 {
    margin: 2px 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Usuários e grupos na página inicial: lista simples */
.lista-secundaria {
    display: flex;
    gap: 8px 24px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.lista-secundaria li {
    list-style: none;
    padding: 0;
    font-size: 0.9375rem;
}

.cartao-total-pequeno {
    margin-left: 4px;
    color: var(--body-quiet-color);
    font-variant-numeric: tabular-nums;
}

.painel-admin #content .grupo-secundario h2 {
    font-size: 0.9375rem;
    color: var(--body-quiet-color);
}

/* Badges com mais de uma palavra ("Será criada") não capitalizam cada palavra */
.badge-status.texto-livre {
    text-transform: none;
}

/* ---------- Gerar cobranças do mês ---------- */

.geracao {
    max-width: 860px;
}

.geracao-explicacao {
    max-width: 65ch;
    margin: 0 0 20px;
    color: var(--body-medium-color);
    font-size: 0.9375rem;
}

.geracao-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.geracao-form label {
    font-weight: 600;
}

.geracao-form input[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.geracao-previa table {
    width: 100%;
}

.geracao-previa th,
.geracao-previa td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--hairline-color);
    vertical-align: middle;
    font-size: 0.875rem;
}

.geracao-previa thead th {
    background: var(--darkened-bg);
    color: var(--body-medium-color);
    font-weight: 600;
    text-transform: none;
}

.geracao-previa tbody tr:last-child td {
    border-bottom: 0;
}

.geracao-previa .numero {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.geracao-vazia {
    padding: 16px;
    margin: 0;
    color: var(--body-quiet-color);
}

/* ---------- Polimento ---------- */

/* Ícones (templates/admin/_icones.html) */
.icones-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icone {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: -3px;
}

/* Botão de tema: lua no claro, sol no escuro */
#header.barra-topo #botao-tema {
    display: inline-flex;
    align-items: center;
    padding: 8px;
}

#botao-tema .icone {
    width: 18px;
    height: 18px;
}

#botao-tema .icone-sol,
html[data-theme="dark"] #botao-tema .icone-lua {
    display: none;
}

html[data-theme="dark"] #botao-tema .icone-sol {
    display: inline;
}

#header.barra-topo #botao-menu {
    align-items: center;
    gap: 6px;
}

@media (max-width: 767px) {
    #header.barra-topo #botao-menu {
        display: inline-flex;
    }
}

/* Itens do menu do usuário com ícone alinhado ao texto */
#header.barra-topo .menu-suspenso li a:link,
#header.barra-topo .menu-suspenso li a:visited,
#header.barra-topo #logout-form button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-suspenso li .icone {
    color: var(--body-quiet-color);
}

/* Detalhes do navegador na cor do sistema */
html {
    accent-color: var(--primary);
    caret-color: var(--primary);
}

::selection {
    background: var(--selected-row);
    color: var(--body-loud-color);
}

/* Ícones de data/hora ("Hoje | calendário") discretos como os dos campos de escolha */
.datetimeshortcuts img,
.datetimeshortcuts .date-icon,
.datetimeshortcuts .clock-icon {
    filter: grayscale(1);
    opacity: 0.6;
}

.datetimeshortcuts a:hover img,
.datetimeshortcuts a:hover .date-icon,
.datetimeshortcuts a:focus-visible .date-icon {
    opacity: 1;
}

/* Botões secundários (Pesquisar, Limpar filtros, Voltar...) no mesmo estilo */
#changelist #toolbar form input[type="submit"],
a.button:link,
a.button:visited {
    background: var(--cartao-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio-pequeno);
    color: var(--body-medium-color);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 14px;
    text-decoration: none;
    cursor: pointer;
}

#changelist #toolbar form input[type="submit"]:hover,
a.button:hover,
a.button:focus-visible {
    border-color: var(--primary);
    color: var(--link-fg);
}

/* Lista vazia */
.lista-vazia {
    padding: 40px 24px;
    text-align: center;
    border: 1px dashed var(--border-color);
    border-radius: var(--raio);
    color: var(--body-medium-color);
}

.lista-vazia p {
    margin: 0 0 12px;
}

.lista-vazia .lista-vazia-titulo {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--body-loud-color);
    margin-bottom: 4px;
}

/* Exclusão: confirmação e bloqueio */
.delete-confirmation #content p {
    max-width: 70ch;
}

.delete-confirmation #deleted-objects {
    margin: 12px 0 20px;
    padding: 12px 16px 12px 36px;
    background: var(--darkened-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--raio);
}

.delete-confirmation #deleted-objects li {
    padding: 2px 0;
}

.delete-confirmation form input[type="submit"] {
    background: var(--delete-button-bg);
    margin-right: 8px;
}

.delete-confirmation form input[type="submit"]:hover {
    background: var(--delete-button-hover-bg);
}


/* Resumo da exclusão ("Resumo: 1 pagamento") sem caixa-alta */
.delete-confirmation #content h2 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
}

/* Ajustes da passada de polimento */
.icone.atalho-icone {
    width: 26px;
    height: 26px;
}

/* Pesquisar: sem o degradê do Django e na mesma altura do campo */
#changelist #toolbar form input[type="text"],
#changelist #toolbar form input[type="submit"] {
    height: 38px;
    box-sizing: border-box;
}

#changelist #toolbar form input[type="submit"] {
    box-shadow: none;
    background-image: none;
    line-height: 1;
}

/* Botões-link secundários na mesma altura dos botões de envio */
a.button:link,
a.button:visited,
.delete-confirmation form a.cancel-link {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.9375rem;
    line-height: 1.4;
    height: auto;
}

.lista-vazia .button {
    margin-top: 12px;
}

/* Botão "Menu" do celular: só o ícone de três linhas (o texto fica para leitores de tela) */
#header.barra-topo #botao-menu {
    padding: 6px 8px;
}

#botao-menu .icone {
    width: 20px;
    height: 20px;
}

/* ---------- Linhas das listas: sem zebra, destaque azul no mouse ---------- */

/* O cinza fica só para estrutura (cabeçalhos, painéis). A linha sob o mouse
   ganha um azul bem claro, mais leve que o da linha marcada no checkbox,
   para os dois estados nunca se confundirem. */
html[data-theme="light"],
:root {
    --linha-hover: #e8f1ff;
    --linha-marcada: #cfe2ff;
}

html[data-theme="dark"] {
    --linha-hover: #263445;
    --linha-marcada: #10243f;
}

/* Fundo da página (branco no claro), e não o dos cartões: no tema escuro o
   cartão tem o mesmo tom do cabeçalho da tabela */
#result_list tbody tr,
.inline-group .tabular tbody tr {
    background: var(--body-bg);
}

#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background: var(--linha-hover);
}

#result_list tbody tr.selected td,
#result_list tbody tr.selected th {
    background: var(--linha-marcada);
}

#result_list tbody tr.linha-clicavel {
    cursor: pointer;
}

/* A linha de "adicionar outro pagamento" continua se distinguindo */
.inline-group .tabular tr.add-row td {
    background: var(--darkened-bg);
}

@media (max-width: 767px) {
    #result_list tbody tr:hover td,
    #result_list tbody tr:hover th {
        background: transparent;
    }

    #result_list tbody tr.linha-clicavel:hover {
        background: var(--linha-hover);
    }
}