/* HerbalWave Brand Override — dark forest green + glassmorphism
   Served statically, no Vite build required. Loads after app.css. */

:root {
    --hw-green:      #1c3828;
    --hw-green-dark: #152a1e;
    --hw-green-mid:  #2d5c3f;
    --hw-gold:       #b88b3e;
    --hw-gold-light: #dcc08f;
    --hw-cream:      #fbf9f5;
    --hw-border:     #ece6dd;
}

/* ── Sidebar ── */
.claude-sidebar {
    background: var(--hw-green) !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
}

.claude-brand {
    padding: 20px 18px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.claude-brand img {
    filter: brightness(0) invert(1);
    opacity: .92;
}

.claude-mode-wrap {
    padding: 0 14px 14px !important;
}

.claude-kicker {
    color: rgba(255,255,255,.4) !important;
}

.claude-mode-tabs {
    background: rgba(0,0,0,.2) !important;
    border-color: rgba(255,255,255,.08) !important;
}

.claude-mode-tabs > * {
    color: rgba(255,255,255,.5) !important;
}

.claude-mode-tabs .active {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}

.claude-nav-group-label {
    color: rgba(255,255,255,.35) !important;
}

.claude-nav a {
    color: rgba(255,255,255,.6) !important;
}

.claude-nav a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

.claude-nav a.active {
    background: rgba(255,255,255,.13) !important;
    color: #fff !important;
    font-weight: 600;
}

.claude-nav a i {
    background: rgba(255,255,255,.25) !important;
}

.claude-nav a.active i {
    background: var(--hw-gold) !important;
}

.claude-user {
    background: rgba(0,0,0,.2);
    border-top: 1px solid rgba(255,255,255,.07) !important;
}

.claude-user > span {
    background: var(--hw-gold) !important;
    color: #fff !important;
}

.claude-user strong {
    color: rgba(255,255,255,.9) !important;
}

.claude-user small {
    color: rgba(255,255,255,.45) !important;
}

.claude-user small i {
    background: var(--hw-gold) !important;
}

.claude-user summary {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.6) !important;
}

/* ── Topbar ── */
.claude-topbar {
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--hw-border) !important;
}

/* ── Glass cards — KPI / metric / stat panels ── */
.dashboard-panel-heading,
.withdrawal-kpi-grid article,
.withdrawal-queue-panel,
.claude-sales-grid article,
.claude-wallet-grid article,
.claude-panel,
.metric-card,
.surface,
.surface-pad {
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: 0 4px 24px rgba(28,56,40,.08) !important;
}

/* Primary revenue KPI card stays dark green */
.claude-sales-grid .claude-primary-stat {
    background: var(--hw-green) !important;
    border-color: var(--hw-green-mid) !important;
    box-shadow: 0 8px 32px rgba(28,56,40,.35) !important;
}

/* ── Page background — subtle green tint ── */
body,
.claude-preview,
.claude-app,
.portal-claude-shell {
    background: #f0f5f2 !important;
}

.claude-content {
    background: transparent !important;
}

/* ── Active nav dot + gold accent ── */
.claude-amount strong,
.blue-text { color: var(--hw-green) !important; }

.amber-text,
.claude-withdraw { background: var(--hw-gold) !important; }

/* ── Buttons ── */
.primary-button,
.approve,
button[class*="primary"] {
    background: var(--hw-green) !important;
}

.primary-button:hover,
.approve:hover {
    background: var(--hw-green-dark) !important;
}

/* ── Withdrawal status badges ── */
.withdrawal-status.active  { background:#dcfce7; color:#166534; }
.withdrawal-status.pending { background:#fef9c3; color:#854d0e; }
.withdrawal-status.suspended,
.withdrawal-status.rejected { background:#fee2e2; color:#991b1b; }

/* ── Mobile ── */
@media (max-width:800px) {
    .claude-mobile-brand img { filter: brightness(0) invert(1); }
    .claude-topbar { backdrop-filter: blur(8px); }
}