body {

    font-family: Arial, sans-serif;

    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(15,23,42,0.2),
            rgba(15,23,42,0.2)
        ),
        url("/static/images/background.png");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    color: white;

}

.peer-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(320px, 1fr));

    gap: 20px;
}

.pending-grid {

```
display: grid;

gap: 20px;
```

}

.pending-card {

```
background:
    rgba(255,255,255,0.08);

backdrop-filter: blur(12px);

border:
    1px solid rgba(255,255,255,0.12);

border-radius: 16px;

padding: 20px;
```

}

.pending-header {

```
margin-bottom: 20px;
```

}

.pending-header h2 {

```
margin-bottom: 10px;
```

}

.pending-meta {

```
display: flex;

gap: 20px;

font-size: 0.9rem;

opacity: 0.8;
```

}

.change-item {

```
margin-bottom: 20px;
```

}

.change-item h4 {

```
margin-bottom: 10px;

color: #cbd5e1;

text-transform: uppercase;

font-size: 0.85rem;
```

}

.change-old {

```
padding: 12px;

margin-bottom: 10px;

border-radius: 8px;

background:
    rgba(239,68,68,0.15);

border-left:
    4px solid #ef4444;
```

}

.change-new {

```
padding: 12px;

border-radius: 8px;

background:
    rgba(34,197,94,0.15);

border-left:
    4px solid #22c55e;
```

}

.pending-actions {

```
display: flex;

gap: 10px;

margin-top: 20px;
```

}

.approve-btn {

```
padding: 10px 20px;

border-radius: 8px;

background:
    rgba(34,197,94,0.2);

color: #86efac;

text-decoration: none;
```

}

.reject-btn {

```
padding: 10px 20px;

border-radius: 8px;

background:
    rgba(239,68,68,0.2);

color: #fca5a5;

text-decoration: none;
```

}

.approve-btn:hover {

```
background:
    rgba(34,197,94,0.35);
```

}

.reject-btn:hover {

```
background:
    rgba(239,68,68,0.35);
```

}

.deployment-grid {

```
display: grid;

gap: 20px;
```

}

.deployment-card {

```
background:
    rgba(255,255,255,0.08);

backdrop-filter: blur(12px);

border:
    1px solid rgba(255,255,255,0.12);

border-radius: 16px;

padding: 20px;
```

}

.deployment-header {

```
display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 15px;
```

}

.deployment-date {

```
opacity: 0.8;
```

}

.deployment-details p {

```
margin-bottom: 10px;
```

}

.deployment-actions {

```
margin-top: 20px;
```

}

.download-btn {

```
display: inline-block;

padding: 10px 20px;

border-radius: 8px;

text-decoration: none;

background:
    rgba(59,130,246,0.2);

color: #93c5fd;
```

}

.download-btn:hover {

```
background:
    rgba(59,130,246,0.35);
```

}



.navbar {

    position: sticky;
    top: 0;
    z-index: 100;

    padding: 15px 25px;

    backdrop-filter: blur(12px);

    background:
        rgba(255,255,255,0.08);

    border-bottom:
        1px solid rgba(255,255,255,0.15);

    box-shadow:
        0 8px 32px rgba(0,0,0,0.3);
}

.navbar a {

    color: white;

    text-decoration: none;

    margin-right: 25px;

    font-weight: bold;

    transition: 0.2s;
}

.navbar a:hover {

    color: #60a5fa;
}

.filter-bar {

    margin-bottom: 20px;

}


.filter-bar input {

    flex: 2;

    min-width: 250px;

    padding: 12px;

    border-radius: 10px;

    border:
        1px solid rgba(255,255,255,0.15);

    background:
        rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

    color: white;
}

.filter-bar select {

    min-width: 180px;

    padding: 12px;

    border-radius: 10px;

    border:
        1px solid rgba(255,255,255,0.15);

    background:
        rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

    color: white;

    cursor: pointer;
}

.filter-bar option {

    background: #1e293b;

    color: white;
}

.container {

    padding: 20px;
}

#search {

    width: 70%;

    padding: 14px;

    margin-bottom: 20px;

    border-radius: 10px;

    border:
        1px solid rgba(255,255,255,0.15);

    background:
        rgba(255,255,255,0.08);

    backdrop-filter: blur(7px);

    color: white;

    box-sizing: border-box;
}

#search::placeholder {

    color:
        rgba(255,255,255,0.5);
}

.container {

    max-width: 1600px;

    margin: auto;

    padding: 25px;
}

.peer-card[data-status="Unassigned"] {

    border-color: rgba(0,125,100,0.8);
}

.peer-card[data-status="3 Cam"] {

    border-color: rgba(0,135,65,0.8);
}

.peer-card[data-status="4 Cam"] {

    border-color: rgba(225,150,0,0.8);
}

.peer-card[data-status="User"] {

    border-color: rgba(0,150,255,0.7);
}

.peer-card[data-status="HW"] {

    border-color: rgba(100,0,175,0.8);
}


.peer-card {

    backdrop-filter: blur(6px);

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid rgba(255,255,255,0.15);

    border-radius: 15px;

    padding: 20px;

    text-decoration: none;

    color: white;

    box-shadow:
        0 8px 32px rgba(0,0,0,0.3);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.peer-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.4);

    border-color:
        rgba(96,165,250,0.5);
}