/* #region GENERAL */
@font-face {
    font-family: "Noto Sans Display";
    src: url('../ass/fonts/Noto/NotoSansDisplay-VariableFont_wdth,wght.ttf') format('truetype');
    font-display: swap;
}

html {
    font-family: "Noto Sans Display", Verdana, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.0rem;
    color: var(--color_grey_dark);
    font-variation-settings:
      "wdth" 70;
    scroll-behavior: smooth; 
}

:root{
    --color_red: #FD2826;
    --color_red_dark: #b5211f;
    --color_blue: #1E4588;
    --color_blue_light: #1e45881a;
    --color_orange: #FF6600;
    --color_yellow: #FFCC00;
    --color_yellow_dark: #dfb200;
    --color_green: #33CC00;
    --color_cyan: #00CCCC;
    --color_grey: #676767;
    --color_grey_light: #d3d3d3;
    --color_grey_dark: #525252;
    --color_black: #000000;
    --color_white: #FFFFFF;

    --ui_scale_smartphone_xs: 0.9;
    --ui_scale_smartphone: 0.95;
    --ui_scale_tablet: 1.0;
    --ui_scale_notebook: 1.05;
    --ui_scale_desktop: 1.05;
}

::placeholder {
    color: var(--color_grey_light);
    font-size: 0.8rem;
}

* {
    box-sizing: border-box;
    user-select: none;
}

.not_selectable {
    cursor: default; 
    user-select: none;
}

.loading {
    color: var(--color_blue);
    font-weight: 400;
    font-size: 1.2rem;
    text-align: center;
}

#loading, 
#fetching {
    outline: none;
    border: none;
    background: transparent;   
}

.loading img {
    display: block;            
    margin: 0 auto;
    width: 3.0rem;
    height: 3.0rem;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

textarea, input, select, button {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: inherit;
    color: var(--color_blue);
}

table {
    border-color: var(--color_blue);
    box-shadow: none;
}

fieldset {
    border-width: 1.0px;
    border-radius: 8px;
}

legend {
    font-size: 1.0rem;
    font-weight: 590;
}

[type=number], [type=text] {
    font-family: "Noto Sans Display", Verdana, sans-serif;
    border-radius: 1.0rem;
    border-width: 1.0px;
    border-color: var(--color_grey_light);
    text-align: center;
    width: 8.0rem;
    line-height: 1.2rem;
    margin-left: 0.3rem;
}

[type=number]:hover, [type=text]:hover {
    box-shadow: 2px 2px 4px var(--color_grey);
}

[type=number]:focus, [type=text]:focus {
    box-shadow: none;
}

[type=button] {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 3.0rem;
    border-width: 0;
    width: 6.0rem;
    height: 2.2rem;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    background-color: var(--color_yellow);
    color: var(--color_grey_dark);
    transition: filter 0.15s ease;
}

[type=button]:hover {
    background-color: var(--color_yellow_dark);
    filter: drop-shadow(2.0px 2.0px 2.0px rgba(0, 0, 0, 0.5));
}

h1 {
    color: var(--color_blue);
    margin: 0;
    font-size: 1.3rem;
    font-weight: 590;
}

h2 {
    color: var(--color_red);
    margin: 0;
    font-size: 1.1rem;
    font-weight: 590;
}

h3 {
    color: var(--color_grey_dark);
    font-size: 1.1rem;
    font-weight: 590;
    margin: 0;
}

strong {
    font-weight: 590;
}

.underline_italic {
        text-decoration: underline;
        font-style:italic;
    }

.color_blue {
    color: var(--color_blue);
    border-color: var(--color_blue)
}

.color_red {
    color: var(--color_red);
    border-color: var(--color_red)
}

.color_white {
    color: var(--color_white);
}

.border_top {
    border-top: 1px solid var(--color_blue);
}

.border_top_bottom {
    border-top: 1px solid var(--color_blue);
    border-bottom: 1px solid var(--color_blue);
}
/* #endregion */

/* #region BODY */
body {
    margin: 0;
}

.body_container {
    max-width: 85rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    min-height: 100vH;
    row-gap: 0.5rem;
    column-gap: 2.0rem;
    margin: 0 auto;
    padding: 0.0rem 1.5rem;
}
/* #endregion */

/* #region HEADER */
.header_container {
    grid-area: hed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color_blue);
    color: var(--color_white);
    font-size: 1.5rem;
    font-weight: 500;
}

