/*
* Copy this file into your theme to customize the module.
* https://www.phpboost.com/wiki/structure-d-un-theme#paragraph-le-repertoire-modules
*/

/* common */
.mb {
    margin-bottom: 0.618em;
}
.m-a {
    margin: auto;
}
.sm-width-auto,
.md-width-auto,
.lg-width-auto {
    width: auto;
}

.fav-team > * {
    font-weight: bold;
}

.nowrap {
    white-space: nowrap;
}

article > header {
    margin: 0.618em 0;
}

@media (min-width: 769px) {
    .cell-inline .cell {
        max-width: 305px;
    }
}

#main-content th,
#main-content td,
#main-content tfoot td {
    padding: 0.309em;
}

th.bgc-sub {
    border: none;
}
th.bgc-sub a {
    color: var(--main-tone);
}

.is-live > * {
    background-color: rgba(var(--success-tone-rgb), 0.2);
}

#main-content th.sortable-thead {
    padding-bottom: 1.809em;
}

.has-score-color td {
    background-color: var(--bgc-sub);
}

.logo-smaller { max-width: 16px; max-height: 16px; }
.logo-small   { max-width: 32px; max-height: 32px; }
.logo-medium  { max-width: 64px; max-height: 64px; }
.logo-big 	  { max-width: 96px; max-height: 96px; }
.logo-bigger  { max-width: 128px; max-height: 128px; }

/* event sub-menu */
.event-menu {
    margin-top: 0.618em;
}

/* sub-menu */
.roundmenu {
    margin: 0 0 1.618em;
}

.roundmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.roundmenu-title {
    min-width: 30px;
    display: block;
    text-align: center;
    padding: 0.228em !important;
    margin: 0 0 0.228em 0.228em;
    border-radius: 0.309em;
    border: 1px solid var(--bdr-main);
}

.roundmenu-title.current {
    border-color: var(--bdr-sub);
    background-color: var(--bgc-sub);
}

/* --- Form --- ##################################################################### */
.days-form .form-element  { flex-direction: column; }
.days-form .form-element > label { width: 100%; }

.fieldset-submit {
    width: 100%;
}

.floating-submit { position: relative;}

.floating-submit .fieldset-inset {
    padding: 0;
}

.floating-submit .fieldset-submit {
    position: fixed;
    top: 70%;
    transform: translateY(-50%);
    right: 0.618em;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 100;
}

