/* ==========================================================================
   Bundle Hub — shared theme tokens (white + green)
   Palette ported from fastnetworkgh.com so both sites read as one brand.
   Load this BEFORE any page's own <style> block:
       <link rel="stylesheet" href="theme.css">
   ========================================================================== */

:root {
    /* Brand */
    --bh-green: #16a34a;
    --bh-green-dark: #15803d;
    --bh-green-light: #22c55e;
    --bh-green-soft: #f0fdf4;
    --bh-green-soft-2: #dcfce7;

    /* Surfaces */
    --bh-bg: #f4f6f8;
    --bh-bg-auth: #f6f8f7;
    --bh-surface: #ffffff;
    --bh-surface-soft: #f8fafc;
    --bh-input: #fafbfc;

    /* Text */
    --bh-heading: #0f172a;
    --bh-text: #334155;
    --bh-muted: #64748b;
    --bh-faint: #94a3b8;
    --bh-placeholder: #c1c7d0;

    /* Lines */
    --bh-line: rgba(20, 28, 38, 0.10);
    --bh-line-strong: rgba(20, 28, 38, 0.16);
    --bh-line-solid: #e2e8f0;
    --bh-line-green: rgba(22, 163, 74, 0.18);

    /* Semantic */
    --bh-danger: #dc2626;
    --bh-danger-bg: #fef2f2;
    --bh-danger-text: #b91c1c;
    --bh-danger-line: #fecaca;
    --bh-success: #16a34a;
    --bh-success-bg: #f0fdf4;
    --bh-success-text: #15803d;
    --bh-success-line: #bbf7d0;
    --bh-warning: #d97706;
    --bh-warning-bg: #fffbeb;
    --bh-warning-text: #92400e;
    --bh-warning-line: #fde68a;

    /* Spacing scale — shared by the dashboard shell, the homepage buy panel
       and the auth cards so the three surfaces breathe identically. */
    --bh-space-1: 6px;
    --bh-space-2: 10px;
    --bh-space-3: 14px;
    --bh-space-4: 18px;
    --bh-space-5: 24px;
    --bh-space-6: 32px;
    --bh-content-max: 1440px;

    /* Radii */
    --bh-r-sm: 8px;
    --bh-r-md: 12px;
    --bh-r-lg: 16px;
    --bh-r-xl: 18px;
    --bh-r-pill: 999px;

    /* Shadows */
    --bh-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px rgba(15, 23, 42, .05);
    --bh-shadow-panel: 0 1px 3px rgba(15, 23, 42, .04), 0 24px 60px rgba(15, 23, 42, .08);
    --bh-shadow-btn: 0 6px 16px rgba(22, 163, 74, .26);
    --bh-shadow-btn-hover: 0 10px 24px rgba(22, 163, 74, .34);
    --bh-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --bh-shadow-md: 0 8px 22px rgba(15, 23, 42, .06);
    --bh-shadow-lg: 0 18px 48px rgba(15, 23, 42, .12);

    /* Gradients */
    --bh-grad-brand: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --bh-grad-bar: linear-gradient(180deg, #16a34a, #22c55e);
    --bh-grad-hero: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%);
    --bh-grad-page: linear-gradient(180deg, #f0fdf4 0, #f8fafc 360px, #eef2f7 100%);

    /* Green glow washes used behind auth cards */
    --bh-glow: radial-gradient(680px 520px at 18% 8%, rgba(22, 163, 74, .07) 0%, transparent 70%),
               radial-gradient(560px 460px at 85% 92%, rgba(22, 163, 74, .05) 0%, transparent 70%);
}

/* ==========================================================================
   Override layer — repaints markup that carries inline style="" attributes
   (dashboard.html, bhilly.html) and anything rendered from JS template
   literals. !important is required here to beat inline styles.
   ========================================================================== */

/* Kill leftover dark glass panels */
.glass-card,
.stat-card,
.feature-card,
.card {
    backdrop-filter: none;
}

/* Primary action — the `a.` variants outrank descendant link colours
   like `.nav-links a`, which would otherwise win on specificity. */
.btn-primary,
a.btn-primary,
.cta-button,
a.cta-button,
.btn-submit,
.btn-primary-modern {
    background: var(--bh-grad-brand);
    color: #fff;
    border: 0;
    box-shadow: var(--bh-shadow-btn);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.btn-primary:hover,
.cta-button:hover,
.btn-submit:hover:not(:disabled),
.btn-primary-modern:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--bh-shadow-btn-hover);
}

.btn-primary:active,
.cta-button:active,
.btn-submit:active:not(:disabled) {
    transform: translateY(0);
}

/* Active navigation pill */
.nav-item.active,
.nav-item-modern.active,
.sidebar-nav a.active {
    background: var(--bh-green-soft) !important;
    color: var(--bh-green) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.nav-item.active i,
.nav-item-modern.active i,
.sidebar-nav a.active i {
    color: var(--bh-green) !important;
}

/* Form controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    background: var(--bh-input);
    border: 1.5px solid var(--bh-line-solid);
    color: var(--bh-heading);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--bh-green);
    background: #fff;
    box-shadow: 0 0 0 3.5px rgba(22, 163, 74, .12);
}

input::placeholder,
textarea::placeholder {
    color: var(--bh-placeholder);
}

/* Accessible focus ring for keyboard users */
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(22, 163, 74, .28);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background: rgba(22, 163, 74, .18);
    color: var(--bh-heading);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bh-surface-soft);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--bh-r-pill);
    border: 2px solid var(--bh-surface-soft);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Status badge vocabulary shared by dashboard.js / bhilly-core.js output */
.status-badge,
.badge {
    padding: .3rem .75rem;
    border-radius: var(--bh-r-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    display: inline-block;
}

.status-badge.pending,
.badge-warning {
    background: var(--bh-warning-bg);
    color: var(--bh-warning-text);
}

.status-badge.completed,
.status-badge.success,
.badge-success {
    background: var(--bh-success-bg);
    color: var(--bh-success-text);
}

.status-badge.failed,
.badge-danger {
    background: var(--bh-danger-bg);
    color: var(--bh-danger-text);
}

.status-badge.not-registered,
.badge-muted {
    background: #f1f5f9;
    color: var(--bh-muted);
}