/* ============================================================
   site.css  —  Global styles
   Only styles actually referenced as standalone class names
   in .razor / .css / .js files.

   Bracket/KO draw styles → ko-bracket-global.css
   Component-scoped styles → their own .razor.css files
   ============================================================ */


/* ============================================================
   1. MUD THEME — text readability tweaks
   ============================================================ */

.mud-theme-light,
[data-mud-theme="light"],
:root {
    --mud-palette-text-secondary: rgba(0, 0, 0, 0.65); /* was 0.54 */
    --mud-palette-text-disabled: rgba(0, 0, 0, 0.50); /* was 0.38 */
}

/* ============================================================
   6. GLOBAL CONTENT WRAPPER — centered layout for all pages
   ============================================================ */

.app-content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}
/* ============================================================
   2. MUD TABLE — global vertical alignment fix
   ============================================================ */

.mud-table td {
    vertical-align: middle;
}


/* ============================================================
   3. PLAYER CELL  (EventEntriesTab.razor)
   ============================================================ */

.player-cell {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.entry-name {
    display: inline-flex;
    align-items: center;
}


/* ============================================================
   4. LEGACY AVATAR CLASSES (kept for backward compatibility)
   ============================================================ */

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    display: block;
    background: #555;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    display: block;
    background: #555;
}


/* ============================================================
   5. PLAYER AVATAR COMPONENT  (PlayerAvatar.razor)

   Sizes:
     XSmall  24px  — bracket slots, dense match cards
     Small   32px  — table rows, entries tab
     Medium  40px  — toolbar, compact lists
     Large   56px  — player cards grid
     XLarge  80px  — dialog, profile panels
     Hero   120px  — player dashboard hero

   object-position: top center
     Ensures face photos show the top (head/face) of the image
     rather than the geometric centre, which often cuts off the head.
   ============================================================ */

.player-avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

    /* XSmall — 24px */
    .player-avatar-wrapper.avatar-xsmall {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    /* Small — 32px */
    .player-avatar-wrapper.avatar-small {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    /* Medium — 40px */
    .player-avatar-wrapper.avatar-medium {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    /* Large — 56px */
    .player-avatar-wrapper.avatar-large {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }

    /* XLarge — 80px */
    .player-avatar-wrapper.avatar-xlarge {
        width: 80px;
        height: 80px;
        min-width: 80px;
    }

    /* Hero — 120px */
    .player-avatar-wrapper.avatar-hero {
        width: 120px;
        height: 120px;
        min-width: 120px;
    }

/* ── Photo image inside avatar ── */
.player-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
     * object-position: top center
     * Keeps the top of the photo (face/head) visible in the circle.
     * Without this, object-fit:cover centres the image which can
     * cut off the top of a portrait photo.
     * Adjust to "center center" if photos are already tightly cropped.
     */
    object-position: top center;
    border-radius: 50%;
    display: block;
}

/* ── Fallback MudAvatar (initials / icon) ── */
.player-avatar-fallback {
    width: 100% !important;
    height: 100% !important;
}

/*================================================================*/
/* ================================================================
   OPTIONAL — paste into site.css (NOT a per-dialog file).

   These rules were previously inside CreateMatchesDialog's <style>
   block, but they target global MudBlazor popover/list classes, so
   they styled EVERY dropdown in the app — but only while that dialog
   was open. If you want this dropdown polish, it belongs here in
   site.css so it applies consistently everywhere, on purpose.

   If you don't want app-wide dropdown restyling, just don't add this
   and MudSelect will use its defaults. Nothing else depends on it.
   ================================================================ */

.mud-popover.mud-popover-open {
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.mud-popover .mud-list-item {
    padding-top: 8px;
    padding-bottom: 8px;
}

    .mud-popover .mud-list-item:hover {
        background-color: var(--mud-palette-action-default-hover);
    }

.mud-popover {
    transition: transform 0.08s ease, opacity 0.08s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Dashboard background — Twilight (violet + cool blue), both modes
   Matches the auth pages. Driven by the class on <MudLayout>.
   =============================================================== */

/* Dark */
.mud-layout.app-dark {
    min-height: 100vh;
    background-color: #0d1017;
    background-image: radial-gradient(760px 460px at 10% -8%, rgba(126, 111, 255, 0.22), transparent 66%), radial-gradient(760px 540px at 100% 100%, rgba(56, 150, 255, 0.16), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Light */
.mud-layout.app-light {
    min-height: 100vh;
    background-color: #edf1fb;
    background-image: radial-gradient(760px 460px at 10% -8%, rgba(126, 111, 255, 0.14), transparent 66%), radial-gradient(760px 540px at 100% 100%, rgba(56, 150, 255, 0.10), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

    /* Let the gradient show through the content area (app bar & drawer keep their own bg) */
    .mud-layout.app-dark .mud-main-content,
    .mud-layout.app-light .mud-main-content {
        background: transparent;
    }