/* race media hulk Dashboard Styles */

/* Brand Colors:
 * Black:  #000000
 * Gray1:  #b2b2b2
 * Gray2:  #525252
 * White:  #ffffff
 * Red:    #e63728
 * Orange: #ff6b35 (gradient endpoint - verify with brand guidelines)
 */

/* Base Typography */
* {
    font-family: 'Source Sans Pro', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
    font-family: 'Source Sans Pro', sans-serif !important;
}

.brand-name {
    font-family: 'BBH Bartle', 'Source Sans Pro', sans-serif !important;
}

/* Base Theme */
body {
    background-color: #000000;
    color: #b2b2b2;
}

/* Brand Gradients */
.racing-gradient {
    /* Linear gradient at 20° angle: red to orange - USE FOR BUTTONS/ACCENTS ONLY */
    background: linear-gradient(20deg, #e63728 50%, #ff6b35 100%);
}

.panel-gradient {
    /* Subtle dark gradient for content panels */
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #525252;
}

.stat-card {
    /* Stats card styling with better contrast */
    background: linear-gradient(135deg, #262626 0%, #1a1a1a 100%);
    border: 1px solid #525252;
}

.gradient-subtle {
    /* Deprecated - use panel-gradient instead */
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

.hero-gradient {
    /* Radial glow effect behind hero text */
    background: radial-gradient(circle at 50% 0%, rgba(230, 55, 40, 0.35) 0%, transparent 60%);
}

.feature-card {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(230, 55, 40, 0.5);
}

/* Accents */
.racing-accent {
    border-left: 3px solid #e63728;
}

.logo-glow {
    filter: drop-shadow(0 0 8px rgba(230, 55, 40, 0.4));
}

/* Navigation Links */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #b2b2b2;
    transition: all 0.2s ease;
    text-decoration: none;
}

.nav-link:hover {
    color: #ffffff;
    background-color: rgba(230, 55, 40, 0.1);
}

.nav-link.active {
    color: #e63728;
    background-color: rgba(230, 55, 40, 0.15);
    font-weight: 600;
}

/* Layout */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 16rem;
    background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
    border-right: 1px solid #525252;
    overflow-y: auto;
}

.main-content {
    margin-left: 16rem;
    min-height: 100vh;
    width: calc(100vw - 16rem);
    display: flex;
    flex-direction: column;
}

.topbar {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    border-bottom: 1px solid #525252;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

main {
    flex: 1;
    overflow-y: auto;
}