/**
 * FILE:  P_EduLink.scss
 *
 * Part of the Metavus digital collections platform
 * Copyright 2025 Edward Almasy and Internet Scout Research Group
 * http://metavus.net
 *
 * Styles for the LTI Deep Linking resource selection interface.
 *
 * (The DL interface includes StPageStart/End to get Metavus core
 * CSS/JS and the HTML for the login dialog. Some selectors below
 * modify core Metavus styles to hide full-size nav elements and
 * adjust margins/spacing to fit us within the LMS popup.)
 *
 * Plugin-specific classes/IDs and their expected usage are:
 *
 * #mv-p-edulink-*-button - LTI-specific buttons
 *
 * .mv-p-edulink-record - Wrapper around record summaries
 *
 * .mv-p-edulink-record-control - buttons to control selection and
 *   deselection of individual records
 *
 * .mv-p-edulink-search-text-container - wrapper around the keyword search
 *   input box
 *
 * .mv-p-edulink-search-facet-container - wrapper around the search facets
 *
 * .mv-p-edulink-selected-records - wrapper around the list of currently
 *   selecdet records
 *
 * .mv-p-edulink-record-select - the "Select" button for an individual record
 *
 * .mv-p-edulink-send-button - button for "Send to LMS"
 *
 * .mv-p-edulink-header - header in the record / folder selection popup
 */

/* ----- 1: CONFIGURATION ------------------------------------------------- */

:root {
    --heading-color: #787673;
    --heading-color-body: #858380;
    --icon-color: #9ea0a3;
    --button-color: #555555;
}


/* ----- 2: HTML STYLES --------------------------------------------------- */

:focus {
    outline-color: #f00078;
}

body {
    background-color: white;
    margin-left: 0;
    margin-right: 0;
}

h1, h2, h3 {
    color: var(--heading-color);
}

h2 svg {
    height: 1.1em;
    fill: var(--icon-color);
    margin-top: -6px;
}

