@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/roboto-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/roboto-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('./fonts/roboto-500italic.woff2') format('woff2');
}

/* Light */
html {
    --duration-short: 0.1s;
    --item-opacity-hover: 3%;

    --color-primary: #465F8A;
    --color-on-primary: #F8F8FF;
    --color-primary-container: #B3CDFE;
    --color-on-primary-container: #2A446D;
    --color-inverse-primary: #B4C7ED;
    --color-secondary: #565F72;
    --color-on-secondary: #F8F8FF;
    --color-secondary-container: #DAE2F9;
    --color-on-secondary-container: #495264;
    --color-tertiary: #675882;
    --color-on-tertiary: #FEF7FF;
    --color-tertiary-container: #DFCCFD;
    --color-on-tertiary-container: #50426A;
    --color-background: #F9F9FE;
    --color-on-background: #2F323A;
    --color-surface: #F9F9FE;
    --color-on-surface: #2F323A;
    --color-surface-variant: #E0E2EC;
    --color-on-surface-variant: #5C5F68;
    --color-surface-tint: #465F8A;
    --color-inverse-surface: #0C0E12;
    --color-inverse-on-surface: #E3E5EF;
    --color-error: #B3261E;
    --color-on-error: #FFFFFF;
    --color-error-container: #F9DEDC;
    --color-on-error-container: #410E0B;
    --color-outline: #777B84;
    --color-outline-variant: #AFB2BC;
    --color-scrim: #000000;
    --color-surface-bright: #F9F9FE;
    --color-surface-dim: #D7DAE4;
    --color-surface-container-lowest: #FFFFFF;
    --color-surface-container-low: #F3F3FA;
    --color-surface-container: #ECEDF6;
    --color-surface-container-high: #E6E8F1;
    --color-surface-container-highest: #E0E2EC;

    /* Additional colors */

    --color-blue-a: #bde9ff;
    --color-on-blue-a: #004d68;
    
    --color-blue-b: #d0e4ff;
    --color-on-blue-b: #04409f;

    --color-red-a: #ffd8ef;
    --color-on-red-a: #8d0053;

    --color-orange: #ffdcc3;
    --color-on-orange: #753403;
    
    --color-yellow: #ffe07c;
    --color-on-yellow: #6d3a01;

    --color-green: #beefbb;
    --color-on-green: #00522c;

    --color-gray: #e3e3e3;
    --color-on-gray: #474747;

    --color-blue-c: #acedff;
    --color-on-blue-c: #004e5d;

    --color-red-b: #ffdadc;
    --color-on-red-b: #8a1a16;

    --color-purple: #eedcfe;
    --color-on-purple: #5629a4;

    --color-backstroke: var(--color-red-a);
    --color-breaststroke: var(--color-blue-a);
    --color-butterfly: var(--color-orange);
    --color-freestyle: var(--color-green);
    --color-medley: var(--color-purple);
}

