// (C) 2007-2026 GoodData Corporation
@use "sass:math";
@use "@gooddata/sdk-ui-kit/styles/scss/mixins";

@use "variables";
@use "layout";
@use "kpi";
@use "kpi_alert_dialog";
@use "notifications_channels_dialog";
@use "scheduled_mail_recipients";
@use "zIndexes";
@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;

$dashboard-menu-item-icon-color: var(--gd-palette-complementary-5-from-theme, #b1c1d1);

// this must be used on the body element in gdc-dashboards
.gd-dashboards-root {
    background: variables.$gd-dashboards-content-backgroundColor;
    @include mixins.default-styles();

    // needed so that font in textarea stays the same when editing
    textarea {
        color: inherit;
        font: inherit;
    }
}

// Must out-specify the `gd-flex-container` utility's `flex-flow: row wrap`. A single-class
// `flex-wrap: nowrap` ties its specificity and only wins by source order, which is
// non-deterministic under module federation (kit CSS is duplicated across chunks) — when a
// `.gd-flex-container` copy lands last, the root wraps and the canvas overlaps the nav.
// Keep this compound selector; don't reduce to a single class.
.gd-dashboards-root.gd-flex-container {
    flex-flow: row nowrap;
}

.gd-dash-content {
    flex: 1;
    flex-basis: 100%;
}

.gd-dashboards-root--floating-toolbar .dash-section {
    position: relative;
}

.gd-dash-tabs {
    $root: &;

    max-width: 100vw;
    overflow: hidden;
    display: flex;
    background-color: variables.$gd-dashboards-filterBar-backgroundColor;

    & .gd-ui-kit-tabs__container {
        padding: 0 var(--gd-spacing-5px);
    }

    &__list {
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 0;
    }

    &__add-wrapper {
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 0;
        border-bottom: 1px solid var(--gd-palette-complementary-3);
        display: flex;
        align-items: center;
        padding-right: var(--gd-spacing-5px);
    }

    &__add {
        position: relative;
        padding-left: var(--gd-spacing-5px);

        // Left side separator
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 20px;
            background-color: var(--gd-palette-complementary-3);
            transform: translateY(-50%);
        }
    }

    &--with-create {
        #{$root}__list {
            flex-grow: 0;
        }

        #{$root}__add-wrapper {
            flex-grow: 1;
        }
    }

    &__rename-wrapper {
        position: relative;
    }

    // Provides sizing for the rename input
    &__rename-ghost-value {
        visibility: hidden;
    }

    // Rename input wrapper
    &__rename-value {
        position: absolute;
        inset: 0;
    }

    // Rename input itself
    &__rename-input {
        padding: 0;
        border: none;
        width: 100%;
        outline: 1px solid var(--gd-palette-complementary-3);
        outline-offset: var(--gd-spacing-3px);
        font-weight: 700;
    }
}

.gd-dash-bottom-position-pixel {
    height: 1px;
    width: 1px;
    background: transparent;
    position: sticky;
    bottom: 0;
    right: 0;
}

.dash-item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    padding: variables.$item-outer-padding;

    &.dash-item-height {
        min-height: variables.$item-min-height;
    }

    // Grid definition

    @media #{kit-variables.$small-up} {
        flex: 0 0 100%;
        max-width: 100%;
    }

    @media #{kit-variables.$medium-up} {
        flex: 0 0 50%;
        max-width: 50%;
    }

    @media #{kit-variables.$large-up} {
        flex: 0 0 25%;
        max-width: 25%;
    }

    @media #{kit-variables.$xxlarge-up} {
        flex: 0 0 math.percentage(calc(1 / 6));
        max-width: math.percentage(calc(1 / 6));
    }

    @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
        flex-direction: column;

        &::after {
            content: "";
            position: absolute;
            right: 10px;
            bottom: 5px;
            left: 10px;
            height: 0;
            border-bottom: 1px dashed kit-variables.$gd-color-disabled;
        }

        &:last-child::after {
            display: none;
        }
    }

    &.layout-xl {
        flex: 0 0 100%;
        max-width: 100%;
    }

    &.type-visualization {
        .viz-line-family-chart {
            width: 100%;
            min-width: 0;
        }
    }

    &.type-rich-text {
        .viz-line-family-chart {
            width: 100%;
            min-width: 0;
        }
        min-height: 55px;
    }

    &:hover {
        a.kpi-link {
            .kpi-value {
                color: var(
                    --gd-dashboards-content-kpiWidget-kpi-primaryMeasureColor,
                    var(--gd-palette-complementary-9-from-theme, kit-variables.$default-gd-color-link)
                );
            }

            .kpi-value.is-empty-value {
                color: var(
                    --gd-dashboards-content-kpiWidget-kpi-secondaryInfoColor-from-theme,
                    var(--gd-palette-complementary-6-from-theme, inherit)
                );
            }
        }
    }

    .is-selectable {
        cursor: pointer;

        &.dash-item-content:hover {
            border-color: kit-variables.$is-focused-background;
        }

        &.is-selected.dash-item-content {
            border-color: kit-variables.$gd-palette-primary-base;

            &:hover {
                border-color: kit-variables.$gd-palette-primary-base;
            }
        }
    }

    &.gd-highlighted > .dash-item-content-wrapper > .dash-item-content {
        border-color: kit-variables.$gd-palette-primary-base;
    }
}

