/* Organisation Admin Dashboard Specific Styles */
main.page__dashboard#page__dashboard--org-admin {

    .dashboard-container {
        gap: 0.5rem;
        grid-template-areas:
            "filterRow         "
            "membershipActivity"
            "membershipActivity";
        grid-template-columns: 1fr;
        grid-template-rows: min-content auto;
    }

    .filter-row {
        display: grid;
        gap: 0.5rem;
        grid-area: filterRow;
        grid-template-areas:
            "orgAdminDashboardFilter componentGroupOne componentGroupInvites componentGroupThree"
            "orgAdminDashboardFilter dashboardSummary componentGroupTwo surveysOverview"
            "orgAdminDashboardFilter dashboardSummary shiftsOverview surveysOverview";

        grid-template-columns: min-content repeat(3, 1fr);
        grid-template-rows: auto auto;

        section.dashboard__section {
            &#dashboard__section--one {
                grid-area: componentGroupOne;
            }

            &#dashboard__section--invites {
                grid-area: componentGroupInvites;
            }

            &#dashboard__section--two {
                grid-area: componentGroupTwo;
            }

            &#dashboard__section--three {
                grid-area: componentGroupThree;
            }
        }
    }

    @media screen and (max-width: var(--screen-xl)) {
        .filter-row {
            grid-template-areas:
                "orgAdminDashboardFilter componentGroupOne     componentGroupThree"
                "orgAdminDashboardFilter componentGroupInvites surveysOverview"
                "orgAdminDashboardFilter componentGroupTwo     shiftsOverview"
                "orgAdminDashboardFilter dashboardSummary      shiftsOverview";
            grid-template-columns: min-content repeat(2, 1fr);
            grid-template-rows: auto auto auto;
        }
    }

    @media screen and (max-width: 768px) {
        .filter-row {
            grid-template-areas:
                "orgAdminDashboardFilter"
                "componentGroupOne"
                "componentGroupThree"
                "componentGroupInvites"
                "componentGroupTwo"
                "surveysOverview"
                "dashboardSummary"
                "shiftsOverview";
            grid-template-columns: 1fr;
            grid-template-rows: auto;
        }
    }
}

/* Dashboard layout */

.dashboard {
    display: flex;
    flex-direction: row;
    gap: 12px;

    .card.card__dashboard {
        position: relative;
        transition: box-shadow .25s;
        border: 2px solid transparent;
        background-clip: padding-box;


        &::before {
            content: '';
            position: absolute;
        }


        &::after {
            content: "";
            position: absolute;
            inset: -2px;
            z-index: -1;
            border-radius: var(--border-radius);
            background: linear-gradient(180deg, var(--theme-tenth-opacity-color), var(--theme-color-darker), var(--theme-tenth-opacity-color)),
            linear-gradient(-90deg, var(--theme-tenth-opacity-color), var(--theme-color-darker), var(--theme-tenth-opacity-color));
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        &:hover::after {
            opacity: 1;
        }

        &#news_feed_overview {
            grid-area: newsFeedOverview;
        }

        &#shifts_overview {
            grid-area: shiftsOverview;
        }

        &.dashboard_summary {
            grid-area: dashboardSummary;
        }

        &#surveys_overview {
            grid-area: surveysOverview;
        }
    }

    .card.card__dashboard#membership_activity {
        grid-area: membershipActivity;
    }
}

.dashboard__column {
    flex: 1 1 0;
    width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard__statgroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tables with dashboard analytics */
.stat-table-wrapper {
    overflow-x: scroll;
    width: 100%;
    border-radius: var(--border-radius);
}

.stat-table {
    width: 100%;
    border-collapse: collapse;

    & thead tr > :first-child {
        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: -1rem;
            height: 100%;
            width: 1rem;
            background: linear-gradient(90deg, #E4E4E4, transparent)
        }
    }

    & tbody tr > :first-child {
        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: -1rem;
            height: 100%;
            width: 1rem;
            background: linear-gradient(90deg, #F4F4F4, transparent)
        }
    }

    & tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        padding-right: 20px;
    }

    & tbody tr > :first-child {
        background-color: var(--off-white);
    }
}

.stat-table__row {
    text-align: left;
}

.stat-table__row--header {
    color: var(--gray-500);
    text-transform: uppercase;
    font-size: 0.875rem;
    white-space: nowrap;
}

.stat-table__cell {
    padding: 5px 0 5px 10px;

    &:first-child {
        /*padding-left: 20px;*/
    }

    &:last-child {
        padding-right: 20px;
    }
}

.stat-table__cell--header {
    background-color: var(--gray-200);

    &:first-child {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
    }

    &:last-child {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
}

.stat-table__cell--emphasized {
    font-weight: var(--font-weight-bold);
}

.stat-table__stat {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
}

.stat-table__stat-change {
    font-size: 0.875rem;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.stat-table__stat-change--positive {
    color: var(--success);
}

.stat-table__stat-change--negative {
    color: var(--danger);
}

/* Individual Component Styles */
.dashboard__cards-frame {
    &#announcements_overview {
        .announcement-speech-bubble-wrapper {
            .speech-bubble-skeleton {
                width: 100%;
            }

            .heading-wrapper .badge,
            .heading-wrapper .skeleton__badge {
                margin-left: auto;
            }

            header.speech-bubble-header {
                .message-name.skeleton__text--h5 {
                    background-color: var(--lightest-gray);
                    margin-left: auto;
                }
            }
        }
    }

    &#chat_analysis {
        .tab-content-wrapper#chat-analysis-overview-tab {
            gap: 0;

            .cards-container {
                display: flex;
                flex: 1;
                flex-direction: column;
                overflow: unset;

                .cards-wrapper {
                    flex: 1;
                }
            }
        }
    }
}