/**
 * File modchooser.scss.
 * Contains styles for the module chooser.
 */
/* Main modal dialogue style customization. */
.modchooser.modal-dialog {
    --#{$prefix}modal-width: #{$modal-xl};
    --#{$prefix}modal-header-border-width: 0;
    .modal-header {
        .modal-title {
            flex-grow: 1;
            text-align: center;
            font-weight: $font-weight-bold;
            font-size: $h5-font-size;
            @include media-breakpoint-up(sm) {
                font-size: $h4-font-size;
            }
        }
    }
    .modal-body {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 0;
        .carousel-item {
            background-color: $modal-content-bg;
            // Remove the default transition on carousel items.
            transition: none !important; /* stylelint-disable-line declaration-no-important */
            &.active {
                display: flex;
            }
            @include media-breakpoint-up(sm) {
                height: 640px;
                // Ensure the modal content does not exceed the viewport height.
                // The calculation uses the modal margin variable and the height of the modal header and footer.
                max-height: calc(100vh - var(--#{$prefix}modal-margin) * 2 - 9rem);
            }
        }
        .loading-icon {
            opacity: 1;
            .icon {
                display: block;
                max-height: 3rem;
                max-width: 3rem;
                font-size: 3rem;
                .carousel-item & {
                    margin: 1rem auto;
                }
            }
        }
    }
    .modal-footer {
        height: 70px;
        background: $modal-content-bg;
        .moodlenet-logo {
            .icon {
                height: 2.5rem;
                width: 6rem;
                max-height: 2.5rem;
                max-width: 6rem;
                margin-bottom: .6rem;
            }
        }
    }
}
/* Main container layout styles. */
.modchoosercontainer {
    .modchooserfilters {
        grid-area: filters;
    }
    .modchoosernav {
        grid-area: nav;
        min-width: 150px;
    }
    .modchoosercontent {
        grid-area: content;
        overflow: auto;
    }
    .searchresultscontainer {
        overflow: auto;
    }
    display: grid;
    width: 100%;
    grid-template-areas:
        "nav filters"
        "nav content";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    @include media-breakpoint-down(md) {
        grid-template-areas:
            "filters"
            "nav"
            "content";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }
}
/* Main container Navigation styles. */
.modchoosernav {
    --#{$prefix}nav-pills-border-radius: #{$border-radius-pill};
    --#{$prefix}nav-pills-link-active-bg: #{$body-color};
    --#{$prefix}nav-link-font-size: #{$font-size-base};
    .nav-link {
        --#{$prefix}nav-link-color: #{$body-color};
        --#{$prefix}nav-link-hover-color: #{$body-color};
        --#{$prefix}nav-link-font-weight: #{$font-weight-medium};
        --#{$prefix}nav-link-padding-y: .3rem;
        width: fit-content;
        border: $border-width $border-style transparent;
        @include media-breakpoint-up(md) {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &:not(.active) {
            &:hover {
                border: $border-width $border-style $border-color;
                background-color: $gray-100;
            }
        }
    }
    @include media-breakpoint-down(md) {
        overflow-x: auto;
        white-space: nowrap;
        background-color: $body-bg !important; /* stylelint-disable-line declaration-no-important */
        .nav-link {
            border: $border-width $border-style $border-color !important; /* stylelint-disable-line declaration-no-important */
        }
    }

    &.me-md-5 {
        margin-right: 1rem !important;
    }
            // Cada item (o Moodle usa <a class="nav-item nav-link">)
            > .nav-item,
            > .nav-link {
                position: relative;
                width: 100%;
                text-align: left;

                display: flex;
                align-items: center;
                gap: .6rem;

                padding: .55rem .75rem .55rem 1.05rem;
                border-radius: $border-radius-lg;

                // “menu item” feel
                border: 1px solid transparent;
                color: var(--#{$prefix}body-color, #{$body-color});
                background: transparent;

                // “bolinha” de menu (pode virar ícone depois)
                &::before {
                    content: "";
                    width: .5rem;
                    height: .5rem;
                    border-radius: 999px;
                    background: rgba(var(--#{$prefix}primary-rgb), .25);
                    flex: 0 0 auto;
                }

                &:hover {
                    border-color: rgba(var(--#{$prefix}primary-rgb), .18);
                    background: var(--#{$prefix}tertiary-bg, #{$gray-100});
                }

                &:focus-visible {
                    outline: 0;
                    box-shadow: 0 0 0 .2rem rgba(var(--#{$prefix}primary-rgb), .25);
                }

                // Ativo: destaque de menu (barra lateral + fundo)
                &.active {
                    font-weight: $font-weight-semibold;
                    background: rgba(var(--#{$prefix}primary-rgb), .10);
                    border-color: rgba(var(--#{$prefix}primary-rgb), .30);

                    &::before {
                        background: rgba(var(--#{$prefix}primary-rgb), .95);
                    }
                }

                // remove separador do último
                &:last-child::after {
                    display: none;
                }
            }
}

/* Main container Content styles. */
.modchoosercontent .optionscontainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: map-get($spacers, 2);
    @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(3, 1fr);
    }
    @include media-breakpoint-down(sm) {
        grid-template-columns: repeat(2, 1fr);
    }
    .option {
        --#{$prefix}btn-border-radius: #{$border-radius-lg};
        height: fit-content;
        border: 2px solid transparent;
        &.selected {
            border: 2px solid $primary;
            background-color: $primary-light-background;
        }
        &:not(.selected):hover {
            background-color: $gray-100;
        }
        .optioninfo {
            display: block;
            text-align: initial;
        }
        .optionactions {
            position: relative;
            z-index: 10;
        }
    }
    // Target each option "card" container
    [data-region="chooser-option-container"] {
        // Optional: give the whole option a bit of spacing polish
        padding: 0;
        border-radius: $border-radius-lg;
        // Improve keyboard focus on the whole option
        &:focus-visible {
            outline: 0;
            box-shadow: 0 0 0 .2rem rgba(var(--#{$prefix}primary-rgb), .25);
        }
        // Selected state (Moodle adds .selected on .option)
        &.selected {
            [data-region="chooser-option-info-container"] {
                border-color: rgba(var(--#{$prefix}primary-rgb), .75);
                background: rgba(var(--#{$prefix}primary-rgb), .10);
            }
        }
        // The block you asked to highlight
        [data-region="chooser-option-info-container"] {
            display: flex;
            align-items: flex-start;
            gap: map-get($spacers, 2);
            // Card look
            padding: map-get($spacers, 3);
            border-radius: $border-radius-lg;
            border: 1px solid var(--#{$prefix}border-color, #{$border-color});
            background: var(--#{$prefix}body-bg, #{$body-bg});
            // Depth without fighting themes
            box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
            // Smooth interaction
            transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
            // Make the title look stronger
            .optionname {
                font-weight: $font-weight-semibold;
                line-height: 1.2;
                margin-bottom: .15rem;
                min-height: 38px;
                display: flex;
                align-items: center;
                margin-top: -3px;
            }
            // Icon container polish
            .optionicon {
                flex: 0 0 auto;
                width: 42px;
                height: 42px;
                display: grid;
                place-items: center;
                border-radius: $border-radius-lg;
                border: 1px solid var(--#{$prefix}border-color, #{$border-color});
                background: var(--#{$prefix}tertiary-bg, #{$gray-100});
                .activityicon {
                    width: 28px;
                    height: 28px;
                    object-fit: contain;
                }
            }
            // Actions: keep tidy and readable
            .optionactions {
                margin-top: .25rem;
                .optionaction {
                    border-radius: $border-radius-pill;
                    padding: .2rem .35rem;
                    &:hover {
                        background: var(--#{$prefix}tertiary-bg, #{$gray-100});
                    }
                    &:focus-visible {
                        outline: 0;
                        box-shadow: 0 0 0 .2rem rgba(var(--#{$prefix}primary-rgb), .25);
                    }
                }
            }
        }
        // Hover / focus-within effect for the card
        &:hover,
        &:focus-within {
            [data-region="chooser-option-info-container"] {
                transform: translateY(-1px);
                border-color: rgba(0, 0, 0, .12);
                box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
                background: var(--#{$prefix}body-bg, #{$body-bg});
            }
        }
        // Make hover a bit stronger when not selected
        &:not(.selected):hover [data-region="chooser-option-info-container"] {
            border-color: rgba(var(--#{$prefix}primary-rgb), .35);
        }
    }
}
/* Option summary styles. */
.modchooser .optionsummary {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    background-color: $white;
    .activitychooser-option-details {
        min-width: 15rem;
        .modchooser-detail:not(:last-child):not(:only-child) {
            margin-bottom: map-get($spacers, 4);
            padding-bottom: map-get($spacers, 4);
            border-bottom: $border-width $border-style $border-color;
        }
    }
}
/* Make modchooser modal full height and scrollable on small screens. */
@include media-breakpoint-down(sm) {
    // Course view modal dialogs
    .path-course-view {
        .modal-dialog.modal-lg,
        .modal-content {
            height: 100%;
            overflow-y: auto;
            margin: 0;
        }
    }
    // Modchooser modal body and nested carousel/summary elements
    .modchooser {
        .modal-body,
        .modal-body .carousel,
        .modal-body .carousel-inner,
        .modal-body .carousel-item,
        .modal-body .optionsummary,
        .modal-body .searchresultitemscontainer-wrapper {
            height: 100%;
            overflow-y: auto;
        }
    }
    // Containers needing full height and scroll
    .modchoosercontainer,
    .optionscontainer,
    .searchresultitemscontainer {
        height: 100%;
        overflow-y: auto;
    }
}