.dash-item-content-wrapper,
.dash-item-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}

.dash-item-content {
    /**
    It does not work in IE.
    It is necessary for the widget background to be used inside charts and tables only in the
    limited scope of dashboard's widgets. It works in pair with 'defaultDashboardThemeModifier',
    which provides --gd-dashboards-content-widget-chart/table-backgroundColor variables.
     */
    --gd-chart-backgroundColor: var(
        --gd-dashboards-content-widget-chart-backgroundColor,
        var(--gd-dashboards-content-widget-backgroundColor, var(--gd-palette-complementary-0, #fff))
    );
    --gd-table-backgroundColor: var(
        --gd-dashboards-content-widget-table-backgroundColor,
        var(--gd-dashboards-content-widget-backgroundColor, var(--gd-palette-complementary-0, #fff))
    );

    position: relative;
    padding: variables.$item-inner-padding;
    border-width: variables.$gd-dashboards-content-widget-borderWidth;
    border-style: solid;
    border-color: variables.$gd-dashboards-content-widget-borderColor;
    border-radius: variables.$gd-dashboards-content-widget-borderRadius;
    box-shadow: variables.$gd-dashboards-content-widget-dropShadow;
    background-color: kit-variables.$gd-widget-background;
    transition: variables.$transition-length;

    @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
        padding: 10px 5px 5px;
    }

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 50%;
        bottom: 50%;
        left: 50%;
        display: block;
        border-radius: inherit;
    }

    &.is-export {
        padding: 0;
        border-width: 0;
    }

    &.gd-dashboard-nested-layout-content {
        // A nested layout container should not have a background, only the widgets themselves
        background-color: transparent;
    }
}

.type-kpi,
.viz-type-headline {
    .dash-item-action-placeholder {
        top: calc(
            -#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-kpiWidget-borderWidth}
        );
        right: calc(
            -#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-kpiWidget-borderWidth}
        );
    }

    .dash-item-action-description {
        top: calc(
            -#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-kpiWidget-borderWidth}
        );
        right: calc(
            -#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-kpiWidget-borderWidth} +
                #{variables.$item-action-width}
        );
    }

    .dash-item-content {
        border-width: variables.$gd-dashboards-content-kpiWidget-borderWidth;
        border-style: solid;
        border-color: variables.$gd-dashboards-content-kpiWidget-borderColor;
        border-radius: variables.$gd-dashboards-content-kpiWidget-borderRadius;
        background-color: variables.$gd-dashboards-content-kpiWidget-backgroundColor;
        box-shadow: variables.$gd-dashboards-content-kpiWidget-dropShadow;
    }

    .item-headline {
        text-align: variables.$gd-dashboards-content-kpiWidget-title-textAlign;
        color: variables.$gd-dashboards-content-kpiWidget-title-color;
    }
}

.item-headline-outer {
    position: relative;
    z-index: 1;
    height: (variables.$item-headline-lineHeight + variables.$item-headline-padding-vertical) * 2 + 2; // relate SD-956: please update HEADLINE_OUTER_HEIGHT in widgetHeightUtil.ts when height is changed
    margin-top: 10px;
    line-height: (variables.$item-headline-lineHeight + variables.$item-headline-padding-vertical) * 2;

    @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
        margin-top: 0;
        padding: 0;
    }

    .visualization & {
        margin-bottom: 10px;
    }
}

.item-headline,
.item-headline-inner {
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    line-height: variables.$item-headline-lineHeight;
    margin: 0;
    font-weight: normal;
}

.item-headline {
    position: relative;
    width: 100%;
    max-height: (variables.$item-headline-lineHeight + variables.$item-headline-padding-vertical) * 2;
    text-align: variables.$gd-dashboards-content-widget-title-textAlign;
    color: variables.$gd-dashboards-content-widget-title-color;
}

.item-headline-inner {
    overflow: hidden;
}

.viz-zoom-out {
    position: absolute;
    top: -85px;
    right: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: none;
    cursor: pointer;
    transition: variables.$transition-length;
    border-radius: 50%;
    background-color: variables.$button-grey-background;

    &:hover {
        background-color: var(--gd-palette-complementary-7-from-theme, kit-variables.$gd-color-text-dimmed);

        svg path {
            fill: kit-variables.$gd-color-white;
        }
    }

    @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
        top: -73px;
    }
}