main {
    background-color: rgba(255, 255, 255, 0.33);
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* ----- 3: BOOTSTRAP STYLES ---------------------------------------------- */

.btn-primary {
    background-color: var(--button-color);
}


/* ----- 4: THIRD-PARTY STYLES -------------------------------------------- */

.ui-dialog-titlebar-close {
  display: none;
}


/* ----- 5: LOCAL (NON-PAGE-SPECIFIC) STYLES - CLASS SELECTORS ------------ */

.mv-content-resourcesummary {
    min-height: 117px;

    .mv-resource-title {
        font-size: 1.15rem;
        margin-bottom: 7px;
        margin-left: 1em;
        text-indent: -1em;
    }

    .mv-resource-description {
        font-size: 0.9rem;
        line-height: calc(1.1rem - 1px);
        margin-bottom: 5px;
    }

    .mv-resource-categories {
        color: #686764;
        font-weight: 600;
        margin-top: 5px;
    }
}

.mv-screenshot-cell {
    padding-left: 0 !important;
    vertical-align: top;
    width: 125px;
}

.mv-search-results {
    h2 {
        color: var(--heading-color-body);
    }

    .mv-p-edulink-record {
        position: relative;
    }

    .mv-p-edulink-record-control {
        display: inline-block;
        position: absolute;
        top: -34px;
        z-index: 100;
    }

    .mv-p-edulink-record-control.btn-sm.mv-button-iconed img {
        margin-bottom: 0 !important;
    }

    .mv-p-edulink-record-control.mv-p-edulink-record-select + input[type="checkbox"] {
        display: none;
    }

    .mv-resource-description {
        max-height: 3rem;
        overflow: hidden;
        transition: max-height 1s ease;
    }

    .mv-resource-description:hover {
        max-height: 30rem;
    }
}

.mv-search-facets {
    padding-bottom: 8px !important;
    padding-top: 4px !important;

    b {
        font-weight: 800 !important;
    }

    b .float-right {
        font-size: 1.2rem;
    }
}

div.mv-search-facets + ul.mv-search-facets {
    padding-top: 0 !important;
}

.mv-search-facets.list-group-flush {
    font-size: 0.9rem;
}

.mv-image-screenshot-container {
    background-color: unset;
    height: unset;
    width: unset;

    img {
        height: 100px;
        left: unset;
        position: static;
        top: unset;
        transform: unset;
        width: 110px;
    }
}

.mv-p-edulink-browse {
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-bottom: 1rem;

    ul {
        list-style: none;
        margin-bottom: 0;
    }

    .mv-p-edulink-browse-toggle {
        cursor: pointer;
        font-weight: bold;
        margin-bottom: 0;

        .mv-p-edulink-browse-control {
            font-family: monospace;
            font-size: 1rem;
        }
    }
}

.mv-p-edulink-folder-button {
    background-color: white;
    border-color: white;
    color: var(--button-color);
}

.mv-p-edulink-folder-button:hover {
    background-color: var(--button-color) !important;
    border-color: var(--button-color) !important;

    .mv-p-edulink-tile {
        color: white;

        h3 {
            color: white;
        }
    }
}

.mv-p-edulink-footer {
    background: white;
    border-top: 2px solid #D9D9D9;
    margin-left: -30px;
    margin-right: -30px;
    margin-top: 15px;
    padding-bottom: 7px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 7px;
    width: calc(100% + 60px);
}

.mv-p-edulink-header {
    background: white;
    border-bottom: 2px solid #D9D9D9;
    margin-bottom: 15px;
    margin-left: -30px;
    margin-right: -30px;
    padding-bottom: 7px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 7px;
    width: calc(100% + 60px);

    .mv-logo {
        height: 18px;
    }

    .col.text-end {
        a {
            svg {
                height: 1em;
                margin-right: 5px;
                fill: var(--button-color);
            }
        }
    }
}

.mv-p-edulink-search-text-container {
    input {
        height: 32px;
        margin-right: 5px;
        width: calc(100% - 38px);
    }

    .btn {
        float: right;
    }

    .mv-button-iconed {
        padding: 4.25px;

        img {
            height: 20px !important;
            padding-right: 0;
        }
    }
}

.mv-p-edulink-search-facet-container {
    margin-top: 20px;
}

.mv-p-edulink-select-publisher-button {
    font-size: 1.05rem;
}

.mv-p-edulink-selected-container {
    h2 {
        color: var(--heading-color-body);
    }
}

.mv-p-edulink-selected-records {
    line-height: 1.1rem;
    margin-bottom: 18px;
    margin-top: 15px;

    .mv-p-edulink-record-control {
        margin-left: 1em;

        input[type="checkbox"] {
            display: none;
        }
    }

    .mv-p-edulink-record-select.btn {
        font-weight: bold;
        line-height: 14px;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-left: 3.75px;
        padding-right: 3.75px;
        padding-top: 2px;
    }

    p {
        margin-left: 1em;
        text-indent: -1em;

        b {
            font-size: 1.15rem;
        }
    }
}

.mv-p-edulink-send-button {
    font-size: 1.05rem;
    padding-right: 6.75px;
    padding: 3.75px;

    img {
        height: 20px !important;
        margin-bottom: -1px;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

.mv-p-edulink-tile {
    background-color: white;
    color: var(--button-color);
    display: flex;
    height: 100%;
    min-height: 300px;
    min-width: 300px;
    width: 100%;

    .mv-p-edulink-tile-content {
        margin: auto;
        padding: 10px;

        h3 {
            font-weight: bold;
            margin-top: 0.3rem;
        }

        img[src$=".svg"] {
            filter: unset;
        }

        div > img {
            margin-bottom: 0.75rem;
        }

        p {
            margin-bottom: 0.7rem;
        }

        p:last-child {
            margin-bottom: 0.3rem;
        }
    }
}

.mv-p-edulink-user-button {
    background-color: white;
    border-color: white;
    color: var(--button-color);
    img[src$=".svg"] {
        filter: unset;
    }
}

.mv-p-edulink-user-button:hover {
    background-color: var(--button-color);
    border-color: var(--button-color);
}

.mv-tileset div {
    background-color: unset !important;
}

.mv-tileset > div > div {
    align-items: start;

    a:hover {
        text-decoration: unset;
    }
}

.mv-transport-controls {
    margin-bottom: 5px;
}


/* ----- 6: LOCAL (NON-PAGE-SPECIFIC) STYLES - ID SELECTORS --------------- */

#mv-segment-body {
    min-width: 700px;
}

#mv-p-edulink-folder-button,
#mv-p-edulink-login-button,
#mv-p-edulink-logout-button,
#mv-p-edulink-records-button {
    color: var(--heading-color);
    cursor: pointer;
    position: relative;
    top: 2px;
}

#mv-p-edulink-folder-button + #mv-p-edulink-login-button,
#mv-p-edulink-folder-button + #mv-p-edulink-logout-button,
#mv-p-edulink-records-button + #mv-p-edulink-login-button,
#mv-p-edulink-records-button + #mv-p-edulink-logout-button {
    padding-left: 10px;
}

#mv-p-edulink-folder-button:hover,
#mv-p-edulink-records-button:hover {
    text-decoration: none;
}

#mv-p-edulink-loading-overlay {
    background-color: rgba(255, 255, 255, 0.66);
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 200;

    div.spinner-border {
        animation-duration: 2s;
        height: 150px;
        position: relative;
        top: 50%;
        width: 150px;
    }
}

/* ----- 7: LOCAL (PAGE-SPECIFIC) STYLES ---------------------------------- */

/* ----- 8: FONT DEFINITIONS ---------------------------------------------- */
