/* =========================================================
   H — RAW DATA
   Dashboard Preview + Data Explorer Gateway

   H no longer expands.
   ========================================================= */


/* =========================================================
   Panel
   ========================================================= */

.dashboard-panel--raw {
    grid-column: auto;

    min-width: 0;
}


/* =========================================================
   Body
   ========================================================= */

.dashboard-panel__body--raw {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    padding:
        0.65rem
        0.8rem
        0.65rem;
}


/* =========================================================
   Header Data Explorer Link
   ========================================================= */

.raw-data-header-link {
    flex: 0 0 auto;

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

    width: 30px;
    height: 30px;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: transparent;

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.38rem;

    text-decoration: none;

    transition:
        color 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease;
}


.raw-data-header-link:hover {
    color: #3567d4;

    background: var(
        --dashboard-background,
        #f4f6f9
    );

    border-color: #cbd5e1;
}


.raw-data-header-link svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   Toolbar
   ========================================================= */

.raw-data-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.5rem;

    width: 100%;

    margin-bottom: 0.55rem;
}


/* =========================================================
   Search
   ========================================================= */

.raw-data-search {
    display: flex;
    align-items: center;

    gap: 0.4rem;

    width: min(
        100%,
        220px
    );

    min-height: 32px;

    padding:
        0
        0.55rem;

    color: var(
        --dashboard-text-soft,
        #98a2b3
    );

    background: var(
        --dashboard-background,
        #f7f9fb
    );

    border: 1px solid
        var(
            --dashboard-border,
            #dfe5ec
        );

    border-radius: 0.4rem;
}


.raw-data-search svg {
    flex: 0 0 14px;

    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.raw-data-search__input {
    width: 100%;
    min-width: 0;

    padding: 0;

    color: var(
        --dashboard-text,
        #344054
    );

    background: transparent;

    border: 0;
    outline: 0;

    font: inherit;
    font-size: 0.5rem;
}


.raw-data-search__input::placeholder {
    color: var(
        --dashboard-text-soft,
        #98a2b3
    );
}


/* =========================================================
   Count
   ========================================================= */

.raw-data-count {
    flex: 0 0 auto;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.45rem;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   Table Wrapper
   ========================================================= */

.raw-data-table-wrap {
    width: 100%;
    min-width: 0;

    overflow-x: auto;

    background: var(
        --dashboard-surface,
        #ffffff
    );

    border: 1px solid
        var(
            --dashboard-border,
            #e5e9ef
        );

    border-radius: 0.45rem;
}


/* =========================================================
   Preview Table
   ========================================================= */

.raw-data-table {
    width: 100%;

    min-width: 620px;

    border-collapse: collapse;

    color: var(
        --dashboard-text,
        #344054
    );

    background: var(
        --dashboard-surface,
        #ffffff
    );

    font-size: 0.46rem;
}


.raw-data-table th,
.raw-data-table td {
    padding:
        0.46rem
        0.38rem;

    border-bottom: 1px solid
        var(
            --dashboard-border,
            #e5e9ef
        );

    text-align: right;

    white-space: nowrap;
}


.raw-data-table th:first-child,
.raw-data-table td:first-child {
    text-align: left;
}


.raw-data-table thead th {
    color: var(
        --dashboard-text-muted,
        #667085
    );

    background: var(
        --dashboard-background,
        #f7f9fb
    );

    font-size: 0.4rem;
    font-weight: 750;
}


.raw-data-table tbody tr:last-child td {
    border-bottom: 0;
}


.raw-data-table tbody tr:hover {
    background: var(
        --dashboard-background,
        #f8fafc
    );
}


/* =========================================================
   Table Values
   ========================================================= */

.raw-data-table__year {
    color: var(
        --dashboard-text,
        #172033
    );

    font-weight: 800;
}


.raw-data-table__jlp {
    color: #16875d;

    font-weight: 750;
}


.raw-data-table__pnp {
    color: #f47a23;

    font-weight: 750;
}


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

.raw-data-empty {
    padding:
        0.85rem
        0.6rem;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.48rem;
    line-height: 1.4;

    text-align: center;
}


/* =========================================================
   Data Explorer Gateway
   ========================================================= */

.raw-data-gateway {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    margin-top: auto;

    padding-top: 0.65rem;
}


.raw-data-gateway__copy {
    display: grid;

    gap: 0.1rem;

    min-width: 0;
}


.raw-data-gateway__copy strong {
    color: var(
        --dashboard-text,
        #344054
    );

    font-size: 0.48rem;
    font-weight: 800;
}


.raw-data-gateway__copy span {
    max-width: 330px;

    color: var(
        --dashboard-text-muted,
        #667085
    );

    font-size: 0.4rem;
    line-height: 1.4;
}


/* =========================================================
   Explorer Button
   ========================================================= */

.raw-data-gateway__link {
    flex: 0 0 auto;

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

    gap: 0.32rem;

    min-height: 32px;

    padding:
        0
        0.55rem;

    color: #3567d4;

    background: #f7f9ff;

    border: 1px solid
        #cbd7f5;

    border-radius: 0.38rem;

    font-size: 0.43rem;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease;
}


.raw-data-gateway__link:hover {
    color: #2855bd;

    background: #edf2ff;

    border-color: #b8c8ef;
}


.raw-data-gateway__link > span {
    font-size: 0.52rem;
}


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

[data-theme="dark"]
.raw-data-header-link {
    color: #aab4c3;

    border-color: #344054;
}


[data-theme="dark"]
.raw-data-header-link:hover {
    color: #9ab1ef;

    background: #111927;

    border-color: #42516a;
}


[data-theme="dark"]
.raw-data-search {
    color: #8996a9;

    background: #111927;

    border-color: #344054;
}


[data-theme="dark"]
.raw-data-search__input {
    color: #f4f7fb;
}


[data-theme="dark"]
.raw-data-table-wrap {
    background: #172033;

    border-color: #2d394c;
}


[data-theme="dark"]
.raw-data-table {
    color: #dce3ec;

    background: #172033;
}


[data-theme="dark"]
.raw-data-table th,

[data-theme="dark"]
.raw-data-table td {
    border-color: #2d394c;
}


[data-theme="dark"]
.raw-data-table thead th {
    color: #aab4c3;

    background: #111927;
}


[data-theme="dark"]
.raw-data-table__year {
    color: #f4f7fb;
}


[data-theme="dark"]
.raw-data-table tbody tr:hover {
    background: #111927;
}


[data-theme="dark"]
.raw-data-gateway__copy strong {
    color: #f4f7fb;
}


[data-theme="dark"]
.raw-data-gateway__link {
    color: #9ab1ef;

    background: #1c2940;

    border-color: #344d78;
}


[data-theme="dark"]
.raw-data-gateway__link:hover {
    color: #bfd0ff;

    background: #243558;

    border-color: #425b91;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

    .raw-data-gateway {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

    .dashboard-panel--raw {
        grid-column: auto;
    }


    .raw-data-toolbar {
        align-items: stretch;
        flex-direction: column;

        gap: 0.4rem;
    }


    .raw-data-search {
        width: 100%;
    }


    .raw-data-count {
        padding-left: 0.1rem;
    }


    .raw-data-table {
        min-width: 600px;
    }


    .raw-data-gateway {
        align-items: stretch;
    }


    .raw-data-gateway__link {
        width: 100%;
    }

}