/* ============================================================
   Bom Pra Dois — style.css v5.1
   Correções: cards desktop, overflow admin, select visível
   ============================================================ */

:root {
    --bg:             var(--theme-background, #101315);
    --surface:        var(--theme-surface, #181d20);
    --text:           var(--theme-text, #f5f1e8);
    --text-soft:      var(--theme-muted-text, #c5b9a5);
    --accent:         var(--theme-primary, #40634b);
    --accent-2:       var(--theme-secondary, #9f6f3c);
    --accent-3:       #d4b483;
    --danger:         #a33f38;
    --success:        #2b6c4a;
    --border:         rgba(64, 99, 75, 0.16);
    --shadow:         0 24px 60px rgba(50, 40, 23, 0.14);
    --radius:         22px;
    --radius-sm:      14px;
    --container:      1180px;
    /* Cor de fundo dos inputs — usada também nos selects */
    --input-bg:       #1e2428;
    --input-text:     var(--theme-text, #f5f1e8);
}

/* ── Reset básico ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left,  rgba(212,180,131,.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(64,99,75,.18), transparent 32%),
        linear-gradient(180deg, #0d1012 0%, var(--bg) 52%, #0b0d0f 100%);
    color: var(--text);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

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

button, input, select, textarea { font: inherit; }

/* ── Layout ─────────────────────────────────────────────────── */
.site-shell { min-height: 100vh; }

.container {
    width: min(calc(100% - 2rem), var(--container));
    margin: 0 auto;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px);
    background: rgba(10,13,15,.88);
    border-bottom: 1px solid rgba(212,180,131,.08);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}
/* ── Marca / identidade ─────────────────────────────────────── */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.brand-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.brand-mark {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
}

.menu-state {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(212,180,131,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    align-items: center;
}

/* ── Botões e links de nav ───────────────────────────────────── */
.nav a,
.button-link,
.button-primary,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 999px;
    padding: .65rem 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    white-space: nowrap;
}

.nav a,
.button-secondary {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(212,180,131,.14);
    color: var(--text);
}

.button-primary,
.button-link {
    background: linear-gradient(135deg, var(--accent), #2f4b37);
    color: var(--theme-button-text, #f9f5ee);
    box-shadow: 0 12px 28px rgba(47,75,55,.22);
}

.button-primary:hover,
.button-secondary:hover,
.button-link:hover,
.nav a:hover { opacity: .82; transform: translateY(-1px); }

.button-secondary { color: var(--accent); }

.full-width { width: 100%; }

/* ── Main ────────────────────────────────────────────────────── */
main { padding: 2rem 0 4rem; }

/* ── Panels ─────────────────────────────────────────────────── */
.panel,
.hero-card,
.visible-alert {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 1.35rem;
}

/* ── Home hero ───────────────────────────────────────────────── */
.home-hero { padding: 1rem 0 2rem; }

.home-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.hero-copy {
    padding: 1.4rem;
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(24,29,32,.96), rgba(18,22,24,.92));
    border: 1px solid rgba(212,180,131,.14);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.hero-copy h1,
.auth-section h1,
.dashboard-section h1,
.detail-main h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    line-height: 1.08;
    margin: .4rem 0 1rem;
}

.hero-copy p,
.panel p,
.lead-text,
.footer p { color: var(--text-soft); line-height: 1.7; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .75rem;
    color: var(--accent-2);
    font-weight: 700;
}

.eyebrow::before {
    content: "";
    width: 28px; height: 1px;
    background: currentColor;
}

.hero-actions,
.card-actions,
.auth-actions,
.inline-actions,
.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

.stats-panel {
    display: grid;
    gap: 1rem;
    align-content: center;
    background: linear-gradient(180deg, rgba(47,75,55,.95), rgba(63,99,75,.9));
    color: #f8f3ea;
}

.stats-panel strong {
    display: block;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-family: Georgia, 'Times New Roman', serif;
}

/* ── Grid utilitários ────────────────────────────────────────── */
.stack-gap { display: grid; gap: 1rem; }

.split-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* ── Formulários ─────────────────────────────────────────────── */
.form-stack { display: grid; gap: 1rem; }
.form-panel { max-width: 100%; }
.wide-panel  { max-width: 100%; }
.narrow-panel { max-width: 480px; margin: 0 auto; }

label span,
.section-heading p,
.helper-text,
small {
    display: block;
    color: var(--text-soft);
    margin-bottom: .4rem;
    font-size: .9rem;
}

/* ── INPUTS / SELECTS — visíveis em qualquer modo ───────────── */
input,
textarea {
    width: 100%;
    border: 1px solid rgba(64,99,75,.22);
    background: var(--input-bg);
    border-radius: 14px;
    padding: .85rem 1rem;
    color: var(--input-text);
    outline: none;
}

/* Select: força aparência customizada em TODOS os browsers */
select {
    width: 100%;
    border: 1px solid rgba(64,99,75,.22);
    /* Fundo sólido — evita fundo do sistema que fica branco */
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23c5b9a5' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 20px;
    border-radius: 14px;
    padding: .85rem 2.5rem .85rem 1rem;
    /* Cor explícita — sem herança do OS */
    color: var(--input-text);
    outline: none;
    /* Remove a seta nativa do browser */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Opções do select — força tema escuro em cada opção */
select option {
    background-color: #1e2428;
    color: #f5f1e8;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(64,99,75,.5);
    box-shadow: 0 0 0 3px rgba(64,99,75,.15);
}

input::placeholder,
textarea::placeholder { color: var(--text-soft); opacity: .7; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: .2rem;
    padding: 0;
    accent-color: var(--accent);
}

.checkbox-grid { display: grid; gap: .75rem; }

/* ── Flash / Alertas ─────────────────────────────────────────── */
.form-errors,
.flash,
.info-box,
.visible-alert {
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

.form-errors,
.flash-error {
    background: rgba(163,63,56,.12);
    border: 1px solid rgba(163,63,56,.25);
    color: #e89390;
}

.flash-success,
.success-box {
    background: rgba(43,108,74,.12);
    border: 1px solid rgba(43,108,74,.25);
    color: #6ecf9a;
}

.info-box,
.flash-info,
.visible-alert {
    background: rgba(212,180,131,.1);
    border: 1px solid rgba(159,111,60,.22);
    color: var(--accent-3);
}

.chat-warning { margin-bottom: 1rem; }
.flash-wrap { padding-top: 1rem; }

/* ── Cards de anúncio ────────────────────────────────────────── */
/* FIX DESKTOP: cards-grid com altura mínima definida */
.cards-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: start;          /* ← impede estiramento infinito */
}

.ad-card {
    display: flex;
    flex-direction: column;      /* ← flex, não grid, para altura natural */
    gap: .75rem;
    height: 100%;
}

.ad-card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.ad-card-body .card-actions {
    margin-top: auto;            /* ← botão sempre no fundo do card */
}

.ad-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    background: var(--surface);  /* ← placeholder enquanto carrega */
}

.ad-category {
    display: inline-block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-soft);
}

.ad-card-top,
.meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .32rem .8rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-type     { background: rgba(64,99,75,.18);  color: var(--accent);   }
.badge-status   { background: rgba(159,111,60,.18); color: var(--accent-2); }
.badge-category { background: rgba(159,111,60,.18); color: var(--accent-2); }
.badge-unread   { background: #e74c3c; color: #fff; }

.badge-status-ativo            { background: rgba(39,174,96,.22);  color: #6ecf9a; }
.badge-status-reativado        { background: rgba(41,128,185,.22); color: #7ec8f5; }
.badge-status-expirado         { background: rgba(230,126,34,.22); color: #f0a566; }
.badge-status-inativo_permanente { background: rgba(127,140,141,.22); color: #bdc3c7; }
.badge-status-moderacao        { background: rgba(142,68,173,.22); color: #c39bd3; }
.badge-status-bloqueado        { background: rgba(192,57,43,.22);  color: #e88882; }

/* ── Meta ────────────────────────────────────────────────────── */
.meta-list,
.meta-chip span { color: var(--text-soft); font-size: .9rem; }

/* ── Detalhe do anúncio ──────────────────────────────────────── */
.detail-section { }

.detail-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: start;
    /* sem padding aqui — cada filho tem o próprio */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.detail-main,
.detail-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 1.4rem;
}

.detail-meta-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1rem;
}

.meta-chip {
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    padding: .9rem 1rem;
    border: 1px solid rgba(64,99,75,.12);
}

/* ── Galeria de imagens ──────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.gallery-grid a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    transition: opacity .2s;
}

.gallery-grid img:hover { opacity: .82; }

/* ── Countdown ───────────────────────────────────────────────── */
.countdown-box {
    display: grid;
    gap: .45rem;
    background: linear-gradient(160deg, rgba(47,75,55,.96), rgba(88,112,73,.9));
    color: #fff8ee;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    margin-bottom: .75rem;
}

.countdown-value {
    font-size: 1.3rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
}

.countdown-value-sm {
    font-size: .82rem;
    font-family: monospace;
    color: var(--accent-3);
}

/* ── Contato / Chat sidebar ──────────────────────────────────── */
.contact-box {
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    margin-top: .5rem;
}

/* ── Hero card (dashboard) ───────────────────────────────────── */
.hero-card {
    display: grid;
    gap: 1rem;
    align-items: center;
}

/* ── Tabelas — FIX ADMIN OVERFLOW ───────────────────────────── */
.table-wrap {
    width: 100%;
    overflow-x: auto;          /* ← scroll horizontal quando necessário */
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* min-width MENOR para não forçar overflow em desktop */
    min-width: 560px;
}

th, td {
    text-align: left;
    padding: .8rem .75rem;
    border-bottom: 1px solid rgba(64,99,75,.1);
    vertical-align: middle;
}

th {
    color: var(--text-soft);
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
}

/* Impede quebra feia no meio das palavras, mas mantém a tabela responsiva */
td {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    max-width: 280px;
}

/* Em colunas curtas da listagem administrativa, não quebrar palavras */
.table-wrap th:nth-child(2),
.table-wrap th:nth-child(3),
.table-wrap th:nth-child(5),
.table-wrap td:nth-child(2),
.table-wrap td:nth-child(3),
.table-wrap td:nth-child(5) {
    white-space: nowrap;
}

/* Ajuste fino da coluna de ações para caber “Gerenciar” sem quebra */
.table-wrap th:nth-child(5),
.table-wrap td:nth-child(5) {
    width: 1%;
    font-size: .82rem;
}

.table-wrap td:nth-child(5) .inline-actions {
    flex-wrap: nowrap;
    gap: .3rem;
}

.table-wrap td:nth-child(5) a,
.table-wrap td:nth-child(5) button,
.table-wrap td:nth-child(5) .button-link,
.table-wrap td:nth-child(5) .button-primary,
.table-wrap td:nth-child(5) .button-secondary {
    white-space: nowrap;
    font-size: .82rem;
    line-height: 1.1;
    padding: .5rem .7rem;
}

/* A coluna de título pode quebrar apenas entre palavras */
.table-wrap th:nth-child(1),
.table-wrap td:nth-child(1) {
    white-space: normal;
}

/* ── Chat ────────────────────────────────────────────────────── */
.chat-panel { }

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-height: 460px;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(0,0,0,.18);
    border-radius: 16px;
    margin-bottom: 1rem;
    scroll-behavior: smooth;
}

.chat-form { margin-top: .5rem; }

.chat-bubble {
    max-width: min(100%, 640px);
    padding: .85rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(64,99,75,.14);
}

.chat-bubble.sent {
    margin-left: auto;
    background: linear-gradient(160deg, rgba(64,99,75,.95), rgba(47,75,55,.9));
    color: #fff7ec;
}

.chat-bubble.received {
    background: rgba(255,255,255,.06);
    color: var(--text);
}

.chat-bubble p, .chat-bubble small, .chat-bubble strong { margin: 0; }
.chat-bubble strong { display: block; margin-bottom: .3rem; font-size: .85rem; opacity: .8; }
.chat-bubble small  { display: block; margin-top: .4rem; opacity: .6; font-size: .8rem; }

.row-active td { background: rgba(255,255,255,.05); }

/* ── Admin ───────────────────────────────────────────────────── */
/* FIX: permite scroll interno das tabelas sem cortar colunas do admin */
.dashboard-section {
    overflow-x: visible;
}

.admin-grid {
    display: grid;
    gap: 1rem;
}

.admin-grid > * {
    min-width: 0;
}

.admin-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.stat-card {
    padding: 1.1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(64,99,75,.12);
}

.stat-card strong {
    display: block;
    font-size: 1.8rem;
    font-family: Georgia, 'Times New Roman', serif;
}

/* ── Auth ────────────────────────────────────────────────────── */
.auth-section { }
.auth-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.auth-center { display: flex; justify-content: center; }

.intro-panel {
    background: linear-gradient(160deg, rgba(47,75,55,.9), rgba(30,36,40,.95));
}

/* ── Seção heading ───────────────────────────────────────────── */
.section-heading { margin-bottom: 1rem; }
.section-heading h2 { margin: 0 0 .25rem; }

/* ── Safety box ──────────────────────────────────────────────── */
.safety-box {
    background: rgba(255,255,255,.04);
    border-left: 3px solid var(--accent-2);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-top: .75rem;
}

.safety-box h2,
.safety-box h3 { font-size: .95rem; margin: 0 0 .4rem; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { padding: 2rem 0 3rem; }
.footer-inner {
    padding-top: 1rem;
    border-top: 1px solid rgba(64,99,75,.1);
}

/* ── Misc ────────────────────────────────────────────────────── */
.inline-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ════════════════════════════════════════════════════════════
   BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── Tablet e desktop (≥ 720px) ──────────────────────────────── */
@media (min-width: 720px) {
    .home-grid { grid-template-columns: 1.5fr 1fr; }

    .auth-grid { grid-template-columns: 1fr 1fr; }

    .detail-layout { grid-template-columns: 1.6fr 1fr; }

    .split-grid { grid-template-columns: repeat(2, 1fr); }

    .detail-meta-grid { grid-template-columns: repeat(3, 1fr); }

    .admin-card-grid { grid-template-columns: repeat(4, 1fr); }

    /* FIX DESKTOP: 2 colunas em tablet */
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hero-card { grid-template-columns: 1.4fr auto; }

    /* Filtros em linha */
    .filters-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: .75rem;
        align-items: end;
    }
}

/* ── Desktop largo (≥ 1040px) ───────────────────────────────── */
@media (min-width: 1040px) {
    .topbar-inner { padding: 1.1rem 0; }

    /* FIX DESKTOP: 3 colunas em desktop */
    .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .admin-grid {
        grid-template-columns: 1.5fr 1fr;
        align-items: start;
    }

    .gallery-grid { grid-template-columns: repeat(4, 1fr); }

    .table-wrap table { min-width: 0; } /* evita cortar outras tabelas do painel no desktop */
}

/* ── Mobile (< 720px) ───────────────────────────────────────── */
@media (max-width: 719px) {
    .topbar-inner {
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .brand {
        min-width: 0;
    }

    .brand-title {
        font-size: 1.2rem;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: .75rem;
        margin-top: .5rem;
    }

    .nav.open,
    .menu-state:checked ~ .nav {
        display: flex;
    }

    /* Botões de nav full-width apenas no mobile */
    .nav a,
    .button-link,
    .button-primary,
    .button-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    .detail-meta-grid { grid-template-columns: repeat(2, 1fr); }

    .admin-card-grid { grid-template-columns: repeat(2, 1fr); }

    .hero-card { grid-template-columns: 1fr; }

    /* Tabelas: scroll horizontal no mobile */
    .table-wrap { border-radius: 12px; }
    table { min-width: 520px; }

    /* Formulário de inline-actions em coluna */
    .inline-actions { flex-direction: column; align-items: stretch; }
    .inline-actions a,
    .inline-actions button { text-align: center; }
}