/*
|--------------------------------------------------------------------------
| DASHBOARD WRAPPER
|--------------------------------------------------------------------------
*/

.nextzen-dashboard {

    max-width: 1280px;

    margin: 40px auto;

    padding: 20px;
}

/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 35px;

    flex-wrap: wrap;
}

.dashboard-header h2 {

    margin: 0;

    font-size: 42px;

    font-weight: 700;

    color: #0f172a;
}

.dashboard-header p {

    margin-top: 8px;

    color: #64748b;

    font-size: 16px;
}

/*
|--------------------------------------------------------------------------
| REPORT COUNT
|--------------------------------------------------------------------------
*/

.dashboard-count {

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: #ffffff;

    padding: 14px 24px;

    border-radius: 14px;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(37,99,235,0.22);
}

/*
|--------------------------------------------------------------------------
| FILTERS
|--------------------------------------------------------------------------
*/

.dashboard-filters {

    display: flex;

    gap: 15px;

    align-items: center;

    flex-wrap: wrap;

    margin-bottom: 35px;

    background: #ffffff;

    padding: 18px;

    border-radius: 18px;

    box-shadow:
        0 4px 20px rgba(15,23,42,0.06);
}

.dashboard-filters input,
.dashboard-filters select {

    flex: 1;

    min-width: 220px;

    height: 52px;

    border: 1px solid #dbe3ee;

    border-radius: 12px;

    padding: 0 18px;

    font-size: 15px;

    background: #f8fafc;

    transition: all 0.25s ease;
}

.dashboard-filters input:focus,
.dashboard-filters select:focus {

    outline: none;

    border-color: #2563eb;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(37,99,235,0.08);
}

.dashboard-filters button {

    height: 52px;

    padding: 0 26px;

    border: none;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;
}

.dashboard-filters button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(37,99,235,0.25);
}

/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.dashboard-grid {

    display: grid;

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

    gap: 24px;
}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.report-card {

    background: #ffffff;

    border-radius: 22px;

    padding: 28px;

    box-shadow:
        0 6px 25px rgba(15,23,42,0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    border: 1px solid #eef2f7;

    position: relative;

    overflow: hidden;
}

.report-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(15,23,42,0.12);
}

/*
|--------------------------------------------------------------------------
| TOP
|--------------------------------------------------------------------------
*/

.report-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 24px;
}

.report-title {

    font-size: 22px;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 8px;

    line-height: 1.3;
}

.report-industry {

    display: inline-flex;

    align-items: center;

    background: #eff6ff;

    color: #2563eb;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| RISK BADGE
|--------------------------------------------------------------------------
*/

.report-rating {

    min-width: 62px;

    text-align: center;

    background: #f8fafc;

    border: 1px solid #dbe3ee;

    padding: 10px 14px;

    border-radius: 14px;

    font-size: 14px;

    font-weight: 700;

    color: #0f172a;
}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

.report-body {

    margin-bottom: 25px;
}

.report-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 0;

    border-bottom: 1px solid #eef2f7;

    gap: 12px;
}

.report-meta:last-child {

    border-bottom: none;
}

.report-meta span {

    color: #64748b;

    font-size: 14px;
}

.report-meta strong {

    color: #0f172a;

    font-size: 15px;

    font-weight: 700;

    text-align: right;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.report-actions {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.report-btn {

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    transition: all 0.25s ease;

    border: 1px solid #dbe3ee;

    background: #ffffff;

    color: #0f172a;
}

.report-btn:hover {

    transform: translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| PRIMARY BUTTON
|--------------------------------------------------------------------------
*/

.report-btn.primary {

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: #ffffff;

    border: none;
}

.report-btn.primary:hover {

    box-shadow:
        0 10px 20px rgba(37,99,235,0.25);
}

/*
|--------------------------------------------------------------------------
| DANGER BUTTON
|--------------------------------------------------------------------------
*/

.report-btn.danger {

    background: #fff1f2;

    color: #dc2626;

    border-color: #fecdd3;
}

.report-btn.danger:hover {

    background: #dc2626;

    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.dashboard-empty {

    background: #ffffff;

    border-radius: 22px;

    padding: 100px 20px;

    text-align: center;

    color: #64748b;

    font-size: 18px;

    box-shadow:
        0 6px 25px rgba(15,23,42,0.06);
}

/*
|--------------------------------------------------------------------------
| LOGIN
|--------------------------------------------------------------------------
*/

.nextzen-dashboard-login {

    max-width: 520px;

    margin: 80px auto;

    background: #ffffff;

    padding: 40px;

    border-radius: 20px;

    text-align: center;

    box-shadow:
        0 8px 30px rgba(15,23,42,0.08);

    font-size: 18px;

    color: #475569;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .dashboard-header {

        flex-direction: column;

        align-items: flex-start;
    }

    .dashboard-header h2 {

        font-size: 32px;
    }

    .dashboard-filters {

        flex-direction: column;

        align-items: stretch;
    }

    .dashboard-filters input,
    .dashboard-filters select,
    .dashboard-filters button {

        width: 100%;
    }

    .dashboard-grid {

        grid-template-columns: 1fr;
    }

    .report-actions {

        grid-template-columns: 1fr;
    }

    .report-card {

        padding: 22px;
    }

    .report-title {

        font-size: 20px;
    }
}