/* Base styling with Inter font */
html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi42NTg0QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2Ni4wMTgzIDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Sticky bottom bar */
.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 100;
}

/* ============================================
   iOS safe areas (installed PWA, viewport-fit=cover)
   env() is 0 on desktop, Android and in a normal Safari tab, so nothing changes there. On an iPhone launched from the Home Screen the
   status bar is translucent and the page draws underneath it, so the fixed chrome has to make room itself.
   ============================================ */

/* The app bar pads itself below the status bar / notch (top) and clear of the notch when the phone is turned sideways (left/right). */
.mud-appbar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ...and the content moves by the same insets. MainLayout gives MudMainContent a constant pt-16 (which is !important) to clear the
   fixed app bar, so the inset is added as padding on the layout that wraps it rather than by restating that padding. This also keeps
   in-flow bars such as .sticky-bottom out from under the notch. */
.mud-layout {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* While a dialog or temporary drawer is open MudBlazor locks page scroll and pads the app bar on the right by the scrollbar width
   (.scroll-locked .mud-layout .mud-appbar, specificity 0,3,0), which would beat the plain rule above; mirror it with the inset added.
   The 17px variant is MudBlazor's Firefox-only twin. */
.scroll-locked .mud-layout .mud-appbar {
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
}

@-moz-document url-prefix() {
    .scroll-locked .mud-layout .mud-appbar {
        padding-right: calc(17px + env(safe-area-inset-right, 0px));
    }
}

/* The clipped drawer is fixed at top: <app bar height> with a matching height; push it down by the inset and let it run to the bottom. */
.mud-drawer.mud-drawer-fixed.mud-drawer-clipped-always {
    margin-top: env(safe-area-inset-top, 0px);
    height: auto;
    bottom: 0;
}

/* A left drawer is flush with the screen edge, so its content clears the notch in landscape. */
.mud-drawer.mud-drawer-pos-left .mud-drawer-content {
    padding-left: env(safe-area-inset-left, 0px);
}

/* With the persistent left drawer open (Responsive drawer at md+), MudBlazor already offsets .mud-main-content by the drawer width and the
   drawer content clears the notch itself, so drop the layout's left inset there or a blank inset-wide strip appears beside the drawer.
   MudBlazor puts .mud-drawer-open-responsive-md-left on the layout only while the drawer is open; when it is collapsed the inset stays. */
@media (min-width: 960px) {
    .mud-layout.mud-drawer-open-responsive-md-left {
        padding-left: 0;
    }
}

/* Bottom-anchored bars keep their content above the home indicator. */
.sticky-bottom.mud-paper {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; /* 1rem = the pa-4 it replaces */
}

/* Snackbars (MudBlazor bottom locations sit 24px from the edges). */
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-right {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.mud-snackbar-location-bottom-left {
    left: calc(24px + env(safe-area-inset-left, 0px));
}

.mud-snackbar-location-bottom-right {
    right: calc(24px + env(safe-area-inset-right, 0px));
}

/* Team logo styling */
.team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Game header background */
.game-header {
    background-color: rgba(0, 0, 0, 0.02);
}

.mud-theme-dark .game-header {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Ensure proper flex gap support */
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

/* Text utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1 { flex-grow: 1; }

/* Ensure MudPaper has proper border radius */
.mud-paper {
    border-radius: 8px;
}

/* ============================================
   Form Control Styling for SSR Account Pages
   ============================================ */

/* Standard form input styling with borders */
.form-control {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: inherit;
    padding: 12px 14px;
    font-size: 1rem;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    border-color: #7986cb;
    box-shadow: 0 0 0 2px rgba(121, 134, 203, 0.25);
    outline: none;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Light mode overrides */
.mud-theme-light .form-control {
    border-color: rgba(0, 0, 0, 0.23);
    color: #212121;
}

.mud-theme-light .form-control:focus {
    border-color: #5c6bc0;
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.25);
}

.mud-theme-light .form-control::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* Form group with label on left */
.form-group-horizontal {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.form-group-horizontal label {
    min-width: 120px;
    flex-shrink: 0;
    font-weight: 500;
}

.form-group-horizontal .form-control {
    flex: 1;
}

/* Standard form group with label above */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.875rem;
}

/* Form floating label styling - improve visibility */
.form-floating {
    position: relative;
    margin-bottom: 16px;
}

.form-floating > .form-control {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: rgba(255, 255, 255, 0.6);
}

.mud-theme-light .form-floating > label {
    color: rgba(0, 0, 0, 0.6);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.8;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    background-color: #1e1e1e;
    padding: 0 4px;
    height: auto;
}

.mud-theme-light .form-floating > .form-control:focus ~ label,
.mud-theme-light .form-floating > .form-control:not(:placeholder-shown) ~ label {
    background-color: white;
}

/* Checkbox styling */
.form-check-input {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    accent-color: #7986cb;
}

/* Validation messages */
.text-danger {
    color: #e57373 !important;
    font-size: 0.75rem;
    margin-top: 4px;
}

.mud-theme-light .text-danger {
    color: #ef5350 !important;
}

/* Read-only inputs */
.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.05);
    opacity: 0.7;
}

.mud-theme-light .form-control[readonly] {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Center and narrow Picks page cards */
.picks-center-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Center and narrow Gameday page cards */
.gameday-center-container {
    max-width: 800px;
    margin: 0 auto;
}

/* PicksPointsChip "move to position" menu. The menu is rendered by MudBlazor in its popover provider, outside the component, so
   component-scoped CSS cannot reach it; this rule has to be global. Touch targets: menu items are 32px by default; make them at
   least 44px tall on coarse pointers. The menu itself still scrolls at its max height (320px). */
@media (pointer: coarse) {
    .rank-menu .mud-menu-item {
        min-height: 44px;
    }
}