/* ============================================================================
   Home dashboard — 2028 layout pass.
   Scoped under .home-dashboard so other .dashboard-card consumers (e.g. Manage >
   AI Access) are untouched. Token-driven so it reads in every theme.

   TWO layers:
     1. LAYOUT / STRUCTURE  — applies in ALL themes (hero, stat chips, status
        rail, card rhythm, iCal date tiles, bid affordance). Solid surfaces.
     2. AURORA GLASS        — gated to html[data-theme="aurora"], the "extra"
        theme: translucent liquid-glass cards, ambient aurora wash, glow.

   Loaded after density.css so its spacing wins; uses color-mix for theme safety.
   ============================================================================ */

/* ========================== 1. LAYOUT (all themes) ========================= */

.home-dashboard { position: relative; }

/* On home, the team header (below) stands in for the global player-search bar, so
   hide that bar. Scoped to the sidebar layout: in top-nav the bar is the top-right
   action slot with reserved padding, so hiding it there would leave a gap / fight
   the nav. (The hero can't live inside the header bar via sections: the layout
   renders in a separate island from the interactive page, so SectionContent from
   Home never reaches a SectionOutlet in MainLayout.) */
html[data-layout="sidebar"] main:has(.home-dashboard) .top-header-bar.flex-row { display: none !important; }

/* ---- Subtle status rail (terminal header, dialed down) ---- */
.dash-statusrail {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 2px 6px 16px;
    flex-wrap: wrap;
}
.dash-statusrail .live {
    color: var(--accent-success);
    display: flex; align-items: center; gap: 7px;
    font-weight: 500;
}
.dash-statusrail .live::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-success);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-success) 70%, transparent);
    animation: dashpulse 2.2s infinite;
}
.dash-statusrail .sep { opacity: 0.35; }
.dash-statusrail .right { margin-left: auto; }
@keyframes dashpulse { 50% { opacity: 0.4; } }

/* ---- Hero: flush header strip, NOT a floating card. Sits at the top of the page
   where the (now-hidden) search bar was, separated by a hairline. ---- */
.home-dashboard .dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 2px 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-default);
    box-shadow: none;
    border-radius: 0;
    position: relative;
}
@media (max-width: 820px) {
    .home-dashboard .dash-hero .dash-hero-right { width: 100%; }
}
.dash-hero-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dash-hero-logo {
    width: 54px; height: 54px; border-radius: 15px; object-fit: cover;
    border: 1px solid var(--border-default); flex: none;
    background: var(--surface-3);
}
.dash-hero-id h1 {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 28px);
    letter-spacing: -0.02em;
    margin: 0; line-height: 1.05;
}
.dash-hero-id .sub { color: var(--text-secondary); font-size: 13px; margin-top: 5px; }
.dash-hero-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dash-status-pill {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600;
    color: var(--accent-success);
    background: var(--accent-success-subtle);
    border: 1px solid color-mix(in srgb, var(--accent-success) 34%, transparent);
    padding: 8px 14px; border-radius: 30px; white-space: nowrap;
}
.dash-status-pill::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-success);
    box-shadow: 0 0 9px color-mix(in srgb, var(--accent-success) 80%, transparent);
}
.dash-stat-chip {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 9px 15px; border-radius: 15px;
    background: color-mix(in srgb, var(--surface-3) 60%, transparent);
    border: 1px solid var(--border-subtle);
}
.dash-stat-chip .v {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-variant-numeric: tabular-nums;
    font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
    color: var(--text-primary);
}
.dash-stat-chip .v small { color: var(--text-tertiary); font-size: 12px; }
.dash-stat-chip .v.ok { color: var(--accent-success); }
.dash-stat-chip .v.pri { color: var(--accent-secondary); }
.dash-stat-chip .v.warn { color: var(--accent-warning); }
.dash-stat-chip .l {
    font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-tertiary); margin-top: 5px; white-space: nowrap;
}

/* ---- Cards (solid by default) ---- */
.home-dashboard .dash-section { margin-bottom: 18px; }
.home-dashboard .dash-section:last-child { margin-bottom: 0; }
.home-dashboard .dashboard-card {
    position: relative;
    background: var(--surface-1) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 44px -32px rgba(0,0,0,0.6) !important;
}
.home-dashboard .dashboard-card:hover { border-color: var(--border-strong) !important; }
.home-dashboard .dashboard-card-header {
    padding: 15px 18px 11px !important;
    border-bottom: none !important;
}
.home-dashboard .dashboard-card-header::after { display: none !important; }
.home-dashboard .dashboard-card-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em;
}
.home-dashboard .dashboard-icon-wrapper {
    width: 30px !important; height: 30px !important;
    border-radius: 10px;
    background: var(--accent-primary-subtle);
    color: var(--accent-secondary);
    border: 1px solid var(--border-subtle);
    font-size: 0.85rem !important;
}
.home-dashboard .dashboard-card-action { font-size: 12px !important; color: var(--text-tertiary) !important; font-weight: 500 !important; }
.home-dashboard .dashboard-card-action:hover { color: var(--text-secondary) !important; }

