/* ==========================================
   DEMON TRAIL INSIGHTS
   STYLE.CSS
========================================== */

:root
{
    --bg-primary: #09090b;
    --bg-secondary: #111827;
    --bg-card: rgba(255,255,255,0.05);

    --border-color: rgba(255,255,255,0.08);

    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;

    --accent: #f59e0b;
    --accent-hover: #fbbf24;

    --success: #22c55e;
    --danger: #ef4444;

    --shadow:
        0 8px 32px rgba(0,0,0,.35);

    --radius: 20px;
}

/* ==========================================
   RESET
========================================== */

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body
{
    min-height:100%;
}

body
{
    font-family:
        Inter,
        Segoe UI,
        sans-serif;

    color:var(--text-primary);

    background:
        radial-gradient(
            circle at top left,
            rgba(245,158,11,.12),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(59,130,246,.08),
            transparent 40%
        ),
        var(--bg-primary);

    overflow-x:hidden;
}

/* ==========================================
   BACKGROUND GRID
========================================== */

body::before
{
    content:"";

    position:fixed;
    inset:0;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:40px 40px;

    pointer-events:none;

    z-index:-1;
}

/* ==========================================
   LOGIN PAGE
========================================== */

.login-page
{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:32px;
}

.login-card
{
    width:100%;
    max-width:450px;

    background:var(--bg-card);

    backdrop-filter:blur(18px);

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

    border-radius:30px;

    padding:40px;

    box-shadow:var(--shadow);

    animation:fadeUp .6s ease;
}

.logo
{
    text-align:center;
    margin-bottom:32px;
}

.logo h1
{
    font-size:2rem;
    letter-spacing:3px;
}

.logo span
{
    display:block;

    margin-top:8px;

    color:var(--text-secondary);

    font-size:.9rem;
}

/* ==========================================
   FORM
========================================== */

.form-group
{
    margin-bottom:18px;
}

.form-group label
{
    display:block;

    margin-bottom:8px;

    color:var(--text-secondary);

    font-size:.9rem;
}

.form-control
{
    width:100%;

    padding:14px 16px;

    border:none;

    border-radius:14px;

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

    color:white;

    outline:none;

    transition:.2s;
}

.form-control:focus
{
    background:rgba(255,255,255,.08);

    box-shadow:
        0 0 0 2px rgba(245,158,11,.25);
}

.btn
{
    width:100%;

    border:none;

    cursor:pointer;

    padding:14px;

    border-radius:14px;

    font-weight:600;

    transition:.25s;
}

.btn-primary
{
    background:var(--accent);

    color:black;
}

.btn-primary:hover
{
    background:var(--accent-hover);

    transform:translateY(-2px);
}

/* ==========================================
   ALERTS
========================================== */

.alert
{
    margin-bottom:20px;

    padding:12px;

    border-radius:12px;
}

.alert-error
{
    background:rgba(239,68,68,.15);

    color:#fca5a5;

    border:1px solid rgba(239,68,68,.25);
}

/* ==========================================
   DASHBOARD LAYOUT
========================================== */

.dashboard
{
    display:flex;

    min-height:100vh;
}

/* ==========================================
   SIDEBAR
========================================== */

.sidebar
{
    width:260px;

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(12px);

    border-right:1px solid var(--border-color);

    padding:24px;
}

.sidebar-logo
{
    margin-bottom:40px;
}

.sidebar-logo h2
{
    font-size:1.2rem;
    letter-spacing:2px;
}

.sidebar-logo p
{
    color:var(--text-secondary);
    font-size:.85rem;
    margin-top:5px;
}

.sidebar nav a
{
    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--text-secondary);

    padding:14px;

    border-radius:12px;

    margin-bottom:8px;

    transition:.2s;
}

.sidebar nav a:hover
{
    background:rgba(255,255,255,.05);

    color:white;
}

.sidebar nav a.active
{
    background:rgba(245,158,11,.15);

    color:var(--accent);
}

/* ==========================================
   CONTENT
========================================== */

.content
{
    flex:1;

    padding:30px;
}

.page-header
{
    margin-bottom:30px;
}

.page-header h1
{
    font-size:2rem;
}

.page-header p
{
    margin-top:8px;

    color:var(--text-secondary);
}

/* ==========================================
   STATS
========================================== */

.stats-grid
{
    display:grid;

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

    gap:20px;

    margin-bottom:30px;
}

.stat-card
{
    background:var(--bg-card);

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

    border-radius:20px;

    padding:24px;

    backdrop-filter:blur(10px);
}

.stat-title
{
    color:var(--text-secondary);

    margin-bottom:10px;

    font-size:.9rem;
}

.stat-value
{
    font-size:2rem;

    font-weight:700;
}

/* ==========================================
   PANELS
========================================== */

.panel
{
    background:var(--bg-card);

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

    border-radius:20px;

    padding:24px;

    margin-bottom:24px;

    backdrop-filter:blur(10px);
}

.panel h3
{
    margin-bottom:18px;
}

/* ==========================================
   TABLE
========================================== */

.table-wrapper
{
    overflow-x:auto;
}

table
{
    width:100%;

    border-collapse:collapse;
}

table th
{
    text-align:left;

    padding:14px;

    color:var(--text-secondary);

    border-bottom:1px solid var(--border-color);
}

table td
{
    padding:14px;

    border-bottom:1px solid rgba(255,255,255,.05);
}

table tr:hover
{
    background:rgba(255,255,255,.03);
}

/* ==========================================
   PROGRESS BAR
========================================== */

.progress
{
    width:100%;

    height:12px;

    background:rgba(255,255,255,.06);

    border-radius:999px;

    overflow:hidden;
}

.progress-bar
{
    height:100%;

    background:linear-gradient(
        90deg,
        var(--accent),
        #fcd34d
    );
}

/* ==========================================
   FILES
========================================== */

.file-list
{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.file-item
{
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(255,255,255,.03);

    padding:14px;

    border-radius:12px;
}

.file-item a
{
    color:white;
    text-decoration:none;
}

.file-item a:hover
{
    color:var(--accent);
}

/* ==========================================
   BADGES
========================================== */

.badge
{
    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    font-size:.8rem;
}

.badge-success
{
    background:rgba(34,197,94,.15);

    color:#86efac;
}

.badge-warning
{
    background:rgba(245,158,11,.15);

    color:#fcd34d;
}

.badge-danger
{
    background:rgba(239,68,68,.15);

    color:#fca5a5;
}

/* ==========================================
   ANIMATION
========================================== */

@keyframes fadeUp
{
    from
    {
        opacity:0;
        transform:translateY(25px);
    }

    to
    {
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:900px)
{
    .dashboard
    {
        flex-direction:column;
    }

    .sidebar
    {
        width:100%;

        border-right:none;

        border-bottom:1px solid var(--border-color);
    }

    .sidebar nav
    {
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .sidebar nav a
    {
        margin-bottom:0;
    }
}

@media (max-width:600px)
{
    .login-card
    {
        padding:30px 24px;
    }

    .content
    {
        padding:20px;
    }

    .page-header h1
    {
        font-size:1.6rem;
    }

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