/* Gambit — bold & competitive theme overlay (works with MudBlazor dark palette) */
:root {
    --gambit-bg: #0B0D12;
    --gambit-surface: #161A22;
    --gambit-surface-2: #1F242E;
    --gambit-border: #2A303C;
    --gambit-text: #F4F6FA;
    --gambit-text-dim: #98A2B3;
    --gambit-primary: #FF5722;
    --gambit-secondary: #19E3FF;
    --gambit-gold: #FBBF24;
    --gambit-win: #36D399;
}

html, body {
    background: var(--gambit-bg) !important;
    color: var(--gambit-text);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.gambit-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }

.gambit-wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
    color: var(--gambit-text);
    cursor: pointer;
}
.gambit-wordmark .mark { color: var(--gambit-primary); }

.gambit-navlink {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--gambit-text-dim);
    cursor: pointer;
    padding-bottom: 4px;
}
.gambit-navlink.active { color: var(--gambit-text); border-bottom: 2px solid var(--gambit-primary); }

.gambit-main { background: var(--gambit-bg); min-height: calc(100vh - 64px); }
.gambit-page { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; }

.gambit-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: .5px;
}
.gambit-hero-title .accent { color: var(--gambit-primary); }
.gambit-hero-sub { color: var(--gambit-text-dim); font-size: 15px; margin-top: 8px; }

.gambit-searchbar {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px;
}
.gambit-search-input, .gambit-filter {
    display: flex; align-items: center; gap: 8px;
    background: var(--gambit-surface); border: 1px solid var(--gambit-border);
    border-radius: 6px; padding: 10px 12px; font-size: 13px; color: var(--gambit-text-dim);
}
.gambit-search-input { flex: 1; min-width: 220px; }

.gambit-cta {
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: .5px;
    background: var(--gambit-primary); color: #160B07; border: none;
    border-radius: 6px; padding: 10px 18px; font-size: 13px; cursor: pointer;
}
.gambit-cta:hover { filter: brightness(1.05); }

.gambit-tag {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 11px;
    letter-spacing: .8px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}
