/*
:filename: statics.css.page_setup.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: Specific styling the Setup Application.

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

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

    Copyright (C) 2011-2025 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.

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

:root{
    --breadcrumb-font-size: calc(var(--font-size) * 0.9);
    /* the ends are clipped by the inner edge of the border of the tour */
    --inner-radius: calc(var(--border-radius) - var(--border-width));
    --breacrumb-height: calc(var(--breadcrumb-font-size) * 3);

    --header-height: max((calc(6 * var(--font-size)) / var(--size-divisor)), 4rem);

}

/* Colors of the Setup: see main_swapp_theme.css */

/* Make checkboxes and their labels perfectly aligned */

label.focusable {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

label.focusable input[type="checkbox"] {
  vertical-align: middle;
  margin: 0;
  position: relative;
  top: 0;
  transform: translateY(1px);  /* value depends on browser */
}

/*
===============================  LOGOS  =================================
*/

#logo_btn  {
    height: var(--breacrumb-height);
}

#logos_container {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*
===============================  BREADCRUMB  =================================
*/

/* wexa.css gives an 'ol' a margin below and its items a left indent: the
   border would else be drawn away from the steps it surrounds. */
.breadcrumb {
    overflow: hidden;
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
}

/* Styling the list of wizard items like arrows.
Inspired from: https://codepen.io/arkev/pen/nRGEYZ
*/
ol.breadcrumb > li:before  {
    color: var(--breadcrumb-bg-color-active);
    /* wexa.css pulls the marker out of the container with a negative
       margin, and the breadcrumb hides its overflow */
    width: auto;
    margin-inline-start: 0;
}

.breadcrumb li {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	flex: 1 1 0;
	margin: 0;
	font-size: var(--breadcrumb-font-size);
	line-height: var(--breacrumb-height);
    color: var(--breadcrumb-fg-color-inactive);
    background: var(--breadcrumb-bg-color-inactive);
	position: relative;
    padding-left: 3rem;
    padding-right: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breadcrumb li:first-child {
    padding-left: 1rem;
    border-radius: var(--inner-radius) 0 0 var(--inner-radius);
}

.breadcrumb li:last-child {
    border-radius: 0 var(--inner-radius) var(--inner-radius) 0;
    padding-right: 1.5rem;
}

.breadcrumb li.active, .breadcrumb li.active:before {
    background: var(--breadcrumb-bg-color-active);
    color: var(--breadcrumb-fg-color-active);
}


/* Adding the arrows for the breadcrumbs */
.breadcrumb li:after {
    z-index: 1;  /* prevent the arrows from getting buried under the next link */
    content: '';
    position: absolute;
    top: 0;
    right: -1.25rem;  /* half of square's length */
    /* width/height must be the line-height of the wizard (+padding?). */
    width: 2.8rem;
    height: var(--breacrumb-height);
    transform: scale(0.707) rotate(45deg);
    background: var(--breadcrumb-bg-color-inactive);
    /* Arrow design using box shadow.*/
    box-shadow: 2px -2px 0 2px var(--breadcrumb-shadow-color), 3px -3px 0 2px var(--breadcrumb-shadow-color-alt);
    border-radius: 0 5px 0 50px;
}

.breadcrumb li.active:after {
    background: var(--breadcrumb-bg-color-active);
}

/* No arrow after the last item */
.breadcrumb li:last-child:after {
	content: none;
}

.breadcrumb li:before {
	line-height: calc(var(--breacrumb-height) / 2);
	position: relative;
}

.breadcrumb li.visited, .breadcrumb li.visited:before, .breadcrumb li.visited:after {
    background: var(--breadcrumb-bg-color-visited);
    color: var(--breadcrumb-fg-color-visited);
}


/* ====================== FIELDSET Content ================== */

.wizard-panel {
    position: relative;
    perspective: 600px;
}

.wizard-fieldset {
    min-height: 360px;
    max-height: 600px;
    height: 500px;

    overflow: scroll;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transform-origin: top left;
    display: block;
    transition: all 0.4s;

    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
}

.dark .wizard-fieldset {
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

.wizard-fieldset {
    background: var(--wizard-fieldset-bg-image);
}

.wizard-fieldset legend {
    background-color: var(--wizard-legend-bg-color);
    color: var(--wizard-legend-fg-color);
    vertical-align: center;
    font-size: calc(var(--font-size) * 1.10);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius);
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
    margin-left: 3rem;
}


/* ====================== OTHERS ================== */

.features-table {
    width: 100%;
    padding: 0;
    margin: 0;
    caption-side: top;
}

.features-table td:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 12rem;
}

.features-caption {
    background-color: transparent;
    color:var(--table-caption-fg-color);
    border-bottom: var(--border-width) solid var(--border-color-alt);
    text-align: left;
    padding-left: 0;
    padding-top: 0.5rem;
    padding-bottom: var(--typography-spacing-vertical);
    font-weight: var(--font-weight-semibold);
}

.features-table td, .features-table th {
    border-bottom: var(--border-width-alt) solid var(--border-color-alt);
}

.p-brief {
    font-weight: bold;
    padding-top: 0.1rem;
    padding-bottom: 0.2rem;
    margin: 0;
}

.p-descr {
    margin: 0;
    padding-bottom: 0.1rem;
}

/* same content and counter than the global ol li */
.license-ol li {
    line-height: calc(1.5*var(--typography-spacing-vertical));
}

.license-ol li:before {
    color: var(--fg-color-alt);
    background-color: var(--bg-color-alt);
    border: var(--outline-size) solid var(--border-color);
    border-radius: var(--border-radius-alt);
    padding-left: 0.5rem;
    padding-right: 0.4rem;
    margin-right: 0.5rem;
    margin-inline-start: 0;
}

.progress-infinite {
    animation-name: animprogress;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

/* Custom buttons */

.install-button {
    background: var(--install-button-bg-color);
}

/* ------------ select --------------- */

.select {
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
    min-width: 10ch;
    max-width: 20ch;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.25em 0.5em;
    font-size: 1.1rem;
    cursor: pointer;
    background-color: var(--buttons-bg-color);
    color: var(--fg-color-alt);
}

.select select, .select::after {
    grid-area: select;
}

.select:not(.select--multiple)::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--fg-color-alt);
    -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.select--disabled {
    cursor: not-allowed;
    background-color: var(--select-disabled-bg-color);
    background-image: var(--select-disabled-bg-image);
}

.select + label {
    margin-top: var(--typography-spacing-vertical);
}

/* ----------- Styling others ----------- */

input[type=checkbox] {
    margin-left: 0;
}

.right-bottom {
    position: absolute;
    bottom: 0;
    right: 1rem;   /* room for scrollbar */
}

.left-bottom {
    position: absolute;
    bottom: 0;
    left: 1rem;   /* like with right, for symmetry */
}

.padding-button {
    padding: 1rem;
}

.logo-link{
    display: inline-block;
}

.font-size {
    width: 1rem;
    height: 1rem;
}