/*
:filename: statics.css.main_swapp.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: Shared style to be used for any SPPAS Web APPlication -- SWAPP.

.. _This file is part of SPPAS: http://www.sppas.org/
..
    -------------------------------------------------------------------------

     ######   ########   ########      ###      ######
    ##    ##  ##     ##  ##     ##    ## ##    ##    ##     the automatic
    ##        ##     ##  ##     ##   ##   ##   ##            annotation
     ######   ########   ########   ##     ##   ######        and
          ##  ##         ##         #########        ##        analysis
    ##    ##  ##         ##         ##     ##  ##    ##         of speech
     ######   ##         ##         ##     ##   ######

    Copyright (C) 2011-2026 Brigitte Bigi
    Laboratoire Parole et Langage, Aix-en-Provence, France

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

    This banner notice must not be removed.

    -------------------------------------------------------------------------
*/


/* ------------------------------------------------- */
/* Override some wexa.css variable for a custom look */
/* ------------------------------------------------- */

:root {
    /* HEADER/FOOTER */
    --header-slidein: animDisabled;
    --footer-slidein: animDisabled;
    --header-height: max(calc(3rem / var(--size-divisor)), 2rem);
    --footer-height: max(calc(8rem / var(--size-divisor)), 7rem);

    /* NAV -- at left collapsible responsive */
    --nav-min-height: 0;
    --nav-min-width: max(calc(4 * var(--font-size) / var(--size-divisor)), 3rem);

    --nav-item-min-width-h: max(calc(6rem / var(--size-divisor)), 4rem);
    --nav-item-width-h:    calc(8rem / var(--size-divisor));
    --nav-item-max-width-h: calc(15rem / var(--size-divisor));

    --nav-expanded-width: calc(10rem / var(--size-divisor));
    --nav-item-width-v-collapsed: calc(var(--nav-min-width) - var(--typography-spacing-horizontal));
    --nav-item-width-v-expanded: calc(var(--nav-expanded-width) - var(--typography-spacing-horizontal));

    --appmenu-position: left;
    --appmenu-align: left top;

    /* CARDS */
    --card-border-radius: 0.8rem;
    --card-border-width: 0;

    /* NEW COLOR DEFINITIONS */
    --logo-color: rgb(70, 100, 150);
    --sppas-color1: rgb(100, 160, 220); /* soft blue */
    --sppas-color2: rgb(20, 40, 70);    /* desaturated navy */

}

:root:not(.contrast) {
    --border-radius: 0.4rem;
    --dialog-border-radius: 0.4rem;
}

.contrast {
    --border-radius: 0.6rem;
    --dialog-border-radius: 0.6rem;
}


/* Light mode */
/* ---------- */

:root:not([data-theme=dark]), [data-theme=light] {
    /* Main colors */
    --bg-color: rgb(249, 250, 251);
    --bg-color-alt: rgb(235, 235, 240);
    --fg-color: rgb(17, 17, 20);
    --fg-color-alt: rgb(28, 28, 32);
    --header-bg-color: linear-gradient(323deg, rgb(10, 40, 90) 0%, rgb(0, 0, 50) 100%);
    --header-fg-color: rgb(220, 230, 255);
    --footer-bg-color: linear-gradient(to bottom,
        var(--bg-color) 0%,
        var(--bg-color-alt) 30%,
        rgb(210, 210, 250) 40%,
        rgb(90, 70, 120) 60%,
        rgb(20, 100, 110) 100%);
    );
    --footer-fg-color: rgb(20, 10, 50);
    --nav-bg-color: transparent;
    --nav-fg-color: rgb(220, 230, 255);

    /* Elements */
    --progress-bg-color: rgb(2, 0, 36);
    --buttons-bg-color: linear-gradient(120deg, rgb(210, 210, 250) 0%, rgb(233, 233, 242) 50%, rgb(241, 223, 245) 100%);
    --buttons-bg-color-hover: linear-gradient(300deg, rgb(210, 210, 250) 0%, rgb(233, 233, 242) 50%, rgb(241, 223, 245) 100%);
    --li-color: rgb(20, 100, 110);

    --border-color: rgb(204, 213, 224);
    --link-color: rgb(42, 111, 190);

    --blockquote-border-color: rgb(20, 100, 110);

    --card-bg-color: rgb(238, 233, 242);
    --card-fg-color: rgb(10, 40, 90);

}


/* Dark mode */
/* ---------- */

