/* Handle theme: the Handle brand colours (Charcoal #1E1F21, Brass #C99A2E,
   Lager #F7E3A3, Foam #FFFFFF) and Archivo. Loaded after
   style.css via /css/theme.css when BRAND_THEME=handle. Charcoal carries
   buttons and active states (white text stays readable on it); Brass is the
   highlight; Lager tints. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&display=swap');

:root {
    --accent-hsl: 220 5% 12%;
    --accent-2-hsl: 220 4% 24%;
    --brass: #C99A2E;
    --lager: #F7E3A3;
    --on-page: #1E1F21;
    --on-page-muted: #4a4c51;
    --on-page-subtle: #6b6d72;
    /* Statistics charts: brass, with lager for the second series. */
    --chart-primary: #C99A2E;
    --chart-secondary: #ead28a;
    --chart-single: #C99A2E;
    --chart-primary-fill: rgba(201, 154, 46, 0.14);
}

body {
    background: #F6F4EF;
    color: #1E1F21;
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

/* Text that sat directly on the navy page. */
.logo-text h1,
.user-info,
.user-name,
.view h2,
#loginView h2,
#dashboardView h2,
.view-header h2 {
    color: var(--on-page);
    text-shadow: none;
}

.logo-text h1,
.view h2,
.view-header h2 {
    font-weight: 800;
}

.logo-subtitle,
.user-greeting {
    color: var(--on-page-subtle);
}

/* Header: a white bar with a brass edge, so the club's logo sits on white. */
.header {
    background: #ffffff;
    border: 1px solid #e7e1d3;
    border-top: 4px solid var(--brass);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.nav-tabs,
.card,
.stat-card,
.table-container,
.dashboard-card {
    border: 1px solid #e7e1d3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Active tab: charcoal text on a lager tint, brass underline. */
.nav-tab:hover,
.nav-tab.active {
    background: rgba(247, 227, 163, 0.45);
}
.nav-tab.active {
    border-bottom-color: var(--brass);
}

.metric-icon {
    background: rgba(247, 227, 163, 0.6);
}

/* "Powered by Handle" under the login form (BRAND_POWERED_BY). */
.powered-by strong {
    color: #1E1F21;
}

/* Demo install: banner and login hint in Lager instead of gold/blue. */
#demoBanner {
    background: var(--lager) !important;
    color: #1E1F21 !important;
}
.demo-login-hint {
    background: #fbf3da !important;
    border: 1px solid #f0e2b0;
    color: #1E1F21 !important;
}