/* ---- Active auctions + Bid affordance ---- */
.home-dashboard .auction-item {
    padding: 11px 16px !important;
    border-bottom: none !important;
    border-radius: 15px;
    margin: 0 7px;
}
.home-dashboard .auction-item + .auction-item { box-shadow: 0 -1px 0 var(--border-subtle); }
.home-dashboard .auction-item:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important; }
.home-dashboard .auction-avatar .player-image { border-radius: 11px; }
.home-dashboard .auction-name-link { font-weight: 600; letter-spacing: -0.005em; }
.home-dashboard .auction-bid-amount {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary) !important;
}
.home-dashboard .auction-timing { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; }
.home-dashboard .auction-bid-btn {
    font-size: 12px; font-weight: 600;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    border: 1px solid var(--border-default);
    padding: 8px 15px; border-radius: 11px;
    text-decoration: none; white-space: nowrap; transition: 0.15s;
}
.home-dashboard .auction-bid-btn:hover {
    background: color-mix(in srgb, var(--text-primary) 14%, transparent);
    border-color: var(--border-strong);
}
.home-dashboard .auction-item.is-urgent .auction-bid-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent-primary) 80%, transparent);
}

/* ---- iCal-icon calendar date tiles (all themes) ---- */
.home-dashboard .calendar-row {
    gap: 14px !important;
    padding: 9px 11px !important;
    border-radius: 14px;
    border-bottom: none !important;
}
.home-dashboard .calendar-row:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.home-dashboard .calendar-date {
    width: 50px; height: 50px; border-radius: 13px;
    /* !important: scoped Calendar.razor.css (.calendar-date { background: var(--surface-2) })
       loads after dashboard.css and would otherwise win, making the tile dark and the
       dark day number invisible (esp. in Aurora). The iCal tile is always white. */
    background: #fdfdfd !important; flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-top: 5px;
    box-shadow: 0 9px 20px -9px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}
.home-dashboard .calendar-month { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.07em; color: #ff3b30 !important; line-height: 1; text-transform: uppercase; }
.home-dashboard .calendar-day { font-size: 23px !important; font-weight: 600 !important; color: #1d1d1f !important; line-height: 1; margin-top: 3px; letter-spacing: -0.02em; }
.home-dashboard .calendar-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.home-dashboard .calendar-title .cal-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cal-color, var(--accent-primary)); flex: none;
    box-shadow: 0 0 7px var(--cal-color, var(--accent-primary));
}
.home-dashboard .calendar-when { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; padding-left: 16px; }
.home-dashboard .calendar-pill {
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-success); background: var(--accent-success-subtle);
    border: 1px solid color-mix(in srgb, var(--accent-success) 34%, transparent);
    padding: 4px 9px; border-radius: 20px; margin-left: auto;
}

/* ---- Transactions / discussions tighten ---- */
.home-dashboard .transaction-item-compact,
.home-dashboard .topic-list-item { border-radius: 13px; }
.home-dashboard .transaction-avatar-small .player-image { border-radius: 9px; }

/* ===================== 2. AURORA — liquid glass material ==================== */

/* Ambient aurora wash behind the glass (the backdrop the cards refract).
   Painted as a ::before layer rather than a background property — shared.css /
   layout.css force .home-dashboard's background with !important, so a background
   declaration would lose; a pseudo-element sidesteps that entirely. Children are
   lifted to z-index:1 so the wash sits behind them and gets blurred by the cards.
   position:absolute (not fixed) confines the wash to the .home-dashboard box so it
   can't leak over the sidebar / app chrome. */
html[data-theme="aurora"] .home-dashboard { position: relative; }
html[data-theme="aurora"] .home-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(680px 460px at 8% 4%, color-mix(in srgb, var(--accent-primary) 30%, transparent), transparent 60%),
        radial-gradient(620px 480px at 100% 8%, color-mix(in srgb, var(--accent-secondary) 22%, transparent), transparent 58%),
        radial-gradient(700px 560px at 80% 100%, color-mix(in srgb, var(--accent-success) 16%, transparent), transparent 60%),
        radial-gradient(560px 460px at 0% 104%, color-mix(in srgb, var(--accent-danger) 13%, transparent), transparent 60%);
}
html[data-theme="aurora"] .home-dashboard > * { position: relative; z-index: 1; }

/* Translucent liquid-glass cards + hero. The .dash-section qualifier (and
   !important) is required to beat themes.css `.dash-section .dashboard-card {
   backdrop-filter: none !important }` and shared.css's forced blur. */
html[data-theme="aurora"] .home-dashboard .dash-section .dashboard-card {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--surface-3) 60%, transparent),
        color-mix(in srgb, var(--surface-1) 52%, transparent) 60%,
        color-mix(in srgb, var(--surface-0) 48%, transparent)) !important;
    backdrop-filter: blur(34px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(165%) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
        0 24px 56px -30px rgba(0,0,0,0.8) !important;
}
/* Specular top-edge highlight. */
html[data-theme="aurora"] .home-dashboard .dash-section .dashboard-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 22%);
}
html[data-theme="aurora"] .home-dashboard .dash-stat-chip {
    background: color-mix(in srgb, #fff 6%, transparent);
    backdrop-filter: blur(10px);
}