.header_content {
    margin: 0;
}

.header_logo {
    display: block;
    width: auto;
    height: 4rem;
}
/* #endregion */

/* #region INPUT_DATA */
.input_data {
    grid-area: inp;
    margin-top: 0.0rem;
    margin-bottom: 1.0rem;
}

.input_data_block {
    margin-right: 1.0rem;
    margin-left: 0.3rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
}

#member {
    width: 8.0rem;
}

#year {
    width: 4.0rem;
}

#season {
    width: 2.5rem;
}

.input_hint {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    margin-left: 0.3rem;
    margin-right: auto;
}

.switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.2rem;
    margin-left: 0.5rem; 
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color_grey_light);
    transition: 0.4s;
    border-radius: 1.2rem;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 0.9rem;
    width: 0.9rem;
    left: 0.15rem;
    bottom: 0.15rem;
    background-color: var(--color_white);
    transition: 0.4s;
    border-radius: 50%;
  }
  
  .switch input:checked + .slider {
    background-color: var(--color_blue);
  }
  
  .switch input:focus + .slider {
    box-shadow: 0 0 0.5rem var(--color_blue);
  }
  
  .switch input:checked + .slider:before {
    transform: translateX(1.3rem);
  }

.member_list {
    display: none;
}

#member_list_header {
    color: var(--color_red);
    margin-left: 0.3rem;
    margin-top: 0.5rem;
}

/*generate through ChampionshipStatus.py*/
.member_overview_table {
    border-collapse: separate;
    border-spacing: 0.5rem 0;
    width: 100%;
}

.member_overview_table td,
.member_overview_table th {
    font-size: 0.9rem;
    color: var(--color_blue);
    text-align: left;
    vertical-align: middle;
}

.member_links_link {
    color: var(--color_blue);
}

.member_links_link:hover {
    text-decoration-thickness: 1.8px;
}
/* #endregion */

/* #region OUTPUT*/
#output {
    grid-area: out;
    color: var(--color_red);
}
/* #endregion */

/* #region SEASON_DATA */
.season_headline {
    grid-area: she;
}
/* #endregion */

/* #region SERIES OVERVIEW */
.series_overview {
    grid-area: ser;
    font-size: 0.9rem;
}

.overview_header {
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
    color: var(--color_blue);
}

.series_overview_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color_blue);
    text-align: center;
    vertical-align: center;
}

.series_overview_table th {
    font-weight: 400;
}

.series_overview_table td, 
.series_overview_table th {
    border: none;
    border-top: 1px solid var(--color_blue);
    border-bottom: 1px solid var(--color_blue);
    padding: 0.2rem 0.5rem;
}

.series_overview_table thead {
    background-color: var(--color_blue);
    color: var(--color_white);
}

.series_overview_table tbody tr:nth-child(even) {
    background-color: var(--color_blue_light)
}

.series_links_link {
    color: var(--color_blue);
}

.series_links_link:hover {
    text-decoration-thickness: 1.8px;
}

.ranking_link {
    color: var(--color_grey_dark);
}

.ranking_link:hover {
    text-decoration-thickness: 2.0px;
}
/* #endregion */

/* #region WEEKLY OVERVIEW */
.weekly_overview {
    grid-area: wee;
    font-size: 0.9rem;
}

.weekly_overview_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color_blue);
    text-align: center;
    vertical-align: center;
}

.weekly_overview_table td, 
.weekly_overview_table th {
    border: none;
    border-top: 1px solid var(--color_blue);
    border-bottom: 1px solid var(--color_blue);
    padding: 0.2rem 0.5rem;
}

.weekly_overview_table thead {
    background-color: var(--color_blue);
    color: var(--color_white);
}

.weekly_overview_table tbody tr:nth-child(even) {
    background-color: var(--color_blue_light)
}
/* #endregion */

/* #region ALL EVENTS */
.all_events {
    grid-area: all;
    font-size: 0.9rem;
}

.all_events_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color_blue);
    text-align: center;
    vertical-align: center;
}