@media screen {
    .dark {
        /* Main colors */
        --bg-color: rgb(10, 10, 30);
        --bg-color-alt: rgb(25, 25, 45);
        --fg-color: rgb(226, 232, 240);
        --fg-color-alt: rgb(250, 250, 255);

        --header-bg-color: linear-gradient(323deg, rgb(70, 15, 70) 0%, rgb(49, 5, 92) 70%, rgb(30, 0, 70) 100%);;
        --header-fg-color: rgb(240, 230, 210);
        --nav-bg-color: var(--sppas-color2);
        --nav-fg-color: rgb(240, 230, 210);

        --buttons-bg-color: linear-gradient(120deg, rgb(1, 1, 59) 0%, rgb(31, 3, 87) 50%, rgb(49, 2, 92) 100%);
        --buttons-bg-color-hover: linear-gradient(300deg, rgb(1, 1, 59) 0%, rgb(31, 3, 87) 50%, rgb(49, 2, 92) 100%);
        --buttons-fg-color: rgb(243, 248, 250);

        --footer-bg-color: linear-gradient(to bottom,
            var(--bg-color) 0%,
            rgb(35, 0, 75), 30%,
            rgb(70, 15, 70) 50%,
            rgb(100, 50, 90) 70%,
            rgb(130, 60, 130) 100%);
        );

        --footer-fg-color: rgb(243, 248, 250);
        --a-color: rgb(85, 204, 255);
        --li-color: rgb(130, 60, 130);

        --progress-bg-color: #F7E6BE;
        --border-color: rgb(100, 120, 170);
        --blockquote-border-color: rgb(130, 60, 130);

        --card-bg-color: rgb(30, 0, 70);
        --card-fg-color: rgb(240, 230, 210);
    }
}

/* Increase the bg/fg contrast of some colors in the default mode */
.contrast:not(.dark) {
    --a-color: rgb(0, 70, 100);
}


/* ============================================================
Custom Navigation
============================================================ */

#nav-content {
    box-shadow: none;
}

nav#nav-content.nav-wexa.side:not(.dark) {
    background: linear-gradient(180deg,
    rgb(0, 0, 50) 0%,
    rgb(10, 10, 60) 20%,
    rgb(10, 40, 90) 40%,
    rgb(90, 70, 120) 60%,
    rgb(20, 100, 110) 100%);
}

.dark nav#nav-content.nav-wexa.side {
    background: linear-gradient(180deg,
    rgb(30, 0, 70), 0%,
    rgb(35, 0, 75), 30%,
    rgb(70, 15, 70) 50%,
    rgb(100, 50, 90) 70%,
    rgb(130, 60, 130) 100%);
}

#nav-content [role='menuitem'],
#nav-content .menuitem {
    color: var(--nav-fg-color);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    transition: background 0.25s ease, transform 0.15s ease, color 0.25s ease;
    border-width: calc(var(--border-width) / 2);
}

#nav-content [role='menuitem'][aria-pressed='true'],
#nav-content .menuitem[aria-pressed='true'] {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}

nav.nav-wexa button > span {
  color: var(--nav-fg-color) !important;
}

#nav-content [role='menuitem']:hover,
#nav-content .menuitem:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(3px);
    filter: brightness(1.3) saturate(1.1);
}

#nav-content .nav-current {
    background: rgba(255, 255, 255, 0.18);
    filter: brightness(0.8) saturate(0.9);
}

/*
 ================================= BODY =================================
 */

body {
    margin: 0 auto;
    width: 100%;
}

body > header {
    padding-top: 0;
    width: 100%;
    text-align: left !important;
    display: flex;
    align-items: flex-start;
}

body > header > h1 {
    font-size: calc(2.5 * var(--font-size));
    margin: 0;
}

body > main {
    margin: 0;
    padding-left: calc((100% - var(--screen-width)) / 2);
    padding-right: calc((100% - var(--screen-width)) / 2);
}

body > main > h2 {
    padding-left: var(--card-border-radius);
    padding-bottom: 0;
    padding-top: 2rem;
}

.menu-png-button img {
    filter: brightness(0) invert(1);
}

.menu-svg-button {
    color: var(--nav-fg-color);
}

.card,
.card > header,
.card > main,
.card > footer,
main > .panel-item:nth-child(2n) .card,
main > .panel-item:nth-child(2n) .card > header,
main > .panel-item:nth-child(2n) .card > main,
main > .panel-item:nth-child(2n) .card > footer {
    background-color: var(--card-bg-color);
    color: var(--card-fg-color);
}


/*
=================================  BUTTONS & LINKS  ===================================
*/

button:not(.menuitem), [role="button"]:not(.menuitem) {
    background: var(--buttons-bg-color);
    padding: 0.6rem 1.2rem;
    border: var(--border-width) solid var(--border-color);
}

button:hover, [role='button']:hover  {
    color: var(--buttons-fg-color);
    background: var(--buttons-bg-color-hover);
}

a:not(:has(img)),
[role=link]:not(:has(img)) {
    background-image: linear-gradient(var(--a-color), var(--a-color));
    background-size: 100% 0%;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: background-size .35s ease, color 0s linear .35s;
    border-radius: 2px;
}