.gd-absolute-row {
    position: absolute;
    top: calc(-#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-widget-borderWidth});
    right: calc(-#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-widget-borderWidth});
    height: variables.$item-action-width;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: variables.$item-action-gap;

    .dash-item-action-placeholder {
        position: relative;
        top: auto;
        right: auto;
    }

    // remove portal anchor from flex
    & > span {
        display: none;
    }
}

.dash-item-action-placeholder {
    position: absolute;
    z-index: 2;
    top: calc(-#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-widget-borderWidth});
    right: calc(-#{variables.$item-outer-padding} - #{variables.$gd-dashboards-content-widget-borderWidth});
    width: variables.$item-action-width;
    height: variables.$item-action-width;
}

// Widget action buttons (description, show-as-table, three-dots menu)
.dash-item-action-button {
    display: none;
    align-items: center;
    justify-content: center;
    width: variables.$item-action-width;
    height: variables.$item-action-width;
    border-radius: 50%;
    color: var(--gd-palette-complementary-7, #6d7680);
    background-color: kit-variables.$is-focused-background;
    cursor: pointer;
    transition: variables.$transition-length;
}

.dash-item-content:hover .dash-item-action-button,
.dash-item:focus-visible .dash-item-action-button,
.dash-item-action-placeholder:focus-visible .dash-item-action-button,
.dash-item-action-button--active {
    display: flex;
}

// Show widget buttons not just on small viewports, but also on devices that doesn't support hover (e.g. tablets)
@media #{kit-variables.$small-only}, (hover: none) {
    .dash-item-action-button {
        display: flex;
    }
}

.dash-item-action-button:hover,
.dash-item-action-button--active {
    color: var(--gd-palette-complementary-0, #fff);
    background-color: var(--gd-palette-complementary-7-from-theme, kit-variables.$gd-color-text-dimmed);
}

.dash-item-action-widget-options::before {
    content: "...";
    position: relative;
    top: -5px;
    font-size: 22px;
}

.dash-item-action-description-trigger {
    font-size: variables.$item-action-icon-width;

    .gd-icon-circle-question {
        margin-top: 2px;
    }
}

.dash-section {
    overflow: hidden;
    margin-bottom: 40px;
    padding: 20px;
    border-bottom: 1px solid kit-variables.$gd-border-color;

    &:last-of-type {
        border-bottom: none;
    }
}

.dash-section-kpis {
    max-width: 100vw;

    @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
        margin: 0;
    }
}

.dash-section-header {
    margin-bottom: 20px;

    @media #{kit-variables.$xsmall-only}, #{kit-variables.$small-only} {
        text-align: center;
    }

    &:empty {
        display: none;
    }

    h2 {
        margin-bottom: 0.25em;
        color: kit-variables.$gd-color-dark;
    }

    p {
        color: kit-variables.$gd-color-state-blank;
    }
}

.visualization-content {
    position: relative;
    flex: 1 1 auto;

    .visualization-small-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        background: kit-variables.$gd-widget-background;
        color: kit-variables.$gd-color-state-blank;

        svg path {
            fill: kit-variables.$gd-color-state-blank;
        }

        .visualization-small-content-description {
            max-width: 50%;
        }
    }

    .visualization-small-content + div {
        visibility: hidden;
    }
}

.insight-view-visualization {
    flex: 1 1 auto;
    height: 100%;
}

.gd-layered-table-view {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__panels {
        flex: 1 1 auto;
        min-height: 0;
    }

    &__panel--active {
        height: 100%;
    }
}

.insight-view-loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    &.is-invisible {
        visibility: hidden;
    }
}

.bubble.options-menu-bubble {
    background-color: #fff;

    .gd-menu-wrapper {
        width: 105px;
    }

    .bubble-content {
        padding: 0;
    }
}

.gd-fluidlayout-column-container {
    z-index: zIndexes.$dashboard-layout-column;
}

.gd-header-menu-overlay {
    border: 1px solid transparent;

    .gd-menu-wrapper {
        min-width: 170px;
        max-width: 300px;
    }

    .configuration-panel-header-back-button {
        cursor: pointer;
        border: none;
        background: none;
        color: kit-variables.$gd-color-state-blank;
        padding: 0;
    }

    .gd-menu-item {
        //stylelint-disable-next-line declaration-no-important
        padding: 5px 10px !important;

        .gd-list-icon {
            color: $dashboard-menu-item-icon-color;
            font-size: 16px;
        }

        // Left (leading) icon only - exclude trailing icons (e.g. the partial-results warning) which manage own spacing.
        .gd-list-icon:not(.gd-list-icon-right) {
            margin-right: 10px;
        }

        &.is-submenu {
            // Keep enough space for the :after icon
            //stylelint-disable-next-line declaration-no-important
            padding-right: 30px !important;
        }
    }
}

.gd-grid-layout {
    .dash-item {
        height: 100%;
        width: 100%;
        padding: 0; // no place between widgets, render only containers for resizers

        // reset @media rules set for the .dash-item above,
        // otherwise widgets width will get messed up on screen resize
        flex: unset;
        max-width: unset;

        .is-dragging-widget {
            &.dash-item-content {
                border-color: kit-variables.$is-focused-background;
            }
        }

        /**
         * View mode now uses grid gap. Keep spacing with padding in edit mode only, where using grid gap is problematic.
         * Use :where selector to not mess up with specificity.
         */
        :where(.sdk-edit-mode-on) & {
            &.gd-dashboard-nested-layout-widget {
                .gd-dashboard-nested-layout-widget {
                    padding: 10px 0 0 0; // make space for column drop zone in second level and below
                }
            }

            &:not(.gd-dashboard-nested-layout-widget):not(.gd-first-container-row-widget):not(
                    .drag-info-placeholder
                ) {
                padding: 10px 0; // no place between widgets, render only containers for resizers
            }
            &.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
                padding: 0 0 10px 0;
            }
        }
    }

    .gd-fluidlayout-column-container {
        display: flex;
    }
}

