html, body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
 outline: none;
}

a, .btn-link {
 color: #39b54a;
}

.btn-primary {
 color: #fff;
 background-color: #39b54a;
 border-color: #2d8f3a;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
 box-shadow:0000.1rem white,0000.25rem #5fc96f;
}

.content {
 padding-top:1.1rem;
}

.valid.modified:not([type=checkbox]) {
 outline:1px solid #26b050;
}

.invalid {
 outline:1px solid red;
}

.validation-message {
 color: red;
}

#blazor-error-ui {
 color-scheme: light only;
 background: lightyellow;
 bottom:0;
 box-shadow:0 -1px2px rgba(0,0,0,0.2);
 box-sizing: border-box;
 display: none;
 left:0;
 padding:0.6rem1.25rem0.7rem1.25rem;
 position: fixed;
 width:100%;
 z-index:1000;
}

 #blazor-error-ui .dismiss {
 cursor: pointer;
 position: absolute;
 right:0.75rem;
 top:0.5rem;
 }

.blazor-error-boundary {
 background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTEuMDg0MiAyMzcuNTU5IDk2LjI5MDQgMjM3Ljg4NSA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat1rem/1.8rem, #b32121;
 padding:1rem1rem1rem3.7rem;
 color: white;
}

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

.loading-progress {
 position: relative;
 display: block;
 width:8rem;
 height:8rem;
 margin:20vh auto1rem auto;
}

 .loading-progress circle {
 fill: none;
 stroke: #e0e0e0;
 stroke-width:0.6rem;
 transform-origin:50%50%;
 transform: rotate(-90deg);
 }

 .loading-progress circle:last-child {
 stroke: #1b6ec2;
 stroke-dasharray: calc(3.141 * var(--blazor-load-percentage,0%) *0.8),500%;
 transition: stroke-dasharray0.05s ease-in-out;
 }

.loading-progress-text {
 position: absolute;
 text-align: center;
 font-weight: bold;
 inset: calc(20vh +3.25rem)0 auto0.2rem;
}

 .loading-progress-text:after {
 content: var(--blazor-load-percentage-text, "Loading");
 }

code {
 color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
 color: var(--bs-secondary-color);
 text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
 text-align: start;
}

.fmc-black-gradient {
 background: #221F1F;
}

/* Navigation menu drawer styling */
.mud-drawer {
 background-color: #221F1F !important;
}

.mud-drawer .mud-navmenu {
 background-color: #221F1F !important;
}

.mud-navmenu {
 background-color: #221F1F !important;
}

.loader {
 border:24px solid #FFFFFF;
 border-bottom-color: #39b54a;
 border-radius:50%;
 display: inline-block;
 position: relative;
 box-sizing: border-box;
 animation: rotation1s linear infinite;
}

@keyframes rotation {
0% {
 transform: rotate(0deg);
 }

100% {
 transform: rotate(360deg);
 }
}


.selected-card {
 border:2px solid #39b54a !important;
 box-shadow:0020px rgba(57,181,74,0.3);
}

.garage-card-wrapper {
 position: relative;
 border-radius:12px;
 overflow: hidden;
 transition: all0.3s ease;
 height:100%;
}

.garage-card-wrapper .mud-card-content {
 display: flex;
 flex-direction: column;
 height:100%;
}

.garage-stats-container {
 background: #27272F;
 padding:8px;
 margin-top: auto;
}

.stat-item {
 text-align: center;
 padding:8px8px;
 border-radius:6px;
 background: rgba(0,0,0,0.5);
 transition: all0.2s ease;
 border:2px solid #39b54a;
}

.stat-label {
 font-size:0.75rem;
 text-transform: uppercase;
 letter-spacing:0.5px;
 opacity:0.8;
 color: var(--border-color);
}

.stat-value {
 font-size:1.25rem;
 font-weight:700;
 color: var(--border-color);
 margin-top:4px;
}

.empty-slot-card {
 opacity:0.6;
 border:2px dashed #666;
}

@media (max-width:360px) {
 .garage-stats-container {
 padding:8px;
 }

 .stat-item {
 padding:4px6px;
 }

 .stat-label {
 font-size:0.65rem;
 }

 .stat-value {
 font-size:1rem;
 }
}

/* Responsive image container: fixed aspect ratio, images contained without cropping */
.image-container {
 /* Default aspect ratio; can be overridden via inline style or modifier classes */
 --image-ar:4/3;
 width:100%;
 position: relative;
 display: block;
 padding: 8px;
 aspect-ratio: var(--image-ar);
}

/* Allow easy aspect overrides via utility classes if needed */
.image-container.--square { --image-ar:1/1; }
.image-container.--4x3 { --image-ar:4/3; }
.image-container.--3x2 { --image-ar:3/2; }
.image-container.--21x9 { --image-ar:21/9; }

/* Children fill the container */
.image-container > * {
 width:100%;
 height:100% !important;
}

/* Ensure images fill container width and height */
.image-container img,
.image-container .mud-image,
.image-container .actual-image,
.image-container .placeholder-image {
 width:100% !important;
 height:100% !important;
 object-fit: fill !important;
 display: block;
}

/* Aspect ratio no longer forced - images control their own height based on natural aspect ratio */

.weekend-leagues-card {
 background-color: #27272E !important;
 border-radius:16px !important;
 border: none !important;
}

.svg-title {
 margin-bottom:2rem;
}

 .svg-title svg {
 width:100%;
 max-width:350px;
 height: auto;
 }

.weekend-description {
 color: #a0a0a0 !important;
 font-size:1.1rem !important;
 line-height:1.6 !important;
 margin-bottom:3rem !important;
 max-width:400px;
 margin-left: auto !important;
 margin-right: auto !important;
}

.weekend-button {
 background-color: var(--mud-palette-primary) !important;
 border-radius:8px !important;
 font-weight:600 !important;
 padding:16px !important;
}