.all_events_table td, 
.all_events_table th {
    border: none;
    padding: 0.2rem 1.0rem;
}

.all_events_table th:first-child, 
.all_events_table td:first-child {
    background-color: var(--color_blue);
    color: var(--color_white);
}
/* #endregion */

/* #region SCORED EVENTS */
.scored_events {
    grid-area: sco;
    font-size: 0.9rem;
}

.scored_events_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color_blue);
    text-align: center;
    vertical-align: center;
}

.scored_events_table td, 
.scored_events_table th {
    border: none;
    padding: 0.2rem 1.0rem;
}

.scored_events_table th:first-child, 
.scored_events_table td:first-child {
    background-color: var(--color_blue);
    color: var(--color_white);
}

#scored_text {
    color: var(--color_blue);
    margin: 0;
    margin-top: 0.5rem;
}
/* #endregion */

/* #region MOBILE SERIES OVERVIEW */
.mobile_series_overview {
    grid-area: mso;
}

.mobile_series_overview_table {
    width: 100%;
    text-align: center;
    vertical-align: center;
}

.mobile_table_header {
    background-color: var(--color_blue);
    color: var(--color_white);
    font-weight: 500;
}

.mobile_table_points {
    color: var(--color_blue);
    font-weight: 700;
}

.mobile_table_empty_row {
    height: 2.0rem;
}

.button_container {
    display: none;
    justify-content: center;
    align-items: center;
    margin: 1.0rem 0.0rem;  
}

.up_button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color_red);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
    margin-left: 1.0rem;
    margin-right: 1.0rem;
}

.up_button:hover {
    fill: var(--color_red_dark);
    filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.5));
}

.up_button img {
    display: block;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
}
/* #endregion */

/* #region MOBILE WEEKLY OVERVIEW */
.mobile_weekly_overview {
    grid-area: mwo;
}

.mobile_weekly_overview_table {
    border-collapse: collapse;
    border: 0;
    width: 100%;
    text-align: center;
    vertical-align: center;
}

.mobile_weekly_table_left {
    text-align: left;
}

.mobile_scored_text {
    font-size: 0.9rem;
    color: var(--color_blue);
}
/* #endregion */

/* #region PAGE NAVIGATION */
.page_navigation {
    grid-area: pgn;
    font-size: 0.8rem;
    margin-bottom: 1.0rem;
    display: none; /*'flex' to show*/
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.nav_button {
    background-color: none;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.nav_button:hover {
    fill: var(--color_red_dark);
    filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.5));
}

.page_overview {
    display: inline;
    color: var(--color_red);
    text-align: center;
    vertical-align: center;
    font-size: 1rem;
    font-weight: 400;
    min-width: 4.5rem;
}

.nav_button img {
    display: block;             
}

#button_home {
    margin-right: 2.0rem;
}
/* #endregion */

/* #region SPACE */
.space {
    grid-area: spc;
}
/* #endregion */

/* #region FOOTER */
footer {
    grid-area: fot;
    display: flex;
    justify-content: space-around;
    background-color: var(--color_blue);
    color: var(--color_white);
}

.footer_link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer_link:hover {
    text-decoration: underline;
}

.footer_icon {
    height: 1.8rem;
    width: 1.8rem;
    margin: 0.5rem 0.3rem;
}

.ui_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.ui_button {
    color: var(--color_white);
}

.ui_button:hover {
    filter: drop-shadow(1.5px 1.5px 1.5px rgb(0, 0, 0));
    cursor: pointer;
}

.ui_img {
    height: 1.8rem;
    width: 1.8rem;
}
/* #endregion */

/* #region MODAL */
.modal {
    display: none; /* Versteckt das Modal standardmäßig */
    position: fixed;
    z-index: 1000; /* Hoher z-index, um über anderen Elementen zu liegen */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Halbtransparentes Schwarz */
    justify-content: center;
    align-items: center;
}

.modal_content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    max-height: 60vh;
    overflow: hidden;
}

