/* ═══════════════════════════════════════════════════════
   CATÁLOGO DE MOEDAS — Tema Cinza Moderno
   Fonte: Roboto · Paleta: Cinzas quentes + Âmbar/Dourado
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Escala de cinza (tons quentes, não frios) */
    --bg-base:       #2B2B2B;   /* fundo da página */
    --bg-card:       #333333;   /* cards e painéis */
    --bg-header:     #3A3A3A;   /* cabeçalho de card, navbar */
    --bg-elevated:   #404040;   /* hover, inputs */
    --bg-input:      #2E2E2E;   /* campos de formulário */
    --bg-stripe:     #363636;   /* linhas alternadas */

    /* ── Bordas */
    --borda:         #484848;
    --borda-hover:   #5A5A5A;
    --borda-light:   #3E3E3E;

    /* ── Textos — todos com contraste garantido sobre cinza */
    --txt-primary:   #F0F0F0;   /* texto principal */
    --txt-secondary: #BDBDBD;   /* texto secundário */
    --txt-muted:     #888888;   /* texto apagado */
    --txt-disabled:  #606060;

    /* ── Âmbar / Dourado (destaque, posse, foco) */
    --ouro:          #F5A623;
    --ouro-claro:    #FFBE57;
    --ouro-escuro:   #C47F0A;
    --ouro-muted:    rgba(245,166,35,0.13);
    --ouro-glow:     rgba(245,166,35,0.28);

    /* ── Azul (links, ações secundárias) */
    --azul:          #5B9BD5;
    --azul-hover:    #4A87C2;
    --azul-muted:    rgba(91,155,213,0.13);

    /* ── Vermelho */
    --vermelho:      #E05252;
    --vermelho-muted:rgba(224,82,82,0.13);

    /* ── Verde */
    --verde:         #5CB85C;
    --verde-muted:   rgba(92,184,92,0.13);

    /* Bootstrap overrides */
    --bs-body-bg:    var(--bg-base);
    --bs-body-color: var(--txt-primary);
}

/* ─── Reset e Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    background-color: var(--bg-base);
    color: var(--txt-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-weight: 700;
    color: var(--txt-primary);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

a { color: var(--azul); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--azul-hover); }

::selection { background: var(--ouro-muted); color: var(--txt-primary); }

/* ─── Navbar ────────────────────────────────────────── */
#navbar-principal {
    background: #222222;
    border-bottom: 3px solid var(--ouro-escuro);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

#navbar-principal .container-xl {
    display: flex;
    align-items: stretch;
    min-height: 54px;
}

.brand-icon {
    font-size: 1.4rem;
    display: inline-block;
}

.brand-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--txt-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.brand-accent { color: var(--ouro); }

.navbar-dark .nav-link {
    color: var(--txt-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.78rem;
    transition: color 0.15s, border-color 0.15s;
}
.navbar-dark .nav-link:hover {
    color: var(--ouro-claro);
    border-bottom-color: var(--ouro);
}
.navbar-dark .nav-link.active {
    color: var(--ouro);
    border-bottom-color: var(--ouro);
}

/* ─── Page Header ───────────────────────────────────── */
.page-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--borda);
    padding: 1.5rem 0 1.1rem;
}
.page-header-sm { padding: 0.9rem 0 0.75rem; }

.page-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--txt-primary);
    margin: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.page-subtitle {
    color: var(--txt-muted);
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    font-weight: 400;
}

/* ─── Botões ────────────────────────────────────────── */
.btn {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.02em;
}

/* Primário = dourado (ação principal) */
.btn-primary {
    --bs-btn-active-bg:           var(--ouro-escuro);
    --bs-btn-active-border-color: var(--ouro-escuro);
    --bs-btn-active-color:        #fff;
    background: var(--ouro-escuro);
    border: 1px solid var(--ouro-escuro);
    color: #fff;
}
.btn-primary:hover {
    background: var(--ouro);
    border-color: var(--ouro);
    color: #1a1a1a;
    box-shadow: 0 2px 10px var(--ouro-glow);
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--ouro-glow); outline: none; }