.gd-dash-content--density-compact {
    .dash-item-content {
        padding: 3px;
    }

    // override highcharts direct style
    .highcharts-axis-title {
        // stylelint-disable-next-line declaration-no-important
        font-size: 12px !important;
    }

    .item-headline-outer {
        margin-top: 0;
        height: 20px;
        line-height: 20px;
    }

    .visualization {
        .item-headline-outer {
            margin-bottom: 5px;
        }
    }

    .item-headline-inner {
        font-size: 12px;
        font-weight: 800;
    }

    .gd-absolute-row {
        gap: 5px;
        top: 10px;
        right: 15px;
        height: variables.$item-action-width-compact;

        .dash-item-action-placeholder {
            top: auto;
            right: auto;
        }
    }

    .dash-item-action-placeholder {
        top: 10px;
        right: 15px;
        width: variables.$item-action-width-compact;
        height: variables.$item-action-width-compact;
    }

    .dash-item-action-button {
        width: variables.$item-action-width-compact;
        height: variables.$item-action-width-compact;
    }

    .dash-item-action-widget-options::before {
        font-size: 14px;
    }

    .dash-item-action-description-trigger {
        font-size: 12px;
    }

    .gd-grid-layout {
        .dash-item {
            &.gd-dashboard-nested-layout-widget {
                .gd-dashboard-nested-layout-widget {
                    padding: 0;
                }
            }

            &:not(.gd-dashboard-nested-layout-widget):not(.gd-first-container-row-widget):not(
                    .drag-info-placeholder
                ) {
                padding: 0;
            }

            &.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
                padding: 0;
            }
        }
    }
}