.modal_scroll_content {
    margin-top: 2.0rem;
    margin-bottom: 1.0rem;
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 20px;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.close:hover {
    color: #000;
}

.imprint_text {
    margin-top: 0.0rem;
    text-align: justify;
}

.imprint_list_intro {
    margin-bottom: 0.0rem;
}
/* #endregion */

/* #region COOKIE-BANNER */
.cookie_banner{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: var(--color_grey);          
    color: var(--color_white);              
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    grid-column: 1 / -1; /* span across all 12 columns */
}

.banner_text{ 
    margin:0; 
    text-align:center; 
    flex:1 1 240px;
}

.banner_btn{
    all: unset;
    cursor: pointer;
    padding: 0.3rem 0.8rem;
    border-radius: 22px;
    background: var(--color_yellow);
    color: var(--color_grey_dark);
    font-weight: 500;
    font-size: 0.9rem;
    transition: filter .15s ease;
}
.banner_btn:hover{ 
    background: var(--color_yellow_dark);
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,.4)); 
}

.banner_btn--decline{ 
    background: var(--color_grey_light); 
}

.banner_btn--decline:hover{ 
    background: var(--color_grey_dark);
    color: var(--color_white) 
}
/* #endregion */

/* #region DESKTOP*/
@media screen and (min-width: 75rem) {
    /*desktop*/

    html {
        font-size: calc(1.0rem * var(--ui_scale_desktop))
    }

    .body_container {
        grid-template-areas:
        "hed hed hed hed hed hed hed hed hed hed hed hed"
        "nav nav nav nav nav nav nav nav nav nav nav nav"
        "inp inp inp inp inp inp inp inp inp inp inp inp"
        "out out out out out out out out out out out out"
        "she she she she she she she she she pgn pgn pgn"
        "ser ser ser ser ser ser ser ser ser ser ser ser"
        "wee wee wee wee wee wee wee wee wee wee wee wee"
        "all all all all all all sco sco sco sco sco sco"
        "spc spc spc spc spc spc spc spc spc spc spc spc"
        "fot fot fot fot fot fot fot fot fot fot fot fot";
        grid-template-rows: auto auto auto auto auto auto auto auto 1fr auto;    
    }

    .mobile_series_overview, .mobile_weekly_overview {
        display: none !important;
    }
}
/* #endregion */

/* #region NOTEBOOK*/
@media screen and (max-width: calc(75rem - 1px)) {
    /*notebook*/

    html {
        font-size: calc(1.0rem * var(--ui_scale_notebook))
    }

    .body_container {
        grid-template-areas:
        "hed hed hed hed hed hed hed hed hed hed hed hed"
        "nav nav nav nav nav nav nav nav nav nav nav nav"
        "inp inp inp inp inp inp inp inp inp inp inp inp"
        "out out out out out out out out out out out out"
        "she she she she she she she she pgn pgn pgn pgn"
        "ser ser ser ser ser ser ser ser ser ser ser ser"
        "wee wee wee wee wee wee wee wee wee wee wee wee"
        "all all all all all all all all all all all all"
        "sco sco sco sco sco sco sco sco sco sco sco sco"
        "spc spc spc spc spc spc spc spc spc spc spc spc"
        "fot fot fot fot fot fot fot fot fot fot fot fot";
        grid-template-rows: auto auto auto auto auto auto auto auto auto 1fr auto;
    }

    .mobile_series_overview, .mobile_weekly_overview {
        display: none !important;
    }
}
/* #endregion */

/* #region TABLET*/
@media screen and (max-width: calc(62rem - 1px)) {
    /*tablet*/

    html {
        font-size: calc(1.0rem * var(--ui_scale_tablet))
    }

    .body_container {
        grid-template-areas:
        "hed hed hed hed hed hed hed hed hed hed hed hed"
        "nav nav nav nav nav nav nav nav nav nav nav nav"
        "inp inp inp inp inp inp inp inp inp inp inp inp"
        "out out out out out out out out out out out out"
        "she she she she she she she she pgn pgn pgn pgn"
        "ser ser ser ser ser ser ser ser ser ser ser ser"
        "wee wee wee wee wee wee wee wee wee wee wee wee"
        "all all all all all all all all all all all all"
        "sco sco sco sco sco sco sco sco sco sco sco sco"
        "spc spc spc spc spc spc spc spc spc spc spc spc"
        "fot fot fot fot fot fot fot fot fot fot fot fot";
        grid-template-rows: auto auto auto auto auto auto auto auto auto 1fr auto;
    }

    .mobile_series_overview, .mobile_weekly_overview {
        display: none !important;
    }

    [type=button]:hover {
        filter: none;
        background-color: var(--color_yellow);
    }

    [type=number]:hover, [type=text]:hover {
        box-shadow: none;
    }

    [type=number]:focus, [type=text]:focus {
        outline-width: 1px;
        outline-color: var(--color_blue);
    }

    .nav_button:hover {
        fill: none;
        filter: none;
    }

    .up_button:hover {
        fill: none;
        filter: none;
    }

    .banner_btn:hover{
        background: var(--color_yellow);
        filter: none;
    }

    .banner_btn--decline:hover{
        background: var(--color_grey_light);
        color: var(--color_grey_dark);
        filter: none;
    }

    .member_overview_table td,
    .member_overview_table th {
        height: 2.0rem;
    }
}
/* #endregion */