.waiting-cover {
    visibility: hidden;
    background-color: rgba(var(--darken), 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 20;
    margin: 0;
    padding: 0;
}

.waiting-cover .form-field-free-large {
    padding: 0.618em;
    background-color: var(--bgc-main);
    border: 0.228em solid var(--bdr-main);
    position: absolute;
    top: 0.618em;
    left: 0.618em;
    text-align: center;
    width: auto;
}

.waiting-loader {
    display: none;
    border: 0.228em solid var(--bdr-sub);
    border-top: 0.228em solid var(--bdr-alt);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    margin: 0;
    padding: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fieldset-content .modal-nav {
    float: right;
    margin-top: 0.809em;
}

.fieldset-content .modal-nav ul {
    list-style-type: none;
}

.form-spacer {
    font-size: 1.309em;
}
.form-spacer-big {
    font-size: 1.618em;
}

.teams-checkbox .form-field {
    width: 100%;
}

.checkbox-counter {
    background-color: var(--moderator-tone);
    color: var(--txt-alt);
    padding: 0.309em;
    position: fixed;
    right: 0.618em;
    bottom: 0.618em;
    z-index: 2;
}

.label-top > label {
    position: absolute;
    bottom: calc(100% - 1px);
    left: 5px;
    padding: 0 0.228em;
    font-size: 0.618em;
    z-index: 2;
    background-color: var(--bgc-main);
    border: 1px solid var(--bdr-sub);
    width: auto !important;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
}

.label-top:hover label {
    opacity: 1;
    visibility: visible;
}

.teams-checkbox .form-field-checkbox {
    padding: 0.309em;
    margin: 0 0 0.309em;
    border-width: 1px;
    border-style: solid;
    border-color: var(--bdr-main);
}
.teams-checkbox .form-field-checkbox .checkbox {
    display: flex;
}
.teams-checkbox .form-field-checkbox .checkbox input {
    margin-right: 0.309em;
}

.portable .fieldset-inset {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.portable .portable-half { width: 50%; text-align: center; }
.portable .portable-full { width: 100%; }
.game-details .fieldset-inset .details-full { width: 100%; }

.form-columns-2 .fieldset-inset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cell-gap);
    --items: 2;
}

.form-columns-2 .fieldset-inset > * {
    width: calc((100% - ((var(--items) - 1) * var(--cell-gap))) / var(--items));
}

/* params */
.params-form p {
    width: 100%;
}
.params-form .form-element {
    margin: 0;
    padding: 0.236em;
}

/* fields */
.grouped-fields {
    margin: 0;
}
.grouped-fields .fieldset-inset {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    padding: 0.618em 0 0;
}
.cluster-fields .fieldset-description,
.grouped-fields .fieldset-inset > * {
    padding: 0 0 0.809em;
    margin: 0 0 0 0.309em;
}
.grouped-fields .fieldset-inset > .spacer:has(hr) {
    padding: 0;
    margin: 0;
}
.grouped-fields .fieldset-inset > * > * {
    width: 100%;
}
.grouped-fields ::placeholder {
    font-size: 0.618em;
}
.grouped-fields .game-date > *,
.grouped-fields .game-team > *,
.grouped-fields select,
.grouped-fields input {
    margin: 0;
}
.grouped-fields .label-time::after {
    display: none;
}

@media (min-width: 1025px) {
    .form-element > label {
        width: calc(100% / 3);
    }

    .config-form .form-element > label {
        width: 100%;
    }
}

.not-played {
    opacity: 0.5;
    pointer-events: none;
}

.games-list,
.ranking-list {
    align-content: center;
}

@media (min-width: 769px) {
    .game-details .fieldset-inset {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .game-details .fieldset-inset > * {
        width: calc(100% / 3);
    }
    .game-details .form-field {
        width: 100%;
    }
    .game-details .form-element-textarea {
        width: 100%;
    }
    input.game-details {
        width: 80px;
    }
}

.grouped-fields {
    position: relative;
}
.grouped-fields .game-playground,
.grouped-fields .game-score {
    text-align: center;
}

.grouped-fields .form-field-select select {
    width: 100%;
}

.grouped-fields .game-name               { width: 50%; }
.grouped-fields .game-date               { width: 100%; }
.grouped-fields .form-element.game-team  { width: 70%; }
.grouped-fields .form-element.game-score { width: 25%; }
.grouped-fields .game-playground         { width: 100%; }

@media (min-width: 769px) {
    .grouped-fields .game-name               { width: 50%; }
    .grouped-fields .game-date               { width: 300px; }
    .grouped-fields .form-element.game-team  { width: auto; }
    .grouped-fields .form-element.game-score { width: 70px; }
    .grouped-fields .game-playground         { width: 80px; }
}

.grouped-fields .game-name              { order: 2; }
.grouped-fields .form-field-action-link { order: 3; }
.grouped-fields .game-date              { order: 4; }
.grouped-fields .game-team.home-team    { order: 5; }
.grouped-fields .game-score.home-team   { order: 6; }
.grouped-fields .game-team.away-team    { order: 7; }
.grouped-fields .game-score.away-team   { order: 8; }
.grouped-fields .game-playground        { order: 9; }
.grouped-fields .game-status            { order: 10; }
.grouped-fields .game-hr                { order: 11; }

@media (min-width: 769px) {
    .grouped-fields .game-team.away-team    { order: 8; }
    .grouped-fields .game-score.away-team   { order: 7; }
}

.grouped-fields .game-name,
.grouped-fields .form-field-action-link {
    margin: 0;
}
.grouped-fields .form-field-action-link ul {
    list-style-type: none;
    margin: 0;
}
.grouped-fields .form-field-action-link {
    width: 50%;
    text-align: right;
}
.grouped-fields .form-field-action-link a {
    position: absolute;
    bottom: 1.809em;
    right: 0.618em;
    text-align: right;
    z-index: 2;
}

.game-playground input,
.home-score input,
.home-pen input,
.away-score input,
.away-pen input { text-align: center; }

/* groups */
.form-element.groups-select .form-field,
.form-element.groups-select select,
#ScmGroupsFormController_captcha_fieldset,
#ScmGroupsFormController_fbuttons {
    width: 100%;
}
.form-element.groups-select {
    padding: 0;
}
/* --- /Form --- ##################################################################### */

/* front */
/* button to select next match in event home page */
#next-game { width: auto; }

/* Build club colors */
.club-colors {
	width: 25px;
	height: 25px;
	border: 1px solid var(--bdr-main);
	display: inline-block;
    vertical-align: middle;
}

.club-events ul li,
.club-events ul ul {
    padding-left: 0.618em;
}

/* Game layout */
.game-container {
    margin-bottom: var(--cell-gap);
    padding: 0.309em;
    border: 1px solid var(--bdr-main);
}

.game-container .game-team,
.game-container .game-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.game-container .game-details {
    padding: 0 0 0.309em;
}
.game-container .game-team .flex-team {
    padding: 0.228em;
}
.game-container .game-score {
    padding: 0.228em;
    /* background-color: var(--bgc-sub); */
    color: var(--txt-sub);
    text-align: center;
    min-width: 2.618em;
}

.club-logo {
    margin-right: 0.618em;
    max-height: 70px;
}
.club-name {
    padding-left: 0.618em;
    flex: 1 1 auto;
}

/* scm home layout */

.root-list,
.scm-list ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
}