.gambit-tag.primary { background: var(--gambit-primary); color: #160B07; }
.gambit-tag.muted { background: var(--gambit-surface-2); color: var(--gambit-text-dim); }
.gambit-tag.cyan { background: var(--gambit-surface-2); color: var(--gambit-secondary); }
.gambit-tag.verified { background: #0B2E2A; color: var(--gambit-win); }
.gambit-tag.danger { background: #3a1414; color: #ff6b6b; }

.gambit-card {
    background: var(--gambit-surface); border: 1px solid var(--gambit-border);
    border-radius: 8px; padding: 16px;
}
.gambit-card.featured { border-color: var(--gambit-primary); border-width: 2px; }
.gambit-clickable { cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.gambit-clickable:hover { border-color: var(--gambit-primary); transform: translateY(-2px); }

.gambit-search-field {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--gambit-text); font-family: 'Inter', sans-serif; font-size: 13px;
}
.gambit-search-field::placeholder { color: var(--gambit-text-dim); }
.gambit-input {
    background: var(--gambit-surface) !important; border: 1px solid var(--gambit-border) !important;
    border-radius: 6px; padding: 11px 12px; width: 100%;
}
.gambit-input:focus { border-color: var(--gambit-primary) !important; }

.gambit-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px;
}
.gambit-meta { color: var(--gambit-text-dim); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.gambit-gold { color: var(--gambit-gold); }

.gambit-organiser {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding: 12px 14px;
    background: var(--gambit-surface-2); border: 1px solid var(--gambit-border);
    border-radius: 8px; cursor: pointer; transition: border-color .12s ease;
}
.gambit-organiser:hover { border-color: var(--gambit-primary); }
.gambit-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: var(--gambit-primary); color: #160B07;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px;
}
.gambit-avatar.lg { width: 72px; height: 72px; font-size: 26px; }

/* Unread count on the app-bar bell. MudBadge anchors to the icon BUTTON's corner, and the
   button carries ~8px of padding, so the default position lands the count off the bell glyph
   and right next to the avatar — where it reads as the avatar's count. Pull it back over the
   glyph and keep a clear gap before the avatar. */
.gambit-notif-badge { margin-right: 14px; }
.gambit-notif-badge .mud-badge {
    /* Nudge the count back over the bell glyph. Use MARGINS, not transform: MudBlazor positions
       the badge with its own `transform: translate(50%, -50%)`, so overriding transform would
       replace that and move the badge somewhere else entirely. Margins compose with the
       absolute offsets instead. */
    margin-right: 7px;
    margin-top: 5px;
    font-weight: 700;
    /* A ring in the bar colour separates the badge from the glyph it sits on. The app bar is
       painted from the Mud palette (admin-editable theme), so read that, not a gambit-* var. */
    box-shadow: 0 0 0 2px var(--mud-palette-appbar-background, var(--gambit-surface-1));
}

.gambit-thread {
    display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
    padding: 14px; background: var(--gambit-surface); border: 1px solid var(--gambit-border);
    border-radius: 8px; min-height: 220px; max-height: 460px; overflow-y: auto;
}
.gambit-bubble {
    max-width: 78%; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4;
    position: relative;
}
.gambit-bubble.mine { align-self: flex-end; background: var(--gambit-primary); color: #160B07; }
.gambit-bubble.theirs { align-self: flex-start; background: var(--gambit-surface-2); color: var(--gambit-text); }
.gambit-bubble-time { display: block; font-size: 10px; opacity: .65; margin-top: 3px; text-align: right; }
.gambit-sys {
    align-self: center; font-size: 12px; color: var(--gambit-text-dim);
    background: var(--gambit-surface-2); padding: 4px 12px; border-radius: 20px; text-align: center;
}
.gambit-register { font-family: 'Space Grotesk', sans-serif; color: var(--gambit-primary); font-weight: 500; font-size: 13px; }

.admin-sidebar-link {
    display: flex;
    align-items: center;
    /* MudBlazor ships a global `button { justify-content: center }` reset; without an
       explicit override here every sidebar item's icon+label renders centered instead
       of left-aligned. */
    justify-content: flex-start;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--gambit-text-dim);
    text-decoration: none !important;
    font-size: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-sidebar-link:hover {
    background: var(--gambit-surface-2);
    color: var(--gambit-text);
}
.admin-sidebar-link.active {
    background: var(--gambit-primary);
    color: #160B07 !important;
}
.admin-sidebar-link.active .mud-icon-root {
    color: #160B07 !important;
}

/* Top bar clears the device status bar / notch. env() insets are 0 on desktop web. */
.gambit-appbar {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box;
}
.gambit-appbar .mud-toolbar {
    height: 64px !important;
    min-height: 64px !important;
}

.gambit-layout-container {
    display: flex;
    flex-direction: row;
    margin-top: calc(64px + env(safe-area-inset-top, 0px));
    min-height: calc(100vh - 64px - env(safe-area-inset-top, 0px));
    width: 100%;
    position: relative;
}
.gambit-sidebar {
    width: 280px;
    flex: 0 0 280px;
    background: var(--gambit-surface);
    border-right: 1px solid var(--gambit-border);
    padding: 20px;
    display: none;            /* collapsible — shown when the container has .nav-open */
    flex-direction: column;
    gap: 20px;
}
.gambit-layout-container.nav-open .gambit-sidebar { display: flex; }
.gambit-nav-backdrop { display: none; }
.sidebar-box {
    background: var(--gambit-surface-2);
    border: 1px solid var(--gambit-border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.sidebar-box-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--gambit-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    padding-left: 8px;
}
.sidebar-box-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@media (max-width: 959px) {
    .gambit-layout-container {
        flex-direction: column;
    }
    /* Sidebar becomes a slide-in drawer over the content (doesn't push it down). */
    .gambit-sidebar {
        display: flex;
        position: fixed;
        top: calc(64px + env(safe-area-inset-top, 0px));
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 82vw;
        flex: none;
        border-right: 1px solid var(--gambit-border);
        border-bottom: none;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 1200;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.45);
    }
    .gambit-layout-container.nav-open .gambit-sidebar { transform: translateX(0); }
    .sidebar-box { width: 100%; flex: none; min-width: 0; }
    .sidebar-box-links { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
    .gambit-layout-container.nav-open .gambit-nav-backdrop {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: calc(64px + env(safe-area-inset-top, 0px));
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1190;
    }
}

/* Print: strip the app chrome and anything tagged .no-print, and flatten to
   plain black-on-white so reports (e.g. organizer payouts) print cleanly. */
@media print {
    .gambit-appbar,
    .mud-appbar,
    .gambit-sidebar,
    .mud-drawer,
    .gambit-nav-backdrop,
    .no-print {
        display: none !important;
    }

    .gambit-page {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    body,
    .gambit-page,
    .gambit-card {
        background: #fff !important;
        color: #000 !important;
    }

    .gambit-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}