a:not(:has(img)):hover,
[role=link]:not(:has(img)):hover {
    color: var(--bg-color);
    background-size: 100% 100%;
    transition: background-size .35s ease, color 0s;
}

details summary {
    cursor: pointer;
    padding: 0.6rem 1rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
    font-weight: var(--font-weight-semibold);
}

blockquote {
    border: var(--border-width) solid var(--blockquote-border-color);
    box-shadow: var(--card-box-shadow);
}

/*
=================================  DIALOGS  ===================================
*/

dialog {
    border-radius: calc(var(--border-radius) * 2);
    padding-left: 3rem;
}

dialog[role=alertdialog].error {
    background: linear-gradient(
        90deg,
        var(--error-color) 0,
        var(--error-bg-color) 1rem,
        var(--error-bg-color) 80%,
        var(--bg-color) 100%
    );
}

/*
=================================  FOOTER  ===================================
*/

.footer-button {
    width: fit-content;
    width: -moz-fit-content;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
}

.footer-button:hover {
    background-color: rgba(255, 255, 255, 0);
}

.footer-button svg {
    height: calc(var(--action-height) * 1.5);
}

#splash {
    filter: brightness(0.9);
}

.dark #splash {
    filter: brightness(1.4);
}

.copyright {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 2rem;
    line-height: 2;
}

.email {
    font: var(--font-family-mono);
}

.socialnet {
    width:  2rem;
    height: 2rem;
    vertical-align: middle;
    margin: 0.5rem;
}

/* --------------------------------------- */

section.logos-panel {
    padding: var(--typography-spacing-vertical) var(--typography-spacing-horizontal);
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 1rem;
}

section.actions-panel {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    column-gap: 1rem;
}

.actions-panel button img,
.actions-panel button svg {
    max-height: calc(var(--action-height) * 0.7);
    height: calc(var(--action-height) * 0.7);
    padding: 0.3rem;
}

/* --------------------------------------- */

@media all and (min-width: 896px) {

    .small-logo {
        max-height: 3.5rem;
        width: auto;
    }
    .medium-logo {
        max-height: 6.5rem;
        width: auto;
    }
    .large-logo {
        max-height: 10rem;
        width: auto;
    }
}

/* mostly mobile screens */
@media only screen and (max-width: 896px) {
    body > header {
        padding-left: var(--nav-item-min-width-h);
    }

    .small-logo {
        height: auto;
        max-width: 3.5rem;
    }
    .medium-logo {
        max-width: 6.5rem;
        height: auto;
    }
    .large-logo {
        max-width: 10rem;
        height: auto;
    }
}

/* ======================================================================= */
/* Responsive override: side menu width                                    */
/* ======================================================================= */

@media screen and (max-width: 896px) {
    :root {
        --nav-expanded-width: clamp(
            calc(11rem / var(--size-divisor)),
            70vw,
            calc(22rem / var(--size-divisor))
        );
    }
}

.extra-large-logo {
    width: 40rem;
    min-width: 15rem;
}

.noborder {
    border: none
}

:where(table) .noborder {
    border: none;
}


/*
=================================  APPLICATIONS  ===================================
*/

.flow > * + * {
    margin-top: var(--flow-space, 1em);
}

.apps-panel {
    padding: 2rem;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(12 * var(--font-size)), calc(20 * var(--font-size))));
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    place-items: center;
    border-radius: 1rem;

    background: #165e7a;
    background: linear-gradient(120deg, rgb(22, 94, 122) 0%, rgb(167, 87, 199) 60%, rgb(245, 235, 162) 100%);
}

.app {
    display: grid;
    place-items: center;
    max-width: calc(16 * var(--font-size));
    height: calc(20 * var(--font-size));
    overflow: hidden;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    transition: box-shadow 0.2s ease-in-out;
}

.app:not(.dark) {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
}
.dark .app {
    background: linear-gradient(0deg, rgba(0, 0, 45, 0.9) 0%, rgba(0, 0, 45, 0.7) 100%);
}

.app > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.app-background-img {
    background-color: inherit;
    object-fit: cover;
    max-width: calc(14 * var(--font-size));
    max-height: calc(14 * var(--font-size));
    margin: 0;
    margin-bottom: calc(5 * var(--font-size));
    padding: 0;
    filter: brightness(0.9);
}

@media screen and (max-width: 896px) {
    .app-background-img {
        max-width: calc(10 * var(--font-size));
        max-height: calc(10 * var(--font-size));
    }
}

.dark .app-background-img {
    filter: brightness(1.4);
}

.app-content {
    --flow-space: 0.9375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: flex-end;
    height: calc(14 * var(--font-size));
    padding: 1.25rem;
}

.contrast .app-content {
    height: calc(16 * var(--font-size));
}

.app-content {
    background-color: inherit;
}