@media (prefers-color-scheme: dark) {
    html {
        --item-opacity-hover: 4%;

        --color-primary: #B4C7ED;
        --color-on-primary: #2E4060;
        --color-primary-container: #405373;
        --color-on-primary-container: #D7E3FF;
        --color-inverse-primary: #465F8A;
        --color-secondary: #BDC7DC;
        --color-on-secondary: #374052;
        --color-secondary-container: #333C4D;
        --color-on-secondary-container: #B6BFD5;
        --color-tertiary: #EBDDFF;
        --color-on-tertiary: #594B74;
        --color-tertiary-container: #DFCCFD;
        --color-on-tertiary-container: #50426A;
        --color-background: #0C0E12;
        --color-on-background: #E3E5EF;
        --color-surface: #0C0E12;
        --color-on-surface: #E3E5EF;
        --color-surface-variant: #22262D;
        --color-on-surface-variant: #A8ABB5;
        --color-surface-tint: #B4C7ED;
        --color-inverse-surface: #F9F9FE;
        --color-inverse-on-surface: #2F323A;
        --color-error: #F2B8B5;
        --color-on-error: #601410;
        --color-error-container: #8C1D18;
        --color-on-error-container: #F9DEDC;
        --color-outline: #72757E;
        --color-outline-variant: #444850;
        --color-scrim: #000000;
        --color-surface-bright: #292C34;
        --color-surface-dim: #0C0E12;
        --color-surface-container-lowest: #000000;
        --color-surface-container-low: #111318;
        --color-surface-container: #171A1F;
        --color-surface-container-high: #1D2026;
        --color-surface-container-highest: #22262D;

        --color-blue-a: #67d4ff;
        --color-on-blue-a: #004d68;
        
        --color-blue-b: #a1c9ff;
        --color-on-blue-b: #04409f;

        --color-red-a: #feade3;
        --color-on-red-a: #8d0053;

        --color-orange: #fdb582;
        --color-on-orange: #753403;
        
        --color-yellow: #f5b800;
        --color-on-yellow: #6d3a01;

        --color-green: #80da88;
        --color-on-green: #00522c;

        --color-gray: #c7c7c7;
        --color-on-gray: #474747;

        --color-blue-c: #60d5f3;
        --color-on-blue-c: #004e5d;

        --color-red-b: #ffb3ae;
        --color-on-red-b: #8a1a16;

        --color-purple: #d9bafd;
        --color-on-purple: #5629a4;

        --color-backstroke: var(--color-on-red-a);
        --color-breaststroke: var(--color-on-blue-a);
        --color-butterfly: var(--color-on-orange);
        --color-freestyle: var(--color-on-green);
        --color-medley: var(--color-on-purple);
    }
}



* {
    margin: 0;
    padding: 0;

    /* cursor: default; */

    color: var(--color-on-surface);
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    text-decoration: none;
    list-style: none;
    
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--color-surface-container);
    /* margin-right: 1rem; */

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;

    /* height: 100dvh; */

    /* overflow-x: hidden; */
}

span {
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}


button {
    cursor: pointer;
}

/* Main */ 

main {
    display: grid;
    margin: 0rem 0.125rem;
    /* max-width: 30rem; */
    /* margin: 0 auto; */
    /* width: 100%; */
}

footer {
    height: 2rem;
}

::backdrop {
    background-color: unset;
    display: none;
}

#page-meet {
    grid-row: 1;
    grid-column: 1;

    /* height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden; */
}

#page-meet.hidden {
    /* display: none; */
    opacity: 0;
}

#page-event {   
    grid-row: 1;
    grid-column: 1; /* Change me */

    max-width: none;
    max-height: none;
    border: unset;

    background-color: transparent;

    width: auto;
    height: 100dvh;
    overscroll-behavior: contain;
    /* overflow-y: auto; */
    /* overflow-x: hidden; */
}

#page-event.hidden {   
    display: none;
}

/* Page header (meet) */

#header-meet {
    display: grid;
    grid-template-columns: min-content auto min-content min-content;

    /* background-color: azure; */
    
    padding: 0.75rem 0.875rem 0.75rem 1.125rem;
}

.icon {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-page {
    width: 2rem;
    height: 2rem;

    fill: var(--color-on-surface-variant);

    margin: 0.25rem;
}

#header-meet > .title-page {
    font-size: 1.375rem;
    line-height: 1.75rem;

    margin: 0.375rem 1rem 0.375rem 1rem;

    /* background-color: aqua; */
}

.button-nav, .button-theme, .button-lang {
    border: unset;
    outline: unset;
    background-color: unset;
    fill: var(--color-on-surface-variant);

    transition: background-color var(--duration-short) ease-in-out;
}

.button-nav:hover, .button-lang:hover, .button-theme:hover {
    background-color: color-mix(in oklab, var(--color-surface-container), var(--color-on-surface-variant) 8%);
}

.button-nav:active, .button-lang:active, .button-theme:active {
    background-color: color-mix(in oklab, var(--color-surface-container), var(--color-on-surface-variant) 18%);
}

.button-theme {
    display: grid;
    grid-template-columns: auto;

    padding: 0.5rem;
    border-radius: 1.25rem;
}

.button-lang  {
    display: grid;
    grid-template-columns: auto auto;

    padding: 0.5rem 0.25rem 0.5rem 0.75rem;

    border-radius: 1.25rem;
}

.button-lang > .flag {
    width: 1.375rem;
    height: 1.375rem;
    align-self: center;
}