/* Garante que o :active de todos os botões não vaze azul do Bootstrap */
.btn-primary:active,
.btn-primary:first-child:active,
:not(.btn-check) + .btn-primary:active         { background-color: var(--ouro-escuro) !important; border-color: var(--ouro-escuro) !important; color: #fff !important; }

.btn-outline-primary:active,
.btn-outline-primary:first-child:active,
:not(.btn-check) + .btn-outline-primary:active  { background-color: var(--ouro-muted) !important; border-color: var(--ouro-escuro) !important; color: var(--ouro) !important; }

.btn-outline-secondary:active,
.btn-outline-secondary:first-child:active,
:not(.btn-check) + .btn-outline-secondary:active { background-color: var(--bg-elevated) !important; border-color: var(--borda-hover) !important; color: var(--txt-primary) !important; }

.btn-outline-danger:active,
.btn-outline-danger:first-child:active,
:not(.btn-check) + .btn-outline-danger:active   { background-color: var(--vermelho) !important; border-color: var(--vermelho) !important; color: #fff !important; }

.btn-secondary:active,
.btn-secondary:first-child:active,
:not(.btn-check) + .btn-secondary:active        { background-color: var(--bg-elevated) !important; border-color: var(--borda-hover) !important; color: var(--txt-primary) !important; }

.btn-outline-primary {
    --bs-btn-active-bg:           var(--ouro-muted);
    --bs-btn-active-border-color: var(--ouro-escuro);
    --bs-btn-active-color:        var(--ouro);
    border: 1px solid var(--ouro-escuro);
    color: var(--ouro);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--ouro-muted);
    border-color: var(--ouro);
    color: var(--ouro-claro);
}
/* Botão Editar no card usa btn-primary diretamente no HTML */

.btn-outline-secondary {
    --bs-btn-active-bg:           var(--bg-elevated);
    --bs-btn-active-border-color: var(--borda-hover);
    --bs-btn-active-color:        var(--txt-primary);
    border: 1px solid var(--borda);
    color: var(--txt-secondary);
    background: transparent;
}
.btn-outline-secondary:hover {
    border-color: var(--borda-hover);
    color: var(--txt-primary);
    background: var(--bg-elevated);
}

.btn-outline-danger {
    --bs-btn-active-bg:           var(--vermelho);
    --bs-btn-active-border-color: var(--vermelho);
    --bs-btn-active-color:        #fff;
    border: 1px solid #884040;
    color: var(--vermelho);
    background: transparent;
}
.btn-outline-danger:hover {
    background: var(--vermelho);
    border-color: var(--vermelho);
    color: #fff;
}

.btn-secondary {
    --bs-btn-active-bg:           var(--bg-elevated);
    --bs-btn-active-border-color: var(--borda-hover);
    --bs-btn-active-color:        var(--txt-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--borda);
    color: var(--txt-secondary);
}
.btn-secondary:hover {
    background: var(--bg-stripe);
    border-color: var(--borda-hover);
    color: var(--txt-primary);
}

.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.72rem; border-radius: 3px; }

.btn-nova-moeda {
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Filtros Card ──────────────────────────────────── */
.filtros-card {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}
.filtros-card .form-label {
    color: var(--txt-secondary);        /* era --txt-muted */
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.25rem;
}
.filtros-card .form-check-label {
    color: var(--txt-secondary);
    font-size: 0.875rem;
}
.filtros-card .form-check-input:checked {
    background-color: var(--ouro-escuro);
    border-color: var(--ouro-escuro);
}

/* ─── Formulários ───────────────────────────────────── */
.form-control,
.form-select {
    background: var(--bg-input);
    border: 1px solid var(--borda);
    color: var(--txt-primary);
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus,
.form-select:focus {
    background: var(--bg-input);
    border-color: var(--ouro);
    color: var(--txt-primary);
    box-shadow: 0 0 0 3px var(--ouro-muted);
    outline: none;
}
.form-control::placeholder { color: var(--txt-disabled); }
.form-control:disabled,
.form-select:disabled {
    background: var(--bg-elevated);
    color: var(--txt-muted);
    opacity: 0.7;
}

.form-label {
    color: var(--txt-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.required-label::after { content: ' *'; color: var(--ouro); }

.input-group-text {
    background: var(--bg-elevated);
    border: 1px solid var(--borda);
    color: var(--txt-muted);
    font-size: 0.85rem;
    font-family: 'Roboto', sans-serif;
}
textarea.form-control { resize: vertical; min-height: 80px; }

.form-check-input {
    background-color: var(--bg-input);
    border: 1px solid var(--borda-hover);
}
.form-check-input:checked {
    background-color: var(--ouro-escuro);
    border-color: var(--ouro-escuro);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--ouro-muted);
    border-color: var(--ouro);
}
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.3%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-text { color: var(--txt-muted); font-size: 0.78rem; }

/* ─── Moeda Card ────────────────────────────────────── */
.moeda-card {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
}
.moeda-card:hover {
    border-color: var(--borda-hover);
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    transform: translateY(-2px);
}
.moeda-card.possui {
    border-color: var(--ouro-escuro);
    border-top: 3px solid var(--ouro);
}

.moeda-card-img {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-elevated);
    overflow: hidden;
}
.moeda-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}
.moeda-card:hover .moeda-card-img img { transform: scale(1.05); }

/* Link clicável na imagem do card */
.moeda-img-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    cursor: pointer;
}
.moeda-img-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.moeda-img-link .moeda-sem-foto {
    position: absolute;
    inset: 0;
}

