/* ==========================================================
Admin Analytics Dashboard
========================================================== */

:root {

```
--analytics-bg: #f5f7fa;
--analytics-card-bg: #ffffff;

--analytics-border: #e5e7eb;

--analytics-text: #111827;
--analytics-text-light: #6b7280;

--analytics-shadow:
    0 2px 10px rgba(0,0,0,.08);

--analytics-radius: 12px;

--analytics-success: #10b981;
--analytics-warning: #f59e0b;
--analytics-danger: #ef4444;
--analytics-primary: #2563eb;
```

}

.analytics-dashboard {

```
width: 100%;

padding: 20px;

background: var(--analytics-bg);

min-height: 100vh;

box-sizing: border-box;
```

}

/* ==========================================================
Header
========================================================== */

.analytics-dashboard .admin-header {

```
display: flex;

align-items: center;

justify-content: space-between;

gap: 15px;

margin-bottom: 25px;
```

}

.analytics-dashboard .admin-header h1 {

```
margin: 0;

font-size: 2rem;

color: var(--analytics-text);

font-weight: 700;
```

}

/* ==========================================================
Cards
========================================================== */

.analytics-cards {

```
display: grid;

grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

gap: 20px;

margin-bottom: 30px;
```

}

.analytics-card {

```
background:
    var(--analytics-card-bg);

border:
    1px solid var(--analytics-border);

border-radius:
    var(--analytics-radius);

padding: 20px;

box-shadow:
    var(--analytics-shadow);

transition:
    transform .2s ease,
    box-shadow .2s ease;
```

}

.analytics-card:hover {

```
transform:
    translateY(-3px);

box-shadow:
    0 8px 25px rgba(0,0,0,.12);
```

}

.analytics-card h3 {

```
margin: 0 0 15px;

font-size: 1rem;

color:
    var(--analytics-text-light);

font-weight: 600;
```

}

.analytics-card div {

```
font-size: 2rem;

font-weight: 700;

color:
    var(--analytics-primary);
```

}

/* ==========================================================
Sections
========================================================== */

.analytics-section {

```
background:
    var(--analytics-card-bg);

border:
    1px solid var(--analytics-border);

border-radius:
    var(--analytics-radius);

box-shadow:
    var(--analytics-shadow);

padding: 20px;

margin-bottom: 25px;
```

}

.analytics-section h2 {

```
margin-top: 0;

margin-bottom: 15px;

color:
    var(--analytics-text);

font-size: 1.25rem;

font-weight: 700;
```

}

/* ==========================================================
Realtime Counter
========================================================== */

#realtimeCount {

```
display: inline-flex;

align-items: center;

justify-content: center;

min-width: 70px;

padding: 8px 15px;

border-radius: 999px;

background:
    var(--analytics-success);

color: #fff;

font-weight: bold;

margin-bottom: 15px;
```

}

/* ==========================================================
Tables
========================================================== */

.analytics-table {

```
width: 100%;

border-collapse: collapse;

overflow: hidden;
```

}

.analytics-table thead {

```
background:
    #f3f4f6;
```

}

.analytics-table th {

```
text-align: left;

padding: 14px;

font-size: .95rem;

color:
    var(--analytics-text);

border-bottom:
    1px solid var(--analytics-border);
```

}

.analytics-table td {

```
padding: 14px;

border-bottom:
    1px solid var(--analytics-border);

color:
    var(--analytics-text-light);

word-break: break-word;
```

}

.analytics-table tbody tr:hover {

```
background:
    rgba(37,99,235,.05);
```

}

/* ==========================================================
Scroll
========================================================== */

.analytics-section {

```
overflow-x: auto;
```

}

/* ==========================================================
Status Badges
========================================================== */

.analytics-badge {

```
display: inline-block;

padding: 4px 10px;

border-radius: 999px;

font-size: .85rem;

font-weight: 600;
```

}

.analytics-badge-success {

```
background:
    rgba(16,185,129,.15);

color:
    var(--analytics-success);
```

}

.analytics-badge-warning {

```
background:
    rgba(245,158,11,.15);

color:
    var(--analytics-warning);
```

}

.analytics-badge-danger {

```
background:
    rgba(239,68,68,.15);

color:
    var(--analytics-danger);
```

}

/* ==========================================================
Loading
========================================================== */

.analytics-loading {

```
text-align: center;

padding: 40px;

color:
    var(--analytics-text-light);
```

}

/* ==========================================================
Empty State
========================================================== */

.analytics-empty {

```
text-align: center;

padding: 30px;

color:
    var(--analytics-text-light);
```

}

/* ==========================================================
Responsive
========================================================== */

@media (max-width: 992px) {

```
.analytics-dashboard {

    padding: 15px;
}

.analytics-card div {

    font-size: 1.8rem;
}
```

}

@media (max-width: 768px) {

```
.analytics-dashboard .admin-header {

    flex-direction: column;

    align-items: flex-start;
}

.analytics-cards {

    grid-template-columns: 1fr;
}

.analytics-table {

    min-width: 650px;
}

.analytics-section {

    overflow-x: auto;
}
```

}

@media (max-width: 480px) {

```
.analytics-dashboard {

    padding: 10px;
}

.analytics-card {

    padding: 15px;
}

.analytics-card div {

    font-size: 1.5rem;
}

.analytics-section {

    padding: 15px;
}
```

}

/* ==========================================================
Dark Mode
========================================================== */

@media (prefers-color-scheme: dark) {

```
:root {

    --analytics-bg: #111827;

    --analytics-card-bg: #1f2937;

    --analytics-border: #374151;

    --analytics-text: #f9fafb;

    --analytics-text-light: #d1d5db;
}

.analytics-table thead {

    background:
        #374151;
}

.analytics-table tbody tr:hover {

    background:
        rgba(255,255,255,.05);
}
```

}