/* ==========================================================================
   UHC Dashboard — UI Polish layer
   Loaded AFTER ui-refresh.css, BEFORE mobile.css.
   Goal: add visual energy & depth (gradient accents, micro-interactions,
   richer nav & cards) while keeping the existing UHC teal brand & layout.
   ========================================================================== */

:root {
    --uhc-grad: linear-gradient(135deg, #115480 0%, #1f74ad 55%, #2d8cff 100%);
    --uhc-grad-soft: linear-gradient(135deg, #e8f2fb 0%, #f4f9ff 100%);
    --uhc-glow: 0 8px 26px -10px rgba(45, 140, 255, .45);
    --uhc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- App background: soft layered tint instead of flat grey ---------- */
body {
    background-color: #eef3f9;
    background-image:
        radial-gradient(1100px 480px at 100% -8%, rgba(45, 140, 255, .07), transparent 60%),
        radial-gradient(900px 420px at -10% 0%, rgba(17, 84, 128, .06), transparent 55%);
    background-attachment: fixed;
}

/* ---------- Top navigation: deeper gradient + active glow ---------- */
.main-left {
    background: linear-gradient(100deg, #0c2233 0%, #122b40 45%, #154463 100%) !important;
    box-shadow: 0 6px 22px -10px rgba(12, 34, 51, .6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.nav-link { transition: background .2s var(--uhc-ease), color .2s var(--uhc-ease), transform .2s var(--uhc-ease); }
.nav-link:hover { transform: translateY(-1px); }
.nav-link.active {
    background: var(--uhc-grad) !important;
    box-shadow: 0 6px 16px -6px rgba(45, 140, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}

/* ---------- Page heading ---------- */
.main-heading h1, .team-heading .th-titles h1 {
    background: linear-gradient(92deg, #102a3f 0%, #1f5e8c 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #102a3f;
}

/* ---------- KPI cards: gradient accent, depth, hover lift, entrance ---------- */
.kpi-card {
    border: 1px solid rgba(17, 84, 128, .1);
    box-shadow: 0 2px 4px rgba(16, 38, 58, .04), 0 10px 24px -16px rgba(16, 38, 58, .22);
    transition: transform .22s var(--uhc-ease), box-shadow .22s var(--uhc-ease), border-color .22s var(--uhc-ease);
}
.kpi-card::before { width: 4px; background: var(--uhc-grad); border-radius: 0 3px 3px 0; }
.kpi-card::after {
    content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
    background: radial-gradient(circle at center, rgba(45, 140, 255, .1), transparent 70%);
    pointer-events: none;
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 10px -6px rgba(16, 38, 58, .12), 0 22px 40px -22px rgba(16, 38, 58, .35);
    border-color: rgba(45, 140, 255, .35);
}
.kpi-card.good::before { background: linear-gradient(180deg, #18b364, #15803d); }
.kpi-card.warn::before { background: linear-gradient(180deg, #f59e0b, #b45309); }
.kpi-val { font-variant-numeric: tabular-nums; }

/* health composite + individual score card share the lift */
.kpi-health, .kpi-health-ind { transition: transform .22s var(--uhc-ease), box-shadow .22s var(--uhc-ease), border-color .22s var(--uhc-ease); }
.kpi-health-ind:hover { transform: translateY(-3px); box-shadow: var(--uhc-glow); }
.kpi-bigscore { background: linear-gradient(135deg, #102a3f, #1f74ad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-bigscore.good { background: linear-gradient(135deg, #15803d, #18b364); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-bigscore.warn { background: linear-gradient(135deg, #b45309, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-bigscore.bad  { background: linear-gradient(135deg, #b91c1c, #ef4444); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Panels: hover depth + gradient title accent ---------- */
.dash-panel {
    transition: box-shadow .22s var(--uhc-ease), transform .22s var(--uhc-ease);
    box-shadow: 0 1px 2px rgba(16, 38, 58, .05), 0 12px 28px -22px rgba(16, 38, 58, .28);
}
.dash-panel:hover { box-shadow: 0 2px 4px rgba(16, 38, 58, .06), 0 20px 38px -26px rgba(16, 38, 58, .34); }
.dash-panel-head h3 { position: relative; padding-left: 12px; }
.dash-panel-head h3::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 16px; border-radius: 3px; background: var(--uhc-grad);
}

/* ---------- Score breakdown cards ---------- */
.bd-card { transition: transform .18s var(--uhc-ease), box-shadow .18s var(--uhc-ease); }
.bd-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(16, 38, 58, .4); }
.bd-card.total { background: var(--uhc-grad-soft); }
.bd-card.total .bd-pct { background: linear-gradient(135deg, #115480, #2d8cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Leaderboard: top-3 medal avatars + row hover ---------- */
.lead-row .lead-av { box-shadow: 0 4px 10px -4px rgba(17, 84, 128, .5); }
.lead-row:nth-child(1) .lead-av { background: linear-gradient(135deg, #f7b733, #d99100); box-shadow: 0 4px 12px -4px rgba(217, 145, 0, .6); }
.lead-row:nth-child(2) .lead-av { background: linear-gradient(135deg, #b8c6d1, #8fa3b3); }
.lead-row:nth-child(3) .lead-av { background: linear-gradient(135deg, #d8a07a, #b97a4f); }
.lead-row:nth-child(1) .lead-rank { color: #d99100; }
.lead-row:nth-child(2) .lead-rank { color: #8fa3b3; }
.lead-row:nth-child(3) .lead-rank { color: #b97a4f; }

/* ---------- Buttons: gradient primaries ---------- */
.btn-export-custom, .btn-solid, .dash-range #dash-apply, .team-custom-range #team-range-apply, .ed-range #ed-apply {
    background-image: var(--uhc-grad); background-color: #115480;
    transition: transform .16s var(--uhc-ease), box-shadow .16s var(--uhc-ease), filter .16s var(--uhc-ease);
}
.btn-export-custom:hover, .btn-solid:hover, .dash-range #dash-apply:hover, .team-custom-range #team-range-apply:hover, .ed-range #ed-apply:hover {
    filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--uhc-glow);
}
.dash-presets button.active, .day-btn.active { box-shadow: 0 4px 12px -5px rgba(45, 140, 255, .5); }

/* ---------- Org / team table polish ---------- */
.org-table thead th { background: linear-gradient(180deg, #15334b, #102a3f); }
.org-group { transition: box-shadow .2s var(--uhc-ease); }
.org-group:hover { box-shadow: var(--uhc-shadow-md); }
.og-avatar { box-shadow: 0 5px 12px -5px rgba(17, 84, 128, .55); }

/* ---------- Calendar cells: gentle hover ---------- */
.cal-cell:not(.cal-empty) { transition: transform .15s var(--uhc-ease), box-shadow .15s var(--uhc-ease); }
.cal-cell:not(.cal-empty):hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(16, 38, 58, .35); z-index: 2; }

/* ---------- Status / score pills: a touch of depth ---------- */
.emp-status, .td-status, .ed-score, .cal-status, .cal-chip { box-shadow: 0 1px 2px rgba(16, 38, 58, .08); }

/* ---------- Entrance animation (staggered) ---------- */
@keyframes uhcFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dash-kpis > *, .dash-2col > *, .dash-3col > *, .my-perf, .org-group {
    animation: uhcFadeUp .42s var(--uhc-ease) both;
}
.dash-kpis > *:nth-child(2) { animation-delay: .03s; }
.dash-kpis > *:nth-child(3) { animation-delay: .06s; }
.dash-kpis > *:nth-child(4) { animation-delay: .09s; }
.dash-kpis > *:nth-child(5) { animation-delay: .12s; }
.dash-kpis > *:nth-child(6) { animation-delay: .15s; }
.dash-kpis > *:nth-child(7) { animation-delay: .18s; }
.dash-3col > *:nth-child(2) { animation-delay: .06s; }
.dash-3col > *:nth-child(3) { animation-delay: .12s; }

/* ---------- Modals: nicer entry ---------- */
.detail-card, .export-modal { box-shadow: 0 30px 70px -18px rgba(12, 34, 51, .55); }

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .dash-kpis > *, .dash-2col > *, .dash-3col > *, .my-perf, .org-group { animation: none; }
    .kpi-card:hover, .dash-panel:hover, .bd-card:hover, .cal-cell:hover, .nav-link:hover { transform: none; }
}

/* ---------- Brand mascot watermark ---------- */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: url('../images/mascot-watermark.png') no-repeat center center;
    background-size: min(440px, 44vw) auto;
    opacity: .06;
}
/* keep app chrome & content above the watermark */
header, .main-wrapper { position: relative; z-index: 1; }

/* ---------- Remove the dead vertical band between header and nav (desktop) ----------
   The header now sits in normal flow, but .main-wrapper still reserved 91px of
   top padding (a leftover from when the header was position:fixed). That gap is
   the wasted space — drop it and let the nav stick to the top instead. */
@media (min-width: 992px) {
    .main-wrapper { padding-top: 0 !important; }
    .main-left { top: 0 !important; }
}

/* ---------- "Data through" freshness moved to page bottom ---------- */
.dash-freshness-foot {
    justify-content: center; margin-top: 2px; padding-top: 14px;
    border-top: 1px solid var(--uhc-line); width: 100%;
}

/* ---------- Logout in the nav bar ---------- */
.nav-logout-item { margin-left: auto; }
#navLogoutLink:hover { background: rgba(239, 83, 80, .16) !important; color: #ffd0ce !important; }
#navLogoutLink:hover svg { stroke: #ffd0ce; }

/* ---------- Mobile bottom-nav: keep active glow tasteful ---------- */
@media (max-width: 768px) {
    .nav-bar-list .nav-link.active { background: var(--uhc-grad) !important; box-shadow: 0 4px 12px -5px rgba(45, 140, 255, .5) !important; }
    .kpi-card:hover, .dash-panel:hover { transform: none; }
    /* logout becomes an even bottom-nav item, not pushed to the edge */
    .nav-logout-item { margin-left: 0; }
    #navLogoutLink { color: #b3261e; }
    #navLogoutLink:hover { color: #b3261e !important; background: #fdecea !important; }
    #navLogoutLink:hover svg, #navLogoutLink svg { stroke: #b3261e; }
    /* centered watermark, smaller on phones, clear of the bottom nav */
    body::after { background-size: 62vw auto; background-position: center 42%; opacity: .05; }
}