/* Page header (event) */

#header-event {
    position: sticky;
    top: 0rem;
    z-index: 5;

    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content min-content;
    column-gap: 0.75rem;


    background: linear-gradient(0deg, transparent 0%, var(--color-surface-container) 5%);

    padding: 0.75rem 0.875rem 0.75rem 1.125rem;
}

.button-nav {
    grid-row: 1/3;

    display: grid;
    grid-template-columns: auto;
    height: min-content;


    padding: 0.5rem;
    border-radius: 1.25rem;
}

#header-event > .title-page {
    font-size: 1.375rem;
    line-height: 1.75rem;
    height: min-content;

    margin-top: 0.375rem;
    padding: 0rem 0.25rem;

    /* background-color: aqua; */

}

#header-event > .sub-group {
    color: var(--color-on-surface);
    grid-column: 2;
}

/* General item components */

.label {
    margin-top: 0.375rem;
    padding: 0rem 0.25rem;
}

.label-secondary {
    color: var(--color-on-surface-variant);
}

.flag {
    width: 1rem;
    height: 1rem;
}

.sub-group {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 0.375rem;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    color: var(--color-on-surface-variant)
}

.sub-group > span {
    width: max-content;
}

.heat-and-lane {
    padding: 0rem 0.25rem;
}

/* Item event */

.item-event {
    position: relative;
    cursor: pointer;

    border-radius: 0.25rem;
    background-color: var(--color-surface-bright);
    transition: background-color var(--duration-short) ease-in-out;
}

.item-event:hover {
    background-color: color-mix(in oklab, var(--color-surface-bright), var(--color-on-surface) var(--item-opacity-hover));
}

.item-event.backstroke:active {
    background-color: var(--color-backstroke);
}

.item-event.breaststroke:active {
    background-color: var(--color-breaststroke);
}

.item-event.freestyle:active {
    background-color: var(--color-freestyle);
}

.item-event.butterfly:active {
    background-color: var(--color-butterfly);
}

.item-event.medley:active {
    background-color: var(--color-medley);
}

.item-event > .label {
    display: block;
    margin-left: 4.25rem;
    margin-right: 0.75rem; 
}

.item-event > .sub-group {
    margin-left: 4.25rem;
    margin-right: 0.75rem; 
}

.schedule-event {
    float: right;
    margin: 0.5rem 1rem 0rem 0.75rem;
}

.avatar-stroke {
    position: absolute;
    left: 1rem;
    top: 0.5rem;

    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem;

    /* Use mask instead of clip-path to support older Firefoxes */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url('./shapes/pentagon.svg');
}

.avatar-stroke.backstroke {
    background-color: var(--color-red-a);
    fill: var(--color-on-red-a);
}

.avatar-stroke.breaststroke {
    background-color: var(--color-blue-a);
    fill: var(--color-on-blue-a);
}

.avatar-stroke.freestyle {
    background-color: var(--color-green);
    fill: var(--color-on-green);
}

.avatar-stroke.butterfly {
    background-color: var(--color-orange);
    fill: var(--color-on-orange);
}

.avatar-stroke.medley {
    background-color: var(--color-purple);
    fill: var(--color-on-purple);
}

.event-number {
    padding: 0rem 0.25rem;
    color: var(--color-on-surface);
}

.event-gender {
    padding: 0rem 0.25rem;
}

.event-heat-count {
    padding: 0rem 0.25rem;
}

/* Item heat */

.item-heat {
    position: relative;
    display: grid; /* Required for correct expand/collapse animation */
    grid-template-columns: auto;
    overflow: hidden;

    background-color: var(--color-surface-bright);
    border-radius: 0.25rem;
}

.item-heat > .content {
    display: grid;
    grid-template-columns: auto;
}

