/* Standard theme colours*/
:root {
    --krumb-orange: #ff8c00;
    --krumb-cream: #fff5e1;
    --krumb-brown: #8b4513;
    --krumb-charcoal: #2d2d2d;
    --testing-color: #007acc;
}


/* Dashboard grid layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* KPI cards aligned to Krumb palette with gradient */
.kpi-card {
    background: linear-gradient(135deg, var(--krumb-orange) 0%, var(--krumb-cream) 40%, var(--krumb-brown) 100%);
    border: 2px solid var(--krumb-brown);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(45, 45, 45, 0.2);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    color: var(--krumb-charcoal); /* fallback text color */
}

/* Ensure titles remain readable */
.kpi-title {
    font-size: 0.95rem;
    color: var(--krumb-brown);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px rgba(255,255,255,0.8); /* subtle glow for contrast */
}

/* Ensure values pop against gradient */
.kpi-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--krumb-orange);
    text-shadow: 1px 1px rgba(255,255,255,0.8); /* improves readability */
}

/* Hover effect with stronger gradient */
.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(255, 140, 0, 0.4); /* orange glow */
    background: linear-gradient(135deg, var(--krumb-brown) 0%, var(--krumb-orange) 50%, var(--krumb-cream) 100%);
}
/* Sparklines */
.sparkline {
    margin-top: 12px;
}

/* Dashboard heading */
h1 {
    color: var(--krumb-brown);
    font-weight: 700;
    text-shadow: 1px 1px var(--krumb-charcoal);
}

/* Krumb mascot glow */
.krumb img {
    filter: drop-shadow(0 0 6px var(--krumb-orange));
}