/* #region SMARTPHONE*/
@media screen and (max-width: calc(48rem - 1px)) {
    /*smartphone 768 pxs*/

    html {
        font-size: calc(1.0rem * var(--ui_scale_smartphone))
    }

    #loading,
    #fetching {
        position: fixed;             
        top: auto;                   
        bottom: 20%;                 
        left: 50%;                   
        transform: translateX(-50%); 
        margin: 0;
        z-index: 9999;              
        min-width: 250px;            
    }

    dialog#loading p,
    dialog#fetching p {
        white-space: normal;         
        overflow-wrap: anywhere;     
    }

    .body_container {
        padding: 0.0rem 0.2rem;
        grid-template-areas:
        "hed hed hed hed hed hed hed hed hed hed hed hed" /*.header_container*/
        "nav nav nav nav nav nav nav nav nav nav nav nav" /*.nav_container*/
        "inp inp inp inp inp inp inp inp inp inp inp inp" /*.input_data*/
        "out out out out out out out out out out out out" /*.output*/
        "pgn pgn pgn pgn pgn pgn pgn pgn pgn pgn pgn pgn" /*.page_navigation*/
        "she she she she she she she she she she she she" /*.season_headline*/
        "mso mso mso mso mso mso mso mso mso mso mso mso" /*.mobile_series_overview*/
        "mwo mwo mwo mwo mwo mwo mwo mwo mwo mwo mwo mwo" /*.mobile_weekly_overview*/
        "spc spc spc spc spc spc spc spc spc spc spc spc" /*.space*/
        "fot fot fot fot fot fot fot fot fot fot fot fot"; /*footer*/
        grid-template-rows: auto auto auto auto auto auto auto auto 1fr auto;
    }

    .input_data {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }
    
    .input_data_block {
        display: grid;
        grid-template-columns: 0.5fr 1fr;
        align-items: center;
        gap: 0.2rem;
    }

    legend {
        margin: 0 auto;
    }

    .input_label {
        text-align: left;
        padding-right: 0.2rem;
    }

    .input_field {
        justify-self: center;
    }

    .input_button {
        align-self: center;
        margin-top: 0.5rem;
    }

    .toggle-container .switch {
        margin-left: 1.0rem;
        margin-right: auto;
    }    

    #series_name, #season_data {
        text-align: center;
    }

    .page_navigation {
        margin-left: auto;
        margin-right: auto;
        display: none;
        justify-content: center;
        text-align: center;
        width: 60%;
    }

    .up_button {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .series_overview, .weekly_overview, .all_events, .scored_events {
        display: none !important;
    }

    .mobile_series_overview, .mobile_weekly_overview {
        display: block !important;
    }

    .mobile_table_points {
        color: var(--color_blue);
        font-weight: 500;
    }

    .member_overview_table td,
    .member_overview_table th {
        height: 2.5rem;
    }

    #cookie_banner .banner_text{
        /* forces the paragraph onto its own row */
        flex: 0 0 100%;
    }

    #cookie_banner .banner_btn{
        margin: 0;              
        flex : 0 1 auto;        
        text-align: center;     
    }    
}
/* #endregion */

/* #region SMARTPHONE_XS*/
@media screen and (max-width: calc(24rem - 1px)) {
    /*smartphone-xs 384 pxs*/

    html {
        font-size: calc(1.0rem * var(--ui_scale_smartphone_xs))
    }
}
/* #endregion */