/* Copiado de referencia-hub/app/static/css/tema.css em 14/10/2026. Cores = ClickCasa até o Diego escolher as da marca. */
/* TEMA NOVO (referência: dashboard da Olist — arejado, arredondado, amigável).
   Escopado em body.tema-cc: só vale nas telas que pedirem. Aprovado pelo Diego,
   vira padrão trocando a classe no base.html — um lugar só. Azul mantido (decisão
   do Diego 04/08: "pode manter azul"). */

body.tema-cc {
    --bg-page: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #f8fafd;
    --border-soft: #e8ecf4;
    --text-main: #1c2536;
    --text-soft: #6b7794;
    /* azuis do logo ClickCasa (Diego, 29/09): #004db8 = letras, #0086b8 = risquinhos */
    --brand: #004db8;
    --brand-2: #0086b8;
    --blue-soft: #e6edf8;
    --shadow-soft: 0 10px 30px rgba(28, 37, 54, .05);
    --radius-lg: 20px;
    --radius-md: 16px;
    /* Tabler: links, etiquetas, seleções e demais "primary" no azul do logo */
    --tblr-primary: #004db8;
    --tblr-primary-rgb: 0, 77, 184;
    --tblr-primary-darken: #003e93;
    --tblr-primary-lt: #e6edf8;
    --tblr-primary-lt-rgb: 230, 237, 248;
    --tblr-primary-text-emphasis: #002e6e;
    --tblr-primary-bg-subtle: #ccdbf1;
    --tblr-primary-border-subtle: #99b8e3;
    --tblr-blue: #004db8;
    --tblr-blue-rgb: 0, 77, 184;
    --tblr-blue-lt: #e6edf8;
    --tblr-blue-lt-rgb: 230, 237, 248;
    --tblr-link-color: #004db8;
    --tblr-link-color-rgb: 0, 77, 184;
    --tblr-link-hover-color: #003e93;
    --tblr-link-hover-color-rgb: 0, 62, 147;
    --tblr-focus-ring-color: rgba(0, 77, 184, .25);
    background: var(--bg-page);
}

/* ---------- sidebar: itens em pílula, ativo destacado ---------- */
.tema-cc .hub-sidebar { border-right: 0; box-shadow: inset -1px 0 0 #eef1f7; }
.tema-cc .hub-brand { border-bottom: 0; padding-bottom: .6rem; }
.tema-cc .hub-nav-item { border-radius: 999px; padding: .58rem .85rem; }
.tema-cc .hub-nav-item:hover { background: #f1f4fb; color: #003e93; }
.tema-cc .hub-nav-item.active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(0, 77, 184, .30);
}
.tema-cc .hub-nav-item.active .hub-ic { color: #fff; }
.tema-cc .hub-nav-subitem { border-radius: 999px; }
.tema-cc .hub-nav-sub { border-left: 2px solid #e3e9f6; }
.tema-cc .hub-nav-section { color: #9aa5bf; letter-spacing: .09em; }

/* ---------- cabeçalho da página ---------- */
.tema-cc .hub-eyebrow { background: var(--blue-soft); color: #004db8; }
.tema-cc .hub-title { font-size: 1.55rem; letter-spacing: -.03em; color: #16203a; }
.tema-cc .hub-subtitle { font-size: .9rem; }
.tema-cc .hub-user-card, .tema-cc .hub-filter-card { border-radius: 999px; }
.tema-cc .hub-user-avatar { background: var(--brand); color: #fff; border: 0; }

/* ---------- cartões: mais ar, sombra mais doce ---------- */
.tema-cc .card {
    border: 1px solid #edf0f7 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 6px rgba(28, 37, 54, .04), 0 12px 34px rgba(28, 37, 54, .05) !important;
}
.tema-cc .card-header { border-bottom: 1px solid #f0f3f9; padding: .95rem 1.2rem; }
.tema-cc .card-title { color: #1c2a4a; font-size: 1rem; }
.tema-cc .card-sm .card-body { padding: 1rem 1.15rem; }
.tema-cc .hub-mini-label { color: #8a94ad; font-size: .7rem; }
.tema-cc .card-sm .h2 { font-size: 1.7rem; letter-spacing: -.02em; }

/* ---------- botões ---------- */
.tema-cc .btn { border-radius: 11px; }
.tema-cc .btn-primary {
    background: var(--brand); border-color: var(--brand);
    box-shadow: 0 6px 14px rgba(0, 77, 184, .28);
}
.tema-cc .btn-primary:hover { background: #003e93; border-color: #003e93; }
.tema-cc .btn-outline-secondary { border-color: #dde3ef; color: #46536e; background: #fff; }
.tema-cc .btn-outline-secondary:hover { background: #f1f4fb; border-color: #c9d3e8; color: #003e93; }
.tema-cc .form-control, .tema-cc .form-select { border-radius: 11px; border-color: #dde3ef; }
.tema-cc .form-control:focus, .tema-cc .form-select:focus {
    border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(0, 77, 184, .12);
}
.tema-cc .input-group-text { border-radius: 11px; border-color: #dde3ef; background: #f8fafd; }

/* ---------- tabelas ---------- */
.tema-cc table.dataTable thead th, .tema-cc .table thead th {
    background: #f8fafd; color: #67728e; border-bottom: 1px solid #eef1f7 !important;
}
.tema-cc .table td { border-bottom: 1px solid #f2f4f9; }

/* ---------- cartões do banco de mídia ---------- */
.tema-cc .cartao-midia { border-radius: 16px; border: 1px solid #eef1f7; }
.tema-cc .cartao-midia:hover { box-shadow: 0 10px 26px rgba(28, 37, 54, .10); transform: translateY(-3px); }
.tema-cc .cartao-midia img { border-radius: 11px; }
.tema-cc .pasta-ic { color: #f2a916; filter: drop-shadow(0 3px 6px rgba(242, 169, 22, .35)); }

/* ---------- badges mais suaves ---------- */
.tema-cc .badge { border-radius: 999px; font-weight: 600; }