.avatar-heat {
    /* display: none; */
    position: absolute;
    left: 1rem;
    top: 0rem;

    z-index: 3;

    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;

    font-weight: 500;
    text-align: center;

    margin: 0.5rem 0rem;
    border-radius: 1.25rem;

    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.avatar-heat.heat-merged-start {
    height: auto;
    bottom: 0;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0rem;
    border-radius: 1.25rem 1.25rem 0rem 0rem;
}

.avatar-heat.heat-merged-inner {
    height: auto;
    bottom: 0;
    border-radius: 0rem;
    margin: 0rem;
    padding: 0.5rem 0rem;
}

.avatar-heat.heat-merged-end {
    padding-top: 0.5rem;
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    border-radius: 0rem 0rem 1.25rem 1.25rem;
}

.header-heat-short {
    height: auto;
    display: grid;
    align-content: end; /* Enables collapse animation */
    /* padding: 0rem 1rem; */
    overflow: hidden;
}

.header-heat-float > .schedule-heat {
    float: right;
    margin: 0.5rem 1rem 0rem 1rem;
}

.header-heat-short:hover {
    background-color: var(--color-surface-bright-hovered);
}

.header-heat-short.collapsed {
    height: 0rem;
    /* display: none; */
}

.header-heat:hover {
    background-color: var(--color-surface-bright-hovered);
}

.header-heat {
    display: grid;
    grid-template-columns: auto min-content;
    margin: 1.5rem 1rem 0.75rem 1rem;
    /* border: 1px solid red; */
}

.header-heat > .label {
    display: block;
    /* margin-left: 4.25rem; */
    margin-right: 0.75rem;

    margin: unset;

    font-weight: 500;
    color: var(--color-primary);

    font-size: 0.875rem;
    line-height: 1.25rem;
}


/* .header-heat > .schedule-heat {
   
} */


.title-heat {
    /* font-weight: 500; */
    margin-top: 0.375rem;
}

.entries {
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.125rem;
}

.item-heat > .content {
    position: relative;
}

.item-heat > .content.collapsed {
    height: 0;
}

.label-lane {
    position: relative;
    display: block;
    z-index: 3;
    
    width: max-content;
    margin: 0rem 1rem;
    min-width: 2.5rem;
    
    font-size: 0.75rem;
    line-height: 1.125rem;

    /* background-color: var(--color-blue-a); */
    
    color: var(--color-on-primary-container);
    text-align: center;
}

.label-heat {
    display: block;
    min-height: 2.5rem;
    margin-left: 3.5rem;

    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
}

.flag-and-person {
    white-space: nowrap;
}

.flag-and-person > .flag {
    vertical-align: -13%;
}

.flag-and-person > span::before {
    content: ' ';
}


/* Item entry event */

.item-entry-event {
    position: relative;

    cursor: pointer;

    background-color: var(--color-surface-bright);
    border-radius: 0.25rem;
}

.item-entry-event:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.item-entry-event:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* .item-entry-event::after {
    content: '';
    display: block;
    margin-left: 4.5rem;
    border-bottom: 0.0625rem solid var(--color-outline-variant);
}

.item-entry-event:last-child::after {
    border-bottom: none;
} */

.item-entry-event:hover {
    /* background-color: var(--color-surface-bright-hovered); */
}

.time-entry {
    float: right;
    margin: 0.5rem 1rem 0rem 0.75rem;
}

.item-entry-event > .label {
    display: block;
    margin-left: 4.25rem;
    margin-right: 0.75rem; 
}

.item-entry-event > .sub-group {
    margin-left: 4.25rem;
    margin-right: 0.75rem;
}

.avatar-lane {
    position: absolute;
    z-index: 3;
    top: 1rem;
    left: 1.5rem;

    width: 1.5rem;
    height: min-content;
    line-height: 1.5rem;

    font-weight: 500;
    text-align: center;

    color: var(--color-on-primary-container);
    background-color: var(--color-surface);
    border-radius: 0.25rem;
    outline: 0.125rem solid var(--color-on-primary-container);
    /* clip-path: path("M 18.238281,1.5957031 A 16.465,16.465 0 0 0 10.857422,5.8574219 L 5.8574219,10.857422 a 16.465,16.465 0 0 0 0,23.285156 16.465,16.465 0 0 0 23.2851561,0 l 5,-5 a 16.465,16.465 0 0 0 0,-23.2851561 16.465,16.465 0 0 0 -15.904297,-4.2617188 z"); */
}

/* Section session (list of events) */

.session-date::before {
    content: ' · ';
}

.events {
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.125rem;
}

.events > .item-event:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.events > .item-event:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* Section heats (list of heats in an event) */

.heats {
    display: grid;
    row-gap: 0.125rem;
}

.item-heat:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.item-heat:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

/* Item person entries */

.persons-entries {
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.125rem;
}

.avatar-person {
    grid-row: 1/3;

    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem;
    margin: 0.5rem 0rem;

    clip-path: path("M 23.224358,0.86184887 34.961244,7.6381456 a 6.4496471,6.4496471 0 0 1 3.224823,5.5855564 v 13.552594 a 6.4496464,6.4496464 0 0 1 -3.224824,5.585557 l -11.736885,6.776293 a 6.4496467,6.4496467 0 0 1 -6.449648,0 L 5.0378241,32.361849 A 6.4496471,6.4496471 0 0 1 1.813,26.776292 V 13.223702 A 6.4496471,6.4496471 0 0 1 5.0378241,7.6381456 L 16.77471,0.86184887 a 6.449646,6.449646 0 0 1 6.449648,0 z");
    background-color: var(--color-primary-container);
    fill: var(--color-on-primary-container);

}

.flag-and-team {
    padding: 0rem 0.25rem;
    border-radius: 0.25rem;
    color: var(--color-on-surface);
}

.flag-and-team > .flag {
    vertical-align: -13%;
}

.flag-and-team > span::before {
    content: ' ';
}

.person-year {
    padding: 0rem 0.25rem;
}

.heat-merge-state {
    padding: 0rem 0.25rem;
}

.item-entries-person {
    display: grid;
    overflow: hidden;
    
    background-color: var(--color-surface);
    border-radius: 0.25rem;
}

.item-entries-person:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.item-entries-person:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.header-entries-person {
    display: grid;
    grid-template-columns: min-content auto;

    column-gap: 0.75rem;
    padding: 0rem 1rem;
}

.item-entries-person > .content {
    grid-column: 1/-1;
}

.item-entry-person {
    display: grid;
    grid-template-columns: min-content auto min-content;
    grid-template-rows: min-content min-content;
    
    column-gap: 0.75rem;
    padding: 0rem 1rem;
}

.label-entries-person {
    display: block;
    font-size: 0.75rem;
    line-height: 1.125rem;

    width: max-content;
    margin-left: 4.5rem;

    color: var(--color-on-primary-container);
}



.time-entry {
    grid-row: 1;
    grid-column: 3;

    margin-top: 0.375rem;
    font-weight: 500;
    font-style: italic;
    justify-self: end;
}

/* Item headers */


.header-heats {
    /* padding: 0.5rem 1rem; */
    font-weight: 500;
    color: var(--color-primary);
}


.header-title {
    display: block;

    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    color: var(--color-primary);

}

/* Button close */

.button-close {
    display: grid;
    grid-template-columns: auto min-content;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    fill: var(--color-on-primary);

    width: max-content;
    justify-self: end;
    border: none;
    outline: none;
    padding: 0.5rem 0.5rem;
    border-radius: 0.25rem;
    margin: 1rem;
}

.button-close > span {
    padding: 0rem 0.5rem;
}

/* Schedule */

meet-schedule {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    height: min-content;
    width: max-content;
    justify-self: end;

    /* Default color, planned state */
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    fill: var(--color-on-primary);

    border-radius: 0.625rem 0.25rem 0.25rem 0.625rem;
    outline: 0.125rem solid var(--color-surface-bright);
    
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

meet-schedule.schedule-heat {
    outline: 0.125rem solid var(--color-surface-container);
}

meet-schedule.started {
    background-color: var(--color-tertiary);
    color: var(--color-on-tertiary);
    fill: var(--color-on-tertiary);
}

meet-schedule.finished {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
    fill: var(--color-on-secondary);
}

meet-schedule.interrupted,
meet-schedule.aborted,
meet-schedule.cancelled {
    background-color: var(--color-error);
    color: var(--color-on-error);
    fill: var(--color-on-error);
}

:host(meet-schedule) > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;

    border-radius: 0.625rem;
    outline: inherit;
}

:host(meet-schedule) > span {
    padding: 0rem 0.25rem 0rem 0.375rem; 
    margin-left: 1.25rem;
}