#category-nav ul ul,
#module-scm .root-ul { padding-left: 1.618em; }

#category-nav .categories-item:hover { background-color: rgba(var(--main-dark-rgb), 0.2); }

.categories-item {
	position: relative;
	flex: 1 1 auto;
	padding: 0.456em;
}

.has-children > [class*="toggle-menu-button-"] > .categories-item { padding-left: 1.618em; }

.has-children > [class*="toggle-menu-button-"] { cursor: pointer; }

.has-children > [class*="toggle-menu-button-"] > .categories-item:before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0.456em;
	content: '\f0fe';
	font: var(--fa-font-solid);
	font-weight: 400;
}

.has-children > [class*="toggle-menu-button-"] > .is-open-menu.categories-item:before { content:'\f146'; }

[class*="items-list-"]:not([class*="items-list-0"]) {
	opacity: 0;
	visibility: hidden;
	height: 0;
}

.reorder-items {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

[class*="items-list-"].show-list {
	opacity: 1;
	visibility: visible;
	height: auto;
}

/* bracket */

/* bracket layout */
.bracket-round {
    display: flex;
    flex-direction: column;
}

.bracket-round-title {
    text-align: center;
}

.bracket-round-games {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.bracket-round:last-child .bracket-round-games { justify-content: center; }

.bracket-highlight {
    background-color: var(--bgc-sub) !important;
    color: var(--txt-sub) !important;
}
.cell-bracket {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: scroll;
}

.cell-bracket::before,
.cell-bracket::after {
	display: block;
	clear: both;
	content: "";
}

.cell-bracket > * {
	width: 100%;
	margin: 0 0 var(--cell-gap);
}

@media (min-width: 1025px) {
    .cell-bracket {
        flex-direction: row;
		margin: 0 var(--cell-container-gap) 0 0;
        & > * {
            width: 320px;
            margin: 0 var(--cell-gap) var(--cell-gap) 0;
            flex-shrink: 0;
        }
    }
}

@media (min-width: 769px) {
    .bracket-round {
        .bracket-round-games {
            .game-container {
                position: relative;
                &::before, &::after {
                    position: absolute;
                    content: '';
                }
                &::before {
                    top: 50%;
                    right: 100%;
                    transform: translateY(-50%);
                    width:11px;
                    height: 2px;
                    background-color: var(--bdr-main);
                }
                &::after {
                    border-right: 1px solid var(--bdr-main);
                    height: 60%;
                    right: -12px;
                    width: 10px;
                }
                &:nth-child(odd)::after {
                    border-top: 2px solid var(--bdr-main);
                    border-top-right-radius: 0.3em;
                    top: 50%;
                }
                &:nth-child(even)::after {
                    border-bottom: 1px solid var(--bdr-main);
                    border-bottom-right-radius: 0.3em;
                    bottom: 50%;
                }
            }
        }
        &:nth-child(2) {
            .game-container {
                &::after {
                    height: 125%;
                }
            }
        }
        &:nth-child(3) {
            .game-container {
                &::after {
                    height: 250%;
                }
            }
        }
        &:nth-child(4) {
            .game-container {
                &::after {
                    height: 500%;
                }
            }
        }
        &:nth-child(5) {
            .game-container {
                &::after {
                    height: 1000%;
                }
            }
        }
        &:last-child {
            .game-container {
                &::after {
                    height: 0;
                    border: none !important;
                }
            }
        }
    }

    .first-round.bracket-round {
        .bracket-round-games {
            .game-container {
                &::after {
                    top: 50%;
                    left: 100%;
                    transform: translateY(-50%);
                    width:11px;
                    height: 2px;
                    background-color: var(--bdr-main);
                }
            }
        }
    }
}

/* Team layout */
.flex-team {
    display: flex;
    align-items: center;
}
.flex-team-container {
    display: inline-flex;
    align-items: center;
    padding: 0.309em 0;
}
.flex-team-container {
    flex-wrap: wrap;
}

.flex-team-group {
    min-width: 80px;
}

.flex-team .pinned {
    margin-right: 0.228em;
}

.flex-team img {
    max-height: 19px;
    max-width: 19px;
    margin: 0 0.228em;
}

.flex-right {
    justify-content: flex-end;
    text-align: right;
}

.flex-left {
    justify-content: flex-start;
}

/* details */
.cell-details {
    padding: 0.309em;
    font-weight: bold;
}

.cell-details.cell-modal .cell {
    max-width: 100%;
}

/* Minis */
#module-mini-prev-scm td,
#module-mini-next-scm td {
    padding: 0.309em;
}

/* --- fake table --- */
.scm-table,
.scm-line,
.scm-line-group  {
    display: flex;
    flex-direction: column;
}

.scm-line-group {
    flex-direction: row;
    justify-content: space-between;
}

.scm-body .scm-line {
    border-bottom: 1px solid var(--bdr-main);
}

.scm-body .scm-line:last-child {
    border: none;
}

/* .scm-body { */
    /* border-radius: 0.809em; */
    /* box-shadow: 0 0 8px rgba(var(--bgc-alt-rgb), 0.5); */
/* } */

.scm-cell {
    padding: 0.309em;
    text-align: center;
}

@media (max-width: 768px) {
    .scm-cell-highlight {
        background-color: var(--bgc-alt);
        color: var(--txt-alt);
    }
}

.scm-name {
    flex: 1 1 auto;
}

.scm-cell.cell-left  { text-align: left; }
.scm-cell.cell-right { text-align: right; }

.scm-cell img {
    max-height: 19px;
    max-width: 19px;
    margin: 0 0.228em;
}

.cell-truncate {
    display: block !important;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 769px) {
    .scm-line {
        flex-direction: row;
    }
}

.cell-game {
    border: 1px solid var(--bdr-main);
}

.cell-pad {
    padding: 0.309em;
}

.cell-gap {
    padding: 0 0.309em;
}

.cell-game .flex-between.flex-between-large > * {
    margin-bottom: 0;
}

.cell-game .game-score {
    text-align: center;
}

.cell-game .game-separator {
    display: none;
}

.cell-vertical .cell-game {
    margin-top: 0.309em;
}

@media (min-width: 769px) {
    .cell-game .game-separator { display: inline-flex; }
    .cell-game .home-score { text-align: right; }
    .cell-game .away-score { text-align: left; }
}

.cell-around .cell-game {
    margin-bottom: 0.618em;
}

.game-header,
.game-body {
    margin: 0;
}

.scm-header {
    padding: 0.618em;
    display: flex;
    flex-direction: column;
}

.event-title {
    text-align: center;
}

.event-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media (min-width: 1025px) {
    .scm-header {
        padding: 0;
        flex-direction: row;
        justify-content: space-between;
    }
    .event-title {
        text-align: left;
    }
    .event-details {
        flex-direction: column;
        justify-content: end;
    }
}

.flex-group-container {
    display: flex;
    flex-direction: column;
    gap: 0.618em;
}

.flex-group {
    display: flex;
    flex-direction: column;
}

.flex-group-list span {
    display: inline-flex;
    gap: 0.228em;
    align-items: center;
}

@media (min-width: 769px) {
    .flex-group-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.tabs-wrapper {
    padding: 0.618em;
}

.tabs-wrapper.no-style {
    padding: 0;
}

summary {
    padding: 0.309em;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: var(--bdr-sub);
}

.cell-icon {
    max-height: 19px;
}

.bracket-previous-games > * {
    margin: 0 0.618em;
}

.left-middle-fixed {
    position: fixed;
    top: 50%;
    left: 0.618em;
    width: auto !important;
}

.games details {
    margin-top: 0.618em;
}

.fieldset-inset .summary-title,
.summary-title {
    border: none;
    margin-bottom: 0.618em;
    & > * {
        display: inline-block;
        width: auto;
    }
    &::marker {
        vertical-align: middle; 
    }
}

details > details {
    @media(min-width: 769px) {
        padding-left: 1.618em;
    }
}

/* Styles de base pour le bouton hamburger (caché sur desktop) */
.mobile-menu-toggle {
    display: none;
    width: 50px;
    height: 50px;
    position: relative;
    &::after {
        font: var(--fa-font-solid);
        content: "\f4fe" ;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    &[aria-expanded="true"]::after {
        content: '\f00d';
    }
}

/* Styles responsive */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    #moderator-menu.cssmenu.cssmenu-horizontal {
        position: relative;
        z-index: 1000;
        & > ul {
            position: absolute;
            top: 100%;
            right: 0;
            display: none;
            flex-direction: column;
            width: auto;
            & > li {
                width: 100%;
                text-align: center;
                & > a {
                    display: block;
                    padding: 0.618rem;
                }
            }
        }
        &.menu-open > ul {
            display: flex;
        }
    }
}