# Razor @ Symbol Fix

## 🐛 Issue Found

**Error:** "The name 'media' does not exist in the current context"

**Location:** Views with CSS `@media` queries

## 🔍 Root Cause

In Razor views (.cshtml files), the `@` symbol has special meaning - it's used to switch from HTML to C# code. When you write CSS directly in a Razor view, you need to escape `@` symbols in CSS at-rules like `@media`.

## ✅ Fix Applied

Changed all `@media` to `@@media` in:
1. ✅ `Views/Home/Index.cshtml` (line 217)
2. ✅ `Views/Shared/_Layout.cshtml` (line 233)

## 📝 The Fix

### Before (❌ Causes Error):
```css
<style>
    @media (max-width: 768px) {
        /* styles */
    }
</style>
```

### After (✅ Correct):
```css
<style>
    @@media (max-width: 768px) {
        /* styles */
    }
</style>
```

## 💡 Why Double @@?

In Razor syntax:
- `@` = Switch to C# code
- `@@` = Escape sequence that outputs a single `@` character

So `@@media` in Razor becomes `@media` in the final HTML.

## 🎯 Other CSS At-Rules That Need Escaping

If you add any of these CSS at-rules in Razor views, remember to escape them:

```css
@@media (min-width: 1024px) { }      /* Media queries */
@@keyframes fadeIn { }               /* Animations */
@@import url('fonts.css');          /* Imports */
@@font-face { }                     /* Custom fonts */
@@supports (display: grid) { }      /* Feature queries */
```

## ✅ Best Practice: External CSS

To avoid this issue entirely, you can:

### Option 1: Use External CSS File (Recommended)
Create `wwwroot/css/site.css` and link it in your layout:
```html
<link rel="stylesheet" href="~/css/site.css" />
```

No need to escape @ symbols in .css files!

### Option 2: Keep Inline (Current Approach)
Just remember to use `@@` for all CSS at-rules.

## 🔧 If You See This Error Again

1. **Look for CSS at-rules** in your .cshtml file
2. **Find any `@` symbols** in `<style>` tags
3. **Double them** → Change `@` to `@@`
4. **Rebuild** and the error will be gone

## 🎯 Quick Test

The error is now fixed! When you run the app:

```bash
cd src/PowderCoating.Web
dotnet run
```

Navigate to `https://localhost:7001` and you should see the beautiful login page without errors!

## 📋 Files Fixed

1. ✅ `Views/Home/Index.cshtml` - Login page
2. ✅ `Views/Shared/_Layout.cshtml` - Main layout

Both now properly escape the @ symbol in CSS media queries.

---

**The Razor parsing error is now fixed! The login page should render perfectly.** ✅