/*
    dashboard-theme-modern.css
    Modern Software Factories theme: lighter deep-navy base, glass navigation,
    restrained gold accents, and a cleaner contemporary font stack.

    copyright (c) 2009-2026 Software Factories of America.
    All rights reserved.
*/

:root {
    --sf-bg: #0f172a;
    --sf-bg-2: #172554;
    --sf-bg-3: #1e293b;
    --sf-panel: rgba(255,255,255,.075);
    --sf-panel-strong: rgba(255,255,255,.12);
    --sf-border: rgba(255,255,255,.16);
    --sf-text: #f8fafc;
    --sf-muted: #cbd5e1;
    --sf-blue: #3b82f6;
    --sf-blue-soft: #60a5fa;
    --sf-gold: #d4a017;
    --sf-gold-soft: #f5c451;
    --sf-shadow: 0 22px 70px rgba(2,8,23,.34);
}

/* main layout */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--sf-text);
    background:
        radial-gradient(circle at 80% 10%, rgba(59,130,246,.22), transparent 32%),
        radial-gradient(circle at 15% 85%, rgba(212,160,23,.12), transparent 30%),
        linear-gradient(135deg, var(--sf-bg) 0%, #111827 55%, #0b1120 100%);
}

.dashboard-bg {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    background:
        radial-gradient(circle at 70% 8%, rgba(96,165,250,.16), transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #111827 54%, #0b1120 100%);
}

.left-nav {
    position: relative;
    width: 280px;
    padding: 1.5rem 1.25rem;
    background:
        linear-gradient(180deg, rgba(30,64,115,.52), rgba(15,23,42,.9) 65%, rgba(59,10,69,.42));
    border-right: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow);
    backdrop-filter: blur(14px);
}

.dashboard-main {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 50px 64px 2rem 64px;
    background:
        radial-gradient(circle at 75% 8%, rgba(59,130,246,.18), transparent 36%),
        linear-gradient(180deg, rgba(15,23,42,.5), rgba(15,23,42,.94));
}

.logo {
    font-size: clamp(2rem, 2.6vw, 3.4rem);
    white-space: nowrap;
    color: var(--sf-text);
    font-weight: 800;
    letter-spacing: -.035em;
    margin: 0 0 20px 0;
    text-shadow: 0 0 20px rgba(59,130,246,.18);
}

.logo strong,
.logo .accent,
.logo .experience {
    color: var(--sf-gold-soft);
}

.angled {
    transform: skewY(-12deg);
    transform-origin: top left;
}

.unangled {
    transform: skewY(12deg);
}

.metric-tile {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--sf-border);
    border-radius: 18px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 14px 30px rgba(2,8,23,.22);
}

.gold-gradient {
    background: linear-gradient(to bottom, #f5c451, #d4a017 55%, #986f0c);
}

.green-gradient {
    background: linear-gradient(to bottom, #54d22f, #24730c 52%, #1f5f11);
}

/* Highlight Line */
.title-line {
    width: min(500px, 80%);
    height: 2px;
    margin-bottom: 20px;
    background: linear-gradient(90deg, var(--sf-blue), rgba(96,165,250,.32), transparent);
}

.page-title {
    color: var(--sf-text);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: -.045em;
    margin-bottom: 10px;
    text-shadow: 0 0 24px rgba(59,130,246,.18);
}

.page-title .innovation,
.blue-accent {
    color: var(--sf-blue-soft);
}

.page-title .experience,
.gold-accent {
    color: var(--sf-gold-soft);
}

/* Navigation Buttons */
.nav-button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 230px;
    min-height: 56px;
    margin-bottom: 14px;
    padding: 0 18px;
    color: var(--sf-text);
    text-decoration: none;
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: -.02em;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
    border: 1px solid var(--sf-border);
    border-radius: 16px;
    transform: skewY(-3deg);
    box-shadow: 0 12px 28px rgba(2,8,23,.26);
    backdrop-filter: blur(12px);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.nav-button:hover,
.nav-button:focus-visible,
.nav-button.active {
    background: linear-gradient(180deg, rgba(59,130,246,.24), rgba(255,255,255,.07));
    border-color: rgba(96,165,250,.6);
    transform: skewY(-3deg) translateX(4px);
    outline: none;
}

.nav-button.active {
    box-shadow: inset 4px 0 0 var(--sf-gold-soft), 0 12px 28px rgba(2,8,23,.26);
}

/* Keep Text Straight */
.nav-button span,
.nav-button i,
.nav-button svg {
    transform: none;
}

/* Dividers */
.gold-divider,
.gold-divider-angle {
    height: 2px;
    width: 240px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, transparent, var(--sf-gold-soft), rgba(59,130,246,.48), transparent);
}

.gold-divider-angle {
    transform: skewY(-3deg);
}

.gold-divider,
.title-line {
    position: relative;
}

.gold-divider::before,
.title-line::before {
    content: "✦";
    position: absolute;
    left: -10px;
    top: -15px;
    color: var(--sf-gold-soft);
    font-size: 22px;
    text-shadow: 0 0 14px rgba(245,196,81,.65);
}

.hero-header {
    margin-bottom: 1rem;
}

.hero-header-angle {
    margin-bottom: 1rem;
    transform: skewY(-3deg);
}

.hero-logo,
.hero-logo-angle {
    max-width: 520px;
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(2,8,23,.32));
}

.hero-logo-angle {
    transform: skewY(-3deg);
}

/* Optional light section for below-the-hero storytelling */
.story-panel {
    background: rgba(248,250,252,.96);
    color: #1e293b;
    border-radius: 24px;
    padding: clamp(1.5rem, 3vw, 3rem);
    box-shadow: 0 24px 70px rgba(2,8,23,.25);
}