.moeda-sem-foto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--txt-muted);
    opacity: 0.2;
}

.badge-possuo {
    position: absolute;
    top: 7px; left: 7px;   /* movido para o canto esquerdo */
    background: rgba(30,30,30,0.85);
    color: var(--ouro);
    font-size: 0.95rem;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    border: 1px solid rgba(245,166,35,0.4);
}

.moeda-card-body {
    padding: 0.8rem 0.9rem;
    flex: 1;
}
.moeda-nome {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--txt-primary);
    margin-bottom: 0.45rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.moeda-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.info-chip {
    font-size: 0.69rem;
    font-weight: 500;
    color: var(--txt-primary);          /* era secondary, pouco contraste */
    background: var(--bg-elevated);
    border: 1px solid var(--borda);     /* borda um pouco mais visível */
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.01em;
}
.info-chip i { font-size: 0.62rem; color: var(--txt-secondary); }

/* Footer removido — ações ficam no overlay da imagem */

/* ─── Botão excluir overlay (aparece no hover do card) ── */
.btn-excluir-card {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: none;
    background: rgba(20, 20, 20, 0.85);
    color: #ccc;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.18s, transform 0.18s, background 0.15s, color 0.15s;
    z-index: 5;
    backdrop-filter: blur(4px);
}
.moeda-card:hover .btn-excluir-card {
    opacity: 1;
    transform: scale(1);
}
.btn-excluir-card:hover {
    background: var(--vermelho);
    color: #fff;
}

/* ─── Empty State ───────────────────────────────────── */
.empty-state { padding: 5rem 0; }
.empty-icon { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: 0.35; }

/* ─── Edição Cards ──────────────────────────────────── */
.edicao-card {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
}
.edicao-card-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--borda);
    padding: 0.65rem 1.25rem;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--txt-secondary);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.edicao-card-header i { color: var(--ouro); font-size: 0.9rem; }
.edicao-card-body { padding: 1.25rem; }

/* ─── Tabela ────────────────────────────────────────── */
.table {
    color: var(--txt-primary);
    margin: 0;
    font-size: 0.875rem;
    --bs-table-color: var(--txt-primary);
    --bs-table-bg: transparent;
    --bs-table-hover-color: var(--txt-primary);
    --bs-table-hover-bg: rgba(245,166,35,0.06);
}

.table thead th {
    background: #272727;
    border-bottom: 2px solid var(--ouro-escuro);
    color: var(--txt-secondary);        /* era --txt-muted, subiu o contraste */
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.65rem 1rem;
    white-space: nowrap;
}

.table tbody tr { border: none; }

.table tbody td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    color: var(--txt-primary);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--borda-light);
}

.table tbody tr:nth-child(even) td {
    background: rgba(0,0,0,0.1);
}
.table tbody tr:last-child td { border-bottom: none; }

.table-hover tbody tr:hover td {
    background: rgba(245,166,35,0.06) !important;
    color: var(--txt-primary) !important;
}

.table tbody td.text-muted,
.table tbody td .text-muted {
    color: var(--txt-secondary) !important;
}
.table tbody td.fw-semibold { color: var(--txt-primary); font-weight: 600; }

