/* ============================================================================
   PAWDARE — Brand Component Layer (Brandbook v1.0 "Warm Tech")
   ----------------------------------------------------------------------------
   Reusable component classes so screens stop re-declaring brand CSS.
   Design tokens (--copper*, --linen, --sand, --g1, --track, --brand-border,
   --brand-shadow, --font-display, --font-ui, --charcoal, --graphite, --green)
   live on :root in templates/layout/default.php and are consumed here.

   Type scale (Brandbook §06): ONLY page titles (H1/H2) + proper names
   (pet names) are Marcellus. Card titles, labels, buttons, nav are Montserrat.
   Buttons/pills 100px · cards 16–20px · inputs 12px · shadows warm-toned.
   ============================================================================ */

/* ── Cards ─────────────────────────────────────────────────────────────── */
.brand-card {
    background: var(--white);
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    box-shadow: var(--brand-shadow);
    padding: 20px;
}
/* §08 canonical "glass" treatment — use on premium / hero surfaces */
.brand-card--glass {
    background: rgba(255,255,255,.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--brand-shadow);
}
.brand-card:hover.brand-card--hover { box-shadow: 0 12px 32px rgba(140,90,60,.12); }

/* Card / section title — Montserrat (H3 level, NOT Marcellus) */
.brand-card-title {
    font-family: var(--font-ui);
    font-size: 15px; font-weight: 700; color: var(--charcoal);
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.brand-card-title i { color: var(--copper-ui); font-size: 17px; }

/* Proper-name / display heading — Marcellus */
.brand-display { font-family: var(--font-display); font-weight: 400; color: var(--charcoal); }

/* Page title (AdminKit .app-page-title) — Marcellus display, portal-wide */
.app-page-title .page-title-heading > div:last-child {
    font-family: var(--font-display); font-weight: 400; font-size: 24px;
    color: var(--charcoal); line-height: 1.2;
}
.app-page-title .page-title-subheading { font-family: var(--font-ui); }

/* ── Buttons (global .btn-copper = G1 pill lives in default.php) ─────────── */
.btn-copper-outline-pill {
    background: rgba(230,201,168,.18); color: var(--copper-deep) !important;
    border: 1.5px solid var(--copper); border-radius: 100px;
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px; transition: background .2s;
}
.btn-copper-outline-pill:hover { background: rgba(230,201,168,.3); }

/* ── Stat box ──────────────────────────────────────────────────────────── */
.brand-stat-box {
    background: var(--white); border: 1px solid var(--brand-border);
    border-radius: 16px; padding: 16px; box-shadow: var(--brand-shadow);
    display: flex; align-items: center; gap: 12px;
}
.brand-stat-icon {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: var(--g1); box-shadow: 0 6px 16px rgba(140,90,60,.28);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 19px;
}
.brand-stat-num   { font-size: 24px; font-weight: 800; color: var(--charcoal); line-height: 1; }
.brand-stat-label { font-size: 11px; color: #8a7a6c; margin-top: 3px; }
.brand-stat-link  { font-size: 11px; color: var(--copper-deep); font-weight: 600; text-decoration: none; margin-top: 3px; display: block; }

/* ── Chips / tags ──────────────────────────────────────────────────────── */
.brand-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 100px;
    background: rgba(230,201,168,.18); color: var(--copper-deep);
    letter-spacing: .3px; white-space: nowrap;
}
/* Positive-first status chips (Brandbook editorial rule) */
.brand-chip-ok {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(39,174,96,.12); color: #1e8a4c;
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px;
}
.brand-chip-action {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1.5px solid var(--copper); color: var(--copper-deep) !important;
    background: rgba(230,201,168,.18);
    font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 100px;
    text-decoration: none; cursor: pointer; font-family: inherit; transition: background .2s;
}
.brand-chip-action:hover { background: rgba(230,201,168,.3); color: var(--copper-deep); }

/* ── Halo avatar (Brandbook signature) ─────────────────────────────────── */
.brand-halo {
    width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
    background: radial-gradient(circle at 50% 35%, rgba(230,201,168,.9), rgba(247,242,235,0) 70%);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.brand-halo__inner {
    width: 68px; height: 68px; border-radius: 50%;
    background: #f0e9e0; border: 2px solid var(--copper); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 2px 6px rgba(255,255,255,.4);
}
.brand-halo__inner img { width: 100%; height: 100%; object-fit: cover; }

/* ── Progress + completeness level ─────────────────────────────────────── */
.brand-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: #6b5a4c; font-weight: 600; }
.brand-progress { background: var(--track); border-radius: 100px; height: 8px; overflow: hidden; margin: 6px 0; }
.brand-progress__bar { height: 100%; border-radius: 100px; background: var(--g1); }
.brand-level { font-size: 11px; color: var(--copper-deep); font-weight: 700; letter-spacing: .12em; margin-top: 4px; text-align: center; line-height: 1.35; }
.brand-level .lv-nudge { color: #8a7a6c; font-weight: 600; letter-spacing: normal; }