.app-content * {
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.app-container {
    --flow-space: 1.25rem;
}

.app-title {
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    line-height: 1em;
}

.app-title::after {
    content: "";
    position: absolute;
    height: 0.3125rem;
    width: calc(100% + 2rem);
    bottom: -1rem;
    left: -1.25rem;
}

.app-description {
    padding-top: 1.25rem;
    overflow: hidden;
}

.app-description:not(.contrast) {
    max-height: calc(6.5 * var(--font-size));
}

.contrast .app-description {
    padding-top: 0.75rem;
    max-height: calc(9 * var(--font-size));
}

.app-button {
    color: var(--buttons-fg-color);
    margin: 0 auto;
    padding: 1em 2em;
    width: fit-content;
    width: -moz-fit-content;
    height: 2.5rem;
    font-variant: small-caps;
    font-weight: bold;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    box-shadow: 0 0 20px #eee;
    font-size: calc(var(--font-size) * 1.125)
}

/* background */

.app-button {
    background: var(--buttons-bg-color) !important;
    transition: background-position .4s ease;
}

.app-button:hover {
    color: var(--buttons-fg-color);
    background: var(--buttons-bg-color-hover) !important;
}

@media (any-hover: hover) and (any-pointer: fine) {

    .app-content {
        transition: transform 400ms ease-out;
        transition-delay: 200ms;
        transform: translateY(60%);
    }

    .app-title::after {
        opacity: 0;
        transform: scaleX(0);
        transition: opacity 600ms ease-in, transform 300ms ease-out;
        transition-delay: 200ms;
        transform-origin: right;
    }

    .app-background-img {
        transition: transform 300ms ease-in;
    }

    .app-container > :not(.app-title),
    .app-button {
        opacity: 0;
        transition: transform 300ms ease-out, opacity 300ms ease-out;
    }

    .app:hover,
    .app:focus-within {
        transform: scale(1.05);
        transition: transform 300ms ease-in;
    }

    .app:hover .app-content,
    .app:focus-within .app-content {
        transform: translateY(0);
        transition: transform 300ms ease-in;
    }

    .contrast .app:hover .app-content,
    .contrast .app:focus-within .app-content {
        transform: translateY(-10%);
        transition: transform 300ms ease-in;
    }


    .app:focus-within .app-content {
        transition-duration: 0ms;
    }

    .app:hover .app-background-img,
    .app:focus-within .app-background-img {
        transform: scale(0.4) translateY(calc(-10 * var(--font-size)));
    }

    .contrast .app:hover .app-background-img,
    .contrast .app:focus-within .app-background-img {
        transform: scale(0.2) translateY(calc(-24 * var(--font-size)));
    }

    .app:hover .app-container > :not(.app-title),
    .app:hover .app-button:not(:disabled),
    .app:focus-within .app-container > :not(.app-title),
    .app:focus-within .app-button:not(:disabled) {
        opacity: 1;
        transition: opacity 300ms ease-in;
        transition-delay: 200ms;
    }

    .app:hover .app-button[disabled],
    .app:focus-within .app-button[disabled] {
        opacity: 0.33;
        outline: none;
    }
    /*
        .app:hover .app-title::after,
        .app:focus-within .app-title::after {
            opacity: 1;
            transform: scaleX(1);
            transform-origin: left;
            transition: opacity 300ms ease-in, transform 300ms ease-in;
            transition-delay: 400ms;
        }*/
}

.app.app-disabled {
    filter: grayscale(100%);
    opacity: 0.9;
}

.app-disabled .app-title {
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
     Page Table of Content
-------------------------------------------------------------------------- */

.page-toc {
    margin: 1.5rem 0 2.5rem 0;
}

.page-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.page-toc li {
    margin: 0;
    padding: 0;
}
.page-toc li::before {
    content: none;
}

.page-toc a {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    min-height: 5rem;
    text-decoration: none;
    color: var(--fg-color);
    background: transparent;
    border: var(--border-width) solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.page-toc a * {
    background: var(--bg-color);
}

.page-toc a:hover {
    border-color: #6ea86c;
}

.page-toc a:focus-visible {
    outline: 4px solid rgb(130, 60, 130);
    outline-offset: 3px;
}

.page-toc .toc-num {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    background: #7fc35d;
}

.page-toc .toc-label {
    padding: 0 1.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 2px;
}

.page-toc a:hover .toc-label,
.page-toc a:focus-visible .toc-label {
    color: rgb(130, 60, 130);
}

.page-toc li .toc-num { background: #4a7fa5; }
.page-toc li:nth-child(2) .toc-num { background: #7bc4c8; }
.page-toc li:nth-child(3) .toc-num { background: #8a6de9; }
.page-toc li:nth-child(4) .toc-num { background: #ef7a55; }
.page-toc li:nth-child(5) .toc-num { background: #d0a13b; }