/* ─── Botão Possuo (estrela) ────────────────────────── */
.btn-possuo {
    background: var(--bg-input);
    border: 1px solid var(--borda);
    font-size: 1.05rem;
    color: var(--txt-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-possuo:hover {
    border-color: var(--ouro);
    color: var(--ouro);
    background: var(--ouro-muted);
}
.btn-possuo.ativo {
    color: var(--ouro);
    border-color: var(--ouro-escuro);
    background: var(--ouro-muted);
}
.btn-possuo:focus-visible {
    box-shadow: 0 0 0 3px var(--ouro-glow);
    outline: none;
}

/* ─── Galeria de Fotos ──────────────────────────────── */
.galeria-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}
.foto-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid var(--borda);
    background: var(--bg-elevated);
    transition: border-color 0.2s;
}
.foto-item.principal { border-color: var(--ouro); }
.foto-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

.foto-acoes {
    position: absolute;
    top: 4px; right: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s;
}
.foto-item:hover .foto-acoes { opacity: 1; }

.btn-foto-acao {
    background: rgba(0,0,0,0.82);
    border: none;
    color: #ddd;
    width: 26px; height: 26px;
    border-radius: 3px;
    font-size: 0.72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.btn-foto-acao:hover { background: var(--azul); color: #fff; }
.btn-foto-excluir:hover { background: var(--vermelho) !important; }

.foto-principal-badge {
    background: rgba(196,127,10,0.9);
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 3px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.foto-descricao {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.75);
    color: #eee;
    font-size: 0.65rem;
    padding: 3px 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ─── Upload Area ───────────────────────────────────── */
.upload-area {
    border: 2px dashed #6A6A6A !important;
    border-radius: 5px;
    padding: 1.4rem 1rem;
    text-align: center;
    cursor: pointer;
    color: #D0D0D0 !important;
    font-size: 0.82rem;
    transition: all 0.2s;
    background: var(--bg-input) !important;
}
.upload-area .bi {
    color: #C8C8C8 !important;
    font-size: 2rem;
    display: block;
    margin-bottom: 0.4rem;
}
.upload-area p {
    color: #E8E8E8 !important;
    margin: 0.35rem 0 0.1rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.upload-area small {
    color: #AAAAAA !important;
    font-size: 0.74rem !important;
}
.upload-area:hover,
.upload-area.drag-over {
    border-color: var(--ouro-claro) !important;
    background: rgba(245,166,35,0.1) !important;
    color: var(--ouro-claro) !important;
}
.upload-area:hover p, .upload-area.drag-over p { color: #FFD580 !important; }
.upload-area:hover small, .upload-area.drag-over small { color: var(--ouro-claro) !important; }
.upload-area:hover .bi, .upload-area.drag-over .bi { color: var(--ouro-claro) !important; }

/* ─── Modal ─────────────────────────────────────────── */
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--borda-hover);
    border-radius: 6px;
    color: var(--txt-primary);
    box-shadow: 0 16px 50px rgba(0,0,0,0.55);
}
.modal-header {
    background: #272727;
    border-bottom: 2px solid var(--ouro-escuro);
    padding: 0.9rem 1.4rem;
    border-radius: 6px 6px 0 0;
}
.modal-footer {
    background: var(--bg-header);
    border-top: 1px solid var(--borda);
    padding: 0.8rem 1.4rem;
    border-radius: 0 0 6px 6px;
}
.modal-body { padding: 1.2rem 1.4rem; }
.modal-title {
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--txt-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.modal-title i { color: var(--ouro); }
.btn-close {
    filter: invert(0.65) sepia(0) saturate(0);
    opacity: 0.7;
}
.btn-close:hover { opacity: 1; }
.btn-close:focus { box-shadow: 0 0 0 3px var(--ouro-glow); outline: none; }

/* ─── Breadcrumb ────────────────────────────────────── */
.breadcrumb {
    margin: 0;
    font-size: 0.8rem;
    font-family: 'Roboto', sans-serif;
    --bs-breadcrumb-divider-color: var(--txt-muted);
}
.breadcrumb-item a { color: var(--ouro); }
.breadcrumb-item a:hover { color: var(--ouro-claro); }
.breadcrumb-item.active { color: var(--txt-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--borda-hover); }

/* ─── Alertas ───────────────────────────────────────── */
.alert {
    border-radius: 4px;
    font-size: 0.875rem;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
}
.alert-success {
    background: var(--verde-muted);
    border: 1px solid rgba(92,184,92,0.35);
    color: #98e098;
}
.alert-danger {
    background: var(--vermelho-muted);
    border: 1px solid rgba(224,82,82,0.35);
    color: #f5a0a0;
}
.alert-dismissible .btn-close { filter: invert(0.5) sepia(0); }

/* ─── Footer ────────────────────────────────────────── */
.footer {
    background: #222222;
    border-top: 1px solid var(--borda);
    margin-top: auto;
    padding: 0.7rem 0;
}
.footer .text-muted { color: var(--txt-muted) !important; font-size: 0.78rem; }

/* ─── Progress ──────────────────────────────────────── */
.progress {
    background: var(--bg-elevated);
    border-radius: 3px;
    height: 5px;
}
.progress-bar { background: var(--ouro-escuro); }

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--borda-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6A6A6A; }

/* ─── Responsivo ────────────────────────────────────── */
@media (max-width: 768px) {
    .page-title { font-size: 1.2rem; }
    .edicao-card-body { padding: 1rem; }
    .moeda-card-body { padding: 0.7rem 0.8rem; }
}
@media (max-width: 576px) {
    .galeria-fotos { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Toggle de visualização (galeria / lista) ──────── */
.btn-toggle-view.active {
    background: var(--bg-elevated);
    border-color: var(--ouro-escuro);
    color: var(--ouro);
}
.btn-toggle-view:focus-visible {
    box-shadow: 0 0 0 3px var(--ouro-glow);
    outline: none;
}

/* ─── Tabela de listagem de moedas ──────────────────── */
.tabela-moedas-wrap {
    background: var(--bg-card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    overflow: hidden;
}
.tabela-moedas-wrap .thumb-moeda {
    width: 40px; height: 40px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--borda);
    display: block;
}
.tabela-moedas-wrap .thumb-placeholder {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated);
    border-radius: 4px;
    border: 1px solid var(--borda);
    font-size: 1.1rem;
    opacity: 0.35;
}
.tabela-moedas-wrap .nome-link {
    color: var(--txt-primary);
    font-weight: 600;
}
.tabela-moedas-wrap .nome-link:hover { color: var(--ouro-claro); }
.tabela-moedas-wrap .possuo-star { color: var(--ouro); font-size: 1rem; }
.tabela-moedas-wrap tr.linha-possui td:first-child {
    border-left: 3px solid var(--ouro-escuro);
}
.tabela-moedas-wrap th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.tabela-moedas-wrap th[data-sort]:hover { color: var(--ouro-claro); }
.tabela-moedas-wrap th[data-sort].col-sorted { color: var(--ouro); }
.tabela-moedas-wrap th[data-sort] .sort-icon { font-size: .75rem; margin-left: 3px; opacity: .7; }

/* ─── Filtro de posse (toggle triplo) ──────────────── */
.tri-state-toggle {
    background: var(--bg-input);
    border: 1px solid var(--borda);
    border-radius: 4px;
    display: flex;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 2px;
    box-sizing: border-box;
}
.tri-state-btn {
    flex: 1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--txt-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.02em;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    padding: 0 8px;
}
.tri-state-btn:hover { color: var(--txt-primary); }
.tri-state-btn.active {
    background: var(--ouro);
    color: var(--bg-base);
    font-weight: 700;
}

/* ─── Filtro form (flex puro, sem Bootstrap grid) ───── */
.filtro-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.filtro-campos {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.filtro-grupo {
    display: flex;
    flex-direction: column;
}
.filtro-grupo .form-label i { color: var(--ouro); }
.filtro-limpar {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
}

/* tablet: 2 colunas */
@media (max-width: 991px) {
    .filtro-campos {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* mobile: 1 coluna, form em coluna, limpar alinhado à direita */
@media (max-width: 575px) {
    .filtro-form {
        flex-direction: column;
        align-items: stretch;
    }
    .filtro-campos {
        grid-template-columns: 1fr;
    }
    .filtro-limpar {
        align-self: flex-end;
    }
}

/* ─── Paginação ─────────────────────────────────────── */
.pagination .page-link {
    background-color: var(--bg-card);
    border-color: var(--borda);
    color: var(--txt-secondary);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.pagination .page-link:hover {
    background-color: var(--ouro-muted);
    border-color: var(--ouro);
    color: var(--ouro);
}
.pagination .page-item.active .page-link {
    background-color: var(--ouro);
    border-color: var(--ouro-escuro);
    color: var(--bg-base);
    font-weight: 600;
}
.pagination .page-item.disabled .page-link {
    background-color: var(--bg-card);
    border-color: var(--borda-light);
    color: var(--txt-disabled);
}
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--ouro-glow);
    outline: none;
}

@media (max-width: 575px) {
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }
}