/*
: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] {
    --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) 50%, var(--sppas-color1) 70%,  rgb(20, 100, 110) 90%);
    --nav-bg-color: var(--sppas-color2);
    --nav-fg-color: rgb(220, 230, 255);
    --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%);

    --bg-color: #f9fafb;
    --fg-color: #111;
    --border-color: #ccd5e0;
    --link-color: #2a6fbe;

    --cards-bg-color: rgba(255, 255, 255, 0.9);

    --app-button-bg-color: linear-gradient(to right, #005C97 0%, #363795 51%, #005C97 100%);
    --app-button-fg-color: rgb(255, 255, 255);
}


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

@media screen {
    .dark {
        --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-fg-color: #f3f8fa;
        --footer-bg-color: linear-gradient(to bottom, var(--bg-color) 50%, var(--sppas-color2) 70%, var(--sppas-color1) 90%);
        --footer-fg-color: #f3f8fa;
        --a-color: #55ccff;
        --bg-color: rgba(0, 0, 30);
        --fg-color: #e2e8f0;
        --progress-bg-color: #F7E6BE;
        --border-color: rgb(100, 120, 170);

        --cards-bg-color: rgba(0, 0, 45, 0.9);

        --app-button-bg-color: linear-gradient(to right, #005C97 0%, #363795 51%, #005C97 100%);
        --app-button-fg-color: rgb(250, 250, 250);
    }
}

/* 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'] {
    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'] {
    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 {
    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);
}

/* ----------------- */
/* Begin deprecated: */
/* ----------------- */
:root {
    --splash-height: 180px;
    --page-home-color: rgb(128, 128, 128);
    --page-files-color: rgb(128, 128, 128);
    --page-setup-color: rgb(128, 128, 128);
}
/* ----------------- */
/* End deprecated */
/* ----------------- */

/*
 ================================= 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);
}


/*
=================================  BUTTONS  ===================================
*/

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

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



/*
=================================  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);
}

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

/* DEPRECATED
 ------------------ A splash... of SPPAS ---------------- */

.sppas-splash {
    background-image: url('../images/splash-v5.png');
    background-repeat: no-repeat;
    background-size: 100% var(--splash-height);
    /*height: var(--splash-height);    ... is replaced by: */
    aspect-ratio: 5.5;
    max-height: var(--splash-height);
}

.img-splash {
    aspect-ratio: 5.5;
    max-height: var(--splash-height);
}

#page_home_link_btn:hover {
	border-bottom-color: var(--page-home-color);
}

#page_files_link_btn:hover {
	border-bottom-color: var(--page-files-color);
}

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

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;
}

.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;
    /*background-color: var(--app-button-bg-color);*/
}

.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 {
    background-image: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
    margin: 0 auto;
    padding: 1em 2em;
    width: fit-content;
    width: -moz-fit-content;
    height: 2rem;
    font-variant: small-caps;
    font-weight: bold;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    box-shadow: 0 0 20px #eee;
    font-size: 1.125rem;
}

.app-button:hover {
    background-position: right center; /* change the direction */
    text-decoration: none;
